Creating Interfaces

Defining users. College exercise. HTML5 drawing.

Homework: Post or make comment on other postings on reflection on college exercise

Users

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

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

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

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?

Discussion

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

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!

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.

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.

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.

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

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.

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.

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.

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.

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

p/wkshopdrawing0.html

0,0, default color, 10 by 10, stroke

0,300,green,30 by 30, stroke

500,300, 50 by 50, fill

500,0,default color,20 by 20, fill

rgb(200,0,100)

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

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

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.

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.

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

workshop/wkshopsmile.html

• http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopfrown.html

Angles

0 (=2*PI)

PI/4

PI/2

PI

PI*3/2

true means counter-clockwise!

.80*PI

.20 * PI

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

4 distinct paths, each made up of 1 arc.

Default, "red" and "brown"

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.

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

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

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

}

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!

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

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>

variables (in script element)

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 successionvar c=0; // points to next color

variables (in script element)

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 successionvar c=0; // points to next color

variables (in script element)

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 successionvar c=0; // points to next color

variables (in script element)

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 successionvar c=0; // points to next color

variables (in script element)

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 successionvar c=0; // points to next color

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

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.

Homework

• Post/comment comparison/assessment of another college.

• Experiment with HTML5 drawing.

• Next class: HTML5 drawImage and mouse events on canvas.