Week 7: App Interface Design (UI)

Launch screens

  • Launch screens are used to reinforce the branding of the app.
  • Also allows the app to load in the background.
  • Launch screens are not to be confused with the home screen, as you wouldn’t go back to the launch screen after getting into the app.

Examples of iOS launch screens:

Screen Shot 2017-05-25 at 10.06.21 am

Examples of Android launch screens:

Screen Shot 2017-05-25 at 10.07.38 am

The Tray

  • Allows the designer to add more space to the experience.
  • The tray can include navigation, tools, profile information.
  • The tray area should take up to 60-70% of the wide screen width.
  • It is important to be visible UI elements that make it clear that this element is clickable.

There are two main components to a tray:

  1. The active button
  2. The tray area

Screen Shot 2017-05-25 at 10.14.16 am

Some Rules for the tray

  • Make the shape unique.
  • Make the design look active.
  • Make a button look like it is part of the navigation.
  • Make sure it is large enough for a finger.
  • Make the button look different when it is touched.

Advanced Tray

  • A tray with a scrollable view can give access to a larger tray area.
  • Includes other UI Elements inside the tray.

Having most of the options and links in theThis can make the tray into the one stop area for accessing content.

Example of an advanced tray

Screen Shot 2017-05-25 at 10.20.28 am

Good Design: The Tray

  • Be clean and lean.
  • Keep the names short.
  • Don’t scroll much.
  • Don’t add other gestures.
  • Don’t overdo a good thing.

The List

  • The list is most commonly used in mobile user experience.
  • Opening second and third level pages.
  • Opening or expanding details for a content section.
  • Enlarging images.
  • Opening screen or options.

Example of a pattern using the list

Screen Shot 2017-05-25 at 10.28.50 am

Example of navigation buttons

Screen Shot 2017-05-25 at 10.32.02 am

Navigation buttons are used to return the user one space back in the experience.

Advanced List

Screen Shot 2017-05-25 at 10.33.43 am

There shouldn’t be any dead ends to a users exploration to ensure this we must make your last Page actionable.

To do this there are 2 methods:

  1. Provide an action button in the top navigation bar.
  2. Provide an action button below the page content.

Good Design: The List

  • Don’t overdo a good thing.
  • Don’t skip a step.
  • No dead ends.

This weeks lecture pod allowed me to have a better understanding on different UI elements. Having a better understanding on what should and shouldn’t be in different UI elements will aid in the development of my app. For my app I will most likely be using the List element.



Week 4: Understand the Device

In order to really understand the smartphone you need to actually use the smartphone. Planning for an app on ios you should always practice using an iPhone and the same goes for android. This is because each platform has a set of unique elements, terminology, and device characteristics.

Part 1: Introduction to behaviours and gestures in IOS

The Tap
The tap is the building block of IOS platform. Usage of pressure sensitive glass enables the finger pressure of the user to come in contact with the screen. Minimum of 44 x 44 pt active area.

The Drag
The Drag uses the touch gesture to scroll walk. It combines push and the movement of finger to move an onscreen element.

The Flick
The flick is like the drag but flick allows for a lighter touch for quicker and less directed movement.

The Swipe
The swipe is based on using a large finger contact area for directed on screen movement. It’s meant for slower and more controller interaction.

The Pinch
The pinch allows for finger interaction to control zoom in and zoom out. Pinching inwards to zoom in and Pinch outwards to zoom out.

Random Gestures
There are lots of different gestures, for example, one of the most random gestures is the shake.

Part 2: UI – IOS Anatomy

Bars tell users where they are and helps users navigate or initiate actions.

Content Views
Content views contains app specific content and can enable behaviour such as scrolling, insertion, deletion and rearrangement of items.

Controls perform actions or display information.

Temporary views
Temporary views appear briefly to give users important information or additional choices and functionality.

The Keyboard
There are different keyboards for different tasks depending on the user’s needs, for example, text, email, phone or URL.

Pickers and Date Pickers
This element allows for larger contact area for touch gestures making it easier to pick selection options.

Inputs are app specific, the slider and the switch. These input methods can be used to create interactive message when selecting choice and images on the screen.

Tab Bar
The tab bar is one of Iphone’s signature navigation element for apps. It replaces tradition tabs found on most webpages with a language of icons small titles.

Navigation Bar
Native app navigation feature. The navigation bar plays a critical role using lists and pages in IOS.

The Tool Bar
The tool bar sits at the bottom of the screen and acts as a general placeholder for icons and text. The role of this element is to support the current view or page by providing secondary navigation.

The Action Menu
The action menu allows for secondary navigation within an app.

This should give a people a slightly better understanding of the anatomy of IOS. This lecture pod helped me to better understand the different elements that need to go into consideration when making an app. I now know that when developing my app I should keep some of these gestures and UI in mind.