Mobile Search Filtering UIRecipes.

com

 
http://uirecipe.com

ARCH
FILTRING

Copyrights (c) 2018 - UIRecipes.com 23

Mobile Search Filtering UIRecipes.com

Tale of Content
Overview
Deign Requirement
UI Pattern
Deign Trend
Quick Toggle Filter
Filter Menu
Context enitive u-Filter
Navigating Neted Filter Menu
aved Filter
how Detail Of Active Filter
Ingredient and Direction
Filter Option Toggle
Cancel, Reet, Appl utton
how Active Filter With earch Reult
ingle-tap  lter
Filter  Map
Top Level Filter Detail Toggle
Categorized Reult
Deign Direction

Copyrights (c) 2018 - UIRecipes.com 24

Mobile Search Filtering UIRecipes.com

Overview
Filter earch reult - Uer ma want to  lter earch reult uing pecial
UI intead of entering more keword. xample include  ltering 
categorie, range of value, proximit on a treet map.

Awarene of  lter - When viewing earch reult, the uer need viual
feedack aout which  lter are currentl applied, o the can ae and
ne-tune the  lter.

Copyrights (c) 2018 - UIRecipes.com 25

Mobile Search Filtering UIRecipes.com

Deign Requirement
To egin  ltering:

Quick  lter witche — Tap on witch utton to toggle a  lter on/off

while viewing reult.
how  lter menu — Tap on a utton to how a lide-up creen or full
creen of  lter.

To modif  lter:

Modif a  lter — Ue cutom icon, witche, checkoxe, lit, or
other input control.
Navigate neted  lter — Activate top-level  lter categorie to acce
a lit of u- lter.
Reet  lter — Reet all  lter to default etting.
Cancel  lter editing — A utton to cancel the action of editing a  lter
and dimi the  lter menu.
Appl  lter - A utton to appl  lter and re-run the earch, and
dimi the  lter menu.

After  ltering:

how active  lter— Provide detail aout active  lter while viewing

earch reult.
Quick  lter delete — Quick utton to delete a  lter while viewing
earch reult.

Copyrights (c) 2018 - UIRecipes.com 26

Mobile Search Filtering UIRecipes.com

UI Pattern
Amazon

Airn

Copyrights (c) 2018 - UIRecipes.com 27

Mobile Search Filtering UIRecipes.com

Faceook

Faceook Meenger

Copyrights (c) 2018 - UIRecipes.com 28

Mobile Search Filtering UIRecipes.com

Google Map

Intagram

LetGo

Copyrights (c) 2018 - UIRecipes.com 29

Mobile Search Filtering UIRecipes.com

Offer Up

Pinteret

Pohmark

Copyrights (c) 2018 - UIRecipes.com 30

Mobile Search Filtering UIRecipes.com

Red n

Uer at

Copyrights (c) 2018 - UIRecipes.com 31

Mobile Search Filtering UIRecipes.com

Yelp

Youtue

Copyrights (c) 2018 - UIRecipes.com 32

Mobile Search Filtering UIRecipes.com

Amazon Video

Copyrights (c) 2018 - UIRecipes.com 33

Mobile Search Filtering UIRecipes.com

Deign Trend
A moile app make more ue of cloud data, the uer experience of
earching through that data ecome more critical to the ucce of the
app. oth the uer’ goal, and the variet of data tpe that can e
earched, require that earch  ltering e tailored to erve thoe goal and
the kind of earchale data.

Quick Toggle Filter

how a row of quick-toggle  lter aove or elow the lit of earch reult.
Thee  lter utton indicate whether the’re on/off, and can e toggled
with a ingle tap. ometime onl one top-level  lter can e active, which
make them ehave like categorie.

Yelp Pinteret Faceook Meenger

Filter Menu

ome app have o man  lter, there’ not enough creen pace to dipla
lter and earch reult at the ame time. Long lit of  lter require a
eparate creen or lide-up menu to acce the  lter. Thee menu often

Copyrights (c) 2018 - UIRecipes.com 34

Mobile Search Filtering UIRecipes.com

organize  lter into group, or make them more manageale through ta
and neted creen. Popup and half-creen lide-up menu don’t hide the
earch reult, o the allow ou to adjut  lter and ee updated reult in
the ackground.

Amazon - Popup  lter menu Faceook - lide up  lter Google Map - Full creen

menu lter menu

Context enitive u-Filter

Chooing a top-level  lter often mean revealing a more detailed et of
lter that are uniquel deigned for that top-level categor.

unde ned unde ned unde ned

Copyrights (c) 2018 - UIRecipes.com 35

Mobile Search Filtering UIRecipes.com

Navigating Neted Filter Menu

When there are too man  lter to how in a  lter menu, the top level row of

lter utton act a a navigation ar for deeper level of  lter menu. The
utton in the navigation ar re ect the tatu of the  lter applied in that
ection.

tep 1) Pohmark - Top- tep 2) Pohmark - Full tep 3) Pohmark - Neted

level  lter ar creen  lter menu full creen  lter

aved Filter

ome  lter require a lot of editing, ut once the’re etup, uer tend to
want to re-ue them all the time. Thee  lter are often peronalized to ome
apect of the uer, uch a their addre, od ize, gender, or other  lter
that do not change with earche.

Copyrights (c) 2018 - UIRecipes.com 36

Mobile Search Filtering UIRecipes.com

Pohmark - ave peronal
Red n - "ave earch” for
meaurement for clothe
real etate earche
and hoe

how Detail Of Active Filter

One of the mot ueful trend in earch  ltering i providing detail aout
active  lter while alo howing earch reult. Thi awarene help uer
decide whether to modif  lter in order to get etter reult. Feedack
aout active  lter might involve diplaing the  lter name, or the numer of
active v availale  lter.

Copyrights (c) 2018 - UIRecipes.com 37

Mobile Search Filtering UIRecipes.com

1) Amazon Video - No 2) Amazon Video - Activate 3) Amazon Video - how

Filter ome  lter active  lter with earch
reult (Channel, Movie,
TV how)

Let Go - Wrapping row of Pohmark - how detail of Google Map - how

lter a tag with an “x" active  lter in the top  lter active  lter in the lower-left
delete utton for each. ar corner, elow the earch
reult.

Copyrights (c) 2018 - UIRecipes.com 38

Mobile Search Filtering UIRecipes.com

Ingredient and Direction
aed on UX et practice, and current deign trend, here are the
ingredient and direction to cook the et UI earch creen.

Filter Option Toggle

A utton or icon to reveal  lter option.

how a utton to how earch  lter.
The icon uuall look like 2 or 3 line with dot on them to indicate
lider.
The lael uuall a "Filter" or “Re ne".
Thi utton i uuall onl viile after a earch ha een invoked, o
ou can  lter the earch reult.
However, the utton might e viile even with an empt earch ar, if
the default i to how recommended reult anwa.

Let Go App Amazon Video

Cancel, Reet, Appl utton

An full-creen  lter menu require the follwing aic utton:

A utton to reet all  lter.
A utton to cancel editing  lter.
A utton to appl the modi ed  lter to the earch reult. Thi i uuall
a ig utton at the ottom of the creen, ut it can e in the upper-right
corner a well.

Copyrights (c) 2018 - UIRecipes.com 39

Mobile Search Filtering UIRecipes.com

Cancel + Reet Cancel + Appl

how Active Filter With earch Reult

Indicate whether a  lter i active, and detail aout that  lter' etting.

unde ned

ingle-tap  lter

There are man kind of ingle-tap  lter: radio utton, witch utton,
checkox/checkmark, multiple choice, ingle-tap mininum and
maximum range, etc.
Mot of the time,  lter which require complex uer interaction like
wiping or liding are not necear, and lower than ingle-tap
geture.
Mot  lter require onl a ingle tap to activate or deactivate a  lter.
ven range of value hould e ea to et with  nger tap intead of
nger lider.

Copyrights (c) 2018 - UIRecipes.com 40

Mobile Search Filtering UIRecipes.com

Airn - witch utton Amazon - radio utton Youtue - Checkmark

Red Fin - ingle-tap to et
Google Map - rating 
the minimum and maximum
tar
of a range.

Filter  Map

For geographic  ltering, uing a treet map to zoom and pan allow
ou to  lter location aed on the viile part of the map.
Provide a utton to re-run the earch uing the current map poition.

unde ned

Top Level Filter Detail Toggle

A top level row of  lter utton let ou invoke more detailed lide-up
menu.

Faceook - horizontal
choice of  lter detail

Copyrights (c) 2018 - UIRecipes.com 41

Mobile Search Filtering UIRecipes.com

Categorized Reult

A top-level row of categorie let ou  lter reult  categorie. The  rt

lael in a lit of categorie i uuall “All", which dipla all reult.

Intagram - Taed reult
 categorie

Copyrights (c) 2018 - UIRecipes.com 42

Mobile Search Filtering UIRecipes.com

Deign Direction
Do ou have jut a few categorie? 
how them a a top level row of laelled utton, like a taed navigation
control.

Do ou have a medium-ized lit of  lter? 
Tap on the  lter icon to reveal a lide-up half creen menu.

Do ou have a long lit of  lter? 
Tap on the  lter icon to navigate to a full-creen  lter menu.

Do ou have man long lit of tiler? 
Ue neted creen of  lter menu.

Do ou have  lter that depend on other  lter? 

Provide top-level choice which how or hide more pecialized group of
lter.

Do ou have  lter detail that onl appl if a parent  lter i

activated? 
Provide a top-level choice of  lter, and depending on the choice, how a
more detailed lit of  lter elow.

Doe our  lter involve chooing among range of value? 
Intead of uing lider, provide a et of value range that the uer can
elect with a ingle  nger tap.

Do ou ue geographic  ltering? 
how a map in the  lter menu, and give the uer the ailit to zoom/pan a
map to et the geographic oundarie of the earch. You can alo how the
treet map  lter aove the earch reult. Another approach i to pecif a
zip code, treet addre, or map marker, and provide a  lter to chooe
numer of mile ditance from that location.
Copyrights (c) 2018 - UIRecipes.com 43
Mobile Search Filtering UIRecipes.com

Doe our app provide ueful earch reult even with a lank
earch? 
how the “Filter” utton even if the earch ar i lank. Otherwie, onl
how the  lter utton after the uer ha run a earch.

Alwa do thee thing: 
Alwa indicate active  lter while howing the earch reult. 
Alwa provide utton to how  lter, Cancel  lter editing, Reet  lter,
and Appl  lter.

GT A NW UI RCIP
VRY WDNDAY  

LARN MOR

Copyrights (c) 2018 - UIRecipes.com 44