Cross- platf orm mo b i l e a p p

d e ve l o p m e nt
Overview of mobile app
development
OUTLINE

• Prospects of mobile
app

• User experience

• Experience design

2
Prospects of mobile app

3
Prospects of mobile
applications
• Nowadays applications appear on mobile devices more and more
• Users no longer have much need for personal computers that translates
to experience with mobile or other handsets
• For the normal user, PCs only work when they work
• The most popular mobile operating systems today are iOS and Android.

4
Prospects of mobile applications
(2)

5
Prospects of mobile applications
(3)
Mobile usage
time over total
time spent with
electronic devices
of users in some
countries around
the world, 6/2019

6
Prospects of mobile applications (4)

• Users all over the world tend to spend more of their time
on mobile devices.
• In the United States, mobile time increased by 43% from June
2017 to June 2019.
• In Canada, the figure was 34 per cent during the same period
• This trend is also a common trend of most countries in
the world.

7
Prospects of mobile applications
(5)
HOWEVER, 25% OF APPLICATIONS ARE USED ONLY ONCE ON A USER'S MACHINE
AND NEVER REAPPEAR ON THEIR MACHINE.

8
Discussion

• What type of mobile app do you want to develop?

• What type of customer segment you want to focus?

9
Experience co nc e pt

• Definition: UX refers to a person's interaction with a product, application, or operating

system. So, designing user experience — or in other words, creating UX —
means defining how a product works and how to meet a user's need.
• How to create a good UX for users?
• Not exactly the interface design with beautiful colors, easy-to-see font size, full
buttons, text boxes, scroll bars ..

10
Experience C o n c e p t s (2)

The experience starts from the first time the user opens the application and logs into
the system (if there is a request to log in)
There are the following components that affect the experience of user:
• Data start-up, sending/receiving time
• User interface
• Design icons
• How to respond to user interactions
• How to interact with device hardware
All of the above factors affect the user experience
1
11
0
User Experience

Experience affects product choice.

12
User Experience

For a good experience, themes need to be designed by professional designers.

You can refer to two classic books on design

13
User Experience (3)

Which of the following designs is better (more convenient for users) and
why?

14
User Experience (4)
The design on the The right design
left causes the user allows users to never
to switch to enter the wrong
number typing letter into the credit
mode. card code
Unless you want to
violate the rules,
Credit Card codes
are all numbers. 15
User Experience (5)
Which of the following designs is better (more convenient for users) and
why?

16
User Experience (6)

The left design creates

The right design does
plenty of extra space
not create excess
when filling in three-
space and makes it
digit numbers
easy for users to read
Does not make it
easier
easier for users to
read.

17
User Experience (7)

18
User Experience (8)

• The design on the left • The design on the

requires users to log in right does not
to use the service force users to
• Can make users feel expose personal
unsafe even with social accounts
media accounts. • But still have
certain experiences

19
User Experience (9)

To create a good user experience,

is a harmonious synthesis of many
elements [Peter Morville, 1994]
None of them is overlooked, and
none is taken lightly over the other.

20
User Experience (10)

• Usable: The product or service to be delivered needs to be simple and easy to use. The
system should be designed in a way that is familiar and easy to understand. The time
to learn the rules of use that users have to go through is as short as possible and not
annoying.
• Useful: Your product or service needs to be useful and responsive to user
needs. Otherwise, then the product itself will have no real purpose (useless).
• Desirable: The visual aesthetics of a product, service, or system need to be
compelling and easy for users to interpret ideas. The design should be minimalist,
easy to understand and not ambiguous.

21
User Experience (11)

• Easy to find: Information needs to be found in a certain screen and easy to navigate
to that screen from anywhere.
• If users need to use a certain screen, they will be able to quickly find a solution
to leave the current screen which switches to the necessary screen.
• The navigation structure should also be set up in a logical way reason (e.g. after
editing the article, Facebook switches to that article screen, not the list screen
Friend books).

22
User Experience (12)

• Accessible:
• The product or service must be designed so that even users with disabilities can
have the same product experience as others. Not only users with disabilities, but the
concept can also extend to users whose devices have problems (such as a broken
Back button).
• Credible:
• The company and its products or services need to be trustworthy, not expose users'
personal information in any way.

23
User Experience (13)

Jakob Nielsen of the Nielsen Norman Group (NN/g) looked at the ease of use of mobile apps
over time conducted two surveys in 2009 and 2011
The results showed:
• 2009: Only 59% of mobile apps available on devices are considered easy to use. It is even
implied that ease of use is unattainable.
• 2011: This rate has risen to 62%, even 76% if you take into account applications where
respondents really have a vital need to use it.
• This 2011 rate is the same as the rate for desktop applications in 1999. Will this rate be
84% by 2026 (which is the rate in desktop applications today)

24
User Experience (14)

“The true way to great user experience doesn’t just come from great UI design. Total user
experience encompasses everything the user meets, and the way you run the business is a
big part of this.”

25
User Experience (15)

Admittedly, a that the pinnacle of

the current user experience still
comes from Apple products.
There is even philosophy
that builds the application app
on Android but still try to mimic
the
iOS experience

26
User Experience (16)

However, it is not easy to expect that users will actually feel more comfortable using a phone
than using a desktop.
All content can't simply appear on the phone as if they were together on the computer.
Many changes must be made
For example:
• Font, color, contrast, and resolution, anti-glare Much content needs to be rearranged or
hidden when displayed on mobile screens
• Apps must have adjustments when rotating vertically or horizontally across the screen.

27
User Experience (17)

• Even if we have a design that is rated as "good", there are still many factors that
affect the quality of the product when it reaches the user. For example:
• Mobile with slow Internet access speed will make users depressed.
• If the access time is from 1s to 10s, the probability of user abandonment increases
by 123% [Google] To judge a design as beautiful also depends a lot on the feeling of
the evaluator, regional culture, historical factors, weather ...
• Device experience is easily changed if battery or storage availability is reduced
Fragmentation of operating systems (Android) and OS versions (iOS)

28
Experience Design
• Law of Mobile HCI
• Rate the experience

29
Law of Mobile HCI

There are 10 laws for creating a good user experience on a mobile environment. It's
called Mobile HCI

1.Visibility of Status 6. Recognition rather than Recall

2.System = Real World 7. Flexibility
3.User control and Freedom 8. Minimalist Design
4.Consistency and Standards 9. Error Explanation
5. Error Prevention 10. Help!

3
1 30
1. Visibility of Status

The system should always inform the user about what is going on through appropriate
feedback within a reasonable time.
• If your app is downloading something, add the Loading icon to the status bar
• Make sure users know which screen they're viewing (via the page title)
• Do not break/hide other system status information unless necessary (i.e. time, wifi, etc.)

1 31
2. Match the system to the real world

• The system must follow real-world conventions, making information appear in a natural and
logical order.
• The words that appear in the app should be as natural as possible.
• For customers in different countries, it is necessary to consult an expert in that country's
language.
• When providing a list of users, what is the most logical way to organize the list? By them or by
ID or depending on the use case.
• Follow general conventions for coloring (red = stop/bad/error, etc.)

1 32
3. User Control and freedom

• Users often mistakenly choose system functions (especially on mobile devices) and will
need a well-described "Undo" way to get out of an unwanted state without having
to go through much complex manipulation.
• The system should support undo and redo.
• Example: In iOS Mail, you can shake your device to undo moving a message to the
trash.

1 33
4. Consistency and standards

• Users don't have to wonder whether the words, situations or different actions
mean the same thing or not.
• The system must follow naming conventions or notification conventions (e.g. in the
same situation where there is no Internet connection, different screens must have the
same message).
• Users when switching from using applications on iOS or Android do not feel
too surprised (although the experience philosophy of the two parties has many
differences)

1 34
5. Error prevention

• When user input is done on a small screen device, support as much as possible to avoid
entering incorrect data.
• Example:
• Add input tests:
• How many digits are in that phone number?
• How many digits are in that credit card number?
• Is it really 31 days in September?
• Use the appropriate widgets
• Spinner for date/time
• Slider for long lists

1 35
6. Recognition rather than recall

• A symbol must represent the action and must give the user an
immediate understanding of what that symbol represents.
• Icons must comply with platform standards, or they can propose their
own standards but must be consistent in the application
• For example, a tap/swipe/shake/rotate, etc. should be consistent across
screens.

1 36
7. Flexibility

• A certain operation, which is still needed, can be performed in separate ways for ordinary
or experienced users.
• The way for experienced users, needs to be easily recognizable or learned or imitated by
the average user.
• Consider it a reward for the average user
• Example: Facebook allows writing notes that are richer than writing posts

1 37
8. Aesthetic and minimalist design

• Aesthetic and minimalist design

• Each unit of information (buttons, labels, icons, text areas, etc.)

that

appears in the interface will compete with other information

units and reduce their prominence.

• Example:

• Make sure an ACTIVITY does ONE thing and does it well.

• Limit the number of buttons/information areas on the screen.

3
9 38
9. Error explanation

• Error messages must be expressed in plain language (AVOID CODE ABUSE), accurately
indicate the problem and suggest solutions in an understandable way.
• Example:
• "ERROR: X506923ABA has occurred. Upload to the skadoosh server failed."
• "It is currently not possible to connect to the service. Please check your Internet
connection and try again later."

9 39
10. Help

• Have reasonable help information available in the app if possible.

• Example: Shake the device for the Help pop-up window to provide assistance

9 40
Evaluate the experience

Illustration of
the music player
interface

4
3 41
Evaluate the experience

Illustration of
contact list
display interface

3 42
Evaluate the experience

Illustration of the
blank list display
interface

3 43