Best practices that should be employed to design for mobile

1. UI & UX DESIGN
FOR MOBILE
Joe Ssekono
GANTRY MOTION STUDIO
GANTRY

2. WHAT IS THE
DIFFERENCE
BETWEEN UI AND
UX?
SECTION ONE
app.coGANTRY MOTION STUDIO

3. app.co
Process of enhancing customer satisfaction and
loyalty by improving the usability, ease of use, and
pleasure provided in the interaction between the
customer and the product
UI DESIGN
GANTRY MOTION STUDIO

4. app.co
A compliment of User experience design, the look
and feel, the presentation and interactivity of a
product.
UX DESIGN
GANTRY MOTION STUDIO

5. app.co
Something that looks great but is difficult to use is
exemplary of great UI and poor UX. While Something
very usable that looks terrible is exemplary of great UX
and poor UI.
Something that looks great but is difficult to use is
exemplary of great UI and poor UX. While Something
very usable that looks terrible is exemplary of great UX
and poor UI.
GANTRY MOTION STUDIO

6. DESIGN PRINCIPLES
SECTION ONE
app.coGANTRY MOTION STUDIO

7. app.co
Loose guidelines that designers can stick to in
order to improve the quality of a user interface
design.
DESIGN PRINCIPLES
GANTRY MOTION STUDIO

8. The Structure Principle
The Simplicity Principle
The Visibility Principle
The Feedback Principle
The Tolerance Principle
The Reuse Principle
DESIGN PRINCIPLES
SECTION ONE
caff.co
app.co

9. app.co
Design should organize the user interface
purposefully, in meaningful and useful ways based
on clear, consistent models that are recognizable to
users, putting related things together and separating
unrelated things, differentiating dissimilar things and
making similar things resemble one another.
STRUCTURE
GANTRY MOTION STUDIO

10. app.co
The design should make simple, common tasks easy,
communicating clearly and simply in the user’s own
language, and providing good shortcuts that are
meaningfully related to longer procedures.
SIMPLICITY
GANTRY MOTION STUDIO

11. app.co
The design should make all needed options and
materials for a given task visible without distracting
the user with extraneous or redundant information.
Good designs don’t overwhelm users with
alternatives or confuse them with unneeded
information.
VISIBILITY
GANTRY MOTION STUDIO

12. app.co
The design should keep users informed of actions or
interpretations, changes of state or condition, and
errors or exceptions that are relevant and of interest
to the user through clear, concise, and unambiguous
language familiar to users.
FEEDBACK
GANTRY MOTION STUDIO

13. app.co
The design should be flexible and tolerant, reducing
the cost of mistakes and misuse by allowing undoing
and redoing, while also preventing errors wherever
possible by tolerating varied inputs and sequences
and by interpreting all reasonable actions.
TOLERANCE
GANTRY MOTION STUDIO

14. app.co
The design should reuse internal and external
components and behaviors, maintaining consistency
with purpose rather than merely arbitrary
consistency, thus reducing the need for users to
rethink and remember.
REUSE
GANTRY MOTION STUDIO

15. TIPS ON HOW TO
DESIGN GREAT UI
FOR MOBILE APPS
SECTION ONE
app.coGANTRY MOTION STUDIO

16. For your app to look fantastic,
include graphics that are tailored to
the screens of the specific devices.
RIGHT SIZE
GRAPHICS
GANTRY MOTION STUDIO

17. ALL ABOUT
USERS
SECTION ONE
caff.co
app.co
You must know the people who are
the users of your mobile app.

18. Note that user interface should be
designed in such a manner that the
app is fully usable on multiple devices
and mobile operating systems.
FULLY
RESPONSIVE
GANTRY MOTION STUDIO

19. FIT THE
FORMAT
SECTION ONE
caff.co
app.co
We have all encountered apps that
hang while loading some large
graphic file. This is not because of
wrong size but due to inappropriate
format.

20. Remember, each iteration amounts to
valuable lessons that are great for
improving performance and can be
further re-applied for the future projects.
FULLY
RESPONSIVE
GANTRY MOTION STUDIO

21. COLOURS TO
POINT
SECTION ONE
caff.co
app.co
Prefer to use subtle animations to
transit between screens and
implement UI control color
differentiation to inform the state
changes in application.

22. Keeping things simple means an
approach in which the first-time user
can immediately start using the app
without having a need to go to the
detailed set of instructions or tutorials.
KEEP IT
SIMPLE
GANTRY MOTION STUDIO

23. CONTRAST
FOR VIEW
SECTION ONE
caff.co
app.co
Decide on high-contrasting color
schemes that makes design and
content stark clear.

24. Use fonts that are readable and
pleasing to the eyes. Use a font that is
big and balanced well with the other
elements of the screen. Fonts below
12pt are a big no-no.
LARGE CLEAR
FONTS
GANTRY MOTION STUDIO

25. FOLLOW
PLATFORM
RULES
SECTION ONE
caff.co
app.co
Don’t try to reinvent the wheel and
incorporate interface controls and
screen design that has been
accepted by the users.

26. It is always good to have real users for
their ideas and opinions. This will help to
effectively evaluate as to what to
include and what to leave.
TEAM UP
REAL USERS
GANTRY MOTION STUDIO

27. BACK BUTTON
ON GUARD
SECTION ONE
caff.co
app.co
Back button is an ultimate savior for
the users. Abiding by the OS stated
behavior and back button positioning;
you can ideally create an app that
rightfully meets users’ expectations.

28. Try placing these favorable icons in your
mobile app to add an intuitive factor to
it. If you are introducing new icons, then
make sure to mention its function along
with the icon to add clarity.
POPULAR
ICONS WORK
GANTRY MOTION STUDIO

29. THE ATTRACTIVE
QUOTIENT OF AN
APP’S UI RELIES ON
THE TARGET
MARKET.
SECTION ONE
app.coGANTRY MOTION STUDIO

30. ANYTHING YOU
WOULD LIKE TO
ASK?
Joe Ssekono
UI/UX Designer
+256 782 120 367
+256 703 000 788
GANTRY MOTION STUDIO
@ssekono
ssekono@gmail.com
Gantry