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 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. 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. An Example
UI
UX

4. Good UX
•
User Goal : Search

5. Less Good UX
•
User Goal : Search

6. So…Let’s see some
don’ts first…

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. Don’t Begin Wireframes or
Designs Without a Flow Diagram

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. 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. 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. 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. 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. 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. 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. Now Some Dos…

17. “Don’t 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
•
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. 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. 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. 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.
•
Notifications 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 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. Design for interruption
•
Your App can be interrupted for several reasons.
Always make sure, your App is prepared to handle
the interruption efficiently.

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…
•
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. Thank you :)