UX 101: The secrets of good (web & mobile) design
•Download as PPTX, PDF•
7 likes•1,699 views
User experience design is about more than just being pretty. In this presentation, I talk about form and function and provide quick tips for evaluating your own designs and products.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to UX 101: The secrets of good (web & mobile) design
Similar to UX 101: The secrets of good (web & mobile) design (20)
Recently uploaded
Recently uploaded (20)
UX 101: The secrets of good (web & mobile) design
- 1. 1
- 2. Housekeeping • Please turn off your phones or set them to vibrate. • You don’t have to take notes. This presentation will be available for you to download after the class. (Tweeted and posted on the meet-up discussion board.) • I will pause for questions after each section. • We will have quick breaks. • Jobs/announcements at the end. • If anyone wants to come teach a class, please find me at the end of class or send me a message. • Questions? 2
- 3. UX 101 3 The secrets of good (web & mobile) design : Mary Lan (@greybeat) http://www.linkedin.com/in/greybeat
- 4. 4 Definition "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. ~Jakob Nielson and Don Norman (http://www.nngroup.com/articles/definition -user-experience) Dr. Don Norman, MIT, UPenn http://www.nngroup.com/articles/definition-user-experience
- 5. 5 Extending the definition User experience design is the intentional crafting of a user’s perceptions and interactions with a product or system. Product design (how it looks & works) User experience (what people feel and interact with before, during, and after)
- 6. 6 The User’s Journey I want some coffee. It’s hot in my car. The A/C is so slow. Aww, there’s a line. Waiting in line is not awesome. Yum. My chocolate caramel cheese drink! A/C! Mmm… the smell of coffee! Inspiration credit: Starbucks journey map Found a decent parking spot. Waiting for my drink. So thankful for my phone. I love you phone. Now, where did I park…?
- 7. 7 The User’s Journey I want some coffee. It’s hot in my car. The A/C is so slow. Aww, there’s a line. Waiting in line is not awesome. Yum. My chocolate caramel cheese drink! A/C! Mmm… the smell of coffee! Found a decent parking spot. Waiting for my drink. So thankful for my phone. I love you phone. Now, where did I park…?
- 8. 8 Activity 1. Think of a product that you love (it can be digital or physical) and why you love it. 2. Write it down on a post-it note. 3. One at a time, put your note up on the and read it off for everyone to hear. Discussion (15 minutes)
- 9. Good Design 9 Form (how it looks) Function (how it works)
- 12. 12 How it looks (and feels) “Visceral design” is about the positive/negative associations with the world that you feel. ~ Don Norman Form (how it looks)
- 13. 13 + Limbic system. Grrr. Cortex. Beep Boop.
- 15. Principles of visual design • Colors • Size and weight • Contrast • Balance and unity • Law of proximity • Law of similarity 15 Borrowing from Gestalt Psychology
- 16. Colors Colors have a visceral effect on us because they remind us of things in the real world. Be careful to not go overboard with colors. “Designing is like putting on make-up, you have to know when to stop.” ~ Source unknown 16
- 17. Colors Colors can call attention to things you want users to notice. Use this power carefully. More color doesn’t mean more attention. 17 Image source: BrandGirlBlog.com
- 18. Size and weight The amount of space that something take up reveals its relative importance. Size and weight give the user clues about visual hierarchy. 18 Image source: http://www.coetail.com/jasonc/files/2013/11/your-eyes-here.png
- 19. Contrast The lower the contrast, the harder it might be for a user to read (it’s also an accessibility issue). But if the contrast is too high, it can be exhausting to look at for long periods of time. 19 Image source: http://www.pamelaplatt.com/class_lessons/graphic_design_principles/introduction_principals_graphic_design.html
- 20. Balance and unity Does your site (or app) feel off kilter? If it was a physical environment, how would that make your users feel? 20 Remember that “white space” has weight too. Use it as a counterbalance. Image source: http://www.johnlovett.com/test.htm
- 21. 21
- 22. 22
- 23. Gestalt law of proximity People perceive objects that are close together in proximity to be related to each other. 23 Image source: http://en.wikipedia.org/wiki/Gestalt_psychology
- 24. Gestalt law of similarity People perceive objects that have some similarity to be related to each other. 24 Image source: http://en.wikipedia.org/wiki/Gestalt_psychology
- 25. 25 60 Seconds of Love 1. Break up into teams of 4 or 5. 2. For 60 seconds, each of you will just blurt out things you love. It can be anything! Don’t think too much about it, just try to come up with any many things as possible. 3. Repeat until everyone has had a chance to go. Icebreaker (10 minutes)
- 26. 26 How it works “Behavioral design” is all about feeling like you’re in control. Includes usability, understanding, and feedback.* ~ Don Norman Function (how it works) *Physical and digital items can both offer feedback, e.g. a knife’s handle or the color change on hover of a button. It’s basically anything you can learn about a product by interacting with it. Note that this is different than “affordance”, which is what you can glean about a product and how it works by simply looking at it.
- 28. Principles of interaction design • Don’t make me think • Understand that I’m distracted • Content does matter 28
- 29. 29 Don’t make me think What is the primary goal of the page? Of your product? Make it clear what you (primarily) want the user to do. Steve Krug’s book: Don’t Make Me Think is a must-read for anyone interested in interaction design.
- 30. 30
- 31. 31
- 32. 32 Understand that I’m distracted Users are distracted. Make sure you help them focus. Squirrel!
- 34. OBSTACLES
- 35. 35 “Perfection is achieved not when there’s nothing more to add, but when there’s nothing more to take away.” ~ Antoine de Saint-Exupery
- 36. 36 Content matters Blah blah blah. Just kidding.
- 37. Tell a story The $3.00 trinket that turned into a $193.50 treasure. 37 http://www.youtube.com/watch?v=ewpz2gR_oJQ This is an icon of the fourteenth-century Saint Vralkomir of Dnobst, the patron saint of extremely fast dancing. Handcrafted in a snowbound convent by the nimble-footed Sisters of the Vralkomirian Order, it was given to my grandmother—then a nine-year-old girl—as she boarded the ship that would take her to America from Dnobst, a narrow pie-wedge of land bounded by the Dnobst River, the Grkgåt Mountains, and the Great Western Fence of Count Pyør the Litigious.
- 38. The power of experts Crutchfield’s custom content makes users want to pay premium for the same product. 38 http://www.youtube.com/watch?v=ewpz2gR_oJQ 89% vs. 237%
- 39. Mobile 39 Mobile is a magnifying lens for your problems.
- 40. Design: It’s not magic, but it can seem like it. 40
Editor's Notes
- No 101 course on UX would be complete without an attempteddefinition.Don Norman is usually credited with being the first to use the term “user experience” back when he worked at Apple in 1996.
- While they only have direct control over the in-store experience and the coffee, Starbucks is smart enough to know that the user’s experience before they come in the store has an effect on the customer before they even get in the store, and they use this information to design their store experiences. For example:Knowing that people are probably coming from work and don’t have much time, they make their lines very efficient and short.Knowing that people hate waiting for their drinks, but have phones on them, they can provide free wifi and mitigate any outrage.In this example, I used coffee, but the same idea easily extends to digital products such as your website or app.
- Good design is the marriage of form and function. Mediocre design is often lopsided -- focused on one over the other; or worse yet, neither – a design outcome as a byproduct of production rather than an intention.
- Think of the most celebrated products out there today. They’re pretty and smart, and that’s the “secret” that everyone is trying to capture. But there’s nothing secret about it really. Steve Jobs, Elon Musk… they’re both just meticulous about design and engineering, whereas most people only focus on one or the other.
- These products are crafted, and that’s what makes them stand out and shine.In a space where everyone is competing to get something out there faster, cheaper, with more features, this attention to detail is the difference that can set your product apart.
- Norman defines what we generally call “Look and Feel” as “Visceral design”. And it’s about the associations you have with the world that you feel.Notice he uses the word “Feel” and “visceral”. This is important because he’s not just using these terms lightly. Turns out, how we react to designs may be rooted in our survival instincts.
- This is the human brain in a nutshell.We have a limbic system that releases neurochemicals that either make us feel bad or good. (You’ve heard reference to the “lizard brain” or the “primal brain”? That’s it)And we have a cortex that helps us rationalize these feelings and make sense of the world around us.
- We do this a lot with design and art. We have a reaction to it (we love it!) and then we have to think about why we love it. This may happen in a split second but it happens in that order. Understanding that people will have a visceral response to your product based on its visual characteristics is part of the scope of UX design.So, if you’re building a product, take a second to think about this… if your product was a work of art, what do you think your users’ visceral response would be?
- Norman defines how something works and the way we interact with something as “Behavioral design”. His premise is that users want to feel in control when they interact with something. In the activity you just did. Think about how many of the things you listed are because they give you a sense of control? Or made you feel safe in some way? If a user experiences your site or app and they have to wonder about what something does, or where they are, you’re introducing doubt in their minds, which translates to a lack of control.
- Users have underlying motivations that are supported by tasks to achieve specific outcomes. And there’s also a time dimension to what they are doing.Most designs focus here, for tasks.(example)
- Especially on mobile, where they’re information snacking.
- Put simply…You’re the only thing that stands between the user and what they want.You have the user, the thing they want, and everything else is an obstacle.
- The designer’s job is to remove as much of these obstacles as possible. To simplify the experience so that the user can get to the thing they want.
- This was an experiment.The doll was purchased on ebay for $3.00, then relisted. But this time, an elaborate story was told about this doll.The content was totally made up.
- The story of Crutchfield and their custom content. Users spent 89% of their given funds on Walmart and other sites and 237% (what they were given plus their own money) on Crutchfield. For the SAME product.So when we design for behaviors, we have to design for both the rational and emotional side,because you’re designing for people who have rational and emotional needs.
- If you have massive amounts of content, cut it down. If you have complex interactions, cut it down.Use the constraints of mobile to your advantage. This is what mean when people talk about the “mobile first” approach to design.
- The secret to design is that there is no secret. It’s hard work designing and building with intention. Understanding the problem, and executing a thoughtful solution that respects both form and function. But with some basic heuristics in your arsenal, you can begin improving your products today.