Samsung Galaxy Gear - A Long Time Coming cs160. cs160. - - PowerPoint PPT Presentation

Samsung Galaxy Gear - A Long Time Coming

welcome to cs160!

June 22, 2015 Valkyrie Savage

cs160. valkyriesavage.com cs160. valkyriesavage.com

http://stackoverflow.com/questions/238177

the desktop metaphor

Tim Mott, mid-1970s, from Moggridge, 
 Designing Interactions, p. 52

http://www.wallpaperhdcollection.com/wp-content/uploads/2014/04/windows-7-desktop-wallpapers-2.jpg

dvdmerwe on flickr

dirkvorderstrasse on flickr

https://www.youtube.com/watch?v=RoxKyKn8_qI#t=0m45s https://www.youtube.com/watch?v=jM_a1h9h8Fc https://www.youtube.com/watch?v=spiKgkW1UmI

instructor: Valkyrie Savage

PhD student in HCI (graduating December??)

• research focus : design for 3D printing
• hobbies : jugger & cooking

T As: Andrew Head Michelle Nguyen

• reader:

Diane Wang

who are you?

agenda

enrollment course overview project course mechanics assignments

enrollment : CS160 is popular

scaling is coming soon…

sreejithk2000 on flickr

CS160 is serious business

course overview

this course

• is about reliably building very good interactive systems.
• this semester we focus on smart watch companion apps: apps that span both a

mobile phone and a smart watch for increased availability and expressiveness.

• the goal is to build a working interactive prototype.
• we emphasize fieldwork, rapid prototyping and user testing to find the right

design and avoid obvious and not-so-obvious mistakes.

Human-Computer Interaction (HCI)

Human End-user of program Others (friends, collaborators, coworkers) Computer Machine program runs on Often split: clients & servers Interaction User tells the computer what they want Computer communicates results

User Interfaces (UIs)

Part of application that allows People to interact with computer Computer to communicate results Can include hardware design Buttons, sliders, other sensors HCI = design, prototyping & evaluation of UIs

http://www.reactable.com

Why Study User Interfaces?

“The results show that in today's applications, an average of 48% of the code is devoted to the user interface portion. The average time spent on the user interface portion is 45% during the design phase, 50% during the implementation phase, and 37% during the maintenance phase.” 
 – Myers & Rosson, CHI’92

Why Study User Interfaces?

Major part of work for “real” programs (approx 50%) You will work on “real” software (intended for people other than yourself!) Bad user interfaces cost Money, Lives, Votes, … User interfaces hard to get right by intuition or modeling People are unpredictable

Why Y

• u Should Care: The Dramatic

1995 American Airlines jet crashed into canyon wall, killing all aboard. On approach to Rozo airport in Colombia Pilot skipped some of the approach procedures Pilot typed in “R” and system completed full name of airport to Romeo Guidance system executed turn at low altitude to head for Romeo airport 9 seconds later plane struck canyon wall

• Is the pilot to blame?
• http://en.wikipedia.org/wiki/American_Airlines_Flight_965

Why Y

• u Should Care: The Dramatic

7-Segment Displays 
 [Thimbleby, 2013]

• Air Inter Flight 148
• Medical Devices
• Rescue Equipment

Why Y

• u Should Care: The Mundane
• Usability problems add up quickly
• Many minor usability issues are “4 minute

errors”

• Two 4 minute errors per week, per person, on a

team of 100 = ~one month of lost time/year

• You owe it to your users to get these things right

Interface Design Cycle

Building Successful Interfaces

• 1. Task analysis & contextual inquiry
• 2. Rapid prototyping
• 3. Evaluation
• 4. Iteration (back to 1)

Task Analysis & Contextual Inquiry

Observe existing practices Create scenarios of actual use Create models to gain insight into work processes Key Concept: You are not the user!

http://www-personal.umich.edu/~chrisli/m2.html

CS247, Stanford, 2006

Rapid Prototyping

Build a mock-up of design (or more!) Low fidelity techniques
 Paper sketches
 Cut, copy, paste
 Video segments Interactive prototyping tools
 HTML, Flash, Javascript,
 Visual Basic, C#, etc. UI builders
 Interface Builder, Visual Studio, NetBeans

http://www.balsamiq.com/products/mockups/examples#wiki

Moggridge, Designing Interactions, p.704

Evaluation

Evaluate analytically (no users) Test with real target users Low-cost techniques
 expert evaluation
 walkthroughs Higher cost
 Controlled usability study

http://www.laurasmith.info/UsabilityTest.jpg

goals of the course

Technology used to prototype & implement UI code How to work together on a team project Communicate your results to a group Many of these will be key aspects of your future jobs

Learn to design, prototype, evaluate interfaces Discover tasks of prospective users Cognitive/perceptual constraints that effect design Techniques for evaluating an interface design Importance of iterative design for usability

CS160 and the CS Curriculum

Most courses for learning algorithms and technology
 Compilers, operating systems, databases, etc. CS160 concerned with design, prototyping & evaluation
 We assume you are comfortable programming. 
 Technology as a tool to evaluate design ideas via prototyping.

class project overview

smart watch companion apps, developed in teams

Photo: Flickr user wwworks

smartwatches

Samsung Galaxy Gear - A Long Time Coming

8 things about smart watches

http://theoatmeal.com/blog/apple_watch

8 things I learned from wearing an Apple Watch for a couple of weeks

#1 : the apple watch will never replace your iphone #2 : battery life isn’t a problem #3 : the Taptic Engine could mean the death of the ring tone … #8 : this is the future

project theme : smart watch apps!

mobile + smartphone companion apps

• different kinds/numbers of sensors

project constraints

theme : exploration, adventure, travel, …
 we will prototype apps for folks on-the-go apps must demonstrate communication between a phone and a watch
 you’ll have to prototype BOTH parts of the app during the term target users may not be overly broad, and may not include you!
 “college students” is way too broad of a group. consider “young mothers with children visiting Italy” or “the elderly at a museum”. must solve a real-world problem.


project platform: Moto 360 Smartwatch

Android (Java) - emulators exist for this! I/O - pulse sensor, accelerometer, ambient light, 2 mics, circular screen, vibration motors plan on using your own phones : buy a cheap one if you need it (teams will be assigned so that each has at least one phone)

teams

course staff will form groups at the end of week 1
 4-5 students per team
 you’ll work with students with different skills/interests team project is cumulative
 go through an entire design process on one project

course mechanics

this will work, somehow

• http://cs160.valkyriesavage.com
• ffice hours there
• piazza link there
• submissions via hackster.io

requirements

you must be comfortable with programming individual programming assignments require you to write Java code using an Android dev environment. you must be able to attend one of the sections you must commit to working with your assigned team on your project

• ffice hours

Valkyrie: Tuesday 13:30-14:30 Soda 511 Andrew: Monday/Wednesday 15-15:30, Friday 11-12 411 Soda Michelle: Monday/Thursday 15:30-16:30, 651 Soda

lecture & studio

lecture : Monday & Wednesday (Soda 306) studio : Tuesday & Thursday (Wheeler {206,210}) studio is REQUIRED we will do some in-class assignments you can get feedback and work on your projects group work

section

Monday & Wednesday 13:00-14:00, 14:00-15:00 in 320 Soda Sections start TODAY Android course materials attend any section!

course homepage

http://cs160.valkyriesavage.com

readings

Readings are very important to the class
 Do the reading before class.
 Midterm will include topics only covered in readings Readings will be linked from web and bCourses. Online reading responses (ongoing assignment)
 You must post one substantial answer or comment per lecture, before class. You get 3 slip days for reading responses. Responses are a major factor in your class participation grade.

reaching the course staff

Questions about course materials, design assignments:
 https://piazza.com/berkeley/summer2015/cs160 Private questions:
 If other students will benefit from an answer, ask publicly on Piazza. If it’s personal, use Piazza’s private messaging feature. You can also post anonymously. Do not email us directly!

assignments

individual programming assignments
 Make sure you have the skills to implement your group project
 Individual performance metric individual design assignments
 Practice design and evaluation
 Also an individual performance metric group project assignments throughout semester groups self-assess participation 
 You evaluate your team mates and vice versa

peer assessment

you will be evaluating others’ work over the course of the semester,
 and others will be evaluating your work 
 this will happen in person (in studio) as well as online (bcourses)
 the quality of your evaluations will figure into your grade


• thers’ evaluations of you will figure into your grade

grading

Participation: 10% (reading responses, section, lecture, studio) Individual Assignments: 20% (programming & design) Peer Assessment: 10% Midterm: 20% Group Project: 40%

policies

Late Assignments
 Individual assignments lose 33% per day (weekends count).
 Group assignments will not be accepted late.
 You have 3 slip days for reading assignments.
 Peer evals will be done in-class, and cannot be turned in late. Cheating (official)
 Will get you an F in the course.
 More than once can get you dismissed from Cal.

assignments are on the schedule

assignment: course enrollment survey

due tomorrow before class all students must submit information will help us form groups

assignment: reading response

On the Same Page
 by Deb Aoki Users' Story: UX Storyboarding
 by Frank Garofalo

assignment: reading response

Due before studio tomorrow. Respond to a prompt about the reading. Will be graded:
 Scale of 0 - 2 Reading and response form on bCourses.

assignment: individual design 1

due EOD Friday summary: interview two non- college-student individuals about smartphone interactions they wish were more convenient. create a prototype of a smart watch interaction that might solve one problem you identify, and test it.

assignment: let’s travel!

build a phrase translation app. due EOD Thursday. Android tutorials this week in section. in studio Thursday, we will have

• CRITIQUES. you must have

something to show by studio Thursday!

extra credit : hall of fame/hall of shame

find an interface you think is really great or really terrible use HCI principles that you’ve learned so far to analyze the interface present your findings during 4 minutes of Berkeley time before lecture (doodle for signup)

hackster .io

welcome to cs160!

June 22, 2015 Valkyrie Savage

cs160. valkyriesavage.com cs160. valkyriesavage.com