Vern - INFOSYS 213 Spring 2005

Below is a brief summary of the changes that we incorporated into our second prototype. We then provide a detailed account of our design changes. Our approach was to meet as a group and discuss each of the 48 HE changes that the Alumni group recommended for us. We agreed on solutions for each violation and assigned it to a group member. We completed the majority of the suggested changes, while leaving a select few that we either disagreed with or wanted to discuss further and implement in the final prototype.

Most of our feedback was regarding layout that was counter-intuitive or visually unappealing. There were few, if any, violations that suggested fundamental problems with our interface. Our approach therefore was to utilize the coding skills of three group members to refine and enhance the interaction flow and to use the visual design expertise of two of our group members to improve the visual aspects.

Login Page

Provided a back link from the login page
Provided a back link from the forgot password page
see screenshot

Help

Context Aware help (A question mark in the corner that links
see screenshot

Visual

Created a big grid for the administrator to finalize a meeting. They choose one of the listed meeting times from the "finalize meeting" screen, which consists of radio buttons
Created orange buttons to unify the visual continuity of our UI, instead of having some orange buttons and some gray form buttons
Color-coded meeting blocks on the calendar to differentiate meeting status: confirmed to be decided, and cancelled
Labeled meeting blocks with the name of the meeting
see screenshot

Applet

Modified UI layout in several sections to increase button and control placement
Moved controls for the voting applet were moved to the top row and consolidated, bringing the controls above the fold and allowing the majority of actions to be usable without scrolling
Accelerated paging controls, accelerating applet load time by a significant factor
see screenshot

Create Meeting Page

Redesigned the page to be shorter and narrower so that the buttons near the end of the page could be viewed without scrolling
Allowed "Meeting Duration" to increment by one hour up to 8 hours and then by 15 minutes up to 45 minutes
Grouped the "Select Meeting Type" options into a standalone box at the right-hand side of the page
Changed the "Description" from a text field to a multi-lined text area. Added the "Meeting Location" text field
see screenshot

Top Header

Added the "Class Schedule" Tab
Redesigned the log out link
Redesigned the Welcome and date text in the header
see screenshot

Meetings Page

Removed the "Class Schedule" button from the left-hand bar
see screenshot

Meeting Detail Page and Sidebar

Changed "Finalize Meeting" and "Cancel Meeting" buttons to grey buttons for initiators
Changed "Finalize Meeting" to grey buttons for confirmed meetings
Re-worked some of the side navigation to increase consistency
Corrected the navigational behavior when clicking on a meeting link in the My Meetings page. It now takes you to a Meeting Detail page with information that has been better integrated
see screenshot

Contacts Page

Reworked contacts page, separating groups from individual contacts, and creating "create" forms for groups
see screenshot

TOP

Detailed UI Design Changes

OPEN/PENDING ITEMS

8. Gray Dates (Severity 2)

Meeting page: dates before March 30th are marked gray. Users may be confused of what that indicates. Please note that current date is April 1st. if the gray means that the schedule in the past, then March 30th and March 31st should also be grayed out.

24. Finalize Meeting (Severity 3) (Lilia) - pending

When the administrator needs to finalize a meeting, there is no clear way to choose one of the listed meeting times from this screen. I assume that the user needs to click on the "Finalize Meeting" button to pick a time. Instead, I suggest a radio button to choose one of the meeting time options.

Solution: Big grid thing.

40. Meeting Details (Severity 2)

Would dates and times also be listed under meeting history? It isn’t apparent now, but I’m not sure if there will be some sort of link to view past meeting details.

41. Long List of Attendees (Severity 0)

Not a problem yet, but what happens if the list of attendees is really long, or if the history is very long? This could get cluttered looking as the number of events grows.

COMPLETED ITEMS

Login Page

1 Can not return (Severity 3) (Sarita)

New Login Page: I cannot go back to the Login page from here if I suddenly remember that I have already had an account. Solution: Back Link

2. Can Not return (Severity 3) (Sarita)

Forgot Password: I cannot go back to the Login page from here if I suddenly remember my account password.

Solution: Back Link

3. Log Out Link (Severity 2) (Sarita)

My Meetings: The position of the “Log Out” link is not very obvious and conventional. I am more used to having it at the upper right hand corner. It almost looks like it's an action for the "My Meetings" page in its current location.

Solution: Move Link to above the date in far upper-right

4. Contrast (Severity 1) (Sarita)

Home Page: “Welcome to Vern” and “Today’s Date” can be hard to read. The color contrast is not strong enough. Also, today’s date is misspelled.

Solution: White text

5. Landing Page Mapping (Severity 3) (Lilia) - Completed

Meetings: It’s hard to see the correlation between the left side bar of meetings and the center calendar screen. Are users supposed to do a mouse-over to see the details? Rather than trying to map what has been voted on as seen on the left bar and the actual times in main calendar – could the calendar have colors to indicate that the meeting is confirmed definitely?

Status: Made meeting status subheads on side navbar match the color of their corresponding time blocks on the calendar.

6. Landing Page Info (Severity 2) (Lilia) - Completed

Calendar: It took a couple seconds to scroll over the different events to find the "Breakfast at Tiffany's" event. Putting the event name on the calendar would have helped reduce the time in searching for the event. This could be useful if a person has a really full schedule and just wants to quickly scan the calendar for events.

Status: Labeled the time blocks on the calendar with the names of the meetings.

Meeting page - Calendar

7. Hover Hint (Severity 2) (Sarita)

Calendar: It would help if there was some indication that hovering over the calendar will bring up events. If I have no meeting scheduled, I would never know about this functionality.

Solution: Context Aware help (A question mark in the corner that links to context aware help in a popup - using PHP to decide what help text to display like side.php)

9. Color Help (Severity 2) (Lilia) - disregarding

Calendar: There is no indication of what the different colors mean on the calendar (navy blue vs beige). If I have more appointments than I have free time, it would be hard to guess which is an appointment and which is my free (unoccupied) time.

Solution: a possible solution is to make the calendar background white to match the webpage background.

Status: I really don't think this is an issue so I will ignore it, unless I hear otherwise. -Lilia, 4/12/05, 10:45pm

10. 5 PM (Severity 3) (Benjamin, Lilia)

Meeting page: Since there is scroll bar indicating there are still contents under what’s currently shown in the Meeting page, it seems that the system doesn’t allow users to schedule meeting after 5 pm. However, meeting after 5 pm is not uncommon. If listing all the time slots from 8 am to, say, 9 pm will make the screen too crowed, then the system should at least have the option to select a time after 5 pm somewhere else.

Solution: Short term, 7-9. Long term: Scrolling or configurable applet? Status: New applet in CVS, 7:00 - 8:59.

11. Days Behind (Severity 2)

Calendar View: I don’t think I need to see 3 days behind (grayed out section in calendar). This information is not very helpful; I would be more interested in seeing out into what’s planned in the forthcoming days.

Solution: Declined.

Meeting page - Sidebar

12. Click Confusion (Severity 3) (Lilia) - Completed

When you click on the sidebar events links, all the events on the calendar disappear except the clicked on event. This is confusing. There is no indication of why that just happened. In addition, the highlighted event may not appear on the calendar without scrolling down.

Solution: Meetings link to the meeting detail page. Meetings detail has the vote applet, and the current information squashed to the left hand side.

Status: the link to the Meeting Details page with a calendar view has been done. However, I could use some help with the PHP, breaking up some awkward lines in the "votes" section.

13. Link Targets (Severity 2) (Lilia) - Completed

Meetings details page: When doing a mouse-over the initiators name in “Meetings details” page, I have no idea where this link will take me. A bubble help/tool tip/descriptive text kind of status message would help indicate that this will send an email to this person and is not just taking me to his/her profile. Ditto for attendees also.

Solution: Added small text describing "click to contact"

14. Consistency in Naming (Severity 2) (Jing)- done

Meetings page left panel: the bottom button is labeled “My Class Schedule.” However, the hidden descriptive text for the button shown when cursor is pointing on it is “My Weekly Schedule.” Users may be confused about whether class schedule equals weekly schedule. Some of the meetings are italicized and some are not. The difference between italicized meetings and non-italicized ones is not very obvious to me. The “Breakfast at Tiffany’s” meeting should also have a status symbol. Are the meetings arranged in a certain order? I cannot really tell.

Solution: My Class Schedule is now a tab

15. My Meeting Status (Severity 2) (Lilia) - Completed

My Meetings: Since the voted status symbol is a check in a square box, it would be more consistent for the cancelled status symbol to be an X in a square box. This would help indicate that these symbols are mutually exclusive, while the initiator is conceptually different.

Solution: Broke the left nav into "Confirmed, To Be Voted, Voted"

16. My Meetings Status II (Severity 4) (?)

Meetings: After clicking on a meeting listed under my meetings, it did not seem clear to me what had changed on the screen. I was expecting that something would appear in the middle of the screen, but instead the lower left hand corner changed. I had to look around my screen to figure out where the meeting details appeared.

17. Details Location (Severity 3) (?)

Meetings After clicking on “After lunch nap”, the meeting details appeared at the bottom When looking at the left side bar, there are two links to “After lunch nap” one under the voting and another with details. It’s hard to know where clicking on either one will lead. (As stated earlier, I thought that clicking on the “After lunch nap” with votes would lead me to the detailed screen).

Solution: See #12

18. Applet Buttons (Severity 3) (Benjamin)

When I view the marking events page, the table presented is a bit too long with the marking actions not visible until I scrolled down. Perhaps move the actions to the top of the table to make them more visible.

Solution: move the buttons to the top

19. Applet Task (Severity 3) (Benjamin)

When I am on the marking events page, there is no clear indication of what task I am to accomplish. Maybe a heading or some directions would help.

Solution: Text above the applet of "Vote on times for Meeting X" and add a "Submit Votes" button which takes you to a voting confirmation page. link on that page takes you to main page.

Marking events page

20. Original Calendar Access (Severity 3) (?)

After clicking on a link on the side bar, there is no navigation indicated to get back to the original calendar view. User should have a way to get back. I had to click on “meetings” again, though I had no idea if it would do something

Solution: Clicking on a confirmed meeting takes you to meeting details. Meeting details has a back button, returns you to main page.

Meeting Detail Page

21. Button Placement (Severity 3) (Jing)

The back button is placed at the bottom left, which may be hard to find.

Solution: Made the Meeting Detail sidebar shorter.

22. Button Placement II (severity 3) (Jing) - Done

The buttons at the bottom may be placed in an unintuitive arrangement, usually cancel is placed after “Submit”. In this case, “Cancel Meeting” comes before “Finalize Meeting”.

Solution: Rearranged the order of the buttons. Made a grayed out "Finalize Meeing" button for non-administrators and confirmed meetings.

23. Send Email (Severity 3) (Jing, Lilia making image)

Meeting Detail At the bottom there is an option to “Send Email”, but it isn’t clear if the email will be send to the initiator or all attendees.

Solution: Button changed to: "Email Attendees"

25. Detail Scrolling (Severity 3) (Jing) - Done

When I view a meeting’s details, the table presented is a bit too long with the result that I had to scroll down. The page has enough space, perhaps the table should be designed so that it does not require scrolling. The buttons are hidden form view unless I scroll down. Perhaps move the buttons to the top of the table to make them more visible especially if a user ventures here by mistake and wants to get back?

Solution: Made the Meeting Detail sidebar shorter.

26 Back button location (Severity 2)

On the details page, the "back" button at the bottom of the page is a navigation button, while the rest of the buttons are actions related to the event. Perhaps the back button should be represented differently. I'm not sure if I would have expected that clicking on the Initiator and Attendees names would take me to an email form.

27. Mail People Links (Severity 2) (Steve) - Done

When doing a mouse-over the initiators name in “Meetings details” page, I have no idea where this link will take me. A bubble help/tool tip/descriptive text kind of status message would help indicate that this will send an email to this person and is not just taking me to his/her profile. Ditto for attendees also.

Solution: replace email form with mailto: link and added a popup that explains what happens

28. Action Buttons (Severity 2) (Lilia) - Completed

Action buttons are inconsistent in look across different pages.

Solution: Make orange image buttons for "Create Meeting"

Status: created btn_createMeeting.gif

29. Admin Buttons (Severity 3) (Lilia) - Completed

On Meeting Detail page, when a meeting is confirmed, the buttons of “Cancel Meeting” and “Finalize Meeting” seem to be confusing. Should a confirmed meeting be cancelled or finalized?

Solution: PHP grayed out buttons.

Status: created btn_cancelMeeting_gray.gif and btn_finalizeMeeting_gray.gif.

Send Email confirmation page

30. Navigation (Severity 3) (?)

After sending the email, there is no navigation indicated to get back User should have a way to get back. I had to click on “meetings” again, though I had no idea if it would do something

Solution: Will this still be a problem if we get rid of the send email page?

Create Meeting page

31. Military Time (Severity 3) (Steve) - Done

Meeting Detail The system displays things in military time in the meeting details, but the calendar lists times in am/pm format.

Solution: Site-wide non-military time

32. Create Meeting Dropdowns (Severity 3) (Jing) - done

Create Meeting Under meeting duration, the times are listed in minutes. I find this not very intuitive to calculate 75 minutes as 1 hour and 15 minutes. Perhaps you can use different vocabulary in the drop down.

Solution: hour increments up to 8 hours, then 15 minute increments up to 45 minutes.

33. Create Meeting Buttons (Severity 3) (Lilia) - Completed

Create Meeting: The action button in this page is “Send Email,” which is inconsistent with the title of this page “Create Meeting.” Perhaps, the button should be called “Create Meeting and Send Invitation.”

Solution: Sure.

Status: created btn_createMeeting.gif and btn_sendInvitation.gif

34 Create Meeting Constraints (Severity 3) (Sarita)

The "Meeting occurs between" options are really confusing. I would have expected to be able to choose dates, not values like "1 week."

Solution: Get rid of "Between", replace it with a "Before X date" default to "anytime"

35. Create meeting Description (Severity 2) (Jing) - done

Create Meeting page: it would be better to use multi-line text box for Description, especially when the description is long.

Solution: converted to multi-line

36. Add Attendees Help (Severity 3) (Steve)

When adding attendees on the Create Meeting page, there is no indication of how to add them. Should users input attendee’s name or email address or both? How to separate each attendee, by comma or semicolon?

Solution: Partially solved by #37, need to put in help file.

37. Add Contacts (Severity 2) (Steve) - Done

It would be nice to give an option to contacts not in the contact list to the contact list when creating a new event.

Solution: Attendees field has been changed to be a text input field with auto-completion (a la GMail) for known contacts.

38. Long Meetings (Severity 3) (?)

On Create Meeting page, the options for meeting duration are limited from 15 minutes to 90 minutes. This design is obviously not capable of planning any meetings that are longer than 90 minutes. Although most meetings may end within one and a half hours, some don’t.

Solution: See #32

39 Large and Small (Severity 2)

Also, it would be nice to have documentation on how the options fitting large and small groups work.

Solution: See #7

42. History Listing (Severity 3) (Benjamin)

History At what point would items appear under history? Would all the meetings listed under My Meetings (Meetings page) also appear here if I voted on them? What about if I created them?

Solution: Yes.

43. Mailing Lists (Severity 2) (Benjamin)

In the Contacts page, individual email and mailing list should be separated, especially when a mailing list contains a long list of email addresses.

Solution: Get rid of individual contacts and just use groups here

44. Groups (Severity 2) (Pawned off onto Bill)

It's not clear how to create groups. Should each email be separated by commas? Semi colons? There is no indication you can enter more than 1 email address, since the label says "Email Address" instead of "Email Address(es)"

45. Navigation (Severity 3) (N/A)

The back button is located at the bottom of the calendar screen. It’s hard to find initially, since it is below the color-coded mark times. Instead, I would have preferred it on the left column under the instructions.

Solution: Not an issue once it is a new tab.

46. Assistance (Severity 3) (?)

There should be more cues or instructions on what you're supposed to do on this page. Also see HE eval for Marking Schedule Page

Solution: Added help button

47. Navigation and Proximity (Severity 4) (Jing) - done

My Meetings: The “My Class Schedule” button should not be placed in the Meetings section because they are not semantically related. It should be one of the top tabs. Another problem with this is that this link takes me to “My Weekly Schedule.” So, is this my class schedule or my weekly schedule?

Solution: See #14

Received Email

48. Templated Text (Severity 2) (Steve)

When you receive an email to vote on a meeting, there is limited documentation about where this email is coming from. I would suggest that there should be a default message body like "Vote for a meeting on Vern!" Or some default message subject, "[Vern Voting]: Nobel Prize Discussion".

Solution: Steve will create body text for mailto links.

TOP