How to design identical UI for cross platform Mobile app?

Question

One client wants to make a native apps for iPhone, Android, Blackberry and and Windows phone. But he wants to make the look of UI identical on all devices as much possible.

1) Is it technically possible? (This question doesn't come under scopr of this site so give answer of 2nd question)

2) Suppose even if it's possible but Would it be good for UX that identical UI across all devices or it's best to follow device specific conventions while making design decisions

I need to guide to Photoshop designer that how to design the UI. I'm confused what i should suggest to him.

Just adding some examples of APPs UI of different devices

Answer 1

1. Yes, you can create nearly identical GUI across multiple platforms. Most operating systems mandate only the status bar to be visible at all times (some, like Symbian and Blackberry, even allow 100% full-screen mode). The only differences would be in the look of controls, which are often under the control of the OS (e.g. drop-down lists).

2. Although anything is possible, it doesn't mean it should be done. Each mobile platform has its own design guidelines because all of them have different physical controls, navigational architectures, and screen sizes & resolutions, all of which affect the visual design of applications. If you build the same GUI for all platforms, you will break conventions and confuse users with unfamiliar patterns.

   In essence, this question is no different than the recent one about transferring OSX design to Windows - all of the points mentioned in answers to it still apply here (primarily, what looks good in one system might not look as good in another).

   In addition, you will have to limit your creativity and won't be able to take advantage of some features that are much better implemented in one system than in another one (e.g. notifications in Android 4.0 vs iOS).

I guess the client wants to have the same GUI to preserve the branding but they don't understand why applications on all platforms must be different. You have to explain to them why that is the case and that a consistent brand experience can be created with just a color scheme and iconography (where appropriate). The best way to show the incompatibility of mobile OS GUI patterns is to compare the most strikingly different elements, such as typography, navigational architectures, and physical controls.

Answer 2

You do not want this. Making the UI of your application identical on all the different platforms will be very annoying to your users, because the platforms simply have different design philosophies.

It's like language translation. You can't simply translate a great work by running it through an automatic online translator. The result will be crap. You need someone who has a deep understanding of both languages to translate it into French, German, etc. It's not a trivial task; you have to simultaneously preserve the intent of the original work while adapting to the structure of the new language.

It's very obvious when somebody has taken, say, an iPhone application, and ported it straight to Android without stopping to see how Android apps are designed. The effect is even more pronounced on Windows Phone 7. There, the design philosophy is to have the interface cover a wide horizontal area; you slide the viewport horizontally to view the different parts:

Whereas the iPhone is much more oriented around lists, and "drilling down" into them:

If you design your WP7 application like an iPhone application, it'll feel weird. Users will find it more cumbersome and less enjoyable, and it will feel out of place on their WP7 phones.

Now, if UX is not the client's #1 priority, then it doesn't really matter and there's nothing you can do. But if it is, they'd be wise to reconsider.

If you must budget, then I would design for the iPhone first, as this is the platform with the strictest interface guidelines, and its users care the most about this consistency. Then focus on Android. I wouldn't even bother building Blackberry or WP7 apps unless you have considerable demand for them -- it's likely not worth it.

Answer 3

For Web app you can possibly try to match with similar interface design. But there are subtle changes that will eventually exist, like the System bar always exist with Android device against iOS. So these are outline frameworks.

Since it is a Native app, you should design seperate screens since the device has its own interface standards, which will be best for the user to have a synchonized feeling with their device apps. So naturally it will better to have a device based app, since it will flow well with their device existing other apps.

Answer 4

Everyone else said it pretty good, but just for reference, the easiest way to make them all the same (if that is what they want after you try to convince them otherwise - and you should try to convince them) would be to use jQuery Mobile. jQM prides itself on being the same across devices - even between smartphone and tablet. It's supported by pretty much every major mobile OS/browser, too.