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

Applications

Ashiq Uz Zoha, ashiq.ayon@gmail.com,

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 :)