Design
We based our design on the following principles:
- Simplicity and attractiveness of design
- Safety from errors
- Efficiency and ease of use
Our final design is the result of three iterations of testing and evaluation. Below are the design decisions we made on each:
Paper prototype
|
Several important changes resulted from this iteration:
|
Heuristic Evaluation
|
The second iteration of our design yielded much criticism and many changes for our user testing phase:
|
User Testing
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The user's reading list displays books he has read, books he plans on reading, books he has been recommended, and books he is currently reading. We added boxes surrounding the books at the recommendation of our test users in order to increase readability. Although Meelap Shah had recommended zebra stripes, we found that they clashed with the design of the rest of the website, and instead chose to enclose each book in a box. Aside from fitting the aesthetics of the site more closely, the boxes increase the space between books, making each book a unit instead of a part of a table. |
|
|
|
|
|
|
Further Considerations
Our evaluation indicated that users prefer larger buttons and text over smaller ones, and to this end, we increased the size of both. This also improves the transferability of the design to mobile devices.
Implementation
We implemented the backend for our app with Parse, a Javascript-based backend which stores data online and thus does not require a server to be set up.
Each user stores the following arrays: friends, already-read books, currently-reading books, going-to-read books, and liked books. Books are added to the “liked” array if the user rates them more than 3 stars, and removed from it if the rating is changed to 3 or fewer stars.
Books store title, genre, synopsis, an array of comments, and an array of ratings. Comments and ratings are themselves objects. Comments store the username of the user who created the comment and the text of the comment. Ratings store the username of the user who created the rating and the number of stars the user gave.
Book recommendations are stored as objects containing the ID of the user recommending the book, the ID of the user the book is recommended to, and the title of the book.
The decisions we made for implementation did not directly affect our interface. However, because we took a long time to choose the language for our backend, and struggled to implement it, we were not able to devote as much attention to the frontend as we would have liked.
Evaluation
User 1: Elizabeth’s 11-year-old sister, who enjoys reading.
Usability issues found:
--Attempted to search by pressing Enter, which is functionality we intended to implement but did not have time to complete
--Was confused by the way in which ratings were displayed. The average rating is shown if the user has not rated a book, and she did not understand this. She also did not notice the “Average Rating” and “Your Rating” underneath the star selection.
--Accidentally clicked on the user below the one she was trying to add as a friend, indicating that perhaps the user entries are too close to one another on the page.
--Did not understand why confirmation was needed for recommendations, especially since it was not needed to add/remove friends.
--Tried to add books to the reading list by visiting the Reading List page, rather than the page for the desired book.
User 2:
--Wanted to upload own picture; looked for a while before realizing it is not possible.
--Preferred larger "search" button, particularly because search was not activated by hitting the "Enter" key.
--Wanted to be able to change colors; complained of lack of settings.
--Disliked having to go to book page to add books; wanted to add directly from others' profiles.
--Did not understand what links at top of "My Reading List" were for. When clarified, responded by saying they waste space anyway.