IS 213 -- User Interface Design & Development

ReadingTree: First Interactive Prototype


 
 
 
interactive prototype 1
 
 
 

 

Revised Scenarios

Differences as a Results of Lo-Fi Prototype Testing

Prototype Overview:

Instructions for Running the Interface

Powerpoint Presentation: First Interactive Prototype


Revised Scenarios

We revised our scenarios slightly to include the expanded functionality available in the hi-fi prototype, such as getting recommendations and seeing another user's Bookshelf.

Scenario 1 (Danny) - Find a book for a school project
Danny's Persona
Task Overview: Danny has an assignment to do a book report. The teacher says they can pick whatever book they want, and Danny's looking for something that won't be too hard to read (so he's interested if other kids included that information in their reviews), that won't make him feel dumb (so he'll want to pick something at or near his grade level), and that isn't lame (so he'll want to read the synopsis/ description to make sure he doesn't pick some kind of girly book).
1.From the home page, Danny logs into the system.
2. Danny does not have particular book in mind, so he goes to "What's New" as a shortcut to the popular books. Once there, he browses the new and featured books and he looks at the pictures and brief descriptions trying to find one that looks interesting--he's particularly interested in grade level and ratings.
3. Nothing catches his attention so he clicks on the link for "Suggest a Book."
4. ReadingTree recommends 10 books popular with other kids close to his grade level. Danny reviews the list of suggestions, again looking at the grade level, number of pages, and ratings to decide which book to read.
5. He clicks on one that looks interesting to find out a little more information.
6. It seems
OK so he prints out the book information page, so he can find the book in the library.
7. Finally, he closes his browser window and heads over to the shelves.

Scenario 2 (Jenny) - Find a book to read for fun
Jenny's Persona
Task Overview: For Christmas, Jenny received a $50 Barnes & Noble gift certificate from her grandmother. She wants to be sure to pick out something "cool," but she doesn't have a specific book in mind. Jenny hopes that the book she chooses will be one her friends Sara and Brittany end up wanting to read too. Her mom is going to take her to the mall after dinner so Jenny decides to go to the ReadingTree website she heard about in school last week.
1. Jenny goes to the home page.
2. Jenny signs up to become a Reading Tree member.
3. After signing up, she goes first to the "What's New" section.
4. She rates the 3 books on the list she's already read.
5. Then she looks at the information about books she hasn't read, especially the synopsis and other kid reviews.
6. After locating a few books that are interesting to her she prints out the list.
7. Jenny closes her browser window.

Scenario 3 (Jenny) - Talk about a book she's read
Jenny's Persona
Task Overview:
Jenny thought Island of the Blue Dolphins (one of the books on last month's "Featured Books" list) was really cool. She wants to talk about it with some other kids (to see if they were surprised about the ending too).
1. Jenny logs in as a returning user.
2. She looks up Island of the Blue Dolphins by doing a title search.
3. From the Book Information page, Jenny clicks on Rate/Review this book.
4. She selects a rating and fills out a brief review, but she wants to know what other kids thought. No one else has written a review yet, so she decides to check the Message Board.

5. Jenny goes to the Treehouse and looks at the main message boards, and sees a forum marked Books about Survival. She clicks on this link.
6. Jenny sees someone has already started a thread on the book and posts a message to this thread, says what she thought of the book and asks if anyone else was surprised by the ending.
7. She reads a posting by another kid (username "livebug") that says she thought the book was the bomb.
8. Jenny looks up "livebug" on the ReadingTree Member list and checks her Bookshelf
9. Since "livebug" seems to have similar taste in books, Jenny prints her Bookshelf to get some ideas for other books to read.
10. Jenny closes her browser window.

Differences As A Result Of Low-Fi Prototype Testing
We made several changes after testing the low-fi prototype and considering the results. We also conducted a second round of competitive evaluation.

1. Problem: Some of the prominently featured links were not related to the completion of major tasks, so we had devoted important screen space to tasks most users would not perform. (This problem discovered during Testing)
Solution: Remove "Members Only" and "Help" icons from the navigation bar. See images.

2. Problem: Users had a hard time finding and differentiating between sign up and sign in (This problem discovered during Testing)
Solution: Use "already a member" and "become a member" to clarify the difference between signing in or up. See images.

3. Problem: Users wanted a list of what each section contained, and didn't always notice the mouseovers (This problem discovered during Testing)
Solution: Have a list of section contents on the homepage. See images.

4. Problem: Users had trouble recognizing what some of the labels meant. (This problem discovered during Testing)
Solution: C
hanged Today's Special to "What's New." See images.

5. Problem: Add/emphasize safety alerts (This problem discovered during competitive evaluation of Freezone, and after reviewing ReadingTree's obligations under the Children's Online Privacy Protection Rule)
Solution: Put safety notices on the bulletin board, link to safety/privacy on homepage, include information on the sign-up page. See images.

6. Problem: The paper prototype did not seem fun or kid-friendly, short on color and graphics (This problem discovered during Testing and the competitive evaluation of Book Adventure)
Solution: Look for and add new and fun graphics and colorful background images. See images.

7. Problem: Design was cluttered and had a lot of extra words. (This problem discovered during competitive evaluation of Bookhive and World of Reading)
Solution: Made design less wordy.
See images.

Prototype Overview

Overview of the User Interface (with Links to Screen Shots)

Our web site has four main sections, accessible via icons in the main menu bar from anywhere within the site: Home, Find a Book, Treehouse, and What's New.

Home. From this page, a user can move quickly and easily to perform any of our personas' major tasks--finding a book, talking about a book, or finding out what's new. This page provides a menu of the options, allows registered users to sign in, and directs new users in how to sign up. It also links to information on ReadingTree's privacy policy, contact and copyright information. All of the icons and the main headings in the text menu are hyperlinks.

Find a Book. From this page, a child has 4 ways to look for books: by a word in the title, a part of the author's name, the first letter of the author or title (for those who have trouble typing or spelling), or the kind of book. The "kind of book" icons are all clickable. In the upper right corner of the screen appears the fiction/non-fiction selector, which is currently not operational; in the next iteration, this "narrow search" feature will be accessible from every search type as well as from the results screen. When a search is run, a new page displays the results, formatted similarly for title, author and kind of book searches, and slightly different for initial letter searches.

The child might also opt to have the system suggest a book; the collaborative filtering algorithm uses ratings and "What's New" poll responses to improve a user's recommendations. To receive suggestions, a user simply clicks on the "suggest some books" link, also available from the "What's New" page. This brings him or her to a list of recommendations, with the option to rate the item or add it to his or her Bookshelf, which stores information about a user's favorite books and books he or she wants to read (similar to the Wishlist at Amazon)

Throughout the site, any time a user clicks on a cover image, the book information page is displayed. In addition to the basic book details, such as grade level, number of pages, and synopsis, the system also displays ReadingTree-specific information, such as the average rating by ReadingTree users, the Nicknames of users who currently have the book on their Bookshelves, and any user-submitted reviews. From the Book Information page, users have the option to rate or review the book or add it to their Bookshelf. Here, as elsewhere at the site, if you click on another user's name, you are brought to that user's Bookshelf.

Treehouse. This is the direct kid-to-kid interaction area of ReadingTree. Children may communicate in two ways: asynchronously via a threaded bulletin board or in real-time through moderated chats (offered only during limited hours of the day, for safety reasons). At the bulletin board, the main forums are established by the ReadingTree administrators. Within each forum, any member may post or reply to a topic, with the option to include the text of the previous message. Messages are date- and time-stamped. User nicknames displayed on the message board connect to that user's Bookshelf.

The Treehouse also lists the nicknames of all ReadingTree members, as well as those who are currently active on the site.

What's New. This section contains the most freqently changing content at the site. ReadingTree staff will regularly update the content in the "Featured Book" section of this page. "Member of the Week" is generated automatically, based upon the number of ratings and reviews contributed by a user. The "What's Hot/What's Not" reflects aggregated book ratings by ReadingTree users, dynamically generated each time the page is returned. The featured poll gathers information about users to improve the automated book recommendations. After a user answers a poll, a screen pops up to thank the users for answering and to display the results of the poll so far.

Changes Discussed but Not Implemented

1. Member rewards page. This is a crucial ingredient in our collaborative filtering system, as we wish to encourage participation by every user who visits the site. We plan to recognize members who submit reviews, ratings, and message board postings. We are finalizing the details of a recognition and reward structure, which will be included in the second iteration.

2. Scalable lists of search results and book recommendations. We would like to limit the results displayed so as not to overwhelm the user with options, while making it easy for them to see more titles if they choose. With our small database of books, the current results displays are acceptable, but this issue must be addressed in the next iteration. We are considering changes such as reducing the book cover image size, allowing users to set the number of results returned, and presenting the results on multiple pages, navigable via numbered hyperlinks at the bottom of the screen (similar to Google's format).

3. Enable narrowed searches. We would like to allow users to constrain their searches by grade level and by fiction vs. non-fiction. This option will be available before the search is run and after the system returns an intial set of results. We did not have time to implement this important feature.

4. Printable list of search results or book recommendations. This feature is somewhat less important, as the pages may be easily printed by using a browser's "Print function." However, as printing book titles is an essential step in each of our persona's task scenarios, we intend to build a "printable results" option into the next iteration of the site.

5. Cookie-free site browsing. We intend to make most site features visible to non-members, even if they are not able to participate in rating, reviewing, and posting. However, in this iteration we did not have time to implement a read-only version of the site; some pages will not function properly if the cookie has not been set.

6. Error prevention, explanation and correction. We designed our forms to be easy to complete and hope that we minimized the possibility for errors, but we need to do a thorough inspection of the site to be sure that error recovery is fully supported. We did not have time to properly conduct this inspection.

7. Increase interactivity. Our interviews, lo-fi testing, and competitive analysis all point to the same conclusion: kids want to interact with websites and they want it to be fun. We have worked towards this end with the ratings, chat and message board, but we might also consider adding other activities, such as pictures, coloring, or games. These are not central to our persona's goals so we opted to exclude them from this iteration.

8. Update profile and maintain Bookshelf. Currently users do not have a way to modify their profile or remove books from their shelves once added. These maintenance features are important to include and will appear in one of the next iterations. This page could also serve in a "help" capacity, explaining what a bookshelf is and perhaps linking to information about user recognition and rewards.

9. Log out. Currently, users log in to the system but do not log out. A user must close the browser window to reset the cookie. An easy or automatic log-out is an important piece of functionality especially given that we wish to promote use of this site in libraries with public access Internet terminals.

10. Mascot/tour guide. This is a regular feature of kid-oriented sites (Zinger at Bookhive, Rex Reader at BookAdventure), designed to make a site more appealing to children and perhaps to help establish the branding of the site. We considered also adding a changeable design motif--some children's sites change the look of their site on a monthly or quarterly basis. In the next iteration we might include on the right side of the navigation bar a tree icon that changes with the seasons. This is one of the less important changes we considered and may not occur until the third or fourth iteration.

Tools Used

To develop our interactive prototype we primarily used Dreamweaver (for the pages), Microsoft Access (for the back-end database), and Adobe PhotoShop (for graphics editing). Our site includes a mixture of static HTML and Cold Fusion-generated web pages, with 3 main template types. For the chat and the bulletin board, we modelled our code on programs from CFHUB. Most graphics were downloaded from the ArtToday and Don Barnett website and modified in Adobe Photoshop. Using these tools, development proceeded fairly smoothly. The only major difficulties we encountered were with Dreamweaver's templates. Although using a template allowed us to quickly make site-wide changes, we occasionally found our screen designs restricted by the template's format. As a work-around, we ultimately developed 3 separate templates, despite the fairly obvious drawbacks of this approach.

Instructions for Running the Interface

Most of the functionality is available in this iteration--all links are operative and the pages are connected to a small database of books and users. The only significant restriction on use is that pages require a cookie, generated when a user logs in or registers. As noted above, we intend to make it possible for users like Danny to visit the site without logging in, but in order to run through our scenarios, a log-in is currently required. A related issue is the lack of a log-out feature; this means that to visit the site as a new user, one must close and re-open the browser window.

Below are the three user scenarios, with links to the relevant starting page.

Scenario 1 (Danny) - Find a book for a school project

1. From the home page, sign in as Danny. Nickname: shortstop. Password: password.
2. Danny does not have particular book in mind, so he goes to "What's New" as a shortcut to the popular books. Once there, he browses the new and featured books and he looks at the pictures and brief descriptions trying to find one that looks interesting--he's particularly interested in grade level and ratings.
3. Nothing catches his attention so he clicks on the link for "Suggest a Book."
4. ReadingTree recommends 10 books popular with other kids close to his grade level.
5. Danny reviews the list of suggestions, again looking at the grade level, number of pages, and ratings to decide which book to read. He clicks on one that looks interesting to find out a little more information.
6. He finds a book that looks OK and prints out the book information page, so he can find the book in the library.
7. Finally, he closes his browser window and heads over to the shelves. (This step is necessary to reset the cookie so that you can register as a new user in the next scenario.)

Scenario 2 (Jenny) - Find a book to read for fun

Task Overview: For Christmas, Jenny received a $50 Barnes & Noble gift certificate from her grandmother. She wants to be sure to pick out something "cool," but she doesn't have a specific book in mind. Jenny hopes that the book she chooses will be one her friends Sara and Brittany end up wanting to read too. Her mom is going to take her to the mall after dinner so Jenny decides to go to the ReadingTree website she used in school last week.

1. From the home page, Jenny signs up to become a Reading Tree member. (Use any nickname, password and demographic information you wish.)
2. After logging in, she goes first to the "What's New section.
3. She rates the 3 books on the list she's already read.
4. Then she looks at the information about books she hasn't read, especially the synopsis and other kid reviews.
5. After locating a few books that seem interesting she prints out the list.
6. Jenny closes her browser window. (This step is necessary to reset the cookie so that you can sign in as a returning user in the next scenario.)

Scenario 3 (Jenny) - Talk about a book

Task Overview: Jenny thought Island of the Blue Dolphins (one of the books on last month's "Featured Books" list) was really cool. She wants to talk about it with some other kids (to see if they were surprised about the ending too).

1. From the home page, Jenny signs in as a returning user. (Use the nickname and password set up in the previous scenario.)
2. She looks up Island of the Blue Dolphins by doing a title search.
3. Jenny clicks on Rate/Review this book.
4. She selects a rating and fills out a brief review, but she wants to know what other kids thought. No one else has written a review yet, so she decides to check the Message Board.
(Note that at this point every field in the review must be completed or you will receive an error message.)
5. Jenny goes to the Treehouse and looks at the main message boards, and sees a forum marked Books about Survival. She clicks on this link.
6. Jenny sees someone has already started a thread on the book and posts a message to this thread, says what she thought of the book and asks if anyone else was surprised by the ending.
7. She reads a posting by another kid (username "livebug") that says she thought the book was the bomb.
8. Jenny looks up "livebug" on the ReadingTree Member list and checks her Bookshelf
9. Since "livebug" seems to have similar taste in books, Jenny prints her bookshelf to get some ideas for other books to read.