MTV, pimp my site!

25. lip 2005

Jak naj­ła­twiej poznać stronę, która była robiona dla wła­ści­ciela a nie dla jego klien­tów? Przy­po­mina kom­po­sto­wi­sko. Znaj­dziesz tam wszystko, jest kolo­rowo, migo­cząco, tylko nikt nie chce tam cho­dzić. Całe szczę­ście, że inter­net jesz­cze nie potrafi trans­por­to­wać zapa­chów. Prze­pro­jek­to­wane i prze­ła­do­wane ser­wisy przy­tła­czają już po kilku sekun­dach od wej­ścia. Ich główny pro­blem polega na tym, że jest tam tak dużo obiek­tów przy­cią­ga­ją­cych oko, że w efek­cie nie widzimy nic.

Jak dobrze zapro­jek­to­wać ser­wis? Naj­le­piej zacząć od pro­jektu w pro­gra­mie obsłu­gu­ją­cym war­stwy. Wśród zawo­do­wych desi­gne­rów domi­nują pro­dukty Adobe i Macro­me­dii (choć w tej chwili to już jedna firma). Wyko­naj pełny pro­jekt z roz­war­stwie­niem ele­men­tów gra­ficz­nych (i tak jest to potrzebne do póź­niej­szego pokro­je­nia pro­jektu do HTML), a następ­nie popatrz na efekt swo­jej pracy. Zapisz wynik i wyko­naj jego kopię. Teraz w kopii po kolei wyłą­czaj wszyst­kie ele­menty deko­ra­cyjne, jak gra­dienty czy obrazy tła. Naj­le­piej na tym eta­pie zapro­sić do pomocy kogoś, kto nie ma zie­lo­nego poję­cia, że twój lay­out jest wspa­niały. Porów­nu­jąc ory­gi­nał i kopię, ustal­cie, które ele­menty są zbędne.

Po kilku/kilkunastu takich podej­ściach nauczysz się myśleć w kate­go­riach uży­tecz­no­ści wizu­al­nej, a nie samej este­tyki. Popatrz, które ele­menty przy­cią­gają wzrok i zasta­nów się, czy to wła­śnie one powinny sku­piać na sobie uwagę odwie­dza­ją­cego. Zasta­nów się, jakich infor­ma­cji będzie szu­kał, bo zapew­niam, że 99% gości nie wpad­nie podzi­wiać desi­gnu. Pra­cuj nad jed­no­litą sym­bo­liką i kolo­ry­styką. Fakt, że masz aku­rat pomysł na 25 świet­nych bul­le­tów nie ozna­cza, że każdy bul­let na stro­nie powi­nien wyglą­dać ina­czej. Uni­kaj zbęd­nych ani­ma­cji, są jak płyta CD na przed­nim lusterku malu­cha — były modne w 1996, ale dziś tylko irytują.

Pra­cuj nad ukła­dem infor­ma­cji. Ele­menty zmie­nia­jące się naj­czę­ściej (jak aktu­al­no­ści na stro­nie głów­nej) powinny być łatwo zauwa­żalne, a przede wszyst­kim powinny zaczy­nać się na pierw­szym ekra­nie bez potrzeby prze­wi­ja­nia. Jeśli strona na pierw­szy rzut oka wygląda iden­tycz­nie, odwie­dza­jący założy, że nic się tam nie zmieniło.

Sto­suj spójną nawi­ga­cję. Naj­le­piej, jeśli oddaje ona struk­turę ser­wisu. Nie ma powodu, dla któ­rego każda strona ser­wisu mia­łaby lin­ko­wać do wszyst­kich pozo­sta­łych. Naj­waż­niej­sze jed­nak, aby odwie­dza­jący w każ­dym momen­cie wie­dział, w jakim miej­scu się znajduje.

Myśl w kate­go­riach stron wej­ścio­wych. Goście będą odwie­dzać twój ser­wis za pośred­nic­twem lin­ków z wyszu­ki­wa­rek, tra­fić mogą w dowolne miej­sce i rzadko będzie to strona główna. Czy będą wie­dzieć, gdzie się znaj­dują i gdzie szu­kać powią­za­nych infor­ma­cji? Czy żadna ze stron nie jest ślepym zaułkiem?

Jeśli dany doku­ment jest dostępny w kilku języ­kach, to poin­for­muj o tym, nikomu nie będzie chciało się przejść na stronę główną w poszu­ki­wa­niu prze­łącz­nika wer­sji języ­ko­wych, a przede wszyst­kim upew­nij się, że prze­łą­cza­nie wer­sji języ­ko­wych pozo­sta­wia użyt­kow­nika na tej samej stro­nie. Bar­dzo dener­wują ser­wisy, gdzie kli­kamy link do pol­skiej wer­sji strony tylko po to, żeby zna­leźć się nagle na stro­nie głów­nej ser­wisu, nie mając poję­cia o tym, jak dotrzeć do inte­re­su­ją­cego nas dokumentu.

Pod­su­mo­wu­jąc — postaw się na miej­scu użyt­kow­nika odwie­dza­ją­cego ser­wis, gra­fika pełni tu rolę dru­go­pla­nową i jej głów­nym zada­niem powinno być wyróż­nie­nie poszcze­gól­nych ele­men­tów strony i kie­ro­wa­nie uwagą czy­ta­ją­cego. Czę­sto spraw­dza się w tej dzie­dzi­nie zupełny mini­ma­lizm, dowo­dem może być jeden z naj­czy­tel­niej­szych moim zda­niem ser­wi­sów — Aurora Desk­top.

There are 11 comments in this article:

  1. 25. lip 2005treacle says:

    Ta stronka Aurory robiona jest na bazie jakie­goś barzo popu­lar­nego szblonu :/, nie­stety nie pamię­tam nazwy. Ale pra­wie iden­tyczne jedy­nie kolorki pozmieniane.

  2. 25. lip 2005Hawk says:

    Nie lubie pro­jek­to­wac stron www. Jest to taka moja pieta achil­le­sowa. Nie mam wogole wyczu­cia este­tyki, kolo­ry­styki itp. Moje strony sa wizu­al­nie denne (mery­to­rycz­nie zreszta pew­nie tez), zazwy­czaj zle zapro­jek­to­wane, pelne ble­dow itp. Ale nie mozna byc dobrym we wszyst­kim :) Dobra, nie o tym mia­lem… Chcia­lem jedy­nie dodac od sie­bie, ze rekami i nogami pod­pi­suje sie pod teo­ria mini­ma­li­zmu. Jak dla mnie strona ma byc przede wszyst­kim funk­cjo­nalna i przed­sta­wiac inte­re­su­jaca mnie tresc w akcep­to­wal­nej (dla mnie) i latwej do prze­two­rze­nia for­mie. Strona wizu­alna ma dlam­nie dru­go­rzedne, ba, trze­cio­rzedne znaczenie.

  3. 25. lip 2005marcink says:

    Świetny tekst. Ja dodał­bym jesz­cze kla­syczne „nie zmu­szaj

    kli­ka­czy do myśle­nia”. Pro­sty test: bie­rzesz czło­wieka z kory­ta­rza i

    każesz coś zna­leźć na stro­nie. Jeśli konieczna okaże się pod­po­wiedź

    gdzie klik­nąć, to zna­czy że ser­wis jest zapro­jek­to­wany źle.

    Aha, jesz­cze „bez żenady kopiuj układ i roz­wią­za­nia z innych,

    popu­lar­nych ser­wi­sów”. Nie bez powodu więk­szość naprawdę popu­lar­nych

    i lubia­nych stron wygląda bar­dzo podob­nie — układ „na górze zakładki,

    po lewej menu, a środ­kiem tek­ścik” jest wygodny, a teraz przede

    wszyst­kim zna­jomy. Naprawdę nie­wiele stron zyskuje na eks­pe­ry­men­tach

    i zaska­ki­wa­niu odwiedzających.

    Mini­ma­lizm jest bar­dzo fajny, ale tylko w przy­padku stron, w któ­rych

    prze­ka­za­nie tre­ści jest _jedynym_, a nie tylko _głównym_ celem. I

    faj­nie, w takiej sytu­acji pod­pi­suję się pod tym oburącz.

    Pro­blem w tym, że wiele stron oprócz prze­ka­za­nia tek­stu ma też inne

    cele — naj­czę­ściej jest to budo­wa­nie wize­runku firmy, utrwa­la­nie jej

    nazwy i zwią­za­nych z nią wra­żeń, czę­sto też utwier­dze­nie kli­ka­cza że

    ser­wis skie­ro­wany jest wła­śnie do niego. Desi­gnu może nikt nie będzie

    podzi­wiał, ale jego brak wielu ludzi zauważy na pewno i połą­czy (może

    pod­świa­do­mie) z bra­kiem profesjonalizmu.

    Dwie dobre książki jakie zna­la­złem na ten temat: Steve Krug, „Don’t

    make me think!” (wydana przez Helion jako „Nie każ mi myśleć!”) i

    Douglas van Duyne i paru innych, „The design of sites” — świetne

    zesta­wie­nie goto­wych wzor­ców, nie­stety dość drogie.

  4. 25. lip 2005Nivertius says:

    Nie do końca się z Tobą zga­dzam. Nie­stety strony ‘mini­ma­li­styczne’ wydają się także puste. Jeżeli chcesz użyt­kow­nika przy­cią­gnąć, to musisz przed­sta­wić mu zasoby strony od razu, nie tak, że nasz drogi user bdzie szu­kał po pod­stro­nach o czym to tak naprawdę jest. Owszem — bez prze­sady, na stro­nie głów­nej nie musi być wszyst­kiego na raz, w pude­łecz­kach po 30px sze­ro­ko­ści, to roz­pra­sza uwage. Ale w drugą strone też nie można.

    Nie­stety [?] Zwy­kli Użyt­kow­nicy [ZU] wolą jed­nak gdy ładne, ‘paste­lowe’ gra­dienty sku­pią ich na na kilku rze­czach, które Twoja strona ofe­ruje.

    Dla­czego nie­które dziew­czyny w liceum robią notatki w kilku kolo­rach? Bo taki zeszyt wygląda schlud­niej, ładniej, przy­ciąga oko, jest dla niego miły. Dla kon­tra­stu nawet czy­telne, równe pismo jed­no­ko­lo­rowe, mono­te­ma­tyczne wyglą­dowo jest po pro­stu nudne i odrzuca na wstę­pie.

    Ja rozu­miem, por­tale w stylu Inte­ria, Onet prze­sa­dzają. Tam nie wia­domo na czym się zatrzy­mać, wszystko jest na raz. Owszem. Ale w drugą strone też nie można. Nikt prze­cież nie chce ser­wo­wać doku­mentu sema­tycz­nie popraw­nego, ale bez stylu, który jest ide­al­nie uży­teczny, nie bio­rąc pod uwagę jakie­goś wypo­zy­cjo­no­wa­nia menu, żeby nie trzeba było ‘scrol­lo­wać’ na sam dół strony, żeby przejść do następ­nej, bo menu na początku strony to grzech prze­ciw dostęp­no­ści.

    Jak we wszyst­kim trzeba zna­leść złoty środek, nie wolno prze­sa­dzać z mini­ma­li­zmem, tak jak nie można prze­sa­dzać z baje­rami.

    Owszem, dla nas, geeków, strona Aurory jest ładna, uży­teczna itp. Ale ZU prze­sko­czy nad nią, bo pomy­śli sobie, że ktoś się nie posta­rał…

    I jesz­cze jedno — sam też wolał­bym robić o wyglą­dzie np. tego joga, bo dla mnie są naprawdę ładniej­sze, ale nie wszy­scy lubią minimalizm.

  5. 26. lip 2005paczor says:

    Co do este­tyki i ascezy piszesz kom­pletne bzdury! To się nie sprze­daje w teo­rii, a zwłasz­cza w praktyce!

    Tak się składa, że kilka dni temu roz­ma­wia­łem o tym (desi­gnie) z żoną, która od ładnych paru lat „sie­dzi” w biz­ne­sie WWW. W pro­jek­tach zwłasz­cza rekla­mo­wych, zarówno rekla­mie kopro­ra­cyj­nej jak i społecznej.

    I bazu­jąc na jej doświad­cze­niu mogę napi­sać, że: mini­ma­lizm tu nie działa. Tak mówią bada­nia i sta­ty­styki. Ser­wisy WWW wyglą­da­jące jak cho­inka sprze­dają się lepiej, i lepiej są znane.

    Masz mylny pogląd, bo oso­bi­sty, bo jesteś pro­gra­mi­stą, bo tobie się zdaje. Ale nie­stety gówno byle świe­cące od zara­nia dzie­jów sprze­daje się lepiej, vide Win­dows. Zresztą taki sam pogląd mia­łem i ja, ale się wypro­sto­wa­łem. To tacy jak ty lub ja insta­lują roz­sze­rze­nie fo Fire­foksa (bo wie­dzą, że takie coś ist­nieje), które blo­kuje ani­ma­cje Flash. Ale jeste­śmy w tym odosobnieni.

    Porady, które wypi­sa­łeś nie­stety do odkryw­czych nie należą, czy­ta­łem takie 8 lat temu. Nic się w tej dzie­dzi­nie nie poja­wiło nowego: czy­telna nawi­ga­cja, strony wej­ściowe,… ktoś już to wymyślił.

    Masz poglądy z początku lat 90-tych, kiedy, śmiem twier­dzić, więk­szość uży­tow­ni­ków Inter­netu sta­no­wili ludzie jakoś z branżą infor­ma­tyczną zwią­zani (patrz np. The Well). Gdzie nikogo nie musia­łeś prze­ko­ny­wać, że top­po­sting jest beee, że win-1250 jest beee, że NNTP to grupy, itd…

    Inter­ne­towa tłusz­cza, która obec­nie odwie­dza ser­wisy jest w tych spra­wach nie­oświe­cona, i taka chce pozo­stać. En masse, ich nie obcho­dzi czy­tel­ność ser­wisu bo nie szu­kają infor­ma­cji, szu­kają roz­rywki i kontaktu.

    A teraz roze­rwij­cie mnie na strzępy… ;-)

  6. 26. lip 2005Patrys says:

    Ja piszę o usa­bi­lity ser­wi­sów, a nie o mar­ke­tingu. Czy­tel­ność a wci­ska­nie klien­towi „cho­inki” to dwie różne rzeczy.

    Klient kupi to, co ofe­ruje rynek. Nie wiem, czy obser­wu­jesz to, co dzieje się mniej-więcej od dwóch lat w branży ser­wi­sów kor­po­ra­cyj­nych wiel­kiej Ame­ryki. Wraca moda na mini­ma­lizm, duży whi­te­space i usa­bi­lity. To samo będzie się nie­długo działo i u nas, pierw­sze kroki, mania wali­da­cyjna i wspar­cie dla Fire­foksa, już za nami.

  7. 26. lip 2005paczor says:

    A jakieś przy­kłady, bo szcze­rze mówiąc nie oglą­dam ame­ry­kań­skich ser­wi­sów korp.?

  8. 27. lip 2005Qwiat says:

    Masz rację Paczor, zasada popytu/podaży wygra zawsze z dobrym gustem, roz­sąd­kiem i wygodą odwie­dza­ją­cych. To że klienci nie zechcą odwie­dzać strony to już pro­blem „pre­zesa”, jak kasa w kie­szeni to możemy mieć wszyt­sko w dupie.

    Dla mnie to obo­jętne jak strona wygląda, byle by miała dobrą nawigację.

    Od wyglądu bar­dziej potra­fią mnie zde­ner­wo­wać małe czcionki. Na stro­nie Aurory mogły by mieć ze 150%-200% wię­cej wyso­ko­ści, trzeba pamię­tać że moni­tory mają w pory­wach do 90 DPI.

    Całe sczę­ście mam fire­foxa i skrót „ctrl” + „+”, zwy­kle wtedy roz­pada się lay­out, ale wto już pro­blem twórcy strony :)

  9. 31. lip 2005Mikołaj says:

    Rze­czy naprawdę iry­ty­tu­ją­cych (a przy oka­zji prze­szka­dza­ją­cych użyt­kow­ni­kowi) jest sporo. Mnie wku­rzają dwie:

    1. Za małe litery. Być może ‘dizajn’ jest śliczny, ale wiele osób będzie miało pro­blemy z prze­czy­ta­niem takiego tek­stu. Fire­fox pozwala na szyb­kie jego powięk­sze­nie, ale nadal 75% rynku to IE.

    BTW — komen­ta­rze tutaj mają zbyt małą czcionkę.

    2. Uzu­peł­nie­niem powyż­szego jest nagmin­nie sto­so­wany zbyt mały kon­trast mię­dzy kolo­rami tła, a kolo­rami liter. Szare litery (#888888) na bia­łym tle to naprawdę nie jest czy­telny tekst.

    Oczy­wi­ście oczoj… kochliwe kolorki, ani­ma­cje Fla­showe, kre­tyń­ska nawi­ga­cja (kocham menu w Javie) etc. są draż­niące, ale to temat na znacz­nie więk­szą debatę.

  10. 4. sie 2005Twoja Stara says:

    Chyba twoja !!!

  11. 11. sie 2005jpc says:

    Przy­kład? Może naj­po­pu­lar­niej­sza strona na świe­cie — google.com (strze­lam, ale wąt­pie, bym się mylił)?

    Ogól­nie, wydaje mi się, że ta firma łamie wszyst­kie mity-uznawane-powszechnie-za-prawdę doty­czące marketingu.

Write a comment:

Creative Commons Attribution-NonCommercial-ShareAlike 2.5 Poland
This work by Patryk Zawadzki is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 Poland.