15 Strategies for a Better User Experience

133
15 Strategies for a Better User Experience Suzanne Chapman University of Michigan http://bit.ly/UX4MAC

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

→ What is UX?

→ 15 strategies in 5 areas

→ Activities

UX Plan for today

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!

Survey Says….topics you’re interested in

WHAT IS UX?

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 REMINDERS

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

UX #2 - KEEP IT SIMPLE● Simple

strategies● Simple

research methods

● Simple design

● Do less to do it better

No time? Doing something quick is better than doing nothing.

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.

Less time researching = more time making things better.

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.

PLANNING

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

Do we really need to do this?

Just because we can doesn’t mean we should.

Just because we should doesn’t mean we should right now.

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 cost

low cost

1 day 3 months

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

LOTS OF INGREDIENTS, NOW ALL WE NEED IS A RECIPE

● 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.

QUESTIONS?

? PLANNING

DISCOVERY

http://xkcd.com/773/

● 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

Are we using our homepage real estate wisely?

What kinds of valuable content

are missing?

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

What kinds of valuable content

are missing?

B Surface hidden & valuable content

After release, searches for these databases should go down!

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)

What parts of the page do users think are or are not useful?

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

6 DISCOVERY: Participatory Design

Draw your ideal library website.

6 DISCOVERY: Participatory Design

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

? DISCOVERY

QUESTIONS?

DESIGN

Survey Says…you want your site to be:

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.

The details are not the details. They make the design.

Charles Eames

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.

? DESIGN

QUESTIONS?

CONTENT

“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)

9 CONTENT: Inventory

Figure out what you have.

● Export from your CMS● Manual inventory

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

How we feel about our pet project:

10 CONTENT: Guiding Principles

10 CONTENT: Guiding Principles

How our users feel:

#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

The website is not a filing cabinet.

#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

12 CONTENT: Labeling

12 CONTENT: Labeling

Some content fully

available online

Available Online

Full text

Full text

1. Individually, review the Paley page2. Draft a revision3. Share results with your neighbor4. Volunteer for sharing with group

CONTENT: Activity

So, is our content any good?

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?

14 CONTENT: Card Sorting

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

? CONTENT

QUESTIONS?

TESTING

Can users find high-value content?

(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

Where would you click to find out how late the Undergraduate Library is open?

12/206/20

2/20

Unmoderated version via survey tool

● 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.

Questions?http://bit.ly/UX4MAC