Evaluating a User Interface: SupermartNG Cart UX

[Oluwatobi]

Evaluating a user interface…

How many errors do people make as they are trying to use my interface? How long does it take people to do particular tasks? How does my design compares to a competitor’s design in terms of task completion time, or error rates?
These questions and many more beg for answers whenever I am tasked with the job of designing, re-designing or evaluating an already existing interface.There are a lot of techniques available for evaluating your interaction designs, either with users, or even without users. But before conducting any sort of design evaluation, we need to have a design focus. We should be focused on trying to understand how people use, or will use what we’re creating. What are their problems? How can we come up with design improvements to address those problems?. After coming up with a design focus, we should also think of setting goals. How many users should we test with, and at what experience level? How do we know when we are done?
As I said earlier, various techniques exist for evaluating a user interface, but I would break them into 2 broad categories:

Evaluating Without Users

This is cheaper than trying to recruit users, it involves a systematic step by step look-through for an interface, searching for problems.
Does the interface satisfy a checklist of well-known principles of good design? — Heurestic Evaluation
Will a typical user be able to complete each step of a task, without difficulty? — Cognitive Walkthrough

Evaluating With Users

The methods here are many, and I can’t go over each individually in this post, but to mention a few, we have qualitative usability studies, controlled lab studies, Field studies, Field Experiments, A/B Testing e.t.c
Having grasped the idea of what it takes to evaluate an interface, let’s get started with the SupermartNg Cart UI.

The SupermartNG Cart UX:

What to Evaluate: SupermartNG Cart UX
User Level: Expert (4.5/5), tech background and a consistent user of the platform for about 2 years
Task: Remove items from Cart
Design Reality: The present design has about 45 seconds — 2 minutes task completion time and 30% error rate (to get an item removed asap is very challenging). All these depend on user level, browser, luck e.t.c
Goal: Task should take about a second or two (task completion time), and 1% error rate (i.e I should only make a mistake once on 100 trials of this task).

Now, let’s get started. The present SupermartNG Cart looks like this:

But it doesn’t look like there is any issue at this point, until you want to go through your cart and probably remove some items.

So where does the issue lie?

Depending on how long the names of your individual items are, once you have more than 7 items in your cart, removing some then becomes a puzzle.

What do I mean?
On my latest version of Chrome (Version 57.0.2987.133), the Google Chrome scroll bar disappears and re-appears, and each of your attempt to remove an item becomes a guesswork. As you can see from the image above, the Google Scrollbar shows up and goes. Despite Apple’s ability to hide the scroll bar for Chrome when not in use, this UI still needs to thrive at the mercy of the overflow scrollbar for that particular cart div. The worse happens when both the scrollbar for the div and the scrollbar for Chrome both shows up, you know the rest.

What can be done?
Removing items from the cart is a task that any e-Commerce website should be certain that their customers will regularly do, so one should not make such task a cognitive load. For this particular task, how do we redesign the UI to offer a better experience to the users?

The issue could be resolved with a First Aid Approach:
We increase the padding of the content from 4px to about 10px, or reduce the width of the table to about 95%. Any of these actually gives us this:

Or we could offer a subtle redesign:
<imgstrong text src=“/uploads/default/original/2X/4/4a4bb4a2ea6ea84a37a592e7fa9db78a6134f090.jpg” width=“690” height=“479”>

Or a complete redesign:

The Redesign

The total amount of your products sits at the top left and with a very high contrast text against its background colour. There exists enough space for our scrollbars which becomes activated as soon as a user hovers on that cart.
Using (+) and (-) makes it glaring how to increase and reduce item quantity. We have introduced an hierarchy in the display of each item details so users eyes can scan these details more easily and immediately differentiate an item’s name from it’s delivery timeline.
The “remove-from-cart” label has been repositioned more strategically, making use of an icon + text, you can now remove items at the speed of thought.
It has been argued globally if there is a need for including a button for the second choice Call To Action, but while this choice is largely subjective, we have included a Continue Shopping button on the left, but with a larger emphasis on the Checkout button.
The principle of recognition over recall renders the initial minimize button (collapse) needless, it has thus been replaced with an icon that people are used to already, in their browsers and apps.

I fell in love with the redesign the most. Though, most times users embrace a change in UI with a negative reception. It wouldn’t be surprising if the First Aid approach or subtle redesign performs as equally great as the overall redesign. But as with all design endeavours, conducting a user observation study would help SupermartNG make more informed decisions on which approach works best in fixing this daunting UX issue.

I hope to continue the UX Design Series, as it will not only help me in sharing what I have learnt so far in UX, but will help me connect with more UX-oriented individuals in doing greater stuffs. Your feedbacks are highly welcome.

Twitter: @OluwatobiMayowa
Medium: OluwatobiMayowa

[uxkish]

Hi Oluwatobi, good work on this and it is really good to know how you think and approach design.

Your version of the cart looks much better and cleaner, well done, but I think you missed out on some things I would consider as important also, especially when re-designing an existing, functional system.

Can you do the following:

1. Your cart seems to show less number of items per view (without scrolling) than the original one, that is, 2 items less. Can you keep the number of visible items at 6 (as original) instead of dropping to 4?
   Why is this an important thing to not disregard?
   This is a grocery store, most users buy loads of items every single time, and some of these users buy more than 100 items at a time (fact). The more items you can show at a glance, the better for these users so the effort needed to scroll down in search of an item is less with every list item that shows up quicker.

2. Can you keep the word/label “Collapse” located at the top of the cart? You’re a bit used to these icons, but some of these users (considering the platform you are designing for, most of its users are not Expert level) are not very savvy with iconography. You’re tasked with sticking to icons with text labels to be safe, but also, you can use icons that are very obvious and common. The “minus” icon you used there is not obvious, it is not very common and leaves room for doubt as to what it is for. Try using a more common icon or better yet, add a label.

3. The “-” and “+” icons you have there, they both look disabled, I guess when an item is at a figure that cannot be less, the “-” button can look disabled and vice versa but not both at the same time. Also, as with TV remote controls and other scenarios, the plus icon would always be on top while the minus icon goes below. Mental models, transferable experiences and subconscious expectations.

4. Finally, the position of the remove button (icon and label) seems a bit off for a list item design. Its too attached to the item image. Maybe we can have it in a better placed position when you think of it as a control for the item row.

Overall, good work and as with all things design, iterations are a constant.

Cheers!

[temiyemi]

Nice work. To buttress @uxkish’s feedback, you may even discard the ‘remove’ button entirely. A carted item may also be removed by setting its quantity to 0.

[Oluwatobi]

Hi @uxkish I really appreciate your feedback and this is the kind of constructive criticisms I seek before concluding on a journey to start writing about UX, at least in the African context. Really love the fact that you have so much knowledge of UX and understand users concerns so well, would love to get closer.

@uxkish

Can you do the following:

1. I have adjusted the spacing on the cart, though I now have 5 items per view, perhaps if I try harder I can get it to 6, or we could just leave it as a trade off for the new design, who knows.

2. I wanted that part to remain clean, but who clean epp when users cannot figure out what actions should occur when they take certain tasks, I have therefore leveraged on using the icon + label format.

3. That was an obvious design disaster from my end, easily fixed. For the states, I didn’t have time to do an animation of how it works, but active state is orange colour, disabled state is present grey colour. Thanks man!

4. Absolutely, a control for the item row. I have other design ideas where I considered other crazy positions, but with UI, re-inventing the wheel is cool for you as a designer if you want to win design awards, but if you want user satisfaction, follow conventions.

Thanks a lot also @temiyemi . Your feedback is well appreciated. Really grateful.

[uxkish]

Hi @Oluwatobi, nice to see the latest version, awesome progress.

@Oluwatobi

Really love the fact that you have so much knowledge of UX and understand users concerns so well, would love to get closer.

Thanks for the kind words, you can always reach me via email ( kishaniekan[at]gmail[dot]com ).

The design is very much usable now, while maintaining the cleaner look, however, I don’t completely like the positioning of the “Remove” button. It still needs some work. Besides this, I think it would be interesting to show this to a frequent/active user of the current cart on Supermart. Would be really interesting.

Well done.

[leslie]

Pssstt…
Just put this idea together real quick. Sorry if it looks like a disaster.

• Added scrollbar to account for orders more than the cart height
• Switched quantity to horizontal

Well done

[uxkish]

@leslie nice to see someone else give it a shot but I don’t think your design would work better than what @Oluwatobi has done already.

• First of all, his design would have scroll bars of cos.

• You totally ignored the need for more items showing as much as possible, opting for use of more spacing, nice looking but not very useful or helpful for your target user in anyway. I’d love to know your thoughts supporting this.

• I like what you did with the “remove” buttons.

• Finally, you made an assumption there as regards item image size being the same in aspect ratio (#nightmare). This is not so, plus, you would need to account for images with white background too.

[techscorpion]

Great work guys. I love the passion.

I’m sorry for the tautology, but perhaps it might be better to remove the remove button.

Reasons:

1. Merchants don’t necessarily want people removing things from their cart
2. Reducing the quantity to zero is the same as removing it. You can even remove it visually once it reaches zero.

[leslie]

@uxkish

First of all, his design would have scroll bars of cos.

Duh…Lol

@uxkish

You totally ignored the need for more items showing as much as possible, opting for use of more spacing, nice looking but not very useful or helpful for your target user in anyway. I’d love to know your thoughts supporting this.

Got around to working on this. Initial idea was to reduce clutter and make content legible. Still maintained that in the second edit but i reduced the height to accommodate more items. Let’s face it, they’re gonna scroll anyway.

@uxkish

Finally, you made an assumption there as regards item image size being the same in aspect ratio (#nightmare). This is not so, plus, you would need to account for images with white background too

The initial rect was an oversight. Made item photo a square. Back end can force specs or crop photos as uploaded.
Possible fix for white background would be to add outline but I don’t see it harming the display.

• Removed “Continue shopping”. Since it’s a pullout, folks will most definitely either click outside or collapse it back. “Continue Shopping” might have worked if the site had other sections but navigation hierarchy is just 2-3 levels in and users can just as easily go back to navigation to continue shopping.

Thanks for the feedback and well done again @Oluwatobi

[Oluwatobi]

One key thing about design is being able to communicate one’s approach. Absolutely loving this. Would really be more helpful if we can have real users use these interactions, who is rooting for a lag based focus group?

[uxkish]

I like what this thread has done. I think we are at a point I usually recommend some sort of user testing but in this case, the prototype would be in HTML to properly simulate a few use cases and scenarios but then, someone has to pay for it.

Well done guys.

Finally, on no occasion should one design a cart system to only delete when you deduct the quantity to 0. From my experience, people naturally look for a delete or remove button once they make a decision.

Cheers everyone!

[Oluwatobi]

@uxkish

I like what this thread has done. I think we are at a point I usually recommend some sort of user testing but in this case, the prototype would be in HTML

Nothing beats user testing.

@uxkish

someone has to pay for it

Lol. Maybe the brand, the problem this will solve will on the long-run impact on user satisfaction, will might increase either sales, or customer retention.

@uxkish

Finally, on no occasion should one design a cart system to only delete when you deduct the quantity to 0. From my experience, people naturally look for a delete or remove button once they make a decision.

Sure. The Nigerian audience isn’t even ready for anything as advanced as this yet, maybe in Silicon Valley, this stunt can be pulled.

[temiyemi]

@uxkish @Oluwatobi Have you heard of a thing called “clickable wireframes”? With tools like Invision or Marvel, you can test what already exists (in this thread i.e.) and get valid user feedback without the need to advance it to HTML. It’s about one of the cheapest forms of user testing you can do.

[temiyemi]

@Oluwatobi

Sure. The Nigerian audience isn’t even ready for anything as advanced as this yet

Oh pls… even same exists on the current Supermart website. You can set the quantity of an item to zero and have it removed from the cart immediately. It’s not rocket science.

[uxkish]

Oh! I may have heard of that really fancy term “clickable wireframes” or maybe you mean “clickable prototypes”. And I may have heard of Marvel and Invision too, maybe even use them both for at least 3yrs now consistently but from the way I work, this cart design is not something I’d love to test using Marvel and the likes, this is something I would quickly create a different kind of “clickable prototype” using angular and HTML with dummy data so the scenario in which a participant get to shop, add to cart, delete, scroll through the cart and all would be closer to reality.
And this is just an approach I use sometimes depending on the case.

The tools you use don’t fit into all scenarios. The tests you run can be multiple, from the sketch and wireframing stage to just before production. It all boils down to what you are doing and what works best.

Pro tip: You can make clickable prototypes from paper sketches or HTML. And for HTML, you can create your clickable wireframes using a tool like Axure RP and then export to HTML for test.

[uxkish]

I’m not sure he meant it from a technical standpoint. That feature is there but they don’t depend on it for deleting items from cart cos it is not very intuitive hence the need for an obvious button.

[techscorpion]

@Oluwatobi

The Nigerian audience isn’t even ready for anything as advanced as this yet, maybe in Silicon Valley, this stunt can be pulled.

The point is you don’t know anything unless you A/B test it. Any assertion without backing data is hubris or blind copying, which is not necessarily a bad thing.

Once upon a time, the conventional wisdom for payment flows is to keep the site navigational links consistent. The idea of removing all links didn’t make sense until someone A/B tested it and found out that you have fewer cart abandonments when the page is more linear. Good design needs to be functional in order to meet an objective. For an e-commerce site, the prime objective is to increase sales and counterintuitively, not necessarily to be everything to the user. Both of course are not mutually exclusive.

On a lighter note, I’ll leave you with the immortal words of Ygritte to her lover

[Oluwatobi]

Yes, but even when conducting A/B Testing, how do you select the variables you intend to test again each other. Even in online advertising, analytics will only show how your ads perform against each other, so my point here is “you still wrote the copies” based on intuition right, at least at some point. So, from intuition, I know that we are not at that stage yet, because it doesn’t even work that way yet in countries without remote presidents, pun fully intended.

On your most valid point, which is gathering data, I had the opportunity of meeting a UX Designer by the name Early at Cc_hub where he specifically said he abandoned his cart on SupermartNG because of difficulties in removing some items he added. This is a valuable qualitative data.

If tech-aware users can have issues comprehending this flow, why do we need to A/B test against the variable. It will interest you to know that Nigerians were filling in the present date on the MM/YY field below on the left:

As the designer puts it in his article:

As it turns out, different markets are at different phases of design evolution. That means markets which joined the internet or smartphone revolution a bit later, are now going through early stages of familiarization, and can‘t simply jump into advanced concepts like pull-to-refresh or swipe-to-dismiss.

Read his full article here https://medium.com/@fathermerry/ive-also-fucked-up-as-a-designer-861945e9f642

There was no need to A/B test this, you know what the problem is, then fix the damn thing.

[Oluwatobi]

But that should not serve as the only way out, is what I am preaching.

Besides, it might take you about 5 steps to remove an item with quantity (5) if we have to reduce to (0) to delete, but the remove button helps to achieve same goal at the speed of thought. User control and freedom is a very important factor worth considering in Heurestic Analysis.

[Lamidi_b_a]

I don’t think I have ever seen this implemented in any cart