WEEK 4 Understanding the Device

on

WEEK 4

LECTURE NOTES

To begin designing for a specific device, you need to understand the devices unique design aspects, terminology, user interactions, and device characteristics.

iOS has incorporated a welcome screen which teaches its users the basic gestures and user input actions for the device in mere seconds. The basic learned information is:

  • The screen is touch based
  • The user interface elements are touch based
  • The user needs to use fluid gestures to engage touch based elements
  • Hardware buttons are secondary to the touch experience

COMMON GESTURES

Common gestures used on touch screen devices include:

TAP – a feature universal to all touch screen devices. There is an are of 44×44 PX around a touch based element so as to allow ease of access/use for the user

DRAG – combines push and movement of a finger to move on screen elements

FLICK – designed to allow a lighter touch for quicker movement

SWIPE – slower and more interactive, moving pages etc

PINCH – a gesture to allow zooming in or out on screen

RANDOM GESTURES – such as shake gestures used to undo typing

iOS ANATOMY

Apple has guidelines/requirements that must be adhered to by designers before apps will be approved by Apple for its users.

UI ELEMENTS

design_resource_ios9_components@2x.jpg
Figure 1. iOS UI. (2015)
  • BARS
  • CONTENT VIEWS
  • CONTROLS
  • TEMPORARY VIEWS
  • THE KEYBOARD – in iOS has the unique function of being assignable to specific functions depending on input fields, ie, if designing an input field of numbers, the designer can choose to have the keyboard launch in numerical mode.
  • PICKERS – such as date/time pickers
  • INPUTS – such as brightness sliders etc.
  • TAB BAR – commonly found as a standard control with apps on iOS
  • THE NAV BAR
  • THE TOOL BAR
  • THE ACTION MENU

Feature Image

Unknown. (2016). Android Vs Apple. Retrieved from http://www.androidtabletbest.com/wp-content/uploads/2016/05/android-vs-apple.jpg

Figure 1. Unknown. (2015) iOS UI. Retrieved from http://www.facebook.design/public/images/design_resource_ios9_componenets@2x.jpg

 

 

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s