mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-24 13:24:05 -06:00
108 lines
3.7 KiB
Markdown
108 lines
3.7 KiB
Markdown
---
|
||
title: "17-grids-grouping-alignment-reading-and-navigation"
|
||
aliases:
|
||
tags:
|
||
- info203
|
||
- lecture
|
||
sr-due: 2022-05-06
|
||
sr-interval: 3
|
||
sr-ease: 250
|
||
---
|
||
|
||
# Grouping
|
||
Gestaltkriterien “Gestalt Principles” - Law of Proximity
|
||
|
||
Our brain is trying to help us understand the world. For example we look for eye contact. Our brain is looking with our eyes for contrast, parrallel lines, etc. Criteria that help us understand the world.
|
||
|
||
The Gestalt priciples have identified how our functions. One of these is the law of proximity. Things that a close to each other are grouped together by our brain.
|
||
|
||
[](https://i.imgur.com/m8lTltN.png)[](https://i.imgur.com/EMeV5Gg.png)
|
||
|
||
|
||
Another law is the law of similarty. Things with similar appearance are grouped by our brains.
|
||
[](https://i.imgur.com/lVlE1z8.png)
|
||
[](https://i.imgur.com/8BhtgTa.png)
|
||
|
||
|
||
Another law is the law of closure. Where our brain tries to "autocomplete" things
|
||
[](https://i.imgur.com/1bcanTN.png)
|
||
[](https://i.imgur.com/MW9r7PR.png)
|
||
|
||
|
||
These techniques, similarity, proximity and (to a lesser extent) closure, can be used to organise and groupu our interfaces. Often the grouping and layout is done before the rest of the design.
|
||
|
||
Examples:
|
||
- [](https://i.imgur.com/RfkC6Fq.png)
|
||
- [](https://i.imgur.com/FjF8c98.png)
|
||
- [](https://i.imgur.com/P1m9XH8.png)
|
||
|
||
This is relatively easy. However, when done badly it can quickly confuse the user.
|
||
|
||
|
||
## Jan Tschichold and Bauhaus
|
||
|
||
There was a sudden change from the right images to the left. This was partly due to advances in technology. This change was made by the Bauhaus group/school which became a way of thinking. Their ideas were inspired by architecture. The style was simple, functional, well grouped. These elements are also present in their visual design.
|
||
|
||
Examples:
|
||
- [](https://i.imgur.com/nbEzVeP.png)
|
||
- [](https://i.imgur.com/MlP9Lra.png)
|
||
- [](https://i.imgur.com/jOCvCkw.png)
|
||
- [](https://i.imgur.com/LXsRpCb.png)
|
||
|
||
## In summary
|
||
- alignment guides the eye and reduces clutter
|
||
- avoid slight misalignments that undermine your ability to beacon organisation
|
||
- we automatically notice patterns and deviations
|
||
- when you deviate do so strategically
|
||
- use visual proximity and scale to convey semantic information
|
||
|
||
## Uses of grouping
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
# Color
|
||
|
||
- design grayscale first.
|
||
- keep luminance values from grayscale when moving to color
|
||
- use color harmonisers
|
||
- [](https://i.imgur.com/KdwaNzi.png)
|
||
- about 5-8% of men are colorblind (red-green, blue–yellow, total color blindness)
|
||
|
||
# Reading and navigating
|
||
Information scent
|
||
- how to represent things so people can find what they want
|
||
- do they realize their options
|
||
- can they figue out how to get what they want
|
||
How to find Poor scent
|
||
- flailing (loss of orientation, reported or observed)
|
||
- low confidence (in what link with will do or where it will go) (measured before and after using a web link)
|
||
- back button (count usage of back button)
|
||
|
||
Low scent navigation
|
||
- unfamiliar terms
|
||
- suprising categories
|
||
- short links
|
||
- hidden navigation
|
||
- icons provide little information
|
||
- generic icons rarely help
|
||
- they help when
|
||
- they facilitate repeat recognition
|
||
- when you know what something looks like but not what its called
|
||
- good redundant coding can help
|
||
|
||
improving scent
|
||
- multiword links
|
||
- specific recognisable terms
|
||
- trigger words not "clever" terms
|
||
- help accessibility
|
||
- speaking block navigation
|
||
- subheadings
|
||
- explanations
|
||
- design for glanceability
|
||
- [](https://i.imgur.com/pMNYIUB.png)
|