Creating [User] Interfaces

Introductions & Overview

MoodleHW: Introduce yourself and make reply comments

on moodle. Complete HTML5 exercises.

* Will try to have an in-class activity most classes, so come prepared to work AND listen & discuss!

Introductions• Jeanine Meyer

– Full Professor, Math/Computer Science & New Media.– Ph.D. in Computer Science– Previous experience: IBM Research (robotics &

manufacturing systems), IBM EduQuest (corporate grants). Pace University. Consulting/k-12 Faculty development

– books: Multimedia in the Classroom, Programming Games using Visual Basic, Creating Database Web Applications with PHP and ASP, Beginning Scripts through Game Creation, Essential Guide to HTML5

• You

Websites for course

• My website:http://faculty.purchase.edu/jeanine.meyer– Lecture charts

– Schedule, handout, guides to midterm and final

• Moodle http://moodle.purchase.edu– Required assignments (posting, comments to other

posts, pages)• In class and homework

Course subject

• Concepts, tools, practice in creating applications for [practical] purpose– 'HCI': exchange of information, perhaps with side effects– Success or quality of interaction can be determined.

• Did client/customer/user see right information? • Was the intended transaction processed (correctly)?• Was effort or time acceptable?

• Practice in specific technologies: HTML5, VoiceXML.• Practice in presentations (including writing), team work.Focus in course is the 'front end', the interface with the

client/user/visitor/etc. Back-end/back office processing is the subject of other courses, including Creating Data Bases for Web Applications and Social Software. Focus on artistic expression [only] in service of functionality. The important question is: does it work!

Course content• Concepts & processes

– Definition(s) of usability – Assessing usability, including observations, tests, etc.– Attention to specific audience needs

• Accessibility issues• Language/localization

• Platforms – [Regular] Web and full-size computer screen, mobile

devices– Telephone (directed speech recognition)

• Technologies– HTML5 (HTML, JavaScript, CSS)– VoiceXML

Course structureEach day may include lecture and computer workPostings, homework, midterm & final quiz plus • Classwork exercises and homework

– E.g., comparison of government sites

• User observation study• HTML5 assignments and project• Mobile device study• VoiceXML applicationSome of these may be and some must be done by

teams. Some involve postings and presentations.

Questions?

• Now to overview on content

Goal

• Raise level of analysis of interfaces (not exclusively web sites viewed on desktop computers)– concepts and terms– practice: looking & reporting, identifying

purpose & role players, observing use, as well as building our own applications

Whole story• Identify users—give name to users and there may be

several groups of users• Identify goals / purpose / function: what do you want

this application to do? What do users want?• Try your best to be user-centered: put yourself in

position of the users– For example, vocabulary, organization

• Involve actual users early and continually, including – At the very start

– after application launch

Note

Field is evolving.

• Must pay attention to existing interfaces

• Even more spread between new and experienced clients/customers/users

• BUT…new interfaces / metaphors can take over, with new expectations– mobile devices supporting new interactions.

Presentation / Usability • Edward Tufte

– Known for beautiful books, critique of PowerPoint, critique of effort on Challenger launch, other

• Jakob Nielsen– Known for critiques on usability, books, etc.

• Steve Krug– Short, funny how-to books on usability

• ??

Extra credit opportunity: make posting, not just a link, summarizing new and/or source

Page concepts• Screen real estate

– content– navigation– decoration– white space

• chartjunk, data ink• data dimension• answers to question: Compared to …?• above the fold versus below the fold• flow• scanning versus reading• chunking information

Application concepts

• Metaphor– For example: visit a website

• user-centered, user expectations• shallow versus deep organization• bread crumb trails• data dimension (as relevant to overall

design)• functions of audio, video, animation

Building usability

• Identify/decide on [better] name for your users• Determine function(s), metrics• Formative evaluation: what does it take to get to

information/perform task successfully• Observe performance

– can include asking for opinion(s)

• Correct/improve• Monitor/correct/improve

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 user." - ISO 9241-11 International Organization for Standardization

Will look at other definitions and discuss.

Accessibility• Special needs

– For example, visually impaired– Note: special needs may help more general

population in special circumstances or even any situation…

• Language• Localization

– For example, dates

• Other?

HTML5• HTML5 is the latest/soon to be version of

– HyperText Markup Language (HTML): text with tags for content

– JavaScript: scripting/programming language for interactivity, dynamic presentation

– Cascading Style Sheets: formatting

• Many new features, for support of semantic web, dynamic/interactive websites

• CAUTION: definition not official. Support from browsers not complete (most especially: IE missing, but promised.)

New features include:

• Semantic elements: header, footer, section, article, others.

• canvas for drawing– paths of rectangles, arcs, lines, images – mouse events

• localStorage (variation of cookies)• audio & video elements

– including drawing video on canvas

Comparisons Study• Comparing two things with similar functions is good way

to get at critical issues.• Possible topics

– [websites for two different colleges: we will do this next class!]– old and new NY voting machines– websites for motor vehicle for two different states– GPS on different devices– ???

• Determine system owners, classes of system users, application purpose(s), owners' goals, etc. Observe (use) and report.

User observation study

• Pick computer application, e.g., website.• Determine functions and system owners and

classes of users• Recruit 3-5 people that can act as users

– Represent different groups and/or levels of experience, etc.

• Structure session: define tasks• Observe and assess usability. Get feedback from

your subjects.

Hand held devices• Cell phones• Music players• Personal Digital Assistants• Digital cameras• Global Positioning Systems• Combinations?• Other?We will do comparison studies using handheld

device: work as a class to define objectives.

Directed speech recognition

• Something different!

• Applications set up to recognize speech (over the phone) and give information and/or do transactions and/or get to correct person.

• Examples?

VoiceXML

• XML language. Set of tags, including form, field, grammar. A special language for grammars.

• A company named Tellme offers a testing service for developers.– You can (will) register as Tellme developer.

Example

• Implements conversation with members of my family

• Code not complete, mainly shows interactions with Aviva, who at that time was folding cranes for a friend's wedding.

<?xml version="2.0"?><vxml version="2.0"> <form> <field name="childid"> <prompt> <audio src="whosthis.wav">Hello. Who is calling?</audio> </prompt><grammar type="application/x-gsl" mode="voice"><![CDATA[[[dan daniel (daniel meyer) (dan meyer)] {<childid "daniel">}[aviva (aviva meyer)] {<childid "aviva">}[esther (esther minkin) ] {<childid "esther">}] ]]></grammar>

<catch event="noinput nomatch"> <audio src="sorry.wav">Sorry. I didn't get that.</audio> <exit/> </catch> <filled> <if cond="'daniel'==childid"> <goto next="#danfollowup"/> <elseif cond="'aviva'==childid"/> <goto next="#avivafollowup"/> <elseif cond="'esther'==childid"/> <goto next="#estherfollowup"/> <else/> <reprompt/> </if> </filled> </field></form>

<form id="avivafollowup"> <var name="rest" expr="1000"/> <field name="bcount" type="number"> <prompt> <audio src="howmanycranes.wav">Hello, Aviva. How many cranes have you made? </audio> </prompt><grammar type="application/x-gsl" mode="voice" ><![CDATA[ NATURAL_NUMBER_THRU_9999]]></grammar> <catch event="noinput nomatch"> <audio src="sorry.wav">Sorry. I didn't get that.</audio> <exit/> </catch>

<filled> <assign name="rest" expr="1000-bcount"/> <audio> <value expr="rest" /> </audio> <audio src="togo.wav"> to go. </audio> <if cond="rest&lt;200" > <audio src="homestretch.wav">You're in the home stretch </audio> <elseif cond="rest&lt;500" /> <audio src="morethanhalf.wav">More than half way </audio> <elseif cond="rest&lt;800" /> <audio src="goodstart.wav">Off to a good start </audio> <else/> <audio> Get a move on </audio> </if> <audio src="goodbye.wav">Good bye. </audio> </filled> </field> </form>

Classwork• [Re-] do Favorite Sites HTML exercise in HTML5

– use semantic elements in place of formatting in the <body>

– use CSS font-family feature to ensure graceful degradation….

– NOTE: by using HTML5 we are ignoring current lack of support by IE!

• Function: provide (curate?) set of sites, with brief, engaging descriptions, logos that represent site (brand), workable links. Users: people of similar interests???

screen shot, not live html

Favorite Sites or anything else• html document: tags and text

<html>

<head>

<title> </title>

<style> </style> formatting

<script> </script> interaction / behavior

</head>

<body>

content (and structure)

</body>

</html>

<html> <head> <title>Favorite Sites </title><style>header {font-family:Georgia,"Times New Roman",serif;

text-align:center;font-size:30px;display:block; }

article { text-align:left;font-size:20px;margin:20px;display:block;font-family:"Century","Tahoma", sans-serif; }

img {display:block;}</style><script>document.write(Date());</script> </head>

<body><header>Favorite Sites </header><article>My Academic website, <a

href="http://faculty.purchase.edu/jeanine.meyer"> http://faculty.purchase.edu/jeanine.meyer</a> is where I put information about my courses, along with

publications and other activities.<img src="purchase_logo_sm.gif" width="200"/></article><article>My daughter, Aviva, is active in the <a

href="http://stolenchair.org">Stolen Chair Theater company.</a> The next production involves Victorian photo-collage.

<img src="CSTlogo.jpg" width="100"/></article> <body> </html>

Classwork

• Produce your own version.

• Research any CSS you need / want.

• Extra credit: make posting to General Discussion on roles of serif versus sans serif fonts!

Homework

• Go to moodle and make introductory post to General Discussion forum.– Comment on other posts

• Complete HTML5 exercises