First steps in Objective-C

"Hallo Debugger" and some variables in the debugger view:

Small application:

Gestures

According to the “iPad Human Interface Guidelines” multifinger gestures are desirable for the interaction with the iPad. Some gestures are already selected by Apple for zooming, scrolling or to edit text (see post “Interaction with multi touchscreen and motion sensor“). The users have to learn these gestures. How is the situation, when somebody designs new gestures? What does the person have to keep in mind?
A German usability agency named “User Interface Design GmbH” conducted together with 11 other usability agencies around the world a study with the title “Mulit touch products: cultural differences and similarities of gestures”. One outcome was that the users use symbols to activate functions for example: help, save, to confirm, delete and print.

Help – “?”, save and confirm – “check mark”, delete – “X” and print “P” (User Interface Design 2009, p.25).

Prototype to conduct the study (User Interface Design, p.14):

I think the fact that people use symbol gestures to activate a function is really interesting and, what could this mean?

For me it could mean that users could learn intuitive new symbol gestures to activate functions. For example they could learn to use “C” to copy or a smile for fun in a chat situation. Maybe it is also possible to make two demission gestures and trace them by a camera like the example of imaginary interface from the Hasso Plattner Institut. The main idea is that a camera trace gestures in an imaginary interface. See imaginary interface from Hasso Plattner Institut: http://www.hpi.uni-potsdam.de/baudisch/projects/imaginary_interfaces.html (see Baudisch 2010):

When it would be possible that a user can communicate with a device by using two dimensional symbolic gestures maybe he could use a form of sign language (Manataka American Indian Council 2010):

Baudisch, P., 2010: Imaginary Interfaces. Hasso Plattner Institut (online). Available at: http://www.hpi.uni-potsdam.de/baudisch/projects/imaginary_interfaces.html [Accessed 23 November 2010].
Manataka American Indian Council, 2010: French and German Equivalents are shown with each Illustration. Manataka (online) http://www.manataka.org/page319.html [Accessed 23 November 2010]
Hansson, T. 2009: Multi-Touch-Produkte: Kulturelle Unterschiede und Gemeinsamkeiten bei der Nutzung von Gesten. User Interface Design. Available at: http://worldusabilityday.de/groups/mannheim/Multi-Touch_Produkte.pdf [Accessed 23 November 2010].

iPad - What are the differences to the iPhone?

In general is the iPad the big brother of the iPhone? Mostly all of the elements are similar and the main difference is the size. The iPad is approximately eight times larger than the iPhone, because of this there is more space to make multifinger gestures and to design it in a realistic way. These two points are also encouraged by the “iPad Human Interface Guidelines”:

“When it makes sense, support multifinger gestures, especially when you can integrate them with custom controls......Avoid providing a UI element or defining a rotation gesture that rotates your content. Instead, people should be able to rotate your content by rotating the device......The large iPad screen provides great scope for custom multifinger gestures, including gestures made by more than one person.” (Apple 2010, p.25-26)

Two people interact with the iPad (Inside Social Games 2010):

“Give people more ways to interact with the content. For example, it might make sense to allow people to manipulate a graph in real time, see a simulation of data, or customize details of the content they see.” (Apple 2010, p.12)

Example of zooming in x- and y-axis (designaffairs 2009):

“Whenever possible, add a realistic, physical dimension to your application. Contacts depicts a realistic address book that behaves as people expect.” (Apple 2010, p.23)

Realistic address book (Apple 2010, p.23):

Apple, 2010. iPad Human Interface Guidelines. Apple (online). Available at: http://www.hung-truong.com/blog/wp-content/uploads/2010/06/iPadHIG.pdf [Accessed 20 November 2010].
designaffairs, 2009: DATEV INTERACT. Available at: http://www.designaffairs.com/datev-interact/ [Accessed 20 November 2010].
Inside Social Games, 2010: Koduco Tries to Create a New Social Paradigm on the iPad. Inside Social Games (online). Available at : http://www.google.de/imgres?imgurl=http://www.insidesocialgames.com/wp-content/uploads/2010/09/pongvaders2.png&imgrefurl=http://www.insidesocialgames.com/2010/09/02/koduco-tries-to-create-a-new-social-paradigm-on-the-ipad/&usg=__vxQjItsyAYPitZdn3a2zIBwoQvs=&h=404&w=368&sz=430&hl=de&start=145&sig2=TumqNQVoNJI22Xns18uuww&zoom=1&um=1&itbs=1&tbnid=hekJvB1G2LpIqM:&tbnh=124&tbnw=113&prev=/images%3Fq%3Dmultitouch%2Btow%2Bperson%2Bipad%2Bplay%26start%3D140%26um%3D1%26hl%3Dde%26sa%3DN%26ndsp%3D20%26tbs%3Disch:1&ei=jnHpTKveM4iShAeLn6QP [Accessed 20 November 2010].

iPad - Interaction Design Pattern

The differences between Mail on iPhone and Mail on iPad reflect the different user experiences of each device. Mail on iPhone is designed to help mobile users handle their email while they’re standing in line or walking to a meeting. Mail on iPad is efficient enough for people to use on the go, but it also encourages more in-depth usage.

Mail on iPhone presents streamlined email functionality in a series of screens:

Mail on iPad works well in all orientations (landscape shown):

Flatten hierarchy by at least one level:

Mail uses a navigation bar in the left or right pane:

Organize your content in


Split view: A split view is a full-screen view that consists in two side-by-side panes.

Popover:A popover is a transient view that can be revealed when people tap a control or an onscreen area.

Action sheet: An action sheet displays a set of choices related to a task the user initiates.An action sheet is displayed inside a popover.

Modal view: A modal view (that is, a view presented modally) provides self-contained functionality in the context of the current task or workflow.

iTunes uses a segmented control to provide perspectives on the content:

iTunes uses a tab bar to provide categories of content:

(see Apple 2010, p.7-52)

Apple, 2010. iPad Human Interface Guidelines. Apple (online). Available at: http://www.hung-truong.com/blog/wp-content/uploads/2010/06/iPadHIG.pdf [Accessed 18 November 2010].

iPhone - Interaction Design Pattern

Productivity applications tend to organize information hierarchically: 

Productivity applications tend to organize information hierarchically: 

Example to present Photos:

Alert: An alert gives people important information that affects their use of the application (or the device). The arrival of an alert is usually unexpected, because it generally tells people about a problem or a change in the current situation that might require them to take action. Optionally, provide a custom title for the action button. An alert can contain one or two buttons. In a two-button alert, the Close button is on the left and the action button (titled View by default) is on the right. If you specify one button, the alert displays an OK button.

Modal view: A modal view provides more extensive functionality in the

context of the current task. Modal views can also provide a way to perform a subtask directly related to the user’s workflow.

Action sheet: Action sheets give people additional choices related to the action they are currently taking. People learn to expect the appearance of an action sheet when they tap a toolbar button that begins either a potentially destructive action (such as deleting all recent calls) or an action that can be completed in different ways (such as a send action for which users can specify one of several destinations).

Two types of content-area views:

Color navigation bar and toolbar: You can specify the colour and translucency of a navigation bar to coordinate with the overall look of your application and with the other bars in it (that is, toolbars, tab bars, and the status bar). You can use a custom color or choose one of the standard colours: Blue or black.

Navigation bar:  A navigation bar displays the title of the current view and can contain controls that manage the content in the view.

Tab bar: A tab bar appears at the bottom edge of the screen. If an application’s tab bar contains more than five tabs, displays four of them in the tab bar and adds a More tab.

Toolbar: For a number of actions.

A table view can display the Delete button and the delete control button:

A checkmark indicates the current selection in a list:

(see Apple 2010, p.20-97)

Apple, 2010. iPhone Human Interface Guidelines. Apple (online). Available at: http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf [Accessed 15 November 2010].

Interaction pattern

Before it is possible to start developing an application for a device, it is necessary to check the general interaction patterns on the device. This is because your application is only a small part of the whole interaction experience. It is important to use familiar interaction patterns to make sure that users can handle the application in the same way as others applications. An interaction pattern is a optimal solution or a best practice and is vital to good design (see Wikipedia 2010). Normally an interaction pattern is described by a picture plus a small text. I prefer to describe an interaction pattern with a picture and a small picture, when it is necessary.  

Wikipedia, 2010. Interaction design pattern. Wikipedia: The Free Encyclopedia. Available at: http://en.wikipedia.org/wiki/Interaction_design_pattern [Accessed 9 November 2010]. 

iPhone - Elements

(see Design Bote 2010)

Design Bote, 2010. iPhone Elemente: Vorlagen für Photoshop. Design Bote (online). Available at: 
http://www.designbote.com/2008100609/iphone-gui-vorlage.html/designer23_iphone_elemente1 [Accessed 6 November 2010]. 

Excursus Colour and Contrast

Complementary Contrast:

Combination with complementary colours (colours that are oppositely positioned on the colour weel).



Colour each other Contrast:

Combination of different tones (more than 2 tones).



Colourful and no colourful Contrast:

Combination of gray and a little bit colour.



Light and dark Contrast:

Combination of light colour and dark colour.



Cold and warm Contrast:

Combination of cold colour with warm colour.



Quantity Contrast:

Contrast based on imbalance of colour.



Quality Contrast:

A clear colour is encircled by a variation of the some tone with is more light or more dark. 

(see Stapelkamp 2007, p.60-73)

Stapelkamp, T., 2007. Screen- und Interfacedesign: Gestaltung und Usability für Hard- und Software. Berlin: Springer-Verlag. 

Interaction with multi touchscreen and motion sensor

iPhone 4g (see mydealz 2010) and iPad (see Golem 2010):

Based on the technology of the multi touchscreen and motion sensor there are different interaction forms possible with the iPhone and the iPad  :

Multi touchscreen: Interaction touch is possible. Interaction with more fingers works - for example zooming in google maps, in websites or pictures with zoom gestures. Interactions with one finger include clicking, dragging as well as drop and swipe gestures. Shaking: With the shake action it is possible for example to reset data. Turning: With turning the iPhone or the iPad the screen switches from portrait to landscape mode. See list of gestures and actions (Apple 2010, p.42): 

Apple, 2010. iPhone Human Interface Guidelines. Apple (online). Available at:http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf [Accessed 9 November 2010].

mydealz, 2010. iPhone 4g picture. mydealz (online). Available at: http://www.mydealz.de/wp-content/uploads/2010/06/apple_iphone_4g_big.jpg
[Accessed 2 November 2010]. 
Golem, 2010. iPad picture. Golem (online). Available at: http://www.golem.de/1001/72707.html [Accessed 2 November 2010]. 

iPhone - To keep in mind

There are some advices from the "iPhone Human Interface Guidelines" (see Apple 2010) I have to keep in mind. It necessary to follow theses advices to create a excellent application and to have the change to be part of the App Store.

List of advices: 

• Mobile: The iPhone is a mobile device. 
• Is not a PC: An iPhone application is not the same as a desktop application. Although these seem merely common-sense statements, it is nonetheless paramount to keep them in mind as to embark on developing software for these devices.
• Screen size is compact: Use the compact screen size as a motivation to focus the user interface on the essentials. There is not the room to include design elements that aren’t absolutely necessary, and crowding user interface elements make applications unattractive and difficult to use.
• Minimal user help: Mobile users don’t have the time to read through a lot of help content before they can use an application.
• Memory is limited: Memory is a critical resource in the iPhone, so managing memory in an application is crucial. Take care to avoid allocating more memory than is available on the device. 
• Not Multitasking: Only one application is visible in the foreground at a time. When people switch from one application to another, the previous application quits and its user interface goes away. When people restart a suspended application, it can instantly resume running from the point where it quit, without having to reload its user interface.
• Think about the User: 
• What is user’s motivation for using the application?
• What is the user’s experience while using the application?
• What is the goal or focus of the application?
• How does the application organize and display the information people care about? Is there a natural organization associated with the main task of the application?
• Metaphors: When possible, model your application’s objects and actions on objects and actions in the real world. This technique especially helps novice users quickly grasp how your application works.
• Direct Manipulation: Direct manipulation means that people feel they are controlling something tangible, not abstract. The benefit of following the principle of direct manipulation is that users more readily understand the results of their actions when they can directly manipulate the objects involved.
• Feedback: In addition to seeing the results of their actions, users need immediate feedback when they operate controls and status reports during lengthy operations. Your application should respond to every user action with some visible change. For example, make sure list items highlight briefly when users tap them.
• User Control: Allow users, not your application, to initiate and control actions. Keep actions simple and straightforward so users can easily understand and remember them. Whenever possible, use standard controls and behaviors that users are already familiar with.
• Think Top Down: People can tap the screen of an iOS-based device with their fingers or their thumbs. When they use a finger, people tend to hold the device in their nondominant hand (or lay it on a surface) and tap with a finger of the dominant hand. When they use thumbs, people either hold the device in one hand and tap with that thumb, or hold the device between their hands and tap with both thumbs. Whichever method people use, the top of the screen is most visible to them. Because of these usage patterns, you should design your application’s user interface so that the most frequently used (usually higher level) information is near the top, where it is most visible and accessible. As the user scans the screen from top to bottom, the information displayed should progress from general to specific and from high level to low level.
• Gestures: Users perform specific movements, called gestures, to get particular results. For example, users tap a button to select it and flick or drag to scroll a long list. iOS users understand these gestures because the built-in applications use them consistently. To benefit from users’ familiarity, therefore, and to avoid confusing them, you should use these gestures appropriately in your application. The more complex gestures, such as swipe or pinch open, are also used consistently in the built-in applications, but they are less common. In general these gestures are used as shortcuts to expedite a task, not as the only way to perform a task. When viewing a list of messages in Mail, for example, users delete a message by revealing and then tapping the Delete button in the preview row for the message. Users can reveal the Delete button in two different ways:
• Tap the Edit button in the navigation bar, which reveals a delete control in each preview row. Then, tap the delete control in a specific preview row to reveal the Delete button for that message.
• Make the swipe gesture across a specific preview row to reveal the Delete button for that message.

(see Apple 2010, p.6-42)

Apple, 2010. iPhone Human Interface Guidelines. Apple (online). Available at: http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf [Accessed 2 November 2010].