1. Human-Computer Interaction
15-397
Pen Based Computing
Fall 2007

2. HCI HCI is the study of how humans interact with machines
Understanding how users interact with computers is important to design applications that are used by millions of people
HCI always assume that “user is not like me”
Design must take into consideration
Navigation, aesthetics, look and feel, user cognition, user experience, user culture, language

3. HCI The purpose of learning HCI is to build systems that are
Functional
Usable
Safe
Goal is to make computers adapt to humans (rather than other way around)

4. Usability A user interface (UI) should be Easy to learn
Easy to remember
Effective to use
Efficient to use
Fun to use

5. Do these look familiar?

9. Applications

10. Are these the best ways. Maybe. Probably not. They are still improving
Are these the best ways? Maybe. Probably not. They are still improving. People keep trying to make the desktop easier to use!

11. We would have to find out by running experiments.
Which one is better?
We would have to find out by running experiments.
One is not necessarily better just because it looks ‘cooler’.

12. User Interfaces User Interface (UI) “CS” definition:
What is UI?
“CS” definition:
“visible piece of software which makes the services of the underlying system easier to utilize efficiently (and effectively)”
another definition:
“The way in which a piece of software looks, behaves, and reacts to the user.”

13. UI research is a cool and important part of computer science!

14. How are great interfaces made? Hard work!

15. ..\..\..\Grad I\Intro Lab\Final\culturalmodel.gif

18. Why is HCI Important?
One might ask, “Does it really matter? As long as the software works, who cares what it looks like?”
One reason Windows won ‘the war’ was because it improved the UI.
High quality software has people working to create a fantastic user interface.

19. HCI: it’s not just for desktops!

20. Developing Mobile Applications
Mobile Devices are an important part of our lives
We have mobile phones, smart phones, PDA’s
The design and implementation of mobile applications require an understanding of the user and the context of use
User interface of a mobile application presents various challenges
Eg: cell phone keypad, Tablet Pen
Developing applications for touch screen devices is different from developing applications for devices with keyboards
Another challenging aspect is designing and developing for different types of devices
There are various software platforms for developing these applications

21. Tablet Applications

23. Math Helper (CMU)
Developed in C#/.net with Factoid API’s from Microsoft

24. Classroom Presenter Slides from 15-211

25. Adaptive Book (CMU)

26. Physics Illustrator (MIT)

27. 3D Journal (Cornell)

28. AVL Tree Animator

29. Tablet Math Whiz

30. Classroom Presenter

31. Other Mobile Devices

33. Consider mobile phone All devices present new constraints
The mobile phone is very small, how do we provide information while still making it
easy to read
easy to use while in motion
usable with one or two fingers
attractive

35. Mobile Phone Applications
Typically exists individually or in groups
Contacts
Messaging
Get it now
Recent Calls
Settings and Tools
Settings and Tools Group
Tools group
Alarm clock, world clock, calendar, notepad, calculator
Sound settings
Airplane mode

36. Exercise
Find an application within your cell phone that has at least 3 screens
What is the application?
What are the three screens

37. Draw the application screens on the template below
Write a description of each screen

38. Draw the application screens on the template below
Write a description of each screen

39. Draw the application screens on the template below
Write a description of each screen
Send all three screens now

40. A first step towards making a usable computer application
Storyboarding
A first step towards making a usable computer application

41. What is storyboarding?
Storyboarding is when you draw out each screen, view, or page of an application.
A MAP of the application screen by screen.

42. Why is storyboarding important?
Your first shot at planning!
So everyone can agree what the application will look like and how it will be structured
Making a map of the structure will help the team divide and conquer
Better to disagree on paper that takes 5 minutes than to disagree when you’re 2 days into the project and have spent a lot more time.

43. Pages
Each box represents a screen, and drawn inside each box is a rough design of how that screen will look.
Pages

44. Navigation Arrows drawn between boxes show how screens are connected
Most lines represent links, or buttons a user clicks on.
Double-arrowed lines show a user can go BACK
Link between two pages

45. More than one path
If there is more than one page the user can go to, then we number the button/link and the paths

46. Navigation What’s wrong with this storyboard’s navigation? Start Page

47. Navigation Missing link to yellow page. No way to go BACK
Start
Missing link to yellow page.
No way to go BACK
Can a user re-start this application?
Page
Page
Page
Page

48. Navigation
Start
Page
Page
Page
Page

49. A Photo Annotation System
Suppose I’d like to develop a mobile application that takes pictures and allow me to annotate and share those pictures
Here are the things I’d like to have
Take a picture
Save a picture
Remove a picture
Label/Annotate a picture
Find a picture
Send a picture

50. Organizing the App Main Menu Find a picture Some graphic
Take a Picture
Find a Picture
Remove a picture
Label, save, retake, do not save
Find a picture
Type a keyword to search
Find a picture(s) matching the keyword
Select the picture
View
edit the label
Confirm to delete
Delete the picture

51. Story Boarding

52. Heuristic Evaluation Ananda Gunawardena
Carnegie Mellon University Computer Science Department

53. Heuristics Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition vs. recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Error recovery
Help and documentation

54. H1: Visibility of System Status
searching database for matches
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Simple and natural dialog

55. H2: Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
In Mac, drag disk to trash can to eject – bad example

56. H3: User Control and Freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
Always have more than one choice available

57. H4: Consistency and Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Use standard conventions like file, edit, view, insert (if applicable) in your toolbars

58. H5: Error prevention
Careful design which prevents a problem from occurring in the first place

59. H6: Recognition rather than recall
Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

60. H7: Flexibility and Efficiency of Use
Edit
Cut
Copy
Paste
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

61. H8: Aesthetic and Minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

62. H9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

63. H10: Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

64. H8: (Good thing) Minimalist design.
H5: Error prevention. If users presses “No” by accident, the picture will be gone forever! Must include an “undo” action.
H2: (Good thing) Speaks the user’s language. “Yes/No” is better than “Ok/Cancel”

65. Exercises
For each of the following screens, indicate which heuristic is violated
Use one of the following

66. Example

67. Example

68. Example

69. Example