designing-for-differences.html (4913B)
1 <html> 2 <head> 3 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> 4 <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css"> 6 <link rel="Stylesheet" type="text/css" href="style.css" /> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <script> 9 document.addEventListener('DOMContentLoaded', function() { 10 document.querySelectorAll('pre.code').forEach(function(item) { 11 hljs.highlightBlock(item) 12 }) 13 }); 14 </script> 15 <title>designing-for-differences</title> 16 </head> 17 <body> 18 <style type="text/css"> 19 nav a { 20 text-align: left; 21 } 22 nav #name { 23 text-align: right; 24 float: right; 25 font-style: italic; 26 } 27 </style> 28 <nav> 29 <a href="index.html">Index</a> 30 <span id="name">Alex Balgavy</span> 31 </nav> 32 <hr> 33 <div class="content"> 34 35 <div id="Designing for differences"><h2 id="Designing for differences" class="header"><a href="#Designing for differences">Designing for differences</a></h2></div> 36 <p> 37 differences in: 38 </p> 39 <ul> 40 <li> 41 demographics - gender, age, education, socio-economic status 42 43 <li> 44 culture - language, religion, ethnicity 45 46 <li> 47 cognitive style - personality type 48 49 <li> 50 disability - visual, motor, cognitive 51 52 <li> 53 experience - subject domain, systems 54 55 </ul> 56 57 <p> 58 how much should you tailor? 59 </p> 60 <ul> 61 <li> 62 at this point you pretend that there's an average user, completely contradicting what was said a few lectures before 63 64 <ul> 65 <li> 66 but now you do it because it's useful and keeps the range broad 67 68 </ul> 69 <li> 70 specialised audience design - economics of markets, empathy with the users 71 72 <li> 73 universal design - the kerb cut metaphor 74 75 </ul> 76 77 <div id="Designing for differences-Ergonomics"><h3 id="Ergonomics" class="header"><a href="#Designing for differences-Ergonomics">Ergonomics</a></h3></div> 78 <p> 79 peripherals, posture, stuff like this 80 </p> 81 82 <p> 83 <img src="img/ergonomic-keyboards.png" alt="Ergonomic keyboard design" /> 84 </p> 85 86 <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> 87 <p> 88 usage related to socio-economic group, with wealth and education critical 89 </p> 90 91 <p> 92 accessibility features: 93 </p> 94 <ul> 95 <li> 96 sensory: visual (reduce width of field, color perceptions), audio (high freq hearing loss) 97 98 <li> 99 motor: slower motor task response times, no fine motor control 100 101 <li> 102 cognitive: decline in linguistic and reasoning ability, impairment of memory 103 104 </ul> 105 106 <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> 107 <ul> 108 <li> 109 bold colors 110 111 <li> 112 large buttons and text 113 114 </ul> 115 116 <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> 117 <p> 118 do the research 119 </p> 120 <ul> 121 <li> 122 are there local sites offering similar goods/services? 123 124 <li> 125 what are common design values and cahracteristics? 126 127 </ul> 128 129 <p> 130 use any local knowledge you can get 131 </p> 132 133 <p> 134 test the design before deployment! 135 </p> 136 137 <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> 138 <p> 139 aims to provide guidelines, has a st of accessibility principles 140 </p> 141 142 <p> 143 perceivable: 144 </p> 145 <ol> 146 <li> 147 provide text alternatives for any non-text content (like alt tag) 148 149 <li> 150 provide alternatives for time-based media 151 152 <li> 153 create content that can be presented in different ways without losing information/structure 154 155 <li> 156 make it easier for users to see/hear content (including foreground and background separation) 157 158 </ol> 159 160 <p> 161 operable: 162 </p> 163 <ol> 164 <li> 165 make all functionality available from a keyboard 166 167 <li> 168 provide users enough time to read and use content 169 170 <li> 171 do not design content in a way that can cause seizures 172 173 <li> 174 provide ways to help users navigate, find content, and determine where they are 175 176 </ol> 177 178 <p> 179 understandable & robust: 180 </p> 181 <ol> 182 <li> 183 make text content readable and understandable 184 185 <li> 186 make web pages appear and operate in predictable ways 187 188 <li> 189 help users avoid and correct mistakes 190 191 <li> 192 maximize compatibility with current and future user agents, including assistive technologies 193 194 </ol> 195 196 </div> 197 </body> 198 </html>