«A Handbook For Better Designing», Vikalp Kaushik.mobi

Contents
Foreword
Colors
Gradients
Layout & Grids
Typography
Forms
Login & Sign-up page
Button Roundness
Checkbox, Radio & Toggle
Cards
Sidebar
Bottom Navbar
Links
Slider
Favorites
Tooltips
Testimonials
Empty States
Onboard Screens
Dark mode
Foreword
Hi there!
First of all, thanks for picking up a copy - you're amazing.
This book does not try to cover everything under the sun related to UI. It
focuses on the core of the UI patterns, trying to simplify the more complex
things.
It's my first attempt at writing a book. I'm fairly aware there are a few
mistakes. Keep in mind that almost everything in our world is subjective.
The best practises and tips are suggestions rather than clear cut rules. Some
have fewer judgments, while others have more. However, the one piece of
advice you should take is to be reasonable.
Vikalp Kaushik
Colors
Guide for Creating the Perfect UI
The color scheme you choose is important. Each one evokes a distinct
image or emotion in individuals who view it. This is something you can
utilise in your design. Let's look at how to make a user interface that makes
the most of color choices. It's one of those user interface design approaches
that will help you make more money.
Colors have the ability to communicate in ways that are just as powerful as
language. They have the potential to reflect your company's individuality.
They can attract people and help you deliver your message more effectively.
Colors are likely to be mentioned heavily in any UI Design standards.
Each UX color choice has an own meaning and consequence. Of course,
culture has a role in some of this.
Choose the Right Color in the Proper Pattern
Both positive and negative emotions are represented by the color red. Anger,
love, confidence, and passion are some of the emotions that Coca-cola aims
to elicit.
Most people seem to be enthralled with the color orange. It's one of the
popular UI colors used by many businesses. Fanta, for example, uses it as a
backdrop color to draw emphasis to the brand name.
Yellow is frequently associated with joy, happiness, and sunlight. This color
is highly suited when discussing social media networks, which is why
Snapchat employs it in its logo.
Security, trust, and safety are all represented by the color blue. Numerous
studies have shown that blue has positive connotations for a wide range of
people. Blue can be seen in a variety of environments, including many
natural ones. Hundreds of well-known brands, including Skype and
Microsoft Word, as well as the companies mentioned above, use it.
Green evokes sentiments of regeneration and peace. These feelings are
appropriate for a brand like Tropicana, which employs green as its primary
logo color.
Black is a mysterious color, yet it is also connected with death and sorrow. It
can also indicate modern or traditional at times.
White is often associated with goodness, clarity, purity, and innocence.
◆◆◆
Monochromatic
Monochromatic color schemes use a single base color for the design, but
incorporate various shades, tints and tones of the main hue within the
designs palette.
This creates a very bold, dramatic look whilst still being relatively soft and
elegant to the eye.
It’s easy to create a sense of harmony and balance in the design when you’re
using a monochromatic color palette in design.
Why to use?
By restricting your color palette in this way, you may even open yourself up
to fresh and efficient ways of using colors in your designs.
Instead of focusing on color-matching and contrasts, you can focus your
creativity and the fun little details that give your design its unique quality.
It removes the difficulty and “color chaos” that can come through too much
choice in color.
If you apply a monochromatic color scheme to your entire design, you can
create balanced changes from one design to another.
Monochrome is seen as one of the simplest color schemes to get right, so
they are a popular choice with first-time designers. You can make a big
message with just one color.
Easy way to create monochromatic color scheme:
Step 1: Pick any color
So, I just pick this color “#564094”. Because I am using it a lot. And we’re
going to change it to HSB, which stands for Hues, Saturation, and
Brightness.
Step 2: Make 10 copies of your main color
Just copy paste the same color 10 times so we can make a perfect
monochromatic color scheme.
Step 3: Change the Brightness value
The color code in hex is “#564094” and in HSB is “256 57 58”. Now, we’re
creating a set of B values with differences of 10. Starting from 8 to 98. H &
S remains same.
Also variations can be any number not just 10 or it can be start or end at any
point.
Step 4: Pick colors accordingly
Pick 3–4 colors according to make a monochromatic color palette. I pick
“#291F47” , “#7356C7” and “#916CFA”.
How to apply? (using 60/30/10 Rule)
This popular design trick is a great way to keep your interface balanced. This
formula dictates that 60% of your website should be made up of your
dominant hue, 30% should be your secondary color, and the remaining 10%
should be your accent color.
Sticking to this formula will allow the eye to move comfortably from one
focal point to the next.
Another Example
The color picked is “#E08938” and creating the different shades using B
value variations.
60/30/10 Rule:
◆◆◆
Analogous
Analogous colors are a group of three colors next to each other on a color
wheel, such as violet, red-violet, and red. When these colors are grouped we
call it an analogous color scheme. The color in the centre of this group of
three is sometimes called the mother color since the other two colors contain
that centre color.
Analogous color schemes create a visually pleasing and calming display. For
instance, the color blue can pair nicely with both teal and green.
They usually match well and create serene and comfortable designs.
Analogous color schemes are often found in nature and are harmonious.
It always looks very elegant and clear. There is no tension in the palette, and
typically it’s uniformly all warm, or all cold. If a base color on the warmcold border is chosen, the color with opposite “temperature” may be used for
accenting the other two colors.
However, analogous color schemes provide a low-contrast experience, since
all colors fall in line with one another.
Make sure you have enough contrast when choosing an analogous color
scheme. Choose one color to dominate, a second to support. The third color
is used (along with black, white or gray) as an accent.
Easy way to create analogous color scheme:
Step 1: Pick any color
Started with color “#475FCB”. And we’re going to change it to HSB, which
stands for Hues, Saturation, and Brightness.
Step 2: Make 5 copies of main color
Just copy paste the same color 5 times so we can make a perfect analogous
color scheme.
Step 3: Change the Hue value
Now, increase or decrease the hue (H in HSB) value by 30 points. The color
code in hex is “#475FCB” and in HSB is “229 65 80”. The main color is in
center and decreased 30 points from the left and increased the 30 points to
the right.
You can change accordingly saturation and brightness (S & B) to get better
contrast.
Step 4: Choose accordingly
Pick adjacent colors around the main color to make a analogous color
palette.
Examples:
1. Blue, blue-purple, purple
Purple can be considered somewhat analogous to blue. Blues that are close
to cyan or green look very different from purple. However, short
wavelengths of blue light are close to violet.
2. Red, red-orange, orange
These colors are the longest wavelengths of visible light and these colors are
perceived as warm due to their association with sunlight and fire.
3. Teal, teal-green, green
These colors are middle wavelengths of light that are extremely common in
nature due to their presence in the sky, bodies of water and vegetation. They
are considered cool and calming.
◆◆◆
Complementary
A complementary color scheme is composed by using two colors opposite
each other on the color wheel. This is the particularly contrasting of all color
schemes which attracts the most attention and one of the primary challenges
when working with it is to fulfil a harmonious balance.
The powerful contrast of complementary colors can be very sharp, especially
if you use every color in its full saturation. Because this scheme is a
combination of warm and cold color when it comes to design you need to
carefully examine which of the two colors will be the dominant one.
Usually, when using a contrasting color scheme, it is important to choose the
primary color and use the following one for accents. This choice will set the
impression of the final result — your design will look warm or cold.
Handful designers choose to reduce the saturation of the colors and use soft,
warm shades, which makes the contrast softer but still retains the balance of
the composition.
This color scheme is useful when you need to emphasize something as it
focuses the attention towards a particular object. Often, a design with a
complementary combination of colors looks more traditional.
As we said, in their most basic aspect, complementary color schemes are
based on two colors but can be expanded by adding shades with different
saturation and intensity.
Easy way to create complementary color scheme:
Step 1: Pick any color
Started with color “#1E3CC3”. And we’re going to change it to HSB, which
stands for Hue, Saturation, and Brightness.
Step 2: Hue value
Copy the first color and then increase or decrease the H (Hue) value by 180
points. It will give complementary color.
Step 3: Shades and tint
Now, To make a color palette. we will make a dark and light version of both
colors.
For the dark version, set the B (Brightness) value equal to 30 points. For the
light version, set the B value equal to 90 points and also the S value to 50
points for better accessibility.
Step 4: Make your color scheme
Now, choose your colors accordingly. I have selected my picked color as
primary, his dark version for heading or titles, his complementary color as a
secondary and a light version of complementary color as an accent.
Step 5: Apply
Directly apply to your designs.
Another example
Let’s look at another example by the same approach. I have picked the
“#7F4494” color. Follow all the steps and choose my color palette.
After applying my color palette.
◆◆◆
Split-Complementary
A split-complementary color scheme takes up a base color and two
secondary colors. It is similar to the complementary color scheme, but one of
the complements is split.
The split complementary color scheme is versatile, pleasant, and easy to
achieve. It offers the same advantages of a complementary color scheme in
terms of contrast and balance between warm and cool color temperatures.
Yet some assume it easier to work with since the hues are more subtle and
create less tension.
The benefit of the split complementary color scheme is that it has more
combination than a simple complementary color scheme. This variety,
however, also makes split complementary color schemes less vibrant and
eye-catching.
To make matters worse, it is often hard to harmonize the colors in a split
complementary color scheme.
The effect created by such a scheme is just as contrasting as the one before
but barely less intense. If you feel unconfident about using the
complementary scheme, use the split complementary instead.
The split-complimentary color scheme is often a good choice for beginners,
because it is difficult to mess up.
Easy way to create split complementary color scheme:
Step 1: Pick any color
Started with color “#DBB468”. And we’re going to change it to HSB, which
stands for Hue, Saturation, and Brightness.
Step 2: Make copy
Just copy paste the same color 2 more times so we can make a perfect split
complementary color scheme.
Step 3: Change Hue value
Increase or decrease the hue (H in HSB) value by 150 points. The color code
in HSB is “40 52 86”.
First decrease by 150 points, you will get first complementary color and then
other increase by 150 points, you will get second complementary color.
Bonus: You can also change S & B (Saturation and Brightness) values
accordingly to get better contrast and accessibility.
Step 4: Apply
Now, directly apply to your designs. Here, I have choose 60–30–10 rule
(somewhat) for distribution of colors.
Another Example:
Let’s look at another example by the same approach. I have picked the
“#D78CCB” color. Follow all the steps and make my color palette.
After applying my color palette.
◆◆◆
Triadic
A triadic color scheme, a unique variant of the split complementary color
scheme, with an equal distance between all colors. All three colors are
distributed evenly around the color wheel, causing there to be no clear
superiority of one color.
The scheme is always vibrant and colorful, designers should use it and
balance very carefully to maintain the desired effects and color meaning.
Triadic color harmonies tend to be quite enthusiastic, even if you use pale or
unsaturated versions of your hues.
To use a triadic harmony successfully, the colors should be carefully
balanced — let one color dominate and use the two others for accent.
By combining colors using the triadic principle we get lively and cheerful
space which is the most suitable for playful or colorful user interfaces.
Triadic scheme of warm colors is very intense and can cause the feeling of
discomfort in the UI if you color the equal amount of space with each color.
Vibrancy and intensity can be reassured by using one color as the dominant,
and the other two as the secondary and the accent ones.
Easy way to create triadic color scheme:
Step 1: Pick any color
Started with color “#F7C88C”. And we’re going to change it to HSB, which
stands for Hue, Saturation, and Brightness.
Step 2: Make copy
Just copy paste the same color 2 more times so we can make a perfect triadic
color scheme.
Step 3: Change Hue value
Increase or decrease the hue (H in HSB) value by 150 points. The color code
in HSB is “34 43 97”.
First decrease by 120 points, you will get first equivalent color and then
other increase by 120 points, you will get second equivalent color.
Step 4: Shades & tone
You can also change S & B (Saturation and Brightness) values accordingly
to get better contrast and accessibility.
The color which I picked is very bright. So, I am decreasing B value of other
colors to make perfect pair.
Step 5: Apply
Now, directly apply to your designs.
Another Example
Let’s look at another example by the same approach. I have picked the
“#2F2D52” color. Follow all the steps and make my color palette.
After applying my color palette.
◆◆◆
Tetradic
A tetradic color scheme, an outstanding variant of the twin color scheme,
with an equal distance between all colors. All four colors are divided evenly
around the color wheel, resulting in there being no clear dominance of one
color.
The tetradic (double complementary) scheme is the richest of all the
schemes because it uses four colors organized into two complementary color
pairs.
Tetrad is a very aggressive color scheme, needing very good planning and
very emotional approach to relations of these colors.
The scheme is always vibrant, scared and colorful, there is equal tension
between all colors.
This rich color scheme offers plenty of likelihoods for variation. The tetradic
color scheme works best if you let one color be dominant.
You should also pay attention to the balance between warm and cool colors
in your design.
This scheme is hard to harmonize; if all four colors are used in equal
amounts, the scheme may look unbalanced, so you should choose a color to
be dominant or overwhelm the colors.
Easy way to create a tetradic color scheme:
Step 1: Pick any color
Started with color “#DC7272”. And we’re going to change it to HSB, which
stands for Hue, Saturation, and Brightness.
Step 2: Make a copy
Just copy paste the same color 3 more times so we can make a perfect
tetradic color scheme.
Step 3: Change Hues values
First, increase hue value by 30 points. After that increase 180 points in both
colors.
Step 4: Adjust
You can also change S & B (Saturation and Brightness) values accordingly
to get better contrast and accessibility.
Step 5: Apply
Now, directly apply to your designs.
Google, Microsoft, eBay (and some other corporate companies) use tetradic
colors in their logos. Colorful palettes create a sense of openness, diversity
and optimism, which are positive for a consumer brand.
Gradients
Simple way to create a soft gradients
Gradients were one of the design scenarios lifted to the side by designers
when they fell madly in love with flat design. While that matte era is still
here, it’s safe to say that gradients are making a comeback in a big way!
Earlier last year, it appeared that gradient designs were inspiring changes
almost overnight. From backgrounds to overlays to subtle textures in UI
elements, gradients were trending upwards.
However, the use of gradients works best for larger elements. In smaller
elements, gradients can be difficult to see, and potentially distract or distort
the vision of the user. But when used in larger spaces, gradients can help
users focus on a specific call to action.
Soft gradients allow you to make design elements look tactile and clickable.
They add dimension to call-to-action buttons and app icons. For that reason,
they’ve become common in apps and website design.
Step 1: Pick any color
Starting with your primary color. Or just pick any color you want. I just pick
the “#1687d9” color because it was the primary color of my last project.
Step 2: Linear gradient
By default, it was the solid color change that to linear-gradient and choose
both side same color. And also change the opposite side color from hex to
HSB, which stands for Hue, Saturation and Brightness. (HSB = 205, 90, 85)
Step 3: Change Hue value
Now, increase or decrease the H (Hue) value by 20–30 points, depending on
your preference. I have taken two examples, the first decrease by 20 points
and the second increase by 20 points.
Step 4: Change Brightness value
Similarly, increase or decrease the B (Brightness) value by 5–10 points. It
will help to give more smoothness to the gradient.
Step 5: Change direction (up to you)
By changing the direction, gradients will look more trendy and modern. It’s
up to you and you can play around with directional line until you get a better
result.
Apply to your designs
There are lots of gradient resources available online but finding your lovable
perfect gradient scheme can be difficult or time-consuming. In this way, you
can create your own soft and modern gradients from any regular color. And
simply use it in your projects.
Layout & Grids
Use grids to improve visual hierarchy
A grid is most often used as an underlay to a design or drawing, to oversees
the positions of elements. A grid can help accelerate that hierarchical process
and make it easier too.
My biggest mistake as a beginner is I never used grids before designing
because design software has alignment tools. But better practice is to use
grids.
The grids are known well for bringing order and clarity to your designs to
improve the overall look and feel. It balances the layout and speeds up the
design process. And also they are flexible.
So, I started using grids and most recently I used two grid layouts which
helps me in designing.
Modular grid
Modular grids provide a balanced layout by dividing up your content into
equal standards but the ability to span multiple columns ensures the content
appears charming and engaged.
A module is established at the intersections. It is a rectangle with width and
height that underlies the theme.
Now, I used 8x8 rectangle modules. Because the screen size in pixels is a
multiple of four or eight for most common devices. So it will easy to
develop or design an interface.
And also it will easier if all margins and padding values will be even.
All margins are multiple of 8 like 24,56,98,144px etc.
All building system must be fixed up using this grid — line spacing,
alignment of elements, positioning, white space, sizes, icons, visual
hierarchy etc.
Column grid
This column-based structure is used to place text, images and procedures
consistently throughout the design. This grid layout helps in responsiveness.
In responsive layouts, the column width is defined with percentages, rather
than fixed values. This allows content to adapt to any screen size. The
number of columns displayed in the grid is specified by the breakpoint
range.
First of all, below one is again an example of without grid.
Text and images are placed that follow the vertical lines and flow lines
making up the columns. They are the thick coloured blocks that make up the
content width of your design.
The number of columns changes from 14–16 on the large desktop to 12 on a
desktop, to 6–8 on tablets and 2–4 on mobile.
I use standard a 14 column grid according to a large desktop screen and the
size of columns are 72px, the size of gutters is 24px and the side margins are
12px each.
Results in creating a clean and organized space. Hard to notice the difference
but now it is more ordered and balanced.
Here, gutters are the space between the columns and side margins are the
amount of white space outside of your content width.
For tablet I use a 6 column grid, the size of columns are 102px, the size of
gutters is 24px and the side margins are 16px each. For mobile I use a 2
column grid, the size of columns are 136px, the size of gutters is 16px and
the side margins are 16px each.
Conclusion
In this way, grids make it easier for you to create a hierarchy. It establishes
equilibrium with its symmetrical layout, which you can use to balance out
your elements and decide if one side overpowers the other.
The grid principle is also commonly used in art and photography to
understand the balance point. They are also other types of grids — baseline
grid, manuscript grid etc. But make effective use of grids in your design and
development.
Typography
8 tips to improve your typography skills
Many peoples think that typography consists of only selecting a typeface,
choosing a font size and whether it should be regular or bold. For most
people it ends there. But there is much more to achieving good typography
and it’s in the details that designers often neglect.
These details give the designer total control, allowing them to create
beautiful and consistent typography in their designs.
1. Use One Typeface
Combining two or more typefaces isn’t easy. For beginner’s stick to one
typeface. Using two or more typefaces successfully within a layout requires
an understanding of the chosen fonts in order to be confident that they are
complementary.
2. Justify Left is better
Set your type justify left rag, because people reads from top to bottom, left to
right.
By justify type left, the human eye is able to find the edge and read the
copy much more better.
3. Use font weight correctly
The key to great design is contrast. Slight changes in weight makes it harder
for user to notice the difference.
Go from light to medium or from regular to bold. Sometimes, it’s good
to skip weights.
4. Double point size for heading
Doubling the point size of headlines outcomes greater contrast.
Double up or down the point size. For example, if you’re using 18 point
for the body, then use 36 point for the heading.
5. Let the letters breathe
Space between the lines of type in a body of copy that plays a big role in
readability.
Correctly spaced lines make it easier for a reader to follow the type and
improves the overall appearance of the text.
6. Widows & Orphans
A widow is a short line or single word at the end of a paragraph.
An orphan is a word or short line at the beginning or end of a column
that is separated from the rest of the paragraph.
Widows and Orphans create awkward rags, interrupt the reader’s eye and
affect readability. They can be avoided by adjusting the type size, leading,
measure, word spacing, letterspacing or by entering manual line breaks.
7. Emphasis
Giving emphasis to a word without interrupting the reader is important.
Italic is widely considered to be the ideal form of emphasis.
Some other common forms of emphasis are: bold, caps, small caps, type
size, color, underline or a different typeface.
No matter which you choose, try to limit yourself to using only one.
8. Measure
The measure is the length of a line of type. To a reader’s eye, long or short
lines can be tiring and distracting.
A long measure disrupts the rhythm because the reader has a hard time
locating the next line of type.
The only time a narrow measure is acceptable is with a small amount of
text.
For optimum readability you want the measure to be between 40–80
characters, including spaces.
Forms
Design better forms that brings in conversions
A
form, is an interface that collects through interactions, the required
information, in a logical, meaningful way, and then passes it to at least one
third party entity.
Forms look like the most innocent and straightforward UI components, yet
they handle the most important interactions with your product. They channel
your users to sign up and pay.
Their primary purpose is to help both users and businesses achieve their
separate goals by establishing a relationship or initiating a conversation
between the two. Even with their extensive importance online, it is
surprisingly common to come across very poorly made forms — which is a
shame.
Here are some tips on how to avoid them:
Match labels above the field
Labels above the fields are an effective way to design forms and speed up
filling the form.
Also forms designed in this way are better with responsiveness on different
devices.
Group inputs and give them space
Something as simple as making sure input labels are closer to their input box
and leave space between them so users don’t get confused.
Optional fields instead of required
It is better to showing optional fields more clear than required one. In this
way, the form will be clear and less overwhelming for the user.
Users feel more better if they know this field is optional to fill instead of its
required to fill.
Divide into groups
Long forms full of boxes can be overwhelming and complicated. They
should be divided into logical groups by adding proper space and
appropriate title.
It makes users feel less overwhelmed by long forms and is easier for users to
consume in chunks.
Give users inline error codes.
There is nothing more confusing than an unclear error. Generic errors put all
of the work on the end users, which will more than likely result in either a
frustrating user experience or an abandonment of the form altogether. Giving
a user inline error codes give explicit instruction to the user where they need
to fix their data.
Summing Up:
At last, no one really wants to fill out a form, but there are a lot of ways that
you can make your forms easier to use and clear to your users. An easy-touse form is a efficient way to an increase in conversions, sales, and
engagement.
Login & Sign-up page
Creating user friendly screens.
Most entrepreneurs started their businesses because they love the work
they do, not because they like selling. Unfortunately, your business won’t
survive if you’re not good at attracting new users to signup for your
application or maintaining the existing users with their daily login.
We are going to figure out how to make sure new users will subscribing to
your application without hesitating and also look upon how to make things
easy for existing users.
New Users
Remember these things, works best for getting new users.
Quickly Getting Started
Don’t ask for everything at the start just quickly getting users to use your
application. And ask all the other things separately in a different section like
profile update etc.
Just ask for an email and password for authentication, skip the username and
other fields for a later proposal.
Avoid Confirm Password
The most frustrating part for users is re-entering the password and it’s not
matching. Rather than asking for confirmation, allow your visitors to see
what they just typed with an icon that unmasks their password.
You should identify and explain form field errors. Show them in which field
the error occurred, and explain the correct way to fill out the field. Give
users a hint of what type of input is expected in a particular field.
Provide Good Value
Avoid using general terms like ‘Sign up’, ‘Login’. Instead, give the user idea
of what to expect when they sign into the application.
Define the value proportion or tell them what value the user will get from
your application.
Use External Accounts
Sometimes users prefer instead of remembering passwords of different
account at different places, they want to connect everything with one
account. Your signup page should contain an option that lets people sign up
on your website using an external account.
This way, they won’t need to go through the lengthy registration process to
make a purchase or add a comment on your site.
Existing Users
Remember these things, helps to make the experience better for existing
users.
Differentiate sign in and sign up
Not everyone can quickly figure out the difference between Sign in and Sign
up. Don’t make things difficult for your existing users.
Handles this by providing visual differences in the button styles, clearly
defined headers as well as a description of the action.
Remember your users
Is there anything more frustrating than returning to a website you logged into
earlier only to find that you need to log in again?
When your user returns to your website, make sure they’re already logged in
or that certain fields are prepopulated for them for easy login.
Easy to reset password
Ensure to provide the “Forgot password” link to help the user recover his
password. And the important part is how easy an experience you make for
your users.
Some of the common reset password methods are, sending email or OTP to
registered email id or mobile number, recovery questions and authentication
by a call to the registered mobile number. Better is to use always sending
OTP or email.
Use fingerprint or face ID
Save your users trouble of having to re-enter all details when they try to relog into your application or website on the same device.
Summing Up:
We wish there was just a switch or a button to press to build your audience,
but sadly this is not the case. There is no set science for attracting customers
to your app or website. However, there are a few different things you can do
to make things easy for users that help your business instead of frustrating
them every time.
Button Roundness
A big impact on the overall feeling of interface.
Designers
are always trying to make the best design decisions for the
project. No matter how minute, every decision affects the whole design.
Buttons are a key part of any project. They signify a call to action and are
responsible for any action taken on the page. Therefore, it is important that
the buttons are well thought out.
As the understanding of UI has evolved, we have seen a steady shift away
from sharp-edged buttons to rounded cornered ones.
Rounded cornered buttons are more aesthetically appealing to the current
sensibilities. They are modern looking and signify optimism.
0 Px Radius:
This option is a classical one and express mainly serious and professional
feeling of interface.
Being consistent with this rounding means clean components, sharp
geometrical alignment and balance of all components.
Pros:
1. Professional
2. Clean look
3. Organized & Structured
Cons:
1. Conservative
2. Corporate feeling
3. Reserved
3–4px Radius:
This is best and probably the most safe choice. 3–4px is in every point of
standard across multi fields, expressing a little bit more friendly and
accommodating then 0px.
Round buttons are also not a great option for displaying nesting options.
This is because they restrict the click area and make clicking difficult. So,
when displaying nested options, it is best to use a semi-round button.
Pros:
1. Friendly
2. Professional
3. Better look
Cons:
1. Conservative
2. Not innovative
8–14px Radius:
When it comes to stacking cards, rounded edges perform even better. It is far
easier to count the cards with rounded edges as they are distinguishable from
one another.
When the edges of the stacked cards are sharp, they look uniform and
our eyes glide over the stack instead of lingering on them. This is even more
noticeable in grid layouts.
It is no surprise that most website templates make use of cards with rounded
edges for their features and services.
Pros:
1. Playful
2. Trendy style
3. Innovative
4. Eye-catchy
Cons:
1. Sometimes messy
2. Not properly used, look infantile
Fully Rounded:
The difference between buttons with rounded corners and fully rounded
buttons is that fully rounded buttons only perform well with a lot of space.
This means that you cannot stack round buttons the way you can with other
buttons.
On the other hand, when there is space, fully rounded buttons act as a great
call-to-action. They can be used to direct a user’s attention to a specific
action. And, they work even better when the layout is in the form of a list, or
cards.
Pros:
1. Friendly
2. Creative
3. Eye-catchy
4. Make Impact
Cons:
1. Not for every CTA’s
2. Look like tags
Summary
When it comes to making the decision for picking buttons, there is no
universal guide. Design is versatile and it can be used to your advantage.
Make sure that whichever option you pick is conducive to the whole design.
A user testing the decisions is a great option if it is feasible. At the end of the
day, a button should make the user want to click it.
Checkbox, Radio & Toggle
Allow users to make choices
Selection controls allow users to complete tasks which involve making
choices such as selecting options, switching settings on or off, or adding or
removing items.
Radio buttons are not checkboxes. Checkboxes are not toggles. Toggles are
not radio buttons. Each one of these elements have different meaning and
used for distinct purpose.
Sizes
Use the correct sizes of radio, checkbox and toggle buttons for better visual
implementation, efficiency and readability.
Radio buttons
A radio is a component that lets the user select the value that is written in its
corresponding text label. Unlike checkboxes, a user can only select one radio
button from a group at a time.
Its best to use them for 2–4 elements. They only let the user select 1 thing,
not more.
Remember these things
When the number of options is less.
When options doesn’t require lengthy descriptions.
Radio buttons are always listed vertically.
Capitalize a radio button’s label.
Checkboxes
A checkbox is a component that lets the user select the value that is written
in its corresponding text label. A user can select multiple checkboxes from a
group at the same time.
A checkbox control has three states: unselected, selected, and indeterminate.
Use checkboxes when more than one option can be selected and capitalize
the checkbox’s label.
Toggle Buttons
A toggle is an interface element that, by its activation or deactivation,
provokes an immediate action on the screen.
However, they don’t need to be confirmed with a CTA button. Use toggle
buttons for activation.
Mind the tap area
Radio buttons, checkboxes and toggle buttons are one of the smallest
interactive elements in all of UI design, so they need to have an easily
accessible tap area.
Let users select an option by clicking or tapping not just that small
square, but also the label or associated words.
Colors and different states
Always use different colors for different conditions and try to use gradient
colors for better visually appealing.
Conclusion
Always display a list of options vertically if possibly. Horizontally-aligned
options can be hard to read and distinguish from one another. If you must
display your list in a horizontal fashion, be sure to pay close attention to the
proximity of an item to its corresponding checkbox, as well as the space
between list items.
Cards
Ultimate guide for designing UI cards
Cards are universal — from social media sites like Instagram and Facebook
to E-commerce stores like Amazon. Card layout has quickly earned
popularity.
As an information container, cards hold all elements such as text, rich media,
buttons, etc. Based on this content, it can adjust its size to that of different
devices and screens, balancing user interface and user experience.
What Are Cards?
Cards are a UI component containing content and actions about a single
case. Cards can contain various elements, but they all should be about a
single topic.
The purpose behind this is to avoid long texts and render more scannable
content. Even though users might not be familiar with a card’s concept from
a design point of view, they instantly know how to use them since they are
identical to physical cards.
Why is it so popular?
Cards are popular because they seem to suppress content. Cards are modular,
so different content items can be stacked together without visiting attention
to their differences.
Cards minify content, by forcing content to adjust to the limitations of the
card boundary and card visual layout. Designers like that cards allow
numerous content to be mixed and matched without concern that the design
will become cluttered.
Cards can break down content into digestible bits that allow users to interact
with it. By giving a container for content, cards indicate that the content is
real and emotional to the user.
Card UI design is popular for other many reasons:
Intuitive: Cards look identical to real-world definite cards as they seem
in user interfaces. They appear common to users. Before cards became
popular elements in mobile and web apps, they were all around in real life:
business cards, baseball cards, sticky notes. Cards represent a beneficial
visual analogy that allows our brains to intuitively connect a card with the
piece of content it represents — just like in real life.
Easy to digest: Cards don’t take up much space and urges the designer to
priorities its content. In a twist, each card becomes digestible pieces of
content that are easily accessed and explored. Cards make it easier for users
to find the content that they are interested in.
Cards are attractive and user friendly: Card-based design often relies
heavily on visuals (especially, images); any copy is usually secondary to the
visual in terms of the information architecture. The emphasis on using
images can help make card-based design more attractive to users than the
same content not arranged in cards.
Advantageous for responsive design: Cards are rectangular shape resizes
smoothly to fit the horizontal and vertical frontages of different screens,
which means users get a uniform experience across all devices.
Shareable: Cards can encourage users to share content on social media, as it
allows users to easily share only specific piece of content vs a whole page.
When to use card UI design?
This is usually the case when you have:
A search-based interface: Cards allow applicable content to generally
indicate itself, making it possible for users to dive deep into their interests.
Card-based design is a very suitable way for presenting such kind of content.
Browsing products: Cards are better compatible when users browse for
information.
Task Management: When you can illustrate a single task in a flow as a card.
Cards can be easily organized for a list of tasks. The task management app
does a great task of using a card-style interface to create a dashboard for
users, where each card represents a separate task.
Similar items: Cards work best for collections of heterogeneous items (when
not all the content is of the same basic type).
Analytical Visualization: Dashboards usually show a variety of content
samples simultaneously on the same sheet. In such circumstances, the card
analogy can help create more obvious differences between items where each
card can adapt to a different role.
Anatomy of cards
Card layouts can differ to support the categories of content they include. The
following components are commonly found among that variety.
(1) Rich Media: Cards can contain thumbnails to show an image,
illustration, avatar, logo, icon or graphics.
(2) Heading: Header text can contain things like the name or title of a photo
album or article.
(3) Description: Supporting text contain text like an article summary or a
short description.
(4) Call to Action: Cards can contain buttons for actions.
(5) Subheading: Subhead text can contain text elements such as an article
byline or a tagged location.
(6) Icons: Cards can contain icons for actions.
Tips & Best Practices
There are a few things that can improve card design.
1. Use relevant image
The image is the leader of the card design, you need a great image to draw
users attention to each card.
Not only images, but cards can also contain illustrations, icons with light
background box or any other kind of rich media but needs to be relevant to
the content.
2. Add visual hierarchy
Hierarchy within cards helps direct the scrutiny of users to the most
important information.
Place main content at the top of the card and use typography to promote the
main content. Use white space & contrast to separate content areas that need
more diverse visual separation.
3. Limit content
A card should include only important information and propose a correlated
access point to additional details, rather than the full details themselves.
As many of us, try to put too much content into a card, the card can turn out
to become extensive or too lengthy and in a twist, lose its actual connection
to the card analogy as it doesn’t look like a card anymore.
4. Avoid embedded links
Don’t include inline links. Cards should link by themselves or provide a
limited set of activities available.
5. Differentiate actions
Cards that contain numerous actions should be visually contrasted.
In the below example, I make the successive action less well-known by
giving it a light tone instead of a primary button style.
6. Resist lines for grouping
It’s common for new designers to distinguish content with borders as a way
to define different groups. These borders cause unnecessary visual noise that
detracts from the content.
Aesthetic & Modern UI cards
Modern digital cards aren’t a pure skeuomorphic idea, but quite frequently,
using consistent analogies and principles used from physics help users make
sense of interfaces and analyze visual hierarchies in content. In the case of
cards there are a couple of things you can do:
1. Use rounded corners
To visually compare with a real-world real card in posture.
Rounded corners are more effective because they allow our eyes to easily
follow lines “as it suits better to the natural movement of the head and eyes
respectively”.
2. Add a light border or soft shadow
To show depth and reveal that the whole card is clickable. Shadows create a
chasm in the interface which helps us to differentiate UI elements.
However, adding shadow into the design is not as simple as it sounds.
Sometimes designers get carried away and by overdoing effects they make
an otherwise decent-looking design look cheap. Avoid using pure black
colour for the shadow.
Bonus: Take care of fonts & white space
It is essential to give each card room to be seen, read and understood. Add
plenty of whitespace around each block to provide users time and peace to
visually reset as they look from one card to the next.
And opt for simple and basic typefaces (such as sans-serif with normal
weight for card body copy), as basic typography maximizes readability and
helps to browse.
Some UI card examples
Let’s look at the real-word UI card examples
Blogs / Posts card:
It’s essential to keep your blog cards simple. They should have a consistent,
repeated structure, but use different image and font sizes to represent the
most important to least important elements of the card to make them more
understandable for those reading them.
They highlight the featured image and title as the most prominent elements.
Then, they also included quotes, which not only help users decide whether or
not the article or posted content is right for them, but can entice them to click
through if they were on the fence.
E-Commerce / Product card:
A product card is an important thing that helps you convert a visitor to a
customer. An excellent product card should attract attention, arouse the
desire to get the product, work out questions and disapproval, motivate
people to buy, and also promote your website in search results.
The name of the product should be placed in the most noticeable place so
that the visitor will immediately understand that he has come to the right
place.
A good image will tell the customer over a thousand words, so you need a
high-quality image to have the perfect product card.
If a product has a special offer, indicate not only the promotional price in the
price block but also the regular price and how much money the customer
will save.
Profile card:
Profile card has become a nail user interface widget in a website template.
With personal branding becoming important more than ever due to the shift
of interest towards the online domain, it’s time to move away from those
boring hyperlinks pointing to your online page.
Just like every card, a profile card is a UI component that holds pieces of
information vital to what it represents. It’s yourself you want to sell to your
audience (not literally) to achieve your objective.
Make sure to include only the necessary information (e.g., image, name,
profession) and let your “about” page to have the remaining details to
complete your profile.
This is in terms of design and layout whereas both interior and exterior of
the card does not damage the look and theme of the website. Hierarchy is the
key.
Dashboard cards:
Dashboard designs can differ widely. But all dashboards are made of cards.
Depending on the type of dashboard, each card might include profile info,
notifications, quick links or a navigation design element, key data, graphs
and data tables. Make sure you use the correct type of card for each element.
Dashboard card allows the user to decide which data they want to focus on.
Easily understood UI which allows the user to control exactly which data
needs to be front and center in the dashboard.
Only include the most relevant information and for your users, at least in the
initial screen. When you have datasets that are easier to understand when
seen together, find ways of presenting them in a single card. But be careful
not to confuse the user.
Daily activities card (Kanban):
Kanban task cards seem like a pretty straightforward thing — take a sticky
note, write what you need to do and put it on the wall. These cards must
contain the number of units that need action. They also likely contain a
variety of other information that clearly conveys what must be done.
The information contained on the card includes the name of the task and
important details like what type of task it is and who owns it. Kanban cards
are placed under status categories. The most basic status categories are “To
Do”, “In Progress”, and “Complete”, but statuses may vary project to
project.
The card structure is best for small changes like adding or deleting tasks
rather than changing big picture ideas like your overall goals.
Conclusion
Cards can be designed more effectively in several ways. By initial defining
and observing cards, we got a better idea of what this design pattern looks
like across industries. It also allowed us to make some speculations as to
what actions users are wanting on these cards. Cards work especially well in
contexts where they provide summaries of many different kinds of content,
rather than when simply used as a modern-looking replacement for a list of
content.
Sidebar
Some interesting types of sidebar navigation.
A sidebar is a tremendous, efficient, and important part of the website
navigation design. As a rule, it is a component with typography, shading
range, or symbols and shows up by the side of the fundamental content—
either on the left or the right, depending upon the site design and formation.
Ordinarily, sidebars on the left extension the most consideration and guide
the clients all the more successfully due to visual propensity and client
conduct, while sidebars on the right can make a more valuable order since
they are viewed as auxiliary.
For certain forms of websites and styles, vertical menus will do over add a
touch of visual spice to your website; they’ll additionally improve the user’s
browsing skill and create your site easier to navigate.
Best Practices
Few tips to make the sidebar navigation easy to scan or less frustrating for
the users.
1. Use the logo
The brand logo is particularly reliable for the visual side of the sidebar,
however, it is often also functional as it is used as a hyperlink to the main
screen of the app.
2. Add the relevant icons to the links
By adding the relevant icons to the links, we speed up the visually scanning
of the navigation and its legibility.
3. Indicate the currently active link
Emphasize the active role on the navigation bar to make it easier for the user
to understand his current position in the app.
4. Differentiate group links
If your app comprises several tasks and subpages, it is worth grouping them
to improve the significance of the hierarchy of some functions and their
readability.
5. Use badges & tooltips to collapsed the sidebar
If you have a shortened navigation, it is worth adding a tooltip after hovering
the cursor over the link so that the user knows what the subpage is
responsible for. And also badges can be placed with links for any
notifications.
Conclusion
I don’t believe that you should follow strict rules for a good design but there
are always “guidelines” for you to create better designs. This series is one of
those guidelines and I hope you’ve enjoyed it.
Bottom Navbar
Important points for creating a navigation system.
There are considerable ways in which you can style, list, and showcase
your app menu or navigable items. One of the popular styles is the bottom
navigation bar.
It has elements named as icons, sometimes accompanied by texts, that are
well-known and important enough to be highlighted. Upon selecting the
bottom navigation bar icons, users can switch to a chosen view or refresh the
currently active view.
This brings their app usage experience smoother and expedites navigability.
It also makes the app content more discoverable, thereby giving a boost to
engagement, interactions, conversions, responses to CTA buttons, and more.
Why do we need a Bottom Navigation Bar?
The user can check which screen are they on at the time.
It allows the user to change to distinct activities/fragments easily.
It makes the user informed of the different screens functional in the app.
Importance
The bottom navigation bar aligns with the “thumb rule of design”. It acts on
the principle, that most app users scroll and navigate apps using their
thumbs. Hence, the primary and significant screens and pages within an app
should be easily accessible by a user’s thumb.
This exhibition makes the bottom navigation bars a more important aspect of
app design. It settles most of the essential sections of the app within the
reach of the users’ thumb, thereby making it more convenient.
Instead of using just the hamburger menu, or any other menu design, one
must also add the important items at the bottom of the app, in an easily
navigable format. This bottom navigation bar can be kept constant across
multiple or all screens on the app.
The Anatomy of bottom navigation bar
The layout or structure of a standard bottom navigation bar:
Container: It used to display destinations.
Active Label (Optional): The active label in navigation is the current screen
or the one that the user clicks to go to.
Inactive Label (Optional): Every other icon or label remains inactive on the
navigation bar.
Active Icon: As icons are pictorial representations, they catch the attention
of the users faster than text. It indicates current active page.
Inactive Icon: Out of emphasis but noticeable.
Sizes
While the shape of icons relies upon their design, the format should show
consistency. The mean size of the icons should also ideally remain similar.
The size may increase for active or pressed labels, to make it more unique.
The length, height and width can be specified accordingly.
Best practices
Bottom navigation should let users get to the most important, or most used,
features of the app. Simply remember these things:
1. Use 3–5 Destinations:
Make sure to use only 3–5 top priority destinations in the bottom navigation.
Using more than 5 will leave you cramped for space, the tap targets will be
very close to each other — and the users might end up tapping the wrong tab,
which will only add to their frustrations with your UX.
Not to mention, every additional tab only increases the complexity of your
app, compromising its performance.
If your app contains more than 5 important destinations, consider using a
Google-like hamburger icon or place them at other easily accessible
locations.
2. Don’t Use a Scrollable Navigation Bar:
It’s easy to think using a bottom navigation bar that’s lets users scroll
through all the important destination is your solution (if you have more than
5). But, it’s not!
More often than not, users don’t realize the navigation bar has the option to
scroll and never see the features that side of the screen.
3. Consistency:
By using icons that are this consistent you clearly communicate to the user
that you’re a professional who cares about user experience at far finer levels.
By being aware of them and by making them more consistent you bring the
app closer to the heart of the users.
4. Avoid multiple colors:
Avoid using different colors for different icons as it may lead to confusion
and users may fail to tell apart active destinations from in-active
destinations. Use proper opacity to enhance the visibility of the icons.
The color scheme used on your bottom navigation bar should agree with the
overall theme of your app. The icons and text labels for active and inactive
destinations must have a distinct contrast.
5. Don’t truncate or wrap texts:
Text labels should give quick and meaningfully explanations to navigation
icons. Avoid long text labels as they do not cut short or wrap.
Conclusion
For providing the perfect user experience, you need to put a lot of ideas into
your bottom navigational bar. And, yes, there should always be a bottom
navigational bar, if you want to make the app easy to use for your users.
The bottom navigational bar should be designed in such a way that its:
Simple: it should lead to where it says it would!
Clear: the tabs are recognizable and easy to tap.
Well picked: choose only the features that enhance UX.
Making it easier for users to navigate through the app should be the highest
preference for an app’s design.
The simpler your app is to use, the more likely it’ll be used.
Links
Usable hyperlinks are the signs of a good user experience.
Links are one of the most important interactions on the web. In addition to
reading, scrolling, and writing, they are deeply ingrained in the way we use
any website. Think about it: How did you get this article? By clicking on the
link. How did you go to the website before? As we know, these links are
connected to the Internet.
In HTML, each link is marked with an anchor tag <a>. The browser comes
with a standard user agent style sheet, which makes the link blue and
underlined. Since all browsers use the same template, users should be aware
that this style represents a link. Based on this paradigm, we can use it to help
users navigate our website.
Why is it so important?
Links are the most basic interactive component between users and web
pages: the user clicks on a link and then opens another web page. They are
important, but they are easily lost among more and more people. More
concise UI elements such as web forms, animated tooltips, and call-to-action
buttons. Links are so common that we often ignore them in projects.
Creating internal links to your website can help you optimize content in
search engines. The SEO of this topic as a UX design directly affects the
SEO of your website. Some of the key factors that can affect the SEO of
your website are page speed, mobile compatibility, and most importantly
link structure. It also describes the structure of the link to your website and
whether it is user-friendly.
Usage and types of links
Usually, anything that can be clicked is called a link, whether it is text or a
digital image. In addition, the links can be of different types.
Navigation Links: Mainly called hyperlinks, they are used to navigate
between different parts of the page without starting a new task.
Command Links: Mainly referred to as text buttons used to execute new
commands. Usually used for less important commands.
Definition Links: links that are more valuable than command links.
Home link: As the name suggests, the homepage link allows users to return
to the homepage by clicking on the website’s logo or slogan.
Three States of link
The same link follows three stages:
Normal: Standard link or you can say that this is an unvisited link.
Hover: Hover link appears when the cursor hovers over the link.
Visited: As the name suggests, a link that someone has visited.
When to use buttons or links?
There had been clean variations among hyperlinks and buttons returned to
the sooner level of the Internet.
Buttons have been used in applications that allow users to immediately take
actions that change the backend. Links are used in websites to allow users to
navigate to another section or page.
Buttons vs links
First, you want to think about the main tasks you want users to perform on
each screen. It should be a button. The more important should be more
conspicuous. We call this action the primary call to action. There should be
only one on each screen.
You should never use links to change the state of an application. This means
that clicking the link should not add, change or delete any data on the screen.
The delete operation should not be a link or save operation.
But in the past decade, the distinction between links and buttons has become
increasingly blurred. As the website provides more and more functions. You
can also find links for commands and buttons for navigation.
The Problem with Default Underline Links
Underlined hyperlinks affect readability because certain characters that are
located below the basic characters and have descendants under the underline,
such as p, g, j, and q, are affected by the value of the CSS property textdecoration: underline.
For example:
You cannot fully control the style of the underline, but you can set the
bottom border, for example, simple border-bottom: 1px solid #2159AD; to
create a brighter and more attractive underline that is still clearly visible.
For example:
Common points for better links UX
The idea is to use links on the website so that users can use them, but users
do not use these links. Therefore, it is also important to use links to ensure
their availability.
1. Make meaningful text links instead of just “Click here” links.
2. Define better-visited links. On Google, visited links changes the colour
from blue to purple.
3. Highlight to the users that it is clickable.
4. Use a pointing arrow or hand to elaborate the link.
5. Blue is the standard choice or blue represents a link, you can also try
different colours but it should look like a link.
6. Add underlines or other non-colour indicators to help colourblind users
who may not see colour.
7. Do not reveal a link on hover. Instead, make a better transition on hover.
Conclusion
This brings us back to the guiding principle of link design: consistency.
Follow the established template guidelines that have been applied around the
blocks and create your templates by carefully applying them in your design.
We have seen many benefits and links in the content. One is from the
perspective of user experience and the other is from the perspective of
marketing. Both contain priority factors.
Slider
Allow users to make selections from a range of values.
A slider is a user interface element that represents an volume slider or
control. It allows the user to move a knob or bar from left to right and vice
versa in a straight line.
The slider provides excellent navigation for websites and applications where
there are only a few elements to explore. The slider feels natural to the user
and provides a fun way to change settings or explore features.
The slider is easily recognizable to the user, making it easy to use and
making them a very practical choice for designers to explore.
Benefits of slider
The sliders are easy to understand and learn.
It makes them feel intuitive.
Touch devices with small screens and sliders are great choices because they
don’t take up much space.
Sliders help users move next and back, increase speed or volume, and create
a sense of urgency.
Problems with slider
When users use sliders, they often do so when they are distracted or in a
rush, which often means the slider is pushed too far in one direction while
trying to lift their finger from the screen.
With too much pressure, it can be difficult to get your slider to work the way
you want it to.
Senior users with shaky hands may have difficulty with sliders. When using
a slider, it is difficult to guarantee an accurate result. In these cases, users
may feel helpless while trying to navigate the website.
Issues with usability
After you’ve researched your audience and decided that using a slider might
be appropriate, think about your composition. Touchscreen users often use
their thumbs when working on their devices.
Therefore, it is important to examine the area of the screen that will be
occupied by the user’s finger or thumb. This will help you position the slider
on the screen so that it is easy to use or manipulate.
The layout on the screen, where the user will use the mouse to move the
slider, is different from the layout of a touchscreen device. With a
touchscreen, you want to limit the chances of errors, click alternative links,
or hide instructions while the user puts their finger or thumb on the screen.
Make a positive visual impression
If you have a large amount of content that might be “too much information”
for your readers to discover or assimilate, you usually use sliders to present a
series of visualizations to your users.
A series of events that users can follow to purchase products on an ecommerce site, a set of clear visuals that guide the user through the
experience can be useful and undemanding, saving the user time and making
the site easier to use. This process can be used in a variety of situations to
help users navigate a website or mobile application.
Exact value or random?
It can be difficult for users to use the slider correctly, which is especially true
for touch devices. It’s very difficult to be specific with a small pin on the
screen. The value is not important to the user. If the user can use the slider to
share the approximate value, this is usually sufficient.
If your users need an exact value when working with a slider, you can create
a slider with an editable numeric value. However, if the UI requires an exact
value for ease of use, it may be more helpful not to use the slider.
Selecting the range?
Creating a specific area helps users avoid running out of answers. Smaller
search results usually provide fewer items, while larger search bars provide
more items.
However, your users won’t unnecessarily limit your options. They also
won’t be disappointed with the many options they can’t afford.
Allow users to explore your app even if they don’t understand the slider and
the volume you’re offering users.
Provide feedback
Provide instant visual feedback when your users use a slider or insert
information into an edit box.
You can use animation, scrolling or movement to communicate with your
users. These features will grab the user’s attention and create
communication.
Dynamic sites are always attractive. When you create visual comments, your
users will feel recognizable. This creates a sense of confidence in their
ability to navigate your site.
The wrap up!
Use the slider only when the exact value is not important to the user, but
only an approximate range. Make sure the user can select this range
correctly without trying too hard to get the correct value.
Also, any label sliders should appear above or near the slider, rather than
below it, so that they remain visible while the user selects a value.
Also, consider another UI element that allows users to click or even enter
text to indicate their choice.
Favorites
The user want to select items to consume later.
It’s natural to want to remember things. We’d like to know what we seen
and where it occurred. This problem predates computers and mobile phones,
and we’ve tackled it in a variety of ways. From writing on walls to carving
in wood to scribbling on a napkin or a post-it note, there are many ways to
express yourself. They all do the same thing: they promote us in
remembering.
Favorites can help users make sense of large amounts of data and allow
aspiring users to collect knowledge from people they like.
Favorites are an easy way to distinguish preferred content from nonpreferred content. Favoriting can be done in a list view or in a detailed view
of the item itself.
In one of the item’s top corners, the outline of a quick favorite link (typically
a star or heart) can be seen.
When you click on your favorite link.
It has been highlighted, and the item has been chosen as a favorite.
When to use
When your app contains a big number of content items and you want the
user to be able to distinguish between them, utilize this pattern. Provide a
quick favorite link adjacent to the list view item. You can also give a list of
only favorite items, which can be accessed via a menu item.
When trying to distinguish between numerous categories, avoid using
favorites. Instead, you might use tags or folders.
Ok:
A simple one-step method for distinguishing a huge number of items.
Not ok:
There is only one level of differentiation.
There are no options for adding metadata to a favorite.
Bookmarks
This is where the bookmarking feature comes in, allowing users to easily
remember information for later use. This is especially crucial if you’re in a
constrained setting. This was built into the web from the start. Every piece of
information that is published has a unique address — URL — that serves as
a reference and is all you need to know to access it at any time.
We can recall thanks to modern operating systems and extensively used
sharing tools. Furthermore, there are sites such as Pocket and Pinterest that
essentially address this problem for the user; nonetheless, it is occasionally
preferable to keep them a little closer to your chest.
Wishlist
Using the terms “favorite” or “bookmark” may not always be the most
appropriate. You might want to accumulate items in a Wishlist in an ecommerce experience, for example. It’s possible that the pink running shoes
aren’t your favorite pair, but you require them, so you add them to your
Wishlist. Keep in mind the context… perhaps it should be called a shopping
list?!?
Make it very clear
Make the favoriting action prominent and noticeable if it is something that
users are normally interested in. Make it easy to find if it has a lot of value
for the user.
If favorites are so important to the user experience, you’ll want to make sure
they’re easy to find. You could fill it with content when you first start off,
but that isn’t always a smart idea; you want the user to do it. It’s a good idea
to explain the topic now, while the user is still in context. Make use of copy
and images, and explain how the bookmarking process works effectively.
Things to remember
Maintain a steady tone of voice. Don’t refer to it as “favorite” in one
location and “bookmarks” in another. It may seem obvious, but you’d be
surprised how many product developers ignore it.
The star and heart icons work well together. Stay constant rather than mixing
and matching. Make sure the action button’s status reflects whether the
content was added to favorites or not.
Provide the user with feedback. In certain circumstances, a brief nonintrusive notice such as ‘Added to favorites’ may suffice.
Tooltips
Provide suggestions about an item
Tooltips are small UI elements that users encounter on a web page or
application when they hover over other elements on the page. As the name
suggests, Tooltips provide suggestions about an item or process on apps or
web pages.
In other words, Tooltips are text boxes that display a brief explanation of the
elements of an application or web page.
When thinking about an optimal UX, a good tooltip design can have a big
influence on which users understand your features and end up being
successful. Conversely, poor tooltip design presents tooltips as irritating and
loses all credibility.
The problem with tooltips
While they allow you to squeeze additional information onto the screen, they
have a number of issues.
#1. They are difficult to spot: Some users won’t notice a clue, which means
there is a high risk that they will never see the content on it.
#2. They obscure the screen: You cannot read the hint and use the rest of the
screen at the same time.
#3. Can be cut into small screens: As the tooltips overlap, they can be cut out
by smaller windows.
#4. Hover content viewing is inaccessible: Hovering is not always the
intention to trigger a check. The user can move the cursor over a suggestion
that accidentally triggers it.
You can provide a comparable experience for keyboard users by displaying
the index in the foreground. But this is unconventional and still excludes
touchscreen users.
Possible Components
Copy: Tooltips can contain a header and body text, or just body text. For
smaller tooltips, skip the formalities and go straight to the body of the text.
Exit: When a user closes the tooltip message. This can be as simple as an
“x” or “close” button, or it can be activated from a user interacts with a
certain item.
Progress Bars: Tooltips that are part of a multi-product can include a
progress indicator to let users know where they are in the process.
4 Simple Rules For Better UX
1. Treat every tooltip like a rub — you’re asking your users to read
something, so make sure they get immediate value from that information.
Also pay attention to the copy. Make it clear, concise and relevant for each
step of the user journey.
2. Explain only the things that are indistinguishable from the interface /
design.
3. Make suggestions as contextual as possible — trigger them based on user
actions and display them to the most responsive group of users. Also, make
sure they are accessible to users who navigate your website using a keyboard
and screen reader.
4. Show them one at a time and don’t show more than 3–4 in a row. Users
tire quickly and need time to act / digest what you have taught. As with
everything else, analyze them and try them out!
Conclusion
To say that tooltips are paving the way for a bad user experience is just a
flaw. If you know how and where to use tooltips, they will help you deliver a
great user experience.
Keep in mind that tooltips are primarily about efficiency. They should be on
your app or website to make it easier for your users.
Testimonials
Testimonials can help you acquire that trust.
Before hiring or purchasing from you, most prospective clients who are
unfamiliar with your products or services will want to make sure that your
organization is a good fit.
As a result, a testimonial page is critical to the success of online initiatives.
Real reviews from current or past clients are one of the best methods to
make your testimonial page stand out.
Client testimonials will act as social proof, demonstrating to potential buyers
why your product is superior to the competition.
The essential information
First and foremost, we must go through the fundamentals. When writing a
testimonial, we should always provide as much information about the client
as feasible.
Always mention the person’s name, title, and company. A image is a
fantastic method to enhance these traits. Putting a human face on your
testimonial always makes it more relatable to users.
Using visuals to reinforce your message is a good idea.
Adding visuals to your testimonial page, such as pictures and videos, rather
than just text, will increase engagement and conversion rates dramatically.
Adding videos and other visual content to your customer testimonials page
will undoubtedly make your reviews more attractive, resulting in a higher
conversion rate.
Maintain an honest tone.
Make sure you only use genuine testimonials — if someone discovers you
used a dishonest recommendation, it could come back to hurt you later.
It has the ability to rob you of all credibility and destroy your reputation
more than good. Furthermore, rather than making up a moniker, use your
clients’ initials if they don’t want to give their full names.
Client Testimonials That Work
Each client is unique, and their interactions with your business will differ.
Some may take the time to provide feedback and share personal tales about
their experiences with your company, while others will remain silent or
make generic comments like “excellent service,” “excellent job!” and so on.
You should include testimonials on your page that relate to the requirements
of potential buyers, such as testimonials that show how your products or
services helped your clients.
Optimized For Mobile (Responsiveness)
Tablets and smartphones have become popular devices for conducting online
research. Because mobile devices account for more than 48% of all internet
traffic, and this number is anticipated to rise in the future years.
If you don’t have a responsive testimonial page, it’s possible that up to 50%
of your visitors won’t be able to see it.
There’s no denying that a large proportion of potential clients will access
your website from their mobile devices.
As a result, it’s crucial to make sure your testimonial page and other key
product pages on your website are mobile-friendly.
Make the material on your website easier to read and digest on mobile
devices by using images and other intriguing graphics.
Provide a link to a relevant source.
Your client testimonials will be more credible if you link to external and real
part. Your testimonial marketing campaign will be more effective if potential
buyers can obtain more information about your items or services.
If you think a review is important to include on your testimonial page, make
sure you have enough information or proof to support it.
Concluding 7 tips:
Here are some recommendations and ideas you may utilise when developing
and designing your own testimonials page:
Request specific numbers from your customers to indicate how you
benefited their work.
Allow visitors to filter testimonials so they can locate the most relevant one.
Use the highest-quality images and videos.
Demonstrate how your product works instead of just using quotes.
Experiment with different layouts — testimonies can be created from tweets
and other social media posts.
Display real-life consumer faces and their current position or occupation.
Make it simple for more customers to leave a review.
Empty States
Creating UX friendly empty states screens.
Empty states are screens in your UI that are not yet full of information. That
is to say, they are screens which will eventually have content on them when
the user populates them.
If you’ve ever used an application that allows you to add favorites or items
to a cart, for instance, you might be familiar with an empty state. Or maybe
you’ve completed a search that returns no results.
Some Best practices for designing empty states:
Guide the users
Don’t leave users hanging. Help users to understand or get started with a
new product.
You can put a call to action button on your empty state screen.
A good call to action asking your user to add their own tasks can keep them
engaged and in your app. Your call to action basically tells the user how to
turn that empty screen into a filled screen.
Suggest Alternatives
If a user searches for something that does exist, provide close matches to
what they are looking for.
We give users a chance to explore other sections when they encounter an
empty state in one section.
Provide Starter Content
Populate empty states with content to allow users the opportunity to learn
and use your product immediately.
Apps which store content like music or books, or use templated content like
notes or documents can benefit from starter content. Giving your user the
ability to change the starter content is a way to maintain engagement because
the user is making the app their own.
Add Personality
Add personality by using friendly and sometimes humorous but keep the
user goal and context in mind.
But your empty state is a small instance where you can inject some
personality into your product. Personality doesn’t automatically mean funny.
When adding humor into your UI, use it with caution. That one line quip
might be fresh today but tomorrow can leave a stale taste in the UI after it
becomes exhausted.
Use Illustrations
Combining straight forward copy with fitting illustrations creates a better
empty state.
Empty states are a way to improve the user experience of your product and
illustrations helps a lot. It encouraging users to interact with your app.
Onboard Screens
A guide to creating friendly onboarding screens.
Onboarding is a virtual unboxing understanding that encourages users to
get started with an app. The user onboarding experience is the first user
experience a person has when they download your application and use it for
the first time. It is a brief walkthrough that illustrates how to use the main
features of the application in short, simple steps. The main fact of a user
onboarding cycle is to improve user activation and user retention.
Goals:
Welcome users and fascinate them about the experience ahead.
Help users implicitly or explicitly understand how the app can be used in
their lives.
Drive users to take actions that increase engagement and retention in the first
seven days.
Some basic practices of user onboarding:
Show onboarding to first-time users
First-time users should be met with the onboarding to help ease their
experience into the application features.
Use Illustrations
Visual content is processed faster than textual. Use illustrations to allow
users to easily understand application features. Or use a photo to visually
reinforce the context you want to convey to the user.
Show progress indicator
Users need to know where they are in the onboarding process and how long
the process will take.
To make the process as useful as possible, create indicators of the current
step and show them how many left.
Don’t use many screens
Using 3–4 screens is enough to give the user a quick insight into the
application/product features.
The number of steps should not exceed 4 (maybe 5). Too many steps may
frustrate the user, which may result in closing the app.
Use good copy
Make your onboarding copy short, super helpful and straight to the point.
Your content should contain all the necessary information about the current
step and it should be short and logical.
Allow users to skip the process
Note that not all users first time or returning are willing to go through the
entire onboarding process, allow them to be able to skip.
If you want your onboarding screens to be user-friendly. Let them skip this
path.
Dark mode
Cool Tips for Better Dark Mode Design
We interact with apps and read websites all day and night. In some cases,
white screens of the digital solutions may be inconvenient for our eyes.
That’s why more and more designers pay attention to make their creations in
two themes — light and dark.
Dark mode has got specific rules that we should follow to make it natural for
the users. This story contains all of them, so you can create a theme that
brings positive experience.
Pros of Dark mode :
It reduces eye strain.
Dark mode saves energy on high energy-consuming screens like — OLED,
AMOLED, etc.
Battery efficient.
Enhance accessibility for users.
Create an impression of luxury.
It looks stunning
Cons of Dark mode :
In bright light conditions, it sucks, causes more eye strain.
This is a bad example of dark UI screen. We are going to follow some cool
tips to improve and make better dark UI screen.
1. Avoid 100% Black Background (Up to you)
This is the common mistake we all made. We should use a very dark tone to
the background. I prefer to use dark grey — rather than black.
But sometimes black is fine.
I personally use for dark mode these colors — #0e0a1b & #04020f.
2. Avoid 100% white as well
Avoid using #FFFFFF in your dark mode UIs. It causes really large contrast
with the background, so its better to use light versions for example #F6F6F6
or #FAFAFA etc. Its better for the eyes.
3. Contrast & Accessibility
There are specific guidelines for dark themes to be applied if you would like
to make the solution more accessible. The most important one is the
following: the contrast level between body text and the background should
be at least 15.8:1.
Its easier to forget about contrast when working on both light and dark
themes. Always double check contrast ratio to make sure UIs are accessible.
4. Avoid shadows
Avoid using white shadows to elevate stuff, it looks bad. Instead create
elevation system based on different opacities of white or other colors.
In light User Interfaces, we tend to use subtle shadows to communicate
depth. However shadows are not so visible on the majority of dark mode
elements. This is why they should be used less frequently. There is another
way to communicate hierarchy.
5. Desaturate colors
Dark modes should avoid using saturated colors. The first reason for this is
accessibility — saturated colors do not pass WCAG’s standard of at least
4.5:1 for body text against the dark background.
Saturated colors may also cause eye strain, causing optical vibrations against
the background.
Conclusion
Dark theme (or mode) is now popular. All major platforms started to support
that, and users will demand from the solutions to implement that. This is the
best time to learn the principles and start creating a dark theme for your
projects.