PRESENTED BY ELIDA ARRIZZA

THE 10 USER EXPERIENCE PRINCIPLES À LA WORDPRESS

WordCamp Ottawa 2014

HELLO WORDCAMPERS

OUTLINEA. INTROB. 10 PRINCIPLES COUNTDOWNC. FANCY TERMINOLOGY TIMED. UX COMMUNITYE. LIVE QUIZ!F. TAKE AWAYQUESTIONS

@elida_caelida@elida.ca

slideshare.net/elida-arrizza

Speakerdeck.com/elida

WEBSITE INTERACTION CAN ALSO MAKE OR BREAK A USER’S DAY

INTRO TODAY’S INTENTIONRecognize that User Experience (UX) is ubiquitous in our every day lives.

Awareness of 10 principles on screen and real life.

The 10 priciples are intended as a starting point for evaluating Usability in a User experience.

WHAT ANNOYS MEPoor decisions in restaurant TypographySlow performing technologyConfusing signage.

WHAT DELIGHTSSmart and functional design Witnessing licence plates with Embedded file formatsFreshly ground coffee

ABOUT ME ABOUT YOU

What can make or break

your day?

A. INTRO

USER EXPERIENCE CAN AFFECT EMOTIONS “Excuse me, I believe you have my stapler.”

Office Space (1999)

but then, they switched from the Swingline to the Boston stapler, but I kept my Swingline stapler because it didn’t bind up as much, and I kept the staples for the Swingline stapler and it’s not okay because if they take my stapler then I’ll set the building on fire...

BRAND AND PRODUCT LOYALTY PRINTER PROBLEMS

“Why does it say paper jam when there is no paper jam! “

“ ‘PC Load Letter’? What the f*** does that mean? “

A. INTRO

“Thanks again for placing such a fantastic order”

PERSONALIZE DYEAR IN REVIEW EMAIL ORDER CONFIRMATIONS

MAKE A USER’S DAY!A. INTRO

USER EXPERIENCE IS ABOUT HAVING EMPATHY FOR THE USER.

USER-CENTERED APPROACH

A. INTRO

This is how the user sees it

USABILITY ISABOUT THE USER GETTING THE TASK DONE“On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave.”-Jakob Nielsen

http://www.nngroup.com/articles/usability-101-introduction-to-usability/

SIMPLE & INTUITIVE

A. INTRO

USABILITYIS CORE TO USER EXPERIENCE

A. INTRO

USABILITY

USER EXPERIENCE

FLYNN: “Who’s that guy?”

PROGRAM: “That’s Tron. He fights for the Users.”

Disney’s TRON (1982)

TURNLEFT TURN

LEFT

10 UX PRINCIPLES FOR USABILITY

A starting point for heuristic evaluation

SOURCE OF THE 10 UX PRINCIPLES FOR USABILITY

nngroup.com/articles/ten-usability-heuristics

Jakob NielsenTHE Usabilty Guru

• Published by Jakob Nielsen in 1995 • Widely acceptied and still holds true tday.• Other variation models exist

B. PRINCIPLES

1 SHOW SYSTEM STATUS B. PRINCIPLES

EXAMPLES:• Active Menu item, Step wizards, Loading animations, Progress bars, Cart indicator, • Password strength (dynamic validation)• Confirmation messages• Pagination• Document opened by same person.

Post locking

Second states for immediate user feedback (Active or On Press/hover)

Dynamic breadcrumbs

2 MATCH BETWEEN SYSTEM AND REAL WORLD

B. PRINCIPLES

• Icons, Folder, tabs, radio,Mail badge/notification, Pagination, Save icon, Gauge meter, Switch toggle• Cropping tool behaviour, Trash• Text> human language• Categories naming• WYSIWYG

Tab behavior

Save icon

Icons in general

3 CONTROL AND FREEDOM Emergency exit!

B. PRINCIPLES

• CRUD (Create, Read, Update, Delete)• Quit, cancel, remove, go back• Skip intro, Read later, update later• Explore and advanced filters• Edit plugin/theme• Search!

the menu burger icon(use with caution)

Consistent layout positioning

UI kit as tool box

Do not override established standards (Radio vs. Checkbox functionality, * required field)

4 CONSISTENCY AND STANDARDSB. PRINCIPLES

• Hyperlink underline• Hierarchy• Interactive elements buttons • Navigation standards• TRUST: branding and photos• Layout positioning• Consistent choices and language

wordpress.org/plugins/ecwid-shopping-cart/

If returning to a cart later help user products added and also promotes trust.

Date pickers Maps with lists

5 RECOGNITION OVER RECALLTURNLEFT TURN

LEFT

B. PRINCIPLES

• Avoid extra hurdles• Legend vs. Visual both• Font drop list preview• Hybrid bread crumbs

SHOW and tell

6 ERROR PREVENTION Eliminate error prone conditions

B. PRINCIPLES

POST-ITS!

https://github.com/kbwood/datepick

• Reduce bad input• Confimation validation• Dynamic form validation • constrained options where relevant• Auto-fill, auto-complete, auto-suggest• Paste from Word (format stripping)• Previews

7 FLEXIBILITY AND EFFICIENCY

http://theme.wordpress.com/themes/illustratr/

Offer accelerators customize experiencefor efficiency

B. PRINCIPLES

EXAMPLES:• Keyboard to nav (accesibility)• Shotcut keys • One click buy• Screen options• Wordpress 5 minute install

8 AESTHETIC AND MINIMALIST DESIGN Reduce unessesary elements.

B. PRINCIPLES

The more elements are competing with relevant information.

Help users recognize, diagnose and recover from errors.

B. PRINCIPLES

• Notification wells• Error tips• 404 offer solutions• Mature and empathetic error messages

9 HELP USERS WITH ERRORS

404 Redirect Reloaded plugin

10 HELP AND DOCUMENTATION B. PRINCIPLES

and make it easy

• CODEX, Code Poet• Community answers, BuddyPress• Online resources “Google your issue”• FAQ, Knowledge base• Customer service, Twitter• Hyperlinks in contents to references• Guided tours, First time hints

Visibility of system status

1

Error prevention

6

Flexibility and efficiency of use

7

Aesthetic and minimalist design

8

Help users with errors.

9

Help and documentation

10

Match between system + real world

2

User control and freedom

3

Consistency and standards

4

Recognition rather than recall

TURNLEFT TURN

LEFT

5

CODECONTENT CREATIVE

EVERYBODY CAN CONTRIBUTE!

EVEN USERS.

TAKE AWAY:

EMPATHYfor your users

IT’S TIME FORFANCY TERMINOLOGY

http://www.thelittleepicurean.com/2012/02/rainbow-cake.html

http://www.website.com

ABOVE THE FOLD VIEW PORTVisible screen area size

without browser elements (Header, sides and bottom)

http://en.wikipedia.org/wiki/File:RoswellDailyRecordJuly8,1947.jpg

Visible area before scrollling cut-off line.

C. FANCY TERMINOLOGY

http://www.website.com http://www.website.com

CAKE LAYERSFALSE FLOOR

TIP:To avoid false floor factor:Have content or decorative elements bleed into next “cake layer”

Simple layout that works well with responsive web.

CONTENT

MISSED CONTENT

MISSED CONTENT

MISSED CONTENT

MISSED CONTENT

MISSED CONTENT

BleedDevice

When there is a lack of visual cues to scroll down

C. FANCY TERMINOLOGY

http://www.website.com

website.com other website.com Facebook

INTERACTION COST VISITOR DROP-OFF

“The sum of efforts—mental and physical—that users must deploy in interacting with a site in order to reach their goals.”

EXAMPLE:Task fatigue, confusion, lack of trust, too much time waitingDrop conversion and engagement suffer.A “Bounce” is type drop off whereby the user leaves within the first few seconds of landing on the site.

Http://www.nngroup.com/articles/interaction-cost-definition/ Google Analytic

This is not what I was looking for.

Let’s try another search

Let’s see what another site has to offer

I’m DistractedBy Facebook

When users leave the site

C. FANCY TERMINOLOGY

#TODDLERTESTWill a toddler click main action(s)?

Don’t underestimate “kid user testing”

Tip: blur a screen shot

or squint like when you’re at an art show

C. FANCY TERMINOLOGY

LOCAL UX COMMUNITIES

Montreal & Québec CityBimonthly presentation. For everybody.

Annual conferenceNovember 8-9, 2014, 5TH EDITION!!

D. COMMUNITIES

UXCAMP OTTAWA@uxampottawa

TOUT LE MONDE UX@tlmux

LIVE QUIZ!HEURISTIC EVALUATION DEMO

A B

E. LIVE QUIZ

QUESTION 1

C HELP USERS WITH ERRORS D MATCH BETWEEN REAL WORLD

CONTROL AND FREEDOMERROR PREVENTION

E. LIVE QUIZ

QUESTION 2

A B SHOW SYSTEM STATUSMINIMALIST DESIGN

C HELP USERS WITH ERRORS D HELP AND DOCUMENTATION

What Principle is this image defying?

E. LIVE QUIZ

QUESTION 3

A B CONSYSTENCYMINIMALIST DESIGN

C HELP USERS WITH ERRORS D RECOGNITION OVER RECALL

User-modified and simplified remote control interface. [Bill Moggridge]

If you modify your remote controls like this, what principles are you APPLYING?.

Use the 10 Principles as a technique to evaluate and start the dialogue

on improving usability and UX.

HAVE EMPATHY FOR YOUR USERS

F. TAKE AWAY

NO RIGHT OR WRONG

BACKGROUNDS by SubtlePatterns.comFONTS League Gothic and Open Sans

@elida_caelida@elida.ca

slideshare.net/elida-arrizza

Speakerdeck.com/elida

THANKS FOR LISTENING! QUESTIONS?