UX-Design-evaluation-of-eBay-Shopping-center-with-Nielson-Norman-Heuristics-school-project

UNIVERSITY OF VAASA

School of Technology and Innovations

Computer Science

Authors: Tatu Puskala , Onyebuchi Dalbert Zimuzochukwu

Course: Analysis and Design of Human Computer Interaction (2018)

PROJECT 2 – IMPROVING THE USABILITY OF EBAY SHOPPING CART

VAASA, 2018

TABLE OF CONTENTS

1. Introduction

2. Heuristic evaluation of the original user interface

3. Designing first improved prototype user interface

4. Usability test of the first improved prototype

5. Second improved prototype

6. Conclusions

7. List of references

INTRODUCTION

eBay Inc. is an international e-commerce corporation headquartered in San Jose, California. It was created in 1995 by Pierre Omidyar. It is currently boasts of operations in about 30 countries. Its online platform called eBay.com provides an environment for consumer-to-consumer and business-to-consumer sales (eBay Inc., 2018a). Services such as auctioning and general sales are freely offered to buyers, but a fee is charged for sellers who want to list items for sale eBay Inc. (2018b).

Figure 1: eBay shopping site (source: https://ebay.com)

TARGET APPLICATION: The target applications are:

1. search tools visibility during scrolling
2. eBay shopping cart placement, and functionality.
3. Make the shopping cart symbol bigger

PROBLEM STATEMENT

The idea is to achieve the following:

1. Create a design that ensures that basic search tools remain at the top of the page despite scrolling. This will enable the user to refine search anywhere on the page without going to the beginning of the page. It improves flexibility and efficiency of use. It does not also affect the Aesthetic and Minimalistic Design criterion of the page as the search manipulation bar is small.

2. Redesign the shopping cart placement for improved viewing flexibility. The reason for this is stated below: eBay does not have that feature. Once an item is placed something on the cart it automatically displays a new page showing the shopping cart. To continue shopping, the user must return to the shopping centre by clicking the “continue shopping” button. The problem with this design is that the user cannot view the contents of the shopping cart without leaving the shopping centre.

The goal here is to:

a. Place the shopping cart beside the shopping centre. The page will be optimally rearranged to accommodate this new feature.

b. A second option is to have a popup view beside the shopping centre (like advert popups, but users will have to click the “view cart” button before the popup view shows).

Worthy of note is that this popup view will be consistent with standard colours that blend with the underlying shopping centre page by choosing an opacity of 80%. Any of these two methods would allow users to view, delete and update the contents of the shopping cart without going to a new page. By doing this we would have succeeded in giving the user Control and Freedom, matching the system to the real world where shoppers have the flexibility of simultaneously viewing their cart while shopping, minimizing user memory load of remembering the contents of their cart thereby providing Flexibility and Efficiency of use. At the same time, we would still maintain consistency and standard of the shopping site. Options to view the on a full screen page will also be made available because it is necessary for users to view their complete order before paying for them

3. Increase the size of the shopping cart icon. The shopping cart icon is too small. We hope to increase the size to achieve improved visibility.

DESCRIPTION OF THE TARGET USER INTERFACE.

Figure 2: eBay shopping application (source: https://ebay.com)

Figure 3: Search manipulation bar (source: https://ebay.com)
The figure above shows shopping cart at the top right corner (in a red circle). It also shows search filters (in the green rectangle), and the search bar above it (in a yellow sphere).

Figure 3a: eBay Shopping cart (source: https://ebay.com)
The figure above shows the continue shopping button (shown in a red circle) which takes the user back to the shopping centre.

HEURISTIC EVALUATION ON THE TARGET APPLICATION

SELECTING A HEURISTIC EVALUATION METHOD

We chose the Nielson’s Usability Heuristics used for this project. Jakob Nielsen (1995) defines 10 Usability Heuristics:

a. Visibility of system status

b. Match between system and the real world

c. User control and freedom

d. Consistency and standards

e. Error prevention

f. Recognition rather than recall

g. Flexibility and efficiency of use

h. Aesthetic and minimalist design

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

j. Help and documentation

1. The search manipulation bar

Figure 4a: eBay Shopping centre (source: https://ebay.com)

In this example, we want to buy Dell Laptops.

From Figure 4, notice that as the user scroll down the page, the user cannot see the shopping cart, and other useful information such as the search bar, and sort functions (Best Match). This violates Flexibility and efficiency of use and User control and freedom. It should be made to remain on top despite scrolling for easy accessibility to the shopping cart.

2. Shopping cart

Figure 4b: eBay Shopping centre (source: https://ebay.com)

Figure 3b: eBay Shopping cart (source: https://ebay.com)

From Figure 4b, we notice that there is a vacant space beside the shopping centre. Also, from Figure 3b, we observe that the shopping cart is on a new page entirely with so many empty spaces. Users are forced to return to the shopping centre and cannot make side by side comparisons. Moreover, this page can be optimally optimized to contain more content. It violates the following usability heuristics: a. Recognition rather than recall. Users must keep a mental track of the content of their cart while checking a similar different product on the shopping centre b. Match between system and real world. In the real world, users simultaneously see the contents of their shopping cart and the goods at the shopping centre. c. User control and freedom and flexibility and efficiency of use. Users have limited freedom to navigate between the shopping cart and the shopping centre.

3. The size of the shopping cart symbol

From figure 4b, the size of the shopping cart symbol is very small. It violates the Visibility principle of the usability heuristics. It should be bigger or displayed in brilliant colours.

DESIGNING FIRST IMPROVED PROTOTYPE USER INTERFACE

1. The shopping cart icon

Figure 5a: eBay Shopping centre showing the search manipulation bar sources: https://ebay.com, author.

2. The search Manipulation Bar

Figure 5b: eBay Shopping centre showing the search manipulation bar (sources: https://ebay.com, author)

Notice that the contents can be scrolled upwards without affecting the search manipulation bar.

3. Shopping cart



Figure 5c: eBay Shopping centre showing the shopping cart by the side (sources: https://ebay.com, author)

Figure 5d: eBay Shopping centre showing the shopping cart by the side (sources: https://ebay.com, author)

Continue shopping button has been moved from old shopping cart (see figure 3b) and integrated into a single webpage.

USABILITY TEST OF THE FIRST IMPROVED PROTOTYPE

From figure 5c, we notice the following:

1. The shopping cart icon is very visible. This meets the Visibility of System status test. Also observe that it shows that one object is in the cart.

2. The search manipulation bar is also visible while scrolling the page. This meets the “consistency and standards” as nothing has really changed from the way things used to be. It also fulfils the “flexibility and efficiency of use”, “user control and freedom” and still maintains the “aesthetic and minimalistic design” criteria.

3. The shopping cart is also visible always. This meets the “match between system and the real world”, “flexibility and efficiency of use”, and “user control and freedom” as users can view their selection easily on the same webpage.

However, a major flaw of this design is that the page becomes crowded when multiple items are placed in the cart. Therefore, we need to improve the design by creating a popup view just by clicking the shopping cart icon. This maintains the original design and provides a lot of space for text and visual information.

SECOND IMPROVED PROTOTYPE

Shopping cart pop-up design. Notice the presence of a scroll bar on the pop-up page.

Figure 5d: eBay Shopping centre showing the shopping cart page as interactive pop-up page. sources: https://ebay.com, author Here we have created a pop-up page with a scroll bar while maintaining the original eBay design layout.

CONCLUSION

In summary, we have succeeded in improving the usability of this eBay shopping cart design. Problems found were flexibility and efficiency of use issues. We have learnt that the user should be considered foremost when implementing user interactive designs and trade-offs are sometimes made when design initiative does not meet readily available technology. For instance, designing a pop-up page with the full functionality of a normal webpage may be challenging. However, with increasing advances in web design technology, nothing is impossible.

REFERENCES

eBay Inc. (2018a). "Global Trade: 1. Finding International Items On eBay". Available from World Wide Web:http://pages.ebay.com/globaltrading/buyer/index.html.

eBay Inc. (2018b). “Fees, credits and invoices”. Available from World Wide Web: https://www.ebay.com.au/help/selling/fees-credits-invoices/fees-credits-invoices?id=4070

eBay Inc. (2018c). “eBay shopping site”. Figures 1-5. Available from World Wide Web: https://ebay.com

Jakob Nielsen (1995). “10 Usability Heuristics for User Interface Design”. Nielsen Norman Group Available from World Wide Web: https://www.nngroup.com/articles/ten-usability-heuristics/