SlideShare una empresa de Scribd logo
1 de 8
Descargar para leer sin conexión
SEARCH BOX
DESIGN
E C O M M E R C E
Design sitesearch that is easy to fin d and use
e C o m m e r c e U X D e s i g n a M i n e W h a t i n i t i a t i v e
2e c o m m e r c e u x d e s i g n . c o m
Do you need to have sitesearch on your eCommerce
store?
Whether you are a large eCommerce store with a wide range of goods or a small one with simple
navigation, you definitely need to have sitesearch on your store as it would help you learn what your
shoppers expect from you and shoppers who use sitesearch are more likely to convert than those
who don’t. Even with a simple sitesearch feature you can better engage your visitors and drive
sales.
1
Time saved on category management everyday 2Hrs. See how
MineWhat brought an entire team onto one page.
L E A R N M O R E
3e c o m m e r c e u x d e s i g n . c o m
Is your search box clearly visible and quickly
noticeable?
Let your shoppers hunt for products, not for your search box. Make your search box stand out so
that people can easily find it.
Sitesearch elements:
Avoid using only a submit button without the text field. That will make the search box hard to find.
Also avoid having only the text field without the submit button, not every user knows that they can
hit enter to submit.
Placement of the search box:
Position your search box away from all other boxes such as email signup. Place it consistently on
all pages except the checkout page. Top right, top center or in the main menu are popular positions
for the search box.
2
4e c o m m e r c e u x d e s i g n . c o m
Size of the text field:
Along with making the search box more
prominent, a longer search field will also
allow the users see what they type which
would reduce errors. Make sure it can hold at
least 30 characters. Another thing you could
do is to look at your Site search data, find out
what your shoppers are searching for and
use that to decide what the optimal character
limit should be.
Contrast:
Make sure, the color of the input field
doesn’t make it hard to understand where
the search term should be typed in. Increase
the contrast between the site header, text
field and search button to increase the
prominence of the search box relative
to other elements.rather than a specific
category in order to avoid users searching
within a wrong category.
1e c o m m e r c e u x d e s i g n . c o m
Is the search box easy
to use?
After you make your sitesearch easy to find,
make it usable.
Text in the search box:
Keep some meaningful text in the search box
and make it disappear on clicking so that the
users can enter their search term without any
confusion. If shoppers don’t find the desired
product in the search results, they might
search again with a slightly different search
term. So, keep their previous search term
in the search box so that they don’t have to
type the entire search term again.
3
2e c o m m e r c e u x d e s i g n . c o m
Submit button:
The submit button should look different than
the input field and should either read search
or have a search icon. Show results even
when users press enter, but this doesn’t
mean that you can do away with the “submit”
button entirely.
Scoped search:
Though search scope is not necessary for
every eCommerce store, it is critical for large
stores with wide range of products. Allow
users to search within a particular category.
Default your search scope to entire store
rather than a specific category in order
to avoid users searching within a wrong
category.
3e c o m m e r c e u x d e s i g n . c o m
Auto suggest:
Offer search suggestions as the user types in
a query. A dropdown with common searches
that will help reduce typos and avoid no
results found. It’s even better if you suggest
a few best-fit products along with thumbnail
images and price of the products suggested.
Land the shopper on the individual product
page if he clicks on any product suggestion.
category.
Read on to find out how a Shopify based luxury retailer increased
their landing page conversion by 200%.
L E A R N M O R E
P O W E R E D B Y
Product Analytics for eCommerce
The #1 eCommerce intelligence platform for your sales and marketing
teams.
Quickly spot what works and what doesn’t on your store. Drive more conversions.
www.minewhat.com >>
F R E E S I G N U P

Más contenido relacionado

Más de MineWhat

Más de MineWhat (7)

eCommerce marketing email
eCommerce marketing emaileCommerce marketing email
eCommerce marketing email
 
E commerce homepage banner
E commerce homepage bannerE commerce homepage banner
E commerce homepage banner
 
eCommerce product page design - Product options
eCommerce product page design - Product optionseCommerce product page design - Product options
eCommerce product page design - Product options
 
eCommerce: Produc Page Design - Product images
eCommerce: Produc Page Design - Product imageseCommerce: Produc Page Design - Product images
eCommerce: Produc Page Design - Product images
 
eCommerce Holiday email marketing
eCommerce Holiday email marketingeCommerce Holiday email marketing
eCommerce Holiday email marketing
 
Great product photography: Getting started
Great product photography: Getting started Great product photography: Getting started
Great product photography: Getting started
 
The 6th Magic Block of Ecommerce: Analytics
The 6th Magic Block of Ecommerce: AnalyticsThe 6th Magic Block of Ecommerce: Analytics
The 6th Magic Block of Ecommerce: Analytics
 

Último

一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 

Último (20)

一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
How to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in PhotoshopHow to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in Photoshop
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 

eCommerce search box design

  • 1. SEARCH BOX DESIGN E C O M M E R C E Design sitesearch that is easy to fin d and use e C o m m e r c e U X D e s i g n a M i n e W h a t i n i t i a t i v e
  • 2. 2e c o m m e r c e u x d e s i g n . c o m Do you need to have sitesearch on your eCommerce store? Whether you are a large eCommerce store with a wide range of goods or a small one with simple navigation, you definitely need to have sitesearch on your store as it would help you learn what your shoppers expect from you and shoppers who use sitesearch are more likely to convert than those who don’t. Even with a simple sitesearch feature you can better engage your visitors and drive sales. 1 Time saved on category management everyday 2Hrs. See how MineWhat brought an entire team onto one page. L E A R N M O R E
  • 3. 3e c o m m e r c e u x d e s i g n . c o m Is your search box clearly visible and quickly noticeable? Let your shoppers hunt for products, not for your search box. Make your search box stand out so that people can easily find it. Sitesearch elements: Avoid using only a submit button without the text field. That will make the search box hard to find. Also avoid having only the text field without the submit button, not every user knows that they can hit enter to submit. Placement of the search box: Position your search box away from all other boxes such as email signup. Place it consistently on all pages except the checkout page. Top right, top center or in the main menu are popular positions for the search box. 2
  • 4. 4e c o m m e r c e u x d e s i g n . c o m Size of the text field: Along with making the search box more prominent, a longer search field will also allow the users see what they type which would reduce errors. Make sure it can hold at least 30 characters. Another thing you could do is to look at your Site search data, find out what your shoppers are searching for and use that to decide what the optimal character limit should be. Contrast: Make sure, the color of the input field doesn’t make it hard to understand where the search term should be typed in. Increase the contrast between the site header, text field and search button to increase the prominence of the search box relative to other elements.rather than a specific category in order to avoid users searching within a wrong category.
  • 5. 1e c o m m e r c e u x d e s i g n . c o m Is the search box easy to use? After you make your sitesearch easy to find, make it usable. Text in the search box: Keep some meaningful text in the search box and make it disappear on clicking so that the users can enter their search term without any confusion. If shoppers don’t find the desired product in the search results, they might search again with a slightly different search term. So, keep their previous search term in the search box so that they don’t have to type the entire search term again. 3
  • 6. 2e c o m m e r c e u x d e s i g n . c o m Submit button: The submit button should look different than the input field and should either read search or have a search icon. Show results even when users press enter, but this doesn’t mean that you can do away with the “submit” button entirely. Scoped search: Though search scope is not necessary for every eCommerce store, it is critical for large stores with wide range of products. Allow users to search within a particular category. Default your search scope to entire store rather than a specific category in order to avoid users searching within a wrong category.
  • 7. 3e c o m m e r c e u x d e s i g n . c o m Auto suggest: Offer search suggestions as the user types in a query. A dropdown with common searches that will help reduce typos and avoid no results found. It’s even better if you suggest a few best-fit products along with thumbnail images and price of the products suggested. Land the shopper on the individual product page if he clicks on any product suggestion. category. Read on to find out how a Shopify based luxury retailer increased their landing page conversion by 200%. L E A R N M O R E
  • 8. P O W E R E D B Y Product Analytics for eCommerce The #1 eCommerce intelligence platform for your sales and marketing teams. Quickly spot what works and what doesn’t on your store. Drive more conversions. www.minewhat.com >> F R E E S I G N U P