10 Usability Heuristics by Nielsen;

Lazada and Shopee Review

Summary

Over decade to give user best experience, lot of designers had research and evaluate all possible

user experience on digital platforms. Based on Jakob Nielsen’s heuristic evaluation, there are ten

most general principles for user interface; visibility of system status, match between system and

the real world, user control and freedom, consistency and standards, error prevention, recognition

rather than recall, flexibility and efficiency of use, aesthetic and minimalist design, help users

recognize, diagnose, and recover from errors, help and documentation.

Visibility of system status means the user know what’s going on with the system, showed through

the feedback within a reasonable time. It can be in form of a color change, loader, time-left

graphics, etc. Match between system and the real world define making the application to speak the

language of the target user use, it will make the user know what the system talking about. User

control and freedom are about giving the user the freedom to navigate and perform actions, so they

can decide to do or not to do. Consistency and standards is when the icon or element being used

in the design look the same across the site on any page, so the user will feel familiar and reduce

the confusion. Error prevention are prior alert messages to reduce the possibility of user making

mistake in the first place.

Recognition rather than recall is all about suggestion, clear purpose and instruction so the user

know what they need to do in certain place. It is the way to minimize the application of user

memory. Flexibility and efficiency of use allow the user to do as it will help user adjust what they

really need. Aesthetic and minimalist design are make sure it still looks good, but not contain

information which is irrelevant or rarely needed. The key is simple but works beautifully. Help

users recognize, diagnose, and recover from errors, since errors unavoidable for the user providing

help and instruction is needed, in the way that make the user to feel they know what is wrong and

able to fix it. Help and documentation might be called a manual book, even though we have try

our best to provide user friendly design, which easy to understand but provide any such information

should be easy to search, focused on the user's task, list concrete steps to be carried out, and not

be too large will be an immense help, when a problem happen. At this occasion we will discuss

about Shoppe and Lazada.

VISIBILITY OF SYSTEM STATUS

Loading

Shopee has some different ways to show loading process. First, it has three animated dots for

initializing the application. Second, it has animated rings for whenever the users refresh a page

or move from one page to another. Third, it has an animated black rectangle, with circle inside it,

for loading process in checkout page. These different loading animations has one main purpose;

to inform the users that the application is still processing their command and, as an extension, to

tell them to wait for it.

Main Menu

Shopee has its main menu at the bottom of the screen. There are five menus (Home, Feed, Mall,

Notification, and Me) and each of them is represented by an icon. When the users are navigating

on the main menu, the icon of the active menu would be the only one being colored in orange,

while the rest of them is not colored. This makes it visible for the users to differentiate which

menu is active and which one is not.

Flash Sale Timer

Shopee has flash sales where it sells products with unusual amount of discount. This flash sales

happen every two hours, and to show that, Shopee application has a countdown timer at the flash

sale menu. This timer functions to show the user how much time they have until the current sales

end, or how much time until the next sales starts.

Products Filter

Whenever a user is searching for a product in this application, a filter icon would be visible at the

top-right corner of the screen. This filter functions to narrow down user’s search preferences

based on certain parameter. When the user selects the filter icon, a menu window would slide in

from the right side. At the bottom of this menu window, there is stated the total number of search

results. If the user decides to choose some filter, this number would immediately decrease, as

they are being specified. The user needs to select apply, though, before they can see any real

changes. However, this visibility in the number of search results really helps the user to know

whether their preferred products exist. Once the user applies their filters, the search results would

immediately change and the filter icon at the top would be marked with check sign, indicating

that certain filters are applied.

Adding Item to Cart

When users are adding items to their cart, the application would give an immediate feedback.

The main picture of the product would seem to fly, shrink down, and go into the cart logo at the

top-right corner of the application. A text “Added to Cart” would also appear on the screen. The

number on top of the cart would change immediately as the new product is added. The number

would increase based on the number of products that users add previously. This feedback works

very well in showing the users that their action is being done.

Connection and Update Status

Since Shopee is an online-based application, it needs internet connection to work. The

application can help informing the user about its connection status by showing notification

whenever the users open the application. Similar thing is applied when the users refresh the page

on Notification menu. If there is new update, the screen would show “No New Updates, Please

Check Again Later”.

MATCH BETWEEN SYSTEM AND THE REAL WORLD

Icons Representation

Shopee uses familiar concepts as its signifier. The icons used in this application is easily

relatable to the real-world objects or ideas. For example, as the main menu, it uses house icon to

represent Home, a person icon to represent Me, and a bell icon to represent Notification. It also

uses a funnel icon to represent Filter, a trolley icon to represent Cart, conversation bubbles to

represent Chats, and heart icon to represent likes and favorites.

Use of Language

The use of language in this application is very good. The terms that it uses are appropriate and

easily understood. When switching between English and Bahasa Indonesia, some terms are not

bluntly translated. Instead, they are kept in the way that feels more natural and trendy in real

world. For example, the word for menu “Feed” in English is translated as “Timeline” in Bahasa

Indonesia, since this word feels to be more natural rather than “Lini Masa” or “Berita”. It is not

just about translating the terms, but also about how convenient the terms are used in both

languages.

The only problem that occurs with the use of language is in the help center. When the language

setting is switched into English, the help center is still preserved as Bahasa Indonesia. This might

be okay if the users understand Bahasa Indonesia, but if they do not, then the help center would

not be helpful at all.

USER CONTROL AND FREEDOM

Restart Filter

When the users are using filter on their search, they have one options to instantly clear all the

filters applied. This is very useful, in case they want to use completely different preferences from

the one they used before. With the instant restart button, the users do not have to unselect their

filter options one by one.

Instant Scroll Up

There might be the time when the user is looking at so many products and scroll the page far

away down. In that state, it would be inconvenient for the user to scroll back up if they want to

see the early results. Shopee application eliminate this inconvenience by providing a button for

instant scroll-up. By selecting this button, the user can go back to the top page immediately.

Product Variations and Additional Messages

When the users decide to order or add a product to their cart, most of the time, they are given a

choice to decide product variations and numbers. In addition, the users also have freedom to

write additional messages to the seller. For example, if the variations are random, the customers

can write a message to order a certain color of the product.

CONSISTENCY AND STANDARDS

Orange Nuance

This application uses orange color as its identity, and the nuance of orange and white is

constantly used throughout the whole application. The logo uses orange and white color, the

menu is highlighted in orange, even the texts are written in orange, too. The orange color is also

used as a color to draw user’s attention, such as the one in notifications.

Red Nuance

Shopee has a sub division in its system called Shopee Mall, where the products being sold are

claimed to be 100% original, having 7-days return policy, and affording free shipping with

minimum transaction. To signify that there is a difference between Shopee and Shopee Mall, the

application uses red color for Shopee Mall’s identity. This can be seen when the users select

“Mall” on the main menu. The color on the application is suddenly change into red nuance. This

color is also applied whenever the users go to the products that is sold with “Mall” label on it.

The text would be shown in red, instead of orange.

Product Ribbons

When the users are scrolling down to view products, they will soon notice that some of the

products have certain ribbons attached to their pictures. Those ribbons are constantly used in this

application to signify special properties about the products. Orange ribbon with a check mark

and text “Star Seller” signify that the product is being sold by a Star Seller shop. Blue ribbon

with text “Grosir” signify that the user can get cheaper price when buying in high quantity.

Yellow ribbon with percentage written on it signify a discount.

Product Labels

Apart from ribbon, Shoppe application also uses labels on some of the products. A red label with

text “Mall” signify that the product is being sold by a store included in Shopee Mall. An orange

label with text “Garansi Harga Termurah” signify that the labeled product has the cheapest price

among the same products throughout the application. A tosca truck icon signify that the product

affords free shipping with minimum transaction.

ERROR PREVENTION

Product Stocks and Variations

Before the users can place an order, they are presented with small window which shows

available variations and stocks. Here, the users are required to select one preferred variation and

the number of products they would like to order. If one variation is not available, the option

would be greyed out and cannot be selected. Also, if the users put maximum available quantities

in their order, the button “+” for adding number would be greyed out as well.

Make an Order

When the users decide to select Buy Now button, their order is not immediately placed. Instead,

they have to go to checkout process to select shipment and payment options, as well as to see the

shipping cost of the product. This is very useful to avoid placing an order by mistake, and it also

good for the user if they decided to change their mind.

Payment

One of the payment options available in Shopee is through Mobile Banking using virtual

account. When the users choose to pay with this method, they would be given a series of virtual

account number to which they should pay. This virtual account number is quite long. Therefore,

to avoid mistake in typing them, Shopee provides an option to copy the numbers into clipboard

which later can be pasted in the mobile banking.

Closing Application

Whenever the users want to exit the application, they have to press “Back” button on their phone

twice. If they only press it once, there will be a text notification that tells the users to press it

once more if they want to exit. This option is very useful to prevent accidental closing.

RECOGNITION RATHER THAN RECALL

Various Searching Options

Shopee provides various ways for the user to search for products. Apart from searching terms on

the search bar, the users can also find products based on different groups presented at the Home

menu. They can explore products based on popular search, flash sales, popular products, Shopee

Mall, product category, and recommendations based on user’s previous searches.

Search Suggestions

Every time the users activate the search bar, they will be presented with previously searched

terms as well as popular search. If the users type something on the search bar, the application

would show suggestions for similar terms as the one being typed. Once the users do a search, the

application will also give suggestions in the form of clickable squares located below the search

bar. These squares show related terms as the one being searched.

Help Center FAQ

When the users face a problem in using the application, the first thing they can do is go to the

help center provided inside the application. Here, the application provides a series of frequently

asked questions, as well as options to search for questions based on categories.

FLEXIBILITY AND EFFICIENCY OF USE

Registration and Login Options

Shopee application supports various methods for the user to register or login. For registration, it

affords the use email, Facebook account, and phone number. Meanwhile, for login, it affords the

use of username and password, SMS, Facebook account, and email.

Application for Buying and Selling

As a single application, Shopee supports the function for both buyers and seller. Anyone that

uses this application can buy from available stores, as well as open their own store. This option is

available inside the Me menu.

AESTHETIC AND MINIMALIST DESIGN

Not-So-Minimalist Design

In terms of icon design and the organization of product summary, this application is pleasing

enough. The line shape of the icons looks very light, minimalist, and understandable. The way

the product’s summary being organized in search result is also good. However, we think the

organizations of detailed product description can be improved. It might be better not to place all

the information in one page, but separate them into several slide-able pages.

Cluttered Home Menu

The Home menu in this application looks cluttered. First, it is because of different ways in

presenting search suggestions. For example, the search based on popular product is presented

with product summary, while the search based on product category is presented with images.

HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS

Registration and Login Errors

When the users are trying to login to their account and putting wrong password or username, the

application will show a notification saying, “Your username or password is not correct. Please

try again.”. This is good, to signify a mistake in the inputs, but it is still being incomplete. The

error message delivered to the users need to be specified. Is it the username? Or is it the

password? Error message that is not being specified will make it harder for the user to diagnose

and recover from errors.

Forgot Password Option

Shopee application support the users to reset their password whenever they select forgot

password option. The application will help the user to reset the password with the help of

verification codes, sent to user’d phone number.

HELP AND DOCUMENTATION

Help Center

Shopee application is equipped with help center that is located in one of its main menu. Here, the

users can search for ways to solve problems that they face when using the application. Users can

search for answers based on problem’s categories, based on keywords, or based on frequently

asked questions. The help center also has some useful tutorials that are explained with pictures.

Moreover, if the users’ problem cannot be solved by available answers, they can contact the

customer support through email or phones.

1. Visibility System of Status

In Lazada website, the visibility system of status principle showed in some area, which are;

a. Change in Mouse Pointer Icon

Anytime, the user pointing their pointer into certain menu or icon, the icon of mouse pointer

will change from into , While it will turn into whenever it locates in ‘search’ box

or any box where we able to typing the word on it.

b. Continuity of Animation Slide

In the main page, Lazada alert any user or potential customer who access their website to

see the promotion or day deal product that they offer, by provide six animation slide, where

user can directly click it to find out the detail and indicate whether the connection still on

or not. Also, by select the six circles, the user able to choose which slide they want to focus

on.

c. Color Change

Besides, the changing that happen in mouse pointer, Lazada also let user know whether

they already choose the right menu or where the pointer area with color change anytime

the point located on menu. For example, on the picture above, the word ‘Koleksi Taobao’

will change color from black into orange when we select it with the mouse.

d. Pop Up Side Bar Menu

Whenever the user points their mouse into the side bar menu, it will give feedback with

color change and pop up menu who provided list product available in the category we

choose.

e. Pop Up Highlight and Tags

However, for the icon such as the product being sell whenever the mouse point on it will

give the feedback in which the icon will slightly pop up and have depth as the highlight that the

product being choose. It also brings out the tag, that put in the icon selected. It is important for

such online shop website, because it help user to know in which category the icon included.

2. Match between system and the real world

In Lazada, they have been using friendly word so people would easy to understand as well as

mapping the customer for certain item that they might be interest. For instance, instead using

‘recommendation’ it use simply ‘just for you’ which tell the customer in this category, the system

provided the item that they might be interested. In response, ‘just for you’ category shown it match

the real world as usually people will go to the place, at the first time where they can find the item

they like or needed.

3. User control and freedom

In Lazada, the user or the customer have freedom to choose what action that they like to

do. For example, when add certain thing into the cart, the dialog will pop up to give an

information that this item had been added, and next the user free to choose if they want to

directly do the payment or continue to search other the item. In addition, the customer also

free to adjust how many pieces they want to buy, put in the Wishlist or even cancel it by

clicking the cross icon on the right top.

4. Consistency and Standards

As you may see the color dominant in Lazada is orange and blue, and particularly for orange it

uses in so many buttons to process. In this case Lazada basically pattern they button using orange

color, as it is important. and most of the icon used like ‘cart’ had become standard used by many

online shop, as the icon to inform what item you have already buy.

5. Error Prevention

When the user search specific keyword in Lazada’s search box, the system will simply give

recommendation based on the word being input to make sure the user does not do mistake (like

misspelling) at the first place, which lead into an error.

6. Recognition rather than recall

The design of Lazada website had provide clear instruction to have ‘single click’ experience. In

order to make the user easy to find what they really need to find without have to remember the

steps to perform an action. For example, without make the user must remember the search box, it

simply had been written on the box ‘cari di lazada’ as the instruction. Also to know what item that

user ready to buy, there is a ‘cart’ icon available beside the search box, that will give those

information.

7. Flexibility and Efficiency of use

In Lazada, the user able to do the payment in one way even though they have many items to buys,

also all the detail needed like address, shipment available in one page, and to finish only need to

step which shipment detail and payment method, which simply make the payment efficient.

8. Aesthetic and minimalist design

As an online shopping website, Lazada in their main page basically had shown a minimalist design

in a way that user can easily find ‘search box’, the item being displayed well structured, the menu

provides the necessary information what Lazada sell based on each category.

Moreover, as the user open certain item it is easy to adjust, focus and specify the item that they are

looking for. Due to the reason that in the left side, the user supported by single click menu where

they able to select what kind of brand, store, price, and rating they want.

9. Help users recognize, diagnose, and recover from errors

In help user to recognize, diagnose and recover from errors, Lazada simply informing the user in

which part that the user might do the mistake or simply alert message. For example, if the username

is invalid or if the password is wrong, there will be an alert message. Also, the message used red

color and pop up directly below the box, so it will be easily to be notice by the user.

The other example of how Lazada inform the user if there is an error. In this case in when the item

search cannot be found and there is a problem when we want to pay our order (usually happen

when you buy a flash sale item, it could be because your item had been paid by others or system

crash at the moment).

10. Help and Documentation

Since this is a website it basically does not have manual book like when people buy certain product.

Instead it provides specific ‘customer care’ menu which contain customer support, order and

payment, shipment, return the goods, refund even live chat.

In the customer support section, you can easily find out anything like most frequently thing being

asked, and it had been categorized in certain topic, so it will help the user to minimize their time

and right on the target. Unfortunately, for Lazada.co.id it only available in Bahasa Indonesia, so

for the foreigner which want to buy through Lazada Indonesia might have difficulties. Even when

we try to access Lazada.com it will automatically have directed to Lazada.co.id.