Archive for May, 2009

Some thoughts on graphical user interface design (GUI): part 2

I wireframed a tutor scheduling page to  highlight some of the recommendations that I had made in my earlier post.  I’m sure you will agree that this is a much better aesthetic experience than what is currently available but the application behavior is what I wish to highlight here.

(1) Left panel is menu for all pages in the application.  It appears on every page so that users do not become lost in the application.  A color and icon change indicates current page.

(2) Top numbered panel serves as a breadcrumb for the current page.  Colors change to indicate to users where they are in the process.  Number icons change as well for accessibility reasons.

(3) A dialog box appears at the top of the page to indicate what users should do first.  It disappears once users make an initial selection.  Experienced users may disable most dialog boxes through a user preference wizard.

(4) A question mark icon is displayed at top right of screen.  Clicking it opens a text modal box that might also feature a video demonstration.  This feature is contextual and brings up different information depending from what page it is clicked.

(5) A question mark icon is displayed at key functions in case users have specific non-global questions.  Mouseover opens up a pop-up text window.  The four here explain what services are offered by each center and the particulars of group and individual tutoring.

(6) To assist users with navigation, selections are featured in a logical and prescribed order.  Users have to think less about what they need to do.  This increases the likelihood that their default behavior is the correct one.

(7) Users cannot move forward until they complete the form in the order prescribed. Here course, date, type, and submit buttons are not selectable until center is selected.

(8) Course selection is automatically generated either from a predefined list of subjects or from a user’s own course registration previously uploaded by an administrator.

(9) Courses for which there are tutoring sessions are presented differently than courses for which there is no support.  Perhaps using color, icon, or different font such as italics.

(10) Once users have selected a course the date, type and submit button become selectable.  Date and type are optional so they do not have to select in order to submit.

(11) The date can either be written in or users can click the calendar icon to bring up a calendar graphic popup to select start and end dates.

(12) Calendar and start/end input boxes validate in real time so that users cannot enter other than appropriate dates as determined by administrator preference selection.  Here that is seven days in advance.

(13) Clicking submit displays a modal window of search results.  Users can select their preferred appointment times from this modal window without leaving this page.

(14) From the modal window, users will be able to select multiple appointment times before confirming their selection.

(15) Real time validation occurs here as well.  Users cannot select a session that has already ended.  They also cannot schedule an appointment while it is ongoing unless an administrator selects this preference feature nor can they schedule appointments that conflict with current selections or previously confirmed  appointments.

(16) If a search produces no results the user is informed of this fact, explained why it occurred, and provided with next step options.

(17) Users must either confirm or cancel their selection(s) before closing the modal window otherwise they will receive an error message.  This feature prevents them from logging out without completing the scheduling process.

(18) Once the student confirms they receive a confirmation successful message before the modal box collapses.

Since most users will be using the application without an initial demonstration it must perform logically, and handle errors in an intelligent manner.  This design gives users a better visual, functional and feature rich experience while minimizing frustration, confusion, and errors.  The helper features and error handling is unobtrusive and therefore won’t frustrate experienced users.  The design while aesthetically pleasing is utilitarian.  It is neither frivolous nor extravagant.