Some Dos and Don’ts in UI/UX Design of Mobile Applications

Download Some Dos and Don’ts in UI/UX Design of Mobile Applications

Post on 16-May-2015




4 download

Embed Size (px)


This slide is about some good practices and don'ts of UX design in Mobile Applications. This was presented by the author as an invited talk in "Workshop on Mobile Computing & Human Computer Interaction" under HEQEP subproject CP : 2080 , at Dept of CSE , BUET.


  • 1. Some Dos and Donts in UI/ UX Design of Mobile Applications Workshop on Mobile Computing and Human Computer Interaction HEQEP subproject CP#2080 , BUET Ashiq Uz Zoha,, Dhrubok Infotech Services Ltd.

2. UI/UX , Whats 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. 3. An Example UI UX 4. Good UX User Goal : Search 5. Less Good UX User Goal : Search 6. SoLets see some donts rst 7. Dont make things complex , always think simple rst If youre a new developer whos still getting to grips with their coding and development skills, its advised strongly that you should not try to make a hyper complicated app as your rst project. Design the App such that its easy to use for the USER and also easier for YOU to implement as a developer. 8. Dont Begin Wireframes or Designs Without a Flow Diagram 9. Dont 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-dening functionality in the design. My personal observation says, things can be worst if you work under a Graphic Designer :) 10. Dont Start With Low Resolutions & Avoid Bitmaps Always design for retina, high-res, pixel-dense screens rst, then scale down. This should be obvious to any serious designer but its still worth mentioning. 11. Dont 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 nger may not feel comfort to touch it. 12. Dont 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. Its also just a poor experience. 13. Dont Blindly Copy Style From Other Operating Systems Every operating system has its own UI/UX patterns. For example, iPhone users may not feel good to use an App with Android UI and vice versa. 14. Dont Forget About Gestures, But Dont Abuse Them Either keep gestures in mind, but dont become overly reliant on them. And generally avoid using a gesture-accessed menu or action as the only point of access. 15. Dont 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. 16. Now Some Dos 17. Dont shrink, rethink Nokia Makes the point that mobile design should not just rehash the desktop design. 18. Ensure Glanceability Design for glanceability and quick scanning. Glanceability refers to how quickly and easily the visual design conveys information. 19. Use Appropriate Controls Its 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 ? 20. Use proper Padding & Margin Its 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 lled up with texts. 21. User Inputs & Keyboard HandlingUse 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. 22. Try to use alternative inputs When possible , you can use alternative input sources like Camera , Sensors, Maps etc. 23. 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. 24. 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. Notications should be brief and informative, not interfere with anything the user is doing, and be easy to act on or dismiss. 25. 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 nancial 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 rst launches, with options for the user to skip and view later. 26. Design for interruption Your App can be interrupted for several reasons. Always make sure, your App is prepared to handle the interruption efciently. 27. And Finally 28. 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. 29. Information Sources iOS WOW Factors Timothy Wood elements-mobile-user-experience/ 30. Thank you :)