Computer

Workshop

2/27/202
1
1
UI/UX

2/27/202
2
1
2/27/202
3
1
UI/UX Devices

2/27/202
4
1
Example

2/27/202
5
1
 What is UI Design?
► The “UI” in UI design stands for “user interface”.
► The user interface is the graphical layout of an
application.
► It consists of the buttons users click on, the text they
read, the images, sliders, text entry fields, and all the rest
of the items the user interacts with.
► UI designers create the look and feel of an application’s
user interface.
► This includes screen layout, transitions, interface
animations and every single micro-interaction. Any sort of
visual element, interaction, or animation must all be
designed. 2/27/202
1
6
What is UI Design?

► UI designers are graphic designers. They’re concerned

with aesthetics.
► It’s up to them to make sure the application’s interface is
attractive, visually-stimulating and themed appropriately
to match the purpose and/or personality of the app.
► And they need to make sure every single visual element
feels united, both aesthetically, and in purpose.

2/27/202
7
1
Designing User Interfaces
for Users
► User interfaces are the access points where users interact
with designs. They come in three formats:
1. Graphical user interfaces (GUIs): Users interact
with visual representations on digital control panels. A
computer’s desktop is a GUI.
2. Voice-controlled interfaces (VUIs): Users
interact with these through their voices. Most smart
assistants—e.g., Siri on iPhone and Alexa on Amazon
devices—are VUIs.
3. Gesture-based interfaces: Users engage with 3D
design spaces through motions: e.g., in virtual reality
(VR) games. 2/27/202
8
1
Stages of UI Development
► Dream
► Design
► Develop
► Deliver

2/27/202
9
1
UI Composition

► Color scheme
► Typefaces
► Iconography
► Grouping of items
► Order of items
► Decoration- fonts, boxes, etc.
► Alignments of items
► White space between items (Layout)

2/27/202
10
1
Color Scheme

2/27/202
11
1
Typefaces

2/27/202
12
1
Iconography

► Iconography, as a branch of art history, studies the

identification, description and interpretation of the content
of images

2/27/202
13
1
Grouping/Order of items

2/27/202
14
1
Decoration

2/27/202
15
1
Alignment of items

2/27/202
16
1
Alignment / Division

2/27/202
17
1
UI Controls

2/27/202
18
1
2/27/202
19
1
UI Design

2/27/202
20
1
How to make Good UIs

► To deliver impressive GUIs, remember—users are

humans, with needs such as comfort and a limit on
their mental capacities. You should follow these
guidelines:
1. Make buttons and other common
elements perform predictably (including responses such
as pinch-to-zoom) so users can unconsciously use
them everywhere. Form should follow function.
2. Maintain high discoverability. Clearly label icons and
include well-indicated affordances: e.g., shadows for buttons.
3. Keep interfaces simple (with only elements that
help serve users’ purposes) and create an
“invisible” feel. 2/27/202
21
1
How to make Good UIs

4. Respect the user’s eye and attention regarding

layout. Focus on hierarchy and readability:
a. Use proper alignment. Typically choose edge (over center)
alignment.
b. Draw attention to key features using:
• Color, brightness and contrast. Avoid including colors or
buttons excessively.
• Text via font sizes, bold type/weighting, italics, capitals
and distance between letters. Users should pick up
meanings just by scanning.

2/27/202
22
1
How to make Good UIs

5. Minimize the number of actions for performing tasks

but focus on one chief function per page. Guide users by
indicating preferred actions. Ease complex tasks by using progressive
disclosure.
6. Put controls near objects that users want to control. For
example, a button to submit a form should be near the form.
7. Keep users informed regarding system
responses/actions with feedback.
8. Use appropriate UI design patterns to help guide users
and reduce burdens (e.g., pre-fill forms). Beware of using dark
patterns, which include hard-to-see prefilled opt-in/opt-out checkboxes.
9. Maintain brand consistency.
10. Always provide next steps which users can
deduce naturally, whatever their context.
2/27/202
23
1
Research in UI Designs
► UI designers need to make sure the visual language they
choose fits the class of application they’re writing. They’re
trying to predict user expectations. If your team is designing a
travel app, it’s important to research how other travel apps
have been developed in the past. Which ones worked? Which
ones didn’t? There are design lessons to be learned from the
work others have done before.
► Research might indicate that people prefer outlined icons
instead of bold shapes. This is a visual shorthand that people
are comfortable with and enjoy. UI designers would then do
well to incorporate that lesson.
► The exact aesthetic they choose is up to them, but the basic
“rules,” or the need to conform to user expectations, is
something designers ignore at their own risk.
► Not to say risks shouldn’t be taken. UI designers want their
interface designs to stand out and be memorable. But this
must be balanced against making sure people recognize the
purpose of the elements you’re placing on screen.
2/27/202
24
1
Example-1

2/27/202
25
1
Example-2

2/27/202
26
1
Example-3

2/27/202
27
1
Example 4

2/27/202
28
1
UI Design Tools

► MockFlow
► Adobe Comp
► Sketch
► InVision Studio
► Craft
► Adobe XD
► Marvel
► Figma

2/27/202
29
1
► Questions???

2/27/202
30
1
Introduction to UX

2/27/202
31
1
Design

► “Design is not just what it looks like and feels like. Design
is how it works.”
— Steve Jobs.

► “Want your users to fall in love with your designs? Fall in

love with your users.”
— Dana Chisnell

2/27/202
32
1
Product

► User
► Brand

2/27/202
33
1
What is UX Design?
► “UX” stands for “user experience.”
► A user’s experience of the app is determined by
how they interact with it.
► Is the experience smooth and intuitive or
confusing? Does navigating the app feel logical or
does it feel arbitrary? Does interacting with the app
give people the sense that they’re efficiently
accomplishing the tasks they set out to achieve or
does it feel like a struggle?
► User experience is determined by how easy or
difficult it is to interact with the user interface
elements that the UI designers have created.

2/27/202
34
1
Complexity and Perception

► User experience design, as its name suggests, is about

designing the ideal experience of using a service or product.
► However, in the main, the term user experience design is
used in relation to websites, web applications and other
software applications.
► Since the second half of this century’s first decade,
technologies have become increasingly complex, and the
functionality of applications and websites has become far
broader and far more intricate.
► Early websites were simple static pages that served up
information to feed curious searchers; however, a few
decades later, what we can find a wealth of online are sites
that are interactive and offer a much richer feel for users.

2/27/202
35
1
Complexity and Perception…

► You can add all the features and functionality that you
like to a site or application, but the success of the
project rides on a single factor: how the users feel
about it.
► The questions that we as UX designers are concerned
with are these:
► Does the site or application give the user value?
► Does the user find the site or application simple to use
and navigate?
► Does the user actually enjoy using the site or the
application?

2/27/202
36
1
What is User Experience (UX)?

► In general, user experience is simply how people feel

when they use a product or service.
► In most cases, that product will be a website or an
application of some form. Every instance of
human-object interaction has an associated user
experience, but, in general, UX practitioners are
interested in the relationship between human users and
computers and computer-based products, such as
websites, applications and systems.

2/27/202
37
1
What is UX Design? …..

► So UX designers are also concerned with

an application’s user interface, and this is
why people get confused about the
difference between the two. But whereas
UI designers are tasked with deciding how
the user interface will look, UX
designers are in charge of determining
how the user interface operates.

2/27/202
38
1
How They Work Together

► So a UX designer decides how the user interface

works while the UI designer decides how the user
interface looks.
► This is a very collaborative process, and the two
design teams tend to work closely together.
► As the UX team is working out the flow of the app,
how all of the buttons navigate you through your
tasks, and how the interface efficiently serves up
the information user’s need, the UI team is working
on how all of these interface elements will appear
on screen.
2/27/202
39
1
Example
► Let’s say at some point in the design process
it’s decided that extra buttons need to be
added to a given screen.
► This will change how the buttons will need to
be organized and could require changing their
shape or size.
► The UX team would determine the best way to
lay out the buttons while the UI teams adapt
their designs to fit the new layout.
► Constant communication and collaboration
between UI and UX designers help to assure
that the final user interface looks as good as it
can, while also operating efficiently and
intuitively. 2/27/202
1
40
What is a UX Designer?

► A UX designer is someone who investigates and analyzes

how users feel about the products he or she offers
them. UX designers then apply this knowledge to
product development in order to ensure that the user
has the best possible experience with a product. UX
designers conduct research, analyze their findings,
inform other members of the development team of their
findings, monitor development projects to ensure those
findings are implemented, and do much more.

2/27/202
41
1
Why Does UX Matter?

► In times gone by, product design was simple;

► Designers built stuff they thought was cool and that they hoped
their clients would like.
► Unfortunately, there are two problems with that approach.
► The first is that, there was far less competition for people's
attention online.
► The second is that there's no consideration for the user of the
product at all in that approach—the success or failure of a
development project was down to luck as much as it was down to
the judgement of the design team.
► Focusing on UX enables design to focus on the user.
► It increases the chances of a project's success when it finally
comes to market, not least because it doesn’t gamble on the faith
of users in taking to a product just because it’s a brand name.
2/27/202
42
1
 Where Can UX Design be
Found?
UX Design can be found in a variety of project environments today, including:

► Complex projects — the more complicated the project, the more essential UX design is. Too
many features handled the wrong way can discourage users like nothing else.

► Startups — you may not find dedicated UX teams in a startup, but UX is always part of the
objective. High-tech startups developing innovative projects need to understand how their
users feel even more than established companies do.

► Projects with decent budgets — UX tends to get skipped in low-value projects, but any
development project team with a decent budget will tend to allocate some of their financial
resource to UX so as to ensure that the budget brings a return on investment.

► Long projects — the longer the project, the more resources it consumes; thus, UX becomes
ever more important to delivering a return on the investment.

2/27/202
43
1
What's the Main Methodology
for UX?
► The main methodology used to guarantee the user
experience in most projects is user-centered design.
Simply put, user-centered design is all about designing
with the users’ needs and expected behaviors in mind.

► It's important for us as UX designers to remember that

user-centered design is a means of achieving good
UX—and not the only methodology or tool that one can
use to ensure optimal UX in a project.

2/27/202
44
1
Factors affecting UX
► Good user experience adds to the beauty of the product while a
complicated user experience does just the opposite of it.

2/27/202
45
1
 1. Useful
► The chances of a useful feature, website or even an app
to succeed among users are highly likely when
compared to something unnecessary.
► Good designers often plan how they can make their work
seem useful to users.
► “The ability to simplify means to eliminate the
unnecessary so that the necessary may speak.”
— Hans Hofmann
Good Example —
One of the useful features would be Reviews, showing users appropriate information about
products.

Bad Example —
Let’s take examples of auto-playing videos and pop-up ads right after opening a website.

2/27/202
46
1
2. Usable

► Let’s say you’ve added a useful feature to your website or

app, but if it’s not usable, it’ll ruin the user experience.
► Designers must make sure that all the features and
options added are easily usable. It’s never a good idea
to give your users a half-baked design.
► Another related example would be the misuse of toast
messages. A toast message should never be displayed
on top of buttons because this leads to unwanted clicks
and actions.

2/27/202
47
1
3. Findable

► It is crucial to present the necessary information to the

right users at the right moment.
► Letting your users waste their time figuring out what this
button or element is supposed to do or where should
they go to do something is not very efficient.
► “If you find an element of your interface requires
instructions, then you need to redesign it.” — Dan
Rubin
► The more steps it takes to do something, the more your
user is going to feel pestered.
► A bad example of this would be splitting the user
journey into various stages when it could’ve been
achieved in one go. 2/27/202
1
48
4. Credible

► Trust is an important factor and should never be taken for

granted.
► Credibility directly translates to how trust-worthy the information
on your website or app is.
► A credible website presents honest facts and information.
► An easy and quite obvious example could be user reviews on a
website or platform. All reviews on your website should be
credible and honest instead of fake ones to paint the real
picture.
► The growing amount of fake apps on the app stores that try
hard to trick the users, reduce the overall credibility of apps.

2/27/202
49
1
5. Desirable

► So you’ve created something credible, useful and usable but have

you made sure is it desirable?
► What if users found out something better than the best you have
to offer?
► Desirable means that your website or app is used and appreciated
by someone who found it extremely well made.
► A good user experience leaves a positive impression of your
website or app on its users.
► Several factors contribute to the desirability of a website or an app.
► They are: Aesthetics, Branding, Identity, Design.
► It is recommended to put efforts into creating a well-planned design
to help expand its reach.
► Customer satisfaction is key to being desirable as users are always
on the lookout for good user experience.
2/27/202
50
1
6. Accessible
► If a user is able to achieve his goal easily while working
on your product, then you have designed something
which is easy to use.
► How often do you come across content on a website that can
be accessed by everyone, including individuals with
disabilities? This part of user experience is often overlooked
and most of the times, ignored.
► Information intended for everyone should be accessible by
everyone. It’s as simple as that.
► People with limited capabilities should never be left out while
planning design.
► Adopting an accessible user experience also shows that you
care about everyone and elevates your brand reputation.
► Accessibility features include: Screen readers,
Magnifiers, Colour filters, High contrast texts,
2/27/202
captions.
51
1
7. Valuable
► Everything is designed. Few things are designed well.
► After considering all the above factors, we must not forget about
the delivered value.
► A good user experience translates to a higher-value of the
design. The final design must be of excellent quality to enhance
its value.
► A design’s worth can be measured by the cost of the problems it
solves. Nothing’s more effective than an inexpensive design
solving an expensive design problem.
► Example —
Let’s say you’re spending time in researching an efficient design
pattern that beats your competitor’s current design. It is wise to
adopt a design pattern keeping you ahead of the competition
now and in the future. This way, you can get more value out of
your new design for a while longer than expected.
2/27/202
52
1
Summarizing
► To summaries things, we discussed the seven factors
that play a crucial role in deciding the effectiveness of a
design’s user experience.
► A designer can take his designs to new heights by
following these critical factors, ultimately improving the
user experience. The better the user experience, the
popular the website or app becomes within its users.

2/27/202
53
1
Research is Key
► Research is vital for both UI and UX
designers. It’s important for both disciplines to
gather as much good information as possible
to assist them in crafting appropriate designs,
and both follow a similar approach.
► Both will research what users want. What they
expect from applications of the sort being
developed. This research is often iterative,
involving usability sessions, where real users
will interact with scaled versions of certain
functionality or visual designs being tested to
determine whether the designers are moving
down the proper path. Feedback is integrated
with each iteration.
2/27/202
54
1
Research for UX Design..
► As an example, most people are
comfortable with the idea that you
click twice on a file to open it and
once to select it.
► This is an interface behavior that has
existed almost as long as there have
been graphical user interfaces.

2/27/202
55
1
Ways of UX Research

► Interview
► Focus Groups
► Surveys
► Usability Testing : is the practice of testing how easy a
design is to use with a group of representative users.

2/27/202
56
1
2/27/202
57
1
2/27/202
58
1
2/27/202
59
1
Lab Experiments

► UI Design Using: HTML, CSE, JavaScript.

► UX Design Tools: Figma / Adobe Xd

2/27/202
60
1
► Thank You!!

2/27/202
61
1