Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

How Visual Design Makes or Brakes Mobile

479 vues

Publié le

How our visual perception works, and what are the main visual design principles we can rely on to build consistent, eye pleasing and functional mobile app interfaces that will make better mobile app UX?

Publié dans : Design
  • Soyez le premier à commenter

How Visual Design Makes or Brakes Mobile

  1. 1. HOW VISUAL DESIGN MAKES OR BREAKS MOBILE APP UX Ivana Miličić, Toptal
  2. 2. Can visual design compensate for otherwise bad user experience? OF COURSE IT CAN’T! BUT...
  3. 3. AESTHETIC DESIGNS • look easier to use • have higher probability of being used • more effective at fostering positive attitudes • make people more tolerant of design problems
  4. 4. • personal • positive EFFECTIVE INTERACTION LONG-TERM USABILITY SUCCESS • affection • loyalty • patience RELATIONSHIPS FEELINGS
  5. 5. IMMEDIATE DISSATISFACTION WITH AN APP unattractive or confusing user-interface
  6. 6. WHY ATTRACTIVE THINGS WORK BETTER? Emotional system changes how the cognitive system operates... How they are making us feel?
  7. 7. EMOTIONS PLAY A CRITICAL ROLE! They helps: • asses is situations good or bad, safe or dangerous? • make decisions
  8. 8. ALL EMOTIONS ARE IMPORTANT • learning • curiosity • creative thought • examining multiple alternatives • brainstorming • narrowing of thought processes • concentrating upon aspects relevant to a problem • escaping from danger NEGATIVEPOSITIVE
  9. 9. Alternative approaches lead to a satisfying end USER TOLERANT OF MINOR DIFFICULTIES ATTRACTIVE THING FEEL GOOD THINK MORE CREATIVELY
  10. 10. Concentration upon troublesome details USER WILL COMPLAIN ABOUT THE DIFFICULTIES STATE OF NEGATIVE AFFECT FOCUS UPON THE PROBLEMATIC DETAILS MORE TENSE, MORE ANXIOUS
  11. 11. Human mind is incredibly complex • same form of body and brain • huge individual differences DIFFERENT WAYS IN WHICH PEOPLE’S MINDS WORK
  12. 12. emotions moods traits personality AFFECTIVE, EMOTIONAL DOMAIN
  13. 13. • Emotions immediate response (short periods, minutes or hours) • Moods longer lasting (hours or days) • Traits very long-lasting (years or even a lifetime) • Personality collection of traits of a person (lifetime) HOW TO DESIGN SOMETHING THAT WILL APPEAL TO EVERYONE?
  14. 14. 3 DIFFERENT LEVELS OF THE BRAIN: Each level plays a different role in the total functioning of people. • the automatic, pre-wired layer – VISCERAL LEVEL • the brain layer that control everyday behavior – BEHAVIORAL LEVEL • the contemplative part of the brain – REFLECTIVE LEVEL. “Emotion & Design: Attractive Things Work Better” by Donald Norman, www.jnd.org, 2002. UNCONSCIOUSCONSCIUS
  15. 15. THE VISCERAL LEVEL people are pretty much the same all over the world. THE BEHAVIORAL AND REFLECTIVE LEVELS very sensitive to experiences, training, education, culture
  16. 16. THE VISCERAL LEVEL • pre-consciousness,pre-thought • appearance matters • forming of first impressions Evolved to protect the body against danger
  17. 17. FREEZE-FLIGHT-FIGHT-FORFEIT • Forfeit – surrender to the threat (tonic immobility and paralysis) • Freeze – detect potential threats (hyperawareness and hypervigilance) < if a threat detected > • Flight – escape from the threat (fear and panic) < if unable to escape > • Fight – neutralize the threat (desperation and aggression) < If unable to neutralize the threat >
  18. 18. THE BEHAVIORAL LEVEL Experience: function, performance, and usability What it is meant to do? How well does it? Is it easy to use?
  19. 19. Meaning: personal satisfaction, self-image • variability through culture, experience, education, and individual differences • can override other levels THE REFLECTIVE LEVEL
  20. 20. NOW PAST and FUTURE • seeing and using product • feelings of satisfaction produced by owning, displaying, and using a product VISCERAL & BEHAVIORAL REFLECTIVE
  21. 21. Visceral design > Appearance Behavioral design > Usability Reflective design > Self-image, personal satisfaction, memories Beauty is all in the mind of the beholder
  22. 22. VISCERAL LEVEL REFLECTIVE LEVEL attractiveness • looks • biologically wired-in • consistent across people and cultures • conscious reflection and experience • knowledge, learning • cultural differences, trends beauty IMMEDIATE EMOTIONAL IMPACT LONG-TERM EXPERIENCE OVERALL IMPRESSION
  23. 23. THE FUNCTIONAL LEVEL OF VISUAL DESIGN VISUAL COMMUNICATION personalityvisual organization
  24. 24. VISUAL HIERARCHY • what is important • guide user’s eye • initiate interaction Structure for visualizing and understanding complexity
  25. 25. Prioritization of visual weights by the manipulation of visual relationships to create meaning VISUAL HIERARCHY
  26. 26. Reveals relationships within a system most effective way to increase knowledge about the system • Perception of hierarchical relationships among elements: • positions (left-right and top-down) • proximity, size, presence of connecting lines VISUAL HIERARCHY
  27. 27. Gestalt Laws of Perceptual Organization tell us how (why) we group visual information Gestalt psychology was founded by German thinkers Max Wertheimer, Wolfgang Kohler and Kurt Koffka and focused on how people interpret the world. “The whole is other than the sum of the parts.” Kurt Koffka UNDERSTANDING PERCEPTION
  28. 28. The whole is identified before the parts • simple well defined object will communicate more quickly than a detailed object with a hard to recognize contour. Our mind fills in the gaps • we attempt to match what we see to the familiar patterns we have stored in memory UNDERSTANDING PERCEPTION
  29. 29. The mind seeks to avoid uncertainty • objects can be perceived in more than one way • we bounce back and forth quickly between the two stable alternatives Recognizing similarities and differences • we recognize (simple) objects independently of their rotation, translation and scale. UNDERSTANDING PERCEPTION
  30. 30. LAWS OF PERCEPTUAL ORGANIZATION • Law of Prägnanz (good figure, simplicity) • Closure • Symmetry and order • Figure/ground relationship • Similarity • Proximity • Continuity • Common fate (synchrony) • Uniform connectedness • Parallelism • Focal points
  31. 31. Law of Prägnanz • tendency to interpret ambiguous images as simple and complete, versus complex and incomplete • better visual processing and remembering of simple than complex figures. • fewer rather than more elements • symmetrical rather than asymmetrical compositions • minimization of the number of elements in a design LAWS OF PERCEPTUAL ORGANIZATION
  32. 32. Closure • perceiving a set of individual elements as a single, recognizable pattern, rather than multiple, individual elements • our mind fills gaps • stongest with simple, recognizable patterns (when not present designer can create transitional elements to achieve closure) LAWS OF PERCEPTUAL ORGANIZATION
  33. 33. Symmetry • we tend to seek stability and order instead of chaos • quickly finding symmetry and order - effectively communicate information (simpler) • symmetric forms tend to be seen as figure images rather than ground images • the most basic and enduring aspect of beauty • can be perceived less interesting LAWS OF PERCEPTUAL ORGANIZATION
  34. 34. Figure/ground relationship • the figure elements are the objects of focus • in unstable figure-ground relationships, the relationship is ambiguous and can be interpreted in different ways • the figure - definite shape, closer, smaller, convex; • the ground - shapeless, farther away, continues behind the figure, larger, concave LAWS OF PERCEPTUAL ORGANIZATION
  35. 35. Similarity • any characteristic can be similar: color, shape, size, texture, etc. • perceived as more related • reduces complexity and reinforces relatednes • color similarity – strongest grouping effect • similarity of size – need to be clearly distinguishable • similarity of shape – weakest LAWS OF PERCEPTUAL ORGANIZATION
  36. 36. Proximity • elements close together are perceived to be more related than elements that are farther apart (single group or chunk) • one of the most powerful means of indicating relatedness in a design • arrangement of elements (labels and supporting information are near the elements that they describe) LAWS OF PERCEPTUAL ORGANIZATION
  37. 37. Continuity • elements arranged on a line or curve are perceived as more related than elements not on the line or curve. • continuation of our perception of shapes beyond their ending points LAWS OF PERCEPTUAL ORGANIZATION
  38. 38. Uniform connectedness • visually connected elements are perceived as more related than elements with no connection. • will generally overpower the other Gestalt principles • common regions and connecting lines LAWS OF PERCEPTUAL ORGANIZATION
  39. 39. Common fate (synchrony) • elements that move in the same direction are perceived to be more related than elements that move in different directions or are stationary (regardles how far) • the moving objects will be perceived as figure elements • related elements should move at the same time, velocity, and direction, or flicker at the same time, frequency, and intensity LAWS OF PERCEPTUAL ORGANIZATION
  40. 40. Parallelism • elements that are parallel to each other are seen as more related than elements not parallel to each other • as lines are often interpreted as pointing or moving in some direction parallel ones are seen as either pointing or moving in the same direction and are thus related LAWS OF PERCEPTUAL ORGANIZATION
  41. 41. Focal points • elements with a point of interest, emphasis or difference will capture and hold attention. • our perception is drawn toward contrast - element that is unlike the others in some way • need to quickly identify the unknown to alert us to potential danger LAWS OF PERCEPTUAL ORGANIZATION
  42. 42. BUILDING VISUAL HIERARHCY Visual hierarchy is established by using main principles to form relationships between elements by grouping, contrast, levels
  43. 43. CREATE UNITY Unity of visual appearance is achieved by consistency, alignment (grids) and visual rhythm
  44. 44. Consistency • aesthetic consistency – style and appearance (color palettes, fonts, graphics); enhances recognition, sets emotional expectations • functional consistency – meaning and action • internal consistency – designed not accidental • external consistency – consistency with other elements in the environment CREATE UNITY
  45. 45. Alignment • elements in a design should be aligned with one or more other elements (unity, aestetics, stability) • screen edge has to be considered in making alignments • centerd aligned text provide harder to connect with other elements; justified text – more alignment cues • more complex forms of alignment (along diaonals - at least 30 degrees angle; spiral, circular...) CREATE UNITY
  46. 46. Area alignment • for nonuniform and asymmetrical elements preferable alignment is based on visual weights • equal amount of area or visual weight hangs on either side CREATE UNITY
  47. 47. IMPORTANCE OF COLOR Color attracts attention, is used for grouping of elements, indicates meaning, enhances aesthetics
  48. 48. • limited palette (about five colors) • not used as only means to differentiate (color blindness) • aesthetic and suitable color combinations • bright, desaturated colors - friendly, professional • dark, desaturated colors - serious, professional • saturated colors - exciting, dynamic • saturated colors attracts attention • different cultures - different meanings of colors IMPORTANCE OF COLOR
  49. 49. When otherwise equaly usable apps, visual design can be the strategic differentiator in achieving better personality, consistency, and functionality CONCLUSION
  50. 50. Thank you! Literature: • Emotional Design: Why We Love (or Hate) Everyday Things byDonald Norman • Emotional Design Elements by Smashing Magazine • Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler • Neuro Web Design: What Makes Them Click? by Ph.D. Susan M. Weinschenk • 100 Things: Every Designer Needs to Know About People by Ph.D. Susan Weinschenk,

×