Some Dos and Don’ts in UI/UX Design of Mobile
Applications
Ashiq Uz Zoha, [email protected],
Dhrubok Infotech Services Ltd.
Workshop on Mobile Computing and Human Computer Interaction HEQEP subproject CP#2080 , BUET
UI/UX , What’s it ?
• UI refers to the aggregation of approaches and elements that allow the user to interact with a system.
• UX is how the complete system works and the feeling the user gets when using it.
An Example
UI
UX
Good UX
• User Goal : Search
Less Good UX
• User Goal : Search
So…Let’s see some don’ts first…
Don’t make things complex , always think simple first
• If you’re a new developer who’s still getting to grips with their coding and development skills, it’s advised strongly that you should not try to make a hyper complicated app as your first project.
• Design the App such that it’s easy to use for the USER and also easier for YOU to implement as a developer.
Don’t Begin Wireframes or Designs Without a Flow Diagram
Don’t Disregard the Development Budget and Time frame
• Sometimes very simple design changes can make the difference between a feature that takes a few hours to build and one that takes a few days. Be weary of over-defining functionality in the design.
• My personal observation says, things can be worst if you work under a Graphic Designer :)
Don’t Start With Low Resolutions & Avoid Bitmaps
• Always design for retina, high-res, pixel-dense screens first, then scale down. This should be obvious to any serious designer but it’s still worth mentioning.
Don’t Undersize The Hit Area
• Think of all types of users who will use your app. You have to ensure same experience or close to same experience for all users.
• Size of every UI components of Application should be usable for all. Say, if one button of your App is small in size , then someone with big finger may not feel comfort to touch it.
Don’t Leave Users Hanging • Leaving the user out of the loop when the app is loading
or processing could cause users to think the app is malfunctioning. It’s also just a poor experience.
Don’t Blindly Copy Style From Other Operating Systems
• Every operating system has it’s own UI/UX patterns.
• For example, iPhone users may not feel good to use an App with Android UI and vice versa.
Don’t Forget About Gestures, But Don’t Abuse Them Either
• keep gestures in mind, but don’t become overly reliant on them. And generally avoid using a gesture-accessed menu or action as the only point of access.
Don’t Assume Everyone Will Use Your App The Same Way You Do
• Usability testing is a must, no matter how good your app looks. Consider organising a closed beta to small group of trusted people (including a few experienced designers) and update the interface before releasing the app to the public.
Now Some Dos…
“Don’t shrink, rethink” - Nokia
• Makes the point that mobile design should not just rehash the desktop design.
Ensure Glanceability
• Design for glanceability and quick scanning. Glanceability refers to how quickly and easily the visual design conveys information.
Use Appropriate Controls
• It’s the most important. Always it should be kept in mind that , you have to provide information to user in easy way and take input from user more easily as well.
• Example ?
Use proper Padding & Margin
• It’s your choice. Sometimes, some small customisation of default UI makes UX better.
• Say, for a TextView some margin on every side can make the text inside it look better than how it might look when the whole TextView is filled up with texts.
User Inputs & Keyboard Handling
• Use Appropriate keyboard when you take different text input from users.
• For example, when you input Phone number , keyboard should be Number Pad rather than alphanumeric.
Try to use alternative inputs
• When possible , you can use alternative input sources like Camera , Sensors, Maps etc.
Support different orientations and screen sizes
• Try to support both Landscape and Portrait orientations of device. And if budget and timeframe is convenient , support different screen sizes as well.
Show alerts in Smart way • Minimize the number of alerts the app displays, and
ensure that each alert offers critical information and useful choices.
• Keep alerts brief and clear, explaining what caused the alert and what the user can do, along with clearly labeled buttons.
• Notifications should be brief and informative, not interfere with anything the user is doing, and be easy to act on or dismiss.
Keep Help/Tips section for users • Make it easy for users to access help and support options. Users
commonly look for help in the footer of a mobile website and in the toolbar or tab bar of an app.
• Offer multiple ways to get support, including options relevant in a mobile context, such as self-serve FAQs, live support via click-to-call, and near-real-time Direct Message tweets. Two financial service companies that actively offer support via Twitter are American Express and Citibank.
• Present a quick introduction and short tutorial on using the app when it first launches, with options for the user to skip and view later.
Design for interruption
• Your App can be interrupted for several reasons. Always make sure, your App is prepared to handle the interruption efficiently.
And Finally…
UX Design is a Art
• Whatever you design, your design is not perfect. It may be Good but better can be done as well.
• So, Above all, follow best practice and your own experience.
Information Sources… • http://mashable.com/2012/03/28/mobile-app-
development-advice/
• iOS WOW Factors — Timothy Wood
• http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/
• https://www.redant.com/articles/ten-tips-for-mobile-ux/
Thank you :)
