Recomendados
Más contenido relacionado
Similar a UX coffee 1 - UX Laws and Gestalt Psychology Workshop - 05-02-2019
Similar a UX coffee 1 - UX Laws and Gestalt Psychology Workshop - 05-02-2019 (20)
Último
Último (20)
UX coffee 1 - UX Laws and Gestalt Psychology Workshop - 05-02-2019
- 1. Welcome!
- 3. The Plan What is this meet-up? Introductions round the table Does our brain perceive things as they exist on a page or screen? Gestalt Principles of Visual Perception Bad UI game Other UX “Laws” (not exhaustive!) 3
- 4. 4
- 5. Our brain often interprets what is on the page or screen to be something else. 5
- 6. Bad design is everywhere... Crane foot-operated switches. Image from Gerry Miller.Staff washroom, Dubai. Image from Silver Moor Business Consulting 6
- 7. ...we make the same mistakes in digital products! 7
- 8. 8
- 9. Gestalt psychology is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions in an apparently chaotic world. Wikipedia 9
- 10. "The whole is something else than the sum of its parts" Kurt Koffka - Gestalt Psychologist 10
- 12. Law of Prägnanz (Grouping laws) Our tendency to order our experience in a manner that is regular, orderly, symmetrical, and simple. 12
- 13. 13 Proximity Similarity Closure Symmetry [ ] { } [ ] Continuity Common Fate
- 14. Crap UI game 14
- 15. 15 Proximity Similarity Closure Symmetry [ ] { } [ ] Continuity Common Fate
- 16. 16Courtesy of Alan Trow
- 17. Anyone need a break? 17
- 18. Hick’s Law The time it takes to make a decision increases with the number and complexity of choices. 18
- 19. 19
- 20. 20
- 21. 21
- 22. 22
- 23. What breaks Hick’s law in the printed pictures? 23
- 24. 24
- 25. Fitt’s Law The time to acquire a target is a function of the distance to and size of the target. 25
- 26. 26
- 27. 27
- 28. What breaks Fitt’s law in the printed pictures? 28
- 29. 29
- 30. The Von Restorff Effect The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. 30
- 31. 31
- 32. 32
- 33. What doesn’t use the Von Restorff Effect in the printed pictures? 33
- 34. 34
- 35. Summary We perceive “wholes” first Our perception and understanding is not formed from the parts of an object or image We like to group things There are many ways our visual perception system groups things to help us make sense of the world Size, uniqueness, and quantity have an effect When interacting with an interface, the size, quantity and colours we use have an effect on how successful it will be. 35
- 36. Thanks for coming! Twitter: @laura_yarrow Email: laurayarrow@gmail.com
Notas del editor
- Who am i - ux consultant - eux - ux bmth - ux insider - but frustrated no smaller ux meetups locally. I’d love for this to not just be me talking at people - trying to make this as interactive as possible with lots of discussions - and it’s cool if you want to get involved for future meetups
- Look at the cards on the table...what is on the cards are simple shapes, and our eyes see that, but our brains and perception systems translate that differently. This is a big problem if you are work in an industry placing shapes and lines on screens for people to look at! When you talk about visual perception, it’s impossible not to talk about gestalt psychology. So i’m going to chat briefly about what that means so we all understand. Other “laws” - not actual laws - think of them as further guidelines that are useful in creating user interfaces
- I want to start with some mind bending things. Does anyone have a problem with this being on the screen, it can be a bit upsetting if you have problems with your eyes or suffer from epilepsy and so on. I’m going to hand out a few more cards that demonstrate… This one looks like the rows are sloping at angles, when in fact they are not. On the screen they are flat.
- So this can be a major problem when we are designing things for other human beings to use. When you don’t design for the way we see the world, you get quite a few issues arising.
- I want to talk about why this applies to the design we do. Are these washbasins or urinals? These are foot controls in a crane. One round button controls the operators microphone to the ground crew, the other operates the emergency shut down on the crane. A lot of these design issues come down to the designer not considering how our perception system works. They haven’t considered proximity and similarity in these cases. Well those aren’t webpages or apps, but...
- This is the old layout, but it demonstrates the same principle. And this one from the Trainline I tap the wrong button every single time. I spend ages scrolling through each one of these to set up the date and time, only to accidentally tap “same day” and reset them all again!
- UI’s tend to be designed in separate pieces, so we can forget the end result will be perceived as a whole by the end user. So the webpages and apps we are designing and creating, these can end up being quite chaotic to our visual system. Websites and apps that violate the way our visual perception system works, is where poor usability breeds, and therefore bad user experiences. So what to do? Well Gestalt Psychology to the rescue…
- A huge part of why lots of designs don’t work is down to not designing things to satisfy the way we perceive the world. Gestalt Psychology gives us some rules we need to stick to when we design things that humans have to look at or interact with.
- Gestalt psychology is a philosophy of mind of the Berlin School of experimental psychology. Early 20th century theorists, such as Kurt Koffka, Max Wertheimer, and Wolfgang Köhler helped to form most of the theories around Gestalt Psychology 2] is often incorrectly translated[3] as "The whole is greater than the sum of its parts". This is not a principle of addition" he said.[5] The whole has an independent existence.
- Emergence - Dog is not recognized by first identifying its parts and inferring the dog from those component parts. Dog appears as a whole, all at once. Reification - what you perceive contains more spatial information than the image actually has. Illusory contours seen as real contours. Multistability - ambiguous perceptual experiences that pop back and forth instabley between alternative interpretations - MC Escher - figure ground Invariance - simple geometric objects are recognised regardless of rotation, translation, and scale.
- Humans are constantly bombarded with visual stimuli , to stop us losing our minds we like to try and group things together to be more regular, orderly, symmetrical and simple. So we unify these signals into groups. A lot of these things are common sense - but perhaps you don’t know why?
- There are more grouping laws, i’m just concentrating on 6 illustrated here that you might find most useful as digital designers. So, i’m going to put out some prints of some terrible interfaces - mainly microwaves and parking ticket machines - as I describe each one, see if you can circle on the picture where this law is broken (or observed!), good and bad is ok!
- There are more grouping laws, i’m just concentrating on 6 illustrated here that you might find most useful as digital designers. So, i’m going to put out some prints of some terrible interfaces - mainly microwaves and parking ticket machines - as I describe each one, see if you can circle on the picture where this law is broken (or observed!), good and bad is ok!
- https://atrowpoole.files.wordpress.com/2014/07/blog-gestalt-principles.jpg
- Decision paralysis The paradox of choice
- This site gives you so many options for the shoes - this is standard form for trainer sites, people love to dream. But applying this amount of options to other sites may not work.
- This company is now in administration - getting these screenshots was quite hard! Pre selected options Only when you select Womens does the size appear Much better way of drip feeding the options as the user needs them to avoid overwhelming them
- What is giving you too much choice?
- This was the example I thought was a good example. So many predefined settings, not even grouped together properly!
- 1954, psychologist Paul Fitts fast movements and small targets result in greater error rates, due to the speed-accuracy trade-off.
- speed-accuracy tradeoff. in many types of perceptual-motor tasks, there is a tradeoff between how fast a task can be performed and how many mistakes are made in performing the task. That is, a user can either perform the task very fast with a large number of errors or very slow with very few errors. They key is to keep things you want users to tap/click closer and make them slightly bigger to reduce errors and time taken to complete. Also, placing items radially, or near edges is found to improve accuracy.
- Button clickable area only extends to the edge of the text, rather than the edge of the button Ubuntu screenshot - there is a text filter at the top, and a file filter at the bottom - but these would most likley be used in succession (yet are far apart)
- The start button is so tiny, and surrounded by other buttons. The chance of innacuracy is high here.
- This is a useful law to apply if you want the user to click soemthing, your next Call To Action. This might be a call to buy something, or progress along a series of screens like a “next” button, and so on.
- It might also be the prominent option in a series of subscription options, this is the Von Restorff effect. Isolating the key item you want their visual system to pay more attention too.
- This is a real tough one!
- The yellow button is more prominent, but actually you’re supposed to press the grey one with the red arrow - someone has placed that there retrospectively to stop people making the error of pressing the yellow one.
- 1. We don’t see the logical or literal layout that is set out on a page or screen. It goes through our own perceptual filter. Our eyes and our brain work together, and often see something quite different to what is there. 2. To combat the chaotic amount of things we are bombarded with moment to moment, part of our perception system likes to group things together. 3.
- I’ve also printed out some feedback forms with some ideas of future topics. There are some contact details on there for if you want to host the next one and propose a topic, or work together to co host something if that works better.