User Experience in Joomla

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.