1 / 35

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

happy
Télécharger la présentation

Creating [User] Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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!

  2. 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 • You

  3. 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

  4. 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 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)!

  5. Course content • Concepts & processes • Definition(s) of usability • Assessing usability, including observations, tests, etc. • Observations include embedded devices • Attention to specific audience needs • Accessibility issues • Language/localization • Platforms • [Regular] Web (full-size computer screen) • Save mobile for other class • Telephone (directed speech recognition) • Technologies • HTML5 (HTML, JavaScript, CSS) • VoiceXML

  6. 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 • Site comparison study • User observation study • Embedded computer study • Build VoiceXML application • Build teaching example • Planning presentation & final presentation

  7. Questions? • Now to overview on content

  8. 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

  9. 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

  10. 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.

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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.

  16. 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?

  17. 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.)

  18. 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

  19. 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.

  20. 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.

  21. Embedded devices • ATM • Car • Parking lot payment kiosk • ?

  22. 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?

  23. 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.

  24. 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.

  25. <?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>

  26. <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>

  27. <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>

  28. <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>

  29. 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! • Write description, giving purpose (s) of site along with description of users. • What is purpose of owners? • What is purpose of users?

  30. screen shot, not live html

  31. 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>

  32. <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>

  33. <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>

  34. Classwork • Produce your own version. • Research any CSS you need / want. • See next page concerning font choice.

  35. Homework • Read http://thenextweb.com/dd/2013/12/23/science-behind-fonts-make-feel/#!qBNC9 • 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

More Related