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

7,560 views

Published on

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.

Published in: Technology

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

  1. 1. Some Dos and Don’ts in UI/ UX Design of Mobile Applications Workshop on Mobile Computing and Human Computer Interaction HEQEP subproject CP#2080 , BUET Ashiq Uz Zoha, ashiq.ayon@gmail.com, Dhrubok Infotech Services Ltd.
  2. 2. 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.
  3. 3. An Example UI UX
  4. 4. Good UX •  User Goal : Search
  5. 5. Less Good UX •  User Goal : Search
  6. 6. So…Let’s see some don’ts first…
  7. 7. 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.
  8. 8. Don’t Begin Wireframes or Designs Without a Flow Diagram
  9. 9. 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 :)
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. 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.
  16. 16. Now Some Dos…
  17. 17. “Don’t shrink, rethink” Nokia •  Makes the point that mobile design should not just rehash the desktop design.
  18. 18. Ensure Glanceability •  Design for glanceability and quick scanning. Glanceability refers to how quickly and easily the visual design conveys information.
  19. 19. 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 ?
  20. 20. 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.
  21. 21. 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.
  22. 22. Try to use alternative inputs •  When possible , you can use alternative input sources like Camera , Sensors, Maps etc.
  23. 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. 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. •  Notifications should be brief and informative, not interfere with anything the user is doing, and be easy to act on or dismiss.
  25. 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 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.
  26. 26. Design for interruption •  Your App can be interrupted for several reasons. Always make sure, your App is prepared to handle the interruption efficiently.
  27. 27. And Finally…
  28. 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. 29. Information Sources… •  http://mashable.com/2012/03/28/mobile-appdevelopment-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-mobileux/
  30. 30. Thank you :)

×