10 Usability Heuristics by Nielsen; Lazada and Shopee Review

Size: px

Start display at page:

Download "10 Usability Heuristics by Nielsen; Lazada and Shopee Review"

Lillian Fowler
5 years ago
Views:

1 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.

Third, it has an animated black rectangle, with circle inside it, for loading process in checkout page.

them to wait for it. Main Menu Shopee has its main menu at the bottom of the screen.

2 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 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.

This filter functions to narrow down user s search preferences based on certain parameter.

At the bottom of this menu window, there is stated the total number of search results.

3 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

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.

4 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

5 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.

6 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.

7 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

To signify that there is a difference between Shopee and Shopee Mall, the application uses red color for Shopee Mall s identity.

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.

8 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.

An orange label with text Garansi Harga Termurah signify that the labeled product has the cheapest price among the same products throughout the application.

9 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

10 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.

11 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

If the users type something on the search bar, the application would show suggestions for similar terms as the one being

Once the users do a search, the application will also give suggestions in the form of clickable squares located below the

12 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

For registration, it affords the use email, Facebook account, and phone number.

13 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 , Facebook account, and phone number. Meanwhile, for login, it affords the use of username and password, SMS, Facebook account, and . 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 way the product s summary being organized in search result is also good.

It might be better not to place all the information in one page, but separate them into several slide-able pages.

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

14 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

make it harder for the user to diagnose and

Forgot Password Option Shopee application

whenever they select forgot password option.

15 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.

Users can search for answers based on problem s categories, based on keywords, or based on frequently asked questions.

16 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 or phones.

While it will turn into whenever it locates in search bo

17 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

18 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

in this category, the system provided the item that they might be interested.

19 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

20 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

21 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

22 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.

23 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

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

24 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

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.

25 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).

Instead it provides specific customer care menu which contain

26 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

27 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.

Heuristic Evaluation of [ Quest ]

Heuristic Evaluation of [ Quest ] 1. Problem Quest is an app that allows you to stay involved in, participate in, and create local clubs and events happening in your community 2. Violations Found 1. [H10.