“Everyone uses Shopify…”
Does that mean that it has no problems, and therefore has perfect user-experience??
The Basics
Every since I started using Shopify in 2020, I have noticed there are designs and formats of pages that aren’t streamlined and put together with first-time users in mind.
It requires a lot of clicking around and Google searches before getting any kind of an inkling on how to perform some simple tasks.
One of the Prominent Poor User Experiences,
when it comes to the design:
Navigation Page
for header tabs and drop-downs
I’ll take you through my Shopify experience.
After logging into Shopify account, click on “Online Store”, following by the subset “Navigation”, where you’re confronted with a bunch of Menus. Click on the menu which was created for the Header - ours is called “Shop All”.
Then, you’ll see “Menu items” which are the tabs in the Header.
The issue that I see here, is that for a first-time viewer who has no previous experience in Shopify, it appears as if:
The tab SHOP ALL has 3 sub-tabs:
BARS & PLATE
STRENGTH
HOME GYM PACKAGE
There are only a total of 3 tabs (SHOP ALL, ACCESSORIES, and SALE)
HOWEVER…
That’s not the case!!
The reality spelled out
There are actually 6 TOTAL HEADER TABS, consisting of the same 6 sections already mentioned:
SHOP ALL
BARS & PLATE
STRENGTH
HOME GYM PACKAGE
ACCESSORIES
SALE
BARS & PLATE
STRENGTH
HOME GYM PACKAGE
And, 3 of those header tabs have drop-downs:
BARS & PLATES header below shows that the dropdown has additional dropdowns.
The original poor user experience is still used in this dropdown.
Although it is clear that BARS & PLATES have 5 dropdown options, it is not clear that each of the 5 options have dropdowns, due to the inefficient location of the right-faced arrow on the left side of each option.
To improve users’ quick understandings of the composition and navigation of the Navigation page.
My strong suggestions
Made all of the header tabs to be aligned, to easily and quickly identify all of them as tabs
Moved each of the 3 arrows to the right side of the tabs, to clearly show that each of the rows have sub-tabs
ORIGINAL
REDESIGNED
In the above new, proposed upgraded design, the user now immediately understands that there are 6 Header tabs, and 3 of the tabs have sub-tabs.
3. For the dropdowns underneath each header, I moved the clickable right-arrows to the right of each of the options.
ORIGINAL
REDESIGNED
These changes make it clear to the first-time viewers the number of header tabs, whether each row is clickable or not, and where exactly they can click.
The modifications will make the users’ both understanding and use of this page very rapid and streamlined.
