1

User Interface Design

IS 403 – Fall 2013Shaun Kane

Class 1: Introduction

2

Today• Introductions• Syllabus and course policies• What is HCI?• What is design?• What is good design?

3

Introductions

4

Introductions: About me• Third year at UMBC• PhD at University of Washington in 2011• Undergrad at University of Massachusetts

in computer science

This is my cat, Abe

5

My experience• Writing HTML since

~1996

• Worked at Filament Group, Microsoft, Intel

• Designed many, many user interfaces and prototypes (see http://shaunkane.me)

6

Google Glass• An experiment

– How is this useful in class?– What is it useful for?– Education apps?

• Social contract– Won’t record in class

without asking first– Highest grade on quizzes

gets to try it

7

Introductions: About you• Name• Major• Year• How you spent your summer• Your career goal(s)• A particular skill you’re really good at

8

What I did this summer

9

Syllabus / Course Info

10

This class• My first time teaching this class!

• Will check in periodically for feedback from class (or use anon feedback form on web site)

• No textbooks, but need materials

• Materials from Amy Hurst

11

Checklist• Syllabus• Participation form• Course web site:

– http://bitly.com/umbcis403• Course calendar• Blackboard• Extra credit

12

Extra credit• http://doodle.com/bp26ycr5uzreev55

• 9/3, 9/5, 9/10, 9/12: Summarize readings in a 5-10 minute PPT

• 9/17 (2 slots): Take notes on student feedback

13

What you will learn• Design and Engineering

– design processes– user interface toolkits– building useful and usable things!

• Science– conduct usability evaluations– empirical methods, how to handle data– use data in design

• Art– an eye for the good, the bad, and the not so good– what to do about them

•Technology: as a means to an end (take IS448 to become a web hacker)

14

Why learning this is important• You will likely find yourself involved in the

creation of an interactive system, and will want to do it well

• You will be working with people with different training than you and need to understand their processes

• Integrating design, research, and evaluation key to many IS careers

15

Why have class?• Why not just read a book?

• Why not just study online / take a MOOC?

16

Why have class?• Curation: I have experience in design, can show you

where to look

• Assignments: Learning by doing is key (and it helps to have guidance)

• In-class interactions: Working with others on the same thing

• Learn by doing: make things, fail, gather data, repeat

18

Hard work• This class is difficult

• Simply completing the assignment as specified is a B

• As are for work that is well crafted– Show evidence of real thought, testing,

revising

19

Balancing tech and design• Before we can build things, we need to know

what to build– Design methods (brainstorming, user research,

prototyping)

• But technology’s capabilities determined by underlying infrastructure

• Solution: we’ll bounce back and forth

20

Who are you?• A hacker?• An artist / creative type?• A manager / people person?• Something else?

21

For next time• Complete A0: Sign up form• Reading: Krug, Chapters 0-2• Get a notebook and writing tools

• Now: A little about HCI and design…

22

Introduction to HCI and Design

23

Vocabulary fun• Lots of new terms

– HCI– HCC– Design– User-centered design

What is HCI? (or HCC)

• Human computer interaction;

24

25

What is HCI?“Design, evaluation and implementation of interactive computing systems for human use and the study of the major phenomena surrounding them.”

–Special Interest Group on Human-Computer Interaction (SIGCHI) of the Association for Computing Machinery (ACM)

26

Interactive computing system?

27

Interactive computing systems

• Single PC - capable of displaying web pages

• Embedded devices, for example in cars and in cell phones

• Handheld Global Positioning Systems for outdoor activities

• Software that allows collaboration

HCI is Interdisciplinary

28

Computer Science

DesignBehavioralScience

HCI

29

HCI is Interdisciplinary• Interdisciplinary and eclectic, building on a

dozen different disciplines…

30

Fields that HCI builds on• Computer Science

– Implementation of website or other interface• Engineering

– Faster, cheaper equipment• Ergonomics

– Design for human factors• Graphic design

– Visual communication• Technical writing

– Textual communication

31

Fields that HCI builds on, continued

• Linguistics, artificial intelligence– Speech recognition, natural language processing

• Cognitive psychology– Perception, memory, mental models

• Sociology– How people interact in groups

• Anthropology– Study of people in their work settings

HCI is for misfits

32

What skills does an HCI expert have?

33

Design

34

What is design?• Practical, aesthetic considerations• Usability – how well, how efficiently it

works• Understanding audience• Solving a Problem

35

Is design art?

Design IS art… Design IS NOT art…

36

37

Is design subjective?

39

Is design subjective?

http://www.google.com/trends/

40

Is design SCIENCE?

41

Is design SCIENCE?

http://mrgan.tumblr.com/post/53308781143/wrong

42

Balancing science and intuition

• Use known facts about human cognition, perception, ability– e.g., rule of thirds, 7 ± 2

• Use empirical methods to test hypotheses, evaluate, and iterate

• Design is not magic

43

Who are designers?

44

Quotes on design• “Design is not just what it looks like and

feels like. Design is how it works.”- Steve Jobs

45

Quotes on design• “Design is a plan for arranging elements in

such a way as best to accomplish a particular purpose.” – Charles Eames

46

Quotes on design• “Engineering, medicine, business, architecture

and painting are concerned not with the necessary but with the contingent - not with how things are but with how they might be - in short, with design.” – Herb Simon

47

Design process

48

(One) Design process

Make something Done!

49

How do we know what to build?

Make Done!User research

requirements

50

How do we come up with ideas?

Make Done!User research Ideate

the best ideas

many failed ideas

51

How do we know if we’re right?

Prototype Done!User research Ideate Evaluate

52

Closing the loop

Prototype Done!User research Ideate Evaluate

53

Activity: Good and bad design

• Let’s start to come up with some ideas about what makes good design and what makes bad design

• We’ll come up with designs we love and designs we hate– And figure out why

Good design is… Bad design is…

54