Human Computer Interaction
CSC 4730
User System Interface
CSC 8570
Class Meeting 10
November 13, 2012
Research Project
• The IRB says, “ Go ye, and gather data.”
– The official letters will come shortly
– The chair of the committee apologizes for the
delay: the envelop was lost in the mail
• Progress Report 2, due next week
• Draft of first part due in two weeks
Design Team
Here’s 15 minutes for the design teams to meet
and check their presentations.
Order of presentation:
1. Team R (for Redlands)
2. Team Q (for Quincy)
3. Team P (for Petaluma)
4. Team S (for Sacramento)
Mobile Wallet Worth Having
•
•
•
•
Design team presentations
Feedback after each team’s talk
Summary of system design
Final reports due tomorrow, Wednesday,
November 14 by 6:15 p.m.
Article Presentations
The User Experience: next week
• Presenter’s responsibilities
– 13-16 minute summary of article (or some of its
important points if the article is long)
– Connect the article to previous articles, to models
and frameworks, and to examples familiar to you.
– Be prepared to answer questions and lead
discussion (5-7) minutes
– Time limits will be strictly enforced
Article Presentations (2)
• Presentation style
– Use PowerPoint (or Keynote) slides as an outline,
meaning do not read your slides to the audience.
– Link to web resources if appropriate
– Include diagrams, tables, or images if they will be
helpful. E.g. a small concept map may be useful.
Article Presentations (3)
• Class responsibilities (for those not presenting on
the same evening)
– Read introduction and conclusion of each article.
– For two articles, read in depth and prepare two
intelligent probing questions related to each
article.
– Post the questions to piazza.com by 1:00 p.m. of
class day.
Article Presentations (4)
• Instructor will:
– Use the submitted questions to encourage
discussion.
– Judge the submitted questions according to their
intellectual content. For example, “What was the
author’s first name?” has little intellectual
content.
– Judge the presentation for content summary and
synthesis of ideas.
Web Form Design
A user interface nightmare
Overarching questions
• What is the user community?
• How tolerant, or sophisticated, are the users?
– How will community members view their user
experience (UX)?
Web Form Design (2)
Technical questions
• What should the Tab key do?
• What should the Enter button do?
• Should some fields be partitioned into
subfields, e.g. City and State in two different
text boxes?
• How should variations of data from outside
the US be handled?
Web Form Design (3)
• Should the form use automatic advancing for
fixed length subfield entry?
– For example, 610-519-6000
– Pluses: fewer keystrokes,
– Minuses: error correction, user’s mental model
Web Form Design (4)
Field types
• Name
• Address
• Fixed length numeric
– Telephone number
– Credit card number
– ZIP + 4
• Date
Address Entry
•
•
•
•
•
•
•
Addresses in free format vs. multi text box entry
Autocomplete (or autofill) of city names
City and state names defined by zip code
Cities without states, e.g. London
Easy selection of state or country names
Confirm parsing of free format
Or use persistent identity
Date Entry
• Subfield text boxes
• Single field text box
– With separator
– Without separator
• Date format
• Specialized dates: e.g. expiration date
Name Entry
•
•
•
•
•
•
•
Title
Generation
Single name: Is it the first or the last name
Initials
Name length
Culturally driven format
Names using characters from other alphabets
Web Form Entry
• Users say:
• GUEPs say:
• Design principles say:
– Choose the lesser of two evils
– Use a clear, short, neatly arranged statement of purpose at
top of form
– Tidy and organized design outweighs field ordering
– Use imperative language only for required items
Web Form Entry (2)
• Use a small number of input methods
– Five HTML form elements: drop-down list, radio button,
check box, dialog box, hyperlink.
– Scripted or programmed elements
• Keep option list short and sensibly ordered
• Offer common choices first. Cater to 80% of users
but allow the other 20% to have success.
• For long lists use plain text entry and offer choices
– Example
Web Form Entry (3)
• Choose input element
–
–
–
–
–
–
Typing vs. selecting
Potential typing errors
Review of options before selecting
Number of options
Mutually exclusive selections
Distinctiveness of options
• Mark required fields, but consider whether the field
information is really required.
Web Form Entry Errors
How should these be handled?
• Typing errors
• Transcription errors (4311 for 3411)
• Category errors
– Insisting on an entry
– Out of range
• Send errors (premature form submittal)
• Privacy errors (user does not want to supply
information)
Error Response
• Show error message close to problem
– Use constructive, non-judgmental language
• Keep supplied information
Examples
• Remodeling the house
• Going fishing
Specific Design Principles
• Ask only for necessary information
• Use proper wording
– What is an Email ID?
• Eliminate nerdy or unnecessary comments
– Example: Passwords are protected by the SHA 256
hash algorithm.
• Prevent errors before they happen by giving
examples of entries.
Next Time
• First four presentations (the user experience
interfaces) as listed on the course web page.
• Presenters: Prepare the presentation
• Listeners: Prepare two probing questions for
each of two papers. Post the questions on
piazza.com by 1:00 p.m. Tuesday, November
19. Use hashtags to connect your questions to
the appropriate paper. The tag should be the
lead author’s last name, e.g. #wilson.