Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

Storyboard 1 - Physical Metaphor

The purpose of this design is to create a user interface that the user can easily relate to by physical metaphor.  This is accomplished with the use of tabs and popups to resemble everyday items familiar to the user such as a physical calendar, bulletin board, post-it notes, address book, etc.

1A


This is the home screen for the user in this interface.  The left screen is broken up into three tabs labeled calendar, contacts, and mail.  These tabs resemble folders for the user.  The top right shows a current daily to do list fir the user that is currently logged in.  This is in the form of post-it notes.  Directly below the to-do list is a small booklet pertaining to a particular day.  Similar to a day planner, this booklet shows a 24-hour day filled with blocks that represents events or tasks.  In Mary's case, she needs to add an event for Christine.  She can do so by going to the calendar tab, selecting the day the event is scheduled in ye calendar, and picking "Add event".

1B


When creating an event, the day planner section of the screen will change to a page labeled "New Event".  Here, Mary can simply fill in the empty fields to the common questions Who, What, When, and Where.  However, under Who, there are two categories; (1) the people attending the event and (2) the people that are driving to/from the event.  The layout is similar to that of a notebook and can simply be closed when finished.  After Mary has entered all the information, she can now view the calendar. 

1C

After the information has been entered, the user can now choose which tab they want to be in.  With the event in the calendar, the can select a day and see what is schduled for that day in the 24-hour day scheduler.  This allows the user to simply click on individual days of teh month and see updated events in teh scheduler without going back and forth between pages. 

1D

With a specific day selected, the user can see what events/tasks are scheduled for that day.  The calendar will be color-coded if there is a conflict or if an event does not have an available driver yet.  In this case, Mary notices that her sons Andy and Barry have rides to there events but Christine dies not.  Her task now is to find a driver.

1E

Similar to an address book, Mary can access the Contacts tab to view all people she knows.  It will contain general information peratingiong to a person such as familty, friedn, group, etc.  Other information may be address and/or affiliation.  Here, Mary can select which people she wants to reach out to by tagging each contact with a message flag.  Flags are great for users who are most familir with books and notetaking rather the computer user interfaces.

1F


After flagging the people Mary wants to message, Mary can access her Mail tab.  Her mail allows her to reach out to other parents by sending a message to multiple people.  The people she flagged eailer will auotmatically fill up the "To:" section of the message.  When she is done typing a message, sge can simply press Send and wait for a response.  Users familiar with email will be able to easily graps how to reach out to other parents.

1G


After sending the message, Mary waits for a response.  When someone answers her message, it will show up in her inbox.  There will be notifications to let the user know that thee is something unread in her inbox.  In this case, Mary sees that Olivia is able to drive Christine to the event. 

1H

After reading her inbox, Mary can now go to the calendar tab and update her calendar.  Knowing that Olivia can now drive Christine, she goes to the day the event is scheduled and finds the current event that still remains in conflict.  She goes to the driver section of the event and chooses "add driver".  Here, Mary can now select Olivia as a driver and the problem is now resolved.

Learnability

  • Pros
    •  Physical metaphor allows non-technical users to familiarize themselves with the interface
  • Cons
    •  Affordances may not be initially seen by user (need to learn by using)

Efficiency

  • Pros
    •  Day scheduler allows easy access and glimpse of planned events and tasks
    •  To Do list is updated and easily accessible
  • Cons
    •  Need to Select people in contacts first before sending a message
    •  Way to search for an event is to click on each day separately

Safety

  • Pros
    •  Separate screens and tabs to keep the user focused on either calendar view, contacts, mail separately
  • Cons
    •  Pop-ups on calendar can be misinterpreted as they overlay on top of other day blocks