Creating User Interfaces

1. Creating User Interfaces Usability. Correspondences. HTML5: Dynamic creation of html; events. Planning & Usability Inspection. Form validation. Homework: Post/comment on terms. Produce a form validation example.

2. Usability definition "[Usability refers to] the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use." - ISO 9241-11 International Organization for Standardization MEMORIZE THIS! Will look at other definitions and discuss.

3. Usability definition features • Specified user(s) • Specified goals • Effectiveness: user achieves goal • Efficiency: reasonable (?) amount of effort on part of user AND system resources • Satisfaction: user is pleased • Returns to site • Context (aka environment)

4. Usability definition • Best suited to user seeking information and/or accomplishing task such as ordering product, voting, joining organization, contributing… • What about (Posting topic) • Doing something when system owner has different goal(s), e.g., capturing eyeballs

5. Possible issue • Who is the customer? • If the product is dog food, who is the customer, the dog or the dog owner? • This can describe many real situations.

6. Terms • Task analysis and systems design • Make sure design process focuses on what needs to be done … • User expectations • Including experiences with other sites, applications (links are blue, when to use other jargon (friend, ???) • Limitations can be acceptable: small video clips, Twitter word limit, ??? • Usability inspection, Cognitive walkthrough, Heuristic evaluation (general, good & quick rather than guaranteed methods) • Examples: check vocabulary, check for error handling (user should NOT have to be perfect in data entry), immediate feedback

7. Your postings • Discussion • Are suggestions too simplistic? • Target populations: • Gender Human Computer Interface • Age ("kids" versus ?? Versus old folks) • Expectations: Why Innovation doffs an old hat http://www.nytimes.com/2011/02/13/weekinreview/13brustein.html?_r=1&scp=3&sq=book%20turn%20pages&st=cse

8. Interactions • How to get the correct input from the user? • Forms • may not look like forms: use direct clicking on objects (e.g., hangman, but think about retail sites, medical??) • pro-active prevention of errors • form validation • Ease (facilitate) corrections

9. Correspondences • If you can't support direct connection, then need to be sure user sees correspondence….

12. Discussion • Fix for bad design is …. early involvement of [actual] users, inspection, attention, … • ? • Presumably each of these examples had inspection. • Newspaper example too many steps

13. Prevention of errors Examples • drop-down menu of choices (e.g., states) versus free-form input • Template for answer (e.g., if you know the organization number ends in 89, displayXXX-XXXX-XXXX-XX89 ) • Make customer enter certain things twice Posting opportunities

14. General design factors • Flat (present everything) versus Hierarchical (drill down). Featured plus… • NOTE: will investigate specific sites, such as government sites • Readable, Skimmable text (chunking…) • Memory overload • Metaphor

15. Metaphor • The metaphors that work well, or at least okay • visiting a web page • Friend [ing] on Facebook • Flash Stage and Library • but there is off-stage on stage • Drawing on canvas • ??? Posting opportunity (good and not so good)

16. Metaphors that don't work for me • Friedman: the world is flat. He meant: world is interconnected, small, competition to USA from everywhere. People in Banglor, India could take over US jobs. In fact: multiple connections between sites (not possible if world was flat!) • Transparent management: My problem: at IBM, this was considered bad: allowed lower level managers do avoid responsibility. • [Guggenheim museum design: I say: it is 1 dimensional, not more!] • Posting opportunity: your own???

17. User centered, … • Do people want to emulate a messy desk? • Do people want to communicate in open-ended natural language • My abdominal emergency room study experience • NOTE: will be talking about natural language/speech recognition later in course.

18. Creation of HTML markup • Drawing on canvas has the limitation that there are NOT discrete objects to move around or receive/listen for events. • can erase and re-draw • can do calculation to determine mouse position and if it is over specific thing. • Alternative: create and position markup.

19. Hangman • Example of implementation of existing pen-and-paper game. How to do it? • My decisions: • adapt something that most players do on scratch paper: alphabet blocks: clickable and removable • dashes for letters in secret word (more or less exact translation of pen-and-paper game) http://faculty.purchase.edu/jeanine.meyer/html5/hangman3.html

20. <html><head><title>Hangman</title> <style> .letters {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double; margin: 5px; padding: 5px; color:#F00; background-color:#0FC; font-family:"Courier New", Courier, monospace;} .blanks {position:absolute;left: 0px; top: 0px; border:none; margin: 5px; padding: 5px; color:#006; background-color:white; font-family:"Courier New", Courier, monospace; text-decoration:underline; color:} </style> <script src="words1.js" defer></script>

21. <script type="text/javascript"> var ctx;var thingelem; var alphabet = "abcdefghijklmnopqrstuvwxyz"; var alphabety = 300; var alphabetx = 20; var alphabetwidth = 25; var secret;var lettersguessed = 0; var secretx = 160; var secrety = 50; var secretwidth = 50; var gallowscolor = "brown"; var facecolor = "tan"; var bodycolor = "tan"; var noosecolor = "#F60"; var bodycenterx = 70;

22. var steps = [drawgallows, drawhead, drawbody, drawrightarm, drawleftarm, drawrightleg, drawleftleg, drawnoose]; var cur = 0;

23. function drawnoose() {ctx.strokeStyle = noosecolor; ctx.beginPath(); ctx.moveTo(bodycenterx-10,40);ctx.lineTo(bodycenterx-5,95); ctx.stroke(); ctx.closePath(); ctx.save(); ctx.scale(1,.3); ctx.beginPath(); ctx.arc(bodycenterx,95/.3,8,0,Math.PI*2,false); ctx.stroke(); ctx.closePath(); ctx.restore(); drawneck(); drawhead();}

24. function init() {ctx = document.getElementById('canvas').getContext('2d'); setupgame(); ctx.font="bold 20pt Ariel"; }

25. function setupgame() { var i;var x;var y;var uniqueid;var an = 26; for(i=0;i<an;i++) { uniqueid = "a"+String(i); d = document.createElement('alphabet');d.innerHTML = ( "<div class='letters' id='"+uniqueid+"'>"+alphabet[i]+"</div>"); document.body.appendChild(d); thingelem = document.getElementById(uniqueid); x = alphabetx + alphabetwidth*i; y = alphabety; thingelem.style.top = String(y)+"px"; thingelem.style.left = String(x)+"px";thingelem.addEventListener('click',pickelement,false); }

26. var ch = Math.floor(Math.random()* words.length); secret = words[ch]; for (i=0;i<secret.length;i++) { uniqueid = "s"+String(i); d = document.createElement('secret');d.innerHTML = ("<div class='blanks' id='"+uniqueid+"'> __ </div>"); document.body.appendChild(d); thingelem = document.getElementById(uniqueid); x = secretx + secretwidth*i; y = secrety; thingelem.style.top = String(y)+"px"; thingelem.style.left = String(x)+"px";} steps[cur](); cur++; return false;}

27. function pickelement(ev) { var not = true; var picked = this.textContent; var i; var j; var uniqueid; var thingelem; var out; for (i=0;i<secret.length;i++) { if (picked==secret[i]) { id = "s"+String(i); document.getElementById(id).textContent = picked; not = false; lettersguessed++;

28. if (lettersguessed==secret.length) { ctx.fillStyle=gallowscolor; out = "You won!"; ctx.fillText(out,200,80); ctx.fillText("Re-load the page to try again.",200,120); for (j=0;j<26;j++) { uniqueid = "a"+String(j); thingelem = document.getElementById(uniqueid); thingelem.removeEventListener('click',pickelement,false);}}}}

29. if (not) { //this letter wasn't found in secret word steps[cur](); cur++; if (cur>=steps.length) { //end of hanging for (i=0;i<secret.length;i++) { // reveal word id = "s"+String(i); document.getElementById(id).textContent = secret[i];} ctx.fillStyle=gallowscolor; out = "You lost!"; ctx.fillText(out,200,80); ctx.fillText("Re-load the page to try again.",200,120); for (j=0;j<26;j++) { uniqueid = "a"+String(j); thingelem = document.getElementById(uniqueid); thingelem.removeEventListener('click',pickelement,false);}}} var id = this.id; document.getElementById(id).style.display = "none";}

30. </script> </head> <body onLoad="init();"> <h1>Hangman</h1><br/><p> <canvas id="canvas" width="600" height="400"> Your browser doesn't support the HTML5 element canvas. </canvas> </body> </html>

31. Exercise: modify hangman • Download hangman3.html file and words1.js files • Using words1.js file as model, create your own word list • change the styling • change drawing functions

32. Homework • Do your own hangman • Post or comment on post on one of issues mentioned • Do not be redundant. Read all posts. If someone else posted on 'your topic', make reply post on that posting. • Produce example of form validation!!! • use at least 3 fields, 3 different types. • do research to use a browser that recognizes validation. • bring to class to demonstrate. • THIS COUNTS!