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

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

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)

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

Do these look familiar?

Applications

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!

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

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

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

How are great interfaces made? Hard work!

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

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.

HCI: it’s not just for desktops!

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

Tablet Applications

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

Classroom Presenter Slides from 15-211

Adaptive Book (CMU)

Physics Illustrator (MIT)

3D Journal (Cornell)

AVL Tree Animator

Tablet Math Whiz

Classroom Presenter

Other Mobile Devices

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

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

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

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

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

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

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

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.

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.

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

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

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

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

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

Navigation Start Page Page Page Page

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

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

Story Boarding

Heuristic Evaluation Ananda Gunawardena Carnegie Mellon University Computer Science Department

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

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

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

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

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

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

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.

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.

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.

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.

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.

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”

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

Example

Example

Example

Example