Navigácia pomocou drobiek chleba, drobečková navigácia, omrvinková navigácia alebo breadcrumbs?

Dnes som testoval jeden slovenský produkt a v GUI som videl tvar, ktorý som ešte nikde nevidel. Je to často používaný webdizajn pattern a svieti skoro na každej webovej stránke. Veľa klientov to chce, respektíve im to odporúčame ale nevedia to pomenovať. Ťažko sa prekladá breadcrumbs do slovenčiny a hlavne doslovný preklad vôbec nevystihuje podľa mňa podstatu a metaforickosť anglického slova.

Môže vyzerať nejak takto:

Na stránke nemusí byť až taký viditeľný ako napríklad v tomto eshope s bižutériou.

Breadcrumbs v Čechách prekladajú ako drobečková navigace. U nás by bolo správnejšie podľa mňa omrvinková navigácia, ale určite NIE navigácia pomocou drobiek chleba. Ale prečo to preboha prekladať? Je to proste breadrumbs. A nie žiadne drobky ani iné patvary. A kľudne sa do mňa pustite slovenčinári.

Nové GUI prvky na youtube

To, že google ruluje a ownuje webové služby mi bolo jasné už dávno. Dnes som si všimol nových navigačných prvkov  pri videu na youtube a prekvapilo ma aký krásny navigačný prvok zvolili pre nastavenie rýchlosti prehrávania videa.

Robiť alebo nerobiť prototypy webových stránok?

Problémová oblasť:

  1. Klient dodá najviac nejaký excel súbor, aj to len málokedy.
  2. Klient nevie čo chce.
  3. Klient nevie ako to funguje štandardne a nevie ani ako to chce, aby to fungovalo.
  4. Klient nerozumie IT, technológii, procesom.
  5. Často krát klient nemá ani predstavu o dizajne, rozmiestnení prvkov, inzercie, …

Samozrejme sú výnimky. Niekedy ma prekvapí objednávateľ presnou špecifikáciou, rozumie sa problematike a dá mi konkrétne požiadavky.

Doteraz som väčšinou vždy nakreslil na stretnutí kopec obrázkov na papier, analyzoval potom požiadavky v hlave a dizajnoval rovno v grafickom programe. Zistil som však, že sa oplatí robiť ešte pred dizajnovaním prototyp webovej stránky, eshopu alebo aplikácie.

Výhody:

  1. Nezoberie to až tak veľa času a ušetrí veľa času v budúcnosti.
  2. Klient môže odsúhlasiť prototyp(rozmiestnenie prvkov, názvy položiek,…)
  3. Lepšie je mať niečo viditeľné a klikateľné na webe ako mať 50 stranovú špecifikáciu s nepresnými požiadavkami.
  4. Je to vlastne jedna z hlavných čŕt čoraz viac zaužívanejšieho prístupu ako je agilné programovanie .
  5. Dajú sa na prototype robiť používateľské testy.
  6. Vidí sa budúca funkcionalita. Dá sa lepšie naceniť.
  7. Vytvorí sa predstava o počte podstránok, viewov, o ich obsahu.
  8. Pokryjú sa aj  scénáre použitia používateľa.
  9. Šablóny prototypu sa dajú transformovať aj do výslednej šablóny po vytvorení dizajnu.
  10. Jednoduchšie špecifikovanie dizajnu pre dizajnéra (niekedy to môže byť ale kontraproduktívne, keď sa obmedzí webdizajnér daným prototypom a nevymýšľa vlastné “kreatívne” rozmiestnenie elementov webovej stránky) .

Čo použiť?

Existujú CSS frameworky ako blue print, 960 grid system a veľa ďalších, kde sú vytvorené základné layoutovacie prvky, je definovaná základná typografia. Ideálne je použiť WYSIWYG editor. Naposledy keď som robil cenovú ponuku pre jeden eshop, tak som ešte pred tým vytvoril prototyp. Ľahšie sa komunikovali potreby, robil som to síce zadarmo netušiac, či vôbec získam danú zákazku. Je to riskantný krok, ale oplatil sa spraviť, lebo sa veci urýchlili. Asi 8 viewov mi trvalo ručne spraviť asi 2 hodiny, čo ma nezabilo.  Myslím, že to muselo zaujať viac ako by som poslal len textovú špecifikáciu.

Nápad na Web 2.0 aplikáciu

Vytvoriť v budúcnosti webovú aplikáciu, v ktorej by sa dali prototypy robiť.  Samozrejme to musí mať export ako validné XHTML, CSS, najvhodnejšie by bolo aj keby to je pripravené už aj na ďalší vývoj a nasadenie na ľubovoľnom CMS. Protyp by mal byť ale klikateľný, a preto rozmýšľam nad vytvorením aj nejakého maličkého frameworku, ktorý by sa staral o administráciu všetkých viewov, ich prelinkovanie. Išlo by hlavne o nástroj pre web dizajnérov. Preťahovanie elementov z roletky a podobné  javascriptové vychytávky by sa takisto zišli. Niečo podobné už existuje a už som to aj zmienil na tomto blogu, ale to bolo skôr len za účelom skicovania, bolo to platené, nie je zatiaľ implementovaná interaktivita. Zišlo by sa niečo, čo sa dá robiť cez web, priamo na stretnutí s klientom a sautomatizuje to čo najviac činností. Uvidím ako na tom budem s časom. Ak si náhodou AJAX guru, tak sa ozvi kôli istej spolupráci.

Takto som vyriešil vyhľadávanie v jednom zadaní

Ak používate prehliadač firefox pre vyhľadávanie stlačte klávesovú skratku CTRL U a potom CTRL F. Zadajte hľadaný výraz a stlačte Enter.

Ak používate prehliadač internet explorer 7 pre vyhľadávanie kliknite na stránku pravým tlačidlom a vyberte možnosť view source. Potom slačte klávesovú skratku CTRL F a zadajte hľadaný výraz a stlačte Find Next.

Poznámka autora: použiteľnosť 0 bodov. Ale pobavili sme sa.