don’t just build pretty websites — ux in the real world

47
WordCamp Philly 2014 Don’t just build Pretty Websites ~ UX in the Real World ~ by Sonja Leix

Upload: sonja-leix

Post on 09-May-2015

1.013 views

Category:

Design


1 download

DESCRIPTION

Presentation at WordCamp Philly 2014

TRANSCRIPT

Page 1: Don’t Just Build Pretty Websites — UX in the Real World

WordCamp Philly 2014 !

Don’t just build Pretty Websites

~ UX in the Real World ~ !

by Sonja Leix

Page 2: Don’t Just Build Pretty Websites — UX in the Real World

Who am I?

Sonja Leix !New York based

WordPress Front-End Designer

Freelance

!Twitter: @sonjanyc

www: sonjaleix.com

Page 3: Don’t Just Build Pretty Websites — UX in the Real World

What is UX?

Page 4: Don’t Just Build Pretty Websites — UX in the Real World

noun

the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use. "if a website degrades the user experience too much, people will simply stay away"

us·er ex·pe·ri·ence

Page 5: Don’t Just Build Pretty Websites — UX in the Real World

–Steve Jobs

“Design is not just what it looks like and feels like. Design is how it works.”

Page 6: Don’t Just Build Pretty Websites — UX in the Real World

Users & Goals

Page 7: Don’t Just Build Pretty Websites — UX in the Real World

What is the purpose or goal of your website?

Is the message consistent?

Page 8: Don’t Just Build Pretty Websites — UX in the Real World

–Jakob Nielsen

“Usability rules the Web. Simply stated, if the customer can’t find a product,

then he or she will not buy it.”

Page 9: Don’t Just Build Pretty Websites — UX in the Real World

Do you know your users?

What is your target audience?

Page 10: Don’t Just Build Pretty Websites — UX in the Real World

WHO are the users?

WHAT are the activities they wish to perform?

WHY do they want to use/buy our product?

HOW does your product/service fit the context of their life?

Create Personas

Page 11: Don’t Just Build Pretty Websites — UX in the Real World

Let’s call this (very simple) example persona:

Tech-Unsavvy Customer Support’s Worst Nightmare

- He is not good with computers and very impatient

- He prefers to talk to a real person when he has questions or a

problem instead of doing research himself online

!We need to make our website very easy to use and navigate for

him. Provide: effective CTAs, FAQs, user-friendly support forums

and if all else fails a number or email to reach customer support.

Page 12: Don’t Just Build Pretty Websites — UX in the Real World

–Paul Boag

“Users are not always logical, at least not on the surface.To be a great designer

you need to look a little deeper into how people think and act.”

Page 13: Don’t Just Build Pretty Websites — UX in the Real World

Your client is often not your target audience!

Design for the User!

Page 14: Don’t Just Build Pretty Websites — UX in the Real World

Where do your users come from?

Direct? Referrals?

Social Media? Search?

Page 15: Don’t Just Build Pretty Websites — UX in the Real World

Where do your users land?

Most likely not always on your homepage.

Page 16: Don’t Just Build Pretty Websites — UX in the Real World

How do your users interact with your site?

Analyse existing site or

make assumptions for new sites

Page 17: Don’t Just Build Pretty Websites — UX in the Real World

Layout & Structure

Page 18: Don’t Just Build Pretty Websites — UX in the Real World

Do you always use the same layout structure?

Content / Sidebar Full-Width

Page 19: Don’t Just Build Pretty Websites — UX in the Real World
Page 20: Don’t Just Build Pretty Websites — UX in the Real World
Page 21: Don’t Just Build Pretty Websites — UX in the Real World

Guide your users!Provide useful, simplified navigation menus.

Page 22: Don’t Just Build Pretty Websites — UX in the Real World
Page 23: Don’t Just Build Pretty Websites — UX in the Real World

CTAs!Add effective Calls to Action to convert

and guide users!

Page 24: Don’t Just Build Pretty Websites — UX in the Real World

What the Fold?Place important information and CTAs

higher up on page!

Page 25: Don’t Just Build Pretty Websites — UX in the Real World
Page 26: Don’t Just Build Pretty Websites — UX in the Real World

Sliders?!Are your clients still asking for these

for every project, too?

Page 27: Don’t Just Build Pretty Websites — UX in the Real World
Page 28: Don’t Just Build Pretty Websites — UX in the Real World

Responsive Design, duh!

for best User Experience across all devices

Page 29: Don’t Just Build Pretty Websites — UX in the Real World
Page 30: Don’t Just Build Pretty Websites — UX in the Real World

Beyond the Coat of Paint

Page 31: Don’t Just Build Pretty Websites — UX in the Real World

Site SpeedUsability also depends on how fast your site is!

Page 32: Don’t Just Build Pretty Websites — UX in the Real World

Cross-Browser Compatibility

Remember that day you put IE 7 to rest?!

Page 33: Don’t Just Build Pretty Websites — UX in the Real World

AccessibilitySupports social inclusion for people

with a diverse range of hearing, movement, sight, and cognitive ability.

http://make.wordpress.org/accessibility/useful-tools/

Page 34: Don’t Just Build Pretty Websites — UX in the Real World

–Tim Berners-Lee

“The power of the Web is in it’s universality. Access by everyone regardless of disability

is an essential aspect.”

Page 35: Don’t Just Build Pretty Websites — UX in the Real World

You’ve launched!

Page 36: Don’t Just Build Pretty Websites — UX in the Real World
Page 37: Don’t Just Build Pretty Websites — UX in the Real World

Time to relax?

Page 38: Don’t Just Build Pretty Websites — UX in the Real World

Uhm?! NOPE!

Page 39: Don’t Just Build Pretty Websites — UX in the Real World

After Launch:Analyse!

Review your assumptions! Get user feedback!

Iterate! …

Page 40: Don’t Just Build Pretty Websites — UX in the Real World

–Alan Lewis

“Failure comes when you don’t listen. You can’t put something out there and

assume it’s great. It’s up to us to make sure we’re listening to improve our chances for success—if not this time, next time.”

Page 41: Don’t Just Build Pretty Websites — UX in the Real World

Analytics ToolsGoogle Analytics

Kissmetrics Crazyegg

Page 42: Don’t Just Build Pretty Websites — UX in the Real World

Google AnalyticsUser Data

Page 43: Don’t Just Build Pretty Websites — UX in the Real World

Google AnalyticsUser and Behavior Flows

Page 44: Don’t Just Build Pretty Websites — UX in the Real World

Google AnalyticsIn-Page Analytics

Page 45: Don’t Just Build Pretty Websites — UX in the Real World

Question Everything!

Iterate Often!

Page 46: Don’t Just Build Pretty Websites — UX in the Real World

5 Key UX Questions to ask before (and while)

designing any website

http://bit.ly/5UXQuestions

Page 47: Don’t Just Build Pretty Websites — UX in the Real World

Thank You!

Questions?

Sonja Leix Follow me: @sonjanyc

sonjaleix.com