{"id":4093,"date":"2017-03-04T21:20:02","date_gmt":"2017-03-05T04:20:02","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2017\/03\/up-your-game-with-filters\/"},"modified":"2017-03-04T21:20:02","modified_gmt":"2017-03-05T04:20:02","slug":"up-your-game-with-filters","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2017\/03\/up-your-game-with-filters\/","title":{"rendered":"Up your game with filters!"},"content":{"rendered":"
\"\"
(Image Courtesy<\/a>)<\/figcaption><\/figure>\n

Waiting at the coffee shop with a job classified magazine in hand I realised the importance of filters. We have grown so accustomed to the filters of the digital world that, for sale<\/a> we often tend to seek the same in the analog world as well. Online or offline, in the face of thousands of choices, people are under the load of t-o-o-o-o many\u00a0options.<\/p>\n

Why is filtering all the more important for\u00a0mobile?<\/h4>\n

For mobile devices, screen size is small, which makes product listings even longer as compared to desktop. In that long endless journey of browsing and choosing, users often loose interest and simply drop off. One should remember that with so much ready to use at hand, the attention span of an average user has decreased immensely.<\/p>\n

Filtering options on mobile or desktop tapers down overwhelming choices and thus lets the user have what he wants faster. Hence, shortens the purchase cycle of the\u00a0user.<\/p>\n

Mobile filtering strategies<\/h3>\n
\"\"<\/figure>\n

On desktops, long filtering menus usually appear on the either side of a product feed page under a hamburger(mostly), in a long vertical bar. On desktop screens, the screen size is big enough to see all filtering options at once, plus the product list. But with mobile devices, it\u2019s not the same case. On mobile sites due to space constraints, filter menus are not sticky by default. Rather, an expandable drop down menu is located at the top right or left of the page. But the problem with this is all the filter options are not visible at\u00a0once.<\/p>\n

Recommendation<\/h4>\n

For mobile devices, filter menus should not at the top of the page, but as an overlay separate screen. In the filter overlay, categories are listed one above the other in legible text, with icons indicating that each category can be expanded to show its subcategories. This makes filtering options immediately visible to customers, without scrolling, and encourages them to explore and apply\u00a0them.<\/p>\n

Overlay design differs from expandable drop-downs in that it provides clear visual cues about filtering options, with enough space for legible category\u00a0text.<\/p>\n

\"\"
Filter as an\u00a0overlay<\/figcaption><\/figure>\n

When to use:<\/strong> If there are lots of product listings and as a result there are lots of filter parameters.<\/p>\n

\"\"<\/figure>\n

There are few categories of filter that users use more frequently than others. For instance, customers on an e-commerce site usually filter options based on colour and\u00a0size.<\/p>\n

Recommendation<\/h4>\n

Conduct user tests to identify the most popular, effective and frequently-used by each customer segment. Well you don\u2019t really need to wait for your app to go live before you can test this out (Try CanvasFlip<\/a>). For a good user experience and hence a good conversion, ensure that those filters appear at the top of the\u00a0menu.<\/p>\n

For example, upon a user testing on prototypes of an e-commerce mobile site, when \u201csize\u201d was placed right at the top in the filter menu, 22% of shoppers filtered on size. Whereas, when it was placed at the bottom of the menu, just 5% filtered on\u00a0size.<\/p>\n

You could also customise it for a returning user based on the learnings from the previous\u00a0session.<\/p>\n

\"\"<\/figure>\n

Filtering is an iterative process, most shopaholics would agree! Just as a user scrolls down, browsing for options, he modifies his filtering options to find what he actually wants. For instance, on a lifestyle mobile site, a customer may choose \u201cleather\u201d within the \u201cjacket\u201d category?\u2014?and only after scrolling multiple times, realise that also filtering on style will better focus the list on the jackets that she\u00a0likes.<\/p>\n

The Solution\u00a0:<\/strong><\/h4>\n

Keep filter menus handy by making them sticky. As customers scroll down the page, sticky filter menus stay right at the top of their screen, instantly available so filters can be fine-tuned or altered and customers can find just what they\u00a0need.<\/p>\n

\"\"<\/figure>\n

Not everything should be filtered. It is smart to address top level decisions such as product categories on separate screens. Those are decisions that are being made by almost all users, no matter what they are looking\u00a0for.<\/p>\n

A user will know in what category he will likely find his item, however, he might not be sure yet in what price range or what\u00a0colour.<\/p>\n

When to use: <\/strong>Not everything should be stuffed in filters. Important top level choices which are being made by almost all users are best being made upfront. It also declutters and simplifies the user experience.<\/p>\n

Final Words<\/h3>\n

For large online retailers, effective filtering can bring the online shopping experience one step closer to the comfort level of a human sales associate in a physical\u00a0store.<\/p>\n

To rectify filtering in mobile commerce and ultimately impact conversions, online retailers need to dig deep into the filtering user experience. And hence, testing these parameters and layouts for filters becomes all the more important.<\/p>\n

\"\"<\/a><\/figure>\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

(Image Courtesy) Waiting at the coffee shop with a job classified magazine in hand I realised the importance of filters. We have grown so accustomed to the filters of the digital world that, for sale we often tend to seek the same in the analog world as well. Online or offline, in the face of… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":4094,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-4093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t