Standard Controls Content

0
211

This is an extract from The App Blueprint Book

3-2 THE APPLE STANDARD CONTROLS

As an app user you will have seen many types of user interface design. What is vital to understand is that all apps are not equal, and while designing your app, it is vital to choose the correct controls to use in your app.

Apple provides the developer with a rich library of controls to use, such as lists and buttons, and where possible when designing your app unless absolutely necessary, you should try your utmost to utilise them rather than to try and invent something “better”

The reasons are many.

  1. Apple has done all of the hard work.
  2. Your users are familiar with the design.
  3. The control will be supported by apple forever and updated and considered on new versions of the operating system (iOS)
  4. It would be difficult for the developer to produce something better than apple.
  5. Any developer that you hire will have used all of these many times before.
  6. Controls such as lists can interface with the data system (core data) directly, automatically refreshing themselves, saving the developer massive effort.

STICK TO THE BASICS

Where possible it is suggested that if you are building an app for the first time, that you keep with just a small handful of what is on offer from the standard controls.

  1. Table Views
  2. Labels
  3. Images
  4. Buttons
  5. Navigation Bars
  6. Tab Bars

This will help in both development and in maintenance.

3-2-1 Bars

3-2-1-1 Navigation Bars

Complexity 1/5

A navigation bar appears at the top of an app screen and below the status bar. Some apps can be created without a navigation bar, but its generally a requirement in an app with more than one screen to show.

A title and buttons can be displayed on it and when a view is pushed a back button will be shown on the left hand side.

3-2-1-2 Search Bars

Complexity 2/5

If you are showing a list (Table View) in your app, you might want to consider adding a search bar at the top. If the list only contains a small number of items its possibly overkill, but in general they are relatively simple for the developer to implement.

3-2-1-3 Tab Bars

Complexity 2/5

Where possible try and keep your Minimum Viable Product limited to one screen, but if your app contains distinct areas of functionality which need to be quickly switched a tab bar is the number one choice, they are super simple for the developer to implement. Try not to be persuaded by slide in menus or any other custom screen switching controls which are readily available, while they might give your app a custom flashy look, they require the user to learn a new behaviour but more importantly you are just derivative away form the apple recommended practice… stick to the tab bar!

3-2-1-4 Toolbars

Complexity 1/5

A toolbar appears at the bottom of an app screen and contains buttons for performing actions relevant to the current view or content within it.

If you think you need a toolbar because you have a large number of actions on one screen try and consider splitting out some of the complexity of your screen into separate screens, or maybe hide the multiple actions behind a multipurpose button that then shows an action sheet.

3-2-2 Views

3-2-2-1 Action Sheets

Complexity 1/5

Action sheets are great method for hiding a number of actions behind one button. This is much neater than using a toolbar for example.

3-2-2-2 Alerts

Complexity 1/5

Alerts convey important information related to the state of your app or the device, and often request feedback.

It can be easy to overuse Alerts, they are designed to block the app completely until the user dismisses. I tend to only use these for destructive operations for that reason.

3-2-2-3 Collections

Complexity 5/5

Collection Views arrived later in the development of iOS and provided a much needed method to display varying sized items such as images.

Unless you think that this is a must have in your app try and use a table view as a table view is much easier to use for the user and its functionality much more standardised.

3-2-2-4 Image Views

Complexity 1/5

An image view displays a single image or an animated sequence of images over a transparent or opaque background. Within an image view, images may be stretched, scaled, sized to fit, or pinned to a specific location. Image views are non interactive by default but can be used as buttons for creating amazing simple UI.

3-2-2-5 Maps

Complexity 3/5

While adding a map is an easy task for any developer, be carful not to make overly complex, for example its possible to add pins, lines and areas to the map. While initially simplistic they can be a real time sink for the developer. Try and limit to showing the user position and a small handful of pins at most.

3-2-2-6 Table Views

Complexity 3/5

The granddaddy of iOS controls, this is the ultimate method of displaying a list of items to a user, in 99% of cases this is the correct choice. Even if you have a lot of items to show to users they generally don’t mind thumbing through.

Dont just think that Tables are for just small items, apps like Facebook and Hotels.com are all using a Table underneath and unless you really need to to do something special use a Table to display lists.

3-2-3 Controls

3-2-3-1 Buttons

Complexity 1/5

If there is an action that you need to let the user take a button is the control to use. Try and keep it to a single verb word where possible.

3-2-3-2 Labels

Complexity 1/5

To provide any, non editable text on the screen use a label, considerate selection of fonts can completely transform your app from boring to stylish.

Try and keep them short and avoid garish styles.

3-2-3-3 Pickers

Complexity 3/5

Used mainly for picking dates, a picker can be customised as shown. They benefit from saving the user form having to use the keyboard to enter a value.

Pickers are often used inline in tables and are slightly more complex to develop in that scenario.

3-2-3-4 Segmented Controls

Complexity 2/5

For selecting between a small number of items a segmented control is hard to beat, be sure to test these on smaller devices and keep the labels short on each item.

3-2-3-5 Sliders

Complexity 2/5

A slider is a horizontal track with a control called a thumb, which you can slide with your finger to move between a minimum and maximum value.

Useful for use as volume controls etc.

3-2-3-6 Switches

Complexity 1/5

A switch is a visual toggle between two mutually exclusive states—on and off.

3-2-3-7 Text Fields

Complexity 1/5

A text field is a single-line, fixed-height field, often with rounded corners, that automatically brings up a keyboard when the user taps it. Use a text field to request a small amount of information, such as an email address.

3-2-4 Conclusion

If you are thinking that its going to be difficult to design a unique interface with these controls, thats actually a real positive, you can create a stylish design by changing just a few colours and some smart typography, with a little branding the app will look great, respond well and the users will love it.

Take a look at the apple contacts app, its a pretty bland looking app, and uses a small handful of controls and has been unchanged, it represents the apple design paradigm easy to use and clean. If you are relying on a unique experience to gain traction you might be disappointed in the response from users and the time and effort required to design develop and maintain it.

SHARE
Next articleTHE APP BLUEPRINT

LEAVE A REPLY

Please enter your comment!
Please enter your name here