back Mobile Technology

Rad Visual Designing Tips for Android App Developers

Android platform is challenging to the developers and when aesthetically designed can prove to be visual treat to the customer. This satiating end user experience which is much craved for among the developers, can be a fulfilling experience. The full utilization of the capabilities of android can unleash a wide array of technologically superior mobile devices in the market. But most of the cell phones available in the market do not harness the full potential of the android platform.

The tips listed below with a brief introduction to the basic components involved in design are expected to bridge the gap between the designers and the user to create an enhanced end user experience. Conforming to these tenets of design can also give you the assurance of being consistent with the user requirements. It will be useful for you to develop pixel-perfect graphic assets and nice XML layouts.

Pixels

Pixels are a very important part of the visual design experience. After all, pixels themselves are the basic components that form an image and are the very essence of it. Most of the developers are familiar with User Interface (UI) patterns, but lack the acumen when it comes to visual designing. Exploring the possibility of supplying this lack of expertise can mean the deliverability of high-fidelity mock-ups, drawable resources (i.e., graphic assets) and guidance to the inquisitive developer.

1.  Scale well: Android is a platform designed for a variety of screen densities. Screen resolution is not a question here, but graphics, widgets and layouts on par with a density independent measurement scheme is.

Devices using the android platform come factory-loaded with a mechanism to optimize graphic assets for each density. Manually optimizing is definitely not a good idea. The platform can scale down the resources reasonably well without a lot of hiccups. But it is wise to test designs on low-end devices first and optimize resources that scale badly.

1.  Be state friendly: Touch states play a pivotal role in the usage of the device. Going by the market trends, capacitive touch screens are in vogue. The touch states provide the user with available options to select. When customizing widgets such as buttons, it is important to create drawables (the area on the touch screen that is sensitive to the touch) for all the necessary states (i.e., default, focused, pressed and disabled). A brief description follows:
   1.  Default: as the name suggests, this state is not available for the operation of the user and can work silently in the background.
   2.  Focused: this state usually highlights the option at the very top of the screen. It allows the user to navigate the menu with his trackball or directional pad. This option is not much used in recent smartphones.
   3.  Pressed: this state acknowledges the user selection
   4.  Disabled: as the name suggests, this state disables or dims the options which are not available or are irrelevant to the operation.

The size of the touch target matters too. Normally, if stylus replaces the fingers, there can be a small size touch target. If fingers are used the size of the touch target should be at least 45 density pixels in width and height.

1.  Use fonts: Droid Sans and Roboto are the 2 fonts popular with android developers. Roboto was released in Ice Cream Sandwich (Android 4). It has been compared to Helvetica, but is a little condensed, ideally suitable for small screens. There is a provision in Android for using other fonts too. They can be packaged within an app in TTF format (with some memory overhead).
2.  Use 9-Patch drawables: drawables define the touch sensitive areas on the touch screen. 9-Patch drawables allow Portable Network Graphics (PNGs) files, which are basically image files, to stretch (as in the zooming operation) and scale down nicely in pre-defined ways.

Markings along the top and left edges define the stretchable areas. The padded content areas can optionally be defined with markings along the bottom and right edges. 9-Patch drawables are essential for creating and customizing User Interface (UI) widgets (i.e., buttons and the like). These drawables can also define the areas for scrolling down a list of options and swiping, which are stretched vertically in the middle of the top of the screen and horizontally stretched at the bottom of the screen respectively.

It is possible to manually define the 9-Patches too, but the android SDK is provided with a nice, simple tool called Draw 9-Patch. This facilitates the quick and easy conversion of a regular PNG into a 9-Patch. It highlights the stretchable area and displays previews of the resulting drawable with different widths and heights.

1.  Stick to the design legacy: honeycomb (Android 3) and Ice Cream Sandwich (Android 4) have come loaded with a snazzy visual design that incorporates the Holo theme. Very less manufacturers do justice to the hallowed platform that Android is- they do not keep the versions up-to-date. Only the most popular devices that have made their way into the market recently, sport the Android 4 (Ice Cream Sandwich).

There are two types of consumers whom you could possibly cater to- one are that fit in with the modern look and the other vouching for familiarity with the design. The former can be provided with a design necessarily throwing strong focus on delivering the current look, feel and experience to all devices, while the latter can be satisfied with a separate style of widgets and drawables used for Android gingerbread and its previous versions.

1.  Showcase the brand: some clients fear that by going with the recognized user interface design patterns, they may lose their brand appeal. This is not true. On the contrary, with the introduction of non user friendly patterns, the users can be at their wit’s end trying to figure out the right way of using their device. This could be detrimental to the brand, losing its connect with the customer.

Branding can be expressed through an appealing design of icons, drawables and widgets, and also with a good choice of colours and fonts. Standard platform widgets can be tailor-made to suit the requirements of the user and aid in striking the right balance between the brand values and platform consistency.

1.  Create high-fidelity mock-ups: High-fidelity mock-ups are necessary to optimize the user interface components. They can determine whether the components are sensibly sized and placed. The android design preview allows you to check how the components fare with an attached android device directly from your favourite design software.

The best way to make mock-ups counted is to work against the screen characteristics of the most popular devices. Ideally, create mock-ups for each alternative layout required by screen size or orientation.

1.  Polish: For a developer, it is essential that the designers follow-up their work and closely collaborate with him to ensure the designs are iterated and refined as the app develops. It is also helpful that you work with designers that have the right attitude.

Animated transitions are to be made part of the design when they make sense. This would keep the users distracted or entertained when the apps are loading.

User experience

With Android’s patterns and conventions, users can form expectations about how an unfamiliar app will behave. Here are a few tips to an enhanced user experience.

1.  Design user flows on potential users with wire frames or mock-ups and iterate.
2.  Be platform consistent as they provide familiar hints about how to navigate and interact. Action bar, dashboard, work spaces, ribbon menu are the familiar and proven user interface patterns.
3.  Design responsively, as a good strategy is to target popular, middle sized phones (3.2”-4.6”) and then optimize as necessary with alternate layouts and user flows. Also, use landscape screen keyboards as text entry on touch screens is awkward and error prone. Some devices use physical keyboards that require to be held in landscape, so it is better to be orientation agnostic.
4.  Offer a preview of the functionality of the app and then optimize it after user feedback.
5.  Promote the app suitably in various contexts and scales in which they appear.

Besides these tips, the best way to get acquainted with the variables associated with visual designing is to use the android platform every day. The most satisfying app designs have a few things in common: platform consistency, attention to detail and clean visual design. The first two, at least can be picked up by using and analyzing existing android apps.