15 Strategies for a Better User Experience
-
Upload
suzanne-chapman -
Category
Technology
-
view
84 -
download
1
Transcript of 15 Strategies for a Better User Experience
15 Strategies for a Better User ExperienceSuzanne ChapmanUniversity of Michigan
http://bit.ly/UX4MAC
Head of UX Dept @ University of Michigan Library
HathiTrust, mobile, U-M Library
"UX Generalist"
Occasional blogging & tweeting @userslib.com & @mlibraryUX
UX What I Do
Survey Says….
● More than half of you work at an organization with fewer than 10 FTEs.
● Almost all of you have some restriction on what you can do with your site.
● You have limited time, resources, skills.● You value and understand the importance
your website plays for your organization. Yay!
UX ≠ just usabilityUX = problem solving, creative thinkingUX = understanding user behaviorUX = design (visual & interaction)UX = bridge between programmers and users UX = strategiesUX = holistic
UX What is UX (User Experience)?
PLANNING CONTENTDESIGN TESTING
Strategic Goals
Priorities
Project Brief
DISCOVERY
User Needs
Usage Stats
Participatory Design
Inventory
Guiding Principles
Plain Language
Labeling
Audit
Card Sorting
Mental Models & Design Patterns
Visual Hierarchy
Guerrilla Test
UX #1 - KEEP IT ABOUT THE USERS
It doesn't matter how awesome your product is or your presentation or your post, your awesome thing matters only to the extent that it serves the user's ability to be more awesome.
Kathy Sierra
● It’s not about us!
● User-centered content
● User-centered features
● User-centered design
http://www.flickr.com/photos/uglib/553362813/sizes/l/in/photostrea
m/
UX #2 - KEEP IT SIMPLE● Simple
strategies● Simple
research methods
● Simple design
● Do less to do it better
http://www.nngroup.com/articles/which-ux-research-methods/
Focus on strategies that are qualitative, informal, and unscientific.
Steve Krug
The purpose isn’t to prove anything; it’s to get insights that enable you to improve what you’re building.
UX #3 - KEEP IT REALWHEN POSSIBLE:● Real needs (not
anticipated/perceived/projected needs)
● Real tasks (not artificial ones)
● Real user data
Use what’s available to you● usage stats● reference interactions
○ find and analyze user goals & traits○ failure points
UX #3 - KEEP IT REAL
How do I find a good database for Art History?
Easily answered but... why did they have to ask? This should be easily accomplished!
What people say, what people do, and what they say they do are entirely different things.
Margaret Mead http://en.wikipedia.org/wiki/File:Margaret_Mead_NYWTS.jpg
● They overestimate, underestimate, & even fib!
● They’re really bad at articulating their problem.
● And they’re really really bad at coming up with solutions.
Luckily - you have powerful reference interview skills!
Get the most from your limited user interactions.
I hate the staff intranet, the usability is terrible.
It never has the information I need.
Actual problem = the information they needed wasn’t actually on the intranet! = content problem
Can you give me a specific example?
Can you build a tool that will let me mark books with a flag?
Tell me more...
Actual solution = add a visited link color
I look at a lot of books and it’s hard to keep track of which ones I’ve already looked at.
Logistics:
● Documentation and formal reporting: for tracking, communication, and problem-solving & analysis.
● Pick a tool & establish method of use.○ Google Drive - spreadsheets, docs, slides, images
PLANNING: Basics
PLANNING: Basics
Get stakeholder approval & buy in:
● If you do the work will the recommendations be implemented?
● What do they think/need? What are their expectations?
● Involve them directly in the work○ they’ll empathize more○ they’ll trust results more○ it’s harder to be critical if you’re participating
PLANNING: Basics
Establish a set of strategic goals for your website.
1. Keep them basic & about the big picture - what general services should your website provide?
2. Draft & get feedback...and agreement.3. Refer back to them when there’s
disagreement.
4. Revise as needed.
1 PLANNING: Strategic Goals
1. Users can efficiently find known library resources & services.
2. Users can efficiently discover new library resources & services.
3. Users can discover library events, exhibits, and library-related news that interests them.
4. Users can efficiently manage their library account.
5. Users can perceive the library as a responsive, inspiring, vibrant, and valuable.
6. All users can easily access library resources and services.
2 PLANNING: Prioritieshttp://commons.wikimedia.org/wiki/File:Whac-A-Mole-Dog.jpg
80/20 Rule: 80% of a product’s usage involves 20% of it’s features (so focus on the 20%).
2 PLANNING: Priorities
http://designmind.frogdesign.com/blog/the-peculiar-logic-of-remote-control-design.html
Admit you can’t solve all problems so plan to iterate. “Phase 1” is a useful thing to tack onto the end of a project title.
Know when to say “no” (or “no, not right now).
2 PLANNING: Priorities
2 PLANNING: Priorities (impact v. cost)high user impact
low user impact
critical: roadblock to getting
an important task done
→
medium: would improve
convenience; reduce training costs
→
← high: greatly help user productivity & awesomeness
←low: few users would benefit, minor improvement
2 PLANNING: Priorities (impact v. cost)high user impact
low user impact
high cost
low cost
add popular databases to home page
add weather to home page
•
•
2 PLANNING: Priorities (impact v. cost)high user impact
low user impact
high cost
low cost
DO THESE FIRST!
DON’T EVER DO THESE!
DO THESE SECOND!
DO THESE SECOND!
2 PLANNING: Priorities (goal alignment)
1. Users can efficiently find known library resources & services. (3)
2. Users can efficiently discover new library resources & services. (3)
3. Users can discover library events, exhibits, and library-related news that interests them. (2)
4. Users can efficiently manage their library account. (3)
5. Users can perceive the library as a responsive, inspiring, vibrant, and valuable. (1)
6. All users can easily access library resources and services. (3)
2 PLANNING: Priorities (goal alignment)
Feature → Goals weight
Add weather to homepage
Add popular databases to homepage
Find known library resources & services
3 0 5
Discover new library resources & services
3 0 3
Discover events, exhibits, news
1 0 0
TOTAL (VALUE SCORE) 0 24
● Who’s in charge? Who’s on the team?
● What’s the timeline?
● Who are the stakeholders?
● Is this a priority effort?
● What problem are we trying to solve?
● What are the Project Goals?
● What is the scope?
● Who are the target users?
● Obstacles or constraints?
● Type of work required?
3 PLANNING: Project Brief
3 PLANNING: Project Brief
Project Name Project: Stopgap (gateway refresh)Problem Statement Gateway is weighted too much towards
communications content and not enough towards user-focused activities that support research and general information needs.
Goals 1. expand focus to include more research-related activities and minimize communications
2. better visual balance3. establish new procedures & best practices for
management of home page content4. ensure new changes are compliant with web
accessibility standards
3 PLANNING: Project Brief
Project Name Project: Stopgap (gateway refresh)Scope 1. “Complication free”
a. work within current framework/3 column structure & overall design
b. focus on improvements we can make quickly
c. don’t try to solve all problems right now2. focus is entirely on body area, footer content
and minor styling
Target Users Regular/semi-regular users of the gateway who are focused on core activities and invested in getting to their valued resources quicker.
● gov.uk’s design principles● Suzanne’s Google Spreadsheet for
priorities● Priorities: Kano Method; Affinity Diagram
PLANNING: More
● Who are your users?● What are their goals?● What do they want and need?● How is your website meeting or not
meeting those needs?
DISCOVERY: Basics
Survey Says…. Your users:● Undergrad & Grad Students● Genealogists● Researchers● Wide range of technological literacy● Diverse socio-economic background● Alumni● Local Media● Church ministers & members● Local history buffs
4 DISCOVERY: User Needs
Exploring & Documenting User Needs helps you: a) think about your users b) identify gaps for further investigation c) frequent reference throughout project (to be revised as more info is found).
1. Brainstorm with your co-workers about your experiences with your users - their goals, their struggles.
2. Investigate known data & conduct new research.
3. Revise.
4 DISCOVERY: User Needs
User Freshman
User Goal 1st research paper due tomorrow & just needs something to cite. Prof said to use library & find something called a “primary source”
Limitations Primarily familiar with Google & Wikipedia, doesn’t know jargon, doesn’t have a clue where to start.
Path to accomplish goals
homepage → get help → research guides → find right subject guide → skim/nav 10 pgs of info → find recommended database → use database → find useful article
1. Individually or with your neighbor - take a few minutes to draft up some ideas about some of your user groups.
2. Discuss with your neighbor.3. Volunteer for report out.
ACTIVITY: User Needs
5 DISCOVERY: Usage StatsGoogle Analytics!
● Gain insight about user behavior● Help understand how pages & features are
(or are not) being used● Help build a case
Some applications:A. Use vs. Screen Real estate
B. Surface hidden & valuable content
2% :: 40% 2% :: 2% 2% :: 35%
14% :: 0.4% 30% of real estate0.001% of site traffic
A Site Use vs. Screen Real Estate
5 DISCOVERY: Usage Statistics
● low use may mean a page:
○ isn’t findable○ isn’t needed at all○ is needed but needs improvement!
● get a second opinion on analysis● mix with other data points to complete the
picture (stats don’t tell you what the users think about the content/feature)
6 DISCOVERY: Participatory Design
Part 1: Useful/Not UsefulPart 2: Ideal Design
1. Print screenshot2. Gather supplies (markers, post-its, and
blank paper)3. Find participants who are interruptible4. Explain rules & watch them go!
● Circle the things you find useful
● Put an X through the things you don’t find useful
● Add a note for anything that’s missing
ACTIVITY: Participatory Design
1. Individually - using your site screenshot, play the role of the participant and:
■ circle the parts you find useful■ X through the parts you don’t■ annotate missing elements
2. Share results with your neighbor 3. Volunteer for group sharing
● Lots: Universal Methods of Design● Literature Review● Surveys● Learning from Strangers: the art and
method of qualitative interview studies● Observing the User Experience● Google Analytics Conversion University
DISCOVERY: More
Survey Says…your site is:
● Clunky and old-looking landing page● Doubt that the lay out of the site is user friendly● It doesn't have much visual appeal, so it isn't
welcoming● Dated● Layout is old● It is ugly and out of date● looks/feels outdated
● People say they like the uncluttered and simple design of the site but then complain that they can't find what they need and there should be more links on the homepage.
1. Aesthetic-Usability Effect: nicely designed websites are perceived as being easier to use (whether or not they actually are).
2. Universal Design: design for the margins and everyone benefits.
3. Don’t try to be original or fancy, just keep it simple!
DESIGN: Basics
1. People rely on past experiences2. People scan for navigation & headings to
figure out organization3. People look for action items (“call to action”)
7 DESIGN: Mental Models & Design Patterns
7 DESIGN: Mental Models & Design Patterns
http://ui-patterns.com/patterns/Pagination
Order in which the eye perceives what it sees.
Gestalt Psychology proposes that the brain has innate organizing tendencies to take individual elements and organize them into a cohesive whole.
1. Chunking/Grouping2. Highlighting (color & contrast)
3. Alignment
8 DESIGN: Visual Hierarchy
● Things that are close together are perceived as belonging together
● People process information better in bite-sized chunks
● Grouping can improve recall & readability(734) 904-7409 vs. 7349047409
Principle 1: Chunking/Grouping
No hierarchyWorkshopsEndNote BasicsCovers the basic features of using EndNote, including importing records from online databases, searching, sorting, and organizing records. Learn how to automatically create bibliographies and in-text citations. Location: Gallery Instruction LabMonday Nov 8, 9-10 amRefworks BasicsRefWorks is a web-based tool for managing your citations. In this introductory session, we'll cover the basics of creating a RefWorks account, importing citations from online resources, generating formatted bibliographies, and sharing your RefWorks database on the web. We'll also work with Microsoft Word and incorporate citations from your RefWorks database into your documents. Location: Instruction CenterTuesday Nov 9, 3-5pmZotero BasicsZotero is a free, Firefox browser-based extension that allows you to save citation information while browsing the Web. It is not a web application like RefWorks. With a single click from an online database, web page, news source, and library catalog, Zoter saves citation information and provides you the ability to add notes, tag citations, or add attachments such as PDFs of journal articles.Location: Instruction CenterThursday Nov 11, 3-5pm
Workshops
EndNote BasicsCovers the basic features of using EndNote, including importing records from online databases, searching, sorting, and organizing records. Learn how to automatically create bibliographies and in-text citations. Location: Gallery Instruction LabMonday Nov 8, 9-10 am
Refworks BasicsRefWorks is a web-based tool for managing your citations. In this introductory session, we'll cover the basics of creating a RefWorks account, importing citations from online resources, generating formatted bibliographies, and sharing your RefWorks database on the web. We'll also work with Microsoft Word and incorporate citations from your RefWorks database into your documents. Location: Instruction CenterTuesday Nov 9, 3-5pm
Zotero BasicsZotero is a free, Firefox browser-based extension that allows you to save citation information while browsing the Web. It is not a web application like RefWorks. With a single click from an online database, web page, news source, and library catalog, Zoter saves citation information and provides you the ability to add notes, tag citations, or add attachments such as PDFs of journal articles.Location: Instruction CenterThursday Nov 11, 3-5pm
Principle 2: HighlightingChange visual weight to give focus to important information (and take focus away from less important information)
color some colors carry more weight
(red is perceived as having more weight than yellow)
value dark text has more weight than light text
size larger type has more weight
style different typefaces or effects on type can alter weight
WORKSHOPSEndNote BasicsCovers the basic features of using EndNote, including importing records from online databases, searching, sorting, and organizing records. Learn how to automatically create bibliographies and in-text citations. Location: Gallery Instruction LabMonday Nov 8, 9-10 am
Refworks BasicsRefWorks is a web-based tool for managing your citations. In this introductory session, we'll cover the basics of creating a RefWorks account, importing citations from online resources, generating formatted bibliographies, and sharing your RefWorks database on the web. We'll also work with Microsoft Word and incorporate citations from your RefWorks database into your documents. Location: Instruction CenterTuesday Nov 9, 3-5pm
Zotero BasicsZotero is a free, Firefox browser-based extension that allows you to save citation information while browsing the Web. It is not a web application like RefWorks. With a single click from an online database, web page, news source, and library catalog, Zoter saves citation information and provides you the ability to add notes, tag citations, or add attachments such as PDFs of journal articles.Location: Instruction CenterThursday Nov 11, 3-5pm
WORKSHOPSEndNote BasicsCovers the basic features of using EndNote, including importing records from online databases, searching, sorting, and organizing records. Learn how to automatically create bibliographies and in-text citations. Location: Gallery Instruction LabMonday Nov 8, 9-10 am
Refworks BasicsRefWorks is a web-based tool for managing your citations. In this introductory session, we'll cover the basics of creating a RefWorks account, importing citations from online resources, generating formatted bibliographies, and sharing your RefWorks database on the web. We'll also work with Microsoft Word and incorporate citations from your RefWorks database into your documents. Location: Instruction CenterTuesday Nov 9, 3-5pm
Zotero BasicsZotero is a free, Firefox browser-based extension that allows you to save citation information while browsing the Web. It is not a web application like RefWorks. With a single click from an online database, web page, news source, and library catalog, Zoter saves citation information and provides you the ability to add notes, tag citations, or add attachments such as PDFs of journal articles.Location: Instruction CenterThursday Nov 11, 3-5pm
Principle 3: Alignment● Alignment creates a sense of unity and
cohesion.● Left or right alignment is more powerful than
center aligned.● Justify alignment typically to be avoided.
WORKSHOPSEndNote Basics
Covers the basic features of using EndNote, including importing records from online databases, searching, sorting, and organizing records. Learn how to automatically create bibliographies and in-text citations. Location: Gallery Instruction LabMonday Nov 8, 9-10 am
Refworks BasicsRefWorks is a web-based tool for managing your citations. In this introductory session, we'll cover the basics of creating a RefWorks account, importing citations from online resources, generating formatted bibliographies, and sharing your RefWorks database on the web. We'll also work with Microsoft Word and incorporate citations from your RefWorks database into your documents. Location: Instruction CenterTuesday Nov 9, 3-5pm
Zotero BasicsZotero is a free, Firefox browser-based extension that allows you to save citation information while browsing the Web. It is not a web application like RefWorks. With a single click from an online database, web page, news source, and library catalog, Zoter saves citation information and provides you the ability to add notes, tag citations, or add attachments such as PDFs of journal articles.Location: Instruction CenterThursday Nov 11, 3-5pm
WORKSHOPSEndNote BasicsLocation: Gallery Instruction Lab
Monday Nov 8, 9-10 am
Covers the basic features of using EndNote, including importing records from online databases, searching, sorting, and organizing records. Learn how to automatically create bibliographies and in-text citations.
Refworks BasicsLocation: Instruction Center
Tuesday Nov 9, 3-5pm
RefWorks is a web-based tool for managing your citations. In this introductory session, we'll cover the basics of creating a RefWorks account, importing citations from online resources, generating formatted bibliographies, and sharing your RefWorks database on the web. We'll also work with Microsoft Word and incorporate citations from your RefWorks database into your documents.
Zotero BasicsLocation: Instruction Center
Thursday Nov 11, 3-5pm
Zotero is a free, Firefox browser-based extension that allows you to save citation information while browsing the Web. It is not a web application like RefWorks. With a single click from an online database, web page, news source, and library catalog, Zoter saves citation information and provides you the ability to add notes, tag citations, or add attachments such as PDFs of journal articles.
1. Design patterns: Yahoo Design Library2. User Interface Design Pattern Library3. Mobile First4. Universal Design
5. The Gestalt Principle: Design Theory for Web Designers
DESIGN: More
“hodgepodge of information”
“problems with broken links and links going to obsolete pages”
“We have struggled with language - trying to be precise in our word choices”
“Tone of the text is authoritarian”
“We struggle with how to ‘group’ the various links, pages, and information”
“It isn’t organized well”
Survey Says… your website:
Moreville’s UX honeycomb http://semanticstudios.com/publications/semantics/000029.php
10 CONTENT: Basics
Collection Development
Web Content Management
Written policies & guidelines Yes Yes
Deliberate selection based on patron needs + cost of material and resources to process, describe, organize, and maintain
Yes Yes
Systematic weeding of items no longer needed
Yes Yes
Reorganize/relocate as needed to accommodate space
Yes Yes
Create good metadata to improve findability Yes Yes
Strategy with built in analysis & assessment Yes Yes
Collection development principles apply:
CONTENT: Basics1. Figure out what you have (inventory, site map)
2. Establish Guidelines - criteria for success (guiding principles for content, style guide, plain language, labeling)
3. Evaluate based on guidelines
a. Find problem content
b. Identify and classify content & content issues (redundant, low-value, low-use, orphaned, out-of-date, etc.)
4. Act (cull, improve, create new)
5. Organize (card sorting)
For a number of years, librarians were motivated to create more Web content. It was assumed that adding more content was a service for library users, and ... a way to improve their Web skills and demonstrate their fluency with technology... Unfortunately, few libraries predicted the content problems that this would create down the road.
Rebecca Blackiston
#1 Start with needs:
● User needs not internal needs. ● Ease of use trumps the org chart and the
floor plan.● Users don’t care about our internal pet
projects, they’re busy getting things done.
10 CONTENT: Guiding Principles
#2 Quantity matters (less is more)
● Users are often better served by fewer pages with more succinct (and useful!) content on them. We should err on the side of being strategic over being exhaustive.
● Best stuff can’t shine in a sea of mediocre.
10 CONTENT: Guiding Principles
#3 Quality matters
● Good quality content is more helpful and bad quality content is frustrating and wastes users’ time.
● 7 C’s of quality web content: considered, chunked, clear, concrete, concise, complete, correct
10 CONTENT: Guiding Principles
Reference Services for Alumni:
As part of the University Library's mission to assist researchers with their questions regarding the collections, resources and services of the University of Michigan libraries, U-M alumni are encouraged to contact the various reference service desks for assistance, either in person, via phone, via email, or via instant message. University Library reference staff and subject specialists are happy to help you use our collections and resources. Just Ask a Librarian! If you need assistance with your research, please feel free to browse the library's subject-based guides.
What the heck is this trying to
say?
Reference Services for Alumni:
U-M alumni are encouraged to use our various reference services for help using library collections and resources.
Try Ask a Librarian via email, phone, instant message, or in person.
Or find a subject-based guide to help you get started.
● Users don’t “read” - they browse and hunt so make it simple, clear, concise and scannable.
● Meaningful titles & headings are critical - they help communicate key pieces of information.
● Brevity ≠ unsophisticated.
● Simplicity = sophisticated!
● It’s not about “dumbing it down,” it’s opening up to everyone who might need our content — English as a second language, mobile users and assistive technology users.
11 CONTENT: Plain Language
● Less is more. Get to the point. Then stop. Web content should be 1/2 the length of its paper equivalent.
● Avoid acronyms and institutional jargon.
● Use active voice.
● Address the user.
● Be direct but human, serious but not pompous.● Be strategic rather than exhaustive.
11 CONTENT: Plain Language
1. Individually, review the Paley page2. Draft a revision3. Share results with your neighbor4. Volunteer for sharing with group
CONTENT: Activity
13 CONTENT: Audit Checkpoints
1. Does this page present valuable (or potentially valuable) information?
2. Page title: Is it sufficiently descriptive, does it accurately represent the content, and provide context?
3. Is the content accurate & up-to-date?
4. Is it well-written & concise?
5. Does it use headings appropriately? Is it organized and chunked for easy scanning?
6. Is it focused on user needs (not internal needs)?
7. Is it appropriate for the audience?
8. Are the images high-quality and purposeful?
Explore how participants group pages into categories that are meaningful to them.
● Typically done with participants but could be used as internal activity to think about your content & organization outside of it’s normal context.
● Individual vs. Group● In-person vs. Online
14 CONTENT: Card Sorting
● Get into groups of 4: 1 will be a note taker, 3 will play role of participants
● 3 participants will organize the cards into similar groupings
● Label each grouping with a post-it● Note taker should note when participants
have a hard time agreeing on something.
ACTIVITY: Card Sorting
● PlainLanguage.gov
● Developing a Content Strategy for an Academic Library
● Content Strategy for the Web
● The Web Content Strategist’s Bible
● Content Everywhere
● Giant list of Content Strategy Resources by Jonathon Colman
● U Virginia Library’s style guide
● Guide to strategic content templates
● Extracting the content
● Mini Wireframe Flow chart template
CONTENT: More
Special Love for Gov.UK
https://www.gov.uk/designprincipleshttps://www.gov.uk/designprinciples/styleguidehttps://www.gov.uk/service-manual/browsehttps://www.gov.uk/performance/dashboardhttp://digital.cabinetoffice.gov.uk/2011/09/19/introducing-the-needotron-working-out-the-shape-of-the-product/
And also probably worth watching is Sarah Richard's presentation from this page: https://togetherlondon.com/talks/meetup/2012-04-19
CONTENT: More
(aka informal, budget, hallway, etc.)
Ask a quick question to answer a simple problem! 5 minutes max. 5-25 participants.
1. print screenshot2. come up with a simple question or two3. approach users4. gather responses5. give them $1 or candy
15 TESTING: Guerrilla Testing
● When coming up with tasks, start with known valuable content (pages accessed the most or resources/service in high demand).
● Avoid matching terms in question to terms used in UI.
● Ask good “reference interview” follow-ups like WHY?
● If you do a few and see you clearly have a problem with your test - stop and revise!
● If you do a few and see you clearly have a UI problem, stop and fix it!
● A/B testing if debating between 2 labels or designs, etc.
● ALWAYS test the test with a co-worker first.
TESTING: Tips
ACTIVITY: Guerrilla Test
1. With your neighbor, pick a problem area from your selected website.
2. Develop a question or two.3. Find a couple of other people in your area to
test (and be tested).4. Return to your partner and compare your
findings.5. Volunteer for report out to whole group.
1. RITE (rapid and iterative testing and evaluation)
2. Click survey software: Optimal Workshop3. Lists of other online tools here & here4. Inherent Value Test5. Cognitive Walkthrough6. Formal Usability Testing7. Heuristic Evaluation
TESTING: More