Creating User Interfaces

1
Creating User Interfaces

• Introductions Overview
• Blog
• HW Make comment(s) to other postings on blog
• Will try to have an in-class activity most
  classes, so come prepared to work!

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

3
Websites for course

• My websitehttp//newmedia.purchase.edu/Jeanine
• Lecture charts
• Schedule, handout, guides to midterm and final
• Blog http//matnme3440.sp09.blogs.purchase.edu
• Required assignments (posting, comments to other
  posts, pages)
• In class and homework

4
Note

• Made decision to use class blog in place of
  Blackboard
• Blackboard had lost functionality
• Campus considering switch to other instructional
  support tool.
• Hope blogging works
• Change is good.
• May be more participatory
• Will use change as topic of discussion

5
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?
• 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.

6
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
• Hand-held devices
• Telephone (directed speech recognition)
• Technologies
• ActionScript and JavaScript using XML
• VoiceXML

7
Course structure

• Each day may include lecture and computer work
• Postings, homework, midterm final quiz plus
• Classwork and homework
• User observation study
• Data driven website application
• Flash ActionScript 3.0 or JavaScript or ??? based
  on XML input
• Hand-held device study
• VoiceXML application
• Some of these may be and some must be done by
  teams. Some involve postings and presentations.

8
Questions?

• Now to overview on content

9
Goal

• Raise level of analysis of interfaces (not
  exclusively web sites viewed on desktop
  computers)
• concepts and terms
• practice looking reporting, observing use,
  building
• Content-driven interfaces use XML to hold
  content. There are other possibilities.

10
Whole story

• Identify usersgive name to users and there may
  be groups of users
• Identify goals / purpose / function what do you
  want this application to do?
• 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 after application launch

11
Note

• Field is evolving.
• Must pay attention to existing interfaces
• Even more spread between new and experienced
  clients/customers/users
• BUTnew interfaces / metaphors can take over
• IPOD

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

13
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

14
(No Transcript)
15
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

16
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

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

18
eXtensible Markup Language

• used for content
• Document Type Definition DTD
• Human readable and machine readable
• Flash ActionScript and JavaScript classes and
  methods for access
• basis of VoiceXML language for telephone (speech
  recognition) applications

19
lt?xml version"1.0" encoding"utf-8"?gt
ltalbumgt ltitemgt ltpicname
place"Ithaca"gtpicnic3.jpglt/picnamegt
lttitlegtPicniclt/titlegt lt/itemgt
ltitemgt ltpicname place"Mt. Kisco" gt
three.jpglt/picnamegt lttitlegtCelebrating
thesis defenselt/titlegt lt/itemgt
ltitemgt ltpicname place"Ithaca"
gtdog.jpglt/picnamegt lttitlegtEsther,
Corey and the doglt/titlegt lt/itemgt
lt/albumgt
20
XML data driven websites

• Use Flash ActionScript 3.0. or JavaScript to
  build website (multiple pages and/or interactive
  page) based on data in XML file.
• Reasons
• Focus on functionality independent of specific
  content
• XML common interface between applications
• Practice in ActionScript and JavaScript

21
Accessibility

• Special needs
• For example, visually impaired
• Language
• Localization
• For example, dates
• Other?

22
User observation study

• Pick computer application, e.g., website.
• Determine functions and user groups.
• Recruit 3-5 users
• Represent different groups and/or levels of
  experience, etc.
• Structure session define task.
• Observe and assess usability

23
Hand held devices

• Cell phones
• Music players
• Personal Digital Assistants
• Digital cameras
• Global Positioning Systems
• Combinations?
• Other?

24
Hand held devices

• Team project. Class defines categories and teams.
• Pick 2 products in the category.
• Define critical functions, user groups, metrics.
• Assess and compare usability.
• Present findings to class
• Screen shots
• Scores

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

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

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

28
lt?xml version"2.0"?gt ltvxml version"2.0"gt
ltformgt ltfield name"childid"gt ltpromptgt
ltaudio src"whosthis.wav"gtHello. Who is
calling?lt/audiogt lt/promptgt ltgrammar
type"application/x-gsl" mode"voice"gt lt!CDATA
dan daniel (daniel meyer) (dan meyer)
ltchildid "daniel"gt aviva (aviva meyer)
ltchildid "aviva"gt esther (esther minkin)
ltchildid "esther"gt gt lt/grammargt
29
ltcatch event"noinput nomatch"gt ltaudio
src"sorry.wav"gtSorry. I didn't get that.lt/audiogt
ltexit/gt lt/catchgt ltfilledgt ltif
cond"'daniel'childid"gt ltgoto
next"danfollowup"/gt ltelseif
cond"'aviva'childid"/gt ltgoto
next"avivafollowup"/gt ltelseif
cond"'esther'childid"/gt ltgoto
next"estherfollowup"/gt ltelse/gt
ltreprompt/gt lt/ifgt lt/filledgt
lt/fieldgt lt/formgt
30
ltform id"avivafollowup"gt ltvar name"rest"
expr"1000"/gt ltfield name"bcount"
type"number"gt ltpromptgt ltaudio
src"howmanycranes.wav"gtHello, Aviva. How many
cranes have you made? lt/audiogt
lt/promptgt ltgrammar type"application/x-gsl"
mode"voice" gt lt!CDATA NATURAL_NUMBER_THRU_9999
gt lt/grammargt ltcatch event"noinput nomatch"gt
ltaudio src"sorry.wav"gtSorry. I didn't get
that.lt/audiogt ltexit/gt lt/catchgt
31
ltfilledgt ltassign name"rest"
expr"1000-bcount"/gt ltaudiogt ltvalue
expr"rest" /gt lt/audiogt ltaudio
src"togo.wav"gt to go. lt/audiogt ltif
cond"restlt200" gt ltaudio src"homestretch.wav"
gtYou're in the home stretch lt/audiogt
ltelseif cond"restlt500" /gt ltaudio
src"morethanhalf.wav"gtMore than half way
lt/audiogt ltelseif cond"restlt800" /gt
ltaudio src"goodstart.wav"gtOff to a good
start lt/audiogt ltelse/gt ltaudiogt
Get a move on lt/audiogt lt/ifgt ltaudio
src"goodbye.wav"gtGood bye. lt/audiogt
lt/filledgt lt/fieldgt lt/formgt
32
Activity

• Complete cards
• name, major, previous programming courses, ?
• Go to blog http//matnme3440.sp09.blogs.purchase.
  edu
• Whole class tags would be
• Introduction
• ?
• Make post describing experiences with Blackboard,
  blogs, etc.

33
Homework

• Comment on other posts
• Review Flash ActionScript and JavaScript