update quartz

content/notes/11-class-diagrams.md

@@ -4,9 +4,9 @@ aliases:
 tags: 
 - info201
 - lecture
-sr-due: 2022-05-05
-sr-interval: 20
-sr-ease: 250
+sr-due: 2022-07-23
+sr-interval: 75
+sr-ease: 270
 ---
 
 [class-diagrams](notes/class-diagrams.md)

content/notes/16-distributing-cognition-and-visual-design-typography.md

@@ -10,5 +10,5 @@ sr-ease: 250
 ---
 
 - [representation-and-distributing-cognition](notes/representation-and-distributing-cognition.md)
-- [visual-design-typography](notes/visual-design-typography.md)]
+- [typography](notes/typography.md)]
 - [visual-design](notes/visual-design.md)

content/notes/17-grids-grouping-alignment-reading-and-navigation.md

@@ -4,104 +4,16 @@ aliases:
 tags: 
 - info203
 - lecture
-sr-due: 2022-05-06
-sr-interval: 3
+sr-due: 2022-05-20
+sr-interval: 11
 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)
+- [layout](notes/layout.md)
+	- [closure](notes/law-of-closure.md)
+	- [grouping](notes/grouping.md)
+	- [similarity](notes/law-of-similarity.md)
+- [color](notes/color.md)
+- [reading-and-navigating](notes/reading-and-navigating.md)
 
 
-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
-![](https://i.imgur.com/hGc8dZm.png)
-![700](https://i.imgur.com/5bztsrO.png)
-![](https://i.imgur.com/wgsiKb6.png)
-![](https://i.imgur.com/wnKoBEk.png)
-![](https://i.imgur.com/sGmAjLv.png)
-![](https://i.imgur.com/wD65fJu.png)
-![](https://i.imgur.com/1L6IGAi.png)
-
-# 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)

content/notes/18-ethics-in-hci.md

@@ -4,20 +4,9 @@ aliases:
 tags: 
 - info203
 - lecture
-sr-due: 2022-05-07
-sr-interval: 3
-sr-ease: 250
+sr-due: 2022-05-25
+sr-interval: 16
+sr-ease: 270
 ---
 
-# Reading and navigation
-we have a tendency to focus on certain areas first. Usually the top left.
-
-# Ethics
-steve mann example - too far?
-
-hypocratic oath - do no harm
-
-should there be one like this in computing?
-
-should self driving cars protect the driver or pedestrians.
-
+[hci-ethics](notes/hci-ethics.md)

content/notes/color.md

@@ -0,0 +1,14 @@
+---
+title: "color"
+aliases: Colour, colour
+tags: 
+- info203
+- visual-design
+---
+
+# 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)

content/notes/grouping.md

@@ -0,0 +1,16 @@
+---
+title: "grouping"
+aliases: Grouping
+tags: 
+- info203
+- visual-design
+---
+
+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. 
+
+![grouping example](https://i.imgur.com/m8lTltN.png)
+![grouping ui](https://i.imgur.com/EMeV5Gg.png)

content/notes/hci-ethics.md

@@ -0,0 +1,16 @@
+---
+title: "hci-ethics"
+aliases: 
+tags: 
+- info203
+---
+
+# Ethics
+steve mann example - too far?
+
+hypocratic oath - do no harm
+
+should there be one like this in computing?
+
+should self driving cars protect the driver or pedestrians.
+

content/notes/info-203.md

@@ -51,7 +51,14 @@ links:[_index](_index.md)
 - [mental-models](notes/mental-models.md)
 - [representation-and-distributing-cognition](notes/representation-and-distributing-cognition.md)
 - [visual-design](notes/visual-design.md)
-- [visual-design-typography](notes/visual-design-typography.md)
+	- [typography](notes/typography.md)
+	- [layout](notes/layout.md)
+		- [closure](notes/law-of-closure.md)
+		- [grouping](notes/grouping.md)
+		- [similarity](notes/law-of-similarity.md)
+	- [color](notes/color.md)
+	- [reading-and-navigating](notes/reading-and-navigating.md)
+- [hci-ethics](notes/hci-ethics.md)
 
 # Videos
 - [heuristic-evaluation](notes/heuristic-evaluation.md)

content/notes/law-of-closure.md

@@ -0,0 +1,11 @@
+---
+title: "law-of-closure"
+aliases: closure
+tags: 
+- info203
+- visual design
+---
+
+Another law is the law of closure. Where our brain tries to "autocomplete" things
+![closure example](https://i.imgur.com/1bcanTN.png)
+![closure UI IBM](https://i.imgur.com/MW9r7PR.png)

content/notes/law-of-similarity.md

@@ -0,0 +1,12 @@
+---
+title: "law-of-similarity"
+aliases: similarity
+tags: 
+- info203
+- visual-design
+---
+
+Another law is the law of similarty. Things with similar appearance are grouped by our brains. 
+![similarity example](https://i.imgur.com/lVlE1z8.png)
+![similarity UI](https://i.imgur.com/8BhtgTa.png)
+

content/notes/layout.md

@@ -0,0 +1,40 @@
+---
+title: "layout"
+aliases: 
+tags: 
+- info203
+- visual-design
+---
+
+Techniques such as, [similarity](notes/law-of-similarity.md), [grouping](notes/grouping.md) and (to a lesser extent) [closure](notes/law-of-closure.md), can be used to organise and groupu our interfaces. Often the grouping and layout is done before the rest of the design.
+
+Examples:
+![find dialogue](https://i.imgur.com/RfkC6Fq.png)
+![otago uni homepage](https://i.imgur.com/FjF8c98.png)
+![tobias poster](https://i.imgur.com/P1m9XH8.png)
+
+This is relatively easy. However, when done badly it can quickly confuse the user.
+
+**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
+
+# Examples
+![scott klemmer example](https://i.imgur.com/hGc8dZm.png)
+![youtube and ny times](https://i.imgur.com/5bztsrO.png)
+![apple finder and tobias poster](https://i.imgur.com/wgsiKb6.png)
+![google, ny times, craiglist, webby awards, before and after blurring](https://i.imgur.com/wnKoBEk.png)
+![scott klemmer examples 2](https://i.imgur.com/sGmAjLv.png)
+![scott klemmer examples 3](https://i.imgur.com/wD65fJu.png)
+![amazon](https://i.imgur.com/1L6IGAi.png)
+
+# 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. 
+
+![typography old v new](https://i.imgur.com/nbEzVeP.png)
+![bauhaus bulding](https://i.imgur.com/MlP9Lra.png)
+![penguin books](https://i.imgur.com/jOCvCkw.png)
+![magazine](https://i.imgur.com/LXsRpCb.png)

content/notes/reading-and-navigating.md

@@ -0,0 +1,40 @@
+---
+title: "reading-and-navigating"
+aliases: reading, navigating
+tags: 
+- info203 
+- visual-design
+---
+
+# 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)

content/notes/typography.md

@@ -1,8 +1,9 @@
 ---
-title: "visual-design-typography"
+title: "typography"
 aliases: Typography
 tags: 
 - info203
+- visual-design
 ---
 
 most common fonts

content/notes/visual-design.md

@@ -3,6 +3,7 @@ title: "visual-design"
 aliases: Visual Design
 tags: 
 - info203
+- visual-design
 ---
 
 combine text and graphics. how to represent?
@@ -19,6 +20,6 @@ three goals
 - message
 
 Three tools
-- typography
-- layout
-- colour
+- [typography](notes/typography.md)
+- [layout](notes/layout.md)
+- [color](notes/color.md)