uxpeak.

com

The UI/UX Playbook

Tips & Tricks for Exceptional Design

Pe r s o n
al Acco
un t

Paymen
t card
12 34
12 34
12 34
12 34

$ 2,987
3
.05
J ohn oe
Por tfoli
D

o
12 2022
/
Vie w yo
ur po
a c ro s s d rt fo li o d ive rs ifi
if fe re n t ca
Send a s s e t c la ti o n s
sses.
Reques
t
C ontacts

See all

Add new Portfolio

Daniel S
. M ina P.
aura . $129,987
.0 5
L
L
Jessy .
Transac
M

tions
See all
Kai Fish
e r
17 Nov 2
022
- $48.29
Starbuc
ks, New
16 Nov 2 York... 2 5%
022
+ $13.20 Cash 15%
Bonds 60%
Cash

Your inv
estments
See mo
re
Nike Inc
100 share
Pauline s at $70
$14,000
+ 100%
Enhance UI with Visual Hierarchy and
Contextual Cues
In many UI designs, crucial information such as data points, and options are presented
without clear distinctions. This often leads to a flat and monotonous visual landscape
where users may find it hard to discern or prioritize information. Visual hierarchy, a vital
principle in design, involves structuring and prioritizing elements to guide the user's eye
movement. By manipulating the color, size, position, and contrast of various elements, you
can effectively highlight key information and guide users through the interface intuitively.

Luxury 5-Bed Villa

£3,273,279 For sale
Type: For sale
Luxury 5-bed Villa
Price: £1,273,279
29 Terrace Rd, BH2 5EL
Location: 29 Terrace Rd, BH2 5EL

Size: 1634 sqft

1634 sqft 5 bed. 3 bath.
Bedrooms: 5

Bathrooms: 3 Jennifer Bloom

+44 235 123 321
Contact person: Jennifer Bloom

Phone number: +44 235 123 321

Reimagining UI: Embracing Visual Cues, Hierarchy, and

Icons
The design on the left presents a fundamental flaw: it over-relies on label:value fields,
assuming that the data – such as price or name – would suffice for the user. This may seem
like an efficient approach; however, it creates a monotonous, flat experience due to the lack
of visual hierarchy, differentiation, and icons.

In contrast, the second design dismisses explicit labels and instead uses visual cues,
hierarchy, and icons to present the information. This is powerful because it leverages
visual storytelling to guide the user's attention across the interface.

uxpeak.com
Innovative Form Design Inspired by the Final

Display

Forms are the critical touchpoints where users share their information, preferences, and

needs. Yet, they often get overlooked as dull or mundane aspects of design. But what if we

could turn this perception around? What if we could transform the form-filling process into

a journey that is interesting, intuitive, and aligned with the user's goals?

Final Display

Create new listing

Item Name

Add an image

Price

Item Price
Description
What are you selling? $0 New Toyota Rav4 Hybrid
$32,034
A 2023 Toyota RAV4 Hybrid, an eco-friendly, sleek
Description
SUV offering powerful performance and unmatched
Categories fuel efficiency. Don't miss the opportunity to own
Describe what you’re selling in more detail...
this vehicle known for its comfort...

Posted 1 day ago

Location

Location

Enter your address Manchester, UK View map

Images

Browse
Add tag hybrid car Toyota SUV

A brilliant way to revitalize form design is to take cues from how the submitted information

will be displayed or used.

Suppose you're designing a form for a marketplace platform where users list items they

want to sell. Instead of a standard, linear form, you could design the form layout to mirror

the final listing page.

If a user is listing a car, for instance, they could input the car's name, price, description and

location in fields arranged similarly to how the information will appear in the final listing.

This approach gives users a sense of how their listing will look and function, making the

form-filling process more relatable and engaging.

uxpeak.com
Design for the Thumb Zone
The thumb zone is a term used in mobile Hard
interface design that refers to the area of the
screen that is most easily reachable with Stretch Hard to reach
one-handed use. By placing important
Stretch but okay
elements such as buttons, menus, and other
controls within this zone, you can improve Easy
Easy to reach
the user experience and reduce the likelihood
of user errors. Hard

The Importance of CTA Placement in the Thumb Zone

9:41 9:41

Sign In

Your perfect home is just a

search away!
Your perfect home is just a Explore a wide array of properties right at your
fingertips.
search away!
Explore a wide array of properties right at your
fingertips. Sign In

Sign up Sign up

In the first screen, the CTA is located outside of the thumb zone, which means that users
would need to stretch or adjust their grip to reach it. This can cause frustration and
inconvenience, especially for users who are on the go or have limited mobility.

In the second screen, the CTA is thoughtfully positioned within the thumb zone, which is
a common area where users' thumbs naturally rest when holding their mobile devices. This
placement ensures that users can quickly and easily interact with the CTA with just one
hand, making it an excellent choice for mobile design.

uxpeak.com
Optimizing User Interactions: The Significance
of Tap Target Size in UI Design
Have you ever found yourself frustrated, repeatedly tapping a tiny button on a mobile
screen that doesn't seem to respond? You're not alone. Tap targets are the interactive
elements on a touch screen that users tap to perform actions. They can be buttons, links,
or icons. Tap target size plays a critical role in mobile UI design, impacting the user
experience significantly. If your tap targets are too small, users will struggle to interact with
your design, leading to frustration and potentially causing them to abandon their task.

4px 24px

Cancel Send
48px Cancel Send

Incorporating Tap Target Size Best Practices

As a general rule, the recommended minimum size for a tap target is 48 pixels square for
mobile interfaces, according to many accessibility guidelines. This size is based on the
average finger pad size and allows comfortable interaction for most users.

Also, ensure there's adequate spacing between tap targets to prevent accidental taps.
Smaller elements, like 24px icons, should be spaced at least 32 pixels apart, allowing for
easy and accurate tapping.

uxpeak.com
Turning Empty States into Opportunities
In the realm of UX/UI design, empty states – those moments when there's no content or
data to display – are often overlooked. They can occur when users are first navigating a
new feature, after clearing a list, or when no search results are found.

Traditionally, these spaces might simply display a generic message such as "No results" or
"No items here." However, this approach misses an opportunity to guide users, create a
memorable experience, or initiate an action.

You have no projects! Start managing your projects

Invite team members to collaborate on a
project for better communication

Set deadlines for tasks to keep everyone on

track

Create project

Turning Emptiness into Engagement: Maximizing Empty

States in UI Design
Adding visuals to your empty states can transform a potentially disengaging moment into
an enriching one. Illustrations, icons, or even animations can add interest and context.
They not only alleviate the emptiness but also add a level of delight to the user's experience.

Empty states shouldn't just denote the absence of content - they should inspire action.
Include a clear, straightforward call-to-action (CTA) that guides the user towards the
next step. Whether it's guiding a new user to create their first list, suggesting potential
search terms, or offering the option to undo the clearing of a list, CTAs can turn a potential
point of exit into a path of continued engagement.

uxpeak.com
Getting Creative with Radio Buttons
Radio buttons have been a long-standing staple for presenting a list of selectable options.
However, the traditional approach of a vertical list of text-based options can sometimes
come across as bland and unengaging. The standard layout offers limited opportunities
for visual differentiation, and while it provides clarity, it doesn't always contribute to a
memorable user experience.

Basic - 10 credits (£5/month)

Economy - 50 credits (£10/month)

Pro - 100 credits (£15/month)

Basic Economy Pro

10 credits 50 credits 100 credits

$5 / month $10 / month $15 / month

Rethinking Radio Button Interfaces: The Power of

Selectable Cards

What if we could break free from the constraints of the typical list-of-options layout? An
exciting alternative is to reimagine radio buttons as selectable cards.

This approach adds a new layer of interaction and visual appeal to the user interface. Each
card can feature labels, colors, and even icons or images, providing more context and
richness to the choices presented. Such an approach not only increases the aesthetic
appeal but also aids in making the information more digestible and the interface more
engaging for users.

uxpeak.com
 Elevating Dropdown Design: Enhancing Top
Navigation with Visual Elements

Top navigation dropdowns are a fundamental part of many website designs. They help
users navigate through the site, offering an intuitive way to access different pages or
features. The design of these dropdowns can significantly impact the user experience, as
they can either simplify the navigation process or confuse and frustrate the user.

Home Products Resources Pricing Home Products Resources Pricing

Blog
Blog - The latest industry news, updates
The latest industry news, updates and
and info. info.

Customer stories - Learn how our Customer stories

customers are making big changes. Learn how our customers are making big
changes.
Video tutorials - Get up and running
on new features and techniques. Video tutorials
Get up and running on new features and
Documentation - All the boring stuff techniques.

that you (hopefully won’t) need.

Documentation
Help and support - Learn, fix a All the boring stuff that you (hopefully
won’t) need.
problem, and get answers to your
questions. Help and support
Learn, fix a problem, and get answers to
your questions.

All resources

Adjustable Input Field Lengths for Optimal UX

One method to improve the UX is to include icons in your dropdown menus. Icons serve as
visual aids that can quickly communicate the purpose or content of a menu item. They not
only make the dropdown more attractive, but they also increase its usability.

Each item within the dropdown should ideally have a short, descriptive title, followed by a
more detailed description. This structure, similar to a headline and subheading format,
immediately gives users a high-level understanding of what the item is about and then
offers additional context as needed.
uxpeak.com
Advancing Dropdown Design: Incorporating
Images and Column Differentiation

Elevating your dropdown design could involve the thoughtful incorporation of images.
While icons add a layer of visual interpretation, images take it a step further by providing
a more comprehensive visual context.

However, remember that less is often more. Including an image next to every menu item
could overwhelm the user and clutter the interface. Instead, strategically choose to
enhance only the items you want to highlight. These could be the options that are either
frequently used, or form a significant part of your platform's offerings.

Home Products Resources Pricing Log in Sign up

Resources Company Resources

Blog About us How to get started
The latest industry news, updates Learn about our story and our mission Jump right in — get an overview of the
and info. statement. How to get started basics and get started on building.
Watch video
Customer stories Press
Learn how our customers are making News and writings, press releases, Advanced features
big changes. and press resources.
Once you’re ready, learn more about
Advanced features advanced analytics, features and
Video tutorials Careers We’re hiring! shortcuts.
Get up and running on new features We’re always looking for talented Watch video
and techniques. people. Join our team!
All video tutorials
Documentation Legal
All the boring stuff that you (hopefully All the boring stuff that we Dan from
won’t) need. legal made us add.

Alongside using images, you can also experiment with visual differentiation within the
dropdown. One effective technique is giving a distinct background to one of the columns.
This can create a visual anchor, drawing attention to key options or features.

The use of a different background color can help this column stand out, guiding users'
attention to it. This type of visual differentiation is a powerful tool to emphasize specific
content within your dropdown, improving usability and user experience.

It's also beneficial to group related items under distinct categories. Each column within the
dropdown could represent a specific category. By grouping related items together under a
clear category, you help users quickly grasp the structure of your menu and find what they
need.
uxpeak.com
Clearing Up Ambiguous Spacing
When groups of elements are separated explicitly by borders, background colours, or other
visual cues, it's clear which elements belong together. However, things get trickier when
there's no explicit separation, such as in form design.

Contact Details Contact Details

Name Name

20px
20px
Surname
Surname 5px
20px

Street Address
Street Address

City/Town

City/Town

Occupation

Occupation

Images

Browse
Images
It's here that ambiguous spacing can lead to confusion. If the space between an input field
Browse

and its subsequent label is the same as the space between that label and the previous
input field, users might struggle to identify which label belongs to which field. This
ambiguity can frustrate users and potentially lead to input errors.

Clarifying Relationships with Proximity

To avoid such issues, you can use the principle of proximity, which is part of the Gestalt
laws of perceptual organization. Elements that are closer to each other are perceived as
related. Thus, by decreasing the space between an input field and its corresponding label
and increasing the space between different input fields, you make the grouping more
explicit. This design approach will help users intuitively understand the relationship
between the labels and their corresponding fields.

uxpeak.com
Enhancing Text Aesthetics
When it comes to text in UX/UI design, aesthetic enhancements are not just about beauty,
but also functionality. Optimal use of typography can create a mood, guide the user's eye,
and establish a clear hierarchy of information. In essence, thoughtfully designed text can
make an interface more engaging, user-friendly, and intuitive. It's not just about choosing
a beautiful font or a trendy color scheme, but considering how your text layout, size, color,
line spacing, and other typographical elements work together to create a harmonious,
readable, and attractive design.

Line height: 150%

Font-size: 22px
Font-weight: Medium
Colour: #000000
Font-size: 18px

Exploring the Land of the Rising Sun: A Font-weight: Regular

Journey Through Japan's Rich Culture Colour: #FFFFFF
Line height: 125% and History
Font-size: 13px Japan is a fascinating country, renowned for its unique blend of
ancient traditions and modern technology. From the bustling
streets of Tokyo to the serene temples of Kyoto, there's something
Font-weight: Regular for everyone in this diverse nation. One of the most striking
features of Japan is its deep reverence for tradition.

Colour: #000000
Learn more

Line height: 120%

Font-size: 28px
Font-weight: Bold
Colour: #141B12
Exploring the Land of the Rising Font-size: 14px
Sun: A Journey Through Japan's Font-weight: Semibold
Rich Culture and History
Line height: 160% Colour: #141B12
Japan is a fascinating country, renowned for its unique blend of
Font-size: 14px ancient traditions and modern technology.

From the bustling streets of Tokyo to the serene temples of Kyoto,

Font-weight: Regular there's something for everyone in this diverse nation. One of the
most striking features of Japan is its deep reverence for tradition.
Colour: #494D48
Learn more

uxpeak.com
Text Alignment Best Practices
Center-aligned text can add an element of formality and balance to your design. It's ideal
for headlines, subheadlines, and short blocks of text. Center alignment works well in these
contexts because the text is short, and the symmetrical layout can provide a visual focus,
making the content pop.

Share team inboxes Deliver instant answers Manage your team

Whether you have a team of 2 or 200, our An all-in-one customer service platform Measure what matters with easy-to-use
shared team inboxes keep everyone on the that helps you balance everything your reports. You can filter, export, and drilldown
same page and in the loop. customers need to be happy. on the data in a couple clicks.

When dealing with larger blocks of text (typically more than three lines), left alignment is
often the preferred choice. While center alignment has aesthetic advantages, left
alignment is typically more functional for larger text blocks due to its superior readability.

Since we read from left to right, left-aligned text provides a consistent starting point for
each line, helping users to read more quickly and comfortably. This alignment aids the eye
in moving efficiently, minimizing fatigue and enhancing the overall reading experience.

Connect with customers Connect with customers

Solve a problem or close a sale in Solve a problem or close a sale in real-time
real-time with chat. If no one is with chat. If no one is available, customers
available, customers are seamlessly are seamlessly routed to email without
routed to email without confusion. confusion. Whether you have a team of 2 or
Whether you have a team of 2 or 200, our shared team inboxes keep everyone
200, our shared team inboxes keep on the same page and in the loop.
everyone on the same page and in
the loop. Learn more
Learn more

uxpeak.com
Perfecting Payment Forms
At the heart of any successful user experience lies an often underappreciated hero: form
design. Far from a simple set of input fields, a well-designed form is a strategic tool that
guides users through critical moments in their journey, whether it's signing up for a service
or making a purchase.

Payment details Payment details

Card Number Card Number

1234 1234 1234 1234 1234 1234 1234 1234

Expiry CVC Expiry

MM/YY CVC MM/YY

Name on card CVC

John Doe CVC

Country Zip code Name on card

United States 12345 John Doe

Country

United States

Zip code

12345

Pay $65 Pay $65

Adjustable Input Field Lengths for Optimal UX

In one common approach, all input fields on a card payment page are designed to be of the
same length and are stacked one below the other. While this design might seem orderly, it
overlooks the fact that different data inputs have varying lengths. A credit card number, for
instance, is significantly longer than a CVV. When these different inputs are placed in
uniform fields, users may become unsure about whether they've entered their details
correctly, especially when shorter details don't fully occupy the given space.

A more user-centric approach is to adjust the length of each input field to match the
length of the actual input. On the card payment page, for example, the field for card
number would be the longest, while those for the expiration date and CVV would be
considerably shorter.
uxpeak.com
 P er so
n al A
cc ou
nt

Paym
ent car
d

1234
1234
1234
1234

$32,9
87.0
5
John
Doe
P o rt
fo li o
12/20
V ie w
22 yo ur
po r tf
ol io
ac ro di ve
ss di rs ifi
ff er ca ti on
Send en t s
as se
t cl as
se s.
Req
uest

Cont
acts

See
all

Add Port
new fo lio
Dani
el S.
Mina
P.
Laur $129
a L.
Jess
y M. ,9 87.0
Tran 5
sa ctions

See
all
Kai Fi
sh er
17 No
v 20
22
- $4
8.29

Starbu
cks,
New
16 No York 25 %
v 20 ...
22
+ $13. 15 %
20 C as h
60 %
B on
ds
C as h

Your
inve
st men
ts

See
mor
e
Pauline Nike
Inc
100 sh
ar es at
$70
$14,00
0
+ 100
%

Omar

Your Design Journey Continues

Are you ready to level up your design skills? Our UX/UI Design Mastery Course

is designed to transform you into a design expert as quickly and effectively as

possible. We've cut through the complexity to offer you a streamlined path to

success in the UX/UI field.

Exclusive Offer For You!

$20 OFF

With code: VIP20

Visit uxpeak.com ->