JOSHUA LOWEMOBILE PORTFOLIOADVANCED WEB | PETRONIO BENDITOAPRIL 30, 2014

CONCEPTUAL MODEL SKETCHES

CONCEPTUAL SITEMAP

ABOUT HOME A

A B C D

E F G H

I J K L

M N O P

Q R S T

U V W X

Y Z AA BB

CC DD EE FF

RESUME CONTACT LIKES DISLIKES

WHO WHAT(ABOUT) (PORTFOLIO)

SITEMAP

USABILITYREPORT

Joshua Lowe | Usability Methods

Method #1: Task Scenarios

OVERVIEWAsk test subjects to interact with your website in specific ways, by giving them “tasks” to accomplish. Observe and record how each user accomplishes these tasks. Compare and contrast preconceived ideas with how users actually went about accomplishing tasks.

WHY • To gauge users ability to accomplish

the goals of your website. • To aquire insight into user process.• To refine site navigation and inter-

activity

WHO5 Users. It only takes 5 users to give you an accurate account of usability in qualitative studies. This small number yields a healthy return on investment when compared to larger studies.

WHERE• Moderated in-person testing. (For-

mal or informal setting)• Moderated remote testing.• Unmoderated remote user testing.

WHATDetermine what your sites main goals are. What should a user be able to accomplish easily and effectively when visiting your site? Design your test-tasks around these goals.

Jacob Gube, in his web usability series, defines what should be evaluated for each task:

• Learnability: How easy is it for new users to learn to perform the task? For more complicated tasks, are there sufficient help features such as tutorials, in-line tips and hints, tool tips, etc.?

• Intuitiveness: How obvious and easy is the task to accomplish?

• Efficiency: Are users performing tasks optimally? Are there ways to streamline and reduce the time it takes to complete the task?

• Preciseness: How prone to errors is the task? What are the reasons for any errors? How can we improve the interface to lower errors and unneeded repetition?

• Fault Tolerance: If a user makes a mistake while performing the task, how fast can he recover?

• Memorability: How easy is the task to repeat?

• Affordance: Are interactive ele-ments (such as buttons, links and input text boxes) related to the accomplishment of a task obviously interactive and within convenient reach? Is it evident what the results of a user action will be when the user decides to interact with it by clicking, mouse hovering, etc.?

HOW

Usability.gov proposes these measures:

When identifying scenarios for usability testing, you should limit your test to 10 to 12 tasks due to time constraints. Additionally, in a usability test, you can ask users for their own scenarios. Why would they come to your site? What do they want to do?

Usability testing scenarios should not include any information about how to accomplish a task. The usability test will show how the participant accomplishes a task and shows you whether the interface facilitates complet-ing the scenario.

You should, however, write down how to accomplish the task. This information is in-cluded in the material that the observers and note-takers will use. Include the main path-way and any alternative pathways the partici-pant may use to accomplish the scenario. Af-ter the test, compare how you thought users would complete the task to how they actually completed the task. This comparison provides valuable insight into the effectiveness of your site’s architecture and navigation.

While talking and interacting with test subjects, Nielsen Norman Group suggest three methods:

1) Echo: With the echo technique, the facilita-tor repeats the last phrase or word the user said, while using a slight interroga-tory tone.

Example: User: This table is weird, well, hmmm, not sure what, uh… Facilitator: Not sure what? Or Facilitator: Table is weird?

2) Boomerang: With the boomerang tech-nique, the facilitator formulates a generic, nonthreatening question that she can use to push the user’s question or comment back to him.

Example: User: Do I have to register to buy this? Facilitator: What would you do if you were really doing this on your own?

3) Columbo: With the Columbo technique, be smart but don’t act that way.

Example: User: If I close here will I lose my work? Facilitator: Uhm, you are wondering if [pause] you might [pause.] User: I am just not really sure if I should pick “close” or “cancel” or “ok.” I guess I don’t know the difference between these buttons.

Method #2: User Surveys and Feedback

OVERVIEW Used to gauge user experience through feed-back. Determines how pleasant a website is to use, overall impression, and effectiveness of design. This method is largely subjec-tive due to emphasis on individual’s unique opinions.

WHY • To gauge user experience• A qualitative approach is neces-

sary to determine success when quantitative measures lack insight and depth

WHOA private study can be conducted using a handful of test subjects. Additionally, things like surveys or feedback pages on your web-site can be employed to reach real-life users.

WHAT

Jacob Gube, in his web usability series, de-fines some considerations when evaluating user experience:

• Fulfillment: Do users feel satisfied after interacting with the website?

• Usefulness: Does the user feel like he’s obtained value from using the website?

• Enjoyment: Is the experience of being on the website fun and not burdensome?

• Positive Emotions: Do users feel happy, excited, pleased, etc. when they interact with the site?

HOW• Formal Moderated In-Person Stud-

ies may be conducted.• Focus Groups• Informal studies consisting of

online surveys of users• Feedback sections on website

Other Methods & Brief Overviews

3) EyetrackingUsing recording methods to track eye move-ment on the page. Should be done by expe-rienced facilitators and only after extensive classic. Can be expensive. Need around 40 test subjects for accurate results. You should diverge that you will be tracking user’s eyes when scheduling the subjects, without put-ting too much emphasis on it during test.

Source:http://www.nngroup.com/reports/how-to-conduct-eyetracking-studies/

4) Expert ReviewBring in field experts for usability testing sites with specific audiences and uses. Can be costly and time consuming.

5) Competitive AnalysisObserve and interact with sites of competing companies in the same field. Note successes and failures of their methods. Discover best practices among peers.

6) A/B testing

From Webdesigndepot:

The method is called A/B testing because there are two versions of a website/interface (the A and the B version) that are compared. They are always identical, except for one variation (which can be an element such as a button, contact form or image) that might impact a user’s behaviour.

During the testing period the website is monitored through tools such as Google Analytics. In this period the two versions, A and B, change randomly, which means that you can come on the webpage and find a header image, then refresh the webpage and find the other header image.

The methodology is mainly used behind the scenes to maximize profit, reduce drop-off rates and increase sales. Amazon pioneered the methodology, but companies like eBay, Google, Walmart, Microsoft, Netflix and Zynga are also known for employing this method to increase the profitability of their sites.

Although this is mainly used for e-commerce websites, A/B testing can easily be used in interface design as well; and it can be as effective as giving testers an overview of which interface is better between a choice of two or more.

7) Card Sorting Low-tech method used to determine com-mon sense approaches to structuring and organizing a site. Site main ideas and pages are written on cards, shuffled, and then given to test subject to arrange in a way they find meaningful.

NOTES

1) The classic process (from: http://alistapart.com/article/usability-testing-demystified) The process that Jeff Rubin and I present in the Handbook of Usability Test-ing, Second Edition could be used for a formal usability test, but it could also be used for less formal tests that can help you explore ideas and form concepts and designs. The steps are basically the same for either kind of test:

Develop a test plan Choose a testing environment Find and select participants Prepare test materials Conduct the sessions Debrief with participants and observers Analyze data and observations Create findings and recommendations

2) Do not interrupt too frequently or at poor times.

3) From Nielsen and Norman Group: Do not say things like, “We have to do that again” when calibrating. People think there is something wrong with them if you say things like “that didn’t work” or “we’ll have to do that again.” If you are more carefree in your voice and words, the user will remain comfortable._____________________________

SOURCES:http://www.usability.gov/how-to-and-tools/methods/usability-testing.htmlhttp://mashable.com/2011/09/30/website-usability-tools/http://www.usability.gov/how-to-and-tools/methods/scenarios.htmlhttp://alistapart.com/article/usability-testing-demys-tifiedhttp://www.webdesignerdepot.com/2013/06/how-to-approach-usability-testing/http://www.measuringusability.com/blog/method-when.phphttp://www.nngroup.com/reports/how-to-conduct-eyetracking-studies/http://www.nngroup.com/articles/card-sorting-how-many-users-to-test/http://www.nngroup.com/articles/how-many-test-users/http://www.nngroup.com/articles/talking-to-users/

FINAL DESIGN

JOSHUA LOWE MOBILE PORTFOLIO

• WHO section scrolls left and right through 3 info screens

• WHAT section scrolls up, down, left, and right through 72 images

• Home Button available on every page

JOSHUA LOWE MOBILE PORTFOLIO

• WHO section scrolls left and right through 3 info screens

• WHAT section scrolls up, down, left, and right through 72 images

• Home Button available on every page

PORTFOLIO MODEL

HOME

PORTFOLIO MAP

USER TESTING

ScenarioImagine you are in need of a graphic designer for an upcoming project, and your colleague has emailed this digital portfolio site along to you.

Please spend some time exploring the site, trying to decide whether or not you will pursue this designer.

Questions to answer once you are done exploring:

1) How many images would you estimate are included in the portfolio?

One of Brochure, 2 on Home Page

2) What is your favorite aspect of this site?

Nice introduction of your background

3) What is your least favorite aspect of this site?

More – I’m guessing this is just the beginnning

4) Would you hire a designer based on this website? Why or Why Not?

Would like to see more

5) Any other suggestions/thoughts on how to improve this site?

N/A

Designer Notes:User only clicked on the “WHO” section, but did not realize that there was a “WHAT” section. Because of this, she was only able to view 3 pages.

Possible Remedy: Make arrows on home page look more like buttons. Consider changing the words Who and What to more obvious choices.

User: 50+ yr female, not computer saavy

USER 1

ScenarioImagine you are in need of a graphic designer for an upcoming project, and your colleague has emailed this digital portfolio site along to you.

Please spend some time exploring the site, trying to decide whether or not you will pursue this designer.

Questions to answer once you are done exploring:

1) How many images would you estimate are included in the portfolio?

40+

2) What is your favorite aspect of this site?

The VARIETY of materials--Logos, covers, magazine spreads, posters

3) What is your least favorite aspect of this site?

That I have to poke the arrow to move the pic vs. just sliding it -- or having it move by sliding motion.

4) Would you hire a designer based on this website? Why or Why Not?

Yes - very wide array of capabilities -- tastefully done -- simple, creative, and a great representation of the designer’s range. This, plus all pics are super clear and crisp.

5) Any other suggestions/thoughts on how to improve this site?

Slide function vs those little arrows because some times when I touched them, they’d highlight the picture and my fingers aren’t even fat.

Designer Notes:I too would prefer a user interface that incorporated the swiping motion to flip between images. Without arrows though, an intruction screen might be needed to let users know they can go all directions.

User: 33 yr female, above average computer saavy

USER 2

FLINTOPROTOTYPE: https://www.flinto.com/p/6386d7a6