GR6 - User Testing

Design

Final Design (TODO: Label each screenshot)

1. Login Screen

2. Tutorial Screen

3. Home page: Position of logged-in user is shown on map with blue dot and position of friend is shown as green dot. 

4. Home page: Position
of friend is shown on map with green dot <merge the two>

5. Friends' list

6. Friend Profile TODO

7. Search page to add friend 

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

9. Event List 

9. Create-Event page  

10. Participants selector  TODO 

11. Location Selector 

12. Confirmation message on sending event invite TODO

13. A bubble appears on Notification button when new notifications are received 

14. Notification List: unread notifications are highlighted in beige background TODO

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

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. TODO

17. View Proposed change page

18. if proposed change is rejected, the friend who proposed the change is notified. TODO

19. if proposed change is accepted, all the invitees are notified

18. Logout and help option buttons TODO

 

 

 

 


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