Projektujesz stronę www. Twój klient chce, aby była maksymalnie wypakowana funkcjonalnością, a jednocześnie prosta w użyciu. Zapraszasz osoby do badań. Czy, jak radzi Nielsen wystarczy zaprosić pięciu, aby znaleźć 75% błędów na stronie? W metodologii badań psychologicznych uważa się, że dopiero 30 osób daje statystycznie istotny wynik. Ze względu na koszty i problemy organizacyjne nikt nie przeprowadzi takiego badania! W jaki sposób możesz uniknąć wysokich kosztów badań, a jednocześnie projektować użyteczne interfejsy?

Skorzystaj z tego, co oferuje kognitywistyka. Wiedząc o tym co przyciąga naszą uwagę, łatwiej będzie Tobie zaplanować układ strony. Gdy poznasz reguły rządzące percepcją, Twoje projekty już na etapie prototypów będą bardziej intuicyjne. Zaczynamy?

Pierwsze wrażenie

Badania eyetrackingowe pokazują, że nie czytamy stron internetowych, a jedynie omiatamy je wzrokiem. Użytkownik nie czyta długich tekstów, a jego wzrok skacze między wszystkimi elementami, które wyglądają na dające się kliknąć. Innym bodźcem, na który natychmiast reagujemy jest ludzka twarz. Jest to szczególnie istotne przy projektowaniu głównej strony Twojej kreacji. Tekst jest czymś jednolitym, a uwaga wzrokowa wyewoluowała do wyszukiwania odmienności. Czy to znaczy, że w ogóle nie czytamy treści? Nie do końca. Wyszukujemy na niej to, co wiąże się z naszymi aktualnymi planami, oczekiwaniami, celem, z tórym weszliśmy na stronę i emocjami. Tak właśnie działa percepcja. To co widzisz nie jest kopią świata zewnętrznego. Wybitny neurobiolog-kognitywista V. Ramachandran, pisze, że to, co widzimy jest najbardziej prawdopodobną halucynacją (zainteresowanych odsyłam do artykułu Trzy prawa qualiów).

Pozwól więc użytkownikowi zawiesić wzrok na tym, co chcesz przekazać – wystarczą do tego:

• pogrubienia
• wypunktowania
• nagłówki

Obraz znaczy więcej niż tysiąc słów

Zobacz na ile sposobów możesz przekazać swoje idee.W psychologii kognitywnej potwierdzono efekt wyższości obrazu nad słowem. Chociaż użycie słów ma potencjalnie większe możliwości w zakresie kodowania informacji, kodowanie obrazowe bardziej sprzyja
zapamiętywaniu.

Metody na przedstwienie różnych metod wizualizacji w postaci układu okresowego pierwiastków

Spostrzeganie

Zasady wizualnej organizacji danych

Czy zwrot „teoria z początku XX w.” wywołuje w Tobie grozę? Chcę Tobie pokazać jak stara teoria percepcji Gestalt pomoże Ci kreować nowoczesne witryny.Niemieccy psychologowie znaleźli kilka zasad, które rządzą naszym spostreganiem.

• bliskość – Spójrz na obrazek powyżej. W mgnieniu oka łączysz kropki będące blisko siebie w pary, prawda?
• podobieństwo – Możesz łatwo zastosować do wizualizacji wszlkiego typu. Jeśli chcesz pokazać, że dwie rzeczy są ze sobą związane upodobnij je do siebie. To, co jest inne- odróżni kolorem, wielkością, czcionką itp.
• domknięcie – nasza wiedza o otoczeniu sprawia, że umysł dorabia naszym spostrzeżeniom, to czego na nich nie ma. Od dziecka poruszamy się w trójwymiarowym świecie, więc spontanicznie dostrzegamy całe obiekty.
• wspólna droga -widzimy dwie przecinające się linie, a nie cztery „wąsy”

Uwaga

Uwaga pozwala nam wydobyć z otoczenia to, co najważniejsze. Ma jednak swoje ograniczenia. Pisałem już o bodźcach, które przyciągają uwagę. Warto zapoznać się także z polecaną na blogu Symetrii książką Orienting of Attention. A teraz krótki i prosty eksperyment.

Policz wszystkie rzuty zawodników w czarnych koszulkach

Prawie nikt nie spostrzega, że w środku rozgrywki po srodku boiska przechadza się dziewczyna z kapeluszem. Nie wierzysz? Obejrzyj film jeszcze raz. Wystarczy, że będziemy na czymś mocno skupieniu, a nawet bardzo wyróżniające się bodźce nie przedrą się do naszej świadomości.

Podejmowanie decyzji

Dokonujesz ogromnej ilości wyborów, dysponując niepełną bądź niepewną informacją. Jak to się dzieje, że te decyzje najczęściej są trafne? Przede wszystkim stoi za nimi ogromne doświadczenie zebrane w ciągu rozwoju. Stanowi ono Twoją wiedzę utajoną. Podejmując decyzje (szczególnie typu kliknąć/nie kliknąć nie rozważasz wszystkich za i przeciw. Pomyśl ile czasu by Ci to zajęło. Ludzie z reguły zadowalają się pierwszym, możliwym rozwiązaniem.

To tylko krótki przegląd tego, co nauki poznawcze mogą zaoferować projektantom interfejsu. Zapraszam do częstych odwiedzin tego bloga, a dowiesz się jeszcze więcej!

Linki zewnętrzne:

• Google Books: Handbook of Virtual Environments
• Lista publikacji na temat Eyetrackingu na stronie firmy Usercentric
• Tobii Eyetracking Research and Vision Wprowadzenie do tego czym jest i jakie jakie zastosowania ma Eyetracking, PDF, (348 KB)
• Ideacto – Badania procesu zakupowego w sklepach internetowych, PDF, (2,0 Mb)
• Three laws of Qualia, PDF, (256 KB)

Sortowanie kart to metoda ujawniająca jak użytkownicy kategoryzują informację stosowaną na stronie internetowej, w aplikacji czy intranecie – tematy, elementy nawigacji, tytuły podstron itp. Zadaniem osób badanych jest pogrupowanie tych pojęć w struktury. Następnie poszukuje się w tak otrzymanych danych powtarzających się wzorców. Pozwala to na dostosowanie układu podstron i
etykiet menu do oczekiwań grupy docelowej. Sortowanie kart można przeprowadzić korzystając z arkuszy papieru, na których badani przyklejają etykiety lub za pomocą specjalnego oprogramowania.

Technika sortowania kart wywodzi się z badań psychologii kognitywnej, a przyswojona została przez metodologię User-Centered Design. Główną ideą sortowania kart jest zebranie danych koniecznych do tego, by kluczowe informacje były szybko i łatwo znajdowalne. Jest to metoda stosowana najczęściej przy projektowaniu nowych stron internetowych Pozwala dowiedzieć się jak
przyszli odbiorcy nazywają ważne elementy treści strony internetowej i jakie zależności widzą
między nimi.

Metody sortowania kart

Wyróżnia się trzy odmiany sortowania kart:

• sortowanie otwarte (ang. open sorting)
• sortowanie zamknięte (ang. closed sorting lub tree sorting)
• lista otwarta (ang. open list)

Podczas sortowania otwartego uczestnicy otrzymują przygotowane karty. Na jednej stronie oprócz zdefiniowanych wcześniej nazw mogą znajdować się także elementy graficzne np. ikony. Po drugiej natomiast można zamieścić dodatkowe objaśnienia. Prowadzący prosi uczestników o posegregowanie kart i nadanie nazw tak powstałym grupom. Jest to technika przydatna przy
projektowaniu nowych stron lub aplikacji.

W technice sortowania zamkniętego zadanie badanych jest podobne jak w sortowaniu otwartym, jednak dodatkowo karty należy ułożyć wg hierarchii w uprzednio zdefiniowanych przez prowadzącego kategoriach. Metoda ta jest użyteczna w przypadku dodawania treści do już istniejącej witryny lub jako dodatkowa informacja po wcześniejszej analizie wyników sortowania
otwartego.

Linki wewnętrzne:

• Pobierz artykuł Marka Goliasza na temat sortowania kart, PDF, (336 KB) >>

Linki zewnętrzne:

• Natalia Bednarz z Symetrii na temat sortowania kart, PDF, (523 KB)
• Ograniczenia metody sortowania kart na blogu Offline
• Marek Kasperski o sortowaniu kart
• Książka Donny Spencer na temat Card Sorting wydawnictwo Rosenfeld

Frank Ritter i jego współpracownicy zApplied Cognitive Science Lab przedstawiają na swojej stronie zasady analizy użyteczności pod kątem różnych elementów strony:

Tekst

• użytkownicy nie czytają całego contentu, ale skanują wzrokiem całą stronę,
  stosowanie „małej czcionki” (lowercase) jest bardziej czytelne niż „DUŻEJ” (uppercase)
• migający tekst nadmiernie rozprasza,
• do uważnego czytania zniechęcają duże bloki tekstu oraz mała, szeryfowa czcionka.

Kolor

• nadmiar kolorów na stronie jest mylący,
• tekst umieszczony na polach o różnym kolorze jest trudny do przeczytania, ale …
  jeśli na różnobarwnym tle umieścimy jednolity kolorystycznie obszar, to tekst na nim będzie się wyróżniał,
• kolor powinien być elementem architektury informacji – ma pozwalać odróżniać typy treści.

Animacje

• animacje poruszające się w sposób ciągły nadmiernie rozpraszają,
• mapa obrazu powinna czytelnie wskazywać aktywne obszary (np. poprzez podświetlenia), a te powinny być wyraźnie podpisane,
• animacje i inne aktywne elementy graficzne wpływają negatywnie na czas ładowania się strony, co jest częstą przyczyną irytacji użytkownika i zaniechania odwiedzenia strony.

Aplety

• mogą być ciekawe i potrzebne, ale wydłużają czas ładowania strony,
• koflikt dwuklik vs. klik.

Podsumowując, zdaniem autorów, to czego potrzebują strony internetowe, to:

• mniej grafiki (szczególnie animowanej),
• czytelny tekst,
• jednolitości (powszechne przyjęcie standardów),
• skupienie się na ułatwieniu wykonania zadania przez użytkownika -zakupie, znalezieniu informacji o kontakcie itp. poprzez prostotę, jasność i spójność.

Wczoraj miało miejsce spotkanie UX Books Club w Poznaniu. Celem tego typu spotkań, odbywających się regularnie na całym świecie jest otwarta dyskusja i wymiana doświadczeń w oparciu o przeczytaną literaturę branżową.

W czasie pierwszego spotkania omówiona została książka Marka Kasperskiego i Anny Boguskiej-Torbicz „Projektowanie stron www. Użyteczność w praktyce”.

Na poznańskim spotkaniu przyjęliśmy formułę otwartej dyskusji, każdy uczestnik zapoznał się z książką i miał za zadanie przedstawić skrótowo najważniejsze wątki z omawianego rozdziału, określić co mu się podoba, a czego jego zdaniem zabrakło w książce. Szczególny nacisk położyliśmy na kwestie związane z odniesieniem omawianych tematów do praktycznych problemów z którymi każdy z uczestników w mniejszym lub większym stopniu miał do czynienia.

Na pierwszy ogień poszły zagadnienia związane z prototypowaniem, od sortowania kart poprzez makiety papierowe po projektowanie w programach komputerowych takich jak np. Axure. Ciekawymi wnioskami z realizacji projektu dla UAM podzielili się z nami Bartosz Mozyrko i Kamil Kaczmarek. W tym kontekście dyskutowaliśmy również o optymalnej liczbie kart oraz liczebności grupy badawczej.

Zdjęcie okładki książki "Projektowanie stron www"

Największe zastrzeżenia dotyczące rozdziału o card storting dotyczyły analizowania zebranych danych. Z kolei w przypadku prototypowania komputerowego zabrakło wyszczególnienia w książce ogólnych zasad, jakimi powinien się kierować architekt informacji przestępując do opracowywania nowej koncepcji serwisu.

Wszyscy zgodziliśmy się co do tego, że pozycja Kasperskiego i Boguskiej to wręcz idealna lektura dla osób, które rozpoczynają swoja przygodę z Web Usability. Dzięki bardzo przejrzystej formie, dużej liczbie odwołań do literatury i pokazaniu działania współczesnych narzędzi warsztatu UX, książka stanowi doskonały wstęp do dalszych poszukiwań UX-owego debiutanta.

„Projektowanie stron www. Użyteczność w praktyce” jest naszym zdaniem również bardzo dobrym materiałem edukacyjnym dla Klientów, materiałem dzięki któremu Klient będzie w stanie lepiej zrozumieć UCD i Web Usability, a co za tym idzie współpraca z agencją przebiegać będzie sprawniej.

Na razie jeszcze jesteśmy na etapie rozruchu, ale po pierwszym spotkaniu jest bardzo duża chęć jego kontynuacji, staramy się również dotrzeć z informacją o rozpoczęciu naszej działalności do osób zainteresowanych tematem Web Usability w Poznaniu.

Post ten jest również apelem do osób, które chciałby poszerzyć swoją wiedzę z tego zakresu, spotkać się, podyskutować w miłej atmosferze i wymienić się swoimi doświadczeniami.

Następne spotkanie z cyklu UX Books odbędzie się 21 maja, o godzinie 18:30 w siedzibie Symetrii na ulicy Wyspiańskiego 10/3, dalej będziemy rozpracowywać książkę Marka Kasperskiego i Anny Boguskiej, skupimy się na rozdziale trzecim czyli badaniach z użytkownikami. Książka przypadła nam do gustu i nie chcemy tak od razu na jednym spotkaniu jej skonsumować.

Linki zewnętrzne:

• Pobierz fragment książki ze strony wydawnictwa Helion, PDF, (1.9 Mb)
• Kup książkę „Projektowanie stron www” w księgarni Helion
• Zapoznaj się z recenzją książki pióra Roberta Drózda
• Zapoznaj się z recenzją książki w księgarni Onepress