One Design Doesn’t Fit All

One Design Fits All

One Design Doesn’t Fit All

“One Design Fits All” Does it hold true even for mobile apps? Definitely “NO” when designing applications for multiple mobile platforms. As Google's Eric Schmidt famously said that mobile is no longer winning, it has already won. But the race isn't over. Infact it is becoming more tough to stand out in this competitive market.

How to stand out?? The best apps focus on OS centric design, specifically Android and iOS. Realizing that these operating systems are intrinsically different and the users love the OS they are using, creating an Android app with iOS design will cut down the users and leave them disappointed.

When an android user downloads an app, he might think 'Why am I seeing iOS styles  and navigation on my Android phone? If I wanted an iPhone, I would have gotten an iPhone. Why does this app creator think everyone is on an iPhone? '

Not only this, we have to admit the hardware specifications of both the OS's are different. We have a huge range of android high end and low end phones with varying hardware configurations. Whereas Apple guarantees a high quality and well versed hardware. To make a perfect app, we must always consider the software hardware combination and constraints specific to OS.

While designing a mobile app, the first strategy should be

·Who you are talking to?

·What you want them to do?

·How quickly can they do that across mobile, tablet

For less tech-savvy users, the "alien" platform's features can even be confusing. For them it is always better to have different, conforming UIs on each platform than one unified UI.

It has been observed that for iOS, it is all about design, design and design whereas for many android apps, content is king. Mobile isn't about making things smaller, its little things that count.

Don't make design too complex for user to understand. Simpler is better. If you think by having a similar UI across all platforms, you are being consistent, then you need to rethink what consistency means in this specific context. What type of users are you talking about that is looking for this "consistency"?

The platform specific guidelines are much more for the same. They set a design trend. For example user is used of using a 'Menu button' and will know the shortcuts will be available where. It won't keep user disappointed.

Since there is no verification process of android apps before being live in the market, most people think, why do we need separate design for android? We can use same as iOS.

You can have an app on PlayStore but the Google Play reviewers will never give your app a positive rating, and consequently, your app will never be featured in the top results. General usability tests have clearly shown, users love native.

You don’t need a designer’s eye to segregate difference between these, just remember in this era of mobiles, think Platform-First. What looks good, sells good.

Managing System UI with changing APIs

Moving on with Android, there are several features introduced with every upcoming API version. Amongst those, the most improved feature we saw was Managing System UI.



Back before Android 4.1, this is how developers provided some basic UI features for Hiding Status Bar /Full Screen support.

if (Build.VERSION.SDK_INT < 16) {
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
  WindowManager.LayoutParams.FLAG_FULLSCREEN);
}

With advent of Android 4.0, there came a sudden UI option accessibility. Now instead of using WindowManager we could directly use setSystemUiVisibility() method.

decorView.setSystemUiVisibility(uiOptions);

where

decorView can be any view

and uiOptions is the flag providing various options.

With it was introduced a new feature of Dimming the System Bar. This can be acheived by using flag SYSTEM_UI_FLAG_LOW_PROFILE . The bars will be present but the details will be blurred. The content UI doesn't resize, only the status bar icons are pushed away.



As ActionBar had already come up in the picture, developers now would also need to take care of it while using these flags. It is a good practice to hide action bar when hiding the Status bar.



With Android 4.1, there came other System UI and Layout options to be used seperately or in combination.
SYSTEM_UI_FLAG_FULLSCREEN: This will hide both status bar and navigation bar.
SYSTEM_UI_FLAG_HIDE_NAVIGATION: This will hide only the navigation bar.



For Managing Content to appear behind the StatusBar/NavigationBar
SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN: for full screen layout
SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION: Layout will adjust itself to hide navigation.
SYSTEM_UI_FLAG_LAYOUT_STABLE: for unchanged Layout dimensions.



Inorder avoid system bars to get covered, use android:fitsSystemWindows=true. This adjusts the padding of the parent ViewGroup to leave space for the system windows.



To auto handle resizing of UI content on absence of status bar,we need to have android:windowActionBarOverlay=true in applications theme.Now SYSTEM_UI_FLAG_FULLSCREEN will hide the action bar as well.



As Android 4.4 Kitkat paved its way, there came Immersive Mode Feature.
Immersive Mode enables the app to go truly full screen. Unlike others, activity continues to receive all touch events. The user can reveal the system bars with an inward swipe along the region where the system bars normally appear.



Immersive mode comes with two flag options:
1. SYSTEM_UI_FLAG_IMMERSIVE: It makes system bars and other UI controls hidden. All the Ui changes can be tracked using View.OnSystemUiVisibilityChangeListener
2. SYSTEM_UI_FLAG_IMMERSIVE_STICKY: As the user swipes to display the system bars, Semi-transparent bars temporarily appear and then hide again. The act of swiping doesn't clear any flags, nor does it trigger your system UI visibility change listeners, because the transient appearance of the system bars isn't considered a UI visibility change.



The Immersive mode flags are to be used with SYSTEM_UI_FLAG_HIDE_NAVIGATION or SYSTEM_UI_FLAG_FULLSCREEN

Some Important Things to Note:

• The method setSystemUiVisibility() only has an effect if the view you call it from is visible.

• Navigating away from the view causes flags set with setSystemUiVisibility() to be cleared.
  
• If you want system UI changes to persist as the user navigates in and out of your activity, set UI flags in onResume() or onWindowFocusChanged().
  
• To programatically clear all flags set use setSystemUiVisibility(0)
  

Where to use Immersive and Immersive Sticky?

• If you're building a truly immersive app, where you expect users to interact near the edges of the screen and you don't expect them to need frequent access to the system UI, use the IMMERSIVE_STICKY flag in conjunction with SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION. For example, this approach might be suitable for a game or a drawing app.
• If you're building a video player or some other app that requires minimal user interaction, you can probably get by with the lean back approach, available since Android 4.0 (API Level 14). For this type of app, simply using SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION should be sufficient. Don't use the "immersive" flags in this case.
  
• If you're building a book reader, news reader, or a magazine, use the IMMERSIVE flag in conjunction with SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION. Because users may want to access the action bar and other UI controls somewhat frequently, but not be bothered with any UI elements while flipping through content, IMMERSIVE is a good option for this use case.
  

Some famous apps using immersive mode
Badland, Beach Buggy Blitz, ComicRack, Comixology, Dayframe, DicePlayer, Dynamic Notifications, EVAC (and all other games by Hexage), FBReader, Feedex, Flixter, Google Play Books, Google Search, Hangouts (when viewing images), Instapaper, Manga Plus, Moon Reader, MX Player, Nest, Paint Splash! , Widget Locker etc

References
https://developer.android.com/training/system-ui/index.html
http://www.youtube.com/watch?v=cBi8fjv90E4
http://www.droid-life.com/2013/12/19/a-list-of-apps-that-support-android-4-4-kit-kat-immersive-mode/



Code
https://github.com/NehaDhanwani/AndroidDemos



Build some great apps.. and keep coding:)