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.

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 International Organization for Standardization MEMORIZE THIS! Will look at other definitions and discuss.

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)

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

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.

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

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 nreview/13brustein.html?_r=1&scp=3&sq= book%20turn%20pages&st=cse nreview/13brustein.html?_r=1&scp=3&sq= book%20turn%20pages&st=cse

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

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

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

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, display XXX-XXXX-XXXX-XX89 ) –Make customer enter certain things twice Posting opportunities

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

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)

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

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.

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.

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) ngman3.html

Hangman.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:} words1.js

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;

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

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

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

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 = ( " "+alphabet[i]+" "); 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',pickele ment,false); }

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 = (" __ "); 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;}

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

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',pickeleme nt,false);}}}}

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

Hangman Your browser doesn't support the HTML5 element canvas.

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

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!