Issuu on Google+

Usability Lab at AAU CANM 606 Principles of Usability Dec. 16, 2009

Students

Sandra, Mavis, Junia, Jamie


WNM606 Principles of Usability

Table of Contents Introduction Usability Lab at AAU

Requirement Analysis

3 3 4

Detailed Target Audience Description

4

User Goals and Needs

4

Target platform description

5

Competitive Research

6

Design Specification

10

Site Architecture

10

Main Task Flows

11

Wireframes & Annotations

14

Comps

24

Testing

34

Test Observation Summary

34

Testing Materials & Results

35

Questionnaire

36

User Testing Results

38

Conclusion

Final Design Specification - Usability Lab at AAU

39

2


Introduction Usability Lab at AAU We designed a free website as an information source about usability for all AAU students who mainly have Computer Arts & New Media Masters of Fine Arts thesis projects. Usabilitylabaau.com will not only provide the direction of usability but also help AAu students improve the usefulness and satisfaction of their project and MFA thesis. At Usabilitylabaau.com users will find the directions for using the lab and understand how to set up and run their own usability studies. Also, they will be able to schedule their time and find the way to contact the lab online.

Students

Sandra, Mavis, Junia, Jamie


Requirement Analysis Detailed Target Audience Description Target Audience Title Age

Description Website users : 18+

Gender

Not specific

Lifestyle

Active, Enthusiastic lifestyles and people who usually scan many websites

Location/Language

United States (mainly Academy of Art University) / English

Hobbies

Scan websites

Income

Minimum wage and up. Users must be able to study or work at AAU.

Education

High school graduate and higher

Occupation

Students, professors and web designers

Tech Savvy

Advanced, must be able to use a computer and access the internet

Other

Should have some knowledge of web design

User Goals and Needs • Since the World Wide Web has given users direct information, users will hope the usability lab at AAU can provides the direct access to contact the lab and understand the direction of using the lab as well as schedule their time online. • For MFA thesis project, the user will be able to make an appointment with the usability lab to review the plans by the online system of schedule. • By providing the online path, users will contact the lab at any time if they have questions.

Overall Objective By doing this project and creating Usabilitylabaau.com, we want to provide a space on this site let students, professors and participants, and those interested in web design to have direct access to use the usability lab, get the information and make modifications to this website when and where it is suitable for them.

Students

Sandra, Mavis, Junia, Jamie


WNM606 Principles of Usability

Website Objective Usabilitylabaau.com will have some main objectives to facilitate our goal of building a website. The first one is to offer the information of how to use the usability lab as well as give some examples on this site for helping users set up and run their usability studies. The second one is to build the direct access for making them schedule their time. Also, it provides the path to contact the lab for being able to participate in tests or ask questions. These objectives will giving users more ways to contact the usability lab and aid users especially AAU students to improve their project and MFA thesis.

Target platform description Target browsers and platforms • Operating systems: Windows XP, Windows Vista, Windows NT, Mac OS, Windows 2000, other • Internet browsers: MSIE 7-8, Firefox, Safari, other • Screen resolution: 1024x786, 1280x1024, 800x600, other • Internet connections: broadband (DSL, cable, etc), Dial-up (56kps or less)

Final Design Specification - Usability Lab at AAU

5


Competitive Research www.usabilitylabaau.com

Pros • Provide directly information which is useful for AAU students. • This website does not just only provide the usability lab information but it also involves with Example, Schedule, Map and FAQ for students. • The point of the website is focusing on students and give them the knowledge of real-life test, and it will be an experience for students • The students can be able to find their own source which is directly involved to the class. • This website is very useful for students to find the information and knowledge of Usability Lab which is provided by professors from their classes. • Has simple and clean design which is good for users to gain information. Cons • This website is about the limited of users. • Most of users who can understand the website is only students from AAU. • Doesn't have so much up-to-date information. Usability Issues • This website is well designed in terms of usability. • Every detail which is involved with the intuition of users are organized very well and strong. • Hardly to find the mistakes of the site. Students

Sandra, Mavis, Junia, Jamie


WNM606 Principles of Usability

Competitive Research www.usability.gov

Pros • This website contains the information which is about the usability testing. • The information in this website is for everyone who's interesting in Usability and it's very useful for everyone because it doesn't specific target audience. • This website has variance information and it's an excellence source for users. • It's good for students to find further information in Usability. Cons • This website doesn't have well-organized in visual hierarchy. • This website can't convince users to visit and gain information from this website. • It has plenty of information but it doesn't have the real-life usage. • This website provides only the reading knowledge but doesn't have the pictures of testing process to illustrate the idea for users. Usability Issues • This website is good in terms of Usability, it has indicator which is very clear for users to see. • This website contains most of elements are needed in the website. • Has most common rules apply to it.

Final Design Specification - Usability Lab at AAU

7


Competitive Research www.blinkinteractive.com

Pros • This website contains excellence information which come from the real life experience, and this will be useful for users. • This website also manage in each link very clearly to see and have the up-to-date information • The real life experience from this company will educate users when they come to visit this website. • This website contains important information for usability testing. • It's different from other competitors Cons • This website is emphasize on business not to give the knowledge of usability. • The website itself is made to promote the company or to support the company. • They don't give so much of information but they just show their process of works. Usability Issues • The usability in this website is very well-designed such as navigation and organizing all of the information. • Even though, it contains too much of information but in terms of design and legibility is still excellence. • The aesthetic of this website, it uses only 2 colors and keeps it simple as much as possible.

Students

Sandra, Mavis, Junia, Jamie


Competitive Research www.worldusabilityday.org

Pros • It emphasizes on usability of Technology which is not just only website. • The objective of the website is focusing on let people or users to join their community and join to their events. • This website will be more interesting and could attractive to users to come and visit the website. • This website has different objective from other competitors. Cons • This website focuses on event more than the knowledge of Usabiliy. • It doesn't describe how to use the usability test but it just describes the functional to deal with usability that fits to our lives. • Doesn't provide information as much as it should be. • Users cannot gain information from this site as it should be Usability Issues • This website provides most functions for the website such as Indicator and breadcrumbs. • In each highlighted words are click-able and users can be able to notice. • We think that it has too much scrolling but in mean time it doesn't turn out that bad.

Students

Sandra, Mavis, Junia, Jamie


Design Specification Site Architecture

Home

NEWS

OVERVIEW

APPOINTMENT

FAQs

CONTACT

OVERVIEW

VIDEOS

LOCATION

PREPARATION

EVALUATION

CONTACT US

LAB CONFIGURATION

Students

EXAMPLES

SEARCH

Sandra, Mavis, Junia, Jamie

VOLUNTEER


Main Task Flows • Users want to make an appointment for the usability lab

Notes:★ If the information is incorrect and the required parts aren’t completely filled in by users,the system returns to the application form of the “Appointment ”page. The system mentions users where error occurred.

Students

Sandra, Mavis, Junia, Jamie


Main Task Flows • Apply to be a volunteer

Notes:★ If the information is incorrect and the required parts aren’t completely filled in by users, the system returns to the “Volunteer” page. The system mentions users where error occurred.

Students

Sandra, Mavis, Junia, Jamie


Main Task Flows • Find out the answers

Notes:★ If the information is incorrect and the required parts aren’t completely filled in by users, the system returns to the “Contact us ”page. The system mentions users where error occurred.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations Homepage

1. This module will have a picture that will change when users go to the different page. 2. The overview text shows information about what the site is about. 3. This module will show the most recent links which can be connected to the specific item’s landing page. 4. This module will highlight the newest information. It will contain the picture and thumbnails. The user can click the links to go to the “News� landing page.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations News

1. The text displays the news lists of the website. Each page shows maximum of 10 data.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations Overview

1. The text displays the overview information of the usability lab.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations Examples

1. This module will display the video’s thumbnail image about the usability test. The user can click the image link to view the detail description and play the video. 2. The module provides the images of the video’s thumbnails and the left and right button. The user can click one one of the image links to see the detail. Also, the buttons will direct the user to view more video’s thumbnail images. 3. The “Evaluation” subsection will direct the user to view the introduction of Heuristics evaluation and the examples of web usability heuristics.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations Appointment

1. The schedule step direction tell users where they are while making an appointment. 2. The drop-down menu will display the calendar of this month, so the user can choose the date they want. 3. This module will display the calendar showing the dates and time. The user can click the date and time they want and then go to the next step.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations Appointment-step 2

1. The user enters the personal information such as the name, email address, the AAU id and the purpose. 2. The “Cancel” button will allow the user to remove all information which has been typed. 3. The “Continue” button will direct the user to go to the next step.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations FAQs

1. The text displays the FAQs information of the usability lab. 2. When the users has more question, the user will click the “Contact us” button to link to the “Contact” page.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations Contact > Location

1. The text displays the information of the lab’s location. 2. The image displays the google map of the usability lab.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations Contact > Contact us

1. The text displays the contact information of the usability lab. 1. The user enters the personal information such as the name, email address and the purpose.

Students

Sandra, Mavis, Junia, Jamie


Wireframes & Annotations Contact > Volunteer

1. The text describes what is a volunteer for. 2. The user enters the personal information such as the name, email address, gender and the purpose.

Students

Sandra, Mavis, Junia, Jamie


Comps Homepage

Students

Sandra, Mavis, Junia, Jamie


Comps News

Students

Sandra, Mavis, Junia, Jamie


Comps Overview

Students

Sandra, Mavis, Junia, Jamie


WNM606 Principles of Usability

Comps Examples

Final Design Specification - Usability Lab at AAU

27


Comps Appointment

Students

Sandra, Mavis, Junia, Jamie


Comps Appointment

Students

Sandra, Mavis, Junia, Jamie


Comps FAQs

Students

Sandra, Mavis, Junia, Jamie


Comps Contact > Location

Students

Sandra, Mavis, Junia, Jamie


Comps Contact > Contact us

Students

Sandra, Mavis, Junia, Jamie


Comps Contact > Volunteer

Students

Sandra, Mavis, Junia, Jamie


Testing Test Observation Summary Overall, we got the useful feedback and suggestions through test observation. All the testers considered we had some language problems such as unable to understand what “propose your requirement” meant. Also, we found the message on the Schedule page was unclear so that they would call into question if they would got the reply from the system at once after making an appointment. Moreover, some of the testers felt confused with the name of the section so that they couldn’t get to the specific page immediately. Therefore, we changed the name of section “Schedule” into “Appointment”, and transformed “About” into “Overview” . In addition, the links called “Contact information” and “Contact us” were too similar, so we revised the structure of Contact page and fixed the names of these links to “Location” and “Contact us” on this page in oder to make them easy to recognize. Because scheduling the time for students and volunteers is the more important part on this site, we were suggested to make these links called “Student” and “Volunteer” clearly put on the right pages. Even though we considered these links should be put on one site, the result of testing letted us know most users might get to the “Contact” page for joining on volunteering. Therefore, we moved “Volunteer” on the Contact page and keep “Student” on Appointment page. At the same time, it made users distinguish the difference of objectives between students and volunteers clearly. Users didn’t have problems with making an appointment. They all considers the rules were simple and easy to complete the steps. However, it was mentioned that we should put the description above the forms in oder to make users understand the objective of the page. To sum up, we thought that the testers’ feedback and suggestions were very beneficial and useful. They gave us much more assistance to let us find the points we might not figure out. So we have made use of their comments to update our website. They considered our site is friendly and easy to use.

Students

Sandra, Mavis, Junia, Jamie


Testing Materials & Results • Scenario 1. Find out the information about the usability study You have an MFA thesis project and you want to know what you should prepare before you can begin getting feedback from the test participants on your design. Task: Find out the process of the usability study. • Scenario 2. Find out the location of the usability lab This is your first time to go to the usability lab at AAU, and you really want to know where the lab is and how to get there. Task: Find out the map image and the address of the usability lab. • Scenario 3. Make an appointment You have an MFA thesis project and you want to schedule an appointment with the usability lab coordinator to review your plans. Task: Find out the schedule and choose the date and time and then fill out the application form. • Scenario 4. Refer to some information about the paper prototype You want to get user feedback on your design by developing a paper prototype of your thesis project. However, you have no idea how to set up and run your own usability studies. Task: Find out the example link and then play the video • Scenario 5. Find out the answers You feel unfamiliar with usability. Even though you understand it is very important to use usability on your project, you have no idea what the usability testing is and what you need to do to use the lab... Task: A. Find out the lists of questions and answers B.Find out the email function and send the form • Scenario 6. Apply to be a volunteer You are really interested in websites and want to volunteer your time to help out. You are not sure when you can volunteer, but you hope you have an opportunity to join it. Task: Find out the application form for volunteer and send it.

Students

Sandra, Mavis, Junia, Jamie


Questionnaire Basic information • Name: Colin • Your occupation/Job Title: MFA Student • Your age: under 16 | 16-21 | 22-27 | 28-33 | 33+ • Gender:

female | male

• Highest level of education:

High school | College | Bachelor’s degree | Graduate | Work

Experience • How long have you used computers? 17 years • Which computer operating systems do you use regularly? Windows Vista • Which Internet browser do you use regularly? Firefox • Do you think that a website is friendly? Friendly • Do you ever use usability principle to your website? No • How often do you use the information of usability? No • How often do you visit usability websites? Once a month Homepage The following questions are about your experience with using our site at www.usabilitylabaau.com • Did you understand what the web site is about? Yes, it is a lab website. • Was it easy to use? Yes • Did you like the organization of the site? Yes • Did you like the color scheme of the website? Yes • Is it visually appealing? Yes • Was the information informative? Yes Appointment • Was making an appointment easy to use? Easy • Did you understand the rules for making an appointment? Yes • How easy were the steps for you? Yes • Did you think that the system help you easily schedule your appointment? Yes • Would you use this system again? Yes • Any suggestions to improve this part? Bigger fonts Volunteer • Did you know how to be a volunteer? Yes • How easy were the steps for you? Need direction • Was the applying page clear enough for you? Yes • Any suggestions to improve this part? Provides step by step direction Overall • What did you find as the most useful aspect in the site? News • Is there any feature that is missing from this site that you would like to add? Step by step direction • Do you have any other comments about Usabilitylabaau.com that you would like to offer? No

Students

Sandra, Mavis, Junia, Jamie


Questionnaire Basic information • Name: Kuan-Yu Pao • Your occupation/Job Title: MFA Student • Your age: under 16 | 16-21 | 22-27 | 28-33 | 33+ • Gender:

female | male

• Highest level of education:

High school | College | Bachelor’s degree | Graduate | Work

Experience • How long have you used computers? 8 years • Which computer operating systems do you use regularly? Windows XP • Which Internet browser do you use regularly? IE • Do you think that a website is friendly? Yes • Do you ever use usability principle to your website? No • How often do you use the information of usability? One month • How often do you visit usability websites? Just one time Homepage The following questions are about your experience with using our site at www.usabilitylabaau.com • Did you understand what the web site is about? Yes • Was it easy to use? Yes • Did you like the organization of the site? Ok • Did you like the color scheme of the website? Yes • Is it visually appealing? Yes • Was the information informative? Yes Appointment • Was making an appointment easy to use? Yes • Did you understand the rules for making an appointment? Yes • How easy were the steps for you? Easy to understand • Did you think that the system help you easily schedule your appointment? Yes • Would you use this system again? Yes • Any suggestions to improve this part? It needs to provide the introduction of the system Volunteer • Did you know how to be a volunteer? Yes • How easy were the steps for you? Easy to understand • Was the applying page clear enough for you? Yes • Any suggestions to improve this part? No Overall • What did you find as the most useful aspect in the site? Making an appointment • Is there any feature that is missing from this site that you would like to add? Yes • Do you have any other comments about Usabilitylabaau.com that you would like to offer? Provides the introduction of making an appointment.

Students

Sandra, Mavis, Junia, Jamie


User Testing Results Test 1: Hayley • Had no problem with the links getting to the pages and feel easy to use. • understood the rule of scheduling the time • Had some language problems, didn’t understand what “propose your requirement” means • Suggested we can put the link on the calender form of Schedule page to help users complete the process of making an appointment. Test 2: Cara • Found the site and feel easy to use • felt clear to know how to make an appointment on Schedule page • Had some language problems, feel confused with the message after completing the steps on Schedule page • Suggested we can delete the link called “See More” on Examples page • Suggested we can make a form on Contact page to let users ask questions • Mentioned we put the link “ Volunteer” on Contact page. Test 3: Christ • Selected 4 different links before selecting the correct on About page • Had some problem of the main navigation, couldn’t associate the section “Schedule” with making an appointment • felt easy to complete the step for making an appointment on Schedule page • Suggested we put more lists about questions and answers on FAQs page Test 4: Kathleen • Felt confused between the links for the “Contact Information” and the “Contact us”, too similar • Mentioned the link called Volunteer should be putted on Contact page • Mentioned we display some messages or description about volunteer on Contact page • Suggested we delete the part “Creating an account” on Schedule page

Students

Sandra, Mavis, Junia, Jamie


Conclusion Through this process we have tried to consider users needs. We not only provide the direction for using the lab but also give the way to contact the lab online. Our goal is to build a user friendly site that is easy to use as well as able to promote the utility rate. Our target audiences focus on AAU students and staffs. We want to create an online environment where users can directly connect with the lab online such as making an appointment or joining in the lab at AAU. By means of analyzing our competitor, we think that most websites focus on providing much more information about usability. Even though they display their services and the simple form to connect with their lab, users can’t make clear to schedule their time at once when making an appointment. So in terms of arranging our website not only included the information about usability and the directions for using the lab, we added the feature that gives users more freedom to schedule their time online as well as easy to complete the steps for making an appointment. From the results of testing, we discovered that we needed to make some links more definite and also put some introduction and objective description on Appointment page and Contact page in oder to let users feel friendly and easy to understand how to use this site. Besides, we find the on-line service for making an appointment is very clear and simple to make users successfully complete the process. To sum up, this project has taught us that it is the most important for a site to focus on user design. From making the information architecture to designing the composition of various pages and then receiving the testers’ feedback, we updated and refined our site. We discovered that we has gotten specific usability issues from each step instead of relying our subjective views when designing Usabilitylabaau.com. Therefore, we feel that Usabilitylabaau.com is possible to be a real and friendly site also easy to use.

Students

Sandra, Mavis, Junia, Jamie


AAU Usability Lab