UX Best Practices and Tips

2,245 views

Published on

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

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,245
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

UX Best Practices and Tips

  1. 1. UX Best Practices & Tips<br />Noel Saw, Presenter and Editor<br />Natalie Mac Lees, Contributing Editor<br />http://ladesigners.net<br />
  2. 2. Special Thanks<br />Our Event Space Sponsor:<br />WiFi SSID: indiedesk | Password:indiedesk816(both all lowercase)<br />Co-Sponsor:<br />
  3. 3. Who am I ?<br />I am Noel Saw<br />I also co-organize the SoCal WordPressMeetup group<br />I’ve been using Photoshop since v1.0 in 1990<br />I’ve been using Illustrator since v1.0 in 1989<br />I’ve been designing and managing website projects since 1996<br />Involved with over 10 startup companies since 1992<br />Currently mentoring/advising three startup companies<br />
  4. 4. What’s UX?<br />UX is short for “User Experience”<br />What’s my goal? Making the “experience” for users exposed to the website (or product) a positive experienceand more importantly painless as possible<br />UX isn’t always about “design” – colors and shapes as normally thought of traditionally in the past<br />I'd like to think of a UX designer's job as crafting the experience for people using the website or “product”<br />
  5. 5. Various Disciplines within UX<br />This is just one way to organize these categories. People’s opinions can vary and the grouping below can be controversial.<br />User Research<br />Market <br />Demographics<br />Usability<br />Collaboratewith product development/management<br />Information Architecture<br />Wireframing<br />Prioritize information<br />Content Strategy<br />Visual Design<br />Usability Testing<br />
  6. 6. Plagiarized from Karen McGrane’s“We’re all Content Strategists” slide<br />
  7. 7. Information <br />Architecture<br />Plagiarized from Karen McGrane’s“We’re all Content Strategists” slide<br />
  8. 8. Information <br />Architecture<br />Visual<br />Design<br />Plagiarized from Karen McGrane’s“We’re all Content Strategists” slide<br />
  9. 9. Interaction Design<br />Information <br />Architecture<br />Visual<br />Design<br />Plagiarized from Karen McGrane’s“We’re all Content Strategists” slide<br />
  10. 10. Interaction Design<br />Content<br />Information <br />Architecture<br />Visual<br />Design<br />Plagiarized / adapted from Karen McGrane’s“We’re all Content Strategists”<br />
  11. 11. Another way of looking at it…<br />Adapted from Quora: “What does a UX Job entail?”<br />
  12. 12. What’s a “Guiding Principle?”<br />"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.”<br />
  13. 13. UX Mag Guiding Principles<br />Understand the underlying problem before attempting to solve it<br />Don't hurt anyone<br />Make things simple and intuitive<br />Acknowledge that the user is not like you<br />Have empathy<br />Generally good life skills to have…<br />We’ll come back to this near the end<br />
  14. 14. A Shift in Thinking<br />Here’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”<br />Think of the “experience” of someone using your design as a “product” or “solution” rather than as a “website.”<br />The product is a creation that you’re proud to proclaim as “yours” – a sense of ownership<br />
  15. 15. Project Phases<br />Initial Discovery and Requirements (“Understand the underlying problem”)<br />Quoting<br />Get hired (yay!)<br />More Discovery through interviews and research<br />Design wireframes (“Make things simple and intuitive”)<br />Design Functional / Clickable Prototypes (“Acknowledge that the user is not like you”)<br />Visual Design<br />Implementation<br />QA Review & Testing (“Have empathy”)<br />Launch (yay! Again)<br />
  16. 16. My UX Best Practices Tips – Part 1<br />Don’t make assumptions, “question everything” – User Research<br />Draw wireframes or sketches to get approved first<br />Draw storyboards that show the interaction from one page to another page to find “holes” or inconsistencies.<br />Make clickable web page prototypes if possible<br />
  17. 17. My UX Best Practices Tips – Part 2<br />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. <br />A.K.A. “don’t drink the kool-aid” – a problem in many startups<br />Make sure you can adapt the product in a different direction.<br />Don’t forget about “content” – get real text, don’t rely on placeholder “loremipsum” text<br />Make sure the “Search” box is easy to find, use, and actually works<br />
  18. 18. Client Communication & Feedback Tips<br />Use markup tools like Skitch or Jing Project to confirm their comments before making them<br />Keep emails very short and simple whenever possible<br />Don’t take things personally<br />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. <br />
  19. 19. Prototyping / Wireframing Tools<br />Omnigraffle<br />Adobe Illustrator<br />Adobe Fireworks<br />Visio<br />Mockingbird<br />Balsamiq<br />Axure<br />Online apps<br />HotGloo.com<br />ProtoShare<br />Whatever works for you and your client<br />
  20. 20. Content Strategy Tips<br />Often over-looked or delayed until the last minute<br />Ask for “real” text as quickly as possible<br />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<br />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.<br />
  21. 21. Recap: UX Mag Guiding Principles<br />Understand the underlying problem before attempting to solve it<br />Don't hurt anyone<br />Make things simple and intuitive<br />Acknowledge that the user is not like you<br />Have empathy<br />
  22. 22. Final Take Away<br />Don’t overlook content strategy – content creation and planning<br />Don’t paint yourself into a corner especially on a new project – adapt future design from digging through usage analytics<br />“Craft” a positive experience for the user<br />K.I.S.S. – Keep It Simple Stupid<br />
  23. 23. Bonus: “Deliver WOW”<br />Part of Zappos’s experience as their “Family Core Value #1”<br />“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.”<br />“And whatever you do must have an emotional impact on the receiver.” <br />From Tony Hsieh’s (CEO) book: Delivering Happiness”<br />
  24. 24. References & Useful Sites<br />Quora: What does a UX Job Entail?<br />UX Matters: Sharing Ownership of UX<br />UX Magazine: Guiding Principles<br />IA UX: Meetup for Los Angeles<br />Content Strategy: Karen McGrane<br />UX Questions: Quora<br />Jobs: UXJobsLA.com<br />
  25. 25. Fund Raising for: <br />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<br />The Leukemia & Lymphoma Society is a registered 501(c)3 non-profit organization <br />All donations to are tax deductible to the extent of the law. Please check with your tax professional.<br />
  26. 26. Contact Us<br />Noel Sawnoel@wpverse.comLinkedin| @Wpverse| NoelSaw.com/+ <br />Natalie MacLeesNatalieMac.com@nataliemac<br />
  27. 27. Special Thanks Again!<br />Our Event Space Sponsor:<br />Co-Sponsor:<br />

×