Youth Forum - A Resource of the Asia Society

Youth Forum Usability Recommendations
from Michele Anciaux Aoki 2/12/2004

Based on my own review of the Youth Forum site and the results from usability testing with nine individuals, I offer the following recommendations for the Site Design of the Youth Forum Web Site

Site Design - General YF pages
 

Page/Component Recommendation Priority (High Med)
Top Nav Add CONTACT US link to all pages Medium/High
Home Page for YF
(Left Nav)
Make LOG IN and Register less prominent, for example, move them to left nav below the common navigational links. (The text isn't just right yet, but you get the idea.)
Orientation
Project Showcase
Skills Toolbox
To create and share projects in your classroom:

Register
   (It's free!)

Once your registration's been approved, LOG IN:

E-mail Address:
Password:
Log InForgot Your Password?

Note: Increase size of E-mail address field (to make it easier to locate errors when they occur in typing).

High
Home Page for YF
(Main text area)
Provide a little more information in the main area of the home page about what to expect in the three main sections, e.g.,

Explore the Youth Forum site:

  • Help Orientation: Learn more about how to use the Youth Forum site and manage projects in your classroom
  • Project Showcase: See examples of excellent Youth Forum projects built by teachers and students
  • Skills Toolbox: Access resources, such as glossaries, maps, writing tips, etc., to help students build successful projects

Start a Youth Forum project in your classroom:

  1. Register with the Youth Forum (it's free)
  2. As soon as you receive notification that your registration is approved (within about 24 hours), LOG IN to the Members Area:
E-mail Address:
Password:
Log InForgot Your Password?

You'll be taken to the Members Home page. Follow the instructions there to start your own project.

Medium
HELP ORIENTATION This probably doesn't need to be very fancy --just some text explaining how to use the site and, in principle, what one needs to understand about projects. I wouldn't recommend bringing in a new medium (such as Flash). Instead make the site easy to use. Focus help more on figuring out how to design and use projects. Medium
PROJECT SHOWCASE Need to more clearly differentiate this from AVAILABLE PROJECTS.

Can the project descriptions be included in the list to provide a better context for choosing a project to view? (Titles don't tell enough. Teachers are interested in the content.)

Change Japanese terminology ("Introduction to Projects") because it sounds too similar to Help/Orientation.

Medium
SKILLS TOOLBOX Name Skills in a way that makes them sound "skill like" (make it clear why a person would go there or for what type of project).

Make relationship to projects clear. (Is that possible?)

Consider more descriptive translation in Japanese (currently it's a literal translation -- not meaningful to Japanese speakers).

Medium
Project pages (general) Simplify the YF Navigation (it takes up too much space and distracts from the content. (See, for example:
http://youthforum.askasia.org/pub-bin/gallery.pl?project_instance_id=38

Get rid of all animation on project pages (it distracts from the content).

Make project descriptions more visible (perhaps on white background or different font?) -- something so that they don't blend in with general site navigation.

High/Medium
Virtual Gallery project template Change the navigation for the slideshow.

Instead of vertical navigation:

Previous  
Next Nebuta Festival Dress

Make navigation horizontal.

Move overall navigation to the same area.

Number of Slides3
Now Showing2
Back to the Beginning

For example, if you're viewing slide 2)

<< BACK TO THE BEGINNING          NOW SHOWING SLIDE 2 of 3

< Previous Slide                                                             Next Slide >
(slide 1 desc)                                                     (slide 3 desc)

(It's not crucial to display the slide title if that's not easy to do.)

High
Forum project template Get rid of animation (very distracting on this template).

Reduce graphics on tabs. (People aren't seeing the labels well.)

Make project description more visible (perhaps in white text area?).

Bold Story titles to make them stand out?

Consider (if possible) adding a [Select] button for the story pages (because people are struggling to see what to select -- story title or date (not intuitive) -- and it depends on which tab you're viewing.

Need more intuitive name than Index. Maybe Message Index? Whatever it is -- label that page so they know what the Index is.

High/Medium
Newsletter project template Get rid of animation (very distracting on this template).

Jagged line on left doesn't clearly indicate that it delineates each separate story. (Is it helpful?) Make it clearer how you select a story to view (maybe include link underline?).

Add Table of Contents label on TOC page so that people know that's what they're viewing. (Otherwise they don't know what they're going back to when they select it from a content page.)

High/Medium

 

 

Site Design - Members Area
 

Page/Component Recommendation Priority (High Med)
Top Nav Add LOG OUT link to all pages for Members High
Home Page
(Members Area)
Link titles (TEACHERS' MODULES and AVAILABLE PROJECTS) not too intuitive. Can we make them more descriptive? Maybe:
PLAN A LESSON | APPLY FOR A PROJECT

In what way is this a "My Account" page? Need to make the purpose of the page clearer. Make instructions more explicit -- action-oriented.

Rearrange page (maybe don't need left nav?) so you can list Projects In Progress and Projects Finished side by side (or Finished project might fall below the fold -- maybe that doesn't matter?).

Somewhere need to provide info about managing passwords. (Do teacher and students use same password?)

High
TEACHERS' MODULES I didn't test these much since we didn't have any really good examples, but teachers clearly want lesson plans. We need to develop some good examples. High
AVAILABLE PROJECTS Difference between these and Project Showcase is not clear. Need better terminology.

Mechanics of Collaboration not clear. (Can two American schools do a collaborative project?) What exactly is different about doing a Collaborative project?

Might need to list Independent and Collaborative projects side by side (or Collaborative ones will fall below the fold).

People expect names of projects to somehow indicate whether they're Independent or Collaborative. How can we fix that?

High
Apply to Project page Make project description MUCH more visible. People don't find the description very helpful in deciding about a project (they don't even see it).

Change Japanese translation of "Subject" (currently it's "Theme" - should by kyoya).

High
Apply to Project Confirmation page Not clear what to do next. (OK icon is not intuitive.) How about changing it to a link, i.e. 
Return to My Account page or Return to Home page?

(I'm not sure people perceive the home page as "My Account" page.)

Medium
Projects: In Progress (on Home page) Maybe add Select or Edit button before project names, e.g.,

[Edit] US-Japan Culture Box Mystery - #40

or add more explicit instruction about selecting the title, e.g.,

Projects: In Progress

To add or change project content, select a project title from the list:

US-Japan Culture Box Mystery - 40

Medium
Project Report page It's not completely intuitive to arrive on this page with the blank memo form so prominent. And lots of wasted space on right side.

Need  more explicit and visible instructions.

Need to add Project Description (under title) and clearly differentiate this content from the site instructions.

Instruction OPEN THIS PROJECT is not intuitive (they think that's what they just did).

? Help link appears for first time. Why not more general across the site?

Very high
Project page
(Newsletter)
Need project description somewhere (people forget why they're there).

Instructions are not obvious (e.g., ADD A NEW STORY). Not clear what to do to edit a story.

Is there any way to read all stories in sequence (or do I have to always go back to TOC)? Can the stories be printed?

High
ADD NEW STORY
EDIT STORY
Use space better so that ADD STORY button is visible without scrolling). Same with SAVE CHANGES. Medium
Project page
(Forum)
Instructions are not obvious (e.g., SEND NEW MESSAGE). Not clear what to do to edit a story. (Also, the message is not being sent; maybe better to say POST NEW MESSAGE.) High
Project page
(Virtual Gallery)
Make Jump to option more obvious (in addition to nav changes described above).

Add Help instructions about adding attachments (only one at a time).

Medium

 

 

Site Design - Admin Area
 

Page/Component Recommendation Priority (High Med)
Top Nav Add LOG OUT link to all pages for Admin

Add Admin items to Top Nav on all Admin pages (so you don't have to go back to Home page)

High
MENU ITEMS Very "techy" -- not too intuitive to educators. (Maybe it's OK if only limited audience doing Admin functions.) Medium
Instructions Make these more explicit on pages. Medium
Selection process Make how you select items more consistent. Sometimes you select a title, sometimes a #, sometimes an [Edit] or [Select] button. Medium
Project Showcase Manager Give warning when deleting a project from the Showcase High