Lecture 1 - Interaction Design & Technologies

2011-10-24 Mobile ComputingDesign and ImplementationOlof TorgerssonInteraction DesignDepartment of Applied ITChalmers/GUToday• 10-12– Course info– Interaction design for mobile devices• 13-15– Introduction to Objective-C and iOS programmingNote – we use standard Chalmers hours, e.g, 10 means 10.00 and13 means 13.151

2011-10-24 About the Course• Mobile Computing – Design and Implementation– Design• Given by Interaction Design & Technologies• Assume at least one course HCI/Interaction design• Exercises will focus on interaction design issues• Interaction design important in course project– Implementation• Will have lectures about iOS programming• One lecture on Android• One lecture about iOS game programming• Course project requires a running app as resultOrganization• Lectures• Mandatory exercises– Must be done, attendance strongly recommended• Lab– Simple iPhone app• Project– Groups 2 or possibly 3 students– Invent and implement your own app• Seminars– Relevant literature• Home exam• Project presentations2

2011-10-24 • 2 modules– Project 4 credits• Exercises• Lab• Project– Report– Demo• Seminar– Home exam 3.5 credits• Grading– Project– Home examExaminationLearning OutcomesAimAfter the course the students should be able to take an ideaand turn it into a finished application, or an app as it is usuallycalled. This includes both the design of the graphical interfaceand the interaction, as well as the implementation of thedesign.3

2011-10-24 After the course the student…• Knowledge and understanding– Understand how mobile applications differ from traditionaldesktop applications, both in terms of challenges andpossibilities– Understand important trends in the use of mobile computing– List and use important guidelines for design on smallscreens– List and use important guidelines for interaction with mobiledevices– List and use relevant frameworks simplifying implementationAfter the course the student…• Skills and abilities– Design the entire user experience for a mobile platformincluding both the interface and the interaction– Use and modify standard components for user interfacedesign– Select an appropriate architecture and a set of frameworksto implement an application– Work with state-of-the-art tools for development and userinterface design4

2011-10-24 After the course the student…• Judgement and approach– Analyse existing mobile application with focus onpresentation and interaction– Choose and motivate design strategies in relation to thegoals mentioned above.– Choose and motivate appropriate implementation methodsand frameworks for a given designWorking Hours• At Chalmers students are expected to work 50 hours/week• First week 12 hourse scheduled– 13 hours of home work• Next 3 weeks 10 hourse scheduled– 15 hours or 3 hours/day home work• Week 5 and 6, 3 hours scheduled– 22 hours home work• Week 7 nothing scheduled– You can do the math5

2011-10-24 What’s Your Phone?• Type– Smart phone, ordinary…• OS– iOS, Android, Windows mobile, Symbian…• What do you use it for?– Phone– Music– Camera– Apps you use• Other Mobile Devices– iPad– Tablet PCHistory• Patent Bell 1876– Major invention– Really invented by Meucci (Wikipedia)• Televerket –> 1993– Owned all phones until the 80s• Who has one of these?– Where you live now?– Parents’ place?– Will have one someday?6

2011-10-24 Mobile Phone Phases• The Brick Era, 1973-1988– Powerful since there were so fewnetwork sites– Motorola DynaTac 8000X– $ 3 995 in 1983• The Candy Bar Era, 1988-1998– Candy form– Everyone wanted a mobile– Nokia 1610, 1995– Known for UIMore Mobile Phases• The Feature Phone Era, 1998-2008– Previously phone, sms, snake game– Music– Internet– Photos– …• The Smart Phone Era, 2002 –– Larger screen– Qwerty keyboard– Stylus– Wi-fi– Push e-mail– 10-15% market only7

2011-10-24 iPhone intro• January 9, 2007• Steve Jobs introducing the iPhone• Note the response from the audience of interaction methods wenow take for granted• Flexibility– Touch phone can be anything– Design + software• How to pitch your stuff• (27.20- 43.05)The Touch Phone Era, 2007-• Radical change• Anything-anytime-anywhere• Phones or very personal computers?• Has > 500 000 functions• Final transformation from phoneto something else– What is then?8

2011-10-24 Interaction Design• Interaction design concerns the design of computer-basedproducts and systems with a focus on their intended use.• Interaction Design | Chalmers 2006• The design of everything that is both digital and interactive.• Moggridge 2007• The shaping of use-oriented qualities of a digital artifact• LöwgrenDesign• …the imaginative jump from present facts to future possibilities• Page 1966• A goal-directed problem-solving activity• Archer 1966• The optimum solution to the sum of the true needs of aparticular set of circumstances• Matchett 19689

2011-10-24 Design for Touch Phones• What’s special about designing for these devices?Design for Touch Phones• Small screen• Very direct manipulation• Anything-anytime-anywhere• Digital material allows the gadget to become almost anything– The perfect thing• Becomes a metronome• Gestures• Sensors• Location awareness• Very personal• Scarce resources• …11

2011-10-24 Using Apps• Or what you’re up against• Anything-anytime-anywhere– One hand– One eye– On the go• Clear and simpleUsing Apps• Get it done quick• Check mail in the queue etc– One tap– Quick glance• Visual simplicity• Minimal navigation12

2011-10-24 500 000+ and counting• People have like hundreds of apps– 10 new each month– Few used > 20 times• Will switch to something else• Interrupted by others• Fit in• Have a really focused job descriptionPeople don’t know that much• Very few people learn all the tricks• Obvious– Tap– Swipe screens– Using spinners– Very real-world somehow• Hard– Multitouch– Non-standard– Invisible13

2011-10-24 Invisible• Often best to treat gestures as shortcuts• Zoom-in-out in Maps?• Week in calendar?• Scroll back to the top?Invisible• Often best to treat gestures as shortcuts• Zoom-in-out in Maps?• Week in calendar?• Scroll back to the top?14

2011-10-24 Rule of Thumb• Fingers are really a quite clumsy pointing device– And they occlude what they operate on as well• Don’t have tiny things• More than a few– People will hit the wrong one• Simplicity and ease– It’s your job toget it rightDefining Your App• What does your app do…and why?• What specific problem does your app uniquely solve for users?15

2011-10-24 Key Questions• Who, What, When, Where and Why?• Who – identifies the audience• What – the actions users will take• When and where – the context for the app• Why – motivations and goals• Use cases, storyboards, video…• Must cover the reason for a mobile device!– Don’t think downsized computerWhat Makes You App Mobile?• Must be convienient, necessary and easy to use in a mobilecontext– ”away from my desk”– On the go– In your couch– …• Find the answer to why– Anything-anytime-anywhere16

2011-10-24 Example iBird• Accessory – an app that augmentsan activity• Who – bird watchers• What – find bird info• When – watching birds• Where – in the wild• Why – identify a bird• Other– Tuner, recipe collection…Mobile Mindsets• Common reasons/usages for apps• I’m microtasking• I’m local• I’m bored17

2011-10-24 I’m Microtasking• Ideal for short microtasks– Standing in line– On the bus– …• Identify the recurring tasks peoplewill perform– Build app around them– Make them really smoothI’m local• What’s happening around me?– GPS– Motion detector– Compass– Camera– Microphone– Internet• Very common – need to be special– Very specific audience (who)– Content (what)– Need (when and why)18

2011-10-24 I’m bored• Always around to kill time when you’re bored• Games 75% of most popular paid downloads• Common theme is exploration• Some place to go and get lost– Games– YouTube– Twitter– FaceBook– …• Could have such elements in productivity appsStanding Out• 500 000+ and counting– It’s likely that someone else has done something similar– Find a unique twist• Skills– Unique rewards– Specific audience– Niche content– New visualizations– Network of users– Companion website– …• Personality– Same thing but different19

2011-10-24 Remove All Excise• Having identified Who, What, When,Where and Why?• Think big but build small– Bold – find the opportunities– Create feature list– Remove most of it– Streamlined focused experience• Identify the single most important task– Todo-list – add new item• Secondary tasks will follow• Keep the number low– And optimize, optimize,…App Categories• Apple identifies 3 main categories of apps– Utility apps– Productivity apps– Immersive apps20

2011-10-24 Utility Apps• Quickly access specific info or perform narrow task• Often visually appealing• Cooper transient postureProductivity Apps• More complete than utility apps• Perform a specific task• Standard hierarchical structure• Common– Stay connected• FB, Skype, mail…– Navigate the world• Maps, directions…– Find info• Search, News…– Transact and track• Banking, booking…21

2011-10-24 Immersive Apps• Definition of immersive:– providing information or stimulation for a number of senses,not only sight and sound: immersive television sets– An impression of being somewhere else than you really are(virtual reality)– Immersion is the state of consciousness where animmersant's awareness of physical self is diminished or lostby being surrounded in an engrossing total environment;often artificialImmersive Apps• Full screen• Visually rich• Often a game– But also tools, accessories– Or exploration• Focus on the content• Customized user experience22

2011-10-24 Immersive Apps• Make all apps immersive?That’s it for now• Todo– Read iOS Human Interface Guidelines• From top until User Experience Guidelines• Do exercise 1 outside class– Analyze some apps– Exercise 2 should be done on Wednesday• Questions?• Main sources– Tapworthy – Designing Great iPhone Apps, Josh Clark– Designing the iPhone User Experience, Suzanne Ginsburg– Mobile Design and Development, Brian Fling23