Your store isÌýset upÌýandÌýyou’ve got products inÌýit, andÌýyou’re finally ready toÌýstart sending some traffic toÌýitÌýandÌýraking inÌýthat cash. The problem: ifÌýyour store isÌýhard toÌýnavigate, you’re sending traffic into aÌýsieveÌý— people will goÌýinÌýone end andÌýout theÌýother, without buying anything (and wasting your effort orÌýadÌýspend inÌýtheÌýprocess!).
Obviously, that’s noÌýgood. Here’s what you can doÌýtoÌýprevent that scenario.
Don’t Overwhelm Your Visitor
Overwhelmed people don’t buy. You’re probably familiar with
Other studies done since then have backed this up; ifÌýyou present customers with too many options, they’ll try toÌýweigh theÌýpros andÌýcons ofÌýall ofÌýthem, get tired ofÌýgoing over all theÌýdetails andÌýwind upÌýnot making aÌýchoice (i.e., buying) atÌýall.
OnÌýtheÌýflip side, you don’t want your store toÌýlook empty andÌýmake customers think that your store isÌýunder construction orÌýisn’t aÌýprofessional endeavor.
IfÌýyou have one flagship product while you’re expanding your store, you should choose aÌýtheme andÌýdesign that brings your one product front andÌýcenter, instead ofÌýmaking itÌýlook like it’s sitting inÌýanÌýempty storefront.
IfÌýyou only have two orÌýthree products, you’ll also want toÌýchange your design accordingly orÌýshow different color variations asÌýtheir own products toÌýkeep your store from looking too empty.
Similarly, when itÌýcomes toÌýcategories, you want toÌýchoose asÌýfew categories asÌýpossible (so asÌýnot toÌýoverwhelm theÌýshopper), but create enough categories that each category isÌýuseful. IfÌýyou only have two categories, but each category has 50Ìýitems inÌýit, you might beÌýbetter off creating
ºÚÁÏÃÅ user Shea KardelÌýis aÌýgood example ofÌýthis, with their women’s clothing category, broke down into six subcategories:
Shea Kardel
Having toÌýchoose between six categories isÌýmuch easier than choosing from 12ÌýorÌý20, andÌýthen when theÌývisitors clicks aÌýcategory, they’re taken toÌýaÌýpage with noÌýmore than nine products. It’s virtually impossible toÌýget overwhelmed while browsing this shop.
Make itÌýEasy forÌýCustomers toÌýSearch
Your shopper might not want toÌýbrowseÌý— they might beÌýlooking forÌýone specific thing. IfÌýthat’s theÌýcase, theÌýfirst thing they’re going toÌýlook forÌýisÌý. ItÌýshould beÌýeasy toÌýfind, like onÌýOld Sole Boot Company’s site:
Old Sole Boot Company
Shoppers will typically look forÌýtheÌýsearch bar (or aÌýmagnifying glass icon) along theÌýtop menu orÌýinÌýaÌýsidebar, soÌýthat’s where your’s should be. IfÌýyou want toÌýmake itÌýextra visible, you can make theÌýsearch button orÌýbar aÌýdifferent color than theÌýrest ofÌýyour text. You can also use theÌýProduct Search Enhancer appÌýto
Make itÌýEasy toÌýSort
When someone heads toÌýaÌýcategory orÌýtheÌýsearch results page onÌýyour site, theÌýresults aren’t typically randomly orderedÌý— they’re sorted inÌýsome way. How you sort your products byÌýdefault depends onÌýwhat you want toÌýdo:
- ToÌýentice visitors andÌýcapture their attention, you can sort starting with theÌýlowest prices.
- ToÌý“price anchor,” you can doÌýtheÌýopposite andÌýstart with theÌýhigher prices. The thinking behind this isÌýthat theÌýfirst price aÌýcustomer sees sets theÌý“default,” soÌýprices lower than that seem like aÌýbetter deal than they would have otherwise. For example, ifÌýyou’re shopping forÌýshirts andÌýyou’ve been browsing
$40-60 Ìýshirts, aÌý$25Ìýshirt seems like anÌýincredible deal. - IfÌýyou show reviews onÌýyour category/product listing pages, you can sort it, soÌýthat highly reviewed items show upÌýfirst byÌýdefault toÌýimpress customers.
Customers should beÌýable toÌýeasily see theÌýsorting options andÌýbeÌýable toÌýresort theÌýproducts onÌýtheir ownÌýif they want. Standard options are date added, ascending andÌýdescending price, andÌýalphabetically orÌýreverse alphabetical order.
IfÌýyou have enough products, you might want toÌýoffer filtering options onÌýcategory pages andÌýinÌýsearch results. Again, you don’t want toÌýoverwhelm people, soÌýifÌýyou doÌýoffer aÌýfilter, set itÌýasÌýaÌý
This way, theÌýfilters are hidden until theÌýperson clicks “Filter” andÌýthen isÌýpresented with options. Depending onÌýwhat you’re selling, you can let people sort byÌýcolor, size, functionality, orÌýother attributes that make sense. ToÌýdoÌýthis using ºÚÁÏÃÅ, you can use theÌýÌýcombined with Javascript toÌýcreate aÌýfilter widget inÌýyour sidebar.
Just remember that your filters shouldn’t take theÌýplace ofÌýcategoriesÌý— rather than having people filter byÌýtype ofÌýapparel, forÌýexample, you should have theÌýtypes ofÌýapparel asÌýcategories.
Then, once they head toÌýtheÌýright category, letting them filter byÌýoption (short sleeve orÌýlong sleeve), size, color, etc. makes sense andÌýisÌýless likely toÌýoverwhelm them. And remember, filters might not even beÌýnecessary depending onÌýhow many items you haveÌý— you might just need enhanced searching features.
The Do’s andÌýDon’t’s ofÌýMenus
The menu across theÌýtop ofÌýyour site can doÌýaÌýlot toÌýhelp orÌýhurt your customers. Here’s aÌýchecklist ofÌýthings toÌýconsider about your menu:
Before weÌýmove onÌýtoÌýanything else, let’s cover some questions you should ask yourself:
- Visibility:ÌýIf your menu isÌýhard toÌýspot, you need toÌýmake itÌýbigger. ItÌýneeds toÌýbeÌýeasy toÌýsee andÌýeasy toÌýclick orÌýtap (on aÌýphone). Also, people look atÌýtheÌýtop ofÌýsites andÌýonÌýsidebars forÌýnavigationÌý— having your menu anywhere else will beÌýconfusing, noÌýmatter how cool itÌýlooks.
- Clarity:ÌýIt’s tempting toÌýcome upÌýwith “cool” orÌýfunny names forÌýpages that showcase your personality, but forÌýsomeone new toÌýyour site, clarity comes first. IfÌýyou must have clever (but not easy toÌýunderstand) page names, include theÌýmore common name after itÌýinÌýparenthesesÌý— forÌýexample, “Origin Story (About)”.
- Highlighting: IfÌýthere’s aÌýspecific option that you want people toÌýclickÌý— one area ofÌýyour shop that tends toÌýbeÌýmore profitable orÌýisÌýaÌýbest sellerÌý— you can make sure people notice itÌýbyÌýmaking theÌýlink aÌýdifferent color than theÌýrest ofÌýthem. While you’re atÌýit, make sure that your menu links actually look like linksÌý— they should beÌýunderlined, aÌýdifferent color when highlighted, orÌýotherwise look different than
non-clickable text. - Simplicity: Try toÌýkeep your menu atÌýsix items orÌýless toÌýmake itÌýlook clean andÌý
non-cluttered (and keep visitors from getting overwhelmed). Also, look forÌýunnecessary words that you can cut outÌý— “products” instead ofÌý“our products,” forÌýexample.
Make Sure Mobile Visitors Can Easily Browse
With mobile commerce being 30% ofÌýall
- Search bar/icon:ÌýIs itÌýeasily visible? Does itÌýexpand with one tap?
- Menu:ÌýIs itÌýeasy toÌýfind? DoÌýthey have toÌýscroll incessantly toÌýfind aÌýcategory?
- Products:ÌýDo theÌýdefault product images show upÌýreally large onÌýaÌýmobile screen? IsÌýtheÌýtitle ofÌýtheÌýproduct, andÌýtheÌýproduct information, easily readable?
- General readability: IsÌýtheÌýtext big enough toÌýread? Are there anyÌýinstances ofÌýtext overlapping badly with images?
IfÌýyou can, give your shop address toÌýaÌýfew acquaintances who haven’t browsed there much, andÌýwatch them navigate itÌýonÌýtheir phone. The places they get confused will give you valuable information about design changes you should make.
Your Next Steps
Here’s what you can doÌýtoday toÌýmake your store easier toÌýnavigate andÌýstop losing customers:
- Try toÌýkeep your categories andÌýmenu options (and your options inÌýgeneral, but especially theÌý
top-level options that are theÌýfirst things aÌýnew visitor will encounter) toÌýsix orÌýless options - Make itÌýeasy forÌýpeople toÌýsort andÌýsearch forÌýproducts byÌýmaking those options visible (by making them aÌýdifferent color, big enough toÌýeasily see, orÌývisually highlighting them inÌýanother way)
- Strategically choose what theÌýdefault sorting method isÌýforÌýyour products andÌýtest different ones toÌýsee what gets results
Good luck! And don’t forget toÌýsubscribe toÌýtheÌýblog ifÌýyou want toÌýget more updates with helpful tips like this inÌýtheÌýfuture.
Ìý
- How toÌýFix Your Store’s Navigation
- Everything You Need toÌýKnow About Product Merchandising
- Online Merchandising: How toÌýLayout Products inÌýOnline Store
- What isÌýFashion Merchandising, andÌýWhy IsÌýItÌýSoÌýImportant?
- 10ÌýDesign Mistakes ofÌýOnline Stores
- 15ÌýPerfect Font Pairings forÌýYour Ecommerce Website
- Color Theory: Everything You Need toÌýKnow about Color Themes
- 7ÌýCreative Ideas forÌýYour Ecommerce Product Page
- The Power ofÌýaÌýHero Image inÌýWeb Design
Must-Have UXÌýPrinciples toÌýFollow inÌýanÌýOnline Store- Website Design Audit
- Unlocking theÌýPower ofÌýUXÌýDesign forÌýEcommerce
- What’s theÌýDifference Between UIÌýandÌýUXÌýinÌýEcommerce?