Over a million developers have joined DZone.

Three iOS UX Elements to Use in your App

· Java Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

Written by Gradient Girl

Since the release of iOS7, App developers and designers have been adjusting to a whole new look in the Apple universe. Accustomed to embellishments and rich layers, the development community were taken by surprise with the shift to a very flat, simple interface. Regardless of your take on this, design and development for iOS will require a different approach to building apps if you wish to be consistent with Apple’s new look. Given this context it’s worth reviewing popular elements for iOS UX design and thinking imaginatively about how they can be used most effectively.

There are a number of considerations any developer needs to take into account when building for the iTunes store; successful app design is all about planning, testing and reviewing. It’s also important to maintain consistency across the app, both in terms of aesthetics but also when it comes to functioning and layout - users get spooked easily and will drop your app if it’s confusing. Good practice is to imitate the workings of native apps as users will feel instantly at home with your developments, although for immersive experiences such as games this is not necessarily the case.

Whether you have the greatest idea for a lifestyle tool, a travel planner or a weight loss programme, User Experience (UX) should run through everything you do. It’s essential to think how end-users will employ your app to do what they need and whether it will make sense to them. In this post we’ll look at three iOS UX elements which, when deployed effectively, make using your apps a joy.

1. Animations

As insignificant as they can seem, the animations which run through your apps can have an enormous impact on UX. They can turn your build from something purely functional and to a tool which is a real pleasure to turn on. 

When thinking about the kinds of animations you want to use therefore, it’s necessary to bear in mind those same UX essentials: consistency and needs of the user. Animations can have a variety of purposes:

  • Communicate and feedback to the user what is going on. The classic example of a spinning sand timer tells users something is loading so they don’t feel lost as to what the app is doing
  • Animations enhance the sense of direct manipulation. As technology develops, the more we want to forget we’re actually dealing with an interface. So, vibrations, pages which move like paper ones or the impression that pages are physically on top of others make users feel more at home
  • Animations can also help users visualize the results of their actions; buttons which seem to ‘push in’ when tapped also give users greater confidence in what they’re doing

With all the variety of possible animations out there, it can become tempting to use them heavily throughout your product. This is fine for immersive video games, but their overuse can become confusing and even slow down the app. You should therefore employ them sparingly; ideally users shouldn’t even notice they’re there!

2. Represent data and ideas succinctly

At base, a large proportion of apps are about conveying information of some sort to their users. Whether it’s baseball statistics, healthcare figures or economic forecasts, capturing this data in a clear way really improves the UX. However, too many apps demonstrate these figures in bland or confusing ways and when set out in tedious tables, data becomes hard to read and correlations difficult to comprehend. Tools which allow you to build visual representations of information can really improve UX however.

3. Typography - words are only half the story

In the new iOS, the flatness of the interface is married with a new approach to typography. Apple have replaced many buttons and icons with text. While it can occasionally be less clear what a button is and what’s simply text, it does make reading what they say a lot easier.

If, in your app, you decide to imitate Apple’s new approach or not, thinking about the layout of your content is essential. It’s recommended to never show text below font size 11 and also plan for users zooming in and out - be sure that your dynamic type auto-adjusts spacing and height.

As before, the real key with UX is consistency and thinking about end-user needs. Of course, keep styles consistent throughout your build but also consider what they look like:

  • Does your font colour show up against the background?
  • Do size adjustments correspond with what the user wants to read?
  • Does text show up clearly in different lights?

Don’t tempt me!

Considering the variety of touches, tones, colours and visualizations available, it can be tempting to go overboard on your app UX. However, as the saying goes, less is more. The above UX elements are important things to take into account when you design apps, but by far the most important points to bear in mind are about consistency and user needs. Regularly asking yourself if the design is consistent with other pages and if it actually serves a user need will help focus your work and turn your apps into streamlined and extraordinary experiences.

Building Identity Management, including authentication and authorization? Try Stormpath! Our REST API and robust Java SDK support can eliminate your security risk and can be implemented in minutes. Sign up, and never build auth again!


Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}