...

GR2: Design

Who We Are

• Brian Chang
• Sophia Cui
• Viksit Arora
• Sarah Han

...

This design focuses on creating a simple, easy to use, visual interface for the case of having a tiny screen interface. This design maximizes the screen real estate by choosing key tasks and using large clickable buttons and visible icons, such as in the case of the newsfeed to allow for easy click-ability.  There is a main side/top header bar that allows for easy access to your friends, homescreen, etc.  Furthermore, the search bar at the top of the homescreen allows for the user to easily search and find key friends or posts regarding a topic of interest. 

Sarah Han's design 2

This design uses icons and graphic visuals as cues instead of text for the horizontal header bar at the top of the page for easy maneuverability between pages. The user can can easily click back and forth between different categories and text is kept to a minimal.  The corresponding tab is highlighted when a certain page is in focus.

Image Added
Image Added

Sarah Han's design 3

This design uses a visual map metaphor as a way to group tasks into subcategories. Icons are used as links to increase the screen real estate for each option. Just as a map has different locations, each area on the screen is delegated for a different category. Clicking on the category takes you to a separate page specifically for that task, i.e. coffee/video chat, connecting with with friends, family, etc.

Image Added

Design and Storyboards

Storyboard 1

...

• Movie reel header allows for users to easily scroll/click back and forth in case of accidental page selection
• It's not clear that when clicked on the portrait an "add friend" dialog will pop up. There should be more visual affordances to indicate the "add friend" functionality

Storyboard 3

...

Storyboard 3 Description

...

This design tries to take the idea of stacks, an extensively implemented search-bar, and controlling your feed idea and merges them with some modification. It also has a dedicated page for "video hangouts", with related menu options. We may also allow both "stack" and "stories" views for all pages. 

...

• Most views (although not clearly visisble here) have a back/close affordance
• Most actions have undo options
• Search with live results, can allows users to modify search keys to get better results
• Search has "category : suggestion" type suggestions.

Storyboard 4

...

Storyboard 4 Description

...

This storyboard design revolves around a very simple and visual navigation box, which is a stretch metaphor for a telephone key pad. The division of nine squares to different tasks is a more natural partition for seniors rather than nine menu items. In addition, the visual icons and pictures send a clear signal of the relevant task at hand.
When a user selects to ask a question, the navigation pad zooms to the top left corner and the rest of the screen real estate is freed up to display questions he could answer. Similarly, a user can select to join a live chat, for which the navigation zooms out and the user is brought to a simple video chat interface where he could contribute to the live chat and see a list of participating members. The user could click on any user to view his profile and add them as a contact.

Analysis:
Learnability:

Efficiency:

Safety:

Storyboard 2

...

• The 9 tiles layout is analogous to the phone pad. The users will know each tile corresponds to one functionality
• The home button at the upper left hand corner is externally consistent with other apps

Efficiency:

• Having each of the tiles, except the middle one, extend to the boarder, the hit zone for each icon becomes infinitely big. Users can hit the functionality he/she wants much quicker with less chance of error
• The menu is flat. All the functions are one click away, and the home menu is also one click away, making navigation very straightforward and efficient

Safety:

• Large icons, visual cues and buttons is safer in terms of less accidental mis-clicks
• Most actions do not have a natural undo option, which decreases efficiency, but also means elders have two steps to go back (home + choose again)
• Selecting home may cause progress loss in terms of accidentally clicking on home, say if elder was typing an answer