Advertisement

Introduction to iOS Development: Creating an Intuitive User Interface

How do you develop apps for iOS?  It’s a common question, and one we hope to answer with this weekly series of information and tutorials.

Learning how to develop software can be one of the most intimidating prospects for any computer enthusiast, and with the growing saturation of applications in mobile marketplaces, it is becoming increasingly difficult to get your work noticed. That’s what this series is for, helping you learn iOS development from a conceptual perspective. No prior knowledge of computer programming will be necessary. Over the coming weeks, we’ll examine the iPhone, iPod Touch and iPad’s ability to deliver immersive, intuitive content, a unique opportunity for both developers and consumers.

Today, we’re going to focus on one of the most important aspects of application developments, the user interface. This will be one of the last conceptual lessons, as starting next week, we will be diving into the world of programming languages.

What is the User Interface?

By definition, the user interface is the method by which a user and computer system interact with one another. It includes both hardware and software components allowing for direct input, or manipulation of a system, and output, or the system’s manipulation of the user.

Apple was an innovator in the field of user interaction, being one of the first software firms to implement an operating system centered around a graphical user interface (GUI), the first step in eliminating the need for text only computer commands. Eventually other companies followed suit, but Apple has been forever linked to graphic design and intuitive interfaces ever since.

Why are Intuitive UIs Necessary for Applications

Believe it or not, people sincerely appreciate iOS applications that feel as if they have been designed exclusively to suit the device. They expect that certain gestures will bring certain programmed responses, and if you go against this principle, it will only make life extremely frustrating for consumers. Although users might not even know it,  they respond positively to a well-designed application.

It is imperative that you provide users a clear, definite set of features targeted at specific users. Be sure to tailor your app to cater to this audience. The most essential aspect of your application is the user experience, and by embracing what makes the platform so immersive and unique, you will provide unforgettable in-app experiences

Apple’s Human Interface Guidelines

By providing developers with an extensive guide to creating application interfaces, Apple hopes to create a friendly ecosystem for human-application interaction on iOS. The company outlines this mission in its Human Interface Guidelines, which can be found in the iOS Reference Library. According to the Cupertino-based consumer electronics manufacturer, in order for a developer to maintain focus one must:

  1. Analyze what’s needed in each screen. As you decide what to display in each screen always ask yourself, Is this critical information or functionality users need right now? If your answer is no, decide whether the information or functionality might be critical in a different context, or if it’s not that important after all.
  2. Minimize the number and prominence of controls to decrease their weight in the UI. Photos does this by placing a few unobtrusive controls on translucent bars.
  3. Consider subtly customizing controls so that they integrate with your app’s graphical style. In this way, controls are discoverable and comprehensible, without being conspicuous.
  4. Consider fading controls after people have stopped interacting with them for a little while, and redisplaying them when people tap the screen. Sometimes you may want to fade the rest of your application UI, too. This is especially appropriate in apps that enable an immersive experience, because it gives even more of the screen space to the content people want to see. For example, Photos fades the controls and bars after a few moments of non interaction, which encourages people to immerse themselves in the content. When people want to perform a task with their photos, a single tap anywhere on the screen redisplays the controls.
  5. Put the most frequently used (usually higher level) information near the top, where it is most visible and easy to reach. 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.
  6. Make the path through the information you present logical and easy for users to predict. In addition, be sure to provide markers, such as back buttons, that users can use to find out where they are and how to retrace their steps.
  7. In most cases, give users only one path to a screen. If a screen needs to be accessible in different circumstances, consider using a modal view that can appear in different contexts.
  8. Make the main function of your application immediately apparent by minimizing the number of controls and gestures, using standard controls and gestures appropriately and constantly so that they behave the way people would expect, and labeling controls clearly.
  9. Be consistent with the usage paradigms of the built-in applications. Users understand how to navigate a hierarchy of screens, edit list contents, and switch among application modes using the tab bar. Make it easy for people to use your application by reinforcing their experience.
  10. In all your text-based communication with users, use terminology you’re sure that your users understand. In particular, avoid technical jargon in the user interface. Use what you know about your users to determine whether the words and phrases you plan to use are appropriate.
  11. Balance any request for input by users with what you offer users in return. In other words, strive to provide as much information or functionality as possible for each piece of information people give you. That way, people feel they are making progress and are not being delayed as they move through your application.
  12. Make it easy for users to input their choices. For example, you can use a table view or a picker instead of a text field, because it’s usually easier for people to select an item from a list than to type words.
  13. Get information from iOS, when appropriate. People store lots of information on their devices. When it makes sense, don’t force people to give you information you can easily find for yourself, such as their contacts or calendar information.
  14. When appropriate, make it easy for people to interact with others and share things like their location, opinions, and high scores. People generally expect to be able to share information that’s important to them.
  15. For iPad, think of ways to allow more than one person to use your app on the same device. For example, two people might be able to play a game on opposing sides of an onscreen board. Or a band application might allow different people to play different instruments together on a single device.
  16. Avoid including settings in your application if you can. Settings include preferred application behaviors and information that people rarely want to change. Users cannot open the Settings application without first quitting your application, and you don’t want to encourage this action.
  17. Let users set the behavior they want by using configuration options in your application. Configuration options let your application react dynamically to changes, because people do not have to leave your application to set them.
  18. Offer configuration options in the main user interface or (in iPhone apps) on the back of a view. To decide which location makes sense, determine whether the options represent a primary task and how often people might want to set them.
  19. Incorporate a brand’s colors or images in a refined, unobtrusive way. Branding is most effective when it is subtle and understated. People use your application to get things done or to be entertained; they don’t want to feel as if they’re being forced to watch an advertisement. For the best user experience, you want to quietly remind users of your identity.
  20. Avoid taking space away from the content people care about. For example, displaying a second, persistent bar at the top of the screen that does nothing but display branding assets means that there’s less room for content. Consider other, less intrusive ways to display pervasive branding, such as subtly customizing the background of a screen.
  21. Follow the recommended usages for standard user interface elements. In this way, users can depend on their prior experience to help them as they learn to use your application. You also make it easy for your app to look up-to-date and work correctly if iOS changes the look or behavior of these standard views or controls.
  22. For an app that enables an immersive task, such as a game, it’s reasonable to create completely custom controls. This is because you’re creating a unique environment, and discovering how to control that environment is an experience users expect in such applications.
  23. Avoid radically changing the appearance of a control that performs a standard action. If you use unfamiliar controls to perform standard actions, users will spend time discovering how to use them and will wonder what, if anything, your controls do that the standard ones do not.
  24. Consider replicating the look of high-quality or precious materials. If the effect of wood, leather, or metal is appropriate in your application, take the time to make sure the material looks realistic and valuable. For example, Notes reproduces the look of fine leather and meticulous stitching.
  25. Resist the temptation to add features that are not directly related to the main task. Instead, explore ways to allow people to see more and interact more. In particular, you should not view the large iPad screen as an invitation to bring back all the functionality you might have pruned from your iPhone application.

[Source: Apple’s Human Interface Guidelines]

How to Design Your User Interface

One of the first steps you should take in creating an iPhone application is planning out the functionality of the program in terms of functionality and practicality. One of the best ways to do this is through a flowchart. I have posted an image of a flowchart that I developed for a client last summer below for your reference.


Next, it would be good to mock up your application in a program such as Photoshop for your own reference during development. It is also a great tool for presenting designs to potential clients and rendering graphics throughout the building process.

In order to proceed, you must first have a grasp of how to program your application and what limitations there are. Next week, we will begin looking at computer programming as a whole, then start narrowing our focus on Objective-C, Apple’s programming language of choice.

Questions?

Feel free to ask questions about this lesson in the comments section below and we’ll do our best to address your concerns. For more specific consultation regarding the application development process, you may also email me at jack@technobuffalo.com.

If you missed last week’s installment, please click on the link below to ensure that you are up-to-date on all of the information we have covered.

If you have missed previous installments of “Introduction to iOS Development,” please use the links below to ensure that you are up-to-date on all of the information we have covered.

Lesson 1: Introduction to iOS Development: Understanding Your Platform
Lesson 2: Introduction to iOS Development: Installing Xcode


Advertisement


Jack McGrath

Rooted in his childhood obsession with dismantling and reassembling gizmos and gadgets around the house, Jack McGrath's knowledge of programming,...Rooted in his childhood obsession with dismantling and reassembling gizmos and gadgets around the house, Jack McGrath's knowledge of programming,...


Advertisement