norman's-design-principles.html (2359B)
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>norman's-design-principles</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="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> 36 <ol> 37 <li> 38 Visibility 39 40 <ul> 41 <li> 42 if more stuff is visible, the user's more likely to know what to do next 43 44 <li> 45 when functions are hidden, it makes them more difficult to find and know how to use 46 47 <li> 48 sometimes things are designed so we can't see how to make them work 49 50 <li> 51 need to see the state of a device and possible actions 52 53 <li> 54 so hide functions that are not immediately needed 55 56 </ul> 57 <li> 58 Feedback 59 60 <ul> 61 <li> 62 send back info about what actions have been done, what's been accomplished 63 64 <li> 65 audio, tactile, verbal, etc. 66 67 </ul> 68 <li> 69 Constraints 70 71 <ul> 72 <li> 73 restrict possible user actions 74 75 </ul> 76 <li> 77 Mapping 78 79 <ul> 80 <li> 81 relationship between controls and their effects 82 83 <li> 84 e.g. up/down arrows to represent up/down movement of cursor 85 86 </ul> 87 <li> 88 Consistency 89 90 <ul> 91 <li> 92 similar concepts expressed in similar ways. use conventions. 93 94 <li> 95 follows rules - aesthetic, functional, layout 96 97 </ul> 98 <li> 99 Affordance 100 101 <ul> 102 <li> 103 perceived/actual properties of an object that helps to figure out how it works 104 105 <li> 106 e.g. mouse button invites pushing 107 108 <li> 109 'afford': 'give a clue' 110 111 </ul> 112 </ol> 113 114 </div> 115 </body> 116 </html>