Advertisement
Mobile Design

iOS Design: Transitioning from Desktop to Mobile

by

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.

Related Posts
  • Photography
    Post-Processing
    Meet Lightroom MobilePreview ipad
    Adobe brings Lightroom to iPad, photographers everywhere rejoice. Thoughts from a frequent Lightroom user on Adobe's latest innovation.Read More…
  • Code
    Mobile Development
    Inspecting iOS Applications with RevealPreview image@2x
    In this article, I'd like to tell you about Reveal, an OS X application created by Itty Bitty Apps that lets you inspect your application's user interface at runtime. Be ready to be amazed.Read More…
  • Code
    iOS SDK
    Getting Started with UIKit Dynamics84oke preview image
    In the previous tutorial, I explained a few new features of iOS 7 that let you add subtle animations and greater interactivity with surprisingly little code to simulate real world physics. In this tutorial, I'll show you how to create a hidden form on a search results page.Read More…
  • Code
    iOS SDK
    An Introduction to UIKit Dynamics84oke preview image
    The new look and feel of the iOS 7 user interface relies heavily on subtle animations to help give users a stronger sense of direct manipulation. In this tutorial, I'll give you an overview of the UIKit Dynamics classes and how they work together.Read More…
  • Code
    Articles
    What Makes Mobile Design Unique?Mobile unique icon2x
    Are you getting started with mobile design? Any designer who's had the opportunity to design for mobile devices as well as desktop computers knows that mobile design is a one of a kind discipline. You'll find challenges unique for mobile. In this introductory article, I'd like to take a look at some of the attributes that make mobile unique. It's no secret that thinking about a product's design makes for a better product. This doesn't solely relate to aesthetics as design also influences how a product's functionality and how the user interacts with it. Design choices have a distinct influence on usability and user experience. When you start out as a mobile designer or developer, it's your responsibility to make the product not only work for you, but also for its target audience.Read More…
  • Code
    Android SDK
    Android SDK: Detecting GesturesAndroid preview@2x
    The Android SDK supports a variety of gestures you can detect, allowing you to tailor the ways in which users interact with your applications. In this tutorial, we will look at the framework that allows developers to add gesture detection to a simple application, working through the process of supporting the fling gesture and outlining how to support other gestures. Once you've completed the development for a basic fling function, you'll be able to add additional gestures to the application yourself.Read More…