Strona główna » Projektowanie interakcji

Rola projektanta interakcji w kształtowaniu strony wizualnej projektu

18 stycznia 2011 napisała Barbara [ 1 odpowiedź ] Drukuj wpis

„Jak cię widzą, tak cię piszą”- mówi stare przysłowie odnosząc się do psychologicznego mechanizmu oceniania na podstawie pierwszego wrażenia. Naukowcy twierdzą, że w czasie pierwszego kontaktu ocena  formułowana jest w przeciągu pół sekundy. Dotyczy to również projektów webowych i interaktywnych, o czym możemy przeczytać choćby na stronie BBC.

Ładne sprzedaje i jest bardziej lubiane.

Odpowiada za to znany z psychologii społecznej tzw. efekt aureoli, czyli tendencja do nieuświadamianego, automatycznego wartościowania ludzi, rzeczy, zjawisk na podstawie pozytywnego wrażenia najczęściej wynikającego z wyglądu (a nie formułowanego na podstawie interakcji). Mechanizm ten oddziałuje również w drugą stronę brzydkie utożsamiane jest ze złym, niezrozumiałym oraz nielubianym.

Don Norman w swoim eseju Emotion and design: Atrractive things work better argumentuje również, że ładne jest chętniej używane i dostarcza dużo więcej satysfakcji, odwołując się tym samym do user experience produktu. Pozytywne emocje wywoływane przez atrakcyjne produkty, layouty itp. mają ogromny wpływ na zachowania i wybory użytkowników – zmniejszają stres uczenia się nowego rozwiązania, gdyż wydają się prostsze do ogarnięcia.

W iPhone human interface guidelines czytamy:

Wygląd wywiera silny wpływ na funkcjonalność: aplikacja która wydaje się (przedstawia się jako) zagmatwana lub nielogiczna jest trudna do zrozumienia i użycia.

I odwrotnie, aplikacja dobrze zaprojektowana (zarówno pod względem funkcjonalnym jak i wizualnym) jest łatwiejsza w użyciu, niejako prowadzi za rękę, przyspieszając wykonywanie działań.

Jedną z funkcji estetyki jest również budowanie pozytywnego, przyjaznego wizerunku marki, która jest godna zaufania zarówno online jak i offline. Wielokrotnie spotkałam się z opiniami użytkowników, którzy podkreślali dużą wagę dobrej grafiki w interakcji ze stroną, a kiepski wygląd utożsamiali z brakiem profesjonalizmu firmy. Ładne po prostu zachęca do interakcji. Jest również wyrazem dbałości o użytkownika (klienta).

Zadania projektanta

Wygląd aplikacji nie zależy jedynie od grafika. Zadaniem projektanta interakcji jest nie tylko dbanie o to, aby zaproponowane rozwiązania były użyteczne i logiczne w działaniu. Do jego obowiązków powinno również należeć dbanie o projekt wizualny właśnie w zakresie zastosowania elementów, które pozytywnie wpływają na user experience gotowego projektu również w zakresie estetyki. Nie chodzi tutaj o dobór stylu czy kolorystyki, ale dbanie o harmonijne rozłożenie elementów, spójność, podkreślenie (wydobycie) najważniejszych informacji czy elementów nawigacji. Taki projekt jest bazą, na której grafik może oprzeć swoją pracę, a współpraca przebiegnie płynnie.

Niestety wiele projektów ma braki wynikające właśnie z przykładania zbyt małej wagi do strony wizualnej projektu przez projektantów interakcji.

Jak kształtować stronę wizualną na etapie projektowania makiet?

Projektowanie na bazie gridu, czyli siatki, to niby oczywista oczywistość. Pomaga wypracować harmonijny, poukładany i zrównoważony wizualnie projekt. Za pomocą gridu o wiele łatwiej ustalić optymalny, proporcjonalny podział na kolumny, strefy horyzontalne i wertykalne projektu, czyli zorganizować informacje na ograniczonej przestrzeni. Uzyskany w ten sposób jasny układ i czysty podział buduje u użytkowników poczucie uporządkowania i kontroli nad witryną czy aplikacją.

Schematyczne porównanie stron tworzonych przy zastosowaniu siatki i bez jej użycia

Jak zacząć? W sieci można znaleźć zarówno biblioteki z gridem do zastosowania w popularnych programach do projektowania takich jak Axure czy Pencil, jak również specjalne strony ustalające pożądaną siatkę, np. Grid Designer. Dostępnych jest również wiele artykułów i tutoriali.

Biblioteka grid 960 do pobrania http://www.userfocus.co.uk/resources/axure_grids.html

Hierarchia treści – tworząc projekt funkcjonalny należy akcentować akcje pierwszo- i drugorzędne, tak, aby ich rozróżnienie było jasne dla grafika. Użytkownikowi dadzą one poczucie, iż wie, co ma robić w witrynie, a layout poniekąd sam go prowadzi do najważniejszych elementów. Wykorzystaj najlepiej dostrzegalne miejsca na stronie do przedstawienia kluczowych funkcjonalności i informacji. Pamiętaj jednak, że nie wszystko musi się znaleźć przed łamaniem,  gdyż użytkownicy przewijają strony. Nie zaburzaj struktury strony zbytnim przeładowaniem treści przed łamaniem.

Konsekwencja – konsekwentnie stosowane elementy w projekcie (linki, nagłówki, formaty zdjęć) to podstawa. Te same funkcjonalności na różnych ekranach powinny wyglądać tak samo. Ułatwi to użytkownikom ich odnajdywanie i identyfikację, grafikowi tworzenie warstwy wizualnej, a koderom cięcie projektów. Uczul grafika, iż linki nie muszą być niebieskie i podkreślone, powinny być jednak spójne stylistycznie i kolorystycznie.

Linki zastosowane w jednym ze sklepów internetowych


Odpowiednia segmentacja treści – często przy wstawianiu „Lorem ipsum” zamiast prawdziwych tekstów popełniany jest kardynalny błąd – zapomina się o tak ważnym przy tworzeniu kontentu online odpowiednim „porcjowaniu” treści, pogrubieniach, nagłówkach czy negatywnej przestrzeni itp.

  • White space’y – nie bój się pustych miejsc. Uwzględnij w projekcie pustą przestrzeń, która nada projektowi „światła”, przestronności, lekkości. Zbite, blisko ustawione elementy dają wrażenie chaosu, utrudniają odbiór. Stosuj marginesy zewnętrzne i wewnętrzne (ułatwi ci to praca z gridem), pamiętaj o interlinii i obszarach ochronnych stosowanych elementów.

Akapit bez oraz z zastosowaniem przestrzeni negatywnych

Projekty, które naprowadzają

Jako projektant musisz umieć tworzyć projekty funkcjonalne, które same sugerują pewne rozwiązania graficzne, co ułatwia pracę grafikowi i zapobiega wielu poprawkom na etapie gotowego layoutu.
Zawsze powtarzam klientom, że zły projekt graficzny może zniweczyć cały wysiłek włożony w stworzenie użytecznego projektu funkcjonalnego. I na koniec warto zapamiętać słowa J.J. Garnetta:

Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design.

Więcej o mechanizmach wpływania na uwagę odbiorców, związanych z projektowaniem warstwy wizualnej przeczytacie w innych artykułach na uxbite – o oddziaływaniu ludzkich twarzy na konwersję oraz grupowaniu percepcyjnym.

Następnym razem poruszę temat weryfikacji prac graficznych pod kątem użyteczności i UX.

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: , , , , ,
  • Masza

    WOW ! Super!
    Z niecierpliwością czekam na dalszy ciąg..
    Hmm.. śmierdzi mi malizną :D
    Jest szansa na obszerniejszy artykuł ?