ux best practices and tips

27
UX Best Practices & Tips Noel Saw, Presenter and Editor Natalie Mac Lees, Contributing Editor http://ladesigners.net

Upload: noel-saw

Post on 16-Nov-2014

2.410 views

Category:

Design


0 download

DESCRIPTION

Here are my tips, tricks, guiding principles, and best practices for UX designers and also product managers/management.

TRANSCRIPT

Page 1: UX Best Practices and Tips

UX Best Practices & Tips

Noel Saw, Presenter and EditorNatalie Mac Lees, Contributing Editor

http://ladesigners.net

Page 2: UX Best Practices and Tips

Special ThanksOur Event Space Sponsor:

WiFi SSID: indiedesk | Password: indiedesk816(both all lowercase)

Co-Sponsor:

Page 3: UX Best Practices and Tips

Who am I ?I am Noel Saw

I also co-organize the SoCal WordPress Meetup group

I’ve been using Photoshop since v1.0 in 1990

I’ve been using Illustrator since v1.0 in 1989

I’ve been designing and managing website projects since 1996

Involved with over 10 startup companies since 1992

Currently mentoring/advising three startup companies

Page 4: UX Best Practices and Tips

What’s UX?UX is short for “User Experience”

What’s my goal? Making the “experience” for users exposed to the website (or product) a positive experience and more importantly painless as possible

UX isn’t always about “design” – colors and shapes as normally thought of traditionally in the past

I'd like to think of a UX designer's job as crafting the experience for people using the website or “product”

Page 5: UX Best Practices and Tips

Various Disciplines within UXThis is just one way to organize these categories. People’s opinions can vary and the grouping below can be controversial.

User Research Market Demographics Usability Collaborate with product development/management

Information Architecture Wireframing Prioritize information

Content Strategy

Visual Design

Usability Testing

Page 6: UX Best Practices and Tips

Plagiarized from Karen McGrane’s “We’re all Content Strategists” slide

Page 7: UX Best Practices and Tips

Plagiarized from Karen McGrane’s “We’re all Content Strategists” slide

Information Architecture

Page 8: UX Best Practices and Tips

Plagiarized from Karen McGrane’s “We’re all Content Strategists” slide

Information Architecture

VisualDesign

Page 9: UX Best Practices and Tips

Plagiarized from Karen McGrane’s “We’re all Content Strategists” slide

VisualDesign

Information Architecture

Interaction Design

Page 10: UX Best Practices and Tips

Plagiarized / adapted from Karen McGrane’s “We’re all Content Strategists”

Information Architecture

Interaction Design

Content

VisualDesign

Page 11: UX Best Practices and Tips

Another way of looking at it…

User Research

Understand the people who use a product or system through observation.

Content Strategy

Planning for the creation, delivery, and governance of useful, relevant, useable content.

Information Architecture

Identifying and organize information within a product or system in a purposeful and meaningful way

Interaction Design

Designing the interactive behavior or a product or system with a specific focus on their use.

Visual Design

Designing the aesthetics of a site including coloring, shading, typography, and use of photography.

Usability Testing

Measure the quality of a user’s experience when interacting with a product or system.

Adapted from Quora: “What does a UX Job entail?”

Page 12: UX Best Practices and Tips

What’s a “Guiding Principle?”

"Guiding principles" are the broad philosophy or fundamental beliefs that steer an organization, team or individual's decision making, irrespective of the project goals, constraints, or resources.”

Page 13: UX Best Practices and Tips

UX Mag Guiding PrinciplesUnderstand the underlying problem before

attempting to solve it

Don't hurt anyone

Make things simple and intuitive

Acknowledge that the user is not like you

Have empathy

Generally good life skills to have…

We’ll come back to this near the end

Page 14: UX Best Practices and Tips

A Shift in ThinkingHere’s an invitation for you to think of yourself

as a creator of an experience rather than a web designer or even a “UX designer”

Think of the “experience” of someone using your design as a “product” or “solution” rather than as a “website.”

The product is a creation that you’re proud to proclaim as “yours” – a sense of ownership

Page 15: UX Best Practices and Tips

Project Phases Initial Discovery and Requirements (“Understand the underlying problem”)

Quoting

Get hired (yay!)

More Discovery through interviews and research

Design wireframes (“Make things simple and intuitive”)

Design Functional / Clickable Prototypes (“Acknowledge that the user is not like you”)

Visual Design

Implementation

QA Review & Testing (“Have empathy”)

Launch (yay! Again)

Page 16: UX Best Practices and Tips

My UX Best Practices Tips – Part 1

Don’t make assumptions, “question everything” – User Research

Draw wireframes or sketches to get approved first

Draw storyboards that show the interaction from one page to another page to find “holes” or inconsistencies.Make clickable web page prototypes if possible

Page 17: UX Best Practices and Tips

My UX Best Practices Tips – Part 2

Don’t paint yourself into a corner. Don’t go “all-in” unless you have no choice. Don’t invest too much time into a certain module. A.K.A. “don’t drink the kool-aid” – a problem in

many startupsMake sure you can adapt the product in a different

direction.

Don’t forget about “content” – get real text, don’t rely on placeholder “lorem ipsum” text

Make sure the “Search” box is easy to find, use, and actually works

Page 18: UX Best Practices and Tips

Client Communication & Feedback Tips

Use markup tools like Skitch or Jing Project to confirm their comments before making them

Keep emails very short and simple whenever possibleDon’t take things personally

Meet if possible in person to review first draft to reduce any misunderstanding. Conference calls can work too. Walk them through how you got to that point.

Page 19: UX Best Practices and Tips

Prototyping / Wireframing Tools Omnigraffle

Adobe Illustrator

Adobe Fireworks

Visio

Mockingbird

Balsamiq

Axure

Online apps HotGloo.com ProtoShare

Whatever works for you and your client

Page 20: UX Best Practices and Tips

Content Strategy TipsOften over-looked or delayed until the last minute

Ask for “real” text as quickly as possible

Ask client to hire a professional writer or if you have to type up something relevant in those places with at least a few sentences do it as a CYA insurance

This is can evident if you’re a WordPress designer and you buy a beautiful looking theme and activate it on your site. You’ll see that’s essentially empty except for the navigation bar and background.

Page 21: UX Best Practices and Tips

Recap: UX Mag Guiding PrinciplesUnderstand the underlying problem before

attempting to solve it

Don't hurt anyone

Make things simple and intuitive

Acknowledge that the user is not like you

Have empathy

Page 22: UX Best Practices and Tips

Final Take AwayDon’t overlook content strategy – content

creation and planning

Don’t paint yourself into a corner especially on a new project – adapt future design from digging through usage analytics

“Craft” a positive experience for the user

K.I.S.S. – Keep It Simple Stupid

Page 23: UX Best Practices and Tips

Bonus: “Deliver WOW”Part of Zappos’s experience as their “Family Core Value #1”

“WOW is such a short, simple word, but it really encompasses a lot of things. To WOW, you must differentiate yourself, which means doing something a little unconventional and innovative.”

“And whatever you do must have an emotional impact on the receiver.”

From Tony Hsieh’s (CEO) book: Delivering Happiness”

Page 24: UX Best Practices and Tips

References & Useful SitesQuora: What does a UX Job Entail?

UX Matters: Sharing Ownership of UX

UX Magazine: Guiding Principles

IA UX: Meetup for Los Angeles

Content Strategy: Karen McGrane

UX Questions: Quora

Jobs: UXJobsLA.com

Page 25: UX Best Practices and Tips

Fund Raising for:

If you enjoyed tonight’s free talk and event please donate to my girlfriend’s half marathon run to raise funds for The Leukemia & Lymphoma Society:http://CrystalUX.net/tnt

The Leukemia & Lymphoma Society is a registered 501(c)3 non-profit organization

All donations to are tax deductible to the extent of the law. Please check with your tax professional.

Page 27: UX Best Practices and Tips

Special Thanks Again!Our Event Space Sponsor:

Co-Sponsor: