CS 3120

USER INTERFACE DESIGN, IMPLEMENTATION AND

EVALUATION (UIDIE)

Dr. Ben Schafer

www.cs.uni.edu/~schafer/3120

2

Getting to know you

• “Mugshots”

• Information Sheet

Getting Started• Name : Dr. Ben Schafer• Hometown : Ames originally but …• Class : 15th year (plus 5 as an undergrad)• Previous languages/comfort: Too many to list.

But Java and Python are the ones I use the most.• Anything you should know about me :• My handwriting can be messy• My voice can get loud.

So what is this course all about?

• A taste of what you’ll be doing… UI Hall of Fame/Shame

UI Hall of Fame or Shame?

How do I open the door?

Door #1

How do I open the door?

Door #2

How do I open the door?

Door #3

Door #1

Door #2

Door #3

No instructions needed!

Shame, Shame, and Fame

• Simple things should be simple to operate– Instructions / explanations are a sign of failure!

• Affordances

• Visibility

UI Hall of Fame or Shame?

Hall of Fame

• People are better at recognizing what they’re looking for than recalling it

• Promote recognition over recall

UI Hall of Fame or Shame?

Hall of Shame

• Who reads documents five lines at a time?

• Match between the system and the real world.

• Ok, technically you only READ one line at a time. However, who SKIMS five lines at a time?

UI Hall of Fame or Shame?

UI Hall of Fame or Shame?(What if I told you they do different

things?)

Hall of Shame

• A picture isn’t ALWAYS worth 1000 words.

• The designers had good intentions, but they were caught between several design principles.– Match between the system and the real world– Differentiate between actions

So what’s this all about?

• A taste of what you’ll be doing… UI Hall of Fame/Shame

• The study of a form of Software Engineering

• The study of the field of HCI.

Human-Computer Interaction (HCI)

• A discipline concerned with the design, evaluation and implementation of interactive computing systems for human use

• Interdisciplinary– Computer Science; Psychology; Sociology; Anthropology; Visual

and Industrial Design; …

design

implementationevaluation

Current HCI we will study

• Human psychology– Short-term & long-term memory– Problem-solving– Attention

• Design principles– Conceptual models; knowledge in the world;

visibility; feedback; mappings; constraints; affordances

Current HCI we will study

• Understanding users and tasks– Tasks, task analysis, scenarios

• User-centered design– Low, medium, and high-fidelity prototypes

• Evaluating designs– Without users: cognitive walkthroughs; heuristic

evaluation; action analysis

– With users: qualitative and quantitative methods

Course Logistics

• Textbooks – The Design of Everyday Things (3rd), Donald Norman

– Designing with the Mind in Mind(2nd), Jeff Johnson

– Task-Centered User Interface Design, Clayton Lewis and John Rieman (online)

• Class website– http://www.cs.uni.edu/~schafer/3120/

– Syllabus, project guide, lecture notes, etc.

Course objectives

• Become an informed observer of people, objects, and how they interact

• Learn principles of human psychology that form the basis of user-centered design

• Learn to apply a task-centered user interface design method

• Learn user interface evaluation methods

Meeting the objectives

• Class activities– Lecture: introduce design/evaluation concept– Exercises: practice and learn the concepts– Studio: most Friday’s you will bring a

deliverable which we critique as a group.• Group project

– Will require a significant amount of time!– Is worth a significant portion of your grade!

Evaluating your progress

Project 65%

Final Exam 15%

Quizzes 7.5%

Class participation 12.5%

November 16th

4 unannounced/Count 3Daily

Hall of Fame/Shame

10 % indiv. / 55% group

The Project• Done in groups• ~4 members• Projects must have at least two real users (who are

not members of the team)• Find a project that you can get excited about• Find people with shared goals, vision, and work

style• Get started now!

– If you have a project, start selling it

Project Timeline (1)Week Tasks

1 It Bugs Me!

2 Groups Formed??

3 Project proposal

4 Visit Plan

5 User visit report due, task analysis

6 Revised proposal

7 Initial Prototype

8 Walkthrough scenarios

Project Timeline (2)Week Tasks

9 Cognitive Walkthrough

10 Heuristic Evaluation

11 First running prototype due, user evaluation plans due

13 User evaluation reports/ Change list

14 Presentation plans

15 Final implementation, project presentation

Next Steps• Reading:

– For next session, read DMM, Chapter One– Get started reading DOET (Finish by Sept. 9th)

• Project:– Begin brainstorming ideas.– “It Bug’s Me” Activity

• Next class:– Basic human psychology– Design concepts and principles