1

MODUL PERKULIAHAN

W182100017 –
UI/UX (LAB)
Kaidah Perancangan UI/UX

Abstrak Sub-CPMK

Ketepatan memberikan Sub-CPMK 5

penilaian dari sebuah desain Memiliki pemahaman untuk menilai
UI mengacu pada prinsip UX sebuah desain UI berdasarkan kaidah
dan UI design UX dan UI design : Studi kasus

Pengaplikasian UI/UX

Fakultas Program Studi Tatap Muka Disusun Oleh

14
Dr. Misbahul Fajri, ST., MTI
Ilmu Komputer Sistem Informasi
A number pad instead of a standard keyboard for entering numerical values, infinite scroll
for creating smooth flow on ecommerce websites, breadcrumbs that show a user’s path
from the main page to the current page ‒ these are a few examples of UX design patterns
we’re all familiar with.
Applied to user interfaces, patterns efficiently cut down on the time and effort needed to
navigate. While interacting with an interface, users associate unfamiliar elements with
things they’ve encountered before to built rapport with interfaces more rapidly. For
example, Skype’s status indicator resembles a traffic light, so it’s easy to quickly see
whether a user is offline or available.
Users expect familiar outcomes from each interaction, such as an infinite news thread that
continues to be displayed as they scroll down the page. Modern design patterns ensure
these expected outcomes. Every time users recognize a familiar design pattern,
their brains stimulate the production of dopamine ‒ a chemical that controls pleasure
centers and reward-seeking behavior.
Therefore, design patterns can stimulate dopamine production, both when a user notices
a familiar pattern and when that pattern works as expected.

The bottom line: UX design patterns offer familiar interactions so users don’t need to
analyze each interaction to navigate through a system. Design patterns reduce the time
and effort spent on each interaction and maximize reward.

2021 UI/UX (LAB)

2 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
How to Apply UX Design Patterns
There are plenty of established UX pattern libraries that contain neatly categorized UX
patterns. However, this doesn’t mean that you should use each possible pattern in your
layout. Patterns, first and foremost, are solutions to usability problems, so if there isn’t a
problem, you shouldn’t apply a solution.

1. Figure Out the Problems

Let’s say we have an ecommerce store with a high bounce rate. With the help of Google
Analytics, we’ve detected an issue: users leave the website during the checkout stage.
User feedback reveals that the problem lies in a long sign-up form that users have to fill in.
Our problem is clear, and we can proceed to the next stage ‒ finding out how other
websites deal with similar problems.

2. Analyze Similar Websites

Next, you should visit websites similar to yours and analyze their approaches to solving
this issue. For our example, let’s look at FeelUnique, Victoria’s Secret, and Walmart.
As we can see, FeelUnique enables sign-in with a social login. Newcomers can use their
Facebook, Google, Twitter, Instagram, or PayPal account to proceed to a short
registration form that’s already filled in with name, surname, email, and country. The user
only has to enter a zipcode to finish the sign-up procedure.

2021 UI/UX (LAB)

3 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Victoria’s Secret enables website visitors to check out with a PayPal account or an
existing Victoria’s Secret account. Or, users can check out as guests. Checking out with
PayPal is convenient: a user can sign in with an existing PayPal account and rapidly
share billing and payment information.
When we allow users to check out without signing in, it’s convenient for the very first
purchase. However, the next time those users go to the website to make a purchase,
they’ll need to enter their billing and shipping details from scratch, and their order history
won’t be saved.

2021 UI/UX (LAB)

4 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Finally, there’s the Walmart website that offers lazy sign-up among other sign-up options.
Lazy sign-up is a win-win: customers are able to browse the website, put items in the
shopping cart, and later sign up with minimum information, while the website receives a
user’s email address, which can be used for marketing and promotions.

2021 UI/UX (LAB)

5 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Our research shows that websites like FeelUnique, Victoria’s Secret, and Walmart use
lazy checkout, social logins, and guest checkout. These are three different design
patterns, and we don’t necessarily have to use all of them on our own website.

Learn how we helped our client integrate the social network and payment gateways to
simplify sign-in and checkout.

3. Analyze the Efficiency

During the next step, you analyze the efficiency of each pattern and find out which pattern
matches your website’s needs. In our example, our issue is website abandonment during
checkout. Therefore, our goal is to pick a pattern that will help us retain users and help
them complete orders.
After comparing the patterns, we detect notable differences. For example, PayPal
checkout and lazy sign-up both require a minimum of information to be filled in (such as
email and password). However, not all users have a PayPal account, and a lazy sign-up
requires no additional services to connect. Consider your users’ needs when choosing a
pattern.
Social login is a fast and convenient way to sign in: most internet users have accounts on
popular social media sites like Google+, Twitter, Facebook, and Instagram. Social logins
pull in key information about users including name, surname, email address, and mailing
address. This lets users fill in a minimum of information and quickly proceed to the
checkout.
Let’s say we’ve picked a social login to simplify the checkout process and retain users.
The final step is to look up websites that employ social logins, for example FeelUnique
and Asos.

4. Dissect the Pattern

The last step is to dissect the pattern ‒ in other words, to analyze how other websites use
social login and how you can customize or modify the pattern for your needs.
For example, Asos has buttons with icons and the names of social media channels ‒
Facebook, Google+, and Twitter. Asos deliberately picked the most popular social media
channels that appeal to everyone. The playful tone of Asos vividly appeals to millennials,
so it’s no wonder that its social media buttons don’t include professional networks like
LinkedIn and Flickr.

2021 UI/UX (LAB)

6 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
FeelUnique has social media icons placed below the main sign-in form. Despite the fact
that there’s no text, these icons are quite easy to distinguish since they have recognizable
logos and background colors.

2021 UI/UX (LAB)

7 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Main Categories of Design Patterns

1. Data Input/Output
For example, if you want to provide your users with an opportunity to select dates for a
flight or a room, you’re likely to use an element called a date picker (or a calendar picker).
A date picker displays a calendar and lets users pick a date or a range of dates in a few
clicks without entering them manually.
This pattern comes in handy when a user is required to enter dates close to the present.
But if a date is too far back in the past or out in the future, it may be frustrating to click
through calendars to reach the necessary date. Also, remember that in some cases users
are more comfortable with manually entering dates rather than selecting them ‒ for
example, when the desired input is too many clicks away.
Date pickers are convenient for selecting a date range: as a rule, such systems display
two calendars side by side so a user can choose a date range in a few clicks (or taps).
On Airbnb, users can rapidly pick dates in a single drop-down calendar menu: there’s no
need to select a check-in date in one box and proceed to another to pick a check-out date.
Therefore, Airbnb’s visitors use fewer clicks to book an apartment. In addition, the
selected date range is highlighted in a light green, so users can clearly see the selected
period.

Airbnb’s users are fewer clicks away from booking an apartment.

Booking.com’s date picker displays two consecutive months, unlike Airbnb’s which
displays the same month in both the check-in and check-out boxes. After a user selects a
date in the check-in box on Booking.com, they then proceed to another box to select the
check-out date. This procedure involves more clicks than on Airbnb.

2021 UI/UX (LAB)

8 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 On Booking.com, a user has to take more steps to book the room.

After users submit data or photo or video content, it’s important to provide them with
feedback. Alert your users about both errors and success. Alerts keep your users
informed and boost their confidence.
Provide input feedback with UI elements such as notifications, message boxes, colored
tooltips, loading animations and images, and so on. For example, MailChimp displays a
playful image of a monkey paw after a user successfully submits an email marketing
campaign.

A playful image assures MailChimp users that their email campaigns have been
successfully submitted

2. Content Structuring
The dashboard pattern is a common solution for applications that involve analytics,
metrics, or tracking any activity. As a rule, a dashboard displays data that informs a user
about the current state of the system (like sales or website activity). A successfully

2021 UI/UX (LAB)

9 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
designed dashboard doesn’t distract a user and communicates information well. Put
simply, a dashboard enables a user to rapidly digest data from multiple sources.

Want to know how to create an effective dashboard design? Grab these practical

guidelines.

Shopify users are able to access analytics for their online store and get shortcuts to
common actions like adding a new product or customizing their website’s interface.

3. Navigation
Jerry Cao, a UX content strategist, points out that you should use common navigation
patterns to create recognizable controls (like menus and tabs) that are at the same time
flexible so you can easily customize them.
Let’s explore one of the common patterns for content navigation ‒ infinite or continuous
scroll. Continuous scroll enables a user to keep scrolling while content is automatically
loaded. UX designers use infinite scroll to encourage users to consume more content by
loading content without users having to tap or click buttons ( “previous” and “next,” for
instance). This pattern gained popularity due to the emergence of websites with user-
generated content (social media websites like Facebook) and mobile interfaces.
Content-rich websites like Buzzfeed and Mashable use the infinite scroll pattern to engage
with website visitors and make them spend slightly more time on their sites.
Infinite scroll doesn’t fit every website or mobile app, though. It may seem fun to enable
users to scroll over and over again to consume loads of content, but in some cases users

2021 UI/UX (LAB)

10 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
find infinite scroll irritating and unproductive. Here are a few cases when it’s efficient to
use infinite scroll:

 When there’s too much content that it doesn’t fit on a single page and you don’t
want to draw your users’ attention away from the content.
 When dealing with mobile interfaces, so users don’t have to tap small elements
like “Next” buttons.

 When you don’t want to disrupt your users’ interactions with content. Users are
more likely to consume content by just scrolling down than by clicking “Next” or
“Read More” buttons.

 When you’re designing navigation for websites where a footer doesn’t matter
much. For established businesses, a footer with “About Us” or “Contact Us” links is
important, so infinite scroll may confuse users and make them leave a website.

2021 UI/UX (LAB)

11 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
4. Incentivization

Gamified patterns include powerful tactics that push users to take another step (for
example, to invite friends or prolong a subscription). Appraisals, rewards, milestones,
badges, achievements, levels, points, and other tactics make it easy to encourage users
to interact with a system more and more.

Codeschool ‒ an online learning platform ‒ offers a bright example of gamified persuasive

patterns. Progress is a crucial metric for gamified design. On Codeschool, learners can
track their course progress in their personal profiles. A progress bar is gradually fills with
green indicates completion. The design pattern that’s used to showcase progress and
boost user engagement is called the completion pattern.

2021 UI/UX (LAB)

12 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 The completion design pattern indicates progress and encourages users to keep
completing tasks

Another pattern used by Codeschool is the achievements pattern. As a rule, this pattern

focuses on personal or social achievements that matter to users. Since Codeschool is a
learning platform, where the achievements are of personal significance. Users get badges
for completing courses or any other piece of educational content.

Remember that gamification patterns are effective only among certain target audiences
(namely children, teenagers, and millennials). Also, keep in mind that not every app
should be gamified, though educational, entertainment, social media, productivity, and
similar categories of apps are great for gamification techniques.

2021 UI/UX (LAB)

13 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
5. Hierarchy
One of these UX patterns is breadcrumbs. The breadcrumbs design pattern is used to
indicate the user’s path from the main page to the current location. This pattern shows the
hierarchy of browsed content, so users are able to switch between pages rapidly.
Breadcrumbs is a popular pattern for ecommerce websites. Since most ecommerce
websites have a branched structure with multiple product categories, it’s important to
provide users with the ability to effortlessly come back to a product category or the main
page.

Amazon has a large product catalog; the breadcrumbs patterns helps users effortlessly
browse between categories.

6. Social Media
For instance, the leaderboard pattern is commonly used to indicate the best performers
in a category. It’s efficient to use this pattern in a highly competitive environment to
stimulate user involvement in a game or a competition and drive a sense of community.
A successfully implemented leaderboard pattern is contextual, which means that you
should compare only users with similar levels, activity rates, and so on. Also, it’s better to
compare users with people from their friends lists or people who are in the same location.
As a rule, people feel more involved when they compete with people they know or at least
could potentially meet.

On Swarm, users compete with their friends. Despite the fact that only the top three users
get bonus coins, Swarm’s interface displays other placeholders under a line. This trick
allows Swarm users to see who might become their rivals next week.

2021 UI/UX (LAB)

14 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 The Swarm leaderboard

FitBit follows the best practices of the leaderboard pattern. The leaderboard on FitBit is
contextual: users are able to see their ranking according to different categories including
Top (overall rating), Friends, and Local. FitBit shows other users’ ranks and key metrics
(like number of steps), which pushes users to compete based on those metrics.

2021 UI/UX (LAB)

15 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
 The Fitbit leaderboard

Daftar Pustaka

2021 UI/UX (LAB)

16 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
https://rubygarage.org/blog/ux-design-patterns

2021 UI/UX (LAB)

17 Dr. Misbahul Fajri, ST., MTI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/