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.)
To create and share projects in your classroom:
(It's free!)Once your registration's been approved, LOG IN:
E-mail Address:
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:
- Register with the Youth Forum (it's free)
- 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:
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=38Get 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:
Nebuta Festival Dress Make navigation horizontal.
Move overall navigation to the same area.
3
2
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 PROJECTIn 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.,
To add or change project content, select a project title from the list:
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 STORYUse 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
