commit 777d43336764efd456f3c7bb41da9f0eb074a21d
parent 53ee825d0218bdca142f19ec4d6807f77b568ad6
Author: Alex Balgavy <a.balgavy@gmail.com>
Date: Sat, 3 Oct 2020 23:44:57 +0200
HCI notes
Diffstat:
31 files changed, 415 insertions(+), 1868 deletions(-)
diff --git a/content/_index.md b/content/_index.md
@@ -28,7 +28,7 @@ title = "Alex's university course notes"
* [Logic & Modelling](https://thezeroalpha.github.io/logic-modelling-notes)
* [Databases](databases-notes)
* [A Likelihood Approach to Statistics (Honors)](https://github.com/thezeroalpha/likelihood-notes/blob/master/notes.pdf)
-* [Human Computer Interaction](https://thezeroalpha.github.io/hci-notes)
+* [Human Computer Interaction](hci-notes/)
## Subject notes: Year 1
diff --git a/content/hci-notes/_index.md b/content/hci-notes/_index.md
@@ -0,0 +1,38 @@
++++
+title = "Human Computer Interaction"
++++
+
+# Human Computer Interaction
+HCI is concerned with design, evaluation, implementation of interactive computer systems
+
+how people use software & computing devices. usability engineering:
+* design
+* evaluation
+* implementation of interactive computing systems
+
+why is it important? because sites have shitty UIs and UXs. and we've all had to use them. and it sucks.
+
+website metrics: volume of business, num of unique visitors, conversion rate from visitor to customer, loyalty rate, bounce rate, pages viewed per visit
+
+business metrics: conversion rates, traffic numbers, user performance, target feature usage
+
+Table of contents:
+1. [User experience (UX) elements](user-experience-elements)
+2. [Norman's design principles](normans-design-principles)
+3. [Usability principles](usability-principles)
+4. [Prototypes](prototypes)
+ * [Designing the prototype](prototypes#designing-the-prototype)
+5. [Personas, Scenarios, and use cases](personas-scenarios-and-use-cases)
+ * [Goal directed design](personas-scenarios-and-use-cases#goal-directed-design)
+ * [Personas - archetypal users](personas-scenarios-and-use-cases#personas-archetypal-users)
+ * [Scenarios](personas-scenarios-and-use-cases#scenarios)
+ * [Design Requirements & principles](personas-scenarios-and-use-cases#design-requirements-principles)
+ * [Use Case](personas-scenarios-and-use-cases#use-case)
+6. [Webpage design](webpage-design)
+7. [Designing for differences](designing-for-differences)
+ * [Ergonomics](designing-for-differences#ergonomics)
+ * [Computers for older people](designing-for-differences#computers-for-older-people)
+ * [Computers for kids](designing-for-differences#computers-for-kids)
+ * [Web page guidelines](designing-for-differences#web-page-guidelines)
+ * [Web Content Accessibility Guidelines (WCAG, W3C initiative)](designing-for-differences#web-content-accessibility-guidelines-wcag-w3c-initiative)
+
diff --git a/content/hci-notes/addjs.sh b/content/hci-notes/addjs.sh
@@ -1,12 +0,0 @@
-#!/usr/bin/env bash
-if ! command -v vim; then
- echo "Don't know how to do this without vim yet."
- exit 1
-elif [ $# -lt 1 ]; then
- echo "Need to pass the file as argument."
- exit 1
-fi
-
-for i in $@; do
- vim -c 'v/<head>
<script/ s#<head>#<head>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>' -c 'wq' "$i"
-done
diff --git a/content/hci-notes/designing-for-differences.html b/content/hci-notes/designing-for-differences.html
@@ -1,198 +0,0 @@
-<html>
-<head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
- <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('pre.code').forEach(function(item) {
- hljs.highlightBlock(item)
- })
- });
- </script>
- <title>designing-for-differences</title>
-</head>
-<body>
-<style type="text/css">
-nav a {
- text-align: left;
-}
-nav #name {
- text-align: right;
- float: right;
- font-style: italic;
-}
-</style>
- <nav>
- <a href="index.html">Index</a>
- <span id="name">Alex Balgavy</span>
- </nav>
- <hr>
- <div class="content">
-
-<div id="Designing for differences"><h2 id="Designing for differences" class="header"><a href="#Designing for differences">Designing for differences</a></h2></div>
-<p>
-differences in:
-</p>
-<ul>
-<li>
-demographics - gender, age, education, socio-economic status
-
-<li>
-culture - language, religion, ethnicity
-
-<li>
-cognitive style - personality type
-
-<li>
-disability - visual, motor, cognitive
-
-<li>
-experience - subject domain, systems
-
-</ul>
-
-<p>
-how much should you tailor?
-</p>
-<ul>
-<li>
-at this point you pretend that there's an average user, completely contradicting what was said a few lectures before
-
-<ul>
-<li>
-but now you do it because it's useful and keeps the range broad
-
-</ul>
-<li>
-specialised audience design - economics of markets, empathy with the users
-
-<li>
-universal design - the kerb cut metaphor
-
-</ul>
-
-<div id="Designing for differences-Ergonomics"><h3 id="Ergonomics" class="header"><a href="#Designing for differences-Ergonomics">Ergonomics</a></h3></div>
-<p>
-peripherals, posture, stuff like this
-</p>
-
-<p>
-<img src="img/ergonomic-keyboards.png" alt="Ergonomic keyboard design" />
-</p>
-
-<div id="Designing for differences-Computers for older people"><h3 id="Computers for older people" class="header"><a href="#Designing for differences-Computers for older people">Computers for older people</a></h3></div>
-<p>
-usage related to socio-economic group, with wealth and education critical
-</p>
-
-<p>
-accessibility features:
-</p>
-<ul>
-<li>
-sensory: visual (reduce width of field, color perceptions), audio (high freq hearing loss)
-
-<li>
-motor: slower motor task response times, no fine motor control
-
-<li>
-cognitive: decline in linguistic and reasoning ability, impairment of memory
-
-</ul>
-
-<div id="Designing for differences-Computers for kids"><h3 id="Computers for kids" class="header"><a href="#Designing for differences-Computers for kids">Computers for kids</a></h3></div>
-<ul>
-<li>
-bold colors
-
-<li>
-large buttons and text
-
-</ul>
-
-<div id="Designing for differences-Web page guidelines"><h3 id="Web page guidelines" class="header"><a href="#Designing for differences-Web page guidelines">Web page guidelines</a></h3></div>
-<p>
-do the research
-</p>
-<ul>
-<li>
-are there local sites offering similar goods/services?
-
-<li>
-what are common design values and cahracteristics?
-
-</ul>
-
-<p>
-use any local knowledge you can get
-</p>
-
-<p>
-test the design before deployment!
-</p>
-
-<div id="Designing for differences-Web page guidelines-Web Content Accessibility Guidelines (WCAG, W3C initiative)"><h4 id="Web Content Accessibility Guidelines (WCAG, W3C initiative)" class="header"><a href="#Designing for differences-Web page guidelines-Web Content Accessibility Guidelines (WCAG, W3C initiative)">Web Content Accessibility Guidelines (WCAG, W3C initiative)</a></h4></div>
-<p>
-aims to provide guidelines, has a st of accessibility principles
-</p>
-
-<p>
-perceivable:
-</p>
-<ol>
-<li>
-provide text alternatives for any non-text content (like alt tag)
-
-<li>
-provide alternatives for time-based media
-
-<li>
-create content that can be presented in different ways without losing information/structure
-
-<li>
-make it easier for users to see/hear content (including foreground and background separation)
-
-</ol>
-
-<p>
-operable:
-</p>
-<ol>
-<li>
-make all functionality available from a keyboard
-
-<li>
-provide users enough time to read and use content
-
-<li>
-do not design content in a way that can cause seizures
-
-<li>
-provide ways to help users navigate, find content, and determine where they are
-
-</ol>
-
-<p>
-understandable & robust:
-</p>
-<ol>
-<li>
-make text content readable and understandable
-
-<li>
-make web pages appear and operate in predictable ways
-
-<li>
-help users avoid and correct mistakes
-
-<li>
-maximize compatibility with current and future user agents, including assistive technologies
-
-</ol>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/img/ergonomic-keyboards.png b/content/hci-notes/designing-for-differences/ergonomic-keyboards.png
Binary files differ.
diff --git a/content/hci-notes/designing-for-differences/index.md b/content/hci-notes/designing-for-differences/index.md
@@ -0,0 +1,64 @@
++++
+title = 'Designing for differences'
++++
+
+## Designing for differences
+differences in:
+* demographics - gender, age, education, socio-economic status
+* culture - language, religion, ethnicity
+* cognitive style - personality type
+* disability - visual, motor, cognitive
+* experience - subject domain, systems
+
+how much should you tailor?
+* at this point you pretend that there's an average user, completely contradicting what was said a few lectures before
+ * but now you do it because it's useful and keeps the range broad
+* specialised audience design - economics of markets, empathy with the users
+* universal design - the kerb cut metaphor
+
+### Ergonomics
+peripherals, posture, stuff like this
+
+
+
+### Computers for older people
+usage related to socio-economic group, with wealth and education critical
+
+accessibility features:
+* sensory: visual (reduce width of field, color perceptions), audio (high freq hearing loss)
+* motor: slower motor task response times, no fine motor control
+* cognitive: decline in linguistic and reasoning ability, impairment of memory
+
+### Computers for kids
+* bold colors
+* large buttons and text
+
+### Web page guidelines
+do the research
+* are there local sites offering similar goods/services?
+* what are common design values and cahracteristics?
+
+use any local knowledge you can get
+
+test the design before deployment!
+
+#### Web Content Accessibility Guidelines (WCAG, W3C initiative)
+aims to provide guidelines, has a st of accessibility principles
+
+perceivable:
+1. provide text alternatives for any non-text content (like alt tag)
+2. provide alternatives for time-based media
+3. create content that can be presented in different ways without losing information/structure
+4. make it easier for users to see/hear content (including foreground and background separation)
+
+operable:
+1. make all functionality available from a keyboard
+2. provide users enough time to read and use content
+3. do not design content in a way that can cause seizures
+4. provide ways to help users navigate, find content, and determine where they are
+
+understandable & robust:
+1. make text content readable and understandable
+2. make web pages appear and operate in predictable ways
+3. help users avoid and correct mistakes
+4. maximize compatibility with current and future user agents, including assistive technologies
diff --git a/content/hci-notes/index.html b/content/hci-notes/index.html
@@ -1,137 +0,0 @@
-<html>
-<head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
- <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('pre.code').forEach(function(item) {
- hljs.highlightBlock(item)
- })
- });
- </script>
- <title>index</title>
-</head>
-<body>
-<style type="text/css">
-nav a {
- text-align: left;
-}
-nav #name {
- text-align: right;
- float: right;
- font-style: italic;
-}
-</style>
- <nav>
- <a href="index.html">Index</a>
- <span id="name">Alex Balgavy</span>
- </nav>
- <hr>
- <div class="content">
-
-<div id="Human Computer Interaction"><h1 id="Human Computer Interaction" class="header"><a href="#Human Computer Interaction">Human Computer Interaction</a></h1></div>
-<p>
-HCI is concerned with design, evaluation, implementation of interactive computer systems
-</p>
-
-<p>
-how people use software & computing devices. usability engineering:
-</p>
-<ul>
-<li>
-design
-
-<li>
-evaluation
-
-<li>
-implementation of interactive computing systems
-
-</ul>
-
-<p>
-why is it important? because sites have shitty UIs and UXs. and we've all had to use them. and it sucks.
-</p>
-
-<p>
-website metrics: volume of business, num of unique visitors, conversion rate from visitor to customer, loyalty rate, bounce rate, pages viewed per visit
-</p>
-
-<p>
-business metrics: conversion rates, traffic numbers, user performance, target feature usage
-</p>
-
-<p>
-Table of contents:
-</p>
-<ol>
-<li>
-<a href="user-experience-elements.html#User experience (UX) elements">User experience (UX) elements</a>
-
-<li>
-<a href="norman's-design-principles.html#Norman's design principles">Norman's design principles</a>
-
-<li>
-<a href="usability-principles.html#Usability principles">Usability principles</a>
-
-<li>
-<a href="prototypes.html#Prototypes">Prototypes</a>
-
-<ul>
-<li>
-<a href="prototypes.html#Prototypes-Designing the prototype">Designing the prototype</a>
-
-</ul>
-<li>
-<a href="personas,-scenarios,-and-use-cases.html#Personas, Scenarios, and use cases">Personas, Scenarios, and use cases</a>
-
-<ul>
-<li>
-<a href="personas,-scenarios,-and-use-cases.html#Personas, Scenarios, and use cases-Goal directed design">Goal directed design</a>
-
-<li>
-<a href="personas,-scenarios,-and-use-cases.html#Personas, Scenarios, and use cases-Personas - archetypal users">Personas - archetypal users</a>
-
-<li>
-<a href="personas,-scenarios,-and-use-cases.html#Personas, Scenarios, and use cases-Scenarios">Scenarios</a>
-
-<li>
-<a href="personas,-scenarios,-and-use-cases.html#Personas, Scenarios, and use cases-Design Requirements & principles">Design Requirements & principles</a>
-
-<li>
-<a href="personas,-scenarios,-and-use-cases.html#Personas, Scenarios, and use cases-Use Case">Use Case</a>
-
-</ul>
-<li>
-<a href="webpage-design.html#Webpage design">Webpage design</a>
-
-<li>
-<a href="designing-for-differences.html#Designing for differences">Designing for differences</a>
-
-<ul>
-<li>
-<a href="designing-for-differences.html#Designing for differences-Ergonomics">Ergonomics</a>
-
-<li>
-<a href="designing-for-differences.html#Designing for differences-Computers for older people">Computers for older people</a>
-
-<li>
-<a href="designing-for-differences.html#Designing for differences-Computers for kids">Computers for kids</a>
-
-<li>
-<a href="designing-for-differences.html#Designing for differences-Web page guidelines">Web page guidelines</a>
-
-<ul>
-<li>
-<a href="designing-for-differences.html#Designing for differences-Web page guidelines-Web Content Accessibility Guidelines (WCAG, W3C initiative)">Web Content Accessibility Guidelines (WCAG, W3C initiative)</a>
-
-</ul>
-</ul>
-</ol>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/next-section.html b/content/hci-notes/next-section.html
@@ -1,19 +0,0 @@
-<html>
-<head>
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <title>next-section</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-</head>
-<body>
- <a href="index.html">Index</a>
- <hr>
- <div class="content">
-
-<div id="Next section"><h2 id="Next section" class="header"><a href="#Next section">Next section</a></h2></div>
-<p>
-Slides weren't up for this yet
-</p>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/norman's-design-principles.html b/content/hci-notes/norman's-design-principles.html
@@ -1,116 +0,0 @@
-<html>
-<head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
- <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('pre.code').forEach(function(item) {
- hljs.highlightBlock(item)
- })
- });
- </script>
- <title>norman's-design-principles</title>
-</head>
-<body>
-<style type="text/css">
-nav a {
- text-align: left;
-}
-nav #name {
- text-align: right;
- float: right;
- font-style: italic;
-}
-</style>
- <nav>
- <a href="index.html">Index</a>
- <span id="name">Alex Balgavy</span>
- </nav>
- <hr>
- <div class="content">
-
-<div id="Norman's design principles"><h2 id="Norman's design principles" class="header"><a href="#Norman's design principles">Norman's design principles</a></h2></div>
-<ol>
-<li>
-Visibility
-
-<ul>
-<li>
-if more stuff is visible, the user's more likely to know what to do next
-
-<li>
-when functions are hidden, it makes them more difficult to find and know how to use
-
-<li>
-sometimes things are designed so we can't see how to make them work
-
-<li>
-need to see the state of a device and possible actions
-
-<li>
-so hide functions that are not immediately needed
-
-</ul>
-<li>
-Feedback
-
-<ul>
-<li>
-send back info about what actions have been done, what's been accomplished
-
-<li>
-audio, tactile, verbal, etc.
-
-</ul>
-<li>
-Constraints
-
-<ul>
-<li>
-restrict possible user actions
-
-</ul>
-<li>
-Mapping
-
-<ul>
-<li>
-relationship between controls and their effects
-
-<li>
-e.g. up/down arrows to represent up/down movement of cursor
-
-</ul>
-<li>
-Consistency
-
-<ul>
-<li>
-similar concepts expressed in similar ways. use conventions.
-
-<li>
-follows rules - aesthetic, functional, layout
-
-</ul>
-<li>
-Affordance
-
-<ul>
-<li>
-perceived/actual properties of an object that helps to figure out how it works
-
-<li>
-e.g. mouse button invites pushing
-
-<li>
-'afford': 'give a clue'
-
-</ul>
-</ol>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/normans-design-principles.md b/content/hci-notes/normans-design-principles.md
@@ -0,0 +1,27 @@
++++
+title = "Norman's design principles"
++++
+
+## Norman's design principles
+1. Visibility
+ * if more stuff is visible, the user's more likely to know what to do next
+ * when functions are hidden, it makes them more difficult to find and know how to use
+ * sometimes things are designed so we can't see how to make them work
+ * need to see the state of a device and possible actions
+ * so hide functions that are not immediately needed
+2. Feedback
+ * send back info about what actions have been done, what's been accomplished
+ * audio, tactile, verbal, etc.
+3. Constraints
+ * restrict possible user actions
+4. Mapping
+ * relationship between controls and their effects
+ * e.g. up/down arrows to represent up/down movement of cursor
+5. Consistency
+ * similar concepts expressed in similar ways. use conventions.
+ * follows rules - aesthetic, functional, layout
+6. Affordance
+ * perceived/actual properties of an object that helps to figure out how it works
+ * e.g. mouse button invites pushing
+ * 'afford': 'give a clue'
+
diff --git a/content/hci-notes/personas,-scenarios,-and-use-cases.html b/content/hci-notes/personas,-scenarios,-and-use-cases.html
@@ -1,322 +0,0 @@
-<html>
-<head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
- <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('pre.code').forEach(function(item) {
- hljs.highlightBlock(item)
- })
- });
- </script>
- <title>personas,-scenarios,-and-use-cases</title>
-</head>
-<body>
-<style type="text/css">
-nav a {
- text-align: left;
-}
-nav #name {
- text-align: right;
- float: right;
- font-style: italic;
-}
-</style>
- <nav>
- <a href="index.html">Index</a>
- <span id="name">Alex Balgavy</span>
- </nav>
- <hr>
- <div class="content">
-
-<div id="Personas, Scenarios, and use cases"><h2 id="Personas, Scenarios, and use cases" class="header"><a href="#Personas, Scenarios, and use cases">Personas, Scenarios, and use cases</a></h2></div>
-<div id="Personas, Scenarios, and use cases-Goal directed design"><h3 id="Goal directed design" class="header"><a href="#Personas, Scenarios, and use cases-Goal directed design">Goal directed design</a></h3></div>
-<p>
-Design activity that links requirements to implementation (what do you need, why? what are you solving?)
-</p>
-
-<p>
-Generally, you have marketers, decision makers, and developers making decisions, and the result is shit.
-What's missing is the user's perspective: goals, actions, motivations, responses, and the context (how it fits into the user's wider activities)
-</p>
-
-<p>
-Design interactions - mental models
-The user's mental model is not the implementation model, the user has to adapt to understand the implementation.
-It's better if design model is good fit for user model (unless it hides important features)
-</p>
-
-<p>
-Steps in design process:
-</p>
-<ul>
-<li>
-Research users: observation, interview, etc
-
-<li>
-Discover non-user goals (business, technical, whatever else)
-
-<li>
-Develop personas
-
-<li>
-Use personas in scenarios to establish design requirements
-
-<li>
-Find the functional requirements - use cases
-
-</ul>
-
-<p>
-Users react to a product on 3 levels:
-</p>
-<ul>
-<li>
-Visceral - the user's <em>immediate</em> reaction before even using the product, should trigger emotional responses that are appropriate
-
-<li>
-Behavioural - we need design that fits where the user currently is with knowledge, assumptions, and mental models
-
-<li>
-Reflective - integrating product and its values into wider life, and if done well, you get brand loyalty
-
-</ul>
-
-<p>
-User goals:
-</p>
-<ul>
-<li>
-Experience: how the user wants to feel (visceral)
-
-<li>
-End goals: what the user wants to do
-
-<li>
-Life goals: who the user wants to be
-
-</ul>
-
-<p>
-Non-user goals:
-</p>
-<ul>
-<li>
-Customer goals (the customer is <em>not</em> the user, like corporate IT buyers)
-
-<li>
-Business/organisational goals (increasing profit, market share, reducing costs, increase QOS)
-
-<li>
-Technical goals (maintaining security, cross-platformness, backwards compatibility)
-
-</ul>
-
-<p>
-User stories & goals:
-</p>
-<ul>
-<li>
-As a <type of user> I want <some goal> so that <some reason>
-
-<li>
-As a <persona> I want <action> so that <expected outcome>
-
-<li>
-When <situation> I want to <motivation> so I can <expected outcome>
-
-</ul>
-
-<div id="Personas, Scenarios, and use cases-Personas - archetypal users"><h3 id="Personas - archetypal users" class="header"><a href="#Personas, Scenarios, and use cases-Personas - archetypal users">Personas - archetypal users</a></h3></div>
-<p>
-Modelling users: identify major goals and behaviours, then build models of idealised users ("personas")
-</p>
-
-<p>
-There isn't an 'average user', you use personas that capture important characteristics of users.
-</p>
-
-<p>
-Persona:
-</p>
-<ul>
-<li>
-Demographic details: name, occupation, age
-
-<li>
-Personal details: short biographical summary
-
-<li>
-Attitudinal details: mental model, pain points, feelings about stuff that has to be done
-
-<li>
-Goals and motivations: for using the product (maybe for life in general™)
-
-<li>
-Behavioural details: how they act when using the product
-
-<li>
-generally about half a page in length
-
-</ul>
-
-<p>
-Why?
-</p>
-<ul>
-<li>
-Coordination, getting a shared vision of the users and market
-
-<li>
-Communication between devs, designers, marketers, other stakeholders
-
-<li>
-Determining functionality and behaviour o product
-
-<li>
-Help design decisions without testing on users
-
-<li>
-they work. you don't focus on edge cases but on normal use, avoids the self-referential user (developers thinking users are like them), and avoids the elastic user (cuz users won't bend to your will, they don't give a shit)
-
-</ul>
-
-<div id="Personas, Scenarios, and use cases-Scenarios"><h3 id="Scenarios" class="header"><a href="#Personas, Scenarios, and use cases-Scenarios">Scenarios</a></h3></div>
-<p>
-Informal narrative descriptions:
-</p>
-<ul>
-<li>
-describe human activities in short stories
-
-<li>
-You can explore needs, requirements, contexts
-
-<li>
-Don't explicitly mention tech
-
-<li>
-Are written in the users' language (well, english in our case)
-
-<li>
-Have varying levels of detail
-
-<li>
-You focus on the user's perspective
-
-</ul>
-
-<div id="Personas, Scenarios, and use cases-Design Requirements & principles"><h3 id="Design Requirements & principles" class="header"><a href="#Personas, Scenarios, and use cases-Design Requirements & principles">Design Requirements & principles</a></h3></div>
-<ol>
-<li>
-Establish needs & goals
-
-<ul>
-<li>
-what info do users need?
-
-<li>
-what capabilities?
-
-<li>
-what goals must be achieved (business, technical)?
-
-</ul>
-<li>
-Brainstorm
-
-<ul>
-<li>
-time-limited, like half an hour
-
-<li>
-write them <em>all</em> down
-
-<li>
-no criticism allowed
-
-<li>
-ideas are culled and refined later
-
-</ul>
-</ol>
-
-<p>
-Don't make the user feel stupid.
-Define what the product will do before designing how.
-</p>
-
-<div id="Personas, Scenarios, and use cases-Use Case"><h3 id="Use Case" class="header"><a href="#Personas, Scenarios, and use cases-Use Case">Use Case</a></h3></div>
-<p>
-Focus on user-system interaction instead of user's task itself.
-Describe processes as text or use case diagram
-</p>
-
-<p>
-structure:
-</p>
-<ul>
-<li>
-users are actors - user types or categories
-
-<li>
-use case consists of:
-
-<ul>
-<li>
-header:
-
-<ul>
-<li>
-name of use case
-
-<li>
-goal of use case
-
-<li>
-scope and level use case is covering
-
-<li>
-preconditions
-
-<li>
-success/failure conditions
-
-<li>
-trigger that starts use case
-
-<li>
-notes on performance, frequency, etc.
-
-</ul>
-<li>
-steps (each assumed to be successful):
-
-<ul>
-<li>
-description narrative
-
-<li>
-variations
-
-<li>
-notes
-
-</ul>
-<li>
-exceptions
-
-<ul>
-<li>
-notation is per step
-
-</ul>
-</ul>
-</ul>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/personas-scenarios-and-use-cases.md b/content/hci-notes/personas-scenarios-and-use-cases.md
@@ -0,0 +1,106 @@
++++
+title = 'Personas, Scenarios, and use cases'
++++
+
+## Personas, Scenarios, and use cases
+### Goal directed design
+Design activity that links requirements to implementation (what do you need, why? what are you solving?)
+
+Generally, you have marketers, decision makers, and developers making decisions, and the result is shit.
+What's missing is the user's perspective: goals, actions, motivations, responses, and the context (how it fits into the user's wider activities)
+
+Design interactions - mental models
+The user's mental model is not the implementation model, the user has to adapt to understand the implementation.
+It's better if design model is good fit for user model (unless it hides important features)
+
+Steps in design process:
+* Research users: observation, interview, etc
+* Discover non-user goals (business, technical, whatever else)
+* Develop personas
+* Use personas in scenarios to establish design requirements
+* Find the functional requirements - use cases
+
+Users react to a product on 3 levels:
+* Visceral - the user's _immediate_ reaction before even using the product, should trigger emotional responses that are appropriate
+* Behavioural - we need design that fits where the user currently is with knowledge, assumptions, and mental models
+* Reflective - integrating product and its values into wider life, and if done well, you get brand loyalty
+
+User goals:
+* Experience: how the user wants to feel (visceral)
+* End goals: what the user wants to do
+* Life goals: who the user wants to be
+
+Non-user goals:
+* Customer goals (the customer is _not_ the user, like corporate IT buyers)
+* Business/organisational goals (increasing profit, market share, reducing costs, increase QOS)
+* Technical goals (maintaining security, cross-platformness, backwards compatibility)
+
+User stories & goals:
+* As a <type of user> I want <some goal> so that <some reason>
+* As a <persona> I want <action> so that <expected outcome>
+* When <situation> I want to <motivation> so I can <expected outcome>
+
+### Personas - archetypal users
+Modelling users: identify major goals and behaviours, then build models of idealised users ("personas")
+
+There isn't an 'average user', you use personas that capture important characteristics of users.
+
+Persona:
+* Demographic details: name, occupation, age
+* Personal details: short biographical summary
+* Attitudinal details: mental model, pain points, feelings about stuff that has to be done
+* Goals and motivations: for using the product (maybe for life in general™)
+* Behavioural details: how they act when using the product
+* generally about half a page in length
+
+Why?
+* Coordination, getting a shared vision of the users and market
+* Communication between devs, designers, marketers, other stakeholders
+* Determining functionality and behaviour o product
+* Help design decisions without testing on users
+* they work. you don't focus on edge cases but on normal use, avoids the self-referential user (developers thinking users are like them), and avoids the elastic user (cuz users won't bend to your will, they don't give a shit)
+
+### Scenarios
+Informal narrative descriptions:
+* describe human activities in short stories
+* You can explore needs, requirements, contexts
+* Don't explicitly mention tech
+* Are written in the users' language (well, english in our case)
+* Have varying levels of detail
+* You focus on the user's perspective
+
+### Design Requirements & principles
+1. Establish needs & goals
+ * what info do users need?
+ * what capabilities?
+ * what goals must be achieved (business, technical)?
+2. Brainstorm
+ * time-limited, like half an hour
+ * write them _all_ down
+ * no criticism allowed
+ * ideas are culled and refined later
+
+Don't make the user feel stupid.
+Define what the product will do before designing how.
+
+### Use Case
+Focus on user-system interaction instead of user's task itself.
+Describe processes as text or use case diagram
+
+structure:
+* users are actors - user types or categories
+* use case consists of:
+ * header:
+ * name of use case
+ * goal of use case
+ * scope and level use case is covering
+ * preconditions
+ * success/failure conditions
+ * trigger that starts use case
+ * notes on performance, frequency, etc.
+ * steps (each assumed to be successful):
+ * description narrative
+ * variations
+ * notes
+ * exceptions
+ * notation is per step
diff --git a/content/hci-notes/prototypes.html b/content/hci-notes/prototypes.html
@@ -1,207 +0,0 @@
-<html>
-<head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
- <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('pre.code').forEach(function(item) {
- hljs.highlightBlock(item)
- })
- });
- </script>
- <title>prototypes</title>
-</head>
-<body>
-<style type="text/css">
-nav a {
- text-align: left;
-}
-nav #name {
- text-align: right;
- float: right;
- font-style: italic;
-}
-</style>
- <nav>
- <a href="index.html">Index</a>
- <span id="name">Alex Balgavy</span>
- </nav>
- <hr>
- <div class="content">
-
-<div id="Prototypes"><h2 id="Prototypes" class="header"><a href="#Prototypes">Prototypes</a></h2></div>
-<p>
-Prototype: representation of design before final version exists.
-Can be low fidelity to high fidelity media.
-</p>
-
-<p>
-options for prototypes: sketches, diagrams, frameworks, hand made models, graphics, virtual models, role play, video, etc.
-</p>
-
-<p>
-why?
-to evoke reactions from stakeholders (find out what to add/change), to test feasibility, choose between alternatives, etc.
-it's faster than changing the real thing.
-</p>
-
-<p>
-Waterfall model
-</p>
-<ul>
-<li>
-long lifecycle, step by step
-
-<li>
-does not work
-
-</ul>
-
-<p>
-Iterative prototyping
-</p>
-<ul>
-<li>
-more like an agile method
-
-<li>
-each iteration is short (2-6 weeks)
-
-<li>
-do minimum necessary
-
-<li>
-after every iteration you get feedback
-
-<li>
-system grows incrementally
-
-</ul>
-
-<p>
-quality is a function of num of iterations & refinements before production.
-fail early and often.
-</p>
-
-<p>
-3 stages of prototyping:
-</p>
-
-<p>
-<img src="img/3-stages-prototyping.png" alt="3 stages of prototyping graph" />
-</p>
-
-<div id="Prototypes-Designing the prototype"><h3 id="Designing the prototype" class="header"><a href="#Prototypes-Designing the prototype">Designing the prototype</a></h3></div>
-<p>
-choose what to prototype for, identify measurable design goals
-</p>
-
-<p>
-Describe the user's journey:
-</p>
-<ul>
-<li>
-Who is the user?
-
-<li>
-How do they discover the app/site?
-
-<ul>
-<li>
-let's assume for our project that they were recommended our app
-
-</ul>
-<li>
-How do they use it?
-
-<li>
-How do they benefit from it?
-
-</ul>
-
-<p>
-Aim to show why the app/site will work.
-</p>
-
-<p>
-Prototyping:
-</p>
-<ul>
-<li>
-Low fi (early stage)
-
-<ul>
-<li>
-Use whatever works (paper and pen, photo, video, whatever)
-
-<li>
-Paper prototypes: when you have many ideas, parts are unclear, basically if you're gonna throw away stuff
-
-</ul>
-<li>
-Medium fi
-
-<ul>
-<li>
-Don't add filler text
-
-<li>
-Wireframing: idea needs more detail than on paper, colors, clients need to see major design options
-
-<li>
-Mockups with wood, play doh, whatever. Just fake the design
-
-<li>
-Wizard of Oz: some aspects of interface are implemented, operation needs processing that's actually done by a human for now
-
-</ul>
-<li>
-High fi
-
-<ul>
-<li>
-Screen mockups (illustrator, photoshop, whatever)
-
-<li>
-Clickthroughs (slideshow type stuff)
-
-<li>
-Web tools (like Bootstrap)
-
-<li>
-Web prototypes
-
-<ul>
-<li>
-plain HTML/CSS
-
-<li>
-use when systems is intended to run on the web
-
-</ul>
-<li>
-Small screen prototypes
-
-<ul>
-<li>
-JS (all phones have a browser, JS has a lot of functionality)
-
-<li>
-can add events, interactions, etc.
-
-<li>
-you can use mobile emulators on desktop
-
-<li>
-but it's hard to prototype touch gestures (JS works decently)
-
-</ul>
-</ul>
-</ul>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/img/3-stages-prototyping.png b/content/hci-notes/prototypes/3-stages-prototyping.png
Binary files differ.
diff --git a/content/hci-notes/prototypes/index.md b/content/hci-notes/prototypes/index.md
@@ -0,0 +1,66 @@
++++
+title = 'Prototypes'
++++
+
+## Prototypes
+Prototype: representation of design before final version exists.
+Can be low fidelity to high fidelity media.
+
+options for prototypes: sketches, diagrams, frameworks, hand made models, graphics, virtual models, role play, video, etc.
+
+why?
+to evoke reactions from stakeholders (find out what to add/change), to test feasibility, choose between alternatives, etc.
+it's faster than changing the real thing.
+
+Waterfall model
+* long lifecycle, step by step
+* does not work
+
+Iterative prototyping
+* more like an agile method
+* each iteration is short (2-6 weeks)
+* do minimum necessary
+* after every iteration you get feedback
+* system grows incrementally
+
+quality is a function of num of iterations & refinements before production.
+fail early and often.
+
+3 stages of prototyping:
+
+
+
+### Designing the prototype
+choose what to prototype for, identify measurable design goals
+
+Describe the user's journey:
+* Who is the user?
+* How do they discover the app/site?
+ * let's assume for our project that they were recommended our app
+* How do they use it?
+* How do they benefit from it?
+
+Aim to show why the app/site will work.
+
+Prototyping:
+* Low fi (early stage)
+ * Use whatever works (paper and pen, photo, video, whatever)
+ * Paper prototypes: when you have many ideas, parts are unclear, basically if you're gonna throw away stuff
+* Medium fi
+ * Don't add filler text
+ * Wireframing: idea needs more detail than on paper, colors, clients need to see major design options
+ * Mockups with wood, play doh, whatever. Just fake the design
+ * Wizard of Oz: some aspects of interface are implemented, operation needs processing that's actually done by a human for now
+* High fi
+ * Screen mockups (illustrator, photoshop, whatever)
+ * Clickthroughs (slideshow type stuff)
+ * Web tools (like Bootstrap)
+ * Web prototypes
+ * plain HTML/CSS
+ * use when systems is intended to run on the web
+ * Small screen prototypes
+ * JS (all phones have a browser, JS has a lot of functionality)
+ * can add events, interactions, etc.
+ * you can use mobile emulators on desktop
+ * but it's hard to prototype touch gestures (JS works decently)
+
diff --git a/content/hci-notes/src/designing-for-differences.wiki b/content/hci-notes/src/designing-for-differences.wiki
@@ -1,61 +0,0 @@
-%template math
-== Designing for differences ==
-differences in:
-* demographics - gender, age, education, socio-economic status
-* culture - language, religion, ethnicity
-* cognitive style - personality type
-* disability - visual, motor, cognitive
-* experience - subject domain, systems
-
-how much should you tailor?
-* at this point you pretend that there's an average user, completely contradicting what was said a few lectures before
- * but now you do it because it's useful and keeps the range broad
-* specialised audience design - economics of markets, empathy with the users
-* universal design - the kerb cut metaphor
-
-=== Ergonomics ===
-peripherals, posture, stuff like this
-
-{{local:../img/ergonomic-keyboards.png|Ergonomic keyboard design}}
-
-=== Computers for older people ===
-usage related to socio-economic group, with wealth and education critical
-
-accessibility features:
-* sensory: visual (reduce width of field, color perceptions), audio (high freq hearing loss)
-* motor: slower motor task response times, no fine motor control
-* cognitive: decline in linguistic and reasoning ability, impairment of memory
-
-=== Computers for kids ===
-* bold colors
-* large buttons and text
-
-=== Web page guidelines ===
-do the research
-* are there local sites offering similar goods/services?
-* what are common design values and cahracteristics?
-
-use any local knowledge you can get
-
-test the design before deployment!
-
-==== Web Content Accessibility Guidelines (WCAG, W3C initiative) ====
-aims to provide guidelines, has a st of accessibility principles
-
-perceivable:
-1. provide text alternatives for any non-text content (like alt tag)
-2. provide alternatives for time-based media
-3. create content that can be presented in different ways without losing information/structure
-4. make it easier for users to see/hear content (including foreground and background separation)
-
-operable:
-1. make all functionality available from a keyboard
-2. provide users enough time to read and use content
-3. do not design content in a way that can cause seizures
-4. provide ways to help users navigate, find content, and determine where they are
-
-understandable & robust:
-1. make text content readable and understandable
-2. make web pages appear and operate in predictable ways
-3. help users avoid and correct mistakes
-4. maximize compatibility with current and future user agents, including assistive technologies
diff --git a/content/hci-notes/src/index.wiki b/content/hci-notes/src/index.wiki
@@ -1,37 +0,0 @@
-%template math
-%% let g:vimwiki_wikilocal_vars[1]['path_html'] = expand('%:p:h').'/../'
-%% let g:vimwiki_wikilocal_vars[1]['template_path'] = '/Users/alex/Dropbox/vimwiki/templates/'
-= Human Computer Interaction =
-HCI is concerned with design, evaluation, implementation of interactive computer systems
-
-how people use software & computing devices. usability engineering:
-* design
-* evaluation
-* implementation of interactive computing systems
-
-why is it important? because sites have shitty UIs and UXs. and we've all had to use them. and it sucks.
-
-website metrics: volume of business, num of unique visitors, conversion rate from visitor to customer, loyalty rate, bounce rate, pages viewed per visit
-
-business metrics: conversion rates, traffic numbers, user performance, target feature usage
-
-Table of contents:
-1. [[/user-experience-elements#User experience (UX) elements|User experience (UX) elements]]
-2. [[/norman's-design-principles#Norman's design principles|Norman's design principles]]
-3. [[/usability-principles#Usability principles|Usability principles]]
-4. [[/prototypes#Prototypes|Prototypes]]
- * [[/prototypes#Prototypes#Designing the prototype|Designing the prototype]]
-5. [[/personas,-scenarios,-and-use-cases#Personas, Scenarios, and use cases|Personas, Scenarios, and use cases]]
- * [[/personas,-scenarios,-and-use-cases#Personas, Scenarios, and use cases#Goal directed design|Goal directed design]]
- * [[/personas,-scenarios,-and-use-cases#Personas, Scenarios, and use cases#Personas - archetypal users|Personas - archetypal users]]
- * [[/personas,-scenarios,-and-use-cases#Personas, Scenarios, and use cases#Scenarios|Scenarios]]
- * [[/personas,-scenarios,-and-use-cases#Personas, Scenarios, and use cases#Design Requirements & principles|Design Requirements & principles]]
- * [[/personas,-scenarios,-and-use-cases#Personas, Scenarios, and use cases#Use Case|Use Case]]
-6. [[/webpage-design#Webpage design|Webpage design]]
-7. [[/designing-for-differences#Designing for differences|Designing for differences]]
- * [[/designing-for-differences#Designing for differences#Ergonomics|Ergonomics]]
- * [[/designing-for-differences#Designing for differences#Computers for older people|Computers for older people]]
- * [[/designing-for-differences#Designing for differences#Computers for kids|Computers for kids]]
- * [[/designing-for-differences#Designing for differences#Web page guidelines|Web page guidelines]]
- * [[/designing-for-differences#Designing for differences#Web page guidelines#Web Content Accessibility Guidelines (WCAG, W3C initiative)|Web Content Accessibility Guidelines (WCAG, W3C initiative)]]
-
diff --git a/content/hci-notes/src/next-section.wiki b/content/hci-notes/src/next-section.wiki
@@ -1,3 +0,0 @@
-== Next section ==
-Slides weren't up for this yet
-
diff --git a/content/hci-notes/src/norman's-design-principles.wiki b/content/hci-notes/src/norman's-design-principles.wiki
@@ -1,24 +0,0 @@
-%template math
-== Norman's design principles ==
-1. Visibility
- * if more stuff is visible, the user's more likely to know what to do next
- * when functions are hidden, it makes them more difficult to find and know how to use
- * sometimes things are designed so we can't see how to make them work
- * need to see the state of a device and possible actions
- * so hide functions that are not immediately needed
-2. Feedback
- * send back info about what actions have been done, what's been accomplished
- * audio, tactile, verbal, etc.
-3. Constraints
- * restrict possible user actions
-4. Mapping
- * relationship between controls and their effects
- * e.g. up/down arrows to represent up/down movement of cursor
-5. Consistency
- * similar concepts expressed in similar ways. use conventions.
- * follows rules - aesthetic, functional, layout
-6. Affordance
- * perceived/actual properties of an object that helps to figure out how it works
- * e.g. mouse button invites pushing
- * 'afford': 'give a clue'
-
diff --git a/content/hci-notes/src/personas,-scenarios,-and-use-cases.wiki b/content/hci-notes/src/personas,-scenarios,-and-use-cases.wiki
@@ -1,103 +0,0 @@
-%template math
-== Personas, Scenarios, and use cases ==
-=== Goal directed design ===
-Design activity that links requirements to implementation (what do you need, why? what are you solving?)
-
-Generally, you have marketers, decision makers, and developers making decisions, and the result is shit.
-What's missing is the user's perspective: goals, actions, motivations, responses, and the context (how it fits into the user's wider activities)
-
-Design interactions - mental models
-The user's mental model is not the implementation model, the user has to adapt to understand the implementation.
-It's better if design model is good fit for user model (unless it hides important features)
-
-Steps in design process:
-* Research users: observation, interview, etc
-* Discover non-user goals (business, technical, whatever else)
-* Develop personas
-* Use personas in scenarios to establish design requirements
-* Find the functional requirements - use cases
-
-Users react to a product on 3 levels:
-* Visceral - the user's _immediate_ reaction before even using the product, should trigger emotional responses that are appropriate
-* Behavioural - we need design that fits where the user currently is with knowledge, assumptions, and mental models
-* Reflective - integrating product and its values into wider life, and if done well, you get brand loyalty
-
-User goals:
-* Experience: how the user wants to feel (visceral)
-* End goals: what the user wants to do
-* Life goals: who the user wants to be
-
-Non-user goals:
-* Customer goals (the customer is _not_ the user, like corporate IT buyers)
-* Business/organisational goals (increasing profit, market share, reducing costs, increase QOS)
-* Technical goals (maintaining security, cross-platformness, backwards compatibility)
-
-User stories & goals:
-* As a <type of user> I want <some goal> so that <some reason>
-* As a <persona> I want <action> so that <expected outcome>
-* When <situation> I want to <motivation> so I can <expected outcome>
-
-=== Personas - archetypal users ===
-Modelling users: identify major goals and behaviours, then build models of idealised users ("personas")
-
-There isn't an 'average user', you use personas that capture important characteristics of users.
-
-Persona:
-* Demographic details: name, occupation, age
-* Personal details: short biographical summary
-* Attitudinal details: mental model, pain points, feelings about stuff that has to be done
-* Goals and motivations: for using the product (maybe for life in general™)
-* Behavioural details: how they act when using the product
-* generally about half a page in length
-
-Why?
-* Coordination, getting a shared vision of the users and market
-* Communication between devs, designers, marketers, other stakeholders
-* Determining functionality and behaviour o product
-* Help design decisions without testing on users
-* they work. you don't focus on edge cases but on normal use, avoids the self-referential user (developers thinking users are like them), and avoids the elastic user (cuz users won't bend to your will, they don't give a shit)
-
-=== Scenarios ===
-Informal narrative descriptions:
-* describe human activities in short stories
-* You can explore needs, requirements, contexts
-* Don't explicitly mention tech
-* Are written in the users' language (well, english in our case)
-* Have varying levels of detail
-* You focus on the user's perspective
-
-=== Design Requirements & principles ===
-1. Establish needs & goals
- * what info do users need?
- * what capabilities?
- * what goals must be achieved (business, technical)?
-2. Brainstorm
- * time-limited, like half an hour
- * write them _all_ down
- * no criticism allowed
- * ideas are culled and refined later
-
-Don't make the user feel stupid.
-Define what the product will do before designing how.
-
-=== Use Case ===
-Focus on user-system interaction instead of user's task itself.
-Describe processes as text or use case diagram
-
-structure:
-* users are actors - user types or categories
-* use case consists of:
- * header:
- * name of use case
- * goal of use case
- * scope and level use case is covering
- * preconditions
- * success/failure conditions
- * trigger that starts use case
- * notes on performance, frequency, etc.
- * steps (each assumed to be successful):
- * description narrative
- * variations
- * notes
- * exceptions
- * notation is per step
diff --git a/content/hci-notes/src/prototypes.wiki b/content/hci-notes/src/prototypes.wiki
@@ -1,63 +0,0 @@
-%template math
-== Prototypes ==
-Prototype: representation of design before final version exists.
-Can be low fidelity to high fidelity media.
-
-options for prototypes: sketches, diagrams, frameworks, hand made models, graphics, virtual models, role play, video, etc.
-
-why?
-to evoke reactions from stakeholders (find out what to add/change), to test feasibility, choose between alternatives, etc.
-it's faster than changing the real thing.
-
-Waterfall model
-* long lifecycle, step by step
-* does not work
-
-Iterative prototyping
-* more like an agile method
-* each iteration is short (2-6 weeks)
-* do minimum necessary
-* after every iteration you get feedback
-* system grows incrementally
-
-quality is a function of num of iterations & refinements before production.
-fail early and often.
-
-3 stages of prototyping:
-
-{{local:../img/3-stages-prototyping.png|3 stages of prototyping graph}}
-
-=== Designing the prototype ===
-choose what to prototype for, identify measurable design goals
-
-Describe the user's journey:
-* Who is the user?
-* How do they discover the app/site?
- * let's assume for our project that they were recommended our app
-* How do they use it?
-* How do they benefit from it?
-
-Aim to show why the app/site will work.
-
-Prototyping:
-* Low fi (early stage)
- * Use whatever works (paper and pen, photo, video, whatever)
- * Paper prototypes: when you have many ideas, parts are unclear, basically if you're gonna throw away stuff
-* Medium fi
- * Don't add filler text
- * Wireframing: idea needs more detail than on paper, colors, clients need to see major design options
- * Mockups with wood, play doh, whatever. Just fake the design
- * Wizard of Oz: some aspects of interface are implemented, operation needs processing that's actually done by a human for now
-* High fi
- * Screen mockups (illustrator, photoshop, whatever)
- * Clickthroughs (slideshow type stuff)
- * Web tools (like Bootstrap)
- * Web prototypes
- * plain HTML/CSS
- * use when systems is intended to run on the web
- * Small screen prototypes
- * JS (all phones have a browser, JS has a lot of functionality)
- * can add events, interactions, etc.
- * you can use mobile emulators on desktop
- * but it's hard to prototype touch gestures (JS works decently)
-
diff --git a/content/hci-notes/src/usability-principles.wiki b/content/hci-notes/src/usability-principles.wiki
@@ -1,32 +0,0 @@
-%template math
-== Usability principles ==
-Nielsen usability principles:
-1. Visibility of system status
- * always keep user informed about what's happening
- * like a progress bar
-2. Match between system and real world
- * speak the users' language
- * use words, phrases, concepts familiar to user
-3. User control and freedom
- * allow users to easily escape from places where they accidentally appeared
- * like 'emergency exits'
-4. Consistency and standards
- * don't make the user think
- * avoid making them wonder whether different shit is actually the same shit
-5. Help users recognise, diagnose, and recover from errors
- * write errors in plain language
- * suggest a way of solving it.
-6. Error prevention
- * prevent errors whenever possible
-7. Recognition is better than recall
- * make stuff recognisable
-8. Flexibility and efficiency of use
- * provide accelerators invisible to novices
- * give more experienced users more tools
-9. Aesthetic & minimalist design
- * don't include irrelevant or rarely needed information
- * *hide the stuff*
-10. Help and documentation
- * provide info that can be easily searched
- * give concrete steps that can be easily followed
-
diff --git a/content/hci-notes/src/user-experience-elements.wiki b/content/hci-notes/src/user-experience-elements.wiki
@@ -1,38 +0,0 @@
-%template math
-== User experience (UX) elements ==
-* form: graphic design, product design
-* content: information architecture, audio-visual, text
-* behaviour: interaction design observation
-
-UX deliverables:
-* analysis & research: personas, qualitative user research/reports, user stories, competitive analysis, scorecards
-* design: functional specs, flow diagrams, UI specs
-* prototypes: clickable prototypes, mockups
-* visual design: polished design & layout, icons & graphic things
-* technical communications: web content, help, guides, videos, localization
-
-Terms of interaction:
-* domain: area of work under study (like graphic design)
-* goal: what you want to achieve
-* task: how you go about doing it, in terms of operations/actions
-
-gulf of execution: user's formulation of actions ≠ actions allowed by the system
-gulf of evaluation: user's expectation of changed system state ≠ actual presentation of that state
-
-human errors:
-* slip: incorrect action (need better interface design)
-* mistake: may not have the right goal (need better understanding of system)
-
-goals:
-* efficiency/productivity? effective learning?
-* usability goals: meeting specific usability criteria
- * effectiveness
- * efficiency (minimal steps, simple)
- * safety (does the system prevent users from fuckin up?)
- * learnability: people are impatient, manuals are tedious, nobody wants to fuckin do it. they should be able to learn the system in under 10 minutes.
- * utility: the extent to which system provides functionality that user needs
- * memorability: meaningful icons, command names, menus, so that the user can remember shit without always having to go back to the manual
-* user experience goalz: develop the quality of the user experience (a e s t h e t i c, games)
- * design isn't just about efficiency and productivity
- * the point is, do you feel nice and warm inside while using the system?
-
diff --git a/content/hci-notes/src/webpage-design.wiki b/content/hci-notes/src/webpage-design.wiki
@@ -1,34 +0,0 @@
-%template math
-== Webpage design ==
-people rarely read websites, and they teleport from search engines to any page.
-so any page should be a plausible starting point.
-people have a goal on the page, they don't give a fuck about how beautiful it is (unless it's so ugly that it's unusable).
-also, they hate scrolling when they're looking for something. users are lazy.
-
-people ignore banners, image carousels, anything that resembles advertising.
-
-guidelines:
-* don't break conventions
-* create visual hierarchies and structure
-* make obvious what's clickable
-* always make a short summary, people are lazy
-
-navigation:
-* make it clear where people are & where they can go
-* information must be available everywhere
-
-Menus:
-* desktop
- * put them across the top or on the left
- * don't use hidden navigation
-* mobile
- * if only few items, put them at the top
- * always show _most important_ items
- * provide support to help people find the hamburger
-
-alignment:
-* text: depending on language, most of the time left
-* names: make scanning for surnames easy
-* numbers: align decimal points, or right-align integers. depends on purpose.
-
-use whitespace smartly, to delineate/separate/structure, but also to highlight.
diff --git a/content/hci-notes/style.css b/content/hci-notes/style.css
@@ -1,38 +0,0 @@
-@charset 'UTF-8';
-
-body {
- margin: 0px;
- padding: 1em;
- background: #f3f2ed;
- font-family: 'Lato', sans-serif;
- font-size: 12pt;
- font-weight: 300;
- color: #8A8A8A;
- padding-left: 50px;
- line-height: 1.5;
-}
-h1 {
- margin: 0px;
- padding: 0px;
- font-weight: 300;
- text-align: center;
-}
-ul.toc li {
- margin: 8px 0;
-}
-h3.name {
- font-style: italic;
- text-align: center;
- font-weight: 300;
- font-size: 20px;
-}
-a {
- color: #D1551F;
- }
-a:hover {
- color: #AF440F;
-}
- strong {
- font-weight: 700;
- color: #2A2A2A;
- }
diff --git a/content/hci-notes/usability-principles.html b/content/hci-notes/usability-principles.html
@@ -1,148 +0,0 @@
-<html>
-<head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
- <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('pre.code').forEach(function(item) {
- hljs.highlightBlock(item)
- })
- });
- </script>
- <title>usability-principles</title>
-</head>
-<body>
-<style type="text/css">
-nav a {
- text-align: left;
-}
-nav #name {
- text-align: right;
- float: right;
- font-style: italic;
-}
-</style>
- <nav>
- <a href="index.html">Index</a>
- <span id="name">Alex Balgavy</span>
- </nav>
- <hr>
- <div class="content">
-
-<div id="Usability principles"><h2 id="Usability principles" class="header"><a href="#Usability principles">Usability principles</a></h2></div>
-<p>
-Nielsen usability principles:
-</p>
-<ol>
-<li>
-Visibility of system status
-
-<ul>
-<li>
-always keep user informed about what's happening
-
-<li>
-like a progress bar
-
-</ul>
-<li>
-Match between system and real world
-
-<ul>
-<li>
-speak the users' language
-
-<li>
-use words, phrases, concepts familiar to user
-
-</ul>
-<li>
-User control and freedom
-
-<ul>
-<li>
-allow users to easily escape from places where they accidentally appeared
-
-<li>
-like 'emergency exits'
-
-</ul>
-<li>
-Consistency and standards
-
-<ul>
-<li>
-don't make the user think
-
-<li>
-avoid making them wonder whether different shit is actually the same shit
-
-</ul>
-<li>
-Help users recognise, diagnose, and recover from errors
-
-<ul>
-<li>
-write errors in plain language
-
-<li>
-suggest a way of solving it.
-
-</ul>
-<li>
-Error prevention
-
-<ul>
-<li>
-prevent errors whenever possible
-
-</ul>
-<li>
-Recognition is better than recall
-
-<ul>
-<li>
-make stuff recognisable
-
-</ul>
-<li>
-Flexibility and efficiency of use
-
-<ul>
-<li>
-provide accelerators invisible to novices
-
-<li>
-give more experienced users more tools
-
-</ul>
-<li>
-Aesthetic & minimalist design
-
-<ul>
-<li>
-don't include irrelevant or rarely needed information
-
-<li>
-<span id="Usability principles-hide the stuff"></span><strong id="hide the stuff">hide the stuff</strong>
-
-</ul>
-<li>
-Help and documentation
-
-<ul>
-<li>
-provide info that can be easily searched
-
-<li>
-give concrete steps that can be easily followed
-
-</ul>
-</ol>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/usability-principles.md b/content/hci-notes/usability-principles.md
@@ -0,0 +1,35 @@
++++
+title = 'Usability principles'
++++
+
+## Usability principles
+Nielsen usability principles:
+1. Visibility of system status
+ * always keep user informed about what's happening
+ * like a progress bar
+2. Match between system and real world
+ * speak the users' language
+ * use words, phrases, concepts familiar to user
+3. User control and freedom
+ * allow users to easily escape from places where they accidentally appeared
+ * like 'emergency exits'
+4. Consistency and standards
+ * don't make the user think
+ * avoid making them wonder whether different shit is actually the same shit
+5. Help users recognise, diagnose, and recover from errors
+ * write errors in plain language
+ * suggest a way of solving it.
+6. Error prevention
+ * prevent errors whenever possible
+7. Recognition is better than recall
+ * make stuff recognisable
+8. Flexibility and efficiency of use
+ * provide accelerators invisible to novices
+ * give more experienced users more tools
+9. Aesthetic & minimalist design
+ * don't include irrelevant or rarely needed information
+ * *hide the stuff*
+10. Help and documentation
+ * provide info that can be easily searched
+ * give concrete steps that can be easily followed
+
diff --git a/content/hci-notes/user-experience-elements.html b/content/hci-notes/user-experience-elements.html
@@ -1,146 +0,0 @@
-<html>
-<head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
- <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('pre.code').forEach(function(item) {
- hljs.highlightBlock(item)
- })
- });
- </script>
- <title>user-experience-elements</title>
-</head>
-<body>
-<style type="text/css">
-nav a {
- text-align: left;
-}
-nav #name {
- text-align: right;
- float: right;
- font-style: italic;
-}
-</style>
- <nav>
- <a href="index.html">Index</a>
- <span id="name">Alex Balgavy</span>
- </nav>
- <hr>
- <div class="content">
-
-<div id="User experience (UX) elements"><h2 id="User experience (UX) elements" class="header"><a href="#User experience (UX) elements">User experience (UX) elements</a></h2></div>
-<ul>
-<li>
-form: graphic design, product design
-
-<li>
-content: information architecture, audio-visual, text
-
-<li>
-behaviour: interaction design observation
-
-</ul>
-
-<p>
-UX deliverables:
-</p>
-<ul>
-<li>
-analysis & research: personas, qualitative user research/reports, user stories, competitive analysis, scorecards
-
-<li>
-design: functional specs, flow diagrams, UI specs
-
-<li>
-prototypes: clickable prototypes, mockups
-
-<li>
-visual design: polished design & layout, icons & graphic things
-
-<li>
-technical communications: web content, help, guides, videos, localization
-
-</ul>
-
-<p>
-Terms of interaction:
-</p>
-<ul>
-<li>
-domain: area of work under study (like graphic design)
-
-<li>
-goal: what you want to achieve
-
-<li>
-task: how you go about doing it, in terms of operations/actions
-
-</ul>
-
-<p>
-gulf of execution: user's formulation of actions ≠ actions allowed by the system
-gulf of evaluation: user's expectation of changed system state ≠ actual presentation of that state
-</p>
-
-<p>
-human errors:
-</p>
-<ul>
-<li>
-slip: incorrect action (need better interface design)
-
-<li>
-mistake: may not have the right goal (need better understanding of system)
-
-</ul>
-
-<p>
-goals:
-</p>
-<ul>
-<li>
-efficiency/productivity? effective learning?
-
-<li>
-usability goals: meeting specific usability criteria
-
-<ul>
-<li>
-effectiveness
-
-<li>
-efficiency (minimal steps, simple)
-
-<li>
-safety (does the system prevent users from fuckin up?)
-
-<li>
-learnability: people are impatient, manuals are tedious, nobody wants to fuckin do it. they should be able to learn the system in under 10 minutes.
-
-<li>
-utility: the extent to which system provides functionality that user needs
-
-<li>
-memorability: meaningful icons, command names, menus, so that the user can remember shit without always having to go back to the manual
-
-</ul>
-<li>
-user experience goalz: develop the quality of the user experience (a e s t h e t i c, games)
-
-<ul>
-<li>
-design isn't just about efficiency and productivity
-
-<li>
-the point is, do you feel nice and warm inside while using the system?
-
-</ul>
-</ul>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/user-experience-elements.md b/content/hci-notes/user-experience-elements.md
@@ -0,0 +1,41 @@
++++
+title = 'User experience (UX) elements'
++++
+
+## User experience (UX) elements
+* form: graphic design, product design
+* content: information architecture, audio-visual, text
+* behaviour: interaction design observation
+
+UX deliverables:
+* analysis & research: personas, qualitative user research/reports, user stories, competitive analysis, scorecards
+* design: functional specs, flow diagrams, UI specs
+* prototypes: clickable prototypes, mockups
+* visual design: polished design & layout, icons & graphic things
+* technical communications: web content, help, guides, videos, localization
+
+Terms of interaction:
+* domain: area of work under study (like graphic design)
+* goal: what you want to achieve
+* task: how you go about doing it, in terms of operations/actions
+
+gulf of execution: user's formulation of actions ≠ actions allowed by the system
+gulf of evaluation: user's expectation of changed system state ≠ actual presentation of that state
+
+human errors:
+* slip: incorrect action (need better interface design)
+* mistake: may not have the right goal (need better understanding of system)
+
+goals:
+* efficiency/productivity? effective learning?
+* usability goals: meeting specific usability criteria
+ * effectiveness
+ * efficiency (minimal steps, simple)
+ * safety (does the system prevent users from fuckin up?)
+ * learnability: people are impatient, manuals are tedious, nobody wants to fuckin do it. they should be able to learn the system in under 10 minutes.
+ * utility: the extent to which system provides functionality that user needs
+ * memorability: meaningful icons, command names, menus, so that the user can remember shit without always having to go back to the manual
+* user experience goalz: develop the quality of the user experience (a e s t h e t i c, games)
+ * design isn't just about efficiency and productivity
+ * the point is, do you feel nice and warm inside while using the system?
+
diff --git a/content/hci-notes/webpage-design.html b/content/hci-notes/webpage-design.html
@@ -1,129 +0,0 @@
-<html>
-<head>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
- <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
- <link rel="Stylesheet" type="text/css" href="style.css" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- document.querySelectorAll('pre.code').forEach(function(item) {
- hljs.highlightBlock(item)
- })
- });
- </script>
- <title>webpage-design</title>
-</head>
-<body>
-<style type="text/css">
-nav a {
- text-align: left;
-}
-nav #name {
- text-align: right;
- float: right;
- font-style: italic;
-}
-</style>
- <nav>
- <a href="index.html">Index</a>
- <span id="name">Alex Balgavy</span>
- </nav>
- <hr>
- <div class="content">
-
-<div id="Webpage design"><h2 id="Webpage design" class="header"><a href="#Webpage design">Webpage design</a></h2></div>
-<p>
-people rarely read websites, and they teleport from search engines to any page.
-so any page should be a plausible starting point.
-people have a goal on the page, they don't give a fuck about how beautiful it is (unless it's so ugly that it's unusable).
-also, they hate scrolling when they're looking for something. users are lazy.
-</p>
-
-<p>
-people ignore banners, image carousels, anything that resembles advertising.
-</p>
-
-<p>
-guidelines:
-</p>
-<ul>
-<li>
-don't break conventions
-
-<li>
-create visual hierarchies and structure
-
-<li>
-make obvious what's clickable
-
-<li>
-always make a short summary, people are lazy
-
-</ul>
-
-<p>
-navigation:
-</p>
-<ul>
-<li>
-make it clear where people are & where they can go
-
-<li>
-information must be available everywhere
-
-</ul>
-
-<p>
-Menus:
-</p>
-<ul>
-<li>
-desktop
-
-<ul>
-<li>
-put them across the top or on the left
-
-<li>
-don't use hidden navigation
-
-</ul>
-<li>
-mobile
-
-<ul>
-<li>
-if only few items, put them at the top
-
-<li>
-always show <em>most important</em> items
-
-<li>
-provide support to help people find the hamburger
-
-</ul>
-</ul>
-
-<p>
-alignment:
-</p>
-<ul>
-<li>
-text: depending on language, most of the time left
-
-<li>
-names: make scanning for surnames easy
-
-<li>
-numbers: align decimal points, or right-align integers. depends on purpose.
-
-</ul>
-
-<p>
-use whitespace smartly, to delineate/separate/structure, but also to highlight.
-</p>
-
- </div>
-</body>
-</html>
diff --git a/content/hci-notes/webpage-design.md b/content/hci-notes/webpage-design.md
@@ -0,0 +1,37 @@
++++
+title = 'Webpage design'
++++
+
+## Webpage design
+people rarely read websites, and they teleport from search engines to any page.
+so any page should be a plausible starting point.
+people have a goal on the page, they don't give a fuck about how beautiful it is (unless it's so ugly that it's unusable).
+also, they hate scrolling when they're looking for something. users are lazy.
+
+people ignore banners, image carousels, anything that resembles advertising.
+
+guidelines:
+* don't break conventions
+* create visual hierarchies and structure
+* make obvious what's clickable
+* always make a short summary, people are lazy
+
+navigation:
+* make it clear where people are & where they can go
+* information must be available everywhere
+
+Menus:
+* desktop
+ * put them across the top or on the left
+ * don't use hidden navigation
+* mobile
+ * if only few items, put them at the top
+ * always show _most important_ items
+ * provide support to help people find the hamburger
+
+alignment:
+* text: depending on language, most of the time left
+* names: make scanning for surnames easy
+* numbers: align decimal points, or right-align integers. depends on purpose.
+
+use whitespace smartly, to delineate/separate/structure, but also to highlight.
