Web Design: trendy w Internecie

Oceń tę pracę

Przełom roku zawsze sprzyja podsumowaniom, stąd nie powinien dziwić ów wpis.

Ubiegły rok, w ramach projektów layoutów stron internetowych, był raczej rokiem kontynuacji zastałych już paternów, które pojawiły się wraz ze standardem CSS i niejako upowszechniają. Znakiem rozpoznawczym stał się styl retro, nawiązujący do stylistyki z przełomu wieków XIX i XX oraz bliski wiktoriańskiej Anglii. W kolorystyce dominowały brązy; coraz powszechniej stosowane są desenie i ciężkie tekstury, przywodzące na myśl tapety ekskluzywnych lokali i materiały, z których nasze praprababki szyły sobie suknie.

Kolejnym z elementów są motywy roślin, pojawiające się zarówno jako elementy logotypów, ozdobników nadających życie stronom internetowym oraz wzorów tekstur teł.

W kolorystyce brązy łączone były z niebieskościami – wzorem Pownce (zamieszczam link do zrzutu, bo serwis 15 grudnia 2008 został zamknięty) – bądź uzupełniane przez orzeźwiające zielenie. Czasem też przyjmowały formę kolorystycznej triady: Niebo – Świat tego co naziemne (roślinność) – Świat podziemny. Pojawiały się też brudne odcienie szarości, w sporej części przy okazji tekstur – albo z motywami kwiatowymi (niczym wzory tapet), albo jak odrapane ściany; także jako tekstury drewna, ale z brązów sprowadzone do ciemnych szarości.

Brązy reprezentowane były przez wspomniany motyw ziemi (w sensie gleby), ale także przez dość często stosowane desenie drewna; dodatkowo pojawiały się kartony i szary papier, w ramach kolaży. W opozycji pojawiały się cukierkowe błękity, żółcienie i róże (ale te – ze względu na strony poświęcone tematyce kobiecej – występowały od zawsze).

Innym często przywoływanym motywem głównym layotu były… jak to nazwać… robótki ręczne? Odwołanie z jednej strony do motywów paper & sketch (kartony, kartki z notatników, rysunki ołówkiem, długopisem, czasem także wyryte napisy rylcem), z drugiej do materiałów i motywów przywodzących na myśl krawiectwo (motywy nożyczek i przerywanych linii, które wyznaczają trasę cięcia, pojawiające się tu i ówdzie materiały, z których szyte są stroje – jeans, filc w kratę, lny, etc.).

Zaczęły się także pojawiać elementy charakterystyczne dla teatrzyków kukiełkowych, jak to, że części layoutu zwisają na sznurkach. Upowszechnił się w końcu motyw określany przez zachodnich projektantów jako Zig-Zag, czyli ząbkowanie grafik, przypominające znaczki pocztowe bądź brzegi niektórych ciasteczek (np. Leibniz – oryginalne 52 ząbki ;).

Wszystkie one tworzyły menażerię Internetu minionego właśnie roku.

Jeśli chodzi o fonty, to – jako uzupełnienie wyżej opisanej stylistyki – coraz częściej projektanci i graficy sięgają po fonty przypominające pismo odręczne oraz czcionkę maszyn do pisania.

Wykorzystywane wcześniej do spamerskiego pozycjonowania stopki stron internetowych, które straszyły do niedawna umieszczanymi tam linkami mającymi na celu wypozycjonowanie naszej strony w ramach wyszukiwarek, zaczynają błyszczeć umieszczanymi tam rozszerzonymi motywami ilustracyjnymi, sekcjami o funkcjonalności quick link (np. spis najciekawszych artykułów), czy też formularzami kontaktu i danymi z popularnych wlepek (widgetów, np. miniaturami zdjęć z Flickr czy spisem ulubionych utworów z Last.fm oraz listą osób, które ostatnio odwiedziły blog).

A oto garść wybranych przykładów (więcej mam zebranych w prezentacji-raporcie, o którym słów kilka na końcu postu).

Retro rządzi!

Technikalia, którymi fascynowali się nasi dziadkowie (patefony, roboty, samochody, rakiety, lotnictwo): Jef Sarmiento, Level2d.com, Travis Singleton, tomatic.com, Mister Aero.

Pin-up girls i dziewczyny z tamtych lat: Practice Cafe, Style 4 You, Margot Blanche.

Promienie słoneczne (charaktyrystyczne m.in. dla pierwszcyh lat lotnictwa): Yo Vivo en Vigo, Dude Design, Phizz, Max Black.

Maszynowe, np. Courier: Mariska, Blog do Ronaldo, iSpoil.net.

Odręczne: Bootb, David Hellmann, Li Chin’s, PSYOP, Last Tweet, Starbucks Coffe At Home.

Stylizowane: McCoy, Training by Collective Idea.

Kolorystyka

Brązy i szarości: Smallman Records, Revolution Church, Matt Brett, Score Reviews.

Brązy z niebieskim: WebStock, Magpie Page, Ryan Long.

Brązy, niebieski i zielenie: Future Online Advertising, Tijs Vrolix, CSS Ninjas.

Jaskrawa kolorystyka (w opozycji do brudnych brązów i szarości): Derlington Weddings, C’est Magnifique, Smooth Habitat.

***

To wycinek z tego, co w ciągu ostatnich trzech lat dzieje się w grafice na potrzeby WWW (layoutach).

Raport-prezentacja, nad którym obecnie pracuję, zawierający znacznie więcej wytycznych oraz dużo szerszą analizę popartą przykładami (ma już blisko 1 tys. slajdów), będzie niebawem dostępny na mojej firmowej stronie. Ze względu na ogrom prac, jakie w przygotowanie jego włożyłem, będzie dostępny odpłatnie (z przeznaczeniem głównie dla agencji interaktywnych i ich klientów).

image_pdf

CoolBrands: sympatycznie

Oceń tę pracę

Co prawda nie interfejsowo, ani nawet nie usabilitowo, ale za to sympatycznie 🙂

W ramach konkursu CoolBrands dostaliśmy nagrodę (wczoraj była gala, dzisiaj nagroda wędrowała w biurze z rąk do rąk).

Jak napisał Albert na blogu działu IT: „Grono.net zostało uhonorowane statuetką CoolBrands jako lider WEB 2.0 i znalazło się wśród nagrodzonych gigantów Internetu takich jak Google, Allegro.pl, czy Onet.pl.”

Mnie tam cieszy, że wertując wydany przy okazji album jesteśmy zaraz po Google.pl. Co prawda alfabetycznie, ale zawsze. 😉

A tak na poważnie, to cieszą ostatnio pojawiające się tu i ówdzie dobre opinie o naszej robocie:

1. „(…) sam używam grono i ostatnio je nawet polubiłem…”

2. „Po chwilowej czkawce z zmianami designu (…) zaczynam postrzegać grono coraz pozytywniej. Jak ktoś na tym forum zauważył, ich strategia z zasięgowej zmienia się w jakościową. Zamiast testować gdzie leży granica możliwej do osiągnięcia liczby użytkowników w polskim internecie, zaczynają aktywizować i ujakosciowiać już posiadaną potężną grupie użytkowników.

Teraz jeszcze otwierają się z API (aczkolwiek nie sprawdzałem na ile dobrze napisanym i przydatnym). Już na nich psów nie wieszam, tylko się z zainteresowaniem przyglądam. (…)”

[za: net_talk@googlegroups.com, 5 czerwca 2007]

Sympatycznie.

image_pdf

Axure 5.5: biblioteki GUI… w końcu

5/5 - (1 vote)

Od kilku dni dostępna już jest (beta) wersja Axure 5.5. Z istotnych zmian pojawiły się – w końcu – edytowalne biblioteki elementów GUI (ramka Widgets w programie, poniżej na rysunku), dzięki czemu elementy, które przygotujemy sobie raz będą nam mogły służyć przy wielu różnych projektach (co prawda można to było obchodzić korzystając z Masters, ale było to bardzo niewygodne). Dobrze się stało, bo to była najwyższa pora – programy MS Visio (wzorniki kształtów w formie plików .VSS) czy OmniGraffle (biblioteki) już dawno udostępniały takie możliwości.

Korzystanie z bibliotek elementów GUI jest banalnie proste. Możemy je stworzyć samodzielnie, traktując każdą stronę (Page) w Axure jako część roboczą dla jednego z elementów. W związku z czym gdy tworzymy bibliotekę złożoną z n-elementów, to będziemy mieli projekt stworzony z n-stron.

Ważne: ułatwieniem jest możliwość oprogramowywania elementów naszej biblioteki. W związku z czym, jeśli przygotujemy sobie powiedzmy przycisk interfejsu edytora tekstu, odpowiedzialny za funkcję pogrubienie, i oprogramujemy go tak, że najechanie na nim kursorem myszy będzie wywoływało podświetlenie tego przycisku, zawsze gdy będziemy korzystali z niego jako z biblioteki, będzie on już tak oprogramowany.

Biblioteki zapisujemy jako pliki z rozszerzeniem .RPLIB.

Axure udostępnił już bibliotekę złożoną z wybranych elementów wchodzących w skład Yahoo! Design Stencil Kit. Są to m.in.:

  • siatki (grids) – do projektowania kompozycji layoutu (bardzo słabe niestety, w zasadzie do niczego się nie nadają),
  • klikalny kalendarz w formie okienka i oprogramowane karuzele (te elementy już od pewnego czasu były dostępne w sieci),
  • okienka kontrolek,
  • zwymiarowane elementy reklamy,
  • elementy interfejsów na telefony komórkowe,
  • i inne.

Pełną listę zmian, które wprowadza wersja 5.5 Axure, można zobaczyć na stronie producenta. Oczywiście najlepiej ją ściągnąć i samemu zapoznać się z nimi. Aby zaś móc rozkoszować się funkcjonalnością bibliotek, najlepiej ściągnąć ich pierwszą paczkę. Smacznego!

Axure 5.5: biblioteki GUI stanowią jeden z kluczowych elementów pracy projektowej w tym narzędziu, umożliwiając szybkie i spójne tworzenie makiet oraz prototypów interfejsów użytkownika. Axure RP w wersji 5.5, mimo że obecnie jest rozwiązaniem historycznym, odegrał istotną rolę w rozwoju praktyk projektowania UX i UI, szczególnie w kontekście projektów analitycznych, funkcjonalnych oraz dokumentacji wymagań. Biblioteki GUI pełniły w nim funkcję repozytoriów gotowych komponentów interfejsu, które można było wielokrotnie wykorzystywać w różnych projektach.

Biblioteka GUI w Axure 5.5 to zestaw predefiniowanych elementów interfejsu graficznego, takich jak przyciski, pola tekstowe, listy rozwijane, okna dialogowe czy elementy nawigacyjne. Komponenty te były zaprojektowane w sposób neutralny wizualnie, co pozwalało skupić się na funkcjonalności, strukturze informacji i logice interakcji, a nie na szczegółowej estetyce graficznej. Taki charakter bibliotek wpisywał się w analityczne podejście Axure, odróżniające je od narzędzi stricte graficznych.

Istotną cechą bibliotek GUI w Axure 5.5 była ich modularność. Każdy element mógł być wykorzystywany niezależnie, modyfikowany pod względem rozmiaru, tekstu czy zachowania interaktywnego. Projektant miał możliwość dostosowania komponentów do specyfiki danego projektu bez konieczności tworzenia ich od podstaw. Dzięki temu biblioteki GUI znacząco przyspieszały proces prototypowania oraz redukowały ryzyko niespójności interfejsu.

Biblioteki GUI w Axure 5.5 obejmowały zarówno elementy ogólne, jak i komponenty nawiązujące do konkretnych systemów operacyjnych lub konwencji projektowych, na przykład interfejsów webowych czy aplikacji desktopowych. Pozwalało to na tworzenie makiet zgodnych z oczekiwaniami użytkowników oraz standardami obowiązującymi w danym środowisku technologicznym. Projektant mógł symulować zachowanie interfejsu jeszcze przed etapem implementacji, co miało duże znaczenie w procesie komunikacji z interesariuszami.

Z perspektywy metodologicznej biblioteki GUI w Axure 5.5 wspierały projektowanie zorientowane na użytkownika. Gotowe komponenty umożliwiały szybkie testowanie różnych wariantów układu, nawigacji i interakcji, co sprzyjało iteracyjnemu doskonaleniu projektu. Dzięki temu narzędzie to było często wykorzystywane w analizie wymagań, projektowaniu systemów informatycznych oraz dokumentowaniu funkcjonalności aplikacji.

Pod względem organizacyjnym biblioteki GUI mogły być przechowywane lokalnie i udostępniane zespołom projektowym, co sprzyjało standaryzacji interfejsów w ramach jednej organizacji. Tworzenie własnych bibliotek komponentów umożliwiało zachowanie spójności wizualnej i funkcjonalnej pomiędzy różnymi projektami, a także ułatwiało współpracę pomiędzy analitykami, projektantami i programistami.

Biblioteki GUI w Axure 5.5 pełniły funkcję narzędzia wspierającego szybkie, spójne i funkcjonalne projektowanie interfejsów użytkownika. Ich znaczenie polegało nie tylko na oszczędności czasu, lecz przede wszystkim na ułatwieniu analizy funkcjonalnej, komunikacji projektowej oraz wczesnej weryfikacji założeń interakcyjnych. Pomimo rozwoju nowszych wersji Axure i alternatywnych narzędzi UX, koncepcja bibliotek GUI wypracowana w Axure 5.5 pozostaje ważnym punktem odniesienia w historii projektowania interfejsów.

Rozwijając zagadnienie bibliotek GUI w Axure 5.5, należy podkreślić ich znaczenie w kontekście ówczesnych standardów projektowania systemów informatycznych oraz dojrzałości metod analizy funkcjonalnej. Axure 5.5 był narzędziem szczególnie cenionym w środowisku analityków biznesowych i projektantów systemów, ponieważ umożliwiał tworzenie prototypów, które nie ograniczały się do statycznych makiet, lecz odzwierciedlały logikę działania interfejsu. Biblioteki GUI odgrywały w tym procesie rolę fundamentu, na którym budowano spójne modele interakcji użytkownika z systemem.

Ważnym aspektem bibliotek GUI była możliwość przypisywania elementom zachowań interaktywnych. Komponenty biblioteczne nie były wyłącznie wizualnymi symbolami przycisków czy pól formularzy, lecz mogły zawierać zdefiniowane akcje, takie jak przejścia między ekranami, zmiany widoczności elementów czy reakcje na zdarzenia użytkownika. Dzięki temu biblioteki GUI stawały się nośnikiem nie tylko formy, lecz także funkcji, co znacząco podnosiło wartość prototypów tworzonych w Axure 5.5.

Biblioteki GUI w tej wersji Axure wspierały również dokumentowanie wymagań funkcjonalnych. Każdy element interfejsu mógł być opatrzony opisem, komentarzem lub adnotacją, co pozwalało na jednoznaczne powiązanie komponentu wizualnego z wymaganiem biznesowym lub technicznym. W praktyce oznaczało to, że prototyp stawał się jednocześnie narzędziem projektowym i dokumentacyjnym, a biblioteki GUI ułatwiały zachowanie spójności terminologicznej i strukturalnej w całym projekcie.

Istotnym zagadnieniem była także elastyczność bibliotek GUI w Axure 5.5. Projektanci mieli możliwość tworzenia własnych bibliotek, dostosowanych do specyfiki organizacji, branży lub konkretnego systemu informatycznego. Własne zestawy komponentów mogły odzwierciedlać wewnętrzne standardy interfejsów, firmowe konwencje nazewnicze czy charakterystyczne układy ekranów. Takie podejście sprzyjało standaryzacji projektów oraz skracało czas wdrażania kolejnych rozwiązań.

W kontekście zespołowym biblioteki GUI pełniły funkcję narzędzia integrującego pracę różnych specjalistów. Analitycy biznesowi, projektanci UX oraz programiści mogli odnosić się do tych samych komponentów, co redukowało ryzyko nieporozumień interpretacyjnych. Biblioteki stanowiły wspólny język wizualno-funkcjonalny, który ułatwiał komunikację pomiędzy uczestnikami procesu wytwórczego oprogramowania.

Nie bez znaczenia pozostaje również aspekt edukacyjny bibliotek GUI w Axure 5.5. Dla początkujących projektantów były one formą wzorca dobrych praktyk, pokazując standardowe elementy interfejsu oraz ich typowe zastosowania. Analiza gotowych komponentów pozwalała lepiej zrozumieć zasady projektowania interakcji, hierarchii informacji oraz ergonomii interfejsu użytkownika. W tym sensie biblioteki GUI pełniły rolę nieformalnego narzędzia dydaktycznego.

Z perspektywy historycznej biblioteki GUI w Axure 5.5 odzwierciedlają etap przejściowy w rozwoju narzędzi UX, pomiędzy prostymi makietami graficznymi a zaawansowanymi systemami projektowania opartymi na design systemach. Choć brakowało im współczesnych mechanizmów współpracy w chmurze czy automatycznej synchronizacji komponentów, to jednak już wtedy realizowały ideę ponownego użycia elementów oraz spójności projektowej.

Biblioteki GUI w Axure 5.5 były nie tylko zbiorem gotowych elementów interfejsu, lecz integralnym elementem metodologii projektowej. Wspierały analizę wymagań, prototypowanie interakcji, dokumentowanie funkcjonalności oraz komunikację zespołową. Ich znaczenie wykraczało poza aspekt techniczny, ponieważ wpływały na jakość procesu projektowego oraz sposób myślenia o interfejsie użytkownika jako o strukturze funkcjonalnej, a nie wyłącznie wizualnej. Pomimo upływu czasu i rozwoju nowszych narzędzi, rozwiązania zastosowane w Axure 5.5 pozostają ważnym punktem odniesienia dla zrozumienia ewolucji bibliotek GUI w projektowaniu systemów informatycznych.

image_pdf

Defensive design: obsługa błędów

5/5 - (1 vote)

Sześć lat temu udało mi się na Allegro zakupić pamiętny (bo wyróżniający się pod względem designu) model laptopa iBook Clamshell (Blueberry), który wszedł do historii ze względu na zgoła inną rzecz, natomiast że był pierwszym notebookiem wykorzystującym technologię WiFi (a to był rok 1999). Pamiętam do dziś jak z pełną ekscytacją badałem każdy element nieznanego wówczas dla mnie interfejsu.

Pewnego dnia chcąc sporządzić szybką notatkę włączyłem maszynę, poczekałem chwilę na pojawienie się ekranu logowania do systemu, wybrałem portret swojej tożsamości i wpisałem w okienko hasło, po czym… oniemiałem! Okienko wzdrygnęło (dosłownie i w przenośni) się na moje wpisane hasło i potrząsnęło znacząco na NIE. Hasło, które wpisałem nie było poprawne. Tamten dzień był dla mnie znaczący.

Obsługa błędów to jeden z poważniejszych problemów w projektowaniu interfejsów, a wciąż – niestety – bagatelizowany. Co prawda coraz mniej widuję na ekranach kultowych już komunikatów: „Błąd 404 – Nie odnaleziono pliku” (ten akurat ze strony Wprost), „Błąd 404. Strona o podanym adresie nie istnieje” (a ten z GUS), czy też „Wystąpił Błąd! Brak dokumentu (nr błędu 404)” i to w formacie obrazka .gif (ze strony sejmu), ale ekrany błędów wciąż nie są wystarczająco dobrze projektowane. Na domiar złego, niektórzy z projektantów poczyniają się do obowiązku, by przy okazji tworzenia strony komunikatu z błędem, napisać cały poemat nt. ew. powodów błędu (przykład poniżej).

Z pomocą przychodzą dwie szkoły: jedna ta wywodząca się z Apple, opisana m.in. w książce A Smile in the Mind, Beryla McAlhone’a (recenzja na stronie uzytecznosc.pl) i druga, wywodząca się z grupy 37 Signals, znana szerzej pod nazwą projektowania dyfensywnego (defensive design), a opisana w Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points (polskie tłumaczenie wyszło nakładem Helion). W skrócie: obie zmierzają do tego, by 1) komunikaty o błędach uczynić bardziej ludzkimi (wyrzucamy z komunikatu całą terminologię techniczną – kogo obchodzi na który numer błędu natrafłem?), a może nawet i zabawnymi, oraz 2) wspomagać wyjście z sytuacji, np. podsuwając linki, któe pozwolą mi wyjść z opresji (do strony głównej, do systemu pomocy, FAQ, wyszukiwarki, etc.).

W Polsce dobrymi przykładami świeci serwis społecznościowy Golden Line (brawo dla konkurencji! :)), gdzie komunikaty o błędach brzmią po prostu po ludzku.

Rysunek 3. Komunikaty błędów ze strony serwisu społecznościowego GoldenLine.

Przykładem zaś wdrożenia metodyki Smile Mind jest chociażby komunikat z Cars.com.

Dla mnie prawdziwym majstersztykiem w ostatnim czasie była strona CrazyEgg. Wchodząc na jej domenę, pewnego razu stwierdziłem, że zamiast znanej mi strony widnieje komunikat mówiący, że właśnie odbywa się konserwacja serwera i przez pewien czas strona będzie wyłączona. Natomiast jeśli tylko chcę mogę… pograć sobie w grę (wykonaną w technologii flash), która widniała tuż poniżej. Nim się obejrzałem okazało się, że na stronie – której przecież de facto nie było – spędziłem ok. 20 minut, grając w najlepsze w rzucanie jajkami w przechodzących ludzi. 🙂

Nice!

image_pdf

Herezje: menu prawokolumnowe

5/5 - (1 vote)

Trzeci tydzień już studiuję najnowsze tłumaczenie J. Nielsena, Optymalizacja funkcjonalności serwisów internetowych (współatorka: Hoa Loranger). Sporo rzeczy zostało w tej pracy zaktualizowanych w stosunku do wcześniejszych publikacji tego autora, ale generalnie bez rewelacji. Może też dlatego – przyznaję się – że do Nielsena już od jakiegoś czasu podchodzę bez większego entuzjazmu. Powody? Zbyt wiele autorytatyzmu, zbyt mało badań podstawowych; trudno jest też się zgodzić ze strategią Nielsena – by badać medium (i opisywać medium – Internet), a nie podmiot, który to jest uwikłany w relację z medium (człowieka i jego system poznawczy); i do tego badać statystyką. Tak się ergonomii nie tworzy!

ALE: na stronie 61-wszej tej książki jest wykres (jak wróci do mnie skaner to zamieszczę ów schemat) zatytułowany: „Miejsca, gdzie użytkownicy kliknęli, aby przejść w inne miejsce tego samego serwisu…” Na wykresie zaprezentowane zostały dane dla wydzielonych obszarów strony:

  • stopka
  • prawa kolumna
  • lewa kolumna
  • nagłówek strony
  • obszar treści.

Największy udział w klikalności, wg schematu, ma obszar treści – czyli zasadnicza część strony (nota bene takie same mam spostrzeżenia, a i koledzy po fachu zwracają uwagę na tę prawidłowość – czyli linki zagnieżdżone w tekście są częściej klikane niż w menu). Podobnie rozkładają się klikalności dla części: nagłówek strony (często zagospodarowany przez główne menu nawigacyjne), prawą kolumnę (często menu poboczne) oraz… lewą kolumnę (!). Najmniej w udziale klikalności przypadło rzecz jasna stopce.

I tutaj kilka uwag na marginesie:

  1. próbka klików (4719) nie jest w ogóle reprezentatywna (wie to każdy, kto w życiu przeczytał choć jedną książkę z zakresu metodologii badań). Może gdyby klików było 10 x więcej można by mówić o jakiś danych bardziej reprezentatywnych,
  2. nie wiemy ile klików wykonywała (nawet uśredniając rzecz) jedna osoba – jeden unikalny user,
  3. w końcu, nie znamy innych parametrów: ile stron było testowanych (a może jedna)?, jaki miały układ nawigacji/treści?, ile z osób było praworęcznych a ile lewo- (co na tym etapie wpisu może czytelnikowi wydać się dziwne, ale potem wyjaśnię w czym rzecz)?

Przechodząc jednak do sedna: od dłuższego już czasu mam przeczucie (bo badań nie robiłem w tym zakresie), że z pewnych powodów prawostronny układ menu jest lepszy – użyteczniejszy, bardziej funkcjonalny, a na pewno „pod ręką” (rozwinę tę przenośnię, ale i rzecz nazwaną wprost niżej) – niż menu lewokolumnowe. Jest to herezja – wiem. Czytam sporo publikacji z zakresu usability i nawet samozwańczy „ekspert” od testu heurystycznego po zobaczeniu strony z zaprojektowanym układem prawokolumnowym stwierdziłby, że to błąd. A mi się wydaje, że rzekoma przewaga układu lewokolumnowego to zabobon. Do rzeczy!

Argument którym posługują się zwolennicy lewokolumnowego menu związany jest z jednym obrazkiem. Ten obrazek to zapis rezultatu badań z wykorzystaniem urządzeń do eyetrackingu, oglądania przez użytkowników wyników wyszukiwania w google.

Wniosek z niego miałby być mniej więcej taki:

A) Google w znaczącej mierze kształtuje background knowledge użytkowników Internetu.

B) Sposób zapoznawania się (bo nie wiadomo czy nazwać to czytaniem, czy oglądaniem) przez użytkowników z wynikami wyszukiwania jest wyraźnie skoncentrowany na prawej górnej części strony.

C) Jeśli będzie się konsekwentnie wykorzystywać schemat „główne menu + menu lewokolumnowe”, to – utrwalając schemat oglądania stron – strony o układzie googlopodobnym zyskają na czytelności.

Ogólniej rzecz biorąc: tak ludzie czytają w Internecie! (Podejście czysto behawiorystyczne: odpowiednia ilość bodźców wyuczy odpowiednie zachowanie usera). Pytanie jednak czy faktycznie (obrazek poniżej)? I czy logika tutaj zastosowana nie jest samosprawdzającą się przepowiednią?

Powyższy obrazek jednoznacznie pokazuje zgubność tego rodzaju argumentacji. Czytanie stron internetowych zależne jest od układu treści! Googlowy background knowledge dla strony o układzie innym niż google, nie powoduje żadnej dodatkowej komplikacji – jeśli tylko układ strony jest przejrzysty.

Poza tym łatwo wyjaśnić czemu tak a nie inaczej strona z wynikami wyszukiwania w google jest percypowana. Układ jest ewidetnie dwukolumnowy: wyniki naturalne z lewej, linki sponsorowane z prawej (między nimi wyraźny niezagospodarowany pas, oddzielający jedne wyniki od drugich). Czyta się więc stronę w układzie kolumnowym – jak gazetę. Zupełnie inaczej, niż strony z menu bocznymi, gdzie nawigacja tworzy pewną hierarchię względem treści zasadniczej.

Wracając jednak do schematu z książki Nielsena. Część wyników pokazująca, że osoby tak samo preferowały klikanie w linki zgrupowane w lewej części strony, co w te zgrupowane z prawej, z punktu widzenia wychwalania lewostronnego menu jest zastanawiające. Osobiście uważam nawet, że te dane są niedoszacowane. Powód? Aktualnie układ stron jest ewidetnie prolewostronny i spodziewam się, że strony na których było przeprowadzane badanie (chociaż badanie to za dużo powiedziane) z dużym prawdopodobieństwiem odzwierciedlały ten stan rzeczy – czyli sprzyjały klikom w lewej części, pomniejszając w związku z tym naturalnie ilość klików w części prawej – moim zdaniem dużo lepszej z perspektywy użytkownika (za czym świadczą również te statystyki Nielsena).

Dwie przesłanki (argumenty?) za tezą, że układ menu prawostronnego jest bardziej przyjazny i naturalny dla wyboru użytkownika:

  1. Od 7 lat zajmuję się projektowaniem i wykonywaniem stron internetowych, z akcentem na projektowanie 🙂 Z racji moich zamiłowań natury kognitywistycznej sporo czasu poświęcam przy tym obserwacjom. Przez ten czas zaobserowałem zarówno po sobie, jak i innych userach, że w przypadku nawigowania w Internecie, kursor myszy większą ilość czasu spędza w górnej prawej części ekranu. Całkiem sprawnie i bez większego wysiłku zatem można sobie poradzić z linkami, które w tej części ekranu są prezentowane. Przemieszczenie kursora na lewą część monitora przeważnie w takim wypadku wiąże się z naprężeniem mięśni nadgarstka, po czym następuje znowu naturalne zwolnienie mięśni, z przeniesieniem kursora na prawą stronę. Nazwałbym to argumentem ręcznym (jeśli wyżej zaprezentowany argument związany z badaniami eyetrackingowymi google nazwać argumentem ocznym). Co interesujące, tę samą rzecz chyba zauważyli ludzie związani z Microsoft. Żelaznym argumentem staje się tutaj zgrupowanie nawigacji funkcyjnej przeglądarki Internet Explorer w wersji 7 w prawej części ekranu, a nie jak się zwykło klasycznie grupować menu oprogramowania w lewej górnej części (i chociaż nie używam na co dzień tej przeglądarki, naprawdę doceniam tę zmianę, tym bardziej, że ze względu na trydycyjny układ menu oprogramowania, jest to bardzo odważne posunięcie – czytaj: herezja 🙂 ).
  2. Funkcjonowanie systemu poznawczego ludzi związane jest z wieloma różnymi czynnikami, nie tylko natury behawiorystycznej, a może nawet i najmniej. Rolę tutaj odgrywają czynniki genetyczne, rozwój osobniczy mózgu (ontogeneza) itp. Również warunkowanie – np. stronność, która dotyczy ręczności, nożności i oczności – można być, dla przykładu, praworęcznym i prawonożnym oraz lewoocznym jednocześnie (zresztą rzadkie są przypadki osób jednostronnych, np. całkowicie prawostronnych).

Tak naprawdę wpływ stronności w ramach Human-Computer Interaction (HCI) nigdy nie był badany (przynajmniej ja nie znam takich badań), a może mieć znaczenie dla kształtowania realacji człowiek-komputer. Chodzi mi natomiast o dokonywanie wyboru poprzez wskazanie (nawigowanie kursorem myszy jest dokładnie przedłużeniem wyciągnięcia ręki). Osoby prawostronne – a takich jest duża większość – naturalnie preferują rzeczy zorientowane po prawej stronie w przestrzeni (kilka razy nawet z kolegami programistami wymieniłem się tą uwagą w męskiej toalecie, gdzie dochodzi do wyboru pisauru – wszyscy rzucają się na ten z prawej, jeśli tylko jest wolny 🙂 ). Związane jest to z tym, że prawej ręce dużo łatwiej jest sięgnąć po to, co jest… pod ręką. Czyli z prawej strony. Preferencja ta jednak ma dużo dalej idące konsekwencje…

W swoim czasie (bodajże w latach 70., 80. ubiegłego stulecia) w USA, w ramach badań z marketingu oraz socjotechniki, przeprowadzono interesujący i w zasadzie klasyczny (bo cytowany często w literaturze) już eksperyment z wyborem i stronnością. Chodziło w nim o wybranie pary pończoch – jednej z dwu, dodam – identycznych! – par pończoch (opis chyba tego badania można znaleźć m.in. w książce Roberta Cialdiniego nt. wywierania wpływu na ludzi; przynajmniej tak pamiętam).

Wyniki tego eksperymentu były całkiem interesujące: (z tego co pamiętam) 85% do 15% dla pary pończoch leżących… tak, tak, po prawej stronie osoby wybierającej.

Interesujące również w tym badaniu było to, że po wyborze, osoby wybierające były proszone o przedstawienie argumentów na rzecz wybranej pary. I – racjonalizując całą sprawę – twierdziły, a to że ta para ma ładniejszy odcień, a to że wydaje się być wykonana z lepszego materiału (bardziej elastycznego, trwalszego, etc.).

Ten argument określiłbym mianem argumentu decyzyjnego.

Ostatecznie: menu w układzie prawostronnym wydaje się mieć przewagę nad układem lewostronnym. Pierwsza przewaga związana jest z funkcjonowaniem układu motorycznego ręki i naturalnego poruszania się kursora myszy w obrębie prawej górnej części monitora. Druga związana jest z faktem, że większość użytkowników jest praworęczna i w związku z tym ma naturalną preferencję dla wyboru elementów przedstawianych w prawej części swojego pola widzenia – w tym monitora. (Przy czym bardzo możliwe, że pierwsze związane jest z drugim, a spina je w całość właśnie zagadnienie wpływu stronności; u osób leworęcznych wyniki mogłyby być inne).

***

Na marginesie dodam dwie rzeczy, które są wynikiem wiedzy mojego kolegi po fachu, wieloletniego architekta Onet.pl (głównego architekta!), osoby która pracowała także nad Merlin.pl, a która piastuje stanowisko dyrektora działu architektury w Grono.net – Andrzeja Sienkiewicza.

  1. Andrzej podczas swoich badań dla Merlin.pl (z ponad czterdziestoma userami) zaobserwował naturalne preferencje dla prawej strony. Stąd nowy układ Merlin.pl, powstały przy udziale Andrzeja, jest właśnie zorientowany na prawostronną nawigację boczną (koszyk, promocje, inne wiadomości). Jego obserwacje pokrywają się całkowicie z tym, o czym napisałem wyżej w punkcie 1).
  2. Andrzej wskazuje na jeszcze jedną zaletę układu prawostronnego: skalowalność.

Jeśli dana strona internetowa będzie wyświetlana na monitorach o niższej rozdzielczości, to część zasadnicza strony – content – jest prezentowana w jednej całości; część nawigacyjna (z prawej strony) jest zaś ukryta i dostać się do niej można używając paska poziomego przewijania. Ale to i tak mniejszy ból, niż korzystanie z tego paska zawsze, gdy przeładujemy stronę – bo w układzie lewokolumnowym widzimy menu i uciętą część wypełnioną contentem.

I to by było na tyle. Czas nakarmić kota i sprawdzić aukcje na ebayu. 🙂

PS: Swoją drogą, wie ktoś jak zmienić ten styl w blox.pl na układ z menu po prawej stronie? (Zrobione).

image_pdf