The most recent trend in modern design (one could also call it necessity) is to design mobile apps that are equally functional on more than one platform.
The rule counts for both novice and experienced designers who are introducing their apps in new OSs – they all need to establish balance between their brand’s functionality and the platforms’ conventions. When this balance is not properly established, the app could feel slightly out of place and it could be quite difficult to use.
Yes, designing for Android and iOS can be challenging. For instance, iOS’s UI/UX conventions are drastically different than the Android ones. When transferring an app from the first to the latest, it is important to take care of specific design patterns and traditional users’ expectations.
Each platform has its own behavior and idioms and it is important to have a clear overview on the differences and similarities before starting to design/develop an app:
Familiarize yourself with material design
Image source: Alexander Zaytsev
Material design is the future of cross-platform design. It employs distinctive surfaces, brave graphics, and purposeful motions that serve as guidelines for proper software behavior.
Material design is at the same time the visual language of Android 5.0-empowered devices and it is highly recommendable for a new designer to familiarize with its principles (regardless of the platform he started developing for).
Prioritize between platforms
Image source: Jason Lim
You might be inside the ‘design for two platforms’ game, but the reality is that you have to prioritize between them. It is your deadlines and limited budget that will decide which the preferred platform will be.
When choosing a platform, make sure it will be the one ensuring best market placement for your app. Long story short, take a look at users: Who are they? What type of operating systems do they prefer? Are they on board for paid apps? All of these can help you choose the right platform for your app.
Depth and surfacing
Image source: Fair UI Kit
Try and implement a special model that will be consistent with the platform you’re working on. Focus on depth creation or surface elevation, and decide which platform provides the qualities you’re looking for (iOS, for instance, applies blur effects to indicate depth, while Android uses elevated shadows and surfaces).
Universal elements
Image source: Gale P
Consider that you will need universal elements (headers, status bars, search filters, etc) which ought to be placed on every page of your app. They should maintain the same size, style, and color on every page, so that the app feels native and consistent.
Therefore, we recommend you to design one set for each platform. We also encourage you to apply placeholders for each mockup, as long as developers are warned not to change them across the board.
Magnetic interaction
User-inspired motion and touch responses are some of the most significant elements of material design. For instance, when a user taps on a button, he receives an immediate response in the form of rising/expanding of that button.
It is a type of ‘magnetic interaction’ between that specific element and the user’s finger tip, which is slowly replacing the traditional color change/fading applied by iOS.
Is it a good idea to use the same UI on both platforms?
Image source: Thom Andersen
Both Apple and Google would advise you not to do that. Obviously, they are trying to avoid similarities and the creation of apps that will perform their functions equally good as their own products. UI copying should be especially avoided when targeting a specific App Store, since none of them would feature an app initially created for their opponent.
Action Sheets
Action sheets enable users to pick specific actions from a single UI item. For instance, when a user touches (or presses longer) an image, he can choose whether to copy, upload, share, or delete that image.
Android and iOS have similar action sheets (usually displayed from the page bottom to overlay the ongoing view). However, in terms of alerts and depth indicators, the two platforms are fairly different:
- The overlays of Android are boldly painted, with modest dropping shadows to point out the upper paper layers.
- The overlays of iOS don’t use dropping shadows, but minor background transparency.
The main differences that should not be forgotten
Image source: Padam Boora
Starting from the basics, and going to the tiniest of details, Android and iOS are completely different from each other. This counts especially for devices running older Android versions, where there are still physical buttons and omnipresent action bars.
Such cannot be implemented in any iOS environment (consider that the action bar should be the most similar feature of the two platforms). All of these differences come somehow naturally – at the end of the day, the platforms were created for absolutely different purposes.
Image source: Padam Boora
There is also a significant contrast in terms of navigation bars-Android aligns text, while iOS keeps it centered. Logos are welcomed on iOS, but not so much on Android.
On the other hand, status bars containing sets of essential information (time, connection and battery) are pretty similar and subject to unified structure. You don’t need to make specific adjustments, but you have to design them in a way which will not cause confusion among users.
Your focus should always remain on the final users. If they are iOS users, not even the best Android app will work for them. They will be unable to recognize the design principles and the entire operating concept.
Image source: Bitter iOS UI Kit
For instance, introducing faux bars to average iOS users will almost certainly lead your app to failure-they will not be able to recognize your pattern. Therefore, think about this. You don’t want to sacrifice loyal users for the satisfaction of your personal tastes.
Then, have in mind that there are universal system tools (such as the Back button, which takes users to the previous page) which can be applied on any platform/device as navigation bars or actual buttons. The good side is that you won’t have to adjust them to a specific platform (neither Android not iOS), as they are highly intuitive and every user knows what they serve for.
Image source: Prakhar Neel Sharma
If the platform allows it, you are welcomed to design specific user interaction elements, but you have to keep them as similar to your identity as possible. You can always use colors, typefaces, icons, tones, or specific spacing to underline your brand, without having to sacrifice the compliance with the platform.
Ending thoughts
Summing up, users are very familiar with both operating systems. They already know how they function and they develop preferences regardless of the trends or limited offers of device vendors.
Therefore, they have specific OS expectations for a pattern which will be modern, but not too different from the one they already used. For instance, they would look for Android’s flat icons; iOS’s gradients; Windows’s tiles, etc. Give them what they want and you will certainly succeed!
Source: http://ift.tt/1SCyXmn
No comments:
Post a Comment