r4 - 03 May 2007 - 09:00:22 - PriscillaChungYou are here: OSAF >  Journal Web  >  ContributorNotes > PriscillaChungNotes > OrderOfImportanceWebUI

Order of Importance on the Web UI

Mimi and I have been iterating on the visual elements on the web UI. We decided to group elements on the web app and compare our notes to see if we're both on the same page. Our combined lists will help shape the web UI and figure out which items on the app should stand out and which items should set back. Visually this is a way for us to differentiate information hierarchy and visually will be be done by using color treatments, size, layout and location.

Ideally when we have some mock ups, I'd like to take a pass at showing it around to some people not associated to the project. Current conversation on the list.

First order UI elements: What needs to pop, etc...

In my opinion, no more than three items should stand out on the UI. Of course a rule of three is always a useful guideline, but the point is that if there is more then three items, then everything is popping and nothing does.

Making items stand out are created visually by color, size, and location/layout. Here are the three items which I consider as first order UI elements:

  • Logo. This represents the branding. It is the only identity for the product and you need to show the value of the product. At this point the value of the product are the events, the calendar and the dashboard triage. What does the user think about when they first look at the screen? What's going on? The user is going here for a reason for some relevant information specific to them.
  • The items in the table (on the dashboard), since it is the default screen and holds all the item information in the collection. It is the most important element on the screen. In the case of when the user selects calendar view, it is the calendar canvas and the lozenges.
  • Critical errors. For example, this collection has been deleted and the web UI is no longer functional. These are currently displayed as dialog boxes which are center to the screen and the user is not able to do anything on the web UI until they dismiss the dialog box.

Stuff users need to see immediately, whether or not they're looking: This sounded a bit too close to the first category, so I created a new category:

Stuff which needs to pop only when the user focuses on it or a specific task

What do I mean? These are stuff normally in the background until the user does something to bring it to the foreground. It's really important to see event details when you select an event, but not all the time.

  • Detail view: this should be emphasized only when a user clicks on an event/item. This includes the save and remove button on the detail view since there is no auto save.
  • Quick item entry in the dashboard: This is the dashboard equivalent of creating an event in calendar.
  • View selector from calendar/dashboard view: This dual view is key to the product
  • Highlight on the lozenge or item in the dashboard
  • Mini cal to figure out the date of the event
  • Mark up tool bar
  • Triage toggle

Stuff users need to be find easily when looking for them ie. how to subscribe

  • Subscribe drop down list for users who want to move the information into their own calendaring application, export .ics files, feed reader etc. (I'm a bit confused if this is really a top level item or should be down by where users should easily find. If a user is going to use their own application and not the web UI, then this should be a top level item. If this is some one who uses the application then it should be a third level item. In any case, I guess I'll just leave it here for now—specifically for 2 different users.)
  • Alert bar for warning such as time zone information. This is temporary and does not need to be in the user's face such as the serious error dialogs. This is more of an informational dialog, things will work on the application, but the information viewed may not be accurate unless the user does something or sometimes, there is no ability to fix it just yet.
  • Sign up for an account: As I see it, services on the web as I see it is very much a 'try before you buy'. It's important for user to know where to sign up, but it's more important for users to want to sign up.
  • Add collection to account/log in: If you're logging in you're already sold.

Stuff users can find on their own time ie. as ppl will use the ui, they will discover it.

  • Tabbing to all of the form elements to creating an item on the detail view.
  • E-mail this event
  • Go to date
  • Forward back buttons on calendar and pagination on dashboard.

-- PriscillaChung - 26 Apr 2007

Edit | WYSIWYG | Attach | Printable | Raw View | Backlinks: Web, All Webs | History: r4 < r3 < r2 < r1 | More topic actions
Open Source Applications Foundation
Except where otherwise noted, this site and its content are licensed by OSAF under an Creative Commons License, Attribution Only 3.0.
See list of page contributors for attributions.