SlideShare utilise les cookies pour améliorer les fonctionnalités et les performances, et également pour vous montrer des publicités pertinentes. Si vous continuez à naviguer sur ce site, vous acceptez l’utilisation de cookies. Consultez nos Conditions d’utilisation et notre Politique de confidentialité.
SlideShare utilise les cookies pour améliorer les fonctionnalités et les performances, et également pour vous montrer des publicités pertinentes. Si vous continuez à naviguer sur ce site, vous acceptez l’utilisation de cookies. Consultez notre Politique de confidentialité et nos Conditions d’utilisation pour en savoir plus.
(From UPA 2011-Atlanta) Usability practitioners have a variety of methods and techniques to inform interaction design and identify usability problems. However, these tools are not as effective at evaluating the visceral and emotional response generated by visual design and aesthetics. This presentation will discuss why studying visual design is important, review considerations for preference and desirability testing and present two alternative approaches to user studies of visual designs in the form of case studies.
Impacts a product's or application's perceived:UtilityUsabilityCredibility
If users have a positive impression of the design aesthetics, they are more likely to overlook or forgive poor usability or limited functionality. With a negative impression, users are more likely to find fault with an interaction, even if a product’s overall usability is good and the product offers real value.
High desirability feeds into the motivational factors that help trigger target behavior.
High desirability feeds into the motivational factors that help trigger target behavior.
The simplicity of the question doesn’t work well with larger numbers of design options, especially if some are highly similar
People can have a difficult time articulating what it is about a design they like or dislike
The whys are important for stakeholder acceptance (branding guidelines)Business sponsors and stakeholders often want substantial customer feedback to assure them a given direction is correct.
TriadingQualitative interview technique that reveals constructsElicits attributes that are important to users in their vocabularyResearcher asks the participant to identify how two of the three examples are different from the thirdIn typical user research interviews, a researcher asks participants about their thoughts on a defined list of topics. The disadvantage of this approach is that the researcher may be inquiring about topics that are of little value or significance to the experience of the participants. Generally, participants will dutifully answer questions about any topics we ask them about, without thinking more broadly, going beyond the limits our questions impose, or interrupting us to tell us about dimensions that may be more relevant to them. Participants assume researchers are interested in studying the particular topics they’ve included in their interview scripts and don’t raise other issues that might be more pertinent to their overall experience with a product or potential design.Triading is a method that allows a researcher to uncover dimensions of a design space that are pertinent to its target audience. In triading, researchers present three different concepts or ideas to participants and ask them to identify how two of them are different from the third. Participants describe, in their own terms, the dimensions or attributes that differentiate the concepts. Participants follow this process iteratively—identifying additional attributes they feel distinguish two of the concepts from the third until they can’t think of any other distinguishing factors. By repeating this process across multiple participants, researchers can see trends that define audience segments or personas.The benefit of this process is that it uncovers dimensions of a particular domain that are important to the target audience rather than the researcher or designer. In addition, the dimensions participants identify are generally emotional aspects that it is important for experience designers to consider. For example, participants may describe differences in groups as “warm” versus cold” or business-like” versus fun.” Designers can then use the most relevant or common dimensions as inspiration for further design and exploration.
Benefits – straightforward and easy to administer on a large scaleNegatives – if you want to pick more than a clear winner but rather understand the emotional connections/reactions to each design this will not lend itself to that.
Obvious examples are consumer electronics or other retail productsAlso appropriate for applications in healthcare, insurance, financial, travel, etc.
Sensors track participants’ physiological measurements to particular designs. Changes in suggest a particular emotional response.Paired with attitudinal and self-reporting surveys measurements give a multifaceted view of emotional reactions to a design
Respondents are being asked: "To which extent do the feelings expressed by the characters correspond with your own feelings towards the stimulus?“Building on the responses of many people allows you to abstract valuable data pertaining to the emotional performance of your website, product, service.
“My initial reaction to this web site is that it seems kind of plain. There is not much going on in the page, and the colors seem kind of drab.”“This is a nice looking website. It is well designed, well laid out, and is appealing to look at. It makes me want to continue to navigate the site to learn more. “
“Men don’t really go with children… where there’s a baby, there must be a mother.”“My initial reaction to the website is that it seems very clean and modern. I like the layout, it looks like its easy to find information.”
“I felt love. I saw a mother holding a child…that’s pretty touchy. The site looks good, and it makes the hospital trustworthy.”“My initial reaction was that the hospital is represented by a caring, warm and friendly website.”
As you’re about to see, my story is just a LITTLE bit different than Mike’s . . .I joined the legal business unit of TR in 2007, just as it was about to embark on a 3-year, $90 million journey to produce a next generation subscription-based legal research tool. Please note the catchphrase in the center graphic – Legal Research Goes Human. This was at the core of what the executive leadership was trying achieve. Which was no easy endeavor – first, because legal research is not a pleasurable activity under any circumstances, and second, because the legacy Westlaw product, which had long dominated the market, looked like this . . .
This is one tab out of more than 100 that the user could have access to. Some were worse than this.Most of the selling points of the new system were going to be feature-based – a completely new and proprietary search algorithm, robust filters, the ability to create and share folders, collaborative tools, etc.However, the top exec, to his great credit, said he wanted to create something users would love to use – he used to say “I want them to snuggle up in bed with it at night.” And he committed to significant preference testing of designs toward dual purposes of equal significance: guiding the design itself, and having rock-solid justification for the senior executives for what we were doing. To Mike’s earlier point, that meant quantitative data with lots of users.
Initial goals were . . .1.2.measure how strong the brand was and whether people cared if it was messed withCritical – affected our approach, as you’ll see
In May of 2009, inparellel with the feature build outs . . .
This was done for security reasons (phones put away, constant monitoring)I told you our approach was different . . . Try to stay with me
This was to establish that users liked and were loyal the product, but hated the design
Presented pages designs with instructions to a focus on a specific element in isolation – like use of a photo/image in the product header, or size of the search area – to see if there were any trends in those areas.Here’s how they did is
Look at all pages in full screen (randomized)
From those they reviewed, select
Either change the one you selected, or move on to the next Design Element.
Looked at, and selected from, 32 screens
In the Design Gallery phase, users were asked to register their preferences to optimized page designs in their totality.
Instructions – you’re going to see them again and give an overall rating on a 10 point scale
Top 5 choices are presented, with a way to rate key aspects to get granular on what they like
As well as their bottom 2 – what they don’t like
We had them do the same for Results Lists (smaller numbers of design elements and design gallery, but the same way to rate their top 5 and bottom 2)
And document display as well
Revisit the descriptors to establish that the perception of a new design for the product was positveand they were done (MOST IN LESS THAN 1 HOUR)However, we did solicit some who could stay longer to participate in a brief interview which was taped (extra $$ to those who did)
Here’s one example
Out of all this, we got 3 core buckets of emotional response information that the VP could report up .. Baseline for design refinement established based on these clear winners
2. That we were getting the desired perceptual responses on the differences between the products
post-session discussions elicited the qualitative feedback we needed to provide that color that Mike talked about earlierPlease take particular note of the 4th one there – users did not want the brand messed with. We’re going to come back to that laterOK, the design team takes the summer, refines refinesrefines, gets to a certain point, and the VP says . . .
Let’s do it again
Because of the refinements, we were able to piggyback some outstanding UI issues into this testSecurity important now more than ever – this can’t get out!!
Type formatting was the dynamic manipulation of case and statute documents on the screen, topic of my submission to UPA 2010, happy to provide that info if you’re interested
** DON”T VERBALIZE RESULTS ** (next slides)
Clear choices (in the 90% range) for each of our primary page types
Specific areas of concern about all three (Significantly T&C search)In the home stretch, 3 months away from launch, we’re doing massive final validation testing for all of the core features I mentioned at the top, when I get called into my directors officeEveryone at the top was thrilled at what was coming, BUT – “we accept that we cannot mess with the legacy blue – however, we STRONGLY advocate that the branding of the product be aligned with the corporate template (orange, gray, white that you say at the top), and if you resist you better have a damn good reason . . . .”SO
Focus on those who decide to buy, or have influence on whether to buy
Results confirmed what we knew to be true from the outset
Achieved our primary goal 759
Measuredmeasuredmeasured (quant & qual) – 759 participants total about 325kGut-level preferences, which is a by-product of emotional responseGuided the design via explicit trends to all stakeholders
Evolution – changes are nuanced, but still critical
We sort of did in phase 1, but we didn’t ask “why” so much as just get quotes of enthusiasm for the fact that the product was being updated
As I was reviewing, I thought “why would anyone ever consider doing anything like this”, but if you do
In order of ascending practicality
A lot of that comes from the top, but we as UX pros can help make the caseEvery project is different, and as you saw in my case, you can take a little bit from a lot of different methods and come up with something that works in your specific circumstancesRe-emphasize – this should be used to guide and inspire the evolution of a design, then confirm decisions (if you’ve done it right)
In order of ascending practicality
Preference and Desirability Testing: Measuring Emotional Response to Guide Design
Preference and Desirability Testing: Measuring Emotional Response to Guide Design<br />Michael Hawley<br />Chief Design Officer, Mad*Pow<br />@hawleymichael<br />Paul Doncaster<br />Senior User Experience Designer, Thomson Reuters<br />
Agenda<br />Why we should care<br />Why it’s not always as simple as asking:“Which option do you prefer?”<br />Methods to consider<br />Case Study: Greenwich Hospital<br />Case Study: WestlawNext<br />Summary/Comparison<br />
Poor articulation<br />“It reminds me of…”<br />“It’s nice and clean.”<br />“There’s just something about it . . .”<br />“I ordinarily don’t like red, but for some reason it works here . . .”<br />“It’s better than the other ones.”<br />
What Stakeholders Should Care About<br />“We should go with design C over A and B, because I feel it evokes the right kind of emotional response in our audience that is closer to our most important brand attributes.” <br />
Present three different concepts or ideas to participants, and ask them to identify how two of them are different from the third and why.<br />13<br />Triading<br />
Broad, experience-based questionnaires, that also include questions relating to visual appeal and aesthetics<br /><ul><li>SUS (System Usability Scale)
QUIS (Questionnaire for User Interface Satisfaction)
WAMMI (Website Analysis and Measurement Inventory)</li></ul>14<br />Qualitative Questionnaires<br />
Show participants a user interface for a very brief moment, then take it away. <br />Participants recall their first impression, then moderator probes for meaning.<br /><ul><li>Helpful for layout decisions, prominence of content, labels
www.fivesecondtest.com</li></ul>15<br />Attention designers: <br />You have <br />50 milliseconds <br />to make a good <br />first impression<br />Quick Exposure Memory Tests<br />
Determine intended brand attributes (and their opposites)<br />20<br />Product Reaction Cards: Before You Begin<br />Leverage existing marketing/brand materials<br />Alternatively, stakeholder brainstorm to identify key brand attributes/descriptors using full list of product reaction cards as a start<br />Tip: “If the brand was a person, how would it speak to your customers?”<br />
Methodology<br />Include 60/40 split of positive and negative words<br />Target 60 words, optimized to test brand<br />Simple question: “Which of the following words do you feel best describe the site/design/product (please select 5):”<br />One comp per participant, or multiple comps per participant (no more than 3)<br />Participants<br />Qualitative: Paired with usability testing<br />Quantitative: Target minimum of 30 per option if possible<br />21<br />Product Reaction Cards: Conducting<br />
22<br />Process - Analyzing<br />Calculate percentage of positive and negative attributes per design<br />Visualize overall sentiment of feedback using “word clouds” (see wordle.net)<br />68% Positive<br />32% Negative<br />
<ul><li>Align the website with the character of the Hospital
50 people reacted to each comp (quantitative) via survey
Additional feedback obtained via participant interviews (qualitative)</li></ul>Survey Questions<br />Hello, I am requesting feedback on a website I am working on. Your answers let me know if the site is conveying the right feel. <br />1. What are your initial reactions to the web site? <br />2. Which of the following words best do you feel best describe the site (select 5): <br />
Sessions were held in 4 cities over 5 days<br />Seattle<br />Denver<br />Memphis<br />Minneapolis-St. Paul<br />4 sessions were held per day, with a maximum of 25 participants per session<br />1.5 hours allotted per study, most participants finished in less than 1 hour<br />319 participants successfully completed their sessions<br />Phase 1: Logistics & Execution<br />
Participants completed the study at individual workstations at their own pace<br />All workstations included a 20” monitor, at 1024x768 resolution<br />Phase 1: Logistics & Execution<br />Memphis, TN, May 2009<br />
Brief review of Westlaw critical screens <br />Positive/negative word selection to describe Westlaw <br />35<br />Positive/negative product descriptors<br />
Each set of Element variations were viewed in full screen<br />Participant selects “top choice” by dragging a thumbnail image to a drop area<br />36<br />Homepage: Design Elements<br />
19 HP designs viewed in full screen (randomized)<br />All 19 options are presented again; participant assigns a rating using a 10-point slider.<br />Top 5 and Bottom 2 choices are positioned in order of rating values on one long, scrollable page. Next to each design displayed, rates key aspects for each design on a 5-point scale<br />Homepage: Design Gallery<br />
Home Page (19)<br />HP16 & HP15 designs consistently placed in the Top 5 across all filters<br />Results List (14)<br />RL4 consistently placed in the Top 3 across all sample filters, and was the #1 choice for 80% of all participants<br />Document Display (9)<br />DD3 placed in the Top 5 across all sample filters and was the #1 choice for 77% of all participants<br />Phase 1: High-level Results<br />
Note, participants were asked to describe the current Westlaw before being shown the new designs. <br />54<br />Phase 1: Word Selection Results<br />
5 design themes were derived from post-session discussions<br /><ul><li>“New design(s) are better than current Westlaw”
“No Big Fonts Please”</li></ul>The study narrowed the list of potential designs, and we better understood what design elements that Westlaw users liked and disliked.<br />Phase 1: High-level Results<br />
56<br />Phase 2: September 2009<br />Kansas City, MO, Sept 2009<br />
Goals<br /><ul><li>Refine preferences for selected design directions
Understand users personal reasons for liking their preferred choices
Get closure on other design options for online and printed content
Sustain tight security</li></ul>Tool<br /><ul><li>Same as in Round 1, with some minor revisions to accommodate specialized input </li></ul>Phase 2: September 2009<br />
Method<br />View, Rate, and Pick Top Choice for <br />Homepage (3 options)<br />Result List (2 options)<br />Document Display (2 options)<br />“Why?”<br />Simple preference selection for two unresolved UI design issues<br />Citing References: Grid display or List display?<br />Out of Plan Indication design (6 options)<br />Type formatting preferences for 3 different content types<br />Font Face<br />Font Size<br />Margin Width <br />Phase 2: September 2009<br />
Logistics<br />3 cities (Philadelphia, Kansas City, Los Angeles)<br />1 Day<br />226 participants<br />Analysis<br />Filters (8 categories) were used to score the designs for each visual preference<br />Results<br />Clear choices for top designs in each of all categories<br />“Why” feedback shed new light on designs under consideration and helped focus “homestretch” design activities<br />Phase 2: September 2009<br />
Home Page (3)<br />HP3 ranked #1in 94% of filter groups (54% of total participants) <br />Results List (2)<br />RL5 ranked #1in 97% of filter groups (58% of total participants) <br />Document Display (2)<br />DD7 ranked #1in 94% of filter groups (61% of total participants)<br />Phase 2: High-level Results<br />
The main concerns regarding Homepage Design HP3<br />Search Box <br />Too small<br />How do I do a Terms-and-Connectors search?<br />Browse Section<br />How do I specify multiple or specific search content?<br />Poor organization<br />Poor label<br />Need access to “often-used” content<br />Need better access to help<br />61<br />Participant Comments: Homepage<br />
Goals<br />Get feedback on branding options from decision makers and those who influence purchase of the product<br />Get closure on final outstanding design issues<br />Tool<br />Same as in Rounds 1 & 2, with some minor revisions to accommodate specialized input <br />Phase 3: December 2009<br />
Method<br />Wordmark/Branding<br />View wordmark color combinations and design elements against different backgrounds, pick top choice and provide comments<br />Make a final “Top Choice” from all selections<br />Simple preference selection for outstanding UI design issues<br />Header Space: Tile or No Tile?<br />Notes Design<br />Location: Inline or Column?<br />State: Open or Closed?<br />Headnote Icon design (4 variations)<br />Phase 3: December 2009<br />
What color combination do you prefer? Please rank the 4 combinations below according to your preferences. To rank, click and drag an item from the left to a box on the right.<br />Your Most Liked<br />1<br />2<br />3<br />4<br />Your Least Liked<br />
Logistics<br />3 cities (Seattle, Denver, Boston) <br />1 Day<br />214 participants<br />Analysis<br />Simple preference, no advanced filters <br />Results<br />Decision-makers confirmed that critical brand elements should be retained<br />Phase 3: December 2009<br />
Benedek, Joey and Trish Miner. “Measuring Desirability: New Methods for Evaluating Desirability in a Usability Lab Setting.” Proceedings of UPA 2002 Conference, Orlando, FL, July 8–12, 2002. http://www.microsoft.com/usability/uepostings/desirabilitytoolkit.doc<br />Lindgaard, Gitte, Gary Fernandes, Cathy Dudek, and J. Brown. "Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression!" Behaviour and Information Technology, 2006. http://www.imagescape.com/library/whitepapers/first-impression.pdf<br />Rohrer, Christian. “Desirability Studies: Measuring Aesthetic Response to Visual Designs.” xdStrategy.com, October 28, 2008. Retrieved February 10, 2010. http://www.xdstrategy.com/2008/10/28/desirability_studies<br />75<br />Additional Reading<br />
User Focus. "Measuring satisfaction: Beyond the Usability Questionnaire." Retrieved February 10, 2010. http://www.userfocus.co.uk/articles/satisfaction.html <br />UserEffect. "Guide to Low-Cost Usability Tools." Retrieved May 12, 2010.http://www.usereffect.com/topic/guide-to-low-cost-usability-tools<br />Tullis, Thomas and Jacqueline Stetson. “A Comparison of Questionnaires for Assessing Website Usability.” Usability Professionals’ Association Conference, 2004.home.comcast.net/~tomtullis/publications/UPA2004TullisStetson.pdf<br />Westerman, S. J., E. Sutherland, L. Robinson, H. Powell, and G. Tuck. “A Multi-method Approach to the Assessment of Web Page Designs.” Proceedings of the 2nd international conference on Affective Computing and Intelligent Interaction, 2007.http:// portal.acm.org/citation.cfm?id=1422200<br />76<br />Additional Reading<br />
Five Second Testhttp://fivesecondtest.com/<br />Feedback Army http://www.feedbackarmy.com<br />Wordlehttp://www.wordle.net<br />PrEmohttp://www.premo-online.com<br />77<br />Additional Tools<br />