Across this sessions you will learn to develop and deploy mobile applications on Apple´s iPhone, Ipod and iPad. CLASS 1. Introduction. Mobile Characteristics and Interaction Design Principles.

1. Apples’ iPhone, iPod touch and
iPad Application Programming.
In this course you will learn to develop and deploy mobile
applications on Apple’s iPhone, iPod touch and iPad
Prof. Dr. Jan Bochers
Florian Heller
Leonhard Lichtschlag
RWTH AACHEN University
Violeta Salas’ Notes
April ‘2012
Write down this url to get all slides and lecture videos that are available on iTunesU http://hci.rwth-aachen.de/iphone

2. Class 1 - Introduction
Mobile Characteristics and Interaction Design
Principles

3. Class Goals
• Understand the differences between desktop
and mobile development.
• Look at a software frame work designed from
scratch.
• Illustrate how established software engineering
patterns are applied in the real world.

4. Format
• Lecture
– 9:00 to 11:30 am online class.
– Reading assignments.
• Programming
– 4:00 – 6:00 pm.
– 7 programming assignments.
– Final project with presentation.

5. Class Topics
• Mobile application design principles.
• iOS development basics.
• View Controllers & Dialogs.
• Input techniques.
• Networking.
• Multimedia.
• Performance tweaking (rendimiento).
• iPad programming.

6. Requirements
• Oop experience.
• No Mac required.
– We will supply Macs & Ipods fro the lab.
• You must register for this course in Campus.
• To apply for the lab spot, you must fill out the
onlube survey at
http://tinyurl.com/iPhoneLab2011

7. Developing for Mobile Platforms
The iOS Family Mobile Device
Characteristics
• Screen size is compact.
• Memory is limited.
• Users interact with one
screen at a time.
• Users interact with one
application at a time
• Onscreen help is
minimal.
• Context is key (task
focus, peripheral use).

8. 9 Golden Rules of Interface Design
(see DIS I)
• Keep the interface simple.
• Speak the user’s language.
• Be consistent and predictable.
• Provide feedback.
• Minimize memory load.
• Avoid errors, help to recover, offer Undo.
• Design clear exists and close dialogs.
• Include help and documentation.
• Offer shortcuts for experts.

9. Life as an App
• The iPhone is an app-centric environment.
• One app per task.
• Do one thing but do it well.
• Data is stored per app.
• Data exchange between apps is difficult.
• Define the task that users want to accomplish
with your app.

10. Designing the UI
• Make it obvious how to use
your application.
• Sort information from the top
to the bottom.
• Minimize text input.
• Express information
succinctly.
• Provide fingertip-size targets.

11. Interaction Design
• Multitouch interaction is still new.
• Interaction patterns not established yet.
• Follow Apple’s examples if possible.
• If you use complex gestures, help the user.

12. Standard Gestures

13. Designing the UI
• Three resolutions: iPhone, iPhone 4(S),
iPad(2)
– (320*480, 640*960, 1024*768)
• Device orientation:
– Portrait or landscape.
• Designing for the iPad requires more than
increasing the resolution.

14. Example: Mail
Desktop Iphone version
Different design for the same application, it depends of
the context.

15. Example: IPhoto
Desktop Iphone version

16. Starting
• Apps should start quickly to
provide a fluid user experience.
• Show a launch image that closely
resembles the first screen of your
app.
• Restore the state of last run.
• By default, launch in portrait
orientation.

17. Stop
• No Quit button or menu item.
• Be prepared to quit at any time.
• Program flow interrupted by external events.
– Incoming phone call
• Store state when stopping.
• Application moved to background.

18. Application Styles
Productivity Utility Immersive

19. Productivity Applications
• Organizing and managing detailed
information.
• Often organize data hierarchically.
• Organizing the list, add or remove items.
• Examples: Contacts, Photos.

20. Utility Applications
• Simple task, minimum user input.
• Customized, visually attractive UI that enhances
the displayed information.
• Data is organized in flattened list of items.
• Examples: Weather, Stocks.
The elements.

21. Immersive Applications
• Full-screen, visually rich UI.
• Focussed on content and user experience.
• Tends to hide much of the device’s user interface.
• Custom navigational methods.
• Examples: Living Earth, Carpenter.

22. iOs Overview

23. Cocoa Touch Architecture

24. iPhone OS Frameworks

25. Summary
• Keep hardware restrictions in mind.
• Carefully design the user experience.
Reading assignment: iPhone Human Interface
Guidelines.