Nota SEM 20042

GETTING TO KNOW
UI / UX FOR MOBILE
APUPSSEDREINVTEELROFAPCME ENT

Design

&

USER EXPERIENCE

Design

- What's the Difference?

In Mobile Apps Development

Halijah Ismail
Kolej Komuniti Kuala Pilah

Notes Compilation
SEM 20042 – Pengenalan Rekabentuk UI/UX Peranti Mudah Alih

Getting to know UI / UX for Mobile AppsDevelopment
i

GETTING TO KNOW
USER INTERFACE & USER EXPERIENCE

What’s the Difference?
in Mobile Apps Development

Halijah Ismail

Penerbit Kolej Komuniti Kuala Pilah
Kuala Pilah -2022

Getting to know UI / UX for Mobile AppsDevelopment
ii

© Penerbit Kolej Komuniti Kuala Pilah 2022
1st Edition
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system or
transmitted in any form, or by any means, electronic, mechanical, photocopying, recording or otherwise,
without the prior permission of the copyright owner.

Perpustakaan Negara Malaysia

Halijah Ismail
GETTING TO KNOW
USER INTERFACE & USER EXPERIENCE
in Apps Development
ISBN :

Getting to know UI / UX for Mobile AppsDevelopment
iii

There are no sources in the current document.

Editor’s Note

The object if this compilation articles is place to ease the study of students of SEM 20042 –
Pengenalan UI/UX Peranti Mudah Alih Kolej Komuniti Sijil Teknologi Peranti Mudah Alih. This
compilation I hope, will stimulate interest of the student to explore further on the subject briefly dealt
with UI/UX Design.
I hope these compilations will contribute to a deeper understanding of what is UI/UX Design means
in apps development process. There a lot of opportunity for the student to explore, free software’s
are available online please grab the chance and learn whatever you feel comfortable with in order
to
present your brilliant idea.

Getting to know UI / UX for Mobile AppsDevelopment
iv

Contents

User Interface (UI) Design............................................................................................................................. 1
What Is UI Design? .................................................................................................................................... 1
A brief history of the user interface.......................................................................................................... 2
What Are the Most Important Elements of UI Design?............................................................................ 4
5 Characteristics of Successful User Interfaces......................................................................................... 5
Different Types of UI................................................................................................................................. 6
Graphic user interface (GUI) ..................................................................................................................... 6
Command line interface (CLI) ................................................................................................................... 7
What Are UI Design Patterns? .................................................................................................................. 8

User Experience (UX) Design......................................................................................................................... 9
What UX Designers do goes Beyond UI Design ...................................................................................... 13
UX Designers consider the Why, What and How of Product Use........................................................... 13
UX Design is User-Centered .................................................................................................................... 16
UX Design Process................................................................................................................................... 17

Understanding the Difference Between UI and UX Design ........................................................................ 19
UI and UX design: the basic definitions .................................................................................................. 20
Is UX just about functionality?................................................................................................................ 21
Is there more to UI than beauty?............................................................................................................ 23
Creating emotional connections with users ........................................................................................... 26
User experience beyond the four corners of your screen ...................................................................... 28

Separating UX/UI Design............................................................................................................................. 30
UX vs. UI Design ...................................................................................................................................... 35
UI Design – Its focus................................................................................................................................ 36
The main differences between UX and UI .............................................................................................. 37
Functionality vs Quality of Interaction.................................................................................................... 38
Aesthetics vs Research............................................................................................................................ 38
Management vs Technicality .................................................................................................................. 38
Separate focus ........................................................................................................................................ 38
The choice of colours .............................................................................................................................. 39
The choice of tools.................................................................................................................................. 40

What's the difference between UI and UX? ............................................................................................... 42
Managing Differences of UI/UX Design -How Do They Work Together? ................................................... 49

UX vs UI Design: What’s the Difference?................................................................................................ 49
1. Focus ................................................................................................................................................... 49

Getting to know UI / UX for Mobile AppsDevelopment
v

2. Level of Abstraction ............................................................................................................................ 49
3. Research.............................................................................................................................................. 50
4. Goals.................................................................................................................................................... 50
5. Skillset ................................................................................................................................................. 50
6. Product Layer ...................................................................................................................................... 51
7. Application .......................................................................................................................................... 51
8. Output of Design................................................................................................................................. 51
9. Design Tools ........................................................................................................................................ 51
UX Design vs UI Design: How Do They Work Together........................................................................... 52
Principles of Design..................................................................................................................................... 54
What are principles of design? ............................................................................................................... 55
What is the difference between the principles of design and the elements of design? ........................ 55
What are the primary 7 principles of design?......................................................................................... 57
1. Unity.................................................................................................................................................... 57
2. Emphasis ............................................................................................................................................. 57
3. Hierarchy............................................................................................................................................. 58
4. Scale .................................................................................................................................................... 59
5. Contrast............................................................................................................................................... 60
6. Repetition............................................................................................................................................ 61
7. Rhythm................................................................................................................................................ 63
What Are The 6 Elements of Design? ......................................................................................................... 64
1. Lines .................................................................................................................................................... 64
2. Shapes ................................................................................................................................................. 67
3. Colors .................................................................................................................................................. 67
4. Typography ......................................................................................................................................... 70
5. Texture ................................................................................................................................................ 72
6. Space ................................................................................................................................................... 73
What is wireframing?.................................................................................................................................. 75
Wireframing is essential in UI design...................................................................................................... 75
A wireframe is much easier to adapt than a concept design ................................................................. 76
Wireframing takes place early in the project lifecycle ........................................................................... 78
Advantages of Wireframing .................................................................................................................... 78
Disadvantages of Wireframing................................................................................................................ 78
Conclusion............................................................................................................................................... 79
Everything You Need to Know About UX Sketching ................................................................................... 79

Getting to know UI / UX for Mobile AppsDevelopment
vi

UX Sketching Is a Two-step Process........................................................................................................ 79
UX Sketches and Wireframes: Introduction and Classification .............................................................. 80
Getting Started with the Basics .............................................................................................................. 83
Clarifying Sketches with Additional Elements......................................................................................... 86
More Specific Tips and Tricks.................................................................................................................. 88
Additional Mini-methods to Improve Your Sketches.............................................................................. 89
Wireflow: Outlining System Flow and Branching ................................................................................... 92
Sketching UX Flow: A Quick How-to Guide............................................................................................. 96
Essential UX Flow Sketching Tips and Tricks ........................................................................................... 98
Wrap Up................................................................................................................................................ 100
Why Sketching Is an Essential Skill for UX Designers to Master ............................................................... 101
Why you should sketch......................................................................................................................... 101
1. Generate ideas.................................................................................................................................. 102
2. Visualize ideas ................................................................................................................................... 102
3. Communicate designs....................................................................................................................... 102
4. Better collaboration.......................................................................................................................... 103
5. Faster iterations ................................................................................................................................ 103
When you should sketch....................................................................................................................... 104
Two key things to remember about sketching ..................................................................................... 104

• Sketching is not drawing ........................................................................................................... 104
• Sketching is not prototyping ..................................................................................................... 105
How to sketch 101 ................................................................................................................................ 106
Before you start sketching .................................................................................................................... 106
Define your sketching goal.................................................................................................................... 109
What to do during sketching................................................................................................................. 109
• Warm up ................................................................................................................................... 109
• Avoid getting bogged down with a single idea ......................................................................... 109
• Keep sketches as simple as possible ......................................................................................... 109
• Set a timer for the activity ........................................................................................................ 110
• Add titles and numbers to your sketches ................................................................................. 110
• Use arrows to connect sketches ............................................................................................... 111
• Add annotations and notes....................................................................................................... 112
After you finish sketching ..................................................................................................................... 113
• Create a digital copy of your paper sketches............................................................................ 113
• Review and evaluate your sketches.......................................................................................... 114

Getting to know UI / UX for Mobile AppsDevelopment
vii

• Ask for feedback........................................................................................................................ 114
10 pro tips to improve your sketches ................................................................................................... 115
1. Overcome your artist’s block ............................................................................................................ 115
2. Practice makes perfect...................................................................................................................... 116
3. Don’t focus on the visual quality of your sketches ........................................................................... 116
4. Use colors and shadows for purpose................................................................................................ 116
5. Learn to draw long lines.................................................................................................................... 117
6. Sketch in layers ................................................................................................................................. 117
7. Rotate the page................................................................................................................................. 118
8. Use templates ................................................................................................................................... 118
9. Try digital sketching .......................................................................................................................... 119
10. Experiment...................................................................................................................................... 119
Conclusion............................................................................................................................................. 120
The 5 Best Places to Find Free Storyboard Templates.............................................................................. 121
What is a storyboard?........................................................................................................................... 121
The best free storyboard templates ..................................................................................................... 122
1. StudioBinder ..................................................................................................................................... 122
2. Boords ............................................................................................................................................... 124
3. Printable Paper ................................................................................................................................. 125
4. Begindot............................................................................................................................................ 126
5. StoryboardThat ................................................................................................................................. 127
The 7 Best Storyboarding Software Tools for 2022 .................................................................................. 129
What is a storyboard?........................................................................................................................... 129
How to build a storyboard .................................................................................................................... 130
The 7 best storyboarding software tools.............................................................................................. 131
1. FrameForge ....................................................................................................................................... 131
2. Storyboarder ..................................................................................................................................... 132
3. Boords ............................................................................................................................................... 132
4. Plot ................................................................................................................................................... 133
5. MakeStoryboard ............................................................................................................................... 133
6. StudioBinder ..................................................................................................................................... 134
7. Visme................................................................................................................................................. 135
What Is Prototyping? ................................................................................................................................ 136
Reasons for prototyping ....................................................................................................................... 137
What are different types of prototyping? ............................................................................................ 138

Getting to know UI / UX for Mobile AppsDevelopment
viii

Low-fidelity prototypes......................................................................................................................... 139
Medium-fidelity prototypes.................................................................................................................. 140
High-fidelity prototypes ........................................................................................................................ 141
What is the website prototyping process? ........................................................................................... 143
9 UI Animation Tools Every Beginner Should Have on Their Radar.......................................................... 145
1. Adobe After Effects ........................................................................................................................... 146
2. Motion UI .......................................................................................................................................... 147
3. Flinto ................................................................................................................................................. 148
4. Framer............................................................................................................................................... 149
5. Origami studio................................................................................................................................... 150
6. Mockplus Cloud................................................................................................................................. 151
7. Lottie ................................................................................................................................................. 152
8. InVision Studio .................................................................................................................................. 153
9. Animate.css....................................................................................................................................... 154
APPENDIX.................................................................................................................................................. 155

Getting to know UI / UX for Mobile AppsDevelopment
ix

Table of Figures

Figure 1: Non-GUI Monitor 2

Figure 2: Early User Interface 3

Figure 3: Successful UI 5

Figure 4: Usability HoneyComb 10

Figure 5: Customer Experience Execution Model 12

Figure 6: The Why, What and How of UX Design 14

Figure 7: Essential elements of great UX Design 15

Figure 8: User Centered UX Design 17

Figure 9: UX Design Process 18

Figure 10: Understanding the Differences 19

Figure 11: Sketching out user flows at the beginning of the process 22

Figure 12: An interactive prototype created for the Wix Editor 22

Figure 13: Planning how each element will look at each and every stage 24

Figure 14: Planning the position of each panel 25

Figure 15: See how The Entropy Project’s design portfolio, built on Wix, does just that, with powerful visuals that

draw you in and create a mysterious and intriguing feeling 27

Figure 16: UX vs UI 30

Figure 17: The Difference UI/UX 31

Figure 18: UX Designer Vs UI Designer 34

Figure 19: UX vs UI 35

Figure 20: Focus Differences UI UX 36

Figure 21: Distinguishing UI UX 37

Figure 22: UI UX Colors 39

Figure 23: Prototyping Tools 40

Figure 24:Working Together UI UX 52

Figure 25: Reference sheet depicting the elements of design, including line, color, texture, size, shape, value, and

space. 56

Figure 26: Apple’s homepage emphasizes and features their latest and greatest product, the iPhone 12 Pro. 58

Figure 27: Three internet browser windows in different sizes to show that they can be resized. 59

Figure 28: Contrasting text immediately attracts users’ attention. 61

Figure 29: 15 different slides featuring visually similar designs to showcase repetition of design elements. 62

Figure 30: The repetitive use of blue on this Airbus landing page creates a sense of continuity and invites users to

scroll for more information. 63

Figure 31: In design, lines can have a variety of densities and curves. 65

Figure 32: Photo of a mockup of the Virgin Hyperloop track. 66

Figure 33: Designers can create lines in one of two ways: an “actual line” and an “implied line.” 66

Figure 34: Designers have many geographic shapes to choose from, including circles, squares, rectangles, ovals,

hearts, triangles, parallelograms, hexagrams, trapeziums, pentagons, stars, and diamonds. 67

Figure 35: Using a color wheel, you can see the differences between hue, saturation, and value. 68

Figure 36: The color blue symbolizes trust and security, so it’s no wonder so many banks use it within their

branding. Here, you can see examples from four major banks: Chase, Citi Citibank, Barclays, and Bank of

America. 69

Figure 37: This image shows how colors can evoke certain moods, such as yellow making people feel optimistic,

and blue evoking a sense of trust. 69

Figure 38: Some of the more notable examples of serif fonts include Georgia, Garamond, Times New Roman, and

Baskerville. 70

Figure 39: Brands that looked clean and refined now look childish and playful. 71

Figure 40: Textiles have the power to evoke feelings; in this example, a cotton textile background elicits feelings of

softness and comfort. 72

Getting to know UI / UX for Mobile AppsDevelopment
x

Figure 41: Compare the cotton textile backgrounds above to this stone textile background, which creates a more

serious, sterile feeling. 73

Figure 42: Negative space, as shown in these images, allows you to maximize the area and enhance readability. 74

Figure 43: WireFraming 75

Figure 44: WireFraming the idea 77

Figure 45: Idea Generation 80

Figure 46: Sketch for Idea 81

Figure 47: Breakingdown the elements 83

Figure 48: Review Sketches and add Notes 85

Figure 49: Use different ink for sketching 87

Figure 50: SketchBoard 89

Figure 51: Outline the Flow 92

Figure 52: Wireflow Type 94

Figure 53: Define the Flow 97

Figure 54: The Sketching vs Drawing 104

Figure 55:Sketches should be easy to produce and easy to trash 105

Figure 56: Paper prototype 106

Figure 57: Crazy Eights Technique 110

Figure 58: The title will help you understand what a sketch represents. 111

Figure 59: Use arrows to define interactions. 112

Figure 60 : A red color is used for annotations and notes. 113

Figure 61: Scanning a sketch 114

Figure 62 Sketches are for sharing. Pin your sketches to walls to share your ideas with others. 115

Figure 63 : A shadow makes it clear that an element labeled “Enter” on your sketch is a button. 117

Figure 64: Using Template to Sketch 118

Figure 65 : Sketches created using an iPad Pro look like they were done by hand with a pencil. 119

Figure 66: StudioBinder 122

Figure 67: Boords 124

Figure 68: Printable Paper 125

Figure 69: Begindot 126

Figure 70: StoryboardThat 127

Figure 71: A mobile wireframe in low, medium, and high fidelity. 138

Figure 72: Two people working on a paper prototype together. 139

Figure 73: Medium-fidelity wireframe showcasing the digital interfaces in greyscale. 141

Figure 74: High-fidelity wireframe showcasing a final design with colors, branding, and other visual elements. 142

Figure 75: steps of an effective website prototyping process 144

Figure 76: Adobe After Effects 146

Figure 77: Motion UI 147

Figure 78: Flinto 148

Figure 79: Framer 149

Figure 80: Origami studio 150

Figure 81: Mockplus Cloud 151

Figure 82: Lottie 152

Figure 83: InVision Studio 153

Figure 84: Animate.css 154

UNDERSTANDING THE UI/UX
DESIGN CONCEPT

By Halijah Ismail

Getting to know UI / UX for Mobile AppsDevelopment
1

User Interface (UI) Design

“ ”The user interface (UI) is the space where
interactions between humans and machines
occur.

UI is an integral aspect of user experience (UX) that consists of two major parts: visual design,
which conveys the look and feel of a product; and interaction design, which is the functional and
logical organization of elements. The goal of user interface design is to create a user interface
that makes it easy, efficient, and enjoyable for users to interact with a product. Learn about the
different types of UI as well as fundamental design requirements for each type.

What Is UI Design?

UI design prioritizes the user’s visual experience. A good user interface is functional, reliable, and
enjoyable to use. User interface design should minimize the effort that the user has to invest
interacting with a product and help users accomplish their goals with ease.

Designers use methods of user-centered design (user interviews, direct observations, etc.) to
learn about their target audience and ensure that the visual language they introduce in the UI is
well-tailored to them. It’s important to make the UI aesthetically pleasing because interfaces that
have great aesthetics are perceived as more usable by end-users, according to the aesthetic
usability effect.

Getting to know UI / UX for Mobile AppsDevelopment
2

A brief history of the user interface

Back in the 1970’s, if you wanted to use a computer, you had to use the command line interface.
The graphical interfaces used today didn’t yet exist commercially. For a computer to work, users
needed to communicate via programming language, requiring seemingly infinite lines of code to
complete a simple task.
By the 1980’s the first graphical user interface 1(GUI) was developed by computer scientists at
Xerox PARC. With this ground-breaking innovation, users could now interact with their personal
computers by visually submitting commands through icons, buttons, menus, and checkboxes.

Figure 1: Non-GUI Monitor

1 a system of interactive visual components for computer software. A GUI displays objects that convey information,
and represent actions that can be taken by the user. The objects change color, size, or visibility when the user
interacts with them.

Getting to know UI / UX for Mobile AppsDevelopment
3

Figure 2: Early User Interface
This shift in technology meant that anyone could use a computer, no coding required, and the
personal computer revolution began.
By 1984 Apple Computer released the Macintosh personal computer which included a point and
click mouse. The Macintosh was the first commercially successful home computer to use this type
of interface.
The accessibility and prevalence of personal and office computers meant that interfaces needed
to be designed with users in mind. If users couldn’t interact with their computers, they wouldn’t
sell. As a result, the UI designer was born.
As with any growing technology, the UI designer’s role has evolved as systems, preferences,
expectations, and accessibility has demanded more and more from devices. Now UI designers

Getting to know UI / UX for Mobile AppsDevelopment
4

work not just on computer interfaces, but mobile phones, augmented and virtual reality, and
even “invisible” or screenless interfaces (also referred to as zero UI) like voice, gesture, and light.

Today’s UI designer has nearly limitless opportunities to work on websites, mobile apps,
wearable technology, and smart home devices, just to name a few. As long as computers
continue to be a part of daily life, there will be the need to make the interfaces that enable users
of all ages, backgrounds, and technical experience can effectively use.

What Are the Most Important Elements of UI Design?

Good UI design is critical to a product’s success. Without it, users may find a product to be
unusable. Most designers follow a set of user interface design principles to guide their designs
and ensure their products are successful.

The most important elements of UI design are:

• Place users in control of the interface
• Make it comfortable to interact with a product
• Reduce cognitive load
• Make user interfaces consistent

Getting to know UI / UX for Mobile AppsDevelopment
5

5 Characteristics of Successful User Interfaces

Figure 3: Successful UI
Keeping the latest UI trends in mind, the following characteristics should be kept in mind when
designing the UI:

➢ Clarity
Clearly communicate both the meaning and the function of the website or app, what it
does, and how to navigate. Clarity applies to language, flow, hierarchy, and visual
elements.

➢ Familiarity
Familiarity is something that is naturally understood, allowing users to intuitively know
how to navigate. Using common icons (such as ‘home’ or ‘search’), common navigation
elements, and common placements of elements (such as menu bars) breed familiarity.

Getting to know UI / UX for Mobile AppsDevelopment
6

➢ Consistency
Unlike familiarity, which looks externally to inform decisions, consistency looks for
uniformity across elements of the design, ensuring elements look or behave the same in
each context. Consistency is important across terminology, menus, commands, and page
layouts.

➢ Forgiveness
A good interface incorporates the ‘what if’ scenarios, supporting users to undo mistakes
(such as trashing an item), go ‘back’ to previous pages, providing detailed reporting to
errors (such as account creation issues), or providing useful alternatives if search results
are zero or they encounter a non-existent page.

➢ Efficiency
A good interface is streamlined, allowing the user to do what they came to do with the
least amount of work. Efficiency is created through good design as well as shortcuts.

Sources Link: https://www.netsolutions.com/insights/ux-vs-ui-design/

Different Types of UI

There are many types of user interfaces across devices, but in developing products for today’s
user, we typically refer to the following three UIs:

Graphic user interface (GUI)

The GUI is the most common and familiar type of interface, one which allows users to interact
with icons or other graphical elements on all kinds of devices. Where haptics is involved in a
touchpad or touchscreen display, the UI is referred to as a touchscreen GUI.

In GUIs, users interact with information by manipulating visual objects on a digital screen using a
device or touch. The elements of a well-designed graphical user interface should be designed to

Getting to know UI / UX for Mobile AppsDevelopment
7

support good learnability and findability. When users see familiar visual elements and interaction
patterns, they can understand how to interact with the UI just by looking at it. It’s also important
to make sure that elements in a GUI are uniform–UI should be consistent to create a sense of
control and reliability.

Voice user interface (VUI)

A voice user interface provides output by voice prompts (text to speech) and accepts both voice
(speech recognition) and typed input. Many devices now support voice commands for
accessibility, convenience, and personalization. VUI can be built as an alternate option within a
GUI (e.g. search fields that accept speech-to-text) or as a separate voice app or product.

Voice user interfaces (VUI) are quickly gaining traction. The rising number of voice-enabled
assistants being sold across the world prove that users find such devices valuable. Voice user
interfaces require a different design approach. Designers need to create an efficient,
conversational UI in which words and syntax play a crucial role. To create more human
interactions, designers need to invest in learning human psychology and put even more focus on
validating their design decisions using voice-based prototypes.

Command line interface (CLI)

This text-based interface allows users to type into the command line, a simple interface with low
memory requirements. This interface requires users to have knowledge of command language,
making it less common for B2C products.

Getting to know UI / UX for Mobile AppsDevelopment
8

What Are UI Design Patterns?

UI design patterns are a fundamental part of UI design. These best practices are general solutions
to common problems in UI. Design patterns help organizations by designing reusable, reliable
solutions to a user interface problem.

Create a user interface that is right for your product and company by browsing our selection of
regularly updated articles that contain tips, tricks, and best practices to help you level up your
skills.
Sources Link: https://xd.adobe.com/ideas/process/ui-design/

Getting to know UI / UX for Mobile AppsDevelopment
9

User Experience (UX) Design

“User experience (UX) design is the process
design teams use to create products that provide
meaningful and relevant experiences to users.
This involves the design of the entire process of
acquiring and integrating the product, including
aspects of branding, design, usability and
”function.
User experience, or UX, evolved as a result
of the improvements to UI. Once there was
something for users to interact with, their
experience, whether positive, negative, or neutral,
changed how users felt about those interactions.

Getting to know UI / UX for Mobile AppsDevelopment
10

Cognitive scientist Don Norman is credited with coining the term, “user experience” back in the
early 1990’s when he worked at Apple and defines it as follows,

‘User experience’ encompasses all aspects of the end-user’s interaction
with the company, its services, and its products.

That’s a broad definition that could encompass every possible interaction a person could have
with a product or service—not just a digital experience. Some UX professionals have opted for
calling the field customer experience, and others have gone a step further to simply refer to the
field as experience design.
No matter what it’s called, Norman’s original definition of UX is at the core of every thought
experience design—it’s all-encompassing and always centered around the human being it's
interacting with.
To understand what makes an experience a good one, Peter Moreville developed a great visual
to highlight what goes into effective UX design.

Figure 4: Usability HoneyComb

Getting to know UI / UX for Mobile AppsDevelopment
11

This ‘usability honeycomb’ has become the foundation for best practices for UX professionals to
help guide their efforts across multiple touchpoints with the user, including:

• How they would discover your company’s product
• The sequence of actions they take as they interact with the interface
• The thoughts and feelings that arise as they try to accomplish their task
• The impressions they take away from the interaction as a whole

UX designers are responsible for ensuring that the company delivers a product or service that
meets the needs of the customer and allows them to seamlessly achieve their desired outcome.
UX designers work closely with UI designers, UX researchers, marketers, and product teams to
understand their users through research and experimentation. They use the insights gained to
continually iterate and improve experiences, based on both quantitative and qualitative user
research.

Getting to know UI / UX for Mobile AppsDevelopment
12

User Experience, or UX, encompasses all the customer interactions with the company and its
product, app, or website. The focus on interactions and experience dictates that UX is as much
about function as it is about design. UX is very open-ended, asking at every stage what a user
may want, need, and feel.
The goal of UX is to better understand user needs and preferences and to refine the product to
help close the gaps in customer experience:

Figure 5: Customer Experience Execution Model

Getting to know UI / UX for Mobile AppsDevelopment
13

What UX Designers do goes Beyond UI Design

User Experience Design is often used interchangeably with terms such as “User Interface Design”
and “Usability”. However, while usability and user interface (UI) design are important aspects of
UX design, they are subsets of it – UX design covers a vast array of other areas, too. A UX designer
is concerned with the entire process of acquiring and integrating a product, including aspects of
branding, design, usability and function. It is a story that begins before the device is even in the
user’s hands.

Products that provide great user experience (e.g., the iPhone) are thus designed with not only
the product’s consumption or use in mind but also the entire process of acquiring, owning and
even troubleshooting it. Similarly, UX designers don’t just focus on creating products that are
usable; we concentrate on other aspects of the user experience, such as pleasure, efficiency and
fun, too. Consequently, there is no single definition of a good user experience. Instead, a good
user experience is one that meets a particular user’s needs in the specific context where he or
she uses the product.

UX Designers consider the Why, What and How of Product
Use

As a UX designer, you should consider the Why, What and How of product use. The Why involves
the users’ motivations for adopting a product, whether they relate to a task they wish to perform
with it or to values and views which users associate with the ownership and use of the product.
The What addresses the things people can do with a product—its functionality. Finally, the How
relates to the design of functionality in an accessible and aesthetically pleasant way. UX designers
start with the Why before determining the What and then, finally, the How in order to create
products that users can form meaningful experiences with. In software designs, you will need to
ensure the product’s “substance” comes through an existing device and offers a seamless, fluid
experience.

Getting to know UI / UX for Mobile AppsDevelopment
14

Figure 6: The Why, What and How of UX Design
User experience design is about understanding how customers feel when they interact with a
website, app, or product. To design for customer perception requires an understanding of the
intersection between design, context, user research, and testing.

There are many models that attempt to define UX design, including the user experience
honeycomb, which defines a good UX design as one that is useful, desirable, accessible, credible,
findable, usable, and valuable:

• Is it useful? Does the app or website fulfill a customer’s want or need? Does it do so better
than the competitors?

• Is it desirable? Is the experience aesthetically pleasing and to the point? This point
focuses on branding over function.

• Is it findable? Is the site or service easy to find and use?
• Is it usable? How quickly and efficiently can someone do what they came to do? UX design

will consider the number of clicks, server speed, and even the familiarity of the design.
• Is it accessible? Do all users experience the product / service in the same way?
• Is it credible? How do you demonstrate trust? Detailed, transparent information and

social proof lend to positive UX.

Getting to know UI / UX for Mobile AppsDevelopment
15

• Is it valuable? Customers prioritize different aspects of their experience over others,
which is why value is at the center of the honeycomb, representing the ideal mix of all the
other 6 variables.

There are 5 essential elements of great UX design, including a well-organized information
architecture, interaction oriented design, usability aligned design, visually appealing design (UI),
and planned user research that includes the latest UX trends (after all, consumer expectations
are always changing).

Figure 7: Essential elements of great UX Design
If UX design sounds complicated, it is because it is. The UX design process requires specialized
skills in:

• Business/user analysis
• Information architecture
• Wireframing
• Prototyping
• Design
• Soft skills: empathy, communication, collaboration

Getting to know UI / UX for Mobile AppsDevelopment
16

• Industry-specific knowledge
Without understanding of the importance of UX, many critical elements of design are overlooked
or handed off to a junior graphic designer or intern. Even when prioritized, IT skill shortages in
the US can make it nearly impossible to find qualified UX designers. For these reasons, user
experience design is hard to get right.

Source Link: https://www.netsolutions.com/insights/5-vital-elements-of-a-good-user-
experience-design/

UX Design is User-Centered

Since UX design encompasses the entire user journey, it’s a multidisciplinary field – UX designers
come from a variety of backgrounds such as visual design, programming, psychology and
interaction design.

To design for human users also means you have to work with a heightened scope
regarding accessibility and accommodating many potential users’ physical limitations, such as
reading small text.

A UX designer’s typical tasks vary, but often include user research, creating personas, designing
wireframes and interactive prototypes as well as testing designs. These tasks can vary greatly
from one organization to the next, but they always demand designers to be the users’ advocate
and keep the users’ needs at the center of all design and development efforts.

That’s also why most UX designers work in some form of user-centered work process, and keep
channeling their best-informed efforts until they address all of the relevant issues and user needs
optimally.

Getting to know UI / UX for Mobile AppsDevelopment
17

Figure 8: User Centered UX Design
Sources Link: https://www.interaction-design.org/literature/topics/ux-design

UX Design Process

UX designers work with business analysts and QA professionals to first understand the user
persona and problem, then work toward a solution that helps move users along a path toward
the solution with as little friction as possible. To achieve this, the UX design process involves
prototypes and testable wireframes to refine the process.

Getting to know UI / UX for Mobile AppsDevelopment
18

Figure 9: UX Design Process

Getting to know UI / UX for Mobile AppsDevelopment
19

Understanding the Difference
Between UI and UX Design

Whether or not UI and UX design are a mystery to you, it's
safe to say that each workplace has a slightly different

approach. Here's a look into the essence of both disciplines.

Figure 10: Understanding the Differences
Yin and yang are similar to UI and UX in more ways than one. Not only are the pair inseparable,
unable to exist without one another, but there are also very few people who can tell the
difference between the two. Okay, this might be an overstatement for UI and UX design, but who
here actually knows which is yin and which is yang? Without further ado, let’s take an in-depth
look into the profession. We’ll clarify what the difference between UI and UX design actually is
and go over some of the key stages involved in each one:

Getting to know UI / UX for Mobile AppsDevelopment
20

UI and UX design: the basic definitions

It’s true that a UI or UX designers’ main aim is to enhance users’ satisfaction, by creating products
and interfaces that are intuitive, simple and efficient. And many people have a part to play in this,
including developers, content writers and more. But what exactly is each designer’s role within
this overall aim? In general terms, UI is about the visual design of the product interface.
Depending on the nature of the product, this normally includes the layout, icons, buttons,
information architecture, colours, typography, animations and illustrations. And as the name
suggests, UX is about the user, or rather, human experience. It’s about analysing people’s intents
when they use the product – what they should feel, what they need to understand and what
action they should eventually take. In most cases, this part is done first, followed by the visual
design.

To summarize with an effective metaphor, you can think of it as a house: UX is about providing
the skeletal structure, deciding where each room should be placed, planning the electricity
system and other structure-related aspects. The UI is more about the details, such as the
doorknobs, curtains, colours and more. In the end, all these elements come together to make up
a whole experience and atmosphere.

These might sound like two very separate areas of expertise, and it’s true – they are different and
each one requires a wide array of skill sets. However, just like coffee and cake, they complete
one another. Imagine, for example, an instruction manual for a complex coffee machine. It could
be the most beautifully designed thing in the world, with the most stunning colour palette and
on-trend fonts, but if it the user doesn’t manage to understand what they’re supposed to do,
they may as well throw it away (or hang it up on their wall). That’s exactly where UX comes in.
As the two professions are so intertwined, at Wix, designers specialize in both UI and UX – a
requirement that is brought up right from the initial design interview. This allows them to
package an optimal product experience, that includes spot-on functionality, content and visuals.

Getting to know UI / UX for Mobile AppsDevelopment
21

Is UX just about functionality?

A large part of UX is about making a product functional, but the road to perfect functionality is
long and winding. When it comes to the house example (hint: look up!), certain things might be
obvious to us, as we have personal experience of them. We know that it makes no sense for the
electricity sockets to be too high up to be reached and that a kitchen sink that’s far away from
the dishwasher is a nuisance, not to mention having to get out of bed to switch the light off. But
when it comes to developing other products of whom we’re not users, further work and
investigation is required. As well as the structure and functionality, many products also involve
visual and textual experiences, which is why UX designers and writers work together closely,
especially at the beginning of a project. Without the right text, it’s difficult to test the product, so
taking care of the text from the start is important. On top of working with UX writers or
microscopy writers, designers from this field also collaborate with a number of other team
members, such as product managers, engineers and more. Together, they conduct the following
research and processes, while constantly keeping in mind the desire to create a product made
up of an optimal mixture of business goals and user needs:

– Product analysis: gather BI (Business Intelligence) to understand more about your users’
behaviour, know support issues users have faced in the past or are likely to face, do competitive
analysis, pinpoint the pain points and determine the goal of your product. As soon as you have a
goal, you can create a plan and stay focused on your purpose throughout the process.

– Create low fidelity wireframes2 and interactive prototypes that include user flows, focusing on
allowing users to fulfil their desired goals. To do this in the best way, know which personas will
be using your product, what their aims are, and what their entry points are. Creating various
iterations will help you understand the different scenarios of the product and which screens and
panels are required. This preferably comes before the visual part of the design and even more
importantly, before the technical developments are too advanced.

2 A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a
critical part of the interaction design process

Getting to know UI / UX for Mobile AppsDevelopment
22

Figure 11: Sketching out user flows at the beginning of the process
Figure 12: An interactive prototype created for the Wix Editor

Getting to know UI / UX for Mobile AppsDevelopment
23

– Conduct usability tests throughout the project (as well as once the product is live) so that you
can make the right decisions. It will also enable you to save design and development time.

– Once the product is live, further tests and analysis are done, so that the product can be refined.
Also conduct A/B tests to get insights into how your users interact with the prototype (or live
product) you created. You can discover what they liked, what they found challenging and
ultimately – how you can improve the product.

Is there more to UI than beauty?

When there’s a final structure and prototype that has been tested and approved, the UI design
begins. Of course, the name of the game is to create a beautiful product, but that’s not all. In
fact, the appearance of any product has a much deeper, psychological impact on the user.

Imagine, for example, how a room with cream-colored linen curtains blowing in the breeze would
make you feel, in comparison with dark heavy velvet ones. And pressing a smooth touch-screen
light switch will feel completely different than a standard switch. These are just a few of the
decision’s UI designers consider. Depending on whether they’re working according to a design
system, or for a newer brand whose visual language may not be as clearly defined yet, here are
some more details that their work entails:

– Gathering inspiration and exploring various concepts.

– Designing various details, such as buttons, text fields, drop down lists, menu bars, search fields,
icons, accordions, pop-up boxes and more, keeping aligned with the brand’s language and the
product’s style guide. This means that all visual elements will be consistent and will come
together to form the desired look and feel.

Getting to know UI / UX for Mobile AppsDevelopment
24

Figure 13: Planning how each element will look at each and every stage

Getting to know UI / UX for Mobile AppsDevelopment
25

– Choosing a color palette that’s in line with the branding.
– For digital products, UI designers add extra elements (or “delighters), such as animation, video,
illustrations and micro-interactions, to complete the overall experience and achieve the desired
vibe.
– Making sure any online assets are responsive, working well on desktops and mobiles of
different screen sizes.

Figure 14: Planning the position of each panel

Getting to know UI / UX for Mobile AppsDevelopment
26

Creating emotional connections with users

As already mentioned briefly, the visual aspects of an interface can evoke different emotions, as
can text, that has a crucial part to play in the user’s overall experience. Let’s examine this topic
further, from a UX perspective too. The aim here is to spark a connection with the user, creating
something that they can really understand. By basing a website or app’s structure on a mental
model (or in other words, something that we’re familiar with from our everyday lives and
experiences), the user is more likely to feel a cultural or emotional connection. What does this
mean in concrete terms? You can try replicating a familiar situation, like strolling around a city
aimlessly, into your online design portfolio, for example. Just like you might discover surprising
spectacles when walking around city streets, you can make the online browsing experience fluid,
with fun little surprises along the way, such comical animations, interactions and more.

When it comes to visual design, there are infinite ways to conjure up emotional connections with
users. UI designers aim to develop a whole language that will be consistent throughout every
detail of the brand’s products. Anything from color choice, to illustrations, videos and sound can
be used to evoke sensations and communicate a specific vibe. A website featuring cute hand-
drawn illustrations and pastel colors will make the user feel one thing, whereas a website with a
dark fullscreen video on the homepage will create quite the opposite sensation. See how The
Entropy Project’s design portfolio, built on Wix, does just that, with powerful visuals that draw
you in and create a mysterious and intriguing feeling.

Getting to know UI / UX for Mobile AppsDevelopment
27

Figure 15: See how The Entropy Project’s design portfolio, built on Wix, does just that, with powerful
visuals that draw you in and create a mysterious and intriguing feeling

Getting to know UI / UX for Mobile AppsDevelopment
28

User experience beyond the four corners of your screen

What’s the first thing that comes to mind when you think of UX? If your answer was anything
involving websites and mobile apps, you’re right. But these days, the scopes of both UI and UX
are broadening. Companies have a growing awareness of the importance of understanding their
users and how these methods can improve their user experience3 – ultimately, impacting
retention.

UX is now employed across a variety of products, interfaces and services – and not only those
with a web presence. It’s not just about the interface, but rather about the product’s experience
as a whole.

Referring to the Wix eCommerce product for example, UX designer Israel Martin Alberto explains
that “the experience involves every detail, from start to finish. It’s not just about the online part.
It’s about the moment the user clicks onto your site, all the way to the moment they receive their
purchase at their doorstep and open the package.” The idea is to accompany the user throughout
their whole journey and through different obstacles. “That’s how you can build a strong
relationship with the user,” explains Israel.

You can take a look at the case studies on these UX design portfolios and these websites for UX
inspiration and research to gain a better understanding of the full process a designer goes
through.

UI is no different in that it’s also used for a variety of interfaces, whether they’re online or not.
Any product that involves a point of contact between the object and the user, such as coffee
machines, keypads and car dashboards, should be designed with UI in mind.

3 The user experience (UX or UE) is how a user interacts with and experiences a product, system or service. It
includes a person's perceptions of utility, ease of use, and efficiency.

Getting to know UI / UX for Mobile AppsDevelopment
29

Text Dana Meir
Illustration Ella Cohen

Sources Link: https://www.wix.com/blog/creative/2018/08/understanding-difference-ui-ux-
design?utm_source=google&utm_medium=cpc&utm_campaign=16242175905^134377093918
&experiment_id=^^582523585389^^_DSA&gclid=CjwKCAjw8sCRBhA6EiwA6_IF4RFUal0Kn4ydu
zV-R0UQ4nBxxOOeHpLPVCoWNcxkCgRZ1yHuFCxPbBoC8cwQAvD_BwE

Getting to know UI / UX for Mobile AppsDevelopment
30

Separating UX/UI Design

Source Link: https://imaginxp.com/a-pilot-to-the-difference-between-ui-and-ux/

Figure 16: UX vs UI
User Interface Design is about the look, feel and presentation of a product or website. In simple
terms, it focuses on visual appeal.
User experience design however, is about how effective and pleasurable a product or website is
to use. In the case of a retail website for example, this would mean making it easy for customers
to find and pay for items online.
UX design refers to user experience design, while UI design stands for user interface design. Both
of these are crucial to any digital product and need to work harmoniously together. Despite being

Getting to know UI / UX for Mobile AppsDevelopment
31

reliable on each other, the roles themselves are quite different, involving distinct processes. Let
us try and understand the difference between UI and UX.

Figure 17: The Difference UI/UX

Getting to know UI / UX for Mobile AppsDevelopment
32

Many organizations have woken up to the fact that they need a UI/UX Designers to succeed in
attracting, interacting and retaining customers.

UX design is still in its nascent stage, and part of the confusion lies within the name – UX design.
Numerous people associate the word design with creativity, colours and graphics. But its true
meaning lies in the functionality as to how seamless the experience is for the users. It is one of
the cores UI/UX difference.

Knowing who the user is and how to make their experience with your product flawless is the duty
of the design team. As such, usability, functionality and user-adaptability ranks high on their
priorities for the product. UX designers focus on the development of the product.

However, we can apply the theory and process to just about anything:
➢ Context and Planning –
• Competitor and Customer Analysis
• Content Development
• Product Strategy
➢ Prototyping and Wireframing –
• Wireframing
• Prototyping
• Testing
• Further Development Scheme
➢ Analytics and Execution –
• Coordination with teams of UX UI Design(s)
• Coordination with coders.
• Tracking goals and assimilation.
• Analysis and emphasis.

Getting to know UI / UX for Mobile AppsDevelopment
33

The role of UX is tangled, as it is challenging and multifaceted. You would also notice mentions
of analysis or testing. It is another difference between UI and UX. In reality, I would put it in
between every other step on the checklist. Ultimately the aim was to connect to user’s needs
through a process of continuous refinement towards that which satisfies the user.

How would you like it if you are to crack a joke and later explain its premise? Pretty bad, I am
guessing? A user interface is something similar. If you have to explain it, I assume it is not that
good.

Let me simplify it further. Think of your product like an aeroplane. Now, assume that the UX is
the cockpit, and the complicated controls are the UI. Without its controls, the cockpit is useless,
and so is the plane. It is another difference between UI and UX. Hence, creating a great UI is
always a challenge, mostly because it has to be inherent.

If you conduct a random survey asking people whether they would choose an Android or an iOS
device, many would respond by choosing the latter, even though Android is more customizable
compared to iOS. Why is that so? If you ask them, many choose to respond, saying, “I find the
Apple phone much more intuitive.” What people mean is that Apple products have a more
consistent look and feel. Apple’s UI is embedded in the UX so well, and it just makes the overall
design look seamless, in turn, making the product feel intuitive.

Getting to know UI / UX for Mobile AppsDevelopment
34

The job of a UI Designer includes –
➢ Look and Feel –
• Customer Review.
• Design Research.
• Graphic and Branding Development.
• User Guides.
➢ Responsiveness and Interactivity –
• User Interface Prototyping.
• Animation.
• Adaptation to all Screen sizes.
• Implementation by the coders.

Figure 18: UX Designer Vs UI Designer

Getting to know UI / UX for Mobile AppsDevelopment
35

A UI designer makes technology accessible and intuitive for people to use. It is another UX and
UI difference. UI designers operate in areas where users interact with the product directly.

UX vs. UI Design

Figure 19: UX vs UI
User experience is the experience a user gains from a product. To distinguish between good and
bad user experience design, we must interact with each element or aspect of a product.
The research UX design involves helps a UX designer understand the pain points of the user,
market gaps, and rival review. Besides, UX also considers the business goals and objectives to
build products that align with the vision and mission of the organization. That is another
difference between UI and UX. The best practices are to improve user interaction and perception
of the product.
Know this, UX Designers are not only responsible for preplanning and preparing the technology
behind the product, but they are also responsible for the user interactions both online and
offline.

Getting to know UI / UX for Mobile AppsDevelopment
36

UI Design – Its focus

Figure 20: Focus Differences UI UX
The focus of UI design is on the look and layout – how each element of the product will look,
including buttons, text, images, or any other visual interface elements.

UX design determines the functionality of the interface and impressions, and UI design creates
an interface’s look and feel. It is another difference between UI and UX. UX handles the
conceptual aspects, whereas UI focuses on the aesthetic characteristics of the product to make
the websites, apps, themes, plugins etc. look elegant to the user.

UX designers conduct market research and review to understand the needs of the customer
before designing the product. UI designers update themselves on design trends that evolve as
per the tastes and behaviour changes in the customer.

In our multi-screen era, where handheld devices are prevalent, responsive UI design is integral.
The ultimate goal of a responsive UI design is to make interfaces compatible with any screen size
instead of creating different versions. It is another difference between UI and UX design. UI

Getting to know UI / UX for Mobile AppsDevelopment
37

designers enhance the interface to match any screen size, so keeping the product appeal
consistent.
UI design creates the appearance of a product. It forms the personality – connects to the user
and building trust. The role of a UI designer also requires them to be a team player – to be able
to collaborate.

The main differences between UX and UI

Figure 21: Distinguishing UI UX

Getting to know UI / UX for Mobile AppsDevelopment
38

To distinguish the primary differences between UX and UI, we must look at the responsibilities
of a UX and UI designers.

Functionality vs Quality of Interaction

UX helps create the purpose and functionality of the product. UI helps develop the quality of
interaction with the product. It is another difference between UI and UX.

Aesthetics vs Research

UI design deals with the aesthetics, as in what the user views, listens to, and feels. UX deals with
research and interacting with consumers to understand their needs. It is another difference
between UI and UX. UX design is mainly concerned about the user’s expectations of the product.
The goal of UX is to solve problems for the user. Stepping into the shoes of your user doesn’t
mean your design is neglecting to serve your business goals. A Call-To-Action (CTA) can remind
your users about certain restrictions in their current plan and offer an opportunity to pay and
enjoy the bonuses of an upgraded plan.

Management vs Technicality

UX focuses on management and analysis through thinking, assimilation, and execution. UI acts
as a technical component to produce the design components for the finished product. It is
another difference between UI and UX.

Separate focus

The most crucial difference between UI and UX is that they have further use for prototyping. The
reason is straightforward too. UI is more attentive towards the interface- the front end, while UX
focuses on the back end.