creating [user] interfaces introductions & overview moodle hw: introduce yourself and make reply...
TRANSCRIPT
![Page 1: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/1.jpg)
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!
![Page 2: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/2.jpg)
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
![Page 3: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/3.jpg)
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
![Page 4: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/4.jpg)
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!
![Page 5: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/5.jpg)
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
![Page 6: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/6.jpg)
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.
![Page 7: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/7.jpg)
Questions?
• Now to overview on content
![Page 8: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/8.jpg)
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
![Page 9: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/9.jpg)
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
![Page 10: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/10.jpg)
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.
![Page 11: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/11.jpg)
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 12: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/12.jpg)
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
![Page 13: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/13.jpg)
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
![Page 14: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/14.jpg)
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
![Page 15: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/15.jpg)
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.
![Page 16: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/16.jpg)
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?
![Page 17: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/17.jpg)
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.)
![Page 18: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/18.jpg)
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
![Page 19: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/19.jpg)
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.
![Page 20: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/20.jpg)
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.
![Page 21: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/21.jpg)
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.
![Page 22: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/22.jpg)
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?
![Page 23: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/23.jpg)
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.
![Page 24: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/24.jpg)
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.
![Page 25: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/25.jpg)
<?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>
![Page 26: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/26.jpg)
<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>
![Page 27: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/27.jpg)
<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>
![Page 28: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/28.jpg)
<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>
![Page 29: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/29.jpg)
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???
![Page 30: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/30.jpg)
screen shot, not live html
![Page 31: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/31.jpg)
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>
![Page 32: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/32.jpg)
<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>
![Page 33: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/33.jpg)
<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>
![Page 34: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/34.jpg)
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!
![Page 35: Creating [User] Interfaces Introductions & Overview Moodle HW: Introduce yourself and make reply comments on moodle. Complete HTML5 exercises. * Will try](https://reader035.vdocument.in/reader035/viewer/2022070402/56649f265503460f94c3d11d/html5/thumbnails/35.jpg)
Homework
• Go to moodle and make introductory post to General Discussion forum.– Comment on other posts
• Complete HTML5 exercises