Understanding Basic iOS Gestures and Functions

When designing mobile applications, you want to be using the device you are designing for. If you are designing an app for iOS, you want to be using an iOS phone on a regular basis, same goes for Android and Windows Phone. If you are making your app for all platforms, use all of the platforms. You want to be familiar with the device your app will be used on so you have a better understanding on the unique user interactions and user face elements.

Gestures in iOS:

If you have ever turned on an iPhone for the first time, you may not notice but they are teaching everyone the basics during the phone setup. This helps introduce new users to unfamiliar ways of interaction. They learn that:

  1. The screen is touch based
  2. User interface elements are touch based
  3. The user will need to use fluid gestures such as touch and swipe to engage the user interface elements
  4. The hardware buttons are secondary to the touch experience

Some of the basic gestures are:

gestures
Villamor, C., Willis, D., & Wroblewski, L. (2010). Touch Gesture Reference Guide. N/A. Retrieved 21 March 2017, from http://bit.ly/1fJzeVF

Tap

A minimum 44×44 point active area around the button/slider is required

Drag

Scroll, can be used to unlock the phone

Flick

Is similar to drag, but it is less important about direction and can be a quicker movement

Swipe

It is slower and a more controlled interaction than the flick

Pinch

Zoom in and out

Random gestures

e.g. Shake to shuffle songs

If you want to publish an app in the app store, you need to follow Apple’s requirements to be published in the store.

 

UI – iOS Anatomy

Has 4 categories

Bars – show a user where they are in an app

Content views – shows app specific content

Controls – allows a user to adjust certain functions

Tempory views – appear briefly to give important info, e.g. an alert

alert
iOS Alert Notification. (2017). Retrieved from http://bit.ly/2mKN3cW

 Keyboard

Depending on the input type, you can choose a regular text keyboard, an email keyboard, a number keyboard or a URL keyboard. When designing an app, let’s say a bank app for example, when the user puts in their password pin (assuming the pin can only consist of numbers) it wouldn’t make sense for a text keyboard to be used. For user efficiency, you would have a number keyboard.

keyboard
iOS Keyboard Types. Retrieved from http://bit.ly/2mPwgWY

Pickers and Date Pickers

For selecting things such as date and time

pickers n date pickers
iOS Date Picker. Retrieved from http://bit.ly/2mKLMCo

Inputs

Slider- e.g. brightness

Switch – e.g. Wi-Fi on/off

inputs
iOS Brightness. Retrieved from http://bit.ly/2nZrzK2

Tab Bar

Allows you to navigate through certain sections of an app

tab bar
iOS Tab Bar. Retrieved from http://bit.ly/1Pdak3W

Navigation Bar

Back buttons on the left, titles in the centre, action buttons on the right

navigation bar
iOS Navigation Bar. Retrieved from http://apple.co/2mPtoKV

Tool Bar

Allows you to control a certain element on the screen such as delete, edit or share.

tool bar
Apple,. (2017). Toolbars – UI Bars – iOS Human Interface Guidelines. Developer.apple.com. Retrieved 21 March 2017, from http://apple.co/2nFoq6r

Action Menu

Opens to allow you to choose the next action.

action menu.png
iOS Action Menu. Retrieved from http://bit.ly/2nvk6Gb

 

Today’s Quick Tips:

  • Use and familiarise yourself with the devices you are designing your apps for
  • Some phones such as iPhone teach the basic phone gestures in the phone’s startup setup which helps new users learn how to use the phone. This can be applied to your app if you have a new or unfamiliar function to help guide new app users.
  • Design your app so it effectively uses the correct keyboard to maximise efficiency.
  • Sticking to basic UI layouts helps app users understand the app better and lessens confusion.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s