Rishi Chopra, cs160-arAmit Bakshi, cs160-aq

Cynthia Prentice, cs160-auBen Hartshorne, cs160-bn

Interactive Prototype #1

1. Problem and solution overview

The goal of The Simpsons Portal is to demonstrate the value of integration of two forms of media, television and the internet, for a user community that currently uses both. Both mediums provide users with valuable content, but in different forms. For example, the options given to fans of The Simpsons via television are limited. Users are forced to watch whichever episode of the show that happens to be playing at the time with little opportunity to acquire additional, supplemental information about the show or interact with others (besides those who happen to be watching the show in the same room). The internet, on the other hand, offers users a vast array of services. Fans of The Simpsons can locate and download episodes of the show, find general information, and interact with others. However, being inherently decentralized and disorganized, the internet forces the user to spend a considerable amount of time finding information that he is looking for. The Simpsons portal aims to combine the advantages of “push” (television) and “pull” (internet) to provide its user community with the ultimate Simpsons experience, all in one place.

2. Tasks

1) Browse for the episode in season 10 called “Viva Ned Flanders” and read its plot summary. (EASY)2) Search for the episode where Bart uses a radio to fool the town into thinking a little boy falls into a well. Now watch it. (MEDIUM)3) Find out who does Lisa Simpson’s voice while watching a Simpsons episode and having an open chat. You are a returning user. Your login is: Bartfan. Your password is: itchy. (HARD)

These three user tasks allow us to test the main functionality of the Simpsons Portal. Our goal is to provide fast and easy ways of simultaneously accessing many forms of Simpsons information. The tasks cover the different ways in which a user can retrieve the information and episodes we provide. They also allow the user to experience the different view formats so they will be able to rate the effectiveness of our multimedia presentation. Our tasks do not cover the third view mode (fullscreen), as this is the most obvious and intuitive mode.

3. Revised interface design

Changes We relabeled some of our ambiguously-named buttons so that they more

accurately describe their functions. We changed the “Find an episode to watch” label to “Search for an episode” because this button brings up a search screen. We changed “Episode Guide” to “Browse for an Episode” because this button brings up a browse screen where users may browse for the episode they are looking for. We changed “Trivia” to “Trivia Game” because this button takes the user to a game, and we didn’t want them to mistake this feature with “General Info.” We also added the help button to the button bar, rather than having it as a smaller button at the bottom-right corner of the screen. (See Figure 1 of Appendix A)

In regards to the bottom menu bar, we also got rid of the drag-and-drop concept for the chat and trivia. Previously, the user could pick up the chat and trivia buttons and drop them into the frame where they wanted the chat or trivia to appear. Our testers found this very confusing. We replaced the combination of push-buttons and drag-and-drop buttons with a single type of button. These buttons incorporate the ease-of-use of push-buttons with the flexibility offered by drag-and-drop buttons. On mouse-over, these buttons pop-up images of the current screen layout with the different frames blackened (See Figure 2 of Appendix A). The user highlights the screen picture that specifies the frame in which they want the results of the button to appear. (See Figure 3 of Appendix A).

Our users also had problems with our “Change Views” button during our initial

user testing. This button was supposed to switch between Standard View (See Figure 4 of Appendix A), Extended View (See Figure 5 of Appendix A), and Fullscreen View (See Figure 6 of Appendix A.) When presented as “one mysterious button,” users were not sure what would happen if they pressed it. Because the functionality of this button is much different than the other buttons, we placed it in a separate frame. We made separate buttons for each of the three screen modes (including full-screen mode) and included pictures of the different layouts. Clicking either the name or picture of the view changes the view mode (See Figure 7 of Appendix A).

Our users liked the hierarchical method of presenting large amounts of information in small amounts of space using the +/- metaphor. We are continuing with this metaphor. Originally, our some of our browsable +/- pages had arrows that allowed

a user to shoot information over to the bigger frame if they needed more viewing room. We removed this feature because our users did not understand what they were for. All decisions with regard to display of information are now made using the bottom menu bar.

Our user testing allowed us to choose between the two search screens we were debating in the lo-fi stage. (See Figure 7 of Appendix A).

We also decided that if a search returns no results, we tell the user that there are no results, refer them to the help on how to do searches, and present them with a list of the most popular episodes. This will allow the user to modify their search to be more successful by reading the help, or just watch a good episode if they are tired of searching.

We have removed the initial login screen. Logins and passwords are hard to remember and people do not always like to give up their information. Users will be allowed to search for information and watch episodes without logging in. For functions that require identification, like the chat or trivia game (if they want their scores recorded), users will be prompted for a login when they decide to engage in those activities. Users will only be prompted for their login one time per visit (this can be accomplished with a cookie).

Scenarios for 3 tasksSee Appendix B.

4. Prototype overview

Tools

Images

Microsoft Image Composer: We used this to modify Simpsons pictures we found on the web and create buttons out of them. This is on our laptops, so we hade easy access to it. We were able to find the functions like cropping, resizing, and adding text that we needed to make the buttons, although this was difficult to use (Ben really didn’t like this tool).

Microsoft Paint: We used this to draw pictures of the screen layout options. It was simple to learn to use, but did not have sufficient functionality. We could not create the images we needed. The work we did in Paint was redone in Adobe Photoshop using a Wacom tablet. Paint was useful for saving screenshots into .bmp format.

Adobe Photoshop: It would have been nice to do all of our imaging in Photoshop, but not everyone had access to it. Photoshop allowed us to both create and modify images easily. While providing advanced functionality, it’s not too complicated to learn to use.Web Page Development

Microsoft FrontPage: We began our web page development using this tool because it was provided for us on our laptops. Using FrontPage was faster and easier than writing all of our own code. It provided us with ready-made frame-layouts and various forms. For some of the mouse-over buttons, FrontPage created java applets instead of using simple JavaScript. Additionally, FrontPage’s code does not work as well with Netscape. It does not allow for layers, which were needed for the pop-up screen layouts that accompany the button mouse-overs. Because of these problems with FrontPage, we switched to using Dreamweaver.

Macromedia Dreamweaver: Dreamweaver provides a central place for viewing images and managing the site. It has an elegant, easy-to-use UI. It contains an O’Reilly reference guide that explains aspects of the language for CSS, JavaScript, and HTML. It is both extensible and expandable.

UI overview

When the user enters the Simpsons Portal, they are presented with two large viewing frames and a bottom menu bar. The smaller frame on the left contains a list of episodes that are currently being watched. The larger frame to the right is a welcome screen. The menu bar has seven options of screens that can be pulled up into either of the top screens. The first option is the “Now Playing” screen, which is currently being displayed in the top-left frame. This button pulls up an example of how the frame would look if people were actually watching episodes on the site. The button brings up a browse screen, where the user can browse through all of the Simpsons episodes ever made. The browse screen allows the user to browse by the most popular episodes or by the seasons. Under each episode, the user can both watch the episode and find out information about the episode. Episode information is arranged by categories like plot summary, characters, and movie references. The information is arranged hierarchically, using +/- context menus. The third option pulls up a search screen that allows the user to search by keywords, lines of dialogue, episode title, episode number, and season number. In the hi-fi prototype, users are only allowed to select the episodes needed to complete the tasks. Choosing to watch an episode starts it playing in the big frame (this will be done using the Wizard of Oz technique). The fourth option brings up a general information screen that provides information about the characters, actors, and creators of the show. The fifth option brings up a not-yet-implemented chat screen. The user is asked to login to use this feature. The sixth option is a not-yet-implemented trivia game that may also require a login. The final option pulls up a not-yet-implemented help menu in the desired frame.

The current screen view allows the user to do two things at once. If the user wants to do more, they can go to the right corner of the bottom menu bar and change the screen view to “Extended View”. This increases the size of the left frame, shrinks the video into the top right frame, and adds another frame under the video. The user can now put more information in the new frame using the bottom menu bar. If the user wants to devote his entire screen to watching an episode, he can choose the full screen mode. In full screen mode there are still links back to standard and extended mode.

To use our hi-fi prototype, visit http://ben.hartshorne.net/hellssatans/.

Not Yet ImplementedMost of the detailed content of the browse, search results, and general info

screens is not yet included. The only +/- menus that are fully implemented are the ones related to our tasks. This allows the concept and implementation to be tested without spending tedious hours of data entry for unneeded content whose format may change at a later time. We are exploring the possibility of dynamically generating these menus from a database, which would allow for less “hard coding” of copious amounts of information.

The Chat and Trivia are not yet implemented. When clicked a “Not yet implemented” screen comes up in the desired frame. We are trying to test the ease at which the user can do multiple things at one time, rather than the design of the chat or style of the game. The help is not yet implemented. At this stage, we want to know how much of the user interface a given user can figure out without needing help.

The login screen has been designed, but it is not fully functional. Any login and password will be approved. The new user and password reminder functions are not implemented.

Upon hitting “submit,” the search screen brings up the results that are requested for completion of task 2 no matter what is entered in any of the boxes. The submit and reset buttons for the login screen (chat and trivia) have been disabled (for now.)

The video for each of the episodes is left up to the Wizard of Oz technique. Our site automatically pulls up a picture with the word “Simpsons Episode is playing here”. During user testing, the “computer” member of our team will use Windows Media Player to play the episode in the proper location. Because embedding a video into a web page requires use of Active-X components (something our group is not yet familiar with), we have decided to incorporate this feature in later design iterations.

Appendix A

Button Bar

Figure 3: One of the two frames from the pop-up menu is selected and turns yellow, specifying that this is

where the user wants to send the content. Destination frame is darkened in black.

Figure 2: Button Bar with cursor over the browse button. (A pop-up menu appears, selected button is grayed out)

Figure 1: Button Bar at bottom of site

Changing Views

Figure 4: Standard View allows the user to do two things at once

Figure 5: Extended View allows the user to do three things at once

Figure 7: The “Change Views” frame located at the bottom-right of the screen

Figure 6: Fullscreen View will use the entire screen for video viewing

Appendix B

Task 1 Storyboard

Task: Browse for the episode in season 10 called “Viva Ned Flanders” and read its plot summary. (EASY)

(1. The original homepage)

(2. The user moves the mouse over the “browse for an episode” button and chooses to send it to one of the two available frames)

(3. The “browse for an episode” page appears in the specified frame)

(4. The user navigates through the +/- menu bars to find the desired information)

Task 2 Storyboard

Task: Search for the episode where Bart uses a radio to fool the town into thinking a little boy falls into a well. Now watch it. (MEDIUM)

(1. This is where the user left off from the last task)

(2. The user moves the mouse over the “search for an episode” button and chooses to send it to one of the two available frames)

(3. The “search for an episode” page appears in the specified frame)

(4. The user uses fills in fields of the search page to try to find the desired episode)

(5. The results of the search show up and the user clicks on “watch this episode” to send the streaming video of the episode to the main frame.)

Task 3 Storyboard

Task: Find out who does Lisa Simpson’s voice while watching a Simpsons episode and having an open chat. You are a returning user. Your login is: Bartfan. Your password is: itchy. (HARD)

(1. From the end of the last task, the user still has an episode playing)

(2. Realizing that they are trying to do three things at once, the user chooses the “extended view” mode from the

“change views” frame at the bottom right of the screen.)

(3. The page is now in “extended view” mode. The playing episode has moved to the top-right frame.)

(4. The user moves the mouse over the “general info” button and sends the content to the desired frame.)

(5. The “general info” page appears in the specified frame, and the user uses the +/- menu interface to find out what actor does Lisa Simpson’s voice.)

(6. Now that the user has an episode playing and has learned what actor does Lisa Simpson’s voice, they choose to join a chat in the remaining available frame.)