iOS Design: Transitioning from Desktop to Mobile

The distance between desktop application design, web application design, and mobile iOS application design could not be more great. User interface design differs in areas such as screen real estate, user input, and more. In this article, we'll  cover some common and uncommon user interface pitfalls when transitioning to mobile application design.

Screen Size

iPhone-iPad-Screen-Size

On the desktop you have the freedom to present a lot of different information simultaneously. If you bring this over to a mobile platform, you end up with an overwhelming, and cluttered first impression of your app. There are several ways to combat this. First off, get rid of any data that is not needed. Mobile applications don't have to be as complex as their desktop counterparts. Second, either split up your information into different views (think UINavigationController) or allow the user to scroll rather than shrinking your content. Remember that mobile applications should be created for fast, quick consumption. Third, make your content takes up the larger portion of the screen. For example, in a web browser app, the webpage should take up most of the screen, unnecessary toolbars should only come into view when the user focuses on the element.

Animations

Contrary to desktop applications where animations are usually uncommon, animations are used heavily in mobile design. Nearly every time you transition from one view to another an animation should be used. Any elements moving across the view should also be animated. If you are hiding the status bar from your application all of a sudden, you should animated it to slide up. Animations are important in iOS app design to help bring continuity across the OS. From when you launch an app, and see it grow into the screen, to when your rotate an app and see your view spin around, iOS is full of animations. Of course, there are certain cases where animations are not appropriate. Some of these are when the user has canceled or has requested to stop an action -this should be done immediately without animation. Another example is when you're setting the value of a control systematically, such as setting a UISlider's value.

Autoresizing Masks

Autoresizing Masks are incredibly helpful in positioning your content in a way that will automatically scale up and down with the screen size. These not only make it easier when adding support for larger screen iOS devices such as the iPad, but also for providing a fluid interface when your application has to respond to screen size changes. In iOS, the screen size can frequently shrink due to a double height status bar if the user is doing another activity in the background, such as talking on the phone. Making sure your design layout can respond to these changes is key consideration on mobile devices.

Responsiveness and Performance

This means make sure your application launches quickly when the user opens it. Avoid splash screens and other similar elements from the desktop environment that may frustrate users who are trying to launch your application in a hurry. Once loaded, make sure you perform tasks of great processing length in a background thread and asynchronously. Never block your UI Thread. If this becomes unresponsive, your app will seem to have crashed. 

User Input

Think about different methods of user interaction that may be faster and more efficient than normal methods. For example, iOS uses the "Shake to Undo" motion for undo-ing typing in a text box. You can also implement motion gestures using Core Motion, or touch gestures to have users interact with your application. This may also even be a plus by increasing the screen space your application has to work with. It is important to remember not to go overboard with these alternative means of interaction.

Application State

multitasking

Preparing your app for multitasking is key. Save your application state when your app is terminated and reload that state when your application is launched again. Most users expect that if they close an app at a certain point, they can return to the same place they were when they left. Don't restore a state to a part of the app that the user may potentially want to keep private. Some third-party frameworks such as Three20 encompass this feature built-in.

UIKit

Use UIKit whenever possible to maintain continuity between iOS applications. If you need a control or element that UIKit doesn't provide, don't create it from scratch unless you really need to. Subclassing a UIKit control can usually cut down significantly on the amount of work required to build what you need and will most likely be faster and more efficient.

Wrap Up

Desktop and mobile applications are two different things. A successful model on the desktop does not translate to being successful on mobile devices. Following these tips can greatly increase your app's user experience.

Thanks for reading. If you have any questions or comments feel free to leave a comment below.

Tags:

Comments

Related Articles