quartz/content/out/notes/lecture-12-design-heuristics-3.md
2022-04-06 19:48:06 +12:00

141 lines
2.2 KiB
Markdown

---
title: Lecture 12 Design Heuristics 3
sr-due: 2022-04-15
sr-interval: 9
sr-ease: 270
---
#review
---
# Lecture 12 Design Heuristics 3
## 1 Consistency and standards
![](https://i.imgur.com/H8rlxo7.png)
good and bad
- standards (user interface guidelines) are always chaning
differ between platforms
evolve over time
e.g., menus
![](https://i.imgur.com/IfaMADw.png)
![](https://i.imgur.com/HqYzadh.png)
general look of webpages evolves over time
### 1.1 Naming and teminology
![](https://i.imgur.com/3PwEOmn.png)
this is bad
you can ask users which categories they understand/know about
### 1.2 Data loss
![](https://i.imgur.com/23IxWiN.png)
standard to minimise loss
## 2 Error Prevention
### 2.1 Bad input
![](https://i.imgur.com/54tVH7B.png)
correct human errors
auto completion
### 2.2 helpful constraints
![](https://i.imgur.com/n4HT5L9.png)
### 2.3 Suggestions and autocorrection
![](https://i.imgur.com/c2l9MWy.png)
heavily abused by industry
- they can influence suggestions
### 2.4 Forgiving formatting
![](https://i.imgur.com/ldZUMer.png)
- reduce errors
-
## 3 recognition over recall
### 3.1 avoid codes
![](https://i.imgur.com/B8sJxd6.png)
### 3.2 Recognition with previews or icons
![](https://i.imgur.com/UBmJl6Y.png)
### 3.3 use icons that promote recognition
![](https://i.imgur.com/adjt5nv.png)
## 4 Flexibility and efficiency
### 4.1 Choices
![](https://i.imgur.com/lUBB7EN.png#invert)
![](https://i.imgur.com/1OaTaPg.png#invert)
![](https://i.imgur.com/8KaFDme.png#invert)
something with immediate effect can use switch
![](https://i.imgur.com/COR8E7w.png#invert)
![](https://i.imgur.com/EQbB1Ep.png#invert)
![](https://i.imgur.com/QhFssbP.png#invert)
![](https://i.imgur.com/PG2Iu9a.png#invert)
good defaults
![](https://i.imgur.com/pj5Ztij.png)
4.2 shortcuts and advanced options
![](https://i.imgur.com/0OG7qRx.png)
ambient information
![](https://i.imgur.com/s2zyIws.png)
proactivity
![](https://i.imgur.com/gmDLWMO.png)
![](https://i.imgur.com/Izu8bQX.png)
![](https://i.imgur.com/hiGeXW3.png)
## 5 aesthetic and minimalistic design
![](https://i.imgur.com/Oywxwgq.png)
![](https://i.imgur.com/xgfgEtm.png)
signal to noise
![](https://i.imgur.com/6bLaHS6.png)
![](https://i.imgur.com/qF21SST.png)