Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply...
-
Upload
alice-powell -
Category
Documents
-
view
219 -
download
0
Transcript of Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply...
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<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….
– 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