Creating User Interfaces Introductions Overview Moodle HW Introduce

Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML 5 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 Edu. Quest (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 HTML 5 • 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: HTML 5, Voice. XML. • 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 – HTML 5 (HTML, Java. Script, CSS) – Voice. XML

Course structure Each day may include lecture and computer work Postings, homework, midterm & final quiz plus • Classwork exercises and homework – E. g. , comparison of government sites • User observation study • HTML 5 assignments and project • Mobile device study • Voice. XML application Some 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 Power. Point, 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?

HTML 5 • HTML 5 is the latest/soon to be version of – Hyper. Text Markup Language (HTML): text with tags for content – Java. Script: 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 • local. Storage (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?

Voice. XML • 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< 200" > <audio src="homestretch. wav">You're in the home stretch </audio> <elseif cond="rest< 500" /> <audio src="morethanhalf. wav">More than half way </audio> <elseif cond="rest< 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 HTML 5 – use semantic elements in place of formatting in the <body> – use CSS font-family feature to ensure graceful degradation…. – NOTE: by using HTML 5 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: 30 px; display: block; } article { text-align: left; font-size: 20 px; margin: 20 px; 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 photocollage. <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 HTML 5 exercises