Understanding User Experience Design for iOS Apps

Monday, May 27, 2013

The modern design trends for building mobile applications have been changing rapidly. Developers are constantly looking to push the boundaries of what is possible on iOS. And with all the latest software updates, it is safe to say that Objective-C is a forthcoming language with a lot of potential in the mobile realm.

But how about all of the various user experience designs? The iPhone has promoted hundreds of thousands of new applications, and the pool for new submissions is growing rapidly. I want to take a look at some of the more popular UX trends for mobile apps. Specifically I will be using examples from Dribbble to illustrate new ideas in the world of iOS. Designers from any continent should be able to appreciate the talent and technique for building usable mobile applications.

Map Markers

The GPS functionality has been used in a lot of mobile applications. Android, iOS, and now Windows Mobile has been pushing towards this direction for a long time. But as new trends advance we will have to find more safety measures for handling GPS data.

Design interfaces are much more common than you may think. Obviously there are pre-built solutions loading data from Google Maps and other online services. But using iOS we have custom functionality to include our own map markers and direction animations. Foursquare is an excellent mobile app which uses the maps feature to a very formal degree.

Swipe-to-Display Menus

These horizontal menus are in place throughout many iOS applications. Apple started the popular “slide to unlock” functionality which has seeped its way into many other applications. I have to say this is actually a very useful feature in most circumstances. Swiping is a complicated action which users do not often swipe a full screen by accident. Thus it is a perfect safety precaution for hiding user options within a menu list.

Consider adding new and unique context menus with retina icons, links, and buttons, which all display on the user’s swipe. This grants users quick access to all of the various features related to the mobile content. Plus consider the ability to extend or shorten the entirety of the icons toolbar. Users may only need 3 or 4 specific links before accessing the content they need.

Sliding Pages

Much like the swipe menus, there are also sliding navigation panels which have grown in popularity. Most iOS applications should be able to make use of this functionality with just a few blocks of Objective-C. I have personally seen this implemented inside the YouTube app released by Google.

Once logged into the system you may tap onto the top icon to slide open the navigation menu. Overall this is a very common technique and most people savvy with their mobile phones will know how to use it. That is the beauty of our sliding sidebar navigation – not too many people will get lost in the process. And it can be quickly explained via popup menus or tooltips from within the application UI.

Bottom Tab Bars

The popular UITabbar functionality is a default within Xcode. Developers may select a mobile application template which uses all 4 tab icons as they transition between pages. I have grown accustomed to this user interface design as well as many other people. Since Apple first launched the App Store I can remember finding mobile apps which have used this template.

It works so well because you can store a large amount of various pages all within the same application. Switching between tabs is just a finger-tap away. Once more users grow accustomed to this feature it will probably become a staple in lots of other mobile applications. Tab bars are not purposeful to be used in every single mobile app, but they are a good starting point for building a clean navigation experience without confusing the user.

Mobile Webapp UX

We can wrap up with discussing mobile HTML5/CSS3 apps. I want to share a recent shot of this Hacker News reader. It was created by Dharmesh Patel and published as a shot on his Dribbble profile. I think it is worth noting how we are entering an age where JavaScript can possibly keep up-to-date with all of these latest interface trends.

I do think that native applications will always be more in demand. Users can naturally access them via the App Store and this offers the ability to quickly update, plus utilize all of the phone’s internal technology. But Internet-based mobile applications will also run when saved to an iPhone or tablet device. It just requires a lot more work and patience to get everything looking good.

It is worth bringing up the topic of mobile webapps because lots of developers are leaning towards these trends. Although it is still fairly new, keep in mind that the native features in iOS may be replicated using external JavaScript libraries. If this is a technique you may enjoy then I recommend delving a bit deeper into the topic of mobile web development.

Final Thoughts

Although these are not the only popular trends in mobile design, they are certainly well known amongst developers and users alike. Anybody who has access to an iPhone has probably used some of the default applications. And you can learn a lot about best practices simply by studying the design trends on these common iOS apps. Keep yourself open to new experiences and don’t be afraid of trying new things! The world of iOS is constantly expanding and you should keep on top of the latest trends for creating mockups of your own mobile applications.