View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
User Experience (UX) from a Business Perspective Daniel Mittleman email@example.com College of Computing and Digital Media Hi !
The 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?
A Solution• Apply user-centric UX planning and analysis concepts to CMS site projects.
CMS Development ProcessSteps in the UX Life Cycle• Emphasis on PROBLEM SOLVING• Emphasis on CONTENT• Emphasis on USER EXPERIENCE
1 Understand 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?
2 Know 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 How to create a persona? 1. Gather background info – demo- techno- psycho- graphics – referent site information 2. Interview your users 3. Compile and organize research to isolate key target markets 4. Write fiction:
3 Interview 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.
Example Persona Name Key Feature Descriptive Information Scenario Trigger
Example Persona Name & Key Feature Quote, from Research Concerns Descriptive Information Objectives & Motivation Behaviors
4 Capture 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 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 How do you create User Stories? • Card • Conversation • Confirmation13
15 From http://www.agile-ux.com/2012/03/01/user-story-checklist-be-ready-be-effective/
4 Some User Story Resources • 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 Stories http://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-1 Expands on ideas above • User Story Example http://www.allaboutagile.com/user-story-example/ Capturing more info on backs of cards • Better User Stories http://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.16
5 Research 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.17
5 Research 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).18 http://uxmag.com/articles/five-ux-research-pitfalls
6 Develop 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?19
6 Card Sorting resources Some card sorting resources: Great Primer on the details of card sorting http://www.usability.gov/methods/design_site/cardsort.html This one lists several online card sorting products http://www.measuringux.com/CardSorting/ More resources with rich detail http://sixrevisions.com/usabilityaccessibility/card-sorting/ http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide20
Conduct a content audit & 7 determine content strategy • Use audit to understand content properties and relationships. • Understand cognitive mapping of users • Understand how content relates to user stories or user communities.21
7 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.22
7 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.23
7 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.24
8 Create a Site Map • Consider vertical, horizontal, or sequential layouts • Design site map offline25
8 CMSs dont 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 assignments26 Nice sitemap primer: http://viget.com/inspire/ux-101-the-site-map
8 Site Map with template information27 http://www.advomatic.com/blogs/julie-blitzer/why-non-profits-need-user-experience-design-ux
9 Build 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!28
9 How 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.30
10 Research 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-repositories33
11 Design 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)34
12 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 building35
Daniel Mittleman DePaul University CDM firstname.lastname@example.org Office: 312.362.6103 Skype: dmittleman That was fun36