+ All Categories
Home > Documents > Creating [User] Interfaces

Creating [User] Interfaces

Date post: 06-Jan-2016
Category:
Upload: happy
View: 50 times
Download: 3 times
Share this document with a friend
Description:
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 - PowerPoint PPT Presentation
Popular Tags:
36
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!
Transcript
Page 1: 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!

Page 2: Creating [User]  Interfaces

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

Page 3: Creating [User]  Interfaces

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

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

Page 5: Creating [User]  Interfaces

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

Page 6: Creating [User]  Interfaces

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

Page 7: Creating [User]  Interfaces

Questions?

• Now to overview on content

Page 8: Creating [User]  Interfaces

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

Page 9: Creating [User]  Interfaces

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

Page 10: Creating [User]  Interfaces

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.

Page 11: Creating [User]  Interfaces

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

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

Page 13: Creating [User]  Interfaces

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

Page 14: Creating [User]  Interfaces

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

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

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

Page 17: Creating [User]  Interfaces

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

Page 18: Creating [User]  Interfaces

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

Page 19: Creating [User]  Interfaces

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 20: Creating [User]  Interfaces

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 21: Creating [User]  Interfaces

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 22: Creating [User]  Interfaces

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

Page 23: Creating [User]  Interfaces

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 24: Creating [User]  Interfaces

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.

Page 25: Creating [User]  Interfaces

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 26: Creating [User]  Interfaces

<?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 27: Creating [User]  Interfaces

<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 28: Creating [User]  Interfaces

<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 29: Creating [User]  Interfaces

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

Page 30: Creating [User]  Interfaces

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?

Page 31: Creating [User]  Interfaces

screen shot, not live html

Page 32: Creating [User]  Interfaces

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 33: Creating [User]  Interfaces

<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 34: Creating [User]  Interfaces

<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 35: Creating [User]  Interfaces

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.

Page 36: Creating [User]  Interfaces

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


Recommended