Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Section
bordertrue
Column
width75%

The overall design of this website focuses on simplicity to facilitate usability, learnability, and efficiency for elderly users. Each page was designed to highlight the functionality available to the user and eliminate clutter and noise that may distract and detract from the user experience.

Final Design

Key Features

Key Design Decisions & Alternatives
(specific evaluation influence is noted in parentheses: paper prototyping, heuristic evaluation, and user testing)

  • the homepage features large colored tiles
  • each tile links to the associated page
  • tiles grey out on hover for visible feedback
  • tiles provide navigation to the rest of the website
  • center tile is black & white to highlight user
  • generous tile sizing:
    1. facilitates ease of use by increasing target size (of each link) 
    2. maximizes use of screen space
  • color combinations of neighboring tiles were carefully considered to maximize contrast and aesthetic appeal (heuristic evaluation)
  • coloring of center "user" tile was differentiated to distinguish this tile from the interest focused tiles (heuristic evaluation)
  • tile icons were updated to provide more externally consistent icons (paper prototyping, heuristic evaluation)
  • hover feedback was implemented to provide visual cues (paper prototyping, heuristic evaluation, user testing)

  • the health questions page features the ability to ask questions
  • previous health related questions are featured below
  • each question box highlights on hover and links to an answers page
  • feedback such as box highlighting on hover was introduced to increase learnability & efficiency (heuristic evaluation)
  • various layouts for this page were considered to maximize learnability, efficiency, & ease of use (paper prototyping, heuristic evaluation, user testing)
  • button text such as "Submit" versus "Post Question" were considered to maximize information scent and convey functionality (paper prototyping, heuristic evaluation)

  • the question-answer page features the ability to post answers to a question
  • users can edit previous responses
  • buttons provide visible feedback on hover
  • button text such as "Submit" versus "Post Answer" were considered to maximize information scent and convey functionality (paper prototyping, heuristic evaluation)
  • various layouts for this page were considered to maximize learnability, efficiency, & usability (paper prototyping, heuristic evaluation, user testing)
  • Overall event sequence e.g. Questions Page -> Answer Page -> Post Answer -> Edit Answer versus options such as Question & Answer Page -> Post Answer, etc were analyzed and considered to maximize usability (paper prototyping, heuristic evaluation, user testing)

  • the video connect page features video chat capabilities
  • buttons to end chat and add a new person to your friends are visible and spaced to:
    1. group available functionality on page
    2. reduce error
  • various arrangements of components, e.g. buttons, video boxes for user & other person, were considered for visual appeal (paper prototyping, heuristic evaluation)
  • different page titles were considered to provide a descriptive and externally consistent title (paper prototyping, user testing)
  • button placement/alignment was edited to decrease likelihood of error, due to close proximity to each other (heuristic evaluation)

Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing). (SOMEONE TAKE)

Implementation

Section
bordertrue
Column
width75%

We implemented our front-end in HTML, CSS, javascript, and JQuery with Foundation libraries; our back-end was built on top of django. The key design decisions were mentioned in the previous section.

...