Versions Compared

Key

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

As usual, be complete, deep, and concise. Tidy up your entire wiki to make it a usable presentation of your term project. If your project changed direction or scope over the course of the semester, update earlier sections (such as the original Problem section you wrote for GR1) to reflect your final project.

Design

Screenshot

Feature

1. The Home Page
We were motivated by the paper prototypes to have a home page that serves as a tutorial for the user, to act as the briefing from user testing. The heuristic evaluations mentioned the lack of a login alternative. We still used facebook connection for the simplicity and overall feel of the implementation, but we tried to make the "Start wishing" more prominent on the page with a bigger click area.

2. Left Navigation
After some confusion from the heuristic evaluations, we decided to have a disappearing tree navigation menu, with wisdex names hidden outside of the "managing" tab. We also fixed some of the highlighting issues in the heuristic evaluations by clearly indicating to the user whether they are on the Explore page, the Friends page, or a Managing page. If they are viewing another person's wishdex, none of these are highlighted to indicate that the act of viewing a wishdex is not part of Friends or Exploring.

3. Logging out
We added the ability to logout as per our heuristic evaluation suggestions.

4. Add a Wishdex
Originally we thought about having an in-place text edit on the left menu bar to add a wishdex. We did not have a popup up for adding a wishdex in our computer prototype, but decided that the best way to add a wishdex would be to better indicate the textbox affordances to the user in a popup window.

5. Add an item
We added information scraping for one site, anthropologie.com to allow the test uers to get a sense for an easy add-item experience. The user enters a URL and the information is grabbed from the site and populated into the appropriate spaces. We did not include this popup in our computer prototype, but did have a positive feedback from our paper prototype users for automatic scraping.

6. In-place confirmation
In this screenshot, the user can click on the X to delete an item and the confirmation message will show in place. We were motivated to make this decision to faciliate the deleting process. Our computer prototype had no deleting functionality, and the heuristic evaluations reflected this.

7. Item information editing
Clearly labled sections allow user to easily see the current information. Hovered colors with change cursor give affordances to user for clicking to edit the information. Our computer prototype did not address the editing issue, and the heuristic evaluations reflected the lack of editing.

8. Tooltips
Each button on the item information page has a tooltip that helps the user understand the purpose of the button. Our heuristic evaluations and paper prototype indicate that users were confused about the meaning of "Acquire" or "Claim". Tooltips help to guide the user to their intended action and allow them to explore the possibilities in Wishdex.

9. Sharing a Wishdex
Clicking the "share this wishdex" button opens up a unique URL. The sharing link comes with a tooltip that explains the purpose of the sharing (indicative of heuristic evaluation points). Our user testers after the final implementation all suggested to automatically highlight and copy the URL. We definitely agree but did not have time to make the changes.

Hotspots, wishdex image


Arrows:

10. Explore page

  • Hotspots
    Heuristic evaluations suggested that we make it easier for the user to scroll through the items. We decided to add hotspots to allow the user to seemlessly browse with only hovering.
  • Wishdex image
    We moved the image of the wishdex to outside of the scroll to indicate that everything in the scroll is part of that wishdex.
  • Arrows
    Heuristic evaluations suggested that we indicate the end of the scroll more obviously. We removed the arrows completely when the end of the scroll is reached.

11. Friends page

  • Search
    Despite one heuristic evaluation that suggested we put the search bar on every page of the website, we decided to restrict the search bar to only the friends page because we saw little improvement in user experience for putting the search bar on a managing a wishdex page or the popular page (which is only one page!). The search bar autocompletes, a decision that was influenced by our paper prototype users.
  • Recent Activity
    We create appropriate links to the user's home page, a specific wishdex, or even a specific item on each recent activity item as per complaint about no interactions with the feed from the heuristic evaluations.

12. Item information popup
Many of the heuristic evaluations indicated a messy display in our item popup from the computer prototype. We organized the layout into a more intuitive display with tooltips that help the user understand what the buttons do.

  • We added in comment functionality, and the time displayed is user friendly ("3 days ago" vs "May 8th")
  • Like and Claim buttons change color when activated, with tooltips that indicate the reason for the change.
  • We added the functionality to copy an item to your own wishdex. The user clicks on the "Copy" button and a dropdown pops up.
    In the future we will change some of the buttons as per our final user test results as well as add in comment deletion.

13. User page
Each wishdex box has a mouseover iPhoto-like effect for the pictures of items in a wishdex. Moving the mouse across the box will allow the user to see the pictures change. We made this design decision because heuristic evaluations indicated that we need to make a wishdex different from an item in their display.

14. Stylistic changes

  • All icons were reinspected for aliasing (heuristic evaluation)

...