Creating interfaces
This presentation is the property of its rightful owner.
Sponsored Links
1 / 42

Creating Interfaces PowerPoint PPT Presentation


  • 101 Views
  • Uploaded on
  • Presentation posted in: General

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 .

Download Presentation

Creating 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Creating interfaces

Creating Interfaces

Defining users. College exercise. HTML5 drawing.

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


Users

Users

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


Common ways interfaces are not user centered

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

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

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

Discussion


Iso definition

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

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

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

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

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

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

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

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

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

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

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/html5workshop/wkshopdrawing0.html


Creating interfaces

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

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

rgb(200,0,100)

0,300,green,30 by 30, stroke

500,300, 50 by 50, fill


Creating interfaces

<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

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

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

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

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/html5workshop/wkshopsmile.html

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


Angles

Angles

PI*3/2

PI

0 (=2*PI)

.20 * PI

PI/4

.80*PI

true means counter-clockwise!

PI/2


Creating interfaces

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


Creating interfaces

4 distinct paths, each made up of 1 arc.

Default, "red" and "brown"


Strategy

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.


Creating interfaces

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


Creating interfaces

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


Creating interfaces

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

}


Comments1

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

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

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 succession

var c=0;// points to next color

variables (in script element)


Variables in script element1

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 succession

var c=0;// points to next color

variables (in script element)


Variables in script element2

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 succession

var c=0;// points to next color

variables (in script element)


Variables in script element3

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 succession

var c=0;// points to next color

variables (in script element)


Variables in script element4

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 succession

var c=0;// points to next color

variables (in script element)


Creating interfaces

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


Comments2

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

Homework

  • Post/comment comparison/assessment of another college.

  • Experiment with HTML5 drawing.

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


  • Login