user experience from a business perspective
DESCRIPTION
Presentation at CMSExpo, May 2012TRANSCRIPT
![Page 1: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/1.jpg)
User Experience (UX) from a Business Perspective
User Experience (UX) from a Business Perspective
Daniel [email protected]
College of Computing and Digital Media
Hi !
![Page 2: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/2.jpg)
The IssuesThe Issues
• Web CMS texts gloss over planning process for a site--and jump right into design
• But good UX is dependent on a strong user-centric planning process
• How do we do this if we are planning for a CMS solution?
![Page 3: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/3.jpg)
A SolutionA Solution
• Apply user-centric UX planning and analysis concepts to CMS site projects.
![Page 4: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/4.jpg)
CMS Development ProcessCMS Development Process
• Emphasis on PROBLEM SOLVING• Emphasis on CONTENT• Emphasis on USER EXPERIENCE
Steps in the UX Life Cycle
![Page 5: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/5.jpg)
Understand the business problemUnderstand the business problem
• What is the business objective of the site.
• What is the business problem that your client is trying to solve?
–Or is it an opportunity?
1
The more specific, and complete you
are, the better.
![Page 6: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/6.jpg)
Know your UsersKnow your Users
• Who are you designing for?
–categorize your users• Think about
–demographics (age, exp., sex, etc.)
– technographics (platforms and skills)
–psychographics (behaviors &attitudes)
• Create personas.
2
The more specific, and complete you
are, the better.
![Page 7: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/7.jpg)
How to create a persona?How to create a persona?
1. Gather background info– demo- techno- psycho- graphics– referent site information
2. Interview your users3. Compile and organize research
to isolate key target markets4. Write fiction:
2
Create characters who summarize the research for each key target
![Page 8: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/8.jpg)
Interview your usersInterview your users
• Or survey them (if need be)– Understand their motivations– Understand their behaviors– Understand their frustrations– Learn their "stories" from
them.– Use group techniques with
them• Focus group sessions• Mood sessions• Card sort session.
3
![Page 9: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/9.jpg)
Name
Key Feature
Descriptive Information
Scenario
Trigger
Example PersonaExample Persona
![Page 10: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/10.jpg)
Example PersonaExample PersonaName & Key Feature
Quote, from Research
Objectives &
Motivation
Descriptive
Information
Behaviors
Concerns
![Page 11: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/11.jpg)
Capture your user storiesCapture your user stories
• What do your users want to do on your site?
• How will they go about doing those things
• Tell complete user stories
• Tell as many as you need to tell.
4
![Page 12: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/12.jpg)
How to create user stories?How to create user stories?
• Group exercise: have users put stories on cards
• Make personas the voice of the story
• Be sure to include "so thats"As a <role>, I want <function>, so that <value>
• I.N.V.E.S.T Independent, Negotiable, Valuable, Estimable, Small, Testable.
4
![Page 13: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/13.jpg)
13
How do you create User Stories?How do you create User Stories?
• Card• Conversation• Confirmation
4
![Page 14: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/14.jpg)
14 http://www.mind-mapping.org/blog/2010/09/edistorm-for-brainstorming/ http://www.edistorm.com/
![Page 15: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/15.jpg)
15 From http://www.agile-ux.com/2012/03/01/user-story-checklist-be-ready-be-effective/
![Page 16: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/16.jpg)
• http://www.agile-ux.com/tag/user-stories/• How to write meaningful user stories
http://www.subcide.com/articles/how-to-write-meaningful-user-stories/Nice first introduction to user stories.
• How to Create User Storieshttp://techportal.ibuildings.com/2011/07/19/how-to-create-user-stories/Another similar introduction written more for agile coders.
• The User Experience (UX) of User Stories (part 1)http://www.andersramsay.com/2011/07/16/the-ux-of-user-stories-part-1Expands on ideas above
• User Story Examplehttp://www.allaboutagile.com/user-story-example/Capturing more info on backs of cards
• Better User Storieshttp://mindtheproduct.com/2012/02/better-user-stories-come-hell-or-high-waterfall/
This post discusses process a bit, focusing on tips and tricks for getting better results from your interviews with users.
Some User Story ResourcesSome User Story Resources
16
4
![Page 17: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/17.jpg)
Research referent sitesResearch referent sites
• Look at referent sites• Look at competitor sites• Look at sites for ideas
– Look for best practices– Look for recurring patterns– Look to see how they addressed
similar user stories• Reverse engineer their user stories
and personas.
5
17
![Page 18: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/18.jpg)
Research wisdomResearch wisdom
• Test the users you want, not the users you have
• Users give you conflicting feedback
• Validate the problem you are solving actually exists
• Verify your mental models
• Prototype early• Plan through version two (or three).
5
http://uxmag.com/articles/five-ux-research-pitfalls18
![Page 19: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/19.jpg)
Develop a Content StrategyDevelop a Content Strategy
• Explore content issues early in the process.– card sorting
• Do the users want to see the information grouped by subject, process, business group, or information type?
• How similar are the needs of the different user groups?
• How different are their needs?• How many potential main categories are
there? (typically relates to navigation)• What should those groups be called?
6
Take content seriously.
Really.
19
![Page 20: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/20.jpg)
20
Card Sorting resourcesCard Sorting resources
Some card sorting resources:
Great Primer on the details of card sortinghttp://www.usability.gov/methods/design_site/cardsort.html
This one lists several online card sorting productshttp://www.measuringux.com/CardSorting/
More resources with rich detailhttp://sixrevisions.com/usabilityaccessibility/card-sorting/
http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide
6
![Page 21: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/21.jpg)
Conduct a content audit & determine content strategyConduct a content audit & determine content strategy
• Use audit to understand content properties and relationships.
• Understand cognitive mapping of users
• Understand howcontent relates to user stories oruser communities.
7
21
![Page 22: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/22.jpg)
How to conduct a content audit ?How to conduct a content audit ?
• If you already have a site or content:– Inventory content page
• Is all of this content still relevant? What business, customer, or employee need does it support?
• What new content must be created? What is driving those needs?
• What drove decisions about file types and/or variations in format that exist? Do these decisions still hold?
– Look at site traffic by content type/item
– Use this to provoke useful discussion with stakeholders.
7
22
![Page 23: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/23.jpg)
Results of a good content audit ?Results of a good content audit ?
• Acute awareness of site priorities• Increased understanding of
business or operational constraints• Surfacing of a common language• A accurate sense of scale
for the project.
7
23
![Page 24: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/24.jpg)
How to conduct a content audit ?How to conduct a content audit ?
• If your context is new:– Build process flow diagrams to ID
data and workflow of systems users• Document input and output content
– Refer to your user stories• Look at what data they need to
complete their user stories successfully
– Look at referent sites and deconstruct their content.
7
24
![Page 25: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/25.jpg)
Create a Site MapCreate a Site Map
• Consider vertical, horizontal, or sequential layouts
• Design site map offline
8
Note we haven’t built anything yet!
25
![Page 26: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/26.jpg)
CMS's don't generate separate pages!CMS's don't generate separate pages!
• OK, so this is a trick question• We do need to think through our
menuing scheme• We do need to logically cluster
categories/sub-categories• We do need to deal with any
"special" pages outside main content
• We do need to think through our "tag" scheme
• And we want to think through module/widget/block assignments
8
26 Nice sitemap primer: http://viget.com/inspire/ux-101-the-site-map
![Page 27: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/27.jpg)
27
Site Map with template informationSite Map with template information
http://www.advomatic.com/blogs/julie-blitzer/why-non-profits-need-user-experience-design-ux
8
![Page 28: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/28.jpg)
Build a Wire FrameBuild a Wire Frame
• On paper, line drawings, black and white; or try a tool like mockflow.com
• Conceptual, void of design artifacts• Note we haven’t
built anything yet!
9
28
![Page 29: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/29.jpg)
http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches/29
![Page 30: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/30.jpg)
How to create a Wire FrameHow to create a Wire Frame
• Use your previous research to inform this model
• Understand relative importance of information
• Group items by user story, by content type, or by relative importance
• Use accepted design patterns.
9
30
![Page 31: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/31.jpg)
31
Heat MapHeat Map
![Page 32: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/32.jpg)
Heat MapHeat Map
32
![Page 33: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/33.jpg)
Research design patternsResearch design patterns
• Read best practice design patterns for site design constructs you are building
• Select, modify if necessary, and apply these patterns.– http://www.smashingmagazine.com/2009
/06/15/40-helpful-resources-on-user-interface-design-patterns/
– http://uxmovement.com/resources/4-best-design-pattern-libraries/
– http://www.briankenyon.com/content/ui-ux-design-pattern-repositories
10
33
![Page 34: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/34.jpg)
Design Pattern BooksDesign Pattern Books
• My favorite pattern references:• Van Duyne, Landay, Hong:
The Design of Sites (on Safari)
• Schummer, Lukosch: Patterns for Computer-Mediated Interaction
• Vora: Web Application Design Patterns (on Books24x7)
11
34
![Page 35: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/35.jpg)
Test early concepts on users Test early concepts on users
• In real world, this is key• Validate your analysis• Then validate your logical design• Test against legacy system (if
possible)• Test with real users (if possible)• Now you are ready
to start building
12
35
![Page 36: User Experience from a Business Perspective](https://reader033.vdocuments.mx/reader033/viewer/2022051819/54c7525c4a7959ce1a8b45c4/html5/thumbnails/36.jpg)
36
Daniel MittlemanDePaul University CDM
[email protected]: 312.362.6103Skype: dmittleman
That was fun