Post on 24-Feb-2016
description
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