Interaction Design for Mobile Devices

Session 3, Introduction to iOS Development

David Lamas, Ilya Shmorgun Tallinn University, 2012

Introduction to iOS Development

Requirements for developing iOS apps Xcode (including Interface Builder)
Model-View-Controller Header and implementation files

iOS Simulator iOS Human Interface Guidelines

January, 2012

Tallinn University

Requirements for Developing iOS Apps

January, 2012

Tallinn University

Requirements for Developing iOS Apps

A Mac Preferably an iPhone, iPod Touch or an iPad Xcode An iOS Developer Subscription, so that you can test applications on your device

January, 2012

Tallinn University

Xcode

January, 2012

Tallinn University

Xcode
A suite of tools for developing software for Mac OS X and iOS A source and graphical user interface editor Enables developing software following the Model-View-Controller paradigm Enables writing software in Objective-C
Objective-C is Apples object oriented programming language
January, 2012 Tallinn University 6

Features of Xcode
A single-window interface for all major workflows Built in Interface Builder Live discovery and fixing of issues Autosave Storyboarding

January, 2012

Tallinn University

Interface Builder

January, 2012

Tallinn University

Interface Builder
Allows developers to create interfaces for applications using a graphical user interface The resulting interface is stored as a .nib file, short for NeXT Interface Builder, or more recently, as a .xib file

January, 2012

Tallinn University

The Model-View-Controller Paradigm

January, 2012

Tallinn University

10

The Model-View-Controller Paradigm

Focuses on isolating the application logic from the user interface, enabling independent development, testing and maintenance of each Helps to ensure maximum reusability

January, 2012

Tallinn University

11

Model
The classes that hold the users data Responds to instructions to change state

January, 2012

Tallinn University

12

View
Composed of windows, controls, and other elements that the user can see and interact with Renders the model into a form suitable for interaction, typically a user interface element

January, 2012

Tallinn University

13

Controller
The code that binds together the model and view Contains the application logic that decides how to handle the users inputs

January, 2012

Tallinn University

14

Header and Implementation Files

January, 2012

Tallinn University

15

Header Files
Blueprints for objects Allow programmers to separate certain
elements of a program's source code into reusable files

January, 2012

Tallinn University

16

Implementation Files
Contain the implementation code for the method(s) of a class The place where all the code is implemented and executed from

January, 2012

Tallinn University

17

iOS Simulator

January, 2012

Tallinn University

18

iOS Simulator
Enables testing of iPhone and iPad applications on the Mac
Supports simulation for most of the actions a user performs on a device Supports various debugging features, such as toggling slow animations, coloring misaligned images and elements which are rendered offscreen Does not support certain hardware specific features, such as access to a camera or the accelerometer

January, 2012

Tallinn University

19

Simulating Hardware Features

Device rotation
Performing gestures, such as tap, tap and hold, double tap, swipe, flick, drag and pinch Quitting the application to the Home screen Locking the device Simulating low-memory warnings Toggling in-call status bar Simulating the hardware keyboard Simulating the TV out signal

January, 2012

Tallinn University

20

Developing for iOS

January, 2012

Tallinn University

21

Unique Features of Coding for iOS

Only one application is active and shown on the screen at a time
Applications get just one window to work with, which size is fixed at the size of the screen Applications work in a sandbox and have no access to other parts of the file system Applications can be quit at any point so they need to be as responsive as possible

Applications get access to limited screen size and system resources

January, 2012

Tallinn University

22

iOS Human Interface Guidelines

January, 2012

Tallinn University

23

The Basics
The comfortable minimum size of tappable UI elements is 44 x 44 points The quality of the application artwork is very apparent The users focus is on the content

January, 2012

Tallinn University

24

Screen Resolutions

January, 2012

Tallinn University

25

Device

Portait

Landscape

iPhone 3GS

320 x 480 pixels

480 x 320 pixels

iPhone 4

640 x 960 pixels

960 x 640 pixels

iPad

768 x 1024 pixels 1024 x 768 pixels

January, 2012

Tallinn University

26

Retina Display

January, 2012

Tallinn University

27

January, 2012

Tallinn University

28

January, 2012

Tallinn University

29

iOS Platform Characteristics

January, 2012

Tallinn University

30

iOS Platform Characteristics

Features of native applications Features of web applications User interface elements

January, 2012

Tallinn University

31

Features of Native Applications

Come from the App Store Cannot be side-loaded All content needs to be saved automatically The filesystem is never exposed to the user Onscreen user help is minimal User interacts with one application at a time

January, 2012

Tallinn University

32

Features of Web Applications

Can use HTML5 API-s Can be added to the home screen and run in full screen without the browsers chrome Dont need to be approved in the App Store Easy to push updates Cannot access certain device features, such as the camera or the dialer
January, 2012 Tallinn University 33

iOS User Interface Elements

January, 2012

Tallinn University

34

Application Icons
iPhone - 57 x 57 pixels
iPhone 4 - 114 x 114 pixels (high resolution) iPhone search and settings - 29 x 29 pixels iPhone 4 search and settings - 58 x 58 pixels (high resolution) iPad - 72 x 72 pixels iPad settings - 29 x 29 pixels

iPad search - 50 x 50 pixels

App Store - 512 x 512 pixel

January, 2012

Tallinn University

35

Default Visual Effects for Icons

Rounded corners Drop shadow Reflective shine (unless you prevent the shine effect)

January, 2012

Tallinn University

36

Original Icon

On the Home Screen

January, 2012

Tallinn University

37

Launch Images
iPhone - 320 x 480 pixels iPhone 4 - 640 x 960 pixels iPad portrait - 768 x 1024 pixels iPad landscape - 1024 x 748 pixels

January, 2012

Tallinn University

38

January, 2012

Tallinn University

39

Multitasking Bar
Launched with a double-tap on the Home button Appears at the bottom of the screen below the user interface of the currently running app or the Home screen

January, 2012

Tallinn University

40

January, 2012

Tallinn University

41

Status Bar
Displays important information about the device and the current environment

January, 2012

Tallinn University

42

January, 2012

Tallinn University

43

Navigation Bar
Enables navigation through an information hierarchy and, optionally, management of screen contents

January, 2012

Tallinn University

44

January, 2012

Tallinn University

45

Toolbar
Contains controls that perform actions related to objects in the screen or view

January, 2012

Tallinn University

46

January, 2012

Tallinn University

47

Tab Bar
Gives users the ability to switch between different subtasks, views, or modes

January, 2012

Tallinn University

48

January, 2012

Tallinn University

49

Popover
Is transient Can be revealed when people tap a control or an onscreen area

January, 2012

Tallinn University

50

January, 2012

Tallinn University

51

Split View
A full-screen view that consists of two sideby-side panes

January, 2012

Tallinn University

52

January, 2012

Tallinn University

53

Table View
Presents data in a single-column list of multiple rows

January, 2012

Tallinn University

54

January, 2012

Tallinn University

55

January, 2012

Tallinn University

56

Text View
Accepts and displays multiple lines of text

January, 2012

Tallinn University

57

January, 2012

Tallinn University

58

Web View
A region that can display rich HTML content

January, 2012

Tallinn University

59

January, 2012

Tallinn University

60

Alerts
Give people important information that affects their use of the application

January, 2012

Tallinn University

61

January, 2012

Tallinn University

62

January, 2012

Tallinn University

63

January, 2012

Tallinn University

64

January, 2012

Tallinn University

65

Action Sheet
Displays a set of choices related to a task the user initiates

January, 2012

Tallinn University

66

January, 2012

Tallinn University

67

Modal View
Provides self-contained functionality in the context of the current task or workflow

January, 2012

Tallinn University

68

January, 2012

Tallinn University

69

Activity Indicator
Shows that a task or process is progressing (shown here with a label)

January, 2012

Tallinn University

70

Date and Time Picker

Displays components of date and time, such as hours, minutes, days, and years

January, 2012

Tallinn University

71

Detail Disclosure Button

Reveals additional details or functionality related to an item

January, 2012

Tallinn University

72

Info Button
Reveals configuration details about an application, often on the back of the current view

January, 2012

Tallinn University

73

Label
Displays static text

January, 2012

Tallinn University

74

Page Indicator
Indicates how many views are open and which one is currently visible

January, 2012

Tallinn University

75

Picker
Displays a set of values from which a user picks one

January, 2012

Tallinn University

76

Progress View
Shows the progress of a task or process that has a known duration

January, 2012

Tallinn University

77

Rounded Rectangular Buttons

Performs an application-specific action

January, 2012

Tallinn University

78

Search Bar
Accepts text from users, which can be used as input for a search

January, 2012

Tallinn University

79

Scope Bar
Allows users to define the scope of a search Is available only in conjunction with a search bar

January, 2012

Tallinn University

80

Segmented Control
Linear list of segments Each functions as a button Each button can display a different view

January, 2012

Tallinn University

81

Slider
Makes adjustments to a value Has a specific range of values

January, 2012

Tallinn University

82

Stepper
Increases or decreases a value by a constant amount

January, 2012

Tallinn University

83

Switch
Represents two mutually exclusive choices

January, 2012

Tallinn University

84

Text Field
Accepts a single line of user input

January, 2012

Tallinn University

85

Introduction to iOS Development

And so we covered
Requirements for developing iOS apps Xcode (including Interface Builder)
Model-View-Controller Header and implementation files

iOS Simulator iOS Human Interface Guidelines

January, 2012

Tallinn University

86