Navigace a vyhledávání Teorie navigace a navigační postupy
Skutečný a webový svět • navigace je schopnost přemísAt osoby nebo věci z jednoho místa na jiné • navigace (nejen) na webu by měla uživateli usnadnit pochopit, kde se nacházejí, kam mohou jít a jak se mohou dostat jinam • navigace se soustředí na to, aby usnadnila lidem najít cestu – co nejrychleji a nejúčelněji dosáhnout cíle, aniž by se ztraAli 2
Chování uživatele • zvíře pátrající po potravě: – informační všežravec zavětří vůni informace – jakmile je na stopě, drží se jí do doby než ji uštve – pokud se ztrácí, vrací se tam, kde cíA silnou vůni – když se zcela ztraA, vrací se na bezpečné místo nebo se snaží pátrat jinak
• strategie navigace nemusí být tak důležitá jako pocit správné cesty a vědění, kde se nachází – prostředky: url adresy, označení stránek, orientační stránky a navigační nabídky 3
Otázky při navigaci • primární – Kde jsem? – Kam mohu jít? – Jak se dostanu tam, kam chci jít?
• související s primárními – ztracený uživatel: Byl už jsem tady dříve?, Jak se dostanu tam, kde jsem byl? – dlouhá cesta (někdy pocit ztracenosA): Kdy už tam budem? 4
Kde jsem? • síť WWW nemá ústřední orientační body • vzdálenost (počet kliknuV) mezi 2 stránkami v daném okamžiku může být různá – možnost přímého přístupu – nutnost následování určité cesty
• prostředky vyjádření: URL adresa, označení stránek, barvy a styl dokumentů
5
Kde jsem? (2) • URL adresa – definuje umístění v síA WWW – přesně odpovídá na otázku “Kde jsem?” – ne vždy je pro uživatele užitečná – dynamicky generované weby (skripty s mnoha parametry)
6
Kde jsem? (3) • URL adresa (pokračování) – nejlépe jednoduché a zapamatovatelné URL – neskrývat URL adresy pokud není žádoucí zabránit uživateli v přímém přístupu ke stránkám
7
Kde jsem? (4) • označení stránek a webů – prvky označení: značka (logotyp), aktuální sekce (všechny sekce dané úrovně), aktuální stránka – konzistentní a zřetelná označení všech stránek – označení stránky odlišné od obsahu a navigace – ikona, logotyp, slovo s názvem organizace vracejí uživatele na hlavní stránku (“záchrana”) – stavový řádek – málo používané, ale snadné na implementaci (...) 8
Označení stránek • utlumení zvoleného tlačítka – “nemožné” ho vybrat – méně výrazná položka znamená méně důležitou volbu (šedá = neakAvní tlačítko) – výraznější tlačítko evokuje jeho vyšší důležitost
9
Označení stránek (2) • hloubkoměr – drobečková navigace (tzv. breadcrumbs = strouhanka) – sekundární forma navigace – jak hluboko od hlavní stránky se uživatel nachází – nezabírá příliš místa, redukuje počet kliknuV při návratu na vyšší úrovně Home > Computers > Notebooks ☺ Home | Computers | Notebooks ☹ 10
Drobečková navigace
11
Kde jsem? (5) • vzhled stránky lišící se oproA jiným stránkám – každá sekce má odlišnou základní barvu a grafické ztvárnění – variace by měly být nápadně odlišné, ale forma stránky musí zůstat konzistentní – barvy rozlišitelné pro všechny (cca 10 barev) – dostatečně odlišné moAvy: piktogramy, ilustrace – pozor na přemrštěné náměty – sklouznuV k metaforám, jimž nemusí uživatel vždy rozumět 12
Odlišný vzhled sekcí
13
Odlišný vzhled sekcí (2)
14
Kam mohu jít? • dostupné možnosA musejí být zřetelné – uživatel obvykle vybírá z možnosV, které jsou mu představeny – roletové nabídky, výsuvné nabídky − volby umístěné mimo obrazovku – skrývat cíle pouze pokud odkaz není důležitý nebo by vznikl zmatek
15
Kde jsem byl? • ztracený uživatel potřebuje vědět, kde už byl, aby dále nebloudil – zbarvení navšVveného odkazu – mechanismus historie prohlížeče (Zpět a Vpřed) – zpětné odkazy s výsAžnými názvy (“Zpět k…”) – indikace předchozích návštěv pomocí cookie – soubory s textovými informacemi serveru uložené v systému uživatele – orientační body – domovská stránka 16
Domovská stránka • rozcesV webu, které by mělo – snadno idenAfikovat provozovatele (grafická značka) –> důvěryhodnost – vysvětlit podstatu a povahu webu (slogan, upoutávka) – účinně směrovat každého návštěvníka správnou cestou (navigace může být odlišná – stručný popis sekcí, seznam podsekcí atd.) – být proto snadno zapamatovatelné: stabilní URL, neměnný vzhled 17
Konzistence navigace • množství prvků a umístění navigace by mělo být v rámci rozvržení stránky stálé – stabilita prvků v umístění, uspořádání a obsahu – častý problém (nekonzistence): změna popisku/ přidávání/odstraňování zvolených tlačítek z oblasA navigace – zřetelně oznámit přidání/odebrání navigačních prvků (rozbalení/zabalení položky)
18
Hierarchie navigace • primární navigace (nejdůležitější) − na každém místě webového sídla vypadá stejně – “Kde jsem?”, povědomí o zaměření webu – nejvýraznější (i umístění), měla by se vejít na obrazovku (zejména verAkálně) – prvky: značka, seznam sekcí, odkaz na domovskou stránku, vyhledávání, pomůcky – výjimky z konzistentního vzhledu (jiný účel než ostatní stránky): domovská stránka, formuláře 19
Primární navigace
20
Primární navigace (2)
21
Hierarchie navigace (2) • sekundární navigace − liší se dle sekce zvolené v globální navigaci (doplňuje hlavní navigaci) – “Kam mohu jít?”, jemnější rozčlenení obsahu a usnadnění orientace – samostatné provedení nebo integrované v panelu hlavní navigace – u rozsáhlých webů často odlišně řešena v různých jeho samostatných částech (subsites) – odlišný obsah a funkcionalita, jiní autoři odpovědní za obsah 22
Primární a sekundární navigace
23
Primární a sekundární navigace (3)
24
Primární a sekundární navigace (2)
25
Hierarchie navigace (3) • kontextová navigace – propojení stránek – témata nehodící se do globální ani lokální navigace, ale související s obsahem (upřesňují nebo poukazují na něco, co by mohlo uživatele zajímat) – obvykle v hlavním obsahu stránky (odkazy na související obsah) nebo jeho blízkosK (odkazy na související zboží) – nemá stanoveno pevné uspořádání
• třeA a další úroveň – použiA jiné formy navigace začíná být obAžně překonatelné 26
Stránka zaměřená na navigaci
27
Pohyb při navigaci • stránky orientované na navigaci by se měly pokud možno verAkálně vejít na obrazovku • minimalizovat vzdálenost mezi hlavními tlačítky navigace navzájem i vzhledem k tlačítku Zpět • nejlepší je umísAt navigaci vždy na obrazovku (aby se rolováním neposunula) • podokno − vzdálený prostředek navigace (načtení obsahu do hlavního okna) 28
Záložky v prohlížeči • vlastní ikona − tzv. favicon – výrazná idenAta díky tzv. tabbed browsingu – v záložce, adresním řádku, stavovém řádku – stejná pro celý web (může být svazující pro rozsáhlé weby) – formát .ico, rozměry 16 × 16 px – mulAikona − soubor obsahující více velikosV ikon
29
Základní navigační postupy • hypertextový odkaz = základ webové navigace – interní − v rámci jedné stránky nebo mezistránkový v rámci aktuáního webového serveru – externí − mimo aktuální web – strukturovaný − v navigačním panelu (předvídatelný) – nestrukturovaný − v obsahu (jeví se jako náhodný, podporuje přemýšlení a prozkoumávání) – staKcký − vede na stále stejný obsah – dynamický − cíl je vypočítán v době prohlížení stránky 30
Formy odkazů • hlavně musí být jasně odlišeny od obsahu • textové • grafické – tlačítka – ikony – obrazové mapy
• jiné − banery, rozevírací seznamy, nabídky 31
Textový odkaz • nejzákladnější forma definovaná prostým textem ve značce
• primární navigační odkazy i kontextové odkazy v textových materiálech • doplňkové odkazy k hlavní navigaci − duplikují hlavní navigaci na dlouhé stránce • alternaKva grafických odkazů
32
Grafické odkazy • grafický textový odkaz − obrázek obsahující text názvu • tlačítko − stylizace textového odkazu, aby vypadal jako tlačítko • ikona − malý názorný obrázek zastupující akci, obsah nebo enAtu (i ve spojení se slovem) • obrazová mapa − obrázek s tzv. akAvními plochami různých tvarů (oblasA s odkazem) 33
Vžité významy ikon na webu • ikony úkolů: Ask, upravit, odstranit, ... • navigační ikony: domů, nápověda, zpět, ... • obsahové ikony: zvuk, video, ...
34
Jiné formy odkazů • banner – reklamní tlačítko, často animované – efekAvita reklamy: podíl osob, které reklamu viděli a těch, které na ní klikli – bannerová slepota – uživatelé přizpůsobili smysly – standardní velikosA – odlišit nereklamní odkazy
• upravené formulářové prvky − rozevírací seznam – odkaz je spuštěn už výběrem 35
Použitelnost odkazů – vzhled • odkaz je modrý a podtržený – jiné formy označení odkazů: font, velikost písma
• • • • •
indikace navšVvených odkazů zpětná vazba – kurzory (šipka, ručička atd.) závorky kolem odkazů – “[Více...]” funkce rollover – přiměřené zvýraznění u tlačítek je zřejmé, že je možné na ně kliknout (zkosené hrany, sVnování) 36
Použitelnost odkazů – informace • jaký druh obsahu se načte – popisek indikující formát, vhodná je i ikona • kam odkaz vede – stejná/jiná stránka/web – odkaz “na začátek stránky” – na dlouhých stránkách – externí web – popisek v závorce, ikona
• jak dlouho se bude načítat – u stahovaného souboru uvedení velikosK • jak moc je odkazovaný obsah aktuální – datum poslední úpravy, ikona “Nové” • nutnost krátkých odkazů – poznámky, stavový řádek 37
Další navigační pomůcky • i když je navigace vytvořená správně, najdou se uživatelé, kteří se budou chVt v obsahu pohybovat jinak – vyhledávání – mapy serveru – indexy, glosáře – stránky novinek, nápovědy
38
Vyhledávání • potřebné pro weby s velkým množstvím obsahu (může být hlavní navigací) • vhodné pro pokročilé uživatele, časté a nedočkavé návštěvníky • fungování vyhledávacích nástrojů (obecně) – shromažďování stránek (spidering) – indexování stránek − označení stránky, aby bylo zřejmé o čem je – poskytnuV vyhledávacího mechanismu 39
Obecné fungování vyhledávače Uživatel vznese dotaz Obsah Indexující program posoudí obsah a vytvoří indexovou databázi
Databáze vyhledávacího nástroje Výsledky prezentovány uživateli
Shromažďující program
Prochází síť WWW a zaznamenává stránky
40
Vyhledávací mechanismus • označení, uspořádání a stránky s výsledky by měly do jisté míry napodobovat veřejné vyhledávače • není vhodné úplně napodobovat fungování veřejných vyhledávačů – cílem je pouze nasměrovat uživatele, lokální vyhledávání se očekává mnohem přesnější – nepřesnost je ovlivněna různými triky na zlepšení klasifikace stránek (placená inzerce atd.) 41
Rozhraní vyhledávání • základní kroky uživatele při vyhledávání – formulace dotazu – spuštění vyhledávání a čekání na výsledek – prohlížení výsledků – rozhodnuV týkající se využiV výsledků
• nejlépe na každé stránce – běžné vyhledávání (jednoduché vyhledávací pole) – rozšířené hledání (odkaz na vyhledávací stránku) 42
Formulace dotazu • formulář musí odrážet typ vyhledávaných dat − pokročilé vyhledávání – umožňuje uživateli usnadnit hledání – zvyšuje přesnost výsledků hledání – zkracuje dobu vyhledávání
• velikost primárního vyhledávacího pole (důležitost vyhledávání pro stránku) • nápověda k polím formuláře 43
44
45
Našeptávání • nabízení možných výrazů, podobných aktuálně vepisovanému − automaAcké doplnění • pomáhá uživateli urychlit splnění úkolu
46
Výsledky vyhledávání • webová navigace (možnost snadného opuštění stránky s výsledky hledání) • žádné výsledky – zpráva o neúspěchu – umožnit opětovné zadání dotazu – nápověda: možné důvody neúspěchu
• příliš mnoho nalezených položek: rozlišit to podstatné (čím více informací, Vm lépe) 47
Stránky s výsledky hledání • informace týkající se položeného dotazu: původní řetězec, počet prohledávaných a odpovídajících dokumentů, doba hledání • informace o nalezených položkách: název, URL, souhrn obsahu/náhled, významnost výsledku, odpovídající klíčová slova, datum poslední aktualizace, velikost, typ souboru • orientace v nalezených výsledcích: další úroveň navigace 48
49
Další úrovně navigace • procházení příliš velkým množstvím položek (již není vhodné zobrazit na stránce vše) • seřazené a seskupené do stránek o pevně daném počtu položek
50
Mapa serveru • na jedné stránce zobrazuje strukturu webu • vhodná pro weby se složitou strukturou a mnoha položkami v každé úrovni • uvedení důležitých informací: – “Kde jsem?”: označení stránky, ze které byla mapa zobrazena – “Kde jsem byl?”: označení navšAvených stránek – “Kam mohu jít?”: umožňuje stránku rovnou zobrazit • přístupná z každé stránky webu 51
52
Index serveru • abecední seznam stránek − nedává přehled o informační architektuře • vhodný pro velmi rozsáhlé weby, pro uživatele, kteří přesně znají termín, který hledají
53
Mrak pojmů/šVtků • povědomí o tom, co nejvíce zajímá jiné návštěvníky (kteří sami vyznačují hesla) • pojmy jsou abecedně seřazeny s vyznačením jejich popularity (důležitosK)
54
Problémové oblasA navigace • neposkytnuA tlačítka Zpět (použiAm zvláštních stránek s přesměrováním − detekce prohlížeče) • klamavé barvy odkazů (navšAvené, nenavšAvené) • nadměrné použiA podoken (nebránit v odejiA) • jedinečná navigace − kreaKvní flexibilita × použitelnost – nadměrně propracovaná tlačítka 55
Problémové oblasA navigace (2) • přílišné nároky na akKvitu uživatele (nutnost pamatování, pohyb, počet kliknuA, doba načítání) – nekonzistentní navigace – nekontrolovatelný pohyb/ změny prvků navigace
• “neviditelná” navigace – vypadající jako baner nebo umístěná blízko čásA vypadajících jako reklama • kombinace mnoha navigačních technik na jedné stránce 56
57
Kufrový test/navigační stres test • “náhodný”výběr nějaké zanořené stránky (obrázek bez URL, možné i černobíle) • u dobré navigace lze bez váhání zodpovědět – o jaký server se jedná (značka) – na jaké jsem stránce (název stránky) – jaké jsou hlavní sekce – jaké mám zde možnosA (lokální navigace) – kde se nacházím v hierarchii (breadcrumbs) – jak můžu vyhledávat 58
59
Literatura • Powel, T. A. Web design – kompletní průvodce. 2004. ISBN 80-‐7226-‐949-‐6. • Nielsen, J. Top 10 InformaKon Architecture Mistakes. 2009. URL: hrp://www.useit.com/ alertbox/ia-‐mistakes.html • Gube, J. Breadcrumbs In Web Design: Examples And Best PracKces. 2009. URL: hrp:// www.smashingmagazine.com/2009/03/17/ breadcrumbs-‐in-‐web-‐design-‐examples-‐and-‐ best-‐pracKces-‐2/
60
