Creating [User] Interfaces
description
Transcript of Creating [User] Interfaces
Creating [User] Interfaces
Introductions & Overview
Moodle
HW: 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, HTML5 & JavaScript Projects, Elementary Number Theory with Programming
• 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 JavaScript, VoiceXML.
• Practice in observations & analysis, 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 serve the objective(s)!
Course content• Concepts & processes
– Definition(s) of usability – Assessing usability, including observations, tests, etc.
– Observations: including embedded devices, mobile– Attention to specific audience needs
• Accessibility issues• Language/localization
• Platforms – [Regular] Web (full-size computer screen)– Telephone (directed speech recognition)
• Technologies– HTML5 (HTML, JavaScript, CSS)– VoiceXML
Course structureEach day may include lecture and computer work• Classwork exercises and homework
– E.g., comparison of government sites– Requested postings
• Site comparison study• User observation study• Embedded computer study• Build VoiceXML application• Build teaching example
• Planning presentation & final presentation
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 & distinct roles & definitions of users, 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 does the
owner of this application 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.
• In early days, people constructed applications for known users in same company.
• Must pay attention to existing interfaces.
• Must be aware of objectives.
• 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
Concepts, mainly about a page• 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)• cognitive load• 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
• Providing service(s) on multiple devices
It was easier…Consider
• Users were known and trained and the computing environment was fixed. Examples:
• Travel arrangements
• Chip design
• Multiple objectives for the applications.
• "We are not the customers, but the product."
HTML5• HTML5 is NOW the official 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: Support from browsers still not complete
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.
Embedded devices• ATM• Car• Parking lot payment kiosk• ?
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 Voxeo offers a testing service for developers.
– You can (will) register as Voxeo 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 HTML5
– use semantic elements in place of formatting in the <body>
– use CSS font-family feature to ensure graceful degradation….
• Write description, giving purpose (s) of site along with description of users. • What is purpose of owners?• What is purpose of users?
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 how to make it RESPONSIVE, that is, fit different devices.
• Research any CSS you need / want.
• See next page concerning font choice.
Homework
• Read http://thenextweb.com/dd/2013/12/23/science-behind-fonts-make-feel/#!qBNC9
• Request web space
• http://students.purchase.edu/
• Finish Favorite sites page and upload it.
• Go to moodle and make introductory post to General Discussion forum.
– Comment on other posts
• Put in working link to your Favorite sites page