Creating Interfaces

1. Creating Interfaces Defining users. College exercise. HTML5 drawing. Homework: Post or make comment on other postings on reflection on college exercise

2. Users • Computing and illegal drugs are the only industries that call their customers / clients users.

3. Common ways interfaces are NOT user-centered • Assume user knows the jargon • Technical • Business • personal Citibank story • Assume user knows the organization • visitors to college website OR catalog • Assume user's interests will motivate sustained time with site/application

4. Case study: colleges • Challenge: multiple user groups! • Current faculty • Current students • Prospective students • first time visitor • repeat visitor • Parents • Possible transfer (i.e., older) student • Accepted • Guidance counselor • Other • Academics, other professionals wanting information • ?

5. Activity • Pick another institution. Attempt to answer these questions. Keep [rough] track of number of screens, any false starts, etc. • What are the major(s) offered • involving computing? How does it/do they compare in requirements to math/cs here? • Are there major(s) similar to new media? How does it….. • What is the phone number / email for person to talk to about specific major? What is phone number / email … about summer courses? • What does it cost? What are deadlines to apply? • When is Spring break? What is schedule for finals? • ? • Who would ask each of these questions?

6. Discussion

7. ISO definition usability of an interface is "the effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in a particular environment". • effectiveness=does it do the job • efficiency=how well it does it in terms of time, effort, costs (system & user) other factors • satisfaction=perception of user

8. Regarding satisfaction… • IBM usability study story…. • DOS, Windows, OS • two part study: setup versus use • Set up of OS was too painful for group to continue • use part included tests on specific tasks: looking up addresses, writing a letter, sending e-mail, etc. • Performance was poor! Participants said systems were easy to use!

9. Interface • in most/many? cases… • success means the interface is less obvious, not more • User's objective is NOT to use the interface but to get something accomplished. • BUT there can be the issue of branding • Complex interactions (data-rich) require more than simple interactions.

10. Critical factors • Need to define (know) • purpose • process (what goes on before and after, what are the steps, etc.) • user purpose & owner purpose may be different: • Web site with ads: the 'content' is there to 'capture the eyeballs'. • Even in intranet web sites, system owners and system users can have different views. • environment--audience • costs of success and failure Cannot really talk about interface if you don't know these factors.

11. Jakob Nielsen's Rules • Simple and natural dialogue-- Minimising complexity, principles of graphical layout. • Speak the user's language– Affordances*, mappings, metaphors and using the user's perspective. • Minimise the user's memory load--Limits of human short-term memory load. Recognition versus recall. • Consistency--Importance of generalisation in learning and use. • Feedback--Types, persistence and response times. • Clearly marked exits--Cancel, undo and action priorities. • Shortcuts--Power-user options* including macros, history and agents. • Good error messages--Guidelines for error messages. • Prevent errors--Interface modes, interface syntactic correctness and commensurate effort. • Help and documentation--Task centred minimal manuals.

12. Affordances • from Don Norman (www.jnd.org) • The word "affordance" was invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal). • perceived affordance: what the user believes to be possible (as way of communicating with system) • for example: using mouse to move cursor to click on specific region

13. Usability Principles (Heuristics) from U. S Dept of Labor 1. Speak the users' language. Use words, phrases, and concepts familiar to the user. Present information in a natural and logical order. 2. Be Consistent. Indicate similar concepts through identical terminology and graphics. Adhere to uniform conventions for layout, formatting, typefaces, labeling, etc. 3. Minimize the users' memory load. Take advantage of recognition rather than recall. Do not force users to remember key information across documents. 4. Build flexible and efficient systems. Accommodate a range of user sophistication and diverse user goals. Provide instructions where useful. Lay out screens so that frequently accessed information is easily found. 5. Design aesthetic and minimalist systems. Create visually pleasing displays. Eliminate information which is irrelevant or distracting.

14. US D. of Labor Heuristics, cont. 6. Use chunking. Write material so that documents are short and contain exactly one topic. Do not force the user to access multiple documents to complete a single thought. 7. Provide progressive levels of detail. Organize information hierarchically, with more general information appearing before more specific detail. Encourage the user to delve as deeply as needed, but to stop whenever sufficient information has been received. 8. Give navigational feedback. Facilitate jumping between related topics. Allow the user to determine her/his current position in the document structure. Make it easy to return to an initial state. 9. Don't lie to the user. Eliminate erroneous or misleading links. Do not refer to missing information.

15. Caution • Usability inspection using rules is NOT as important as consulting with users and [observing] testing by users or as close as you can get to 'real' users. • Still, do it! • Continual monitoring of usage, system performance, etc. is also important. • Prepare for change. • Users liking the system is probably not as important as users 'using' the system [fairly] successfully.

16. User (give name!) • Power-user: frequent, 'expert', repeat client • Novice user: • infrequent user your site • infrequent user in general • Emerging & important phenomenon: users familiar with web sites in general, though not yours. (Nielsen stresses the importance of [following] general standards.) • Need to weigh following conventions versus strategies that may better reflect your subject matter.

17. HTML5: Drawing • canvas element • Use code to define a so-called context. Methods of this object do the work! • Screen geometry: upper left corner is origin. • Colors defined by red-green-blue values or a small set of named colors, • http://www.tutorialspoint.com/html5/html5_color_names.htm. • will show hexadecimal example later. • stroke versus fill • draw Rectangles • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawing0.html

18. 500,0,default color,20 by 20, fill 0,0, default color, 10 by 10, stroke rgb(200,0,100) 0,300,green,30 by 30, stroke 500,300, 50 by 50, fill

19. <html> <head> <title>Four rectangles</title> <script> var ctx; function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 2; ctx.strokeRect(0,0,10,10); ctx.fillRect(500,0,20,20); ctx.strokeStyle = "green"; ctx.fillStyle = "rgb(200,0,100)"; ctx.strokeRect(0,300,30,30); ctx.fillRect(500,300,50,50); } </script> </head> <body onLoad="init();"> <canvas id="canvas" width="600" height="400"> Your browser doesn't support the HTML5 element canvas.</canvas> </body> </html>

20. Errors • JavaScript is scripting language: interpret statements at execution time. • NOT compiled, with error messages • Semantic errors (errors of meaning) are more difficult to detect and fix! • Syntactic errors are errors of form, analogous to grammatical errors • FireFox Tools/Error Console can help • Most common: bad bracketing • ctx.fillStyle("rgb(200,0,100)"); fillStyle is attribute,not method

22. Comments • The drawing is done in the init function which is called when the body element is loaded. The canvas element with id="canvas" does not exist until the body is loaded. • Default color is black. Red green blue values each are 0 to 255 (8 bits of intensity). The strokeStyle and the fillStyle are attributes, not methods. • GO: experiment with colors (by name) and rgb (note the quotation marks) and location and width and height.

23. More comments • Drawings are …paint on the canvas. • These rectangles are not objects to be moved or referenced later. • Use ctx.clearRect method to erase. • Need to do calculations to detect hits. • See memory game in book. • Alternative is dynamic placement of html markup • See quiz, hangman.

24. Next drawing • Paths created with arcs and line segments • Arcs are portions of circles, created using radians in place of degrees. Math.PI is available for use. A complete circle can be drawn from 0 to 2*Math.PI or –Math.PI to Math.PI, etc. • Arcs can be stroke or fill. • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopsmile.html • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopfrown.html

25. Angles PI*3/2 PI 0 (=2*PI) .20 * PI PI/4 .80*PI true means counter-clockwise! PI/2

26. arcs • ctx.arc (x of center, y of center, radius, starting angle, finishing angle, true for counter-clockwise) • No drawing (ink) at the center! This is important when connecting arcs and lines. • EXPERIMENT

27. 4 distinct paths, each made up of 1 arc. Default, "red" and "brown"

28. Strategy • Use variables with some variable values defined in terms of others. • Circle face and two eyes. Smile is (partial) arc. Brown eyes and red smile. • body element same as before. • You can add the code for this to your rectangles drawing.

29. var ctx; var headx = 100; //center of face x coord. var heady = 200; // center of face y coord. var headrad = 50; //radius of face var smileoffsetx=0; //smile center x is same as face var smileoffsety = 15; //smile center y further down var smilerad=20; // smile radius var eyeoffsety = -10; //eyes up from center var lefteyeoffsetx = -15; //left eye var righteyeoffsetx = -lefteyeoffsetx; //right var eyerad = 8; // eye radius

30. function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(headx,heady,headrad,0,2*Math.PI,true); ctx.closePath(); ctx.stroke(); …

31. ctx.strokeStyle = "red"; ctx.beginPath(); ctx.arc(headx+smileoffsetx,heady+smileoffsety,smilerad,.80*Math.PI,.20*Math.PI,true); ctx.stroke(); ctx.fillStyle = "brown"; ctx.beginPath(); ctx.arc(headx+lefteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true); ctx.fill(); ctx.beginPath(); ctx.arc(headx+righteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true); ctx.fill(); }

32. Comments • The fill and stroke calls close the path. • Also, can close a path with closePath() • Using variables makes code more flexible and easier to see relationships. • GO: draw arcs, changing colors, sizes, etc. • NOTE: can draw non-circular ovals using transformations: scale. Check out the hangman game in book!

33. Next drawing: star • For drawing lines (and arcs), think of moving a pencil versus drawing (preparing to draw) a line segment • nothing is drawn until the stroke or fill • Use an array with coordinates for 5 points • Use an array to hold names of 3 colors • button element • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawingstars.html

34. show body first <body onLoad="init();"> <canvas id="canvas" width="600" height="400"> Your browser doesn't support the HTML5 element canvas. </canvas> <button onClick="makestar();">Make Star </button> </body> </html>

35. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

36. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

37. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

38. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

39. var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

40. function init() { ctx = document.getElementById('canvas').getContext('2d'); } function makestar() { ctx.clearRect(0,0,600,400); ctx.fillStyle=colors[c]; c = c +1; // can reduce to one line using colors[c++] c = (c<3)?c:0; ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]); ctx.lineTo(pts[3][0],pts[3][1]); ctx.lineTo(pts[1][0],pts[1][1]); ctx.lineTo(pts[4][0],pts[4][1]); ctx.lineTo(pts[2][0],pts[2][1]); ctx.lineTo(pts[0][0],pts[0][1]); ctx.stroke(); //outline (necessary for white star! ctx.fill(); }

41. Comments • Your assignment: do something with a button. It does not have to be a star. • But do use moveTo and lineTo. • You can combine with rectangles (separate from paths) and arcs (can combine with lines). • Try stroke and fill • Can include multiple moveTo • think of picking up your pen and moving to a new spot on the paper/canvas.

42. Homework • Post/comment comparison/assessment of another college. • Experiment with HTML5 drawing. • Next class: HTML5 drawImage and mouse events on canvas.