PRESENTED BY ELIDA ARRIZZA
THE 10
USER EXPERIENCE
PRINCIPLES
À LA
WORDPRESS
WordCamp Ottawa 2014
HELLO
WORDCAMPERS
OUTLINE
A. INTRO
B. 10 PRINCIPLES
C. FANCY TERMINOLOGY TIME
D. UX COMMUNITY
E. LIVE QUIZ!
F. TAKE AWAY
Q...
WEBSITE INTERACTION CAN
ALSO MAKE OR BREAK A
USER’S DAY
INTRO TODAY’S INTENTION
Recognize that User
Experience (UX) is ubiquitous
in our every day lives.
Awareness of 10 principl...
WHAT ANNOYS ME
Poor decisions in restaurant
typography
Slow performing technology
Confusing signage
WHAT DELIGHTS
Smart an...
USER EXPERIENCE CAN
AFFECT EMOTIONS
“Excuse me,
I believe you
have my
stapler.”
Office Space (1999)
but then, they switche...
“Thanks again for placing such a
fantastic order”
PERSONALIZED YEAR IN REVIEW EMAIL ORDER CONFIRMATIONS
MAKE A USER’S DAY!...
USER EXPERIENCE
IS ABOUT HAVING
EMPATHY
FOR THE USER.
USER-CENTERED APPROACH
A. INTRO
This is how the user sees it
USABILITY IS
ABOUT THE USER
GETTING THE TASK
DONE
“On the Web, usability is a necessary
condition for survival. If a websi...
USABILITY
IS 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)
TURN
LEFT 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 Nielsen
THE Usabilty Guru...
1
SHOW SYSTEM STATUS
B. PRINCIPLES
EXAMPLES:
•	Active menu item, Step wizards, Loading
animations, Progress bars, Cart ind...
2
MATCH BETWEEN SYSTEM
AND REAL WORLD
B. PRINCIPLES
•	Icons, folder, tabs, radio, mail badge/
notification, pagination, sa...
3
CONTROL AND FREEDOM
Emergency exit!
B. PRINCIPLES
•	CRUD (Create, Read, Update, Delete)
•	Quit, cancel, remove, go back
...
the menu
burger icon
(use with caution)
Consistent layout
positioning
UI kit as tool box
Do not override established stand...
wordpress.org/plugins/ecwid-shopping-cart/
If returning to a cart later help user products
added and also promotes trust.
...
6
ERROR PREVENTION
Eliminate
error prone
conditions
B. PRINCIPLES
https://github.com/kbwood/datepick
•	Reduce bad input
•	...
7
FLEXIBILITY AND EFFICIENCY
http://theme.wordpress.com/themes/illustratr/
Offer accelerators
customize
experience
for eff...
8
AESTHETIC AND MINIMALIST DESIGN
Reduce unessesary
elements.
B. PRINCIPLES
The more elements are competing
with relevant ...
Help users
recognize, diagnose
and recover from
errors.
B. PRINCIPLES
•	Notification wells
•	Error tips
•	Offer solutions ...
10
HELP AND DOCUMENTATION
B. PRINCIPLES
and make it easy
•	CODEX, Code Poet
•	Community answers, BuddyPress
•	Online resou...
Visibility of
system status
1
Error prevention
6
Flexibility and
efficiency of use
7
Aesthetic and
minimalist design
8
Hel...
CODECONTENT CREATIVE
EVERYBODY CAN CONTRIBUTE!
EVEN USERS.
TAKE AWAY:
EMPATHYfor your users
IT’S TIME FOR
FANCY
TERMINOLOGY
http://www.thelittleepicurean.com/2012/02/rainbow-cake.html
http://www.website.com
ABOVE THE FOLD VIEWPORTVisible screen area size
without browser elements
(Header, sides and bottom)...
http://www.website.com http://www.website.com
CAKE LAYERSFALSE FLOOR
TIP:
To avoid false
floor factor:
Have content
or dec...
http://www.website.com
website.com other website.com Facebook
INTERACTION COST VISITOR DROP-OFF
“The sum of efforts—mental...
#TODDLERTEST
Will a toddler click the main action(s)?
Don’t underestimate “kid user testing”
Tip: blur a screen shot
or sq...
LOCAL UX
COMMUNITIES
Montreal  Québec City
Bimonthly presentation. For everybody.
Annual conference
November 8-9, 2014, 5TH EDITION!!
D. COMMUN...
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 Pri...
E. LIVE QUIZ
QUESTION 3
A B CONSISTENCYMINIMALIST DESIGN
C HELP USERS WITH ERRORS D RECOGNITION OVER RECALL
User-modified ...
Use the 10 Principles as a technique
to evaluate and start the dialogue
on improving usability and UX.
HAVE EMPATHY FOR YO...
BACKGROUNDS by SubtlePatterns.com
FONTS League Gothic and Open Sans
@elida_ca
elida@elida.ca
slideshare.net/elida-arrizza
...
The 10 User Experience Principles à la WordPress
Upcoming SlideShare
Loading in...5
×

The 10 User Experience Principles à la WordPress

8,695

Published on

Learn about User Experience (UX) principles to enhance your visitors interest and delight on your site. User Experience is about empathy for your audience, because the usability of your site can make or break your visitors day, not to mention their attitude towards your brand. We’ve all frustrating experiences accomplishing tasks online, but may not be able to communicate why. This presentation will provide you with an overview of tools and techniques to improve your website’s usability and even learn some fancy terminology. We will examine the 10 golden UX heuristics with examples and also look at how WordPress supports and encourages a better user experience.

Published in: Technology, Internet, Design
1 Comment
118 Likes
Statistics
Notes
  • Nice presentation Elida. I shared it on Twitter and on the Social Buzz stream on my website - https://www.rebelmouse.com/BountySocialBuzz/the-10-user-experience-princip-543728858.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,695
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
174
Comments
1
Likes
118
Embeds 0
No embeds

No notes for slide

The 10 User Experience Principles à la WordPress

  1. 1. PRESENTED BY ELIDA ARRIZZA THE 10 USER EXPERIENCE PRINCIPLES À LA WORDPRESS WordCamp Ottawa 2014
  2. 2. HELLO WORDCAMPERS OUTLINE A. INTRO B. 10 PRINCIPLES C. FANCY TERMINOLOGY TIME D. UX COMMUNITY E. LIVE QUIZ! F. TAKE AWAY QUESTIONS @elida_ca elida@elida.ca slideshare.net/elida-arrizza speakerdeck.com/elida
  3. 3. WEBSITE INTERACTION CAN ALSO MAKE OR BREAK A USER’S DAY
  4. 4. INTRO TODAY’S INTENTION Recognize 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.
  5. 5. WHAT ANNOYS ME Poor decisions in restaurant typography Slow performing technology Confusing signage WHAT DELIGHTS Smart and functional design Witnessing licence plates with file format extension Freshly ground coffee ABOUT ME ABOUT YOU What can make or break your day? A. INTRO
  6. 6. 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
  7. 7. “Thanks again for placing such a fantastic order” PERSONALIZED YEAR IN REVIEW EMAIL ORDER CONFIRMATIONS MAKE A USER’S DAY! A. INTRO
  8. 8. USER EXPERIENCE IS ABOUT HAVING EMPATHY FOR THE USER. USER-CENTERED APPROACH A. INTRO This is how the user sees it
  9. 9. USABILITY IS ABOUT 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
  10. 10. USABILITY IS CORE TO USER EXPERIENCE A. INTRO USABILITY USER EXPERIENCE
  11. 11. FLYNN: “Who’s that guy?” PROGRAM: “That’s Tron. He fights for the Users.” Disney’s TRON (1982)
  12. 12. TURN LEFT TURN LEFT 10 UX PRINCIPLES FOR USABILITY A starting point for heuristic evaluation
  13. 13. SOURCE OF THE 10 UX PRINCIPLES FOR USABILITY nngroup.com/articles/ten-usability-heuristics Jakob Nielsen THE Usabilty Guru • Published by Jakob Nielsen in 1995 • Widely accepted and still holds true today • Other variation models exist B. PRINCIPLES
  14. 14. 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
  15. 15. 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
  16. 16. 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!
  17. 17. 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 STANDARDS B. PRINCIPLES • Hyperlink underline • Hierarchy • Interactive element buttons • Navigation standards • TRUST: branding and photos • Layout positioning • Consistent choices and language
  18. 18. 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 RECALL TURN LEFT TURN LEFT B. PRINCIPLES • Avoid extra hurdles • Legend vs. Visual or both • Font drop list preview • Hybrid bread crumbs SHOW and tell
  19. 19. 6 ERROR PREVENTION Eliminate error prone conditions B. PRINCIPLES https://github.com/kbwood/datepick • Reduce bad input • Confirmation validation • Dynamic form validation • Constrained options where relevant • Auto-fill, auto-complete, auto-suggest • Paste from Word (format stripping) • Previews
  20. 20. 7 FLEXIBILITY AND EFFICIENCY http://theme.wordpress.com/themes/illustratr/ Offer accelerators customize experience for efficiency B. PRINCIPLES EXAMPLES: • Keyboard to nav (accessibility) • Shotcut keys • One click buy • Screen options • Wordpress 5 minute install
  21. 21. 8 AESTHETIC AND MINIMALIST DESIGN Reduce unessesary elements. B. PRINCIPLES The more elements are competing with relevant information.
  22. 22. Help users recognize, diagnose and recover from errors. B. PRINCIPLES • Notification wells • Error tips • Offer solutions on 404 page • Mature and empathetic error messages 9 HELP USERS WITH ERRORS 404 Redirect Reloaded plugin
  23. 23. 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
  24. 24. 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 TURN LEFT TURN LEFT 5
  25. 25. CODECONTENT CREATIVE EVERYBODY CAN CONTRIBUTE! EVEN USERS.
  26. 26. TAKE AWAY: EMPATHYfor your users
  27. 27. IT’S TIME FOR FANCY TERMINOLOGY http://www.thelittleepicurean.com/2012/02/rainbow-cake.html
  28. 28. http://www.website.com ABOVE THE FOLD VIEWPORTVisible screen area size without browser elements (Header, sides and bottom) http://en.wikipedia.org/wiki/File:RoswellDailyRecordJuly8,1947.jpg Visible area above having to scroll below the cut-off line. C. FANCY TERMINOLOGY
  29. 29. 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 Bleed Device When there is a lack of visual cues to scroll down C. FANCY TERMINOLOGY
  30. 30. 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 waiting Drop conversion and engagement suffer. A “Bounce” is a 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 Distracted By Facebook When users leave the site C. FANCY TERMINOLOGY
  31. 31. #TODDLERTEST Will a toddler click the 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
  32. 32. LOCAL UX COMMUNITIES
  33. 33. Montreal Québec City Bimonthly presentation. For everybody. Annual conference November 8-9, 2014, 5TH EDITION!! D. COMMUNITIES UXCAMP OTTAWA@uxampottawa TOUT LE MONDE UX@tlmux
  34. 34. LIVE QUIZ!HEURISTIC EVALUATION DEMO
  35. 35. A B E. LIVE QUIZ QUESTION 1 C HELP USERS WITH ERRORS D MATCH BETWEEN REAL WORLD CONTROL AND FREEDOMERROR PREVENTION
  36. 36. 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?
  37. 37. E. LIVE QUIZ QUESTION 3 A B CONSISTENCYMINIMALIST 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?.
  38. 38. 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
  39. 39. BACKGROUNDS by SubtlePatterns.com FONTS League Gothic and Open Sans @elida_ca elida@elida.ca slideshare.net/elida-arrizza Speakerdeck.com/elida THANKS FOR LISTENING! QUESTIONS?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×