You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

GR6 - User Testing

Design

Final Design (TODO: Label each screenshot)

1. Login Screen

2. Tutorial Screen

3. Home page showing the position of logged-in user on map with blue dot

4. Home page showing position
of friend on map with green dot

5. Friends' list

6. Search page to add friend

7. Profile page of a person currently not added as friend

8. Event initiation page

9. Participants selection page (this is wrong snapshot -- this is view participants list -- add snapshot with check boxes on right)

10. Location Selector

11. Confirmation message on selecting a locatoin

another create event page - get rid of this

13. A bubble appears on Notification button when new notifications are received
unread notifications are highlighted in beige background

14. RSVP page. it has propose change button at the bottom

15. Event when viewed on map shows the RSVP responses from all invitees in form of color and textured line connecting them from the venue.
a small legend on top of screen explains what different colors and textures stand for.


Design Decisions (TODO: Fill in all remaining designs and their descriptions)

Title

Screenshot

Alternatives

Description & Justification

1. Title Screen

 

  • Our first implementation of the title screen actually centered the form fields.
  • We opted to shift the form fields to be slightly higher (40% way down the screen), because we realized that otherwise, the soft-keyboard would actually occlude the Log In button. (Pilot Testing)

2. Tutorial Screen

 

  • N/A
  • One of the biggest issues raised from our heuristic evaluators was that the application's minimalistic design and gave users a slight learnability problem when confronted with the application for the first time. The evaluators suggested for some kind of tutorial or instructions to walk first-time users through the the main features of the user interface. We thus implemented a by-passable tutorial screen which walks users through the various icons and what they meant on the home screen, as well as explanation of the icons on the map view. (Heuristic Evaluation)
  • Based on our user tests, many of them showed approval and were welcoming of the tutorial screen. (User Testing)

3. Bubble showing the details of the person have a close button on top right corner

 

  • tapping on a dot denoting a persons position opens a bubble showing the details about that person.
  • previously this bubble was dismissed by a second tap on the dot.
  • our new design have a small "x" at top right to close the bubble.
  • people found it hard to figure out how to close the details bubble, because of the missing affordance, even though this feature is externally consistent with google map applications.
  • to alleviate this problem we made the close button visible.

4. Profile Page

 

  • previously all the profile details were enclosed in a bounded text box.
  • in our new design we removed the boundaries.
  • people confused these boxes as editable text box.

5. Map view of event

 

  • previously the RSVP was indicated only by difference in color (red, green and gray) of the connecting lines.
  • now it is indicated by both colors and texture. and a legend is displayed on upper right corner to help users learn the meaning.
  • choosing only color as indicator proved to be ineffective because it was hard for color blind people to distinguish these colors.

6. Notification Page

 

  • originally all the notifications were displayed in similar manner, irrespective of whether they are click-able or not. 
  • now the notification which may require user to perform an action or have further details to show have a tine arrow on right, giving the affordance to show more.
  • users faced difficulty in understanding why tapping some notifications redirects them to another page while on some nothing happens.
  • to let user distinguish these different kind of notifications visually we placed an arrow for the notifications which are click-able.

7. View Proposed Change page

 

  • the field of proposed change is highlighted in red and the original value is shown in brackets so that user can recognize the change  instead of trying to figure out which field is different.
  • originally there was no indication for the change in event details that is proposed. and user had to remember the original values and compare it with the new one to figure out what the proposed change is. 
  • this violated the recognize instead of recall Nueman heuristic. therefore we provided the visual contrast to indicate the change.
  • No labels