213: User Interface Design & Development Prof: Tapan Parikh...
-
date post
21-Dec-2015 -
Category
Documents
-
view
221 -
download
2
Transcript of 213: User Interface Design & Development Prof: Tapan Parikh...
![Page 1: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/1.jpg)
213: User Interface Design &
Development
Prof: Tapan Parikh ([email protected])TA: Deepti Chittamuru (
Lecture #1 - January 20th, 2009
![Page 2: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/2.jpg)
Today’s Outline
1) What’s this class about?
2) Introductions
3) Course Overview
4) Group Project
5) Administrivia
![Page 3: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/3.jpg)
What’s this class about?
![Page 4: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/4.jpg)
UI Design and Development
Methods, theories, heuristics and tools
for the design, implementation and
evaluation of user interfaces
The study of which is often termed
human-computer interaction, or HCI
Not only useful for UI, but also for
designing all kinds of useful and
usable applications and technologies
![Page 5: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/5.jpg)
Human-Computer Interaction
![Page 6: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/6.jpg)
Design Implement
Evaluate
![Page 7: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/7.jpg)
Why is HCI important?
![Page 8: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/8.jpg)
![Page 9: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/9.jpg)
![Page 10: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/10.jpg)
Design Implement
Evaluate
![Page 11: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/11.jpg)
Design Computer Science
Psychology
![Page 12: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/12.jpg)
Design = Art + Engineering
When I first saw this site, I thought it would be best to do nothing. - S.Calatrava
![Page 13: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/13.jpg)
Comp Sci = Science + Engineering
In 20 or 30 years, you'll be able to hold in your hand as much computing knowledge as exists now in the whole city, or even the whole world. - Douglas Engelbart
![Page 14: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/14.jpg)
Psych = Natural + Social Science
For an experiment in hand movement, post doc [name removed] electrically stimulates parts of lab manager [name removed]’s brain. - Berkeleyan, Janaury 25, 2007
![Page 15: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/15.jpg)
Introductions
![Page 16: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/16.jpg)
Course Overview
![Page 17: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/17.jpg)
Design Implement
Evaluate
![Page 18: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/18.jpg)
Course Outline
Weeks 1-6: Design
–Design process, methods,
principles
Weeks 7-9: Evaluation
–Qualitative, quantitative methods
Weeks 10-12: Implementation
–Toolkits, frameworks, theories
Weeks 13-14: Final Project Pres.
![Page 19: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/19.jpg)
Group Project
Design, implement and evaluate a working prototype for a user need that you have identified
Can be a web-based, mobile or standalone application
2-4 members per group
![Page 20: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/20.jpg)
Potential Projects
Personal Health Record (PHR) for
migrant vineyard workers
Information tools / skills for
services to HIV+ homeless people
Knowledge access and sharing for
ethnic minority farmers
Connecting small organic farmers to
concerned consumers
![Page 21: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/21.jpg)
Benefits of a Team Approach
UI design requires many different skills– Design
– Management
– Programming
– Observation
– Writing
– Speaking
You must work together with others who have complementary abilities
![Page 22: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/22.jpg)
Kinds of Groups
Managed Groups– strong leader– individual accountability
– organizational purpose
– individual work products
– efficient meetings– measures performance by influence on others
– delegates work
Teams– shared leadership– individual & mutual accountability
– specific team purpose
– collective work products
– open-ended meetings– measures performance from work products
– do real work together
Adapted from James Landay, Marti Hearst
![Page 23: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/23.jpg)
Group Project Schedule
Subject to change
![Page 24: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/24.jpg)
Group Project Schedule
Week 10: Experiment Design
Week 12: Revised Prototype
Week 14: Final Presentation
Week 16: Final Report
Subject to change
![Page 25: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/25.jpg)
Grading
Subject to change
![Page 26: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/26.jpg)
Administrivia
![Page 27: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/27.jpg)
Administrivia
Class meets T,Th 330-5 PM in South Hall 202
Class website:
http://courses.ischool.berkeley.edu/i213/s0
9/
Prof’s office hours are Wed 1030-1130, Fri
3-4 in SH 303B (let me know if you’re
coming)
TA’s office hours are by appointment
![Page 28: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/28.jpg)
Mailing List
Email [email protected] with:
subscribe i213
in the body. You will receive a confirmation message to which you must reply. If you have any difficulty, send email to [email protected]
If you are signed up for class or on the waiting list, you have already been subscribed
![Page 29: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/29.jpg)
Course Wiki
Linked from the course home page…
For organizing / submitting project
materials
You can also use the Wiki to post content
that is relevant for the entire class
* Please use the course mailing list and
Wiki *
![Page 30: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/30.jpg)
Readings
Readings are due before class
Posted to the course schedule at least one week in advance
List of recommended books on home page - useful as references, but not essential
![Page 31: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/31.jpg)
Show & Tell
![Page 32: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/32.jpg)
Show & Tell
Nothing motivates design better then real
artifacts
Whenever we have time, we will use the last ten
minutes to discuss an application, device,
interface, widget, trend or another topic
related to HCI
Sometimes I will supply the topic, but I also
expect students to come prepared with their own
ideas - this is part of class participation!
![Page 33: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/33.jpg)
For Thursday
Bring in examples of user interfaces,
applications or technologies that are either
extremely well-suited or poorly-suited for a
particular user group and/or task
– Who is it designed for?
– What is it supposed to do?
– Does it work well?
– Does it look good doing it?
![Page 34: 213: User Interface Design & Development Prof: Tapan Parikh (parikh@ischool.berkeley.edu)parikh@ischool.berkeley.edu TA: Deepti Chittamuru (deepti@ischool.berkeley.edu)deepti@ischool.berkeley.edu.](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d585503460f94a36f0e/html5/thumbnails/34.jpg)
Also For Next Time
Four short readings, linked from home
page
– Accessing readings requires an ISchool
account http://ischool.berkeley.edu/arf/
Start thinking about the project you
want to work on, and whom you want to
work with
Make sure you are signed up for Mailing
List