22
birželis 2008

10 efektyvaus web dizaino principų

Dirbant su dizaineriais dažnai tenka pastebėti, kad jų piešiami dizainai yra gražūs, tačiau ne visada efektyvūs ir patogūs vartotojui, todėl su autorių leidimu nusprendžiau išversti porą straipsnių šia tematika.

Patogumas ir praktiškumas, o ne vizualinis dizainas nulemia puslapio sėkmę ar nesėkmę. Į vartotoją orientuotas (user-centric) dizainas tapo standartu sėkmingam ir į pelną orientuotam web dizainui, kadangi vartotojas yra vienintelis asmuo, kuris spaudžią pelės mygtukus ir viską nusprendžia. Galu gale, jei vartotojas negali pasinaudoji kažkokiu puslapio teikiamu funkcionalumu, tai to funkcionalumo gali ir nebūti.

Šio straipsnio tikslas nėra aptarinėti konkrečių įgyvendinimo niuansų (pvz. kur patalpinti paieškos laukelį), kadangi šiomis temomis informacijos ir taip netrūksta. Pagrindinis dėmesys bus skiriamas principams, patarimams ir efektyvaus web dizaino metodams, kurie teisingai taikomi turėtų vesti prie lengvesnio pateikiamo turinio suvokimo ir modernesnio dizaino.

Efektyvaus web dizaino principai

Norint teisingai panaudoti šiuos principus pirmiausiai turime suprasti, kaip vartotojai naudojasi svetaine, kaip jie masto ir kokie yra baziniai vartotojų elgsenos modeliai.

Kaip masto vartotojai?

Vartotojų įpročiai internete yra labai panašūs į pirkėjų įpročius parduotuvėje. Lankytojai žvilgteli į kiekvieną naują puslapį, nuskenuoja dalį teksto ir paspaudžia pirmą pasitaikiusią nuorodą, kuri patraukia jų dėmesį arba bent iš tolo primena tai ko jie ieško. Realiai yra didelės dalys puslapio į kurias vartotojai netgi nepažvelgia.

Didžioji dalis lankytojų ieško kažko įdomaus ar naudingo ir ką galima būtų paspausti, kai tik surandama kriterijus tenkinanti nuoroda vartotojai ją paspaudžia, naujam puslapiui neatitikus vartotojo lūkesčių pasinaudojama “Back” mygtuku ir paieškos procesas prasideda iš naujo.

  • Lankytojai vertina kokybę ir patikimumą. Jeigu puslapis pateikia aukštos kokybės turinį, tai jie linkę susitaikyti su tokiais trūkumais, kaip reklama ar puslapio dizainas. Būtent dėl šios priežastis svetainės su nepatraukliu dizainu, tačiau kokybišku turiniu per laiką susilaukia daugybės vartotojų. Turinys yra kur kas svarbesnis, nei jį pateikiantis dizainas.
  • Lankytojai neskaito teksto, jie skenuoja. Analizuodami internetinį puslapį, jie ieško kažkokių atraminių taškų ar nuorodų, kurios padėtų orientuotis puslapio turinyje.

Skenavimas

vartotojai neskaito – jie skenuoja. Atkreipkite dėmesį, kaip “karštos” zonos nutrūksta sakinio viduryje, toks elgesys tipiškas skenavimo procesui

  • Interneto lankytojai yra nekantrūs ir reikalauja momentinių rezultatų. Tai galima būtų nusakyti labai paprastu principu: jeigu svetainė neatitinka vartotojo lūkesčių, tai dizaineris neatliko savo darbo tinkamai ir kompanija praranda pinigus. Kuo labiau vartotojas verčiamas mastyti ir kuo mažiau intuityvi yra navigacija, tuo greičiau lankytojai paliks puslapį ieškodami alternatyvų.
  • Lankytojai nepriima optimalių sprendimų. Lankytojai neieško greičiausio kelio rasti dominančią informaciją, jie neskenuoja puslapio nuosekliai, keliaudami nuo vienos puslapio sekcijos prie kitos. Dažniausiai lankytojai pasirenka pirmą patenkinamą rezultatą, kai tik jie randą nuorodą, kuri galbūt veda tikslo link, tai yra didelė tikimybė, kad ją iškart ir spustelės. Patenkinamų rezultatų siekimas vartotojui yra kur kas efektyvesnis, nei geriausių rezultatų ieškojimas. [video]


Abu šie paveikslėliai iliustruoja, kad nuoseklus skaitymas negalioja internetiniams puslapiams. Dešinys apatinis paveikslėlis parodo skaitytojo skenavimo kelią

  • Vartotojai vadovaujasi intuicija. Dažniausiai lankytojai tik permeta akimis vietoj to, kad skaitytų dizainerio pateikiamą informaciją. Pasak Steve Krug pagrindinė tokio elgesio priežastis yra ta, kad vartotojams vis vien. “Jeigu mes randam metodą, kuris veikia, tai jo ir laikomės. Mums nesvarbu ar suprantame sistemą, tol kol galime ja naudotis.”
  • Vartotojai nori kontrolės. Lankytojai nori kontroliuoti savo naršyklę ir tikisi suprantamo informacijos pateikimo visuose puslapiuose. Pvz. Jie nenori, kad netikėtai pradėtų atsidarinėti nauji langai. Tikisi, kad mygtuko “Back” pagalba visada galės grįžti į ankstesnį puslapį, todėl geriau niekada priverstinai neatidarinėti nuorodų naujame lange.

1. Neverskite lankytojų mastyti

Pasak Krugo pirmojo “patogumo naudotis” (angl. usability) dėsnio, internetinis puslapis turėtų būti akivaizdus ir nereikalaujantis paaiškinimų. Kuriant svetainę jūsų darbas yra atsikratyti visų klaustukų – sprendimų, kuriuos vartotojui reikia priimti sąmoningai pasveriant pliusus, minusus ir įvertinant alternatyvas.

Jeigu puslapio struktūra ir navigacija nėra intuityvios, tai klaustukų skaičius didėja ir vartotojui tampa sunkiau suvokti kaip veikia sistema ir kaip patekti iš taško A į tašką B. Aiški struktūra, nedidelis kiekis vizualinių užuominų ir lengvai atpažįstamos nuorodos gali padėti lankytojams rasti savo tikslą.

Panagrinėkime šį pavyzdį. Beyondis.co.uk teigia “beyond channels, beyond products, beyond distribution”. O ką tai reiškia? Kadangi vartotojai linkę puslapius tyrinėti vadovaudamiesi F-taisykle, tai šie trys teiginiai būtų pirmieji puslapio elementai, kuriuos pamatytų lankytojas.

Nors puslapio dizainas yra paprastas ir intuityvus, tačiau norint perprasti apie ką šis puslapis, vartotojas yra priverstas ieškoti atsakymo. Tai ir yra nereikalingas klaustukas. Dizainerio užduotis įsitikinti, kad klaustukų skaičius puslapyje yra artimas 0. Vizualinis atsakymas į šį klausimą yra dešinėje, todėl šiuo konkrečiu atvejų patogumą padidintų elementų sukeitimas vietomis.

ExpressionEngine naudoja labai panašią puslapio struktūrą, tačiau išvengia bereikalingų klaustukų. Nagrinėjant toliau, galima pastebėti, kad šūkis tampa funcionalus, kadangi vartotojams yra suteikiama galimybė išbandyti siūlomą paslaugą ir parsisiųsti nemokamą versiją.

Sumažindami poreikį mastyti jūs palengvinate idėjos, kurią pateikia svetainė, suvokimą. Tai pasiekus, jūs galite pateikti argumentus kuo sistema yra naudinga ir kokia iš jos nauda vartotojui. Žmonės nesinaudos jūsų svetaine, jeigu jie nesugebės perprasti jos struktūros ir navigacijos.

2. Nepiktnaudžiaukite lankytojų kantrybe

Siūlydami lankytojui kažkokią paslaugą ar įrankį, stenkitės sumažinti reikalavimus vartotojui iki minimumo. Kuo mažiau veiksmų reikia atlikti vartotojui, kad išbandyti paslaugą, tuo didesnė tikimybė, kad atsitiktinis lankytojas ją išbandys. Nauji lankytojai yra linkę išbandyti paslaugą, o ne pildyti ilgas formas reikalingas prisijungimui, kurio jie galbūt daugiau niekad nenaudos. Leiskite lankytojams tyrinėti svetainę ir atrasti jūsų paslaugas neversdami pateikti asmeninių duomenų. Nėra jokios prasmės reikalauti vartotojo el. pašto adreso vien tam, kad pamatyti produkto galimybes.

Pasak Ryan Singer – vieno iš 37signals darbuotojų – vartotojas greičiausiai kur kas mieliau nurodytų savo el. pašto adresą, jeigu jo būtų prašoma, po to kai jie jau pamatė kaip veikia siūlomas produktas, kadangi galėtų įvertinti naudą, kurią gaus.

Stikkit yra puikus draugiškos vartotojui paslaugos pavyzdys, kuri beveik nieko nereikalauja iš vartotojo ir yra neįkyri ir maloni naudoti. Juk jūs norite, kad taip jaustųsi jūsų svetainės lankytojas.

Akivaizdu, kad Mite reikalauja daugiau, tačiau registracija gali būti užbaigta trumpiau nei per 30 sekundžių, nes forma yra horizontali ir vartotojui nereikia slinkti puslapio žemyn.

Idealiu atveju pašalinkite visus barjerus, nereikalaukite registracijos iš anksto. Vien registracijos reikalavimas yra pakankamas trukdis lankytojo naršymui ir gali sumažinti lankytojų srautą.

3. Sugebėkite fokusuoti lankytojų dėmesį

Kadangi internetiniuose puslapiuose pateikiamas dinaminis ir statinis turinys, todėl kai kurie vartotojo sąsajos elementai labiau traukia dėmesį, nei kiti. Akivaizdu, kad paveikslėliai labiau traukia akį, nei tekstas – lygiai taip pat kaip paryškinti sakiniai labiau traukia akį nei paprastas tekstas.

Žmogaus regėjimas nėra linijinis, todėl interneto vartotojai gali iškart atpažinti kampus, raštus ir judesį. Todėl video reklamos yra labai blaškančios ir erzinančios, nors iš reklamos perspektyvos jos idealiai atlieka savo užduotį – pritraukti vartotojo dėmesį.

Humanized.com ideliai išnaudoja fokusavimo principą. Vienintelis iškart matomas vartotojui elementas yra žodis “free”, kuris patrauklus, bet tuo pačiu metu ramus ir informatyvus. Subtilios užuominos pateikia pakankamai informacijos kaip daugiau sužinoti apie “nemokamą” produktą.

Panaudojant vizualinius elementus lankytojo dėmesio nukreipimui į specifines puslapio dalis gali padėti jūsų vartotojui patekti iš taško A į tašką B nesusimąstant kaip tai reikėtų atlikti. Kuo mažiau klaustukų kyla lankytojui, tuo geriau jie orientuojasi ir gali atsirasti didesnis pasitikėjimas kompanija, kuriai svetainė atstovauja. Kitaip tariant, kuo mažiau reikia galvoti, tuo geresnė vartotojo patirtis.

4. Siekite galimybių atskleidimo

Šiuolaikines internetines svetaines dažnai kritikuoja už vartotojo vedžiojimą panaudojant patrauklius 1-2-3-baigta žingsnius, didelius mygtukus su vizualiais efektais ir t.t. Iš dizaino perspektyvos šie elementai nėra blogas dalykas. Priešingai, tokios gairės yra ypač efektyvios, kadangi jos veda lankytoja puslapio turiniu labai paprastu ir draugišku vartotojui būdu.

Dibusoft.com suderina patrauklią išvaizdą su aiškia puslapio struktūra. Puslapis turi 9 pagrindinius navigacijos pasirinkimus, kurie yra iškart matomi. Nors spalvų pasirinkimas gali būti per šviesus.

Leidžiant vartotojui aiškiai matyti esamas funkcijas – yra fundamentalus sėkmingos vartotojo sąsajos principas. Priemonės tikslui pasiekti nėra tokios svarbios, svarbiausia, kad turinys būtų gerai suprantamas ir lankytojas jaustųsi patogiai naudodamasis sistema.

5. Efektyviai išnaudokite raštą

Kadangi internetas labai skiriasi nuo spaudos, tai būtina adaptuoti rašymo stilių pagal vartotojo įpročius, bei pasirinkimus. Reklaminių tekstų niekas neskaitys. Ilgos teksto pastraipos, be paveikslėlių ir paryškintų esminių frazių, bus praleistos. Pagyrūniška kalba bus ignoruojama.

Kalbėkit apie esmę, venkite mielų ar gudrių žodžių, kuriuos generuoja rinkodara, venkite specifinių tik tai kompanijai pavadinimų ir nepažįstamų techninių terminų. Pavyzdžiui nusakant paslaugą ir norint, kad lankytojai prisijungtų prie sistemos “Registruokis” yra geriau nei “Pradėk dabar!”, kuris tuo pačiu yra geriau nei “Peržiūrėti mūsų paslaugas”.

Eleven2.com iškart pateikia esminę informacija, jokių gražių žodžių ar pagyrūniškų teiginių. Tiesiog pateikiama būtent tai ko ieško lankytojas – kaina.

Optimalus sprendimas norint efektyviai pateikti tekstą:

  • naudokite trumpas ir aiškias frazes
  • naudokite lengvai skenuojama puslapio išdėstymą (kategorizuoti turinį, naudoti kelių lygių antraštes, panaudoti vizualinius elementus ar sąrašus ilgiems tekstams pertraukti)
  • naudokite paprastą ir tikslią kalbą (šūkiai neturi skambėti kaip reklama; pateikite lankytojams objektyvią priežastį kodėl jie turėtų naudotis jūsų paslaugomis ar toliau skaityti jūsų puslapį)

6. Siekite paprastumo

“keep it simple” principas, turėtų būti pagrindiniu puslapio dizaino tikslu. Retas lankytojas atklysta pasidžiaugti puslapio dizainu, dažniausiai jis ieško informacijos nekreipdamas dėmesio į dizainą. Siekite paprastumo, o ne sudėtingumo.

Crcbus pateikia lankytojui švarų ir paprastą dizainą. Kadangi puslapis yra italų kalbą jūs galite nesuprasti apie ką jis, tačiau iškart atpažinsite navigaciją, turinį, viršaus ir apačios dalis. Netgi piktogramos (angl. icons) aiškiai perteikia informaciją. Užvedus pelę ant piktogramų parodoma papildoma informacija.

Iš lankytojo požiūrio taško, geriausias puslapio dizainas yra vien tekstas, kurio jis ieškojo, be reklamos ar papildomų susijusio turinio elementų. Ši priežastis yra viena iš pagrindinių, kodėl ir ant popieriaus spausdinama puslapio versija turi būti vartotojui draugiška ir prisidėti prie geros vartotojo patirties kūrimo.

Finch aiškiai pateikią informaciją ir pateikia vartotojui veiksmų pasirinkimą neperkraudami jo nereikalingu turiniu.

7. Nebijokite tuščios vietos

Sunku būtų pervertinti tuščios vietos svarbą. Ji netik padeda geriau suvokti ekrane pateikiamą informaciją, bet ir sumažina krūvį vartotojo protui. Naujam vartotojui bandant suvokti svetainės dizainą, jis pirmiausiai bando skenuoti puslapį ir padalinti turinį į suvokiamus informacijos blokus.

Sunkiau skaityti, skenuoti, analizuoti, bei dirbti su sudėtinga struktūra. Jeigu jūs renkatės kuo geriau atskirti dvi turinio sekcijas – tuščia vieta ar kažkokiu vizualiniu elementu, dažniausiai geriau naudoti tuščią vietą. Hierarchinė struktūra mažina sudėtingumą: kuo geriau vartotojai suvoks vizualinę hierarchiją, tuo lengviau jiems bus suvokti turinį.

Tuščia vieta yra gerai. Cameron.io ją naudoja kaip pagrindinį puslapio dizaino elementą. Gautas rezultatas yra lengvai skenuojamas, taip turiniui suteikiant dominuojančią poziciją.

8. Efektyviai komunikuokite naudodami “matomą kalbą” (visible language)

Savo darbe apie efektyvia vizualinę komunikaciją, Aaron Marcus pateikia tris fundamentalius principus, kurie naudojami taip vadinamoje “matomoje kalboje” – turinyje kurį vartotojas mato ekrane.

  • Organizacija: pateikite lankytojui aiškią ir vientisą struktūrą. Vientisumas, elementų išdėstymo ryšiai ir navigacija yra svarbios organizuotumo dalys. Tos pačios taisyklės ir principai turėtų būti taikomi visiems elementams.
  • Minimalizmas: pasiekite didžiausią efektą naudodami mažiausią kiekį vizualinių elementų. Pagrindiniai keturi tikslai: paprastumas, aiškumas, išskirtinumas ir svarbos pažymėjimas. Paprastumą sudaro tik tie elementai, kurie yra svarbūs informacijos perdavimui. Aiškumas: visi komponentai turėtų būti taip, kad jų paskirtis nebūtų dviprasmiška. Išskirtinumas: svarbių elementų savybės turėtų būti lengvai atskiriamos. Svarbos pažymėjimas: svarbiausi elementai turi būti lengvai suvokiami.
  • Komunikacija: pateikiamas turinys turi atitikti vartotojo galimybes. Vartotojo sąsaja turi palaikyti balansą tarp skaitomumo, tipografijos, simbolizmo, skirtingų spalvų ar tekstūrų, norint sėkmingai perduoti informaciją. Naudokite ne daugiau kaip 3 skirtingus šriftus ir ne daugiau kaip 3 skirtingų šrifto dydžių – daugiausiai 18 žodžių arba 50-80 simbolių vienoje eilutėje.

9. Standartai yra mūsų draugai

Standartiniai puslapio dizaino elementai nebūtinai veda prie nuobodžios svetainės. Atvirkščiai, standartai yra labai naudingi, nes sumažina mokymosi laiką reikalingą perprasti puslapio veikimą. Mes vadovaujamės tam tikrais standartais ir kasdieniame gyvenime, kur mes priprantame prie bazinių principų kaip yra tvarkomi dokumentai ar išdėstomi produktai parduotuvėse. Pavyzdžiui būtų tikras naudojamumo košmaras, jei visos svetainės skirtingai žymėtų RSS srautus.

Naudojant standartus galite įgyti lankytojų pasitikėjimą ir įrodyti patikimumą. Patenkinkite vartotojų lūkesčius – supraskite ko jie tikisi iš puslapio navigacijos, teksto struktūros, paieškos laukelio pozicijos ir t.t. (daugiau informacijos Nielsen’s Usability Alertbox)

BabelFish naudojimo pavyzdys: Amazon.com rusiškai

Tipinė užduotis vertinant vartotojų patogumą, kai puslapis išverčiamas tarkim į Japonų kalbą (su sąlyga, kad vartotojas jos nemoka) ir reikia surasti kažką svetimos kalbos puslapyje. Jeigu standartai buvo teisingai pritaikyti, vartotojas sugebės įvykdyti nelabai specifines užduotis, netgi jeigu nesupras pateikiamo teksto.

Steve Krug teigia, kad laikas inovacijoms tik tada kai esate tvirtai įsitikinę, jog jūsų idėja geresnė, tačiau vadovautis standartais, kai taip nėra.

10. Tikrinkite anksti, tikrinkite dažnai

Šis principas turėtų būti taikomas kiekvienam wed dizaino projektui, kadangi patogumo vartotojui testai dažnai pateikia informaciją apie esmines esamos struktūros problemas.

Testuokite laiku, ne per mažai ir dėl tinkamų priežasčių. Svarbu suprasti, kad didžioji dalis dizaino sprendimų nėra universalūs, todėl vieni nėra geresni už kitus, kadangi sprendimo tinkamumą reikia analizuoti atsižvelgiant į specifinius reikalavimus (užsakovo reikalavimai, akcininkai, biudžetas ir t.t.).

Keletas vertų įsiminti pastebėjimų:

  • pasak Steve Krug, testavimas su vienu vartotoju yra 100% geriau, nei testavimas be vartotojų ir testavimas su vienu vartotoju projekto pradžioje yra geriau nei su 50 vartotojų projekto pabaigoje. Vadovaujantis Boehmo (Boehm’s law) taisykle: klaidos dažniausiai atsiranda reikalavimų formavimo ir dizaino stadijoje ir kuo vėliau atrandamos tuo brangiau kainuoja jų šalinimas.
  • testavimas yra cikliškas procesas. Tai reiškia, kad jeigu kažką kuriate, testuokite, pataisykite ir testuokite iš naujo. Gali būti taip, kad problemos, nebuvo surastos pirmą kartą testuojant todėl, kad kitos problemos jas užgožė.
  • vartotojų patogumo testai visada duoda naudos. Proceso metu arba išryškės esamos problemos arba paaiškės, kad problemų nėra, kas bet kuriuo atveju yra naudinga informacija jūsų projektui.
  • vadovaujantis Weinbergo taisykle: programuotojas yra netinkamas testuoti savo kodą. Ši taisyklė tinka ir dizaineriams. Po kelių dienų ar savaičių darbo prie projekto, jūs nebegalite objektyviai įvertinti rezultatų. Jūs jau žinote kaip puslapis turi veikti t.y. turite išmintį, kurios neturi testuotojai ir būsimi svetainės lankytojai.

Jei norite puikios svetainės, testuokite ją!

Versta iš: 10 Principles Of Effective Web Design