Kto sme
Všetky články
Vyberte sekciu
Vyberte sekciu
Programovanie

Ako navrhnúť vyhľadávanie pre vašu mobilnú aplikáciu

UXUX6/15/20216/15/2021

Keď pracujeme na vytváraní lepších prostredí pre používateľov vašich mobilných aplikácií, venujeme nejaký čas premýšľaniu nad dizajnom vyhľadávacieho panela aplikácie. K tomu, ako používatelia interagujú s vyhľadávaním, ako aj s celou vašou aplikáciou, prispievajú napríklad umiestnenie, text nápovedy a spôsob zobrazovania výsledkov vyhľadávania.

Prečo je Google dnes vyhľadávacím monštrom? Jedným z dôvodov je to, ako to zmenilo našu schopnosť hľadať odpovede.

Popremýšľajte nad niečím tak jednoduchým, ako je hľadanie definície slova. Pred 20 rokmi by ste museli nájsť slovník z regálu, aby ste našli odpoveď na svoj dotaz. Teraz otvoríte telefón alebo zapnete počítač, napíšete alebo poviete slovo a dostanete odpoveď okamžite a s minimálnym úsilím z vašej strany. Nehovoriac o nástupe AI nástrojov.

Táto forma digitálnej skratky neexistuje iba vo vyhľadávacích nástrojoch, ako je Google. Mobilné aplikácie majú teraz tiež samostatné vyhľadávacie funkcie.

Je vyhľadávací panel v rozhraní mobilnej aplikácie vôbec nevyhnutný alebo je nadbytočný? Poďme sa pozrieť na to, prečo je prvok vyhľadávacieho panela dôležitý pre kvalitnú interakciu s mobilnými aplikáciami. Potom sa pozrieme na niekoľko spôsobov, ako navrhnúť vyhľadávanie na základe kontextu otázky a funkcie aplikácie.


Mobilné vyhľadávanie v appkách je nutnosť

Vyhľadávací panel je už roky štandardnou súčasťou webových stránok, ale štatistiky ukazujú, že používatelia ho nie vždy považujú za nevyhnutnosť. Tieto údaje od spoločností Neil Patel a Kissmetrics sa zameriavajú na vnímanie a použitie vyhľadávacieho panela na webových stránkach elektronického obchodu:

Kissmetrics site search infographic

Údaje z infografiky Kissmetrics o vyhľadávaní na stránkach.


Ako vidíte, 60% opýtaných používateľov uprednostňuje namiesto vyhľadávania navigáciu, zatiaľ čo 47% volí filtrovateľné „vyhľadávanie“ pred bežnými funkciami vyhľadávania.

Na webových stránkach pre počítače to dáva zmysel. Ak je ponuka dobre navrhnutá a správne označená - bez ohľadu na to, aká rozsiahla je - je jej použitie veľmi jednoduché. Pridajte k tomu rozšírené možnosti filtrovania a je jasné, prečo návštevníci webových stránok uprednostňujú vyhľadávanie.

Používatelia mobilných aplikácií sú ale iného plemena. K mobilným aplikáciám chodia z iných dôvodov než na webové stránky. Stručne povedané, chcú rýchlejšiu, koncentrovanejšiu a pohodlnejšiu skúsenosť. Keďže však majú obrazovky smartfónov obmedzený priestor, nie je skutočne možné zahrnúť rozsiahlu ponuku alebo sadu filtrov, ktoré by uľahčili navigáciu v aplikácii.


Z tohto dôvodu mobilné aplikácie potrebujú vyhľadávací panel.

V mobilných aplikáciách nájdete veľa možností použitia:

  • Obsahovo orientované aplikácie ako noviny, vydavateľské platformy a blogy;
  • Eshopy s veľkými zásobami a kategorizáciou týchto zásob;
  • Aplikácie na zvýšenie produktivity, ktoré obsahujú dokumenty, kalendáre a ďalšie prehľadávateľné záznamy;
  • Zoznam webov, ktoré spájajú používateľov s tým správnym hotelom, reštauráciou, itinerárom, položkou na predaj, prenájmom bytu atď.;
  • Aplikácie na zoznamovanie a randenie, ktoré spájajú používateľov s veľkým počtom „zhôd“.

Existuje mnoho ďalších dôvodov, prečo by ste vo svojej mobilnej aplikácii mali použiť vyhľadávací panel, ale nechám za seba hovoriť nasledujúce príklady.


Spôsoby navrhovania vyhľadávania pre vašu mobilnú aplikáciu

Túto nasledujúcu časť rozdelím do dvoch kategórií:


1. Návrh fyzického vyhľadávacieho prvku

Existuje niekoľko bodov, ktoré je potrebné vziať do úvahy, pokiaľ ide o samotný fyzický prvok vo vyhľadávaní aplikácie:

Vrch alebo spodok?

Shashank Sahay vysvetľuje, prečo sú v mobilnej aplikácii pre vyhľadávací prvok dve miesta:

  • 1. Lišta s plnou šírkou v hornej časti aplikácie.

    Týka sa to aplikácií, ktoré sú riadené vyhľadávaním. Používatelia aplikáciu väčšinou otvárajú s výslovným účelom vyhľadávania.

Facebook app search

Facebook uprednostňuje vyhľadávanie aplikácií, takže ho umiestnil navrch.


Dobrým príkladom je Facebook. Aj keď používatelia Facebooku s najväčšou pravdepodobnosťou spolupracujú s informačným kanálom správ v aplikácii, mám podozrenie, že dáta Facebooku naznačujú, že vyhľadávaciu funkciu používatelia využívajú častejšie. Preto je umiestnený v hornej časti aplikácie.


  • 2. Navigačný panel na spodnej časti obrazovky.

    Toto je pre aplikácie, ktoré využívajú vyhľadávanie ako vylepšenie primárneho zážitku z používania hlavných funkcií aplikácie.

Porovnajme Facebook s jednou z jej sesterských služieb: Instagram. Na rozdiel od Facebooku je Instagram veľmi jednoduchá aplikácia pre sociálne médiá. Používatelia sledujú ďalšie účty a nahliadajú do zdieľaného obsahu prostredníctvom neustále aktualizovaných príbehov zobraziteľných na celú obrazovku, ako aj z nekonečne scrollovateľnej plochy s novými príspevkami.

Instagram app search

Instagram umiestňuje svoju funkciu vyhľadávania do dolného navigačného panela.


Z tohto dôvodu existuje na navigačnom paneli funkcia vyhľadávania, takže používatelia môžu vyhľadávať ďalšie účty, aby ich mohli prehliadnuť alebo sledovať.

Pokiaľ ide o toto základné rozdelenie, Sahay má pravdu v tom, ako umiestnenie vyhľadávania koreluje so zámerom. Dizajn vyhľadávacieho prvku však nejde len o to, kde je v aplikácii umiestnený.

Plytké alebo hlboké?

Nastanú chvíle, keď by mobilnej aplikácii pomohla funkcia vyhľadávania hlboko v jej prostredí.

Takéto veci uvidíte pomerne často v aplikáciách elektronického obchodu, ako je Bed Bath & Beyond:

Bed Bath & Beyond app search

Bed Bath & Beyond využíva hĺbkové vyhľadávanie, aby pomohlo používateľom nájsť obchody v okolí.


Na tomto príklade vidíme, že táto funkcia vyhľadávania je separovaná od štandardného vyhľadávania produktov na hlavnej vstupnej stránke. Výsledky pre tento druh vyhľadávania sa tiež zobrazujú jedinečným spôsobom, ktorý odráža účel vyhľadávania:

Bed Bath & Beyond map search results

Bed Bath & Beyond zobrazuje výsledky vyhľadávania na mape. 


Existujú ďalšie spôsoby, ako môžete použiť funkcie hlbokého vyhľadávania v aplikáciách eshopov.

Zamyslite sa nad eshopmi, ktoré majú ku každému produktu pripojené množstvo komentárov. Ak sa chcú vaši používatelia zamerať na to, čo o produkte hovoria iní zákazníci, funkcia vyhľadávania by im pomohla rýchlo sa dostať k recenziám obsahujúcim konkrétne kľúčové slová. Takéto uľahšenia prispievajú k celkovému dojmu, ktorý by mal váš moderný eshop na mieru obsahovať.

Tiež si všimnite hlboké vyhľadávania zasadené do aplikácií na cestovanie a zábavu, ako je napríklad Hotels.com:

Hotels.com app search

Spoločnosť Hotels.com zahŕňa hĺbkové vyhľadávanie na zúženie výsledkov podľa názvu nehnuteľnosti.


Všetci ste pravdepodobne oboznámení so základnou funkciou vyhľadávania, ktorá sa hodí k akejkoľvek aplikácii spojenej s cestovaním. Zadáte podrobnosti o svojej ceste a aplikácia vyhľadá najrelevantnejšie výsledky vo formáte zoznamu alebo mapy. O tom je táto snímka obrazovky.

Vidíte však, kde je vedľa lupy nápis „Názov nehnuteľnosti“? Toto je funkcia vyhľadávania v rámci funkcie vyhľadávania. Jediné, čo tu môžu používatelia vyhľadávať, sú skutočné názvy hotelových nehnuteľností.


Lišta, záložka alebo lupa?

To ma privádza k môjmu ďalšiemu návrhu: ako zistiť, ktorým dizajnovým prvkom má byť reprezentovaná funkcia vyhľadávania.

Už ste videli jasné dôvody na použitie celého vyhľadávacieho panela na rozdiel od umiestnenia karty do navigačného panela. Ale čo tak miniatúrna zväčšovacia lupa?

Tu je príklad jej využitia v mobilnej aplikácii YouTube:

YouTube app search icon

YouTube je skvelým príkladom praktického použitia funkcie vyhľadávania v hlavičke. 


Všimnite si, že v hlavičke aplikácie sú dve akcie. Vyhľadávanie YouTube totiž slúži dvom typom používateľov:

  • Používatelia, ktorí prichádzajú do aplikácie a hľadajú videá.
  • Používatelia, ktorí prichádzajú do aplikácie a nahrávajú svoje vlastné videá.

Z dôvodu úspory sú zahrnuté odkazy a obe akcie v hlavičke aplikácie YouTube. Používatelia tak môžu jediným klikom vyhľadať akékoľvek video alebo nahrať svoje vlastné. Ak máte vo svojej aplikácii konkurenčné akcie, zvážte to isté.


„Vyhľadať“ alebo poskytnúť radu?

Pri navrhovaní vyhľadávania v mobilných aplikáciach treba myslieť na ďalšiu vec, a to text vo vyhľadávacom poli. Aby ste sa správne rozhodli, musíte si položiť otázku:

"Budú moji používatelia vedieť, aký druh vecí môžu vyhľadať pomocou tejto vyhľadávacej funkcie?"

Vo väčšine prípadov áno, ale najlepšie by mohlo byť zahrnúť textovú nápovedu do vyhľadávacieho panela, aby ste sa uistili, že veci nebudete zbytočne komplikovať. Chcem tým povedať:

Toto je aplikácia pre Airbnb:

Airbnb app search text

Airbnb ponúka text nápovedy, ktoré používateľov navádzajú na presnejšie výsledky vyhľadávania.


Vyhľadávací panel mi hovorí „Skúste„ Costa de Valencia “. Nie je to nevyhnutne výslovný návrh. Pomáha mi to viac zistiť, ako môžem pomocou tohto vyhľadávacieho panela preskúmať miesta, kde by som sa mohol ubytovať na nadchádzajúcej ceste.

Pre používateľov, ktorí využívajú Airbnb po prvýkrát, by to bol užitočný tip. Môžu prísť na web v domnení, že je to ako Hotels.com, ktorý umožňuje používateľom vyhľadávať napríklad lety a požičovne automobilov. Airbnb namiesto toho poskytuje všetko pre komfortné ubytovania a dobrodružné zážitky, takže tento vyhľadávací text je dobrý spôsob, ako usmerniť používateľov správnym smerom a zabrániť im v odpovedi typu „Je nám ľúto, nenašli sa žiadne výsledky, ktoré zodpovedajú vášmu vyhľadávaniu“.


2. Navrhovanie vyhľadávacieho panela a výsledkov v kontexte

Jeden bod, ktorý je potrebné vziať do úvahy, je zistiť, kam umiestniť vyhľadávací prvok. Teraz musíte premýšľať o tom, ako predstaviť výsledky používateľom mobilných aplikácií:

Jednoduché vyhľadávanie

Toto je najzákladnejšia z vyhľadávacích funkcií, ktoré môžete ponúknuť. Používatelia zadajú dopyt do vyhľadávacieho panela. Relevantné výsledky sa nachádzajú nižšie. Inými slovami, necháte na svojich používateľoch, aby si boli vedomí toho, čo hľadajú, a aby to správne zadali.

Po zadaní relevantného dotazu môžete poskytnúť výsledky mnohými spôsobmi.

V prípade aplikácie ako Flipboard sa výsledky zobrazujú ako populárne hashtagy:

Flipboard app search results

Flipboard zobrazuje výsledky vyhľadávania ako zoznam hashtagov.


Výsledky vyhľadávania sa nezobrazujú najbežnejšie, ale v tomto konkrétnom kontexte to má zmysel. To, čo používatelia hľadajú, sú kategórie obsahu, ktoré chcú vidieť vo svojom informačnom kanáli. Tieto kategórie s hashtagmi umožňujú používateľom vybrať si témy, ktoré sú pre nich najrelevantnejšie.

ESPN má tradičnejšiu funkciu základného vyhľadávania:

ESPN app search results

ESPN navrhla výsledky vyhľadávania do tradičného zoznamu.


Ako vidíte, ESPN poskytuje zoznam výsledkov, ktoré obsahujú kľúčové slovo. Ako uvidíte v nasledujúcich príkladoch, vyhľadávanie aplikácií môžete naprogramovať tak, aby používateľov podrobnejšie sprevádzali výsledkami, ktoré chcú vidieť.

Filtrované vyhľadávanie

Podľa spomínaného prieskumu Kissmetrics je pokročilé filtrovanie obľúbenou metódou vyhľadávania medzi používateľmi webových stránok. Ak má vaša mobilná aplikácia veľa obsahu alebo rozsiahly inventár produktov, zvážte pridanie filtrov na koniec svojej vyhľadávacej funkcie, aby ste zážitok ešte vylepšili. Vaši používatelia už poznajú techniku ​​vyhľadávania. Navyše vám ušetrí ťažkosti s pridaním rozšírení v samotnej funkcii vyhľadávania.

Yelp je toho pekným príkladom:

Yelp app search filters

Používatelia Yelp majú po zobrazení vyhľadávania k dispozícii možnosti filtra.


Pri vyhľadávaní vyššie som pôvodne hľadal reštaurácie v mojej „Aktuálnej polohe“. Medzi rôzne zobrazené filtre som sa rozhodol pridať k môjmu dotazu „Objednávku doručenia“. Môj vyhľadávací dopyt potom bol nasledovný:

Reštaurácie> Aktuálne umiestnenie> Donáška

To sa skutočne nijako nelíši od používania strúhanky (😅 breadcrumbs) na webe. V takom prípade umožníte používateľom úvodnú prácu zadaním vyhľadávacieho dotazu. Potom im dáte k dispozícií filtre, ktoré im umožnia ďalej zúžiť vyhľadávanie.

Toto je opäť ďalší spôsob, ako znížiť pravdepodobnosť, že používatelia narazia na odpoveď typu „Žiadne výsledky“. Nakoľko filtre korelujú so skutočnými kategóriami a segmentáciami, ktoré existujú v aplikácii, môžete sa ubezpečiť, že zakaždým skončia s platnými výsledkami vyhľadávania.

Ďalším dobrým prípadom použitia filtrov sú webové stránky elektronického obchodu. Wayfair to robí takto:

Wayfair app search filters

Wayfair zahŕňa do vyhľadávania filtre, ktoré používateľom pomôžu zúžiť výsledky.


Zoznam výsledkov vyhľadávania Wayfair je pre trh elektronického obchodu pomerne štandardný. Zobrazí sa počet položiek, za ktorým nasleduje mriežka zhodných obrázkov produktu a súhrnné podrobnosti.

Wayfair má však rozsiahly inventár. Rovnako je to aj s ostatnými online velikánmi, ako sú Amazon a Zappos. Keď teda hovoríte používateľom, že bolo pre nich nájdených 2 975 položiek, potrebujete spôsob, ako im maximálne zjednodušiť vyhľadávanie.

Umiestnením tlačidiel Zoradiť a Filtrovať priamo vedľa výsledku vyhľadávania povzbudzujete používateľov, aby s hľadaným výrazom vykonali trochu viac práce a zaistili si tak tie najlepšie a najrelevantnejšie výsledky.


Prediktívne vyhľadávanie

Automatické dopĺňanie je niečo, čo už vaši používatelia poznajú. Pre aplikácie, ktoré obsahujú množstvo obsahu, môže byť využitie tohto typu vyhľadávacích funkcií veľmi užitočné pre vašich používateľov.

Po prvé, už vedia, ako to funguje, a preto nebudú prekvapení, keď sa pred nimi objavia súvisiace návrhy dopytov. Automatické dopĺňanie navyše ponúka určitý druh prispôsobenia. Keď zhromaždíte viac údajov o používateľovi, ako aj o druhoch vyhľadávaní, ktoré vykonáva, automatické dokončovanie predvída jeho potreby a poskytuje odkaz na požadovaný obsah.

Pinterest je aplikácia pre sociálne médiá, ktorú ľudia používajú na zhromažďovanie obsahu, ktorý ich zaujíma, a na hľadanie inšpirácie pre všetko, čo v živote robia:

Pinterest app search autocomplete

Pinterest predpovedá vyhľadávanie používateľov a poskytuje skratky automatického dopĺňania. 


Pozrite sa na výsledky vyhľadávania vyššie. Môžete povedať, na čo som v poslednej dobe myslel? Prvou vecou bolo, ako si vyzdobím nový byt. Druhou je moje ďalšie tetovanie. A aj napriek tomu, že som iba vyťukal slovo „malý“, Pinterest okamžite vedel, čo ma naposledy zaujímalo. To nemusí nevyhnutne znamenať, že som ako používateľ prišiel do aplikácie s týmto konkrétnym zámerom dnes ... ale je pekné vidieť tento osobný dotyk, keď pracujem s vyhľadávacím panelom.

Ďalšou aplikáciou, ktorú častokrát používam, je aplikácia Apple Photos:

Apple Photos app search

Aplikácia Apple Photos používa automatické dopĺňanie, aby pomohla používateľom nájsť najrelevantnejšie fotografie.


Okrem toho, že ho používam na ukladanie všetkých svojich osobných fotografií, pravidelne ho používam na vytváranie snímok obrazovky do práce (ako som to robil v tomto článku). Ako si dokážete predstaviť, do tejto aplikácie ukladám veľa obsahu a hľadanie toho, čo potrebujem, môže byť nesmierne náročné.

Vo vyššie uvedenom príklade som sa snažil nájsť fotografiu, ktorú som urobil pri Niagarských vodopádoch na mojich cestách v USA, ale nemohol som si spomenúť, či som ju tak označil. Napísal som teda „voda“ a dostal som niekoľko užitočných návrhov na automatické dopĺňanie slov súvisiacich s „vodou“, ako aj fotografie, ktoré zodpovedajú popisu.

Do tohto segmentu by som tiež vložil výsledky nedávneho vyhľadávania. Tu je príklad od spoločnosti Uber:

Uber app recent search results

Posledné výsledky vyhľadávania spoločnosti Uber poskytujú skratky na jedno kliknutie pre akcie, ktoré používateľ často opakuje.


Predtým, ako som mal vôbec možnosť zadať vyhľadávací dopyt v aplikácii Uber, sa mi zobrazí moje posledné vyhľadávanie.

Myslím si, že by to bolo užitočné najmä pre ľudí, ktorí pravidelne využívajú služby zdieľania jázd. Pomyslite na profesionálov, ktorí pracujú v meste. Namiesto toho, aby vlastnili auto, používajú Uber na prepravu do a zo svojej kancelárie, ako aj na stretnutia s klientmi. Poskytnutím odkazu na posledné cesty vo výsledkoch vyhľadávania aplikácia Uber skracuje čas, ktorý strávia títo ľudia rezerváciou cesty.

Ak máte dostatok údajov o svojich používateľoch a máte spôsob, ako predvídať ich potreby, automatické dopĺňanie je vynikajúci spôsob, ako prispôsobiť vyhľadávanie a vylepšiť celkový dojem a UX dizajn.


Obmedzené vyhľadávanie

Myslím si, že tento bod „šetrenia času“ je dôležitou vecou, na ktorú by ste mali pri navrhovaní vyhľadávania mobilných aplikácií pamätať.

Na rozdiel od webov, kde väčšinou záleží na tom, aby trávil používateľ čo najviac času na vašich stránkach, to nie je vždy prípad mobilných aplikácií. Pokiaľ ste nevytvorili hernú alebo spravodajskú aplikáciu, v ktorej by používatelia mali dennodenne tráviť veľa času interakciou s aplikáciou, nie je zvyčajne dôležité množstvo času stráveného v aplikácii.

Vaším cieľom pri vytváraní mobilnej aplikácie je udržať si používateľov po dlhšiu dobu, čo znamená poskytovať zmysluplný zážitok, keď ju využívajú. K tomu výrazne prispeje dobre premyslená funkcia vyhľadávania, ktorá používateľov okamžite dostane k tomu, čo chcú vidieť, aj keď to znamená, že aplikáciu po pár sekundách opustia.

Ak máte aplikáciu, ktorá potrebuje čo najrýchlejšie vybaviť“ používateľov, pouvažujte nad obmedzením výsledkov vyhľadávania, ako to urobili v Ibotta:

Ibotta app search categories

Ibotta zobrazuje kategórie, v ktorých môžu používatelia vyhľadávať.


Aj keď používatelia určite môžu zadať ľubovoľný dopyt, ktorý by chceli, Ibotta objasňuje, že nižšie uvedené kategórie sú jediné, z ktorých je možné vyhľadávať. Slúži ako pripomienka toho, čo dokáže aplikácia, ako aj prostriedok na obídenie výsledkov vyhľadávania, ktoré nie sú pre používateľov dôležité.

Spoločnosť Hotels.com tiež obmedzuje svoju funkciu vyhľadávania:

Hotels.com limiting search results

Spoločnosť Hotels.com núti používateľov sa rozhodnúť, aby nedostali príliš veľa výsledkov.


Ako vidíte, používatelia nemôžu hľadať iba hotely v celej krajine Chorvátska. Je to príliš široký pojem. Používatelia by mali z takéhoto typu vyhľadávania hrozný zážitok. Predstavte si, koľko hotelov by sa zobrazilo v tomto zozname výsledkov.

Zúžením toho, čo môžu vaši používatelia hľadať, a výsledkov, ktoré vidia, môžete zlepšiť celkový dojem a skrátiť čas, ktorý strávia hľadaním.


Zhrnutie

Ako vidíte, vyhľadávací panel nie je dizajnovým prvkom na zahodenie. Keď vaša aplikácia sľubuje rýchly a pohodlný zážitok pre používateľov, vyhľadávací panel môže skrátiť čas, ktorý v nej musia tráviť. Môže to tiež zvýšiť hodnotu vašej aplikácie, pretože si to nevyžaduje veľa práce alebo úsilia získať pomocou nej požadovaný obsah.

Tieto ako aj mnoho ďalších detailov a postupov využívame, aby sme pre vás vytvárali čo najmodernejšie aplikácie, ktoré sú pre vašich zákazníkov naozaj intuitívne.

Pozrite si celý postup ako pri tvorbe aplikácií, tvorbe eshopov či webových stránok postupujeme.

Ďalšie články

Všetky naše referencie

Ďalšía kategória

Design