UX Best Practices and Tips
description
Transcript of UX Best Practices and Tips
![Page 1: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/1.jpg)
UX Best Practices & Tips
Noel Saw, Presenter and EditorNatalie Mac Lees, Contributing Editor
http://ladesigners.net
![Page 2: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/2.jpg)
Special ThanksOur Event Space Sponsor:
WiFi SSID: indiedesk | Password: indiedesk816(both all lowercase)
Co-Sponsor:
![Page 3: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/3.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/4.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/5.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/6.jpg)
Plagiarized from Karen McGrane’s “We’re all Content Strategists” slide
![Page 7: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/7.jpg)
Plagiarized from Karen McGrane’s “We’re all Content Strategists” slide
Information Architecture
![Page 8: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/8.jpg)
Plagiarized from Karen McGrane’s “We’re all Content Strategists” slide
Information Architecture
VisualDesign
![Page 9: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/9.jpg)
Plagiarized from Karen McGrane’s “We’re all Content Strategists” slide
VisualDesign
Information Architecture
Interaction Design
![Page 10: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/10.jpg)
Plagiarized / adapted from Karen McGrane’s “We’re all Content Strategists”
Information Architecture
Interaction Design
Content
VisualDesign
![Page 11: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/11.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/12.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/13.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/14.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/15.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/16.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/17.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/18.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/19.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/20.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/21.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/22.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/23.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/24.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/25.jpg)
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 26: UX Best Practices and Tips](https://reader035.fdocuments.us/reader035/viewer/2022062614/5468bae6af795981018b4ed8/html5/thumbnails/26.jpg)
Contact UsNoel [email protected] | @Wpverse | NoelSaw.com/+
Natalie MacLeesNatalieMac.com@nataliemac