Interactive Design Week 6 – Task Flow Diagrams & Use Case

For this assignment, we useD Media Space (http://mediaspace.washington.edu/) as the website of reference to diagram task flows and create a use case. I will create two task flow diagrams of how someone would add a “friend” or add a member to their network. The first diagram will show how this task is accomplished in the current functionality; the second is proposed improved version.

TASK FLOW DIAGRAMS

Current version:

Media Space task flow for adding a friend to your network

Media Space task flow for adding a friend to a user's network - CURRENT VERSION

Improved version:

Task flow for Media Space for adding a friend to your network

Task flow diagram for Media Space for adding a "friend" to a user's network - PROPOSED IMPROVED VERSION

USE CASE

The following is a use case for the proposed improved version of adding a friend to a user’s network on Media Space.

STEP 1.

User logs into Media Space website.

STEP 2.

User is taken to the Welcome screen, where there are various navigational options. One of these options is the Members tab.

STEP 3.

User clicks Member tab. Members tab has various search and filtering options:

  • General search – Primarily used for searching user’s names, but also can be used to search for classes, groups, topics… and anything that is a searchable field from any member page.
  • Class list – A list of current classes. This list changes per quarter.
  • Group projects list – A list of various group projects from the classes.
  • Topics/Interests – Based upon interests identified on member page.

STEP 4.

Decision time! User decides either to search or filtering with the various options for a member’s name.

STEP 5.

Search or filter result displays lists of names, as well as option to add each person as a “friend.”

STEP 6.

User clicks “Add a Friend” link.

STEP 7.

Message is displayed to user – “This personal has been added to your network.” New friend name is now displayed on user’s list of friends.

 

Interactive Design Week 4 – 1. Journal entry about poor usability

Media Space

A brief high-level heuristic evaluation of Media Space

A little background
Media Space is a online workspace built for the collaboration, innovation and communication of ideas through a closed social network. It is the brainchild of the Master in Communication in Digital Media program at the University of Washington. An alpha version launched in the spring 0f 2009; a beta version launched this fall.

High-level analysis scope/disclaimer
For the purpose of this brief evaluation, I used mainly used the home page, welcome page, top level navigation and the second-level pages to review the site. In addition, I only identified 1-2 problems under each heuristic usability principal.

About heuristic evaluations
Heuristic evaluations are quick and dirty usability evaluations that usually involve a small group of reviewers using a series of ten usability principals as a framework. The following heuristic evaluation principals were created by the granddaddy of usability, Jakob Nielsen.

______________________

Heuristic evaluation of Media Space – general observations
Media Space is clearly a work-in-progress. There is still a lot to do to aid the process of collaboration and to the identification of ideas. The founding designers/developers of Media Space worked hard to identify a different approach to social networking by putting ideas up front, rather than people. However, the process of collaboration is hard to follow.

I would like to note Media Space is an exciting and interesting concept, but a complicated one to implement.

Heuristic evaluation – using the ten principals for user interface design

 

Media Space home page

Media Space home page

1. Visibility of System Status –  “Where am I?” and “Where can I go next?”
The home page has the login information prominently displayed, clearly indicating that this is the action the user should do first. However, registration for new users is not as prominent and the assumption is that the user is a returning one. (Also, for this returning user, it was not identified that this is a “new” beta version of Media Space and that I needed to re-credential myself in order to login.)

The welcome text is clearly written and above the fold.

Examples of work helps the user understand what sort of collaboration and innovation projects have been done using this website. Sub-heads identifying these projects are unclear — for example, “SIFF-FinalStrategy” would be better understood if the header were “Social Media Proposal” or even “Media Proposal.”

Media Space welcome page

Media Space welcome page

After login, the user is taken to a welcome screen with a large area to start the process of idea collaborating. This field almost appears to be a design element, and not a text field.  A list of existing ideas or subjects would be helpful to start the process. This idea starter is a bit of a misnomer, since it appears to be mainly a version of microblogging with a 140 character limit. The display of ideas is by date and without any other filtering.

2. Match Between the System and the Real World

Since this is a new concept for a website, some innovation with terminology has to take place. “Ideas” are the product in this website, and collaborating or identifying similar ideas are part of the process towards making the website successful. On the other hand, having a section titled “pages” just invites confusion as to what could be — Additional web pages on the site? Your friends pages? Other favorite other websites (but… that’s probably what bookmarks are, right?)

3. User control and freedom

There is no “home” button to help with users should they lose their navigation. Clicking on the logo can sometimes boot the user back to the login page, rather than the welcome page (the site probably times users out for security, however, it is a bit startling to have to re-credential.) And the top level navigation stays static after selection – it does not identify where the user is in the site. By having rollover and status changes on the navigation (by changing color, for example), a user could more easily browse the site.

4. Consistency and standards

Some terminology is standard but some is not.  For example, the first navigational link is “About Us”, which is highly standard on any website. On the other hand, the term “docollab” used for the fifth navigation label was unknown to me. Using the full term “Document Library” or “Document Collaboration” would make the section understandable.

There are too many top-level right navigation areas. The best number on a website should be somewhere between 3-6 and there are 16 on Media Space! Combining some of these would help reduce confusion by users on what to do and where to go next. One combination could be”Friends,” “Groups” and “Members” could be combined and certainly some of the media sections (photos, videos) in a different group to make the navigation more streamlined.

Also, it’s unclear if there is any underlying organization to the top-level navigation.

It appears that the lower-level navigation has some inconsistencies as well. Some of this may be the result of 3rd-party plug-ins that use their own navigation treatment (see the “Discuss” area of the site.)

5. Error prevention
One way to reduce error and confusion would be to provide explanatory text on the introductory page to each section, especially in this early beta version of Media Space.

6. Recognition rather than recall

Having the navigation buttons change would help with helping the user identify where they were at all times. Simple breadcrumb navigation would also be extremely helpful in helping users track their paths through the site.

7. Flexibility and efficiency of use

 

Despite the fact that the site is password protected and supposed to encourage collaborative work, contextual content does not appear. In the next version, have the user’s projects, blogs, updates from friends/feed show up on the welcome page right after login.

8. Aesthetic and minimalist design

The site is pretty minimalist as is and does not contain much of extraneous design elements.  Increasing the size of the well or center section, would keep landscape-oriented photos from jutting underneath the right navigation.

The design uses a contemporary, appealing color and font. Layout is institutional and simple. Rotating photos on the home page of students, while showing differences in age and ethnic demographics, are all of men. Photography is not present on lower-level pages as part of the design.

The default font is small.

 

9. Help users recognize, diagnose, and recover from errors
Error messages are prominently displayed during login, along with plausible suggestions on the reasons for the errors.

10. Help and documentation
None found. Having a step-by-step instruction manual, as well as a written article on the expectations of the users of the site, could increase participation.

Conclusion

There are several easily-identifiable areas for improvement on Media Space. Suggestions would include improving the navigation top-and-lower level design, reducing and combining top-level areas, and adding explanatory text on top-level pages for each section.

_____________________________

Learn more about heuristic evaluations:

  • Step by Step Guide to Heuristic Evaluation -

    http://articles.sitepoint.com/article/heuristic-evaluation-guide

  • From the granddaddy of usability, Jakob Nielsen -

    http://www.useit.com/papers/heuristic/

Interactive Design Week 4 – 2. Design concept for an improved classroom/learning experience

My suggestion for improving the classroom learning experience would be integrating the microblogging service Twitter as a tool to encourage questions and stimulate conversation inside and outside the classroom. I created the following diagram, using a hypothetical character “Student X”, represented here as a cartoon, who is perhaps a little shy and having difficulty getting her question answered.

Diagram of how Twitter can be used in the classroom

Diagram of how Twitter can be used in the classroom

This is how it could look in practice:

classroom1

Interactive Design Week 3 – Wireframes

The assigment this week is to create a wireframe, either for a new site or a revision of an existing site.

I decided to do wireframes for a new mobile site using a website that I help manage at work. I have no experience with mobile websites or applications, except as an end-user.  I will show three tiers of wireframes – the home page, a 1st tier page (News Releases) and a 2nd tier page (a specific news release).

Existing site for  Fred Hutchinson Cancer Research Center (http://www.fhcrc.org)
fhcrc-home

New mobile site for Fred Hutchinson Cancer Research Center (http://mobi.fhcrc.org).

Home page:

mobi_v1-home-nohead
Tier 1 - News Releases List:
News Releases

News Releases

Tier 2 – Single News Release:

News Release - Specific one

News Release - Specific one

Interactive Design Week 2 – Good and Bad Design


Examples of Good Design

King Arthur Flour – http://www.kingarthurflour.com

King Arthur Flour

www.kingarthurflour.com

This delicious-looking site is an excellent example of evocative and informative design.  Warm and inviting in color and typography, the viewer is instantly seduced by the site by the image of a baked good right in the middle of the home page. The ingredients that make up any web page  – palette, typography, design elements, branding, content – are assembled together here to create a strong, consistent design. In fact, the design basically resembles a bakery or even a baked good, which in itself is an advertising for their product. Navigational hierachy is clean and clear. What could have been a standard and pleasant static brochure site for King Arthur Flour, is instead bumped by by the subtle integration of interactivity and call for community on the home page and sprinkled throughout. Interactivity include a link in the highlights area in the middle of the page to a pleasant video of baguette baking, a link to their Twitter account, and having their blog be one of the top navigation links. In addition, the the precious upper-left-hand real estate given to their 1-800 number!

KEXP – http://www.kexp.org

kexp.com

www.kexp.org

The workmanlike website for the radio station kexp.org is several years old, but it is still effective. Kexp.org knows it’s audience well and keeps the content up high, even with the addition of fairly large and highly placed advertisements. It’s a highly structured and controlled website, laid out on a rigid, narrow grid and yet there is a lot of personality and spunk behind every module, with effective graphics, still spunky color palette, and clear, explanative content that draws in the viewer. It’s an oldie, but it still works.

Examples of Bad Design

The Weather Channel – http://www.weather.com

weather.com

www.weather.com

Weather.com gets a thumbs down for incorporating it’s most important element on their site – the weather search box – into the banner advertising. Boo. In fact, the advertising and the content on this site can be indistinguishable. While this may be a matter for debate as to whether this should necessarily be a bad thing (can advertisers provide useful content?), it does mean that the user might have a hard time finding exactly what they want (such as the 10-day weather forecast for a particular area.) There is a lot of content on this site, and if it was better designed, providing additional content can be useful (see kexp.org above as an example of a site with a lot of content that a user might want to stumble upon), but instead of getting drawn in deeper to the Weather Channel (despite lots of video content) the site is difficult to navigate. They should do a careful analysis of their audience – travelers would be one for example – and figure out what would be the most effective way of providing value without provoking irritation.

Coffee Geek – http://www.coffeegeek.com

www.coffeegeek.com

www.coffeegeek.com

Coffeegeek.com isn’t the worst site but a very typical small site.  It suffers from the mediocrity of  templated design. It has plenty of good, original content, but unfortunately this content is buried in an endless series of table cells, which look like advertisements. Discussion boards are hard to understand. Beveled headers are narrow, oddly right-aligned and and use a rounded typography so they are difficult to read. Based on the visual design alone, there is little trust by the viewer that there would be good content in this site.

Compare Design

A good example of old v. new (simplistic) design is for Holiday Inn Express:

Old:  http://www.ichotelsgroup.com/h/d/ex/1/en/home

New:  http://www.holidayinnexpress.com/hotels/us/en/reservation?optin=true

Internet craziness

And of course there is always http://timecube.com/, for your little dose of internet-crazy.