V I S U A L LY G U I D I N G U S E R S

SAN JOSE PUBLIC LIBRARY: CENTER STAGE

Laura MendiolaLibr. 251

Prof. Kemp

DESIGN STRATEGY

• The Pattern: I chose to work on the Services page for the San Jose Public Library website. I used the Center Stage pattern described in the Tidwell text which states: “Put the most important part of the UI into the largest subsection of the page or window; cluster secondary tools and content around it in smaller windows (Tidwell 103).”• The Reasoning: Users looking under the

Services tab will be looking for their personal and account information, not library departments. The design should make that task the main focus of the page.• Tidwell, J. (2006). Designing Interfaces. (p. 103-6) Sebastopol, CA: O'Reilly Media, Inc.

TESTING STRATEGY

• User Task: The tasks I set forth for my testers were: “Find out if you have any outstanding fines or fees,” and “Check on the general state of your account.”• I wanted to recruit users based on computer familiarity and

different ages to emphasize this.

• Task Reasoning: I asked my testers to accomplish these tasks in this order to ensure that my design would take users to the information they were looking for first and foremost, in the most efficient way possible. Users should not have to guess where to find information on fines and fees, and my design should anticipate their task.

FIRST SESSION

• Tester #1: Male, 50+ yrs., English/Spanish speaker

• Reasoning: He represents an older user than myself, who is familiar with computer processes. He is a bilingual speaker, and represents minority users who speak English fluently and are over the age of 50.

FIRST SESSION CONT.

• Tester 1 chose the Late Fees and Lost Items link.

FIRST SESSION CONT.

• Tester 1 was brought to this page, containing general information about fines and fees.

• He clicked on “Check your account online” under “Late Fees…”

FIRST SESSION CONT.

• Tester 1 was brought to login page

• Then Tester 1 saw he had $0.00 in unpaid fines in account and other account information.

FIRST SESSION CONT.

• End of test interview findings:• Q: What did you like or not like about the design on the

Services page?A: I was really frustrated with this. I mean, it was

confusing and the text was way too small. All the links are overwhelming and they’re misleading!

Q: How do you feel about the way you maneuvered the site?

A: Ugh, I think I did alright. I mean, I got to the information eventually but, it took me way too long. • Q: Do you think there is anything that could make the

design better?A: I liked the expand button option on the side toolbar, I

noticed them on the side there. I think they might help if you incorporate them in the main design.

Total Time: 4.5 minutes

CHANGES #1

• As per Tester 1’s suggestions I decided to take away the link aspect of the three subcategories under “Your Account” and replaced them with expand options.

• I also rephrased the titles, and changed “Log Into My Account” to “Log Into Your Account” to address the user.

SECOND SESSION

• Tester #2: Male, 31 years old, English speaker

• Reasoning: This user represents an advanced computer user and English speaker. He is a user who should be able to maneuver the site easily.

SECOND SESSION CONT.

• Tester 2 chose to expand the “Late Fee & Lost Item Policies” section, regardless of the fact that the account login page was the only link under “Your Account” available.

SECOND SESSION CONT.

• Tester 2 expanded “Late Fees…” and mentioned the font was too small, and organized incorrectly.

• He clicked on “My Account” located in the center of the expanded area.

CHANGES #2

• As per Tester 2’s suggestions, I rephrased and reorganized the information found in the expand under “Late Fees…” to make it easier to navigate, more logical and more efficient.

SECOND SESSION CONT.

• Tester 2 clicked on the “My Account” link under “Late Fees…” right away.

SECOND SESSION CONT.

• Tester 2 was brought to the login page.

• Then Tester 2 saw he had $0.00 in unpaid fines in account and other account information.

SECOND SESSION CONT.

• End of test interview findings:• Q: What did you like or not like about the design on the Services

page?A: I liked that the expand buttons let me see other information

without leaving the page. That was nice. I thought that the Information on the expand wasn’t that great though, it looked sloppy and unorganized. But after it was fixed, it looked ten times better.• Q: How do you feel about the way you maneuvered the site?

A: I felt like I was able to do everything quickly, like that even when I picked the “wrong” place to start I got to where I wanted to be

quickly.• Q: Do you think there is anything that could make the design better?

A: No because you asked me to look for one, or two, specific things but that may not be the case for everyone. So, maybe that information I clicked on by accident is what someone else is looking for, and right now it offers something for everyone and it’s not messy.

Total Time: 1.5 minutes (not including time taken for new mockup)

CONCLUSION

Based on the two tests run with my paper prototype, I feel I have come to a compromise between what the user felt they needed, what they wanted, and my initial use of the Center Stage pattern. By my last test, the tester was able to locate their account information quickly and with virtually no frustration

The point of using the Center Stage pattern was to ensure that the important information, account information, was the main focus and easily accessed. In order to not alienate the needs of other users with other tasks, this version of the Center Stage pattern focused on allowing users multiple “right” ways to access their account information and to complete this task.