From 8df90a1ae86acd7e267e0e18b2c61b218b286065 Mon Sep 17 00:00:00 2001 From: Jet Hughes Date: Mon, 9 May 2022 19:38:44 +1200 Subject: [PATCH] update quartz --- content/notes/11-class-diagrams.md | 6 +- ...-cognition-and-visual-design-typography.md | 2 +- ...ouping-alignment-reading-and-navigation.md | 104 ++---------------- content/notes/18-ethics-in-hci.md | 19 +--- content/notes/color.md | 14 +++ content/notes/grouping.md | 16 +++ content/notes/hci-ethics.md | 16 +++ content/notes/info-203.md | 9 +- content/notes/law-of-closure.md | 11 ++ content/notes/law-of-similarity.md | 12 ++ content/notes/layout.md | 40 +++++++ content/notes/reading-and-navigating.md | 40 +++++++ ...ual-design-typography.md => typography.md} | 3 +- content/notes/visual-design.md | 7 +- 14 files changed, 179 insertions(+), 120 deletions(-) create mode 100644 content/notes/color.md create mode 100644 content/notes/grouping.md create mode 100644 content/notes/hci-ethics.md create mode 100644 content/notes/law-of-closure.md create mode 100644 content/notes/law-of-similarity.md create mode 100644 content/notes/layout.md create mode 100644 content/notes/reading-and-navigating.md rename content/notes/{visual-design-typography.md => typography.md} (97%) diff --git a/content/notes/11-class-diagrams.md b/content/notes/11-class-diagrams.md index 7449f82eb..f6d031fd5 100644 --- a/content/notes/11-class-diagrams.md +++ b/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) \ No newline at end of file diff --git a/content/notes/16-distributing-cognition-and-visual-design-typography.md b/content/notes/16-distributing-cognition-and-visual-design-typography.md index 467a394fc..d5a738168 100644 --- a/content/notes/16-distributing-cognition-and-visual-design-typography.md +++ b/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) \ No newline at end of file diff --git a/content/notes/17-grids-grouping-alignment-reading-and-navigation.md b/content/notes/17-grids-grouping-alignment-reading-and-navigation.md index e7f6f3247..753ae4998 100644 --- a/content/notes/17-grids-grouping-alignment-reading-and-navigation.md +++ b/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) diff --git a/content/notes/18-ethics-in-hci.md b/content/notes/18-ethics-in-hci.md index 065305354..a1ca18439 100644 --- a/content/notes/18-ethics-in-hci.md +++ b/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) \ No newline at end of file diff --git a/content/notes/color.md b/content/notes/color.md new file mode 100644 index 000000000..83701aee9 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/content/notes/grouping.md b/content/notes/grouping.md new file mode 100644 index 000000000..da1767aa9 --- /dev/null +++ b/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) diff --git a/content/notes/hci-ethics.md b/content/notes/hci-ethics.md new file mode 100644 index 000000000..1d2a3953b --- /dev/null +++ b/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. + diff --git a/content/notes/info-203.md b/content/notes/info-203.md index c2fbc5db5..f08ccf1f0 100644 --- a/content/notes/info-203.md +++ b/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) diff --git a/content/notes/law-of-closure.md b/content/notes/law-of-closure.md new file mode 100644 index 000000000..6e67335dc --- /dev/null +++ b/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) diff --git a/content/notes/law-of-similarity.md b/content/notes/law-of-similarity.md new file mode 100644 index 000000000..ecf29cd59 --- /dev/null +++ b/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) + diff --git a/content/notes/layout.md b/content/notes/layout.md new file mode 100644 index 000000000..08c45a1d6 --- /dev/null +++ b/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) diff --git a/content/notes/reading-and-navigating.md b/content/notes/reading-and-navigating.md new file mode 100644 index 000000000..4b8f38485 --- /dev/null +++ b/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) diff --git a/content/notes/visual-design-typography.md b/content/notes/typography.md similarity index 97% rename from content/notes/visual-design-typography.md rename to content/notes/typography.md index 5d1c9f97e..6e1eee97b 100644 --- a/content/notes/visual-design-typography.md +++ b/content/notes/typography.md @@ -1,8 +1,9 @@ --- -title: "visual-design-typography" +title: "typography" aliases: Typography tags: - info203 +- visual-design --- most common fonts diff --git a/content/notes/visual-design.md b/content/notes/visual-design.md index 31ebf14b2..9fa2eb70c 100644 --- a/content/notes/visual-design.md +++ b/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)