1 / 32

Creating User Interfaces

Learn about creating dynamic HTML5 interfaces, planning and conducting usability inspections, and implementing form validation. Explore the definition of usability and its features, and discover effective design factors and metaphors for user-centered interfaces.

Télécharger la présentation

Creating User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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….

  10. 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

  11. 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

  12. 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

  13. 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)

  14. 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???

  15. 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.

  16. 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.

  17. 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

  18. <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>

  19. <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;

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

  21. 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();}

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

  23. 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); }

  24. 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;}

  25. 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++;

  26. 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);}}}}

  27. 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";}

  28. </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>

  29. 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

  30. 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!

More Related