1 / 0

PBA Front-End

PBA Front-End. Week 6. Gestalt Laws. The standard page compo-sition ”pattern” seems to be well-established; it works! But… why does it work…? Because it employs many of the Gestalt Laws. Gestalt Laws.

azize
Download Presentation

PBA Front-End

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PBA Front-End

    Week 6
  2. Gestalt Laws The standard page compo-sition ”pattern” seems to be well-established; it works! But…why does it work…? Because it employs many of the Gestalt Laws
  3. Gestalt Laws Gestalt Laws are a part of Cognition Psychology – how we percieve things in the surrounding world Gestalt (from German) means ”a whole structure or form, that emerges when a set of smaller, simpler components are combined in a certain way” Not a perfect translation…
  4. Gestalt Laws
  5. Gestalt Laws
  6. Gestalt Laws The Gestalt Laws are a set of statements about perception of elements in a certain context About ten laws – we will discuss some of them in the following
  7. Gestalt Laws Law of Proximity Elements that are close to each other will be perceived as one single structure
  8. Gestalt Laws Is this… …four vertical columns… …or… …seven horizontal rows… …or… …28 unrelated dots…?
  9. Gestalt Laws Is this… …four vertical columns… …or… …seven horizontal rows… …or… …28 unrelated dots…?
  10. Gestalt Laws Law of Similarity Elements that look similar will be perceived as one single structure
  11. Gestalt Laws Is this… …12 unrelated columns… …or… …six groups of two columns, alternating between white and yellow?
  12. Gestalt Laws Law of Closure Humans have a tendency to perceive an incomplete structure as complete (to close or fill the gaps)
  13. Gestalt Laws Is this… …five unrelated circle fragments… …or… …a circle?
  14. Gestalt Laws Is this… …five unrelated circle fragments… …or… …a circle?
  15. Gestalt Laws How many triangles do you see in the pictures…?
  16. Gestalt Laws Law of Closure (variant) Elements within a bounding structure will be perceived as one single structure
  17. Gestalt Laws Is this… …six groups of two columns, alternating between white and yellow… …or… …three boxes con-taining a varying number of dots?
  18. Gestalt Laws These three laws… Law of Proximity Law of Similarity Law of Closure …are used very often in web design!
  19. Gestalt Laws Law of Proximity: These menu items are related, and are physically close
  20. Gestalt Laws Law of Similarity: These menu items are related, and they look similar
  21. Gestalt Laws Law of Similarity: These menu items are related, and they look similar (but different from the other types of menu items)
  22. Gestalt Laws Law of Closure: Do we have a outline of a box here…?
  23. Gestalt Laws Law of Closure: Do we have a outline of a box here…?
  24. Gestalt Laws Law of Prägnanz (or Good Form) Humans tend to order a set of elements into one simple, recognisable form
  25. Gestalt Laws Is this… …a triangle and a square.. …or… …three geometric figures… …or… 11 linies…?
  26. Gestalt Laws Is this… …a mysterious face on the surface of Mars… …or… …just a random effect caused by light and shadow…?
  27. Gestalt Laws Law of Isomorphism (or Past Experience) Past experience and context has an influence on how we perceive an element
  28. Gestalt Laws Is this… …the letter ”B” …or… …the number 13…?
  29. Gestalt Laws You are on a Danish website… What do you expect to happen, when you click on these icons…?
  30. Gestalt Laws Law of Good Continuation When there is an intersection between two or more objects, we tend to perceive each object as a single uninterrupted object
  31. Gestalt Laws How did we produce this figure…?
  32. Gestalt Laws How did we produce this figure…? + =
  33. Gestalt Laws How did we produce this figure…? + =
  34. Gestalt Laws Law of Figure and Ground We tend to organize our perceptions by distinguishing a figure from a ground
  35. Gestalt Laws Is this… …a vase... …or… …two faces in silhouette?
  36. Gestalt Laws http://www.slideshare.net/rogerpitiot/gestalt-theory
  37. Gestalt Laws
  38. Using Contrast The Gestalt Laws mainly deal with perception of ”similar” elements (similar appearance, similar position, etc.) How do we make something stand out, in order for the user to notice it? We can use contrast
  39. Using Contrast What is contrast…? The difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background… or Things which look different from one another!
  40. Using Contrast Types of contrast Color contrast Size contrast Shape contrast Positional Contrast
  41. Using Contrast Color contrast can be useful for clearly separating an area from the background
  42. Using Contrast Another type of color contrast is between warm and cool colors
  43. Using Contrast We can also use the tint/shade/tone of colors to create contrast This is important! This is normal This is not so important…
  44. Using Contrast Using a single color in a black/white graphic creates a strong contrast
  45. Using Contrast Size contrast – size does matter! We usually perceive a large object to be more important than a small object
  46. Using Contrast Size contrast is also extremely common in web typography This is important! This is normal This is not so important…
  47. Using Contrast Size contrast is also extremely common in web typography This is important! This is normal This is not so important…
  48. Using Contrast I wonder what they want us to do…?
  49. Using Contrast Humans quickly identify a shape that is different than other, neighbouring shapes Can signify that e.g a button has a special function
  50. Using Contrast Humans quickly notice if something is ”out of place” Similar to shape contrast – use it to signify that e.g. a button does something special Often used together with other types of contrast
  51. Using Contrast
  52. Universal Usability Two aspects of usability in web design Enabling the typical user to accomplish her task as efficiently as possible (the user doesn’t want to spend time on our wesbite) Enabling any user to be able to use our website, no matter his limitations
  53. Universal Usability Accessibility – making the web accessible for users with disabilities W3C – World Wide Web Consortium established the Web Accessibility Initiative (WAI) in 1999 http://www.w3.org/WAI/
  54. Universal Usability Usability – how do we measure that…? Speed – how quickly can the user accomplish the desired task Error rate – how many errors happened during the process? Learnability – how easy is it to do again? Satisfaction – do we want to do it again?
  55. Universal Usability User-centered design The developer is not the user – the user is the user  Ask the user – but how…? User focus groups Task analysis User testing and feedback Web analytics
  56. Universal Usability User focus groups Face-to-face meetings with a group of potential users (target audience) Get ideas directly from the ”source” Priorities Get to know your target audience better Use during entire process Managed by Usability Lead, not trivial…
  57. Universal Usability Task analysis / User testing How does a user actually accomplish her task? What steps are involved? What information should be available? Silently observe the user when she tries to accomplish her task (video, eye-track,…) Enables us to build ”models” of a task, to be used in actual design
  58. Universal Usability Web analytics (what is it…?) Tools provided by the website host to gather information about how your website is being used A post-deployment tool, so most useful for ”tweaking” your website design Google Analytics
  59. Universal Usability Information available from Google Analytics Users previous website Keywords used in search engine Pages visitied on site (and order) User configuration (OS, browser, screen resolution, color settings, etc.) Number of visits by the user …and more
  60. Universal Usability Problems with Web analytics Caching Personal user information (age, gender, disabilities, …) Why did the user visit your website…? Use analytics as supplement, not as your only source of user information
  61. Universal Usability How do we manage all this user information? One strategy: construct a set of ”personas” A persona is a fictious user – a ”condensate” of the gathered user information Construct enough personas to cover the range of users you want to accomodate Example
  62. Universal Usability So, can we make one website that is As efficient as possible for the typical user? Accessible for all users? No…and yes! We still only design and create one website… …but it is so flexible that it can ”manifest” itself in an appropriate manner for everybody Universal Design
  63. Universal Usability Principles of Universal Design Eqitable Use Flexibility in Use Simple and Intuitive Use Perceptible Information
  64. Universal Usability Equitable Use The design is useful and marketable to people with diverse abilities. Provide the same means of use for all users: identical whenever possible; equivalent when not Only diversify when you really need to
  65. Universal Usability Flexibility in Use The design accommodates a wide range of individual preferences and abilities. Provide choice in methods of use The web offers a great deal of flexibility – use it!
  66. Universal Usability Simple and Intuitive Use Use of the design is easy to understand, regard-less of the user’s experience, knowledge, language skills, or current concentration level. Eliminate unnecessary complexity and arrange information consistent with its importance To try achieve a high signal-to-noise ratio…
  67. Universal Usability Perceptible Information The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information and provide compatibility with a variety of techniques or devices used by people with sensory limitations
  68. Universal Usability Perceptible Information – examples Provide alternative text for images Use proper markup for headings, etc. Provide audio alternative for video Provide text alternative for audio Provide ways of regulating text sizes, contrast, color palette, etc
  69. Universal Usability
  70. Responsive Design Is there such a thing as a ”typical user” of our website…? With regards to Screen resolution Bandwidth Browser Plug-ins …
  71. Responsive Design Harder and harder to define a ”typical user”… …so we should move beyond that! User ”landscape” defined in terms of personas, with different habits, platforms, abilities, etc Our design should provide all personas with a positive user experience
  72. Responsive Design One element in user behavior which is evolving rapidly is choice of platform Platform: The device through which the user accesses the website
  73. Responsive Design Platforms anno 2000
  74. Responsive Design Platforms today…
  75. Responsive Design Today – a very wide range of platforms A wide range of Screen sizes Screen resolutiuons Responsive design – the notion of letting the website adapt dynamically to the platform at hand
  76. Responsive Design Is that even possible…? HTC Wildfire 3” screen 240 x 320 50x pixels Apple Cinema Display 30” screen 2560 x 1600
  77. Responsive Design How can a website adapt between 240x320 and 2560x1600 resolutions…? Solution 1: Don’t! Solution 2: Some elements static, some dynamic Solution 3: Everything is dynamic!
  78. Responsive Design Solution 1 – Don’t What’s wrong with the good ol’ ”this site is optimised for 1024x768”…? It reads ”I’m lazy” ”I don’t want to do something new” ”I don’t care about my users” ”Scroll around or go away”
  79. Responsive Design Solution 2: Some elements static, some dynamic Status quo for many websites today Dynamic: layout columns and text Static: images, menus, etc. Better, but is still problematic particularly for ”narrow” resolutions
  80. Responsive Design Solution 3: Everything is dynamic When the resolution is changed, (almost) everything in the layout changes Not only size, but possibly also position! Some elements might be replaced or omitted entirely ExampleExample
  81. Responsive Design How is it done…(technically)? Awareness of platform (media query) Awareness of resolution Fluid grids Fluid images Show/hide content Dynamic choice of layout
  82. Responsive Design Awareness of device and resolution CSS3 supports ”media query” Given media and resolution, pick a suitable layout (defined by CSS) Isn’t resolution all that matters…? 1280x720 on 4” 1280x720 on 12”
  83. Responsive Design Fluid images Change the image according to available space ”Raw” resizing of the image Show/hide portions of the image Not trivial how to scale an image in an aesthetically pleasing manner…
  84. Responsive Design Dynamic choice of layout Rearrange or show/hide elements Biggest concern is usually the width of the layout Move column content to the top of the page Avoid the horisontal scroll bar!
  85. Responsive Design Is that even possible…? Not in all cases… …but we can at least improve the user experi-ence in most cases
  86. Responsive Design
More Related