Strona główna » Projektowanie interakcji

Rola projektanta interakcji w kształtowaniu strony wizualnej projektu – cz. II: ewaluacja grafik

8 lutego 2011 napisała Barbara [ 2 odpowiedzi ] Drukuj wpis

W ostatnim artykule pisałam o tym, jak można ( i trzeba!) wpływać na stronę wizualną projektu już na etapie tworzenia makiet funkcjonalnych. Jednak tworzenie layoutu na makietach się nie kończy. I to właśnie od grafiki, opracowanej na bazie projektu funkcjonalnego, w dużym stopniu zależy użyteczność witryny czy aplikacji. Dlatego też prace nad graficzną prezentacją interfejsu użytkownika powinny przebiegać w ścisłej współpracy pomiędzy webdesignerem a projektantem interakcji.

Ustalanie wspólnej wizji projektu graficznego to często ciężka praca, dlatego warto mieć na uwadze dobro użytkownika i realizację postawionych celów biznesowych, a nie własne preferencje.

Na co zwracać szczególną uwagę przy ewaluacji grafik?

Poniżej znajdziecie listę podstawowych aspektów wizualnych, na które powinien zwrócić uwagę projektant interakcji (nie jest ona zamknięta i chętnie poznam inne ważne punkty pracy nad grafiką).

Sugestywne fotografie

Jeden obraz przekazuje ponoć tysiąc słów, dlatego warto pamiętać o stosowaniu dużych, widocznych fotografii i grafik wpisujących się w tematykę danego projektu. Oczywiście ważny jest również dobór samych fotografii – te stockowe, sztuczne czy niezwiązane z tematem często traktowane są jako szum informacyjny. Dlatego warto wyczulić grafika na dobór odpowiednich wizerunków. W większości przypadków (stron e-commerce, witryn firmowych, portali informacyjnych itp.) duże wizerunki spełniają swoją funkcję urozmaicając i wzbogacając treści. Za pomocą odpowiednio dobranych obrazów można również kierować uwagą odbiorców (więcej dowiecie się w artykule Igi).

Stockowe fotografie często odbierane są jako szum informacyjny

Rozmiar czcionki

W wielu projektach webowych można zauważyć trend zmniejszania czcionek dla osiągnięcia lepszego efektu wizualnego. Jednak, aby nie zniechęcić użytkowników do czytania,  tekst na stronie nie powinien być mniejszy niż 10 – 12 ppt. Należy tak prezentować treści, aby ich przyswajanie było wygodne i nie wymagało od odbiorców żadnych dodatkowych akcji, np. powiększania strony.

Wielkość czcionki a łatwość czytania tekstu (powiększ, aby zobaczyć rzeczywiste rozmiary)

Wielkość czcionki a łatwość czytania tekstu (powiększ, aby zobaczyć rzeczywiste rozmiary)

Odpowiedni kontrast

Analogicznie do małej czcionki, czytanie może utrudnić również zbyt mały kontrast pomiędzy literami a tłem. Delikatne przejścia kolorystyczne pomiędzy tekstem, a tłem czynią layout lekkim, jednak wymagają od odbiorców wytężenia wzroku i ogromnego skupienia uwag, czyli włożenia dużego wysiłku w akcję.  Takie przestawienie kontentu zdecydowanie zniechęca do eksploracji, a osobom z zaburzeniami widzenia wręcz uniemożliwić zapoznanie się z treściami.

Kontrast pomiędzy tekstem a tłem i jego wpływ na percepcję treści

Ikony

Ikony nie zawsze zwiększają użyteczność i pomagają w nawigacji po witrynie. O problemach z identyfikacją znaczenia piktogramów pisała już kiedyś Iga. Ewaluując projekty graficzne należy zwrócić uwagę na metafory zastosowane w ikonach, gdyż te rzadko stosowane czy zbyt wysublimowane mogą wprawiać użytkowników w konsternację. Testy z użytkownikami uświadomiły mi, jak różnie interpretowane mogą być ikony bez etykiet. Jedynie niewielka pula ikon (np.: play, stop, pauza, drukowanie) jest jednoznacznie odbierana przez większość ludzi. Należy zatem bardzo ostrożnie podchodzić do tworzenia specyficznych ikon.

Przykłady powszechnie rozumianych ikon

Efekt banner blindness

Efekt ślepoty bannerowej można osiągnąć niezamierzenie stosując zbyt wiele elementów graficznych w miejscach, w których zwyczajowo zamieszczone bywają formy reklamowe. Może się więc zdarzyć, że element funkcjonalny, który miał być wyróżniony przez bogatą grafikę, zostanie przez użytkowników potraktowany jak niechciana reklama i po prostu pominięty. Należy, więc unikać nagromadzenia form graficznych, które mogą zostać odebrane jako szum informacyjny.

“…banner blindness is real. It is not just advertising banners but anything that looks like an advertising banner” Jakob Nielsen

Granatowym kolorem zaznaczono przykładowe lokalizacje oraz kształty, często odbierane jako bannery

Kolorystyka

Kwestie związane z doborem kolorystyki są najtrudniejszą częścią pracy nad projektem graficznym. W tym przypadku wiele zależy od gustu, czy osobistych preferencji odbiorcy. Są jednak elementy, na które specjalista usability powinien zwrócić szczególną uwagę pod kątem kolorystyki:

  • elementy aktywne i nieaktywne – ważne, aby elementy aktywne swoim wyglądem komunikowały możliwość wykonania akcji i odwrotnie – nieaktywne jednoznacznie pokazywały jej brak. W tym celu najczęściej stosowane są odpowiednie kolory – żywe i nasycone dla oznaczenia aktywności, szarości i pastele dla podkreślenia jej braku. Dlatego też użycie np. szarości na przyciskach akcji może powodować poważne problemy z uświadomieniem sobie przez użytkowników możliwości działania. Dodatkowym aspektem jest weryfikacja spójności wyglądu elementów aktywnych i nieaktywnych, o którym pisałam więcej poprzednim razem.

Aktywność przycisków komunikowana przez użycie określonych kolorów

  • komunikaty – komunikaty powinny być wyraźne i widoczne. Dodatkowo pewnym typom komunikatów przypisane są odpowiednie kolory – dla błędów zwyczajowo stosujemy odcienie czerwieni, dla informacji o akcji zakończonej  z sukcesem – najczęściej zieleń (choć tutaj dowolność jest już większa). Dlatego też wyjście poza te konwencje może być dla użytkowników bardzo mylące.

Co tutaj jest nie tak? Kolor a percepcja komunikatu

  • tło i tekst – połączenie granatowego i oranżu może być dobre na koszulce ulubionej drużyny, jednak niekoniecznie sprawdzi się na stronie internetowej, która wymaga od odbiorców czytania. Przy doborze kolorów warto wziąć pod uwagę kontekst korzystania ze strony. Witryny, które opierają się na tekstach powinny mieć jasne tło, które ułatwia czytanie (warto brać przykład z książek), natomiast serwisy takie jak np. Ipla.tv mogą pozwolić sobie na ciemne tło, które wydobywa na pierwszy plan sam obraz.

Kolorystyka tła i tekstu, a łatwość czytania.

Nie musisz być grafikiem…

..ale jako projektant musisz umieć zweryfikować projekty graficzne oraz wystosować konstruktywną krytykę ( o tym, jak krytykować z pożytkiem przeczytasz w jednym z artykułów Ewy), właśnie ze względu na jej wpływ na odbiór informacji oraz postrzeganie witryny lub aplikacji przez użytkowników.

Źródła:

http://www.useit.com/alertbox/banner-blindness.html

Autorka

Barbara Rogoś-Turek

www: http://witflow.com
Managing Partner i Research Director w WitFlow. Trenerka, prelegentka, propagatorka projektowania użytecznego i budzącego pozytywne emocje. Ewangelistka pracy grupowej. Po godzinach wyszukuje przejawy dobrego user experience i designu poruszając się na różowym rowerze po ulicach Wrocławia. Czytaj więcej
Tagi: , , ,
  • Damian

    Druga ikona nie oznacza pauzy, a np. zamknij okno, albo usuń. Pauza to kwadrat zamknięty w kole. Piszesz o czymś czego sama nie rozumiesz, bądź nie odróżniasz.

  • http://uxbite.com Barbara

    @Damian: Druga ikona z prawej oznacza pauzę i to nie ulega wątpliwości. Kwadrat zamknięty w kole, o którym piszesz to „stop”. Natomiast druga ikona od lewej to właśnie zamknij okno lub usuń. Jak widać wątpliwości pojawiają się nawet przy tak znanych ikonach.