Creating User Interfaces Usability. Correspondences. HTML5: Dynamic creation of html; events....

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 9241-11 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 http://www.nytimes.com/2011/02/13/weekinreview/13brustein.html?_r=1&scp=3&sq=book%20turn%20pages&st=cse

http://www.nytimes.com/2011/02/13/weekinreview/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, displayXXX-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

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)

http://faculty.purchase.edu/jeanine.meyer/html5/hangman3.html



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

http://faculty.purchase.edu/jeanine.meyer/html5/words1.js

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').getContext('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 = ("<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);

}

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

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',pickelement,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";}

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

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!

Creating User Interfaces Usability. Correspondences. HTML5: Dynamic creation of html; events....

Documents

Transcript of Creating User Interfaces Usability. Correspondences. HTML5: Dynamic creation of html; events....