| Issue 3, 2012 |
|
Download pdf |
The temptation to embellish mobile applications with rich, custom user interface designs is irresistible. Developers are drawn to it as a way of differentiating their apps from the competition. Unfortunately, the needs and expectations of the end user are often overlooked in the search for aesthetic individuality. Usability is usually the first casualty. In this article, I explore the difference between a custom and a native user interface and the impact on user expectations.
Introduction
Thanks to devices like the iPhone, the smartphone user of today is very sophisticated. The combination of expertly designed system apps and rich third party games and utilities available on the app stores has set the expectations of users higher than ever before. Mobile users now have user interfaces that they are very familiar with and expect the same familiarity and ease of use to be adhered to by all other apps they use. If applications have their own way of doing things, then it should be with very good reason or it must simply look amazing.
Native UI
The best way to see a purely native user interface (UI) is to look at the settings screen or app on a modern smartphone as shown in Figure 1. The manufacturers of these phones are unlikely to feel this part of their software needs any bells and whistles, so more often than not these types of OS components are very functional and without embellishments. In fact, most of the apps installed on a device when it ships are completely native UI. Apple does on occasion break this convention. Its Game Center app features rich graphics throughout – although underneath it is still closely following the standard UI conventions of the OS.
Custom UI
Some designers choose custom UIs for their apps with good reason. iCarpenter’s suite of tools all replace physical objects and are arguably best presented as digital copies of their real-world counterparts. It’s also fair to say they are fairly gimmicky tools (would a carpenter really use an iPhone instead of a spirit level?).
However, other designers choose to adorn their apps with custom, graphical interfaces as shown in Figure 2. There is always a risk of taking this too far and sacrificing clarity or usability for the sake of prettiness. Certainly in an enterprise level application it would never be sensible to design a main menu that resembles a car dashboard.
This type of interface design is called Skeuomorphism – the mimicking of real world objects within a digital interface. The argument as to whether or not skeuomorphism has a place within application design still rages. Microsoft’s Windows Phone operating system (closely followed by Google’s Android) has completely shunned it. Many designers agree that it can often seem degrading to wrap an interface up in fake textures and pretend widgets, but when implemented with care a skeuomorphic interface can undoubtedly enrich the user’s experience.
Tobias Bjerrome Ahlin, an interface designer at Spotify says, “Skeuomorphism is a powerful tool. You shouldn’t be afraid to use it, but you should be careful. It probably doesn’t belong, for example, in a productivity app like [Apple’s] Mail.”
Real World Examples
Jamie Oliver’s 20 minute meal app – available for iOS and Android – combines custom graphics and navigation devices with more standard controls as shown in Figure 3. The main navigation is handled by a bar of icons at the top (Android) or bottom (iPhone) of the screen, in a way that would be familiar to regular users of each device. The content in the main body of the app is richly rendered using custom fonts, large images and textured backgrounds. A unique sub-navigation mechanic grants the user access to the various pages within each section.
In its first incarnation, the Facebook mobile app did a fairly good job of following the operating system’s UI as shown in Figure 4. An icon bar at the foot of the screen was employed to move between the different sections in the app. The tabbed pages to handle sub-navigation, along with labels to filter content, were the only part of the UI that used a custom design – although even this was in keeping with the overall look and feel of the OS. In the following update however, the developers chose to employ a completely unique mechanic for navigation. A cryptic icon reveals a tall menu at the left of the view, whilst the original page remains partially visible on the right.
It appears that the app’s designers decided that to ensure consistency across mobile, tablets and mobile web, a custom interface needed to be created. The value of this decision is in doubt however – a user of the iPhone app is unlikely to also be accessing Facebook via the mobile browser.
Pros & Cons of Custom UI
Designing custom user interfaces can clearly enhance the experience for the end user. However, assuming the developer does a good job of creating a unique interface for their app and does not sacrifice usability, there can still be concerns.
| Custom User Interfaces | |
|---|---|
| Benefits | Downsides |
|
|
When using custom or enhanced UIs, you have to be certain that you don’t create problems further down the road. If you’re designing a one-off app for a single device then fine, go crazy. However this is unlikely. Apps are rarely designed for a single platform at a fixed point in time. Deploying to multiple platforms is usually the first consideration. Will your interface work without touch input? Is it resolution dependent? New devices often mean new screen dimensions and aspect ratios.
Using the platform’s UI elements can mean that a lot of the work is handled for you (especially when using webMethods Mobile Designer). There’s no need to come up with a fancy new date-picker - simply request one and the user gets what they expect.
Custom UIs can bring other problems. Localization can become problematic with quirky, graphical layouts (baking text into images is a definite no-no). Accessibility can be affected if the layout strays too far from the norm (will text to speech still work?).
Using graphics to enhance interface design will always mean longer development times (both in planning and execution) and increased costs. Access to the required graphical skills must also be in place.
Pros & Cons of Native UI
Opting for a device-native UI will guarantee that your app meets users’ expectations as it ensures that there will be practically no learning curve for users to operate the app. Developing apps with native UIs – especially within webMethods Mobile Designer – will always be quicker and cheaper than creating custom controls. It is also the best way to design an application that is likely to evolve over time.
| Native User Interfaces | |
|---|---|
| Benefits | Downsides |
|
|
Whilst it’s true that a native app might be less visually appealing than a custom design, it is still possible to enhance the layout with background graphics, images, icons and many other features. Also webMethods Mobile Designer always allows the developer to plug in custom code at any time.
Meeting User Expectations
As the smartphone market has grown, a core set of UI techniques has become fairly common across most devices. Elements such as header bars with back buttons and global navigation icons at the foot of the screen are familiar and easily understood by all users.
webMethods Mobile Designer’s Native UI tools provide an abstracted set of user interface components, from header bars and global navigation icons to input fields and web views. These controls should cover almost all of your interface development needs. Also, you can be confident that the interface of your app will adapt to each device on which it is installed, as shown in Figure 5. Most importantly, your end users will be familiar with the interface of your app even if you, as a developer, have limited experience on certain platforms.
A full list of UI components can be found in the Mobile Designer Java documents and examples of each component can be seen in action in the Native UI demo application provided with the Mobile Designer installation.
Join the Software AG Tech Community and check out all the valuable resources available on the webMethods Mobile community at Tech Community.SoftwareAG.com/webmethods/products/mobile.