Mobile App UX Design | to-do and not to-do

google_plustwitterfacebooklinkedin

Android Nougat: Here is the latest version of Android!!

User experience design is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.User experience design is integrated into software development and other forms of application development to inform feature requirements and interaction plans based upon the user’s goals.

Based on our experience a CodeKhadi in designing and delivering 150+ mobile apps in the past for various clients,As a Mobile app design company we have come across challenging screens and app flow that could have easily made our app UI UX design toppled, you always need to guide yourself with the design principles provided by leaders, in our case it is the iOS Human interface guidelines by Apple and Material design principles by Google.

Here is a list of screen comparisons to demonstrate the app UX hygiene that we need to take into account to create an easy and engaging mobile app design.
 

Harmonious Primary & Secondary ColorNon differentiable Primary & Secondary Color
ux-blog-01
ux-blog-01
Harmonious Primary & Secondary Color
Non differentiable Primary & Secondary Color
ux-blog-03ux-blog-04
ux-blog-01
ux-blog-01
Use a fallback accent color over background colors that are too light or too dark
Don’t use the accent color over a background color if there isn’t enough contrast
ux-blog-05ux-blog-06
ux-blog-01
ux-blog-01
Target specific areas for text protection instead of
blanketing the entire image
Blanketing the entire image, lacks UX
dodont
ux-blog-01
ux-blog-01
Genuine images & stories
Artificially posed images
blog-text-rightblog-text-wrong
ux-blog-01
ux-blog-01
Contrast over image – right
Contrast over image – wrong
Get started with these popular posts on Google+.To get you started, we’re showing you popular
posts on Google+.
ux-blog-01
ux-blog-01
Don’t refer to “we”
Don’t refer to “we”
Send money to anyone in the US who has an email
address. It’s fast, easy, and free.
Send (and receive) money with friends and family
in the US with an email address. It’s a two-step
process with little-to-no latency and there aren’t any
charges for the recipients of the money.
ux-blog-01
ux-blog-01
Be Concise
Be Concise
ux-blog-07ux-blog-08
ux-blog-01
ux-blog-01
The bottom navigation bar exposes the three to
five top-level destinations of an app
If there are fewer than three destinations,
consider using tabs instead
ux-blog-09ux-blog-10
ux-blog-01
ux-blog-01
App primary color to indicate the view in
Avoid using different colors
ux-blog-11ux-blog-12
ux-blog-01
ux-blog-01
Use short labels
Avoid long, wrapping labels
ux-blog-13ux-blog-14
ux-blog-01
ux-blog-01
Correct use of flat buttons
Buttons did not align with the theme
ux-blog-15ux-blog-16
ux-blog-01
ux-blog-01
Raised buttons stand out more than flat buttons
Flat buttons difficult to to differentiate from labels

3 Key Design principles from iOS Human Interface Guidelines

  • Defer – Clear – Deep

Deference. The UI helps people understand and interact with the content, but never competes with it.
Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.Depth. Visual layers and realistic motion impart vitality and heighten people’s delight and understanding.

  • Aesthetic integrity

Aesthetic integrity doesn’t measure the beauty of an app’s artwork or characterize its style; rather, it represents how well an app’s appearance and behavior integrates with its function to send a coherent message.

  • Cognitive burden

Users are familiar with the appearance and behavior of the standard UI elements, so they don’t have to stop and think about how to use them. When faced with elements that don’t look or behave at all like standard ones, users lose the advantage of their prior experience. Unless your unique elements make performing the task easier, users might dislike being forced to learn new procedures that don’t transfer to any other apps.

 

3 Key Design principles from Android Material Design Guidelines

  • Authentic motion

Just as the shape of an object indicates how it might behave, watching an object move demonstrates whether it’s light, heavy, flexible, rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.

  • Print-based design

Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience. Material design adopts tools from the field of print design, like baseline grids and structural templates, encouraging consistency across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes.

  • Color and contrast

Use color and contrast to help users see and interpret your app’s content, interact with the right elements, and understand actions. Choose primary, secondary, and accent colors for your app that support usability. Ensure sufficient color contrast between elements so that users with low vision can see and use your app.

 

Reference:
iOS Human Interface Guidelines:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Up and running with material design:
http://developer.android.com/design/index.html

User experience design:
https://en.wikipedia.org/wiki/User_experience_design

You may also like

2 comments

  • Gale ReagorJuly 12, 2016   Reply →

    Way cool, some valid points! I appreciate you making this article available, the rest of the site is also high quality. Have a fun.

Leave a comment