BCI3283

Mobile Application Development

Chapter 2
Designing Mobile Application
Contents
By
Ts. Dr. Nabilah Radzuan
(Faculty of Computing)
Designing Mobile Application Contents
• Aims
To learn how to design a mobile application contents using Storyboard and
Justinmind Prototyper.

• Outlines
• The Storyboard Flow
• How to do mobile applications
• 10 Do’s and Don’ts of Mobile UX Design

References
• [Link]

2
The Storyboard Flow
• A good quote
• “This is where it all begins. The first step is to
understand what you are trying to communicate
and what your intended message is. If you don't
understand your message, no one will. Creating
a script or storyboard will help ensure that you
and your audience understands your intent.”
• Who is your audience?

3
The Storyboard Flow
• What do the screens look like and how are they linked?
• A storyboard is a representation (often in the form of hand-drawn
sketches) of how each activity looks like and how navigation supposed
to be (screens linking).
• There are multiple purposes of using the storyboard:
• To declare a project’s overview
• To provide programmer with a suitable guide or a road map.
• To illustrate links among different activities or screens
• To illustrate the object interface functionality.

4
The Storyboard Flow
• At the first stage, there is no exact photos or graphics.

• Show the position of the GUI elements like graphics, text, photos,
buttons, ..etc.

• Illustrate the navigation scheme (linking), by which programmer will

be able to understand the purpose of buttons, hypertext and hot
spots.

5
The Storyboard Flow
• Navigation schemes can be set up in a variety of ways, that could
include:
1. Sequential way.
2. Topical way.
3. Exploratory way.

6
1. Sequential Navigation
• In case of sequential navigation, scheme takes users a step-by-step
through the material .
• For example, books that are repurposed as multimedia titles; slide show presentations,
and instructional tutorials that require the student to move through the material step-
by-step.
• Linear process.
• Sequential titles often have buttons (Next, Forward, Continue, Previous,
Back) or graphics as navigational aids.
• Interactivity limited to clicking on objects in order to keep users on track,
i.e., sound playing, animation, or even displaying a graphic or text.

7
1. Sequential Navigation

A sequential
navigation
scheme

8
2. Topical Navigation Scheme
• A topical navigation scheme is an array of choices allows users to
select from or search for specific information.

• It normally including several layers and it requires special interface

designing attention to avoid users complexity in terms of
understanding where they are and what they have to do.

9
2. Topical Navigation Scheme

A topical
navigation
scheme

10
3. Exploratory Navigation Scheme
• An exploratory navigation scheme provides simple design structure
and guidance.

• Relies on user interaction, usually the clicking of objects displayed on

the screen.

• Many games, directed at both children and adults use some form of
exploratory navigation.

11
An Example on Story Board for Application

12
How to do mobile applications.
1) Solve a real problem and avoid assume a user need.

2) Avoid being short-sighted, plan ahead or at least consider about it.

3) Don't downplay choice of platforms (fulfill the users need).

4) Avoid using waterfall methodology (clumsy & high-risk).

5) Don’t downplay user experience (Do a simple, clear navigation, and

Pick key functions that are critical).

13
How to do mobile applications.

14
How to do mobile applications.
6) Don’t favour branding over users
Avoid displaying many windows like about screen, splash screen, start-
up experience, or any other type of screen that led to prevent users from
using your application immediately.

7) Well guide users by showing messages like Loading, updating in

progress, error messages.

15
How to do mobile applications.

16
How to do mobile applications.
8) Avoid squeeze the world in your design.

9) Minimizing users input by avoid them keying in data give a typical

input limitations (selection lists, check box, radio button).

10) Test your Application with actual devices

17
10 Do’s and Don’ts of Mobile UX Design
1. Research before design
• Conduct a competitive analysis. Find apps that are similar to the one
you’re designing. Pay attention to which parts of the apps you like and
which parts you don’t like, and why.
• Identify your users. Build user personas to understand better how
users will interact with your app (which activities they perform and
what content they expect).
Persona: Define who the story is about (attitude, motivations, goals,
and pain points)

18
10 Do’s and Don’ts of Mobile UX Design
2. Prioritize features
• Focus on refining the experience around your core objectives
• Many product designers try to add as many features as possible.
• Nothing is more confusing for first-time users than an app that has
too much going on.

19
10 Do’s and Don’ts of Mobile UX Design

20
10 Do’s and Don’ts of Mobile UX Design
3. Cut out the clutter
• Strive for minimalism. Focus on the content that is valuable for your
users and remove unnecessary elements that do not support user
tasks.
• Prioritize one primary action per screen. Try to design each screen for
one thing and one thing only, with no more than one call-to-action.

21
10 Do’s and Don’ts of Mobile UX Design
4. Make navigation self-evident
• Make sure that navigation feels familiar to users. People are happy
when an app meets their expectations.
• Strive for consistency. Don’t move navigation controls to a new
location or hide them on different pages.
• Provide a clear path. Users should be guided to the content they’re
looking for, quickly.

22
10 Do’s and Don’ts of Mobile UX Design
• 5. Design finger-friendly tap-targets
• Provide ample touch targets for interactive elements. Create
controls that measure at least 7–10 mm so they can be accurately
tapped with a finger.

• Ensure that there is a right amount of spacing between tap targets.

23
10 Do’s and Don’ts of Mobile UX Design

24
10 Do’s and Don’ts of Mobile UX Design
6. Make text legible
• Choose a typeface that works well in multiple sizes and weights to
maintain readability and usability in every size.
• Use legible font size. Text should be at least 11 points so users can
read it at a typical viewing distance without zooming.

25
10 Do’s and Don’ts of Mobile UX Design
• Use legible font size.
• Text should be at least 11 points so users can read it at a typical
viewing distance without zooming.

26
10 Do’s and Don’ts of Mobile UX Design
Use sufficient color contrast for text.

27
10 Do’s and Don’ts of Mobile UX Design
7. Provide feedback on interactions
• Each human-computer interaction is based on two fundamental
elements — user input and computer reaction to it.
• Feedback acknowledges actions and helps users understand the
results of operations.
• Feedback helps people know what an app is doing now.

28
10 Do’s and Don’ts of Mobile UX Design

29
10 Do’s and Don’ts of Mobile UX Design
8. Minimize the need for typing
• Ask only what you really need to know. Keep forms as short and
simple as possible by removing any unnecessary fields.
• Make data entry as efficient as possible.

30
10 Do’s and Don’ts of Mobile UX Design

31
10 Do’s and Don’ts of Mobile UX Design
9. Create a seamless experience
• It’s wrong to consider mobile apps as stand-alone experiences.
• A typical user has several devices such as a desktop, mobile phone,
and tablet and expects to have a seamless experience across all those
devices when using your product.

32
10 Do’s and Don’ts of Mobile UX Design
10. Always test your design
• Ask real users to complete regular tasks in your app. Based on
results of testing you’ll be able to see how well the design really
performs.
• Constantly measure your app. Treat your app as a continuously
evolving entity, using data from analytics and user feedback to
improve the experience.

33
Don’ts
1. Don’t try to design the perfect experience from the first attempt
• Focus on prototyping and testing.

34
Don’ts
2. Don’t design in isolation
• Start by validating your hypothesis based on the user’s needs. Use
the Design Sprints technique to help you move from idea to learning
in just a few days, instead of it taking months or years.
• Watch this

35
Don’ts
• 3. Don’t ask for permissions right at the start
Ask only what your app clearly needs.

36
Don’ts
4. Don’t make users
wait for contents

37
Don’ts
• 5. Don’t use jargon in the user
interface

Every word in your app is part of a

conversation with your users. Make
this conversation comfortable for
them by speaking the same language
as your users.

38
Don’ts
6. Don’t use custom gestures as a primary way of interacting with an
app

• Use standard gestures for shortcuts. People are familiar with the
standard gestures, so no extra effort is needed to discover or
remember them.
• Avoid using standard gestures to perform non-standard actions.
Unless your app is a game, redefining the meaning of standard
gestures leads to confusion and complexity.

39
Don’ts
7. Don’t replicate the web experience
on apps
• Avoid using underlined links in
mobile apps
Users expect certain interaction
patterns and interface elements in
mobile apps.

40
Don’ts
8. Don’t create dead end pages

Nothing in your app should be a dead-

end. Error states and empty states should
provide instructions and actions to move
forward.

41
Don’ts
• 9. Don’t take users to a browser

42
Don’ts
• 10. Don’t ask a user to rate your app during their first experience

43
Example

44
4