Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

...

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 specific functionality available to the user and eliminate clutter and noise that may distract and detract from a users experience. 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
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
  • various arrangements of components, e.g. buttons, video boxes for user & other person, were considered for visual appeal (paper prototyping, heuristic evaluation
, and user testing). (SOMEONE TAKE
  • )
  • 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)

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 are mentioned in the previous section.

The biggest challenge we encountered was because of different levels of familiarity with django, we divided our work not by feature, or the different pages, but by expertise. For example, most of the back-end implementation was done by Viksit, while the rest of the team focused on the front-end design. This created a problem because features that required integration of front-end and back-end components required two or more members to physically be in the same room.Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface. (SOMEONE TAKE)

Evaluation

Section
bordertrue
Column
width75%

Formative Evaluation Sheet

Aged to Perfection
Briefing

Our website is aimed at the elderly population as a way to connect with each other, foster community, and find information about hobbies and interests. You have the following scenarios you'd like to perform on our site.

Scenario Tasks

The following scenario tasks were given to our user testers.

  1. Look through a list of health related questions and choose to answer one.
  2. Find a person you don't know and try to connect with him or her with video.
  3. After talking with an user through video, you decided to add him or her as a friend.
Specific Questions/Feedback

We included a guided questions list in addition to collecting feedback on the fly as well as if we noticed any critical moments during the evaluation.

How hard was it complete the given tasks? Did you find any of the tasks unintuitive?
Is there anything annoying on the site and do you find it fast enough to perform the things you wanted?

User Testing

Talk about critical incidents (positive and negative), notes you took, feedback and quotes (Brian)

  • User 1
  • User 2
  • User 3

    For user testing, we interviewed three users:

    • User1: A 65-year-old male professor at MIT; he is a regular internet user.
    • User2: A 67-year-old male retired stock trader in Cambridge, who is also proficient at use of internet.
    • User3: A third user is a 79-year-old female retired elementary school teacher without much computer experience. The testing was guided by a 30-year-old grandson who took notes and relayed info.

    Usability Problems

    • "How do I go back to home page?"
      • Description: Even though we have a grid to the top-left corner, it is not clear to the users that it brings them back to the home page.
      • Severity: Medium
      • Heuristic: Learnability; efficiency
      • Solution: Animate the home page grid zooming into the top-left corner.
    • Post question was hard to use
      • Description: Posting new question was not intuitive. They didn't know they had to first click in the textbox to start typing and click on the button "Post" to post the question
      • Severity: Minor
      • Heuristic: Visibility; Help and Documentation
      • Solution: Fill the textbox with a grey "click here to type your question" background text.
    • "Did I post something?"/"Where is my post?"
      • Description: After the user clicks on the "Post" button, the page refreshes with the user's answer buried somewhere in the middle of the page. He/she can't tell immediately if the post was successful.
      • Severity: Medium
      • Heuristic: Feedback
      • Solution: Instead of refreshing the page with new content, the button should dynamically insert content into the page and highlight the post that fades out gradually.
    •  "How do I delete my post?"
      • Description: After seeing that he/she can edit his/her own posts, the user asks if it's possible to delete or take away the post.
      • Severity: Major
      • Heuristic: Safety; CRUD; User Control & Freedom
      • Solution: Add an "X" button, which will confirm the user's intent of deleting his/her post upon click.
    • "Who are these people?"
      • Description: It is not clear to the users how the "Meet new people" section is formed. By age? By geography?
      • Severity:Medium
      • Heuristic: Visibility
    • "I don't want to show them my camera; turn it off."
      • Description: Users are concerned with revealing themselves to strangers over the internet without knowing more about their identities.
      • Severity: Major
      • Heuristic: Safety; User Control & Freedom
      • Solution: Prompt the user for consent of turning on the web camera.
    • Fonts are too small
      • Description: Depending on the apparatus, the font appeared to be too small for a particular user.
      • Severity: Medium
      • Heuristic: Readability
      • Solution: Use bigger font size in general and make sure the font family is easy to read.

    Presentation and Demo

    Presentation Slide:

    ...