p x e r e s u
e c n e i er
Steps in the CMS UX Life Cycle
Daniel Mittleman
danny@cdm.depaul.edu October 12, 2011
Determine site mission / requirements • Purpose of the site • Brand of the site • Stories of use of the site • Technical, budget, and time constraints
Know the audience • Observe users using the site directly • Interview Users –Develop Key Personae –Map Stories to each
Organize Information in a Matrix Persona One
Persona Two
Persona Three
Story A
High
Low
Low
Story B
Low
Story C
High
High
Story D
Low
Low
High Low
For each story, what is the emotive experience of engaging with the site? Are the goal focused? Are they exploring? Are they having fun? Are they upset? How often do they engage in this story? Hourly? Weekly? Once?
Execute competitive analysis to ID best practices • research similar websites • look at what substitutes offer –Reverse engineer their user stories and personae
Conduct a content audit and determine content strategy • It’s a CMS, take content seriously • Understand groupings of your content and develop a taxonomy structure – Validate the taxonomy structure with card sorting and prototypes
• Develop your content creation/maintenance plan – Map this plan to personae
Organize Information in a Matrix Category 1 Story A Story B Story C Story D
Persona Two Persona Three
Category 3
How does each cluster of information get used by each story? When in the story is it used? Do users search for info, do they come targeted with specific info, do they create info? Do they compare info across categories? Category 1
Persona One
Category 2
Category 2
Category 3
Terms each persona uses, synonyms, context, experience‌ fill out the matrix as best you can from information gathered.
Create site's hierarchy/organization • Prioritize content by type or story for homepage placement • Modularize and refactor content into set units tied to user stories • Design site map and wireframes offline to address these decisions • Note that we haven’t built anything yet!
Test early concepts on users, even on paper, before you build • • • •
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 make physical design choices
Develop Working Prototype • • • • •
Select platform, if not already given Make hosting decisions, if not already given Make other technology decisions Build or select or customize your template(s) Build or select or customize your extensions
•
UX team focuses on front end, while content and backend team focus on their tasks in parallel
Test users on prototype • Iterate and refine • Simplify design by stripping out unneeded functionality – Less is more!
The user is not me Elicit user stories Develop personae
Learn card sort Learn Templates Think in CSS Learn design theories Handle errors gracefully Use Nielsen’s heuristics
Follow an SDLC approac
h
Ten Key UX Skills to learn
The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me.
The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me.
The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me.
The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me. The user is not like me.
This mantra means I can’t test on myself. I can’t test on my friends. I can’t test using a convenience sample. I must test on users similar to my target users. Shortcuts don’t work no matter how tight my time or budget.
User Stories • Use Cases • Scenarios – Actors – Context – Objective – Process – Requirements – Win Condition
Developing Personae • Representational Users • Give them names and backstories • Give them personalities – Then, consider how they use your site • What are their user stories? • How do they behave? • How to they emote?
Card Sort • Technique to organize taxonomy • Meta-message: – In a CMS, its all about the content!
Modifying a Template • Teach yourself how to dig in and modify the skin of your site. – It really isn’t very hard to do in Joomla. – In Drupal, it is only CSS. – This implies…
Thinking in CSS • If you don’t already know CSS, learn it. – And learn CSS3! • Use w3schools.com • Check out csszengarden.com • Buy a book
Color Theory and 2D Design Principles • Learn basic 2D design skills – Books: • Design Basics
– Websites
• http:// www.usask.ca/education/coursework/skaalid/theory/theory • http://psd.tutsplus.com/articles/web/50-totally-free-lessons
Web Usability Methods • Learn basic web usability methods – Books: • Don’t Make Me Think • The Design of Sites
– Sites: • • • •
usability.jameshom.com usabilityfirst.com useit.com www.usereffect.com/topic/25-point-website-usabilitychecklist
Graceful Error Handling • Systems fail. Make sure yours fails gracefully • Provide feedback so user undstands what happens, how to recover from it, and how to prevent it next time • Provide contextual help • Have support accessible
Learn Nielsen’s Heuristics In handout notes for this page, or check out Wikipedia to start
• • • • • • • • • •
Always keep users informed The system should speak the user's language Always give user ability to undo and exit a state Follow standards and conventions consistently Eliminate error-prone conditions Users should never have to remember Provide flexibility and efficiency of use Design minimally and aesthetically Help users recognize, diagnose, and recover from error Provide contextual help