Versions Compared

Key

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

...

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

Our final main page

:

Our original computer-prototype main page

Decisions we made after paper/computer prototyping and heuristic evaluation:

1) We decided from the paper prototype that we should allow the user to search based on a particular search type instead of searching for a general term. Some users were confused when presented with one search box as to what kind of term to input.

2) We combined the four search boxes on the sidebar in our original design computer-prototype design into one search box and a drop down list to select the type of search in the final design. In the prototypingcomputer prototype, users find that the four boxes and the four buttons accompanying it are confusing; it is not clear whether the users can search using more than one type of search at a time. With the drop-down, it is clear that the user is only searching using one search type at a time, and that only one query is possible. We also changed the "Go" button to "Search", so that the user knows exactly what he/she is doing.

3) We removed the sidebar from all pages. This is as a result of the search box modification. We were about to fit the modified search box in the top bar, and so we decided to save space on the left

4) From the paper prototyping, users were curious about how they could find related photos when they're at a certain photo. So we decided to implement photo tags as links, as can be seen in the following screenshot.

The links go to a search results of photos related to that tag. Image Added

5) We added CRUD functionalities, including deleting photos, editing photo information, and deleting comments.

Wiki Markup
(The \[X\] in the following photo is the "delete photo" button) !deletephoto.jpg|border=1!
Delete comments/edit photo information: !comment.jpg|border=1!

Implementation

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.

...