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.
Citation preview
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
QUESTIONS @elida_ca [email protected] slideshare.net/elida-arrizza
speakerdeck.com/elida
WEBSITE INTERACTION CAN ALSO MAKE OR BREAK A USERS DAY
INTRO TODAYS 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.
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
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 didnt bind up as much, and I kept the staples
for the Swingline stapler and its not okay because if they take my
stapler then Ill 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 PERSONALIZED
YEAR IN REVIEW EMAIL ORDER CONFIRMATIONS MAKE A USERS 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 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
USABILITY IS CORE TO USER EXPERIENCE A. INTRO USABILITY USER
EXPERIENCE
FLYNN: Whos that guy? PROGRAM: Thats Tron. He fights for the
Users. Disneys 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 Published by Jakob Nielsen in 1995 Widely accepted
and still holds true today 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 STANDARDS B. PRINCIPLES Hyperlink underline
Hierarchy Interactive element 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 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
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
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
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 Offer solutions on 404
page 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 TURN LEFT TURN LEFT 5
CODECONTENT CREATIVE EVERYBODY CAN CONTRIBUTE! EVEN USERS.
TAKE AWAY: EMPATHYfor your users
ITS 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://en.wikipedia.org/wiki/File:RoswellDailyRecordJuly8,1947.jpg
Visible area above having to scroll below the 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 Bleed Device 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 effortsmental and
physicalthat 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. Lets try another
search Lets see what another site has to offer Im Distracted By
Facebook When users leave the site C. FANCY TERMINOLOGY
#TODDLERTEST Will a toddler click the main action(s)? Dont
underestimate kid user testing Tip: blur a screen shot or squint
like when youre at an art show C. FANCY TERMINOLOGY
LOCAL UX COMMUNITIES
Montreal & Qubec City Bimonthly presentation. For
everybody. Annual conference November 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 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?.
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.com FONTS League Gothic and Open
Sans @elida_ca [email protected] slideshare.net/elida-arrizza
Speakerdeck.com/elida THANKS FOR LISTENING! QUESTIONS?