spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Peter Druska 8.10.2010, článok je súčasťou seriálu Modelovanie webového sídla
Hodnoť článok:
0 0

Modelovanie webového sídla - záujem klienta

Aký je to dobrý dizajn? Čo by mal spĺňať dobrý dizajn a čo je naopak zlý dizajn?

Vo webovom dizajne musí byť aj klient oboznámený s tým, čo sa smie, a čo nie je vhodné. Mal by vedieť, že na webové stránky ponúkajúce predaj elektrosúčiastok nepatria meniny a podobne. Je toho mnoho, čo webový dizajn robí dizajnom, a je toho ešte viac, čo ho dizajnom nerobí. To, čo si opíšeme v tomto článku bude súhrn vlastností, ktoré by mal klient poznať, že sú vo webovom dizajne dobré a robia z výsledku skutočné dielo a nie zlepeninu všetkého možného i nemožného. Tieto vlastnosti nám pomôžu vytvoriť rámec na to, aby každý vedel, čo sa na konkrétnu stránku hodí, a čo nie. Bude to užitočný filter, ktorým sa dá argumentovať pre dobro klienta i spoločnosti.

Mal by to poznať ako tvorca, tak i klient. Ak to nepozná klient, úlohou cechu webových dizajnérov je robiť citlivú osvetu práve týmto smerom. Nebude to snaha zjednodušovať si prácu, bude to snaha o kultivovanie tohto odboru, jeho zdokonalenie a očistenie v očiach spoločnosti, bude to snaha o napravenie chýb, ktoré sa stali na začiatku.

Chyba najväčšia

Najväčšou chybou, ktorá sa udiala kedysi dávno, bola veta „optimalizované pre všetky prehliadače“. Chyba veľkého rozmeru, pretože odjakživa neboli prehliadače vždy rovnaké. Veta „optimalizované pre IE 6+“ bola menším zlom, ako „pre všetky“, pretože IE 6 bol vo svojej dobe technologicky najvyspelejší prehliadač, ukazoval, kam to všetko bude smerovať. Využíval posledné možnosti technológií. Nevravím, že dnes máme robiť webové stránky len pre „najmodernejšie“ prehliadače, ale ukazuje to princíp, že je dobré robiť osvetu, že technológia ide nejakým smerom, ktorý znamená tieto výhody a iné obmedzenia.

Jedna vec je urobiť webové sídlo použiteľné v každom prehliadači, a druhá urobiť ho rovnakým v každom prehliadači. Práve daná rovnakosť je na škodu veci a brzdí vývoj a pokrok. Oveľa väčším prínosom je zamerať sa na použiteľnosť a z každého zariadenia dostať maximum jeho možností. Neobmedzovať sa zhora najhorším, ale pre každý typ zariadenia ponúknuť maximum jeho možností tak, aby návštevník dostal všetky funkcie.

Chyba v tomto smere sa urobila na začiatku, a urobil ju práve cech webových dizajnérov, keď ešte neboli pravidlá jasne sformulované.

Prečo sa tak ale stalo? Pretože vznikol fixný návrh „plagátu“, návrh webového sídla pevných rozmerov a pevného rozloženia v nejakom grafickom editore s peknými farebnými hračkami, odleskami, tienikmi, … Chápem, boli to prvé kontakty s farebnými stránkami, pokusy vytvoriť niečo úchvatné pre každého. Bol to prvý kontakt, snaha prekročiť svoje medze. Tak sa strihali návrhy na vrstvy a tie sa pozicovali na webovej stránke tak, aby boli na pixel presne v každom prehliadači (zariadení). Tento pokus žiaľ zanechal stopy, ktoré musíme vykoreniť z povedomia. Čiastočne sa to darí aj s prispením iných autorít vo svete technológií. Istý čas to ale potrvá.

Hypertext má dnes už jasne definované pravidlá - je ním HTML štandard, je ním CSS štandard, sú to obmedzenia s nimi spojené. Preto nastal čas zadefinovať pravidlá, ktoré je pre dobrý webový dizajn nutné dodržať, keď s nimi pracujeme.

Je od webového dizajnéra doslova nezodpovedné vyhlásiť, že „optimalizuje pre všetky prehliadače podľa W3C štandardov“. Áno, znie to dobre, ale neslúži to dobre celému odboru, a nie je to ani možné. Dobrý webový dizajn počíta s rodzielmi, nesnaží sa ich plátať. Ale aby sme neostali len v rovine rozprávania o tom, čo je zlé, a čo dobré, poďme vysloviť pravidlá, ktoré by mali byť tým prvým kontaktom klienta s webovým dizajnérom. Resp. pravidlá, ktoré definujú webové sídlo, ak mu chceme dať prívlastok „dizajn“.

Pokiaľ si klient neželá tieto pravidlá akceptovať, pokojne si môže vybrať konkurenciu. No stránky podľa jeho predstáv o meninách a javascriptových hodinách nemusia zodpovedať tomu, čo chce stránkami skutočne povedať, a to mu treba citlivo vysvetliť.

Dizajn na webe

Aby sme mohli nejaké pravidlá definovať, musíme mať odrazový bod. Tým bodom je grafický dizajn, ktorého mladším bratom webový dizajn nepochybne je. Prípadne to môže byť dizajn priemyselný, ktorý má pravidlá definované jasnejšie a zmysluplnejšie, ako dizajn grafický. Poďme hľadať základy práve tam. Mala by to byť zmes typografie, grafického dizajnu, webových technológií a myšlienok, ktoré sú platné, a ktoré reálne fungujú. Z toho neskôr vyplynú obmedzenia, ktoré je nutné poznať.

Uvediem desať pravidiel dobrého dizajnu, ktoré sformuloval Dieter Ramms pre dizajn priemyselný, ktoré doplním, prípadne upravím pre potreby dizajnu webového.

Dobrý dizajn je inovatívny

Keď sa vyrába nové webové sídlo, je vždy inšpirované niečím, čo už bolo vyrobené doposiaľ. Je to dobré, prospieva to vývoju vecí, ktoré sú používané neustále dookola (navigácia, text, …). Je však vhodné prichádzať s inováciami, premýšľať, či by sa niečo nedalo urobiť lepšie, ako sa to robilo v minulosti. Nie je to jednoduché, vyžaduje to čas a odhodlanie, niekedy len osvietenie vyúsťujúce do praktickej realizácie, no dá sa to.

Použitie nových technológií, ako napríklad CSS na animované pozadie, ale nie na úkor bodov ďalšich. Inovatívnosť je obmedzená technológiou, s ktorou sa pracuje. Navyše, inováciu netreba robiť nasilu, lebo potom to môže dopadnúť zle. Niekedy inovovať nie je nutné, inokedy je nevhodné.

Dobrý dizajn robí produkt použiteľným

Pri vývoji väčšieho, ale i menšieho webového sídla sa dá urobiť jednoduchý a relatívne lacný test použiteľnosti. Stačí vziať 5 ľudí a zadať im dôležité úlohy, ktoré majú vykonať a sledovať ich. Podľa toho sa dá veľmi dobre a už v priebehu dvoch dní usúdiť, čo je správne a čo nie. Ten čas sa oplatí investovať do použiteľnosti. Vráti sa v podobe spokojných návštevníkov (môžu to byť zákazníci, a to sa počíta).

Dobrý dizajn je estetický

Kvalitné webové sídlo vyzerá dobre v každom ohľade. Či v staršom prehliadači pri zohľadnení jeho obmedzení, či v tom najnovšom. Nevyzerá všade rovnako, no mal by maximálne dobre. Webový dizajnér pozná rozdiely a nesnaží sa ich zakrývať.
Estetickým sa tu rozumie celková kompozícia farieb, písma, obrázkov, videí, rozmiestnení. Webové sídlo ako celok musí byť veľmi dobre navrhnuté, aby dávalo zmysel na každom zobrazovacom zariadení, ktoré sa očakáva.

Dobrý dizajn robí produkt zrozumiteľným

Dobrý webový dizajn myslí na používateľa a nepletie ho zmenami šitými horúcou ihlou v snahe niečo zachraňovať. Ak sa niečo zachraňuje, chyba sa stala niekedy skôr v procese tvorby, niekde v manažérskom rozhodnutí. Zrozumiteľné webové sídlo používateľ pozná dlhé roky, jeho funkcie sa zásadne nemenia s časom. Ak toto neplatí, niečo je nesprávne a treba zrevidovať ostatné body.

Dobrý dizajn sa nevnucuje

Kvalitná práca nepotrebuje otáčať verných zákazníkov skrze svoje produkty a nepustiť ich ku konkurencii. Dobré webové sídlo sa vie predať samo už len tým, aké je, čo ponúka, aké potreby napĺňa, akú cieľovú skupinu sleduje. Dobrý dizajn nemusí podkopnúť nohy, aby si používateľ všimol daný produkt. Dobrý dizajn podknutého zdvihne a pomôže mu na ceste ďalej. Je to dosť obrazne povedané, ale skúsim konkretizovať. Keď už som spomínal propagáciu vlastných produktov, skúsme to na tom príklade.

Vnucovanie sa v tomto prípade chápem ako zbytočný banner na daný vlastný produkt. Dá sa to riešiť aj inak, úplne v súlade s dizajnom stránok, ale tak, aby zbytočne nič neposkakovalo, nič sa nekazilo v rozložení, nepchala sa všade reklama. Žiaľ, mnoho riešení je napochytro a vtedy sa robia chyby. Tak ako všetko, aj toto vyžaduje starostlivé premyslenie.

Dobrý dizajn je poctivý

Vztiahnuté na webový dizajn, tak kvalitne urobené sídlo nezakrýva funkčnosť pod inú funkciu, neurobí používateľskú akciu zaňho, nemyslí dopredu, len sa mu otvára a necháva sa naučiť. Vyplnenie ankety nikdy nesmie ovplyvniť používateľský profil bez toho, aby to používateľ vedel. Dobrý dizajn musí byť poctivý. Nepoctivosť sa trestá zahodením výrobku do koša. V tomto prípade znechutenie zo služby a odchod ku konkurencii.

Dobrý dizajn je dlhoveký

Príkladom dlhovekého webového sídla je alistapart.com, ktorého dizajn sa zásadne nezmenil od augusta roku 2005. To je už päť rokov, čo je v oblasti internetu slušná doba. Na druhú stranu, ak môže byť dobrý webový dizajn skutočne dlhoveký, tak je potom otázne, či rýchle zostarnutie nejakého iného vzhľadu nie je spôsobené práve tým, že sa jedná o podpriemerný až priemerný dizajn. Častokrát je zmena spôsobená len pocitom stereotypu jeho majiteľa, že už má nutkanie meniť a myslí si, že urobí dobre.
Častokrát sa jedná skutočne o zlepšenie, no je to preto, že zmenený dizajn bol zlý, čo sa týka koncepcie podľa spomínaných pravidiel.

Dobrý dizajn je premyslený do najmenších detailov

Detaily dotvárajú celok. Bez detailov ani na krok. Ako príklad si vezmime už spomínané webové sídlo alistapart.com.

A list apart

Od typografie, grafické prvky, cez favikonku a obsah, až po ilustrácie je to premyslený koncept, ktorý trvá už niekoľko rokov. Stále úspešne. Je to dlhoročne úspešný koncept, ktorý je stále svieži, moderný a predbieha dobu. Tento webový dizajn je skutočne nadčasový.

Dobrý dizajn je šetrný voči životnému prostrediu

Facebook je učebnicový príklad zlého návrhu webového sídla, pretože zaťažuje životné prostredie viac, ako spam. Ak treba postaviť elektráreň na rozosielanie notifikácií, ktoré bežný človek aj tak zahodí, potom je to zlý návrh webového sídla. V tomto prípade sa nedá hovoriť o dobrom webovom dizajne, aj keď možno spĺňa iné body.

Dobrý dizajn je maximálne minimalistický

Webový dizajn je o tom, že každý prvok má svoju jednoznačnú funkciu potrebnú pre prácu so sídlom alebo s jeho časťou. Každý prvok nesúci funkciu nepotrebnú ho robí nepoužiteľným. Dobrý návrh je taký, ktorý nepotrebuje veľa funkcií. Ako príklad si vezmime jednoduchý prvok: meniny. Sú fajn na stránkach typu kalendar.sk alebo kvety.sk, no sú nevhodné na stránkach venujúcich sa elektronike. Niekde svoju funkciu majú: kvety môžete podarovať na meniny niekomu, o kom ste nevedeli, že meniny má, no vy takú osobu poznáte. V kalendári majú taktiež obdobný význam, len v širších súvislostiach. Pri elektronike význam menín neexistuje, tam je cieľová skupina úplne iná.

Keď som tak premýšľal nad týmito pravidlami, neprišiel som na to, ako ich upraviť, zmeniť, vylepšiť, zredukovať. Myslel som si, že tak aj učiním, ale všetko, čo som chcel povedať sa dalo zahrnúť vždy do jedného z nich. Nie je dôvod sa ich nedržať a na ich základe stanoviť pravidlá pre dobrý webový dizajn. Práve naopak, mali by sme sa ich držať, pretože sú dobré.

Ako teda zabezpečiť to, aby o tom vedel klient? Ako urobiť to, aby chápal tieto pravidlá a akceptoval výsledok práce webového dizajnéra? Skúsme na to zodpovedať. Existuje viac možností:

  • výchova v rodine i v škole,
  • zahrnúť to do zmluvy (čo je pomerne násilný spôsob - môže sa zahrnúť až po oboznámení sa oboch strán s pravidlami),
  • prezentovať klientovi svoje práce v rámci týchto pravidiel,
  • príklady iných prác, ktoré nezodpovedajú týmto pravidlám (klienta to môže občas bolieť),
  • robiť osvetu.

Najlepšie však je skombinovať všetky vyššie vymenované spôsoby dohromady a postaviť na tom komunikáciu, prezentáciu i predaj. Najťažším bodom na realizáciu je výchova v rodine i v škole, pretože to vyžaduje celoplošné zapojenie sa.

Myslím si, že keď sa z toho urobí ucelený koncept, bude to fungovať. Niekde zrejme bude treba „pritvrdiť“, niekde to pôjde jednoduchšie, ale tá budúcnosť za to stojí. Aj keď nie každý na to pristúpi hneď na začiatku, pretože existuje množina ľudí, ktorá chápe webový dizajn ako naskladanie prvkov podľa fantázie na jedno miesto. To je žiaľ omyl, ktorý vytvára už aj škola, pretože v osnovách informatického vzdelania ja „tvorba www stránky vo Worde“.

Ak sa bude novým generáciam prezentovať tento veľmi chybný pohľad na „tvorbu webových stránok“, v podstate webový dizajn, tak stále budú na svet prichádzať ako na bežiacom páse klienti, ktorí nové webové sídlo chápu presne ako stranu vo Worde aj s jeho ovládacími prvkami - nevkusne a nevhodne navrhnutú. Škola by mala byť v súčinnosti s cechom webových dizajnérov jedna skupina tvoriaca podhubie kvalitnej tvorby. Pokiaľ sa bude zanedbávať čo i len jedna zložka, situácia bude stále tak žalostná, ako je.

Z druhého pohľadu, zmeniť sa to nedá v priebehu roka. Chce to minimálne 20 rokov, aby sa situácia zmenila k lepšiemu - výmena generácií. Netreba však zúfať, niekedy sa začať musí, tak prečo by to nemohlo byť práve dnes?

Čo by mal klient poznať

Zhrňme si to na záver. Klient by mal poznať predovšetkým to, že existuje množstvo prehliadačov, v ktorých sa môže jeho webové sídlo zobrazovať, a v každom môže navyše vyzerať inak, v žiadnom prípade totiž nie rovnako.
To je chyba spomínaná na začiatku. Od prehliadačov na stolných počítačoch, cez prehliadače v mobilných zariadeniach a televízoroch, až po tlačiarne. Mal by poznať aj to, že pokiaľ sa obsah jeho sídla bude tlačiť, tak sa taktiež jedná o druh prehliadača, a že tam je to taktiež iné práve kvôli používateľovi - tlač webovej stránky je len iný pohľad na jej obsah.

Mal by byť oboznámený so základom práce s textom na webe, nazvem to „webovou typografiou“, pretože práca s okrajmi, medzerami, úvodzovkami, … je aj pre webové sídla dôležitá. Mal by poznať aj to, že webový dizajn sa robí hlavne v nástrojoch HTML, CSS a prehliadač, nie v grafickom editore, v ktorom sa vytvára vlastná grafika pre sídlo.

No a na záver by mal byť oboznámený s desiatimi pravidlami pre dobrý webový dizajn spomínanými v tomto článku vyššie.

Peter Druska Peter Druska

Vyše 13 rokov som robil CSS/HTML šablóny webových sídiel ako Pokec.sk, Azet.sk a iných. Robil som vlastné iOS appky, neskôr som prešiel programovať najskôr do Starbug.eu, neskôr do Inloop.eu. Pomedzi to som učil chvíľu na gymnáziu, no odišiel som, pretože som bol myslením nekompatibilný. Po inloope som prešiel do firmy become.sk, kde mám za úlohu vybudovať oddelenie mobilného vývoja. Tomu sa teraz venujem naplno, popri tom robím aj vývoj pre iOS. Tu sme založili značku Bedots.eu.


Hodnoť článok:
0 0

0 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

Zajtra.sk > Programovanie > CSS/HTML > Modelovanie webového sídla - záujem klienta


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama