UX – czyli jak być trendy

Termin „user experience design” pojawił się w latach 90. ubiegłego wieku w pracach nad interakcją człowiek-komputer (ang. human-computer interaction — HCI). Choć za autora uważa się Dona Normana, to twórca Apple, Steve Jobs pokazał biznesową wartość użyteczności.

Trendy

Śledzenie trendów w dziedzinie UX jest ważne z wielu powodów. Można wskazać między innymi:

  1. Upowszechnienie rozwiązań, które ułatwiają posługiwanie się produktem i mogą stanowić część przyzwyczajeń użytkownika. Na przykład menu typu „hamburger”.

  2. Jest to dziedzina bardzo młoda, opara na „miękkiej” wiedzy – warto więc ucząc się naśladować najlepszych.

  3. Stosując typowe rozwiązania oszczędzamy na czasie.

Ważne jest zwłaszcza śledzie trendów wyznaczanych przez gigantów (jak Google i Facebook) – bo za nimi stoi nie tylko moda, ale miliony dolarów przeznaczane na rozwój.

Warto jednak wiedzieć, że część obowiązujących trendów nie przetrwa, a część z nich to tylko moda – więc może warto się wyróżnić łamiąc standardy? Tak postępują mistrzowie. Poza tym nawet najlepsze rozwiązania mają wady i mogą z czasem się znudzić. Dlatego na przykład wspomniany „hamburger” jest krytykowany – bo można go przeoczyć. Gdy już opanowaliśmy tworzenie ładnych wypukłych przycisków – pojawiła się moda na płaskie… Te z kolei są krytykowane z uwagi na brak efektu „przyciskania”…. Niektóre trendy się nie przyjęły i nikt o nich nie wspomina (kiedyś postulowano na przykład odmienne od html język opisu strony; na naszych oczach umiera technologia Flash i promowana mocno przez Apple M-dot).

Poniżej wyliczono te rozwiązania, które są obecnie najczęściej spotykane.

1. Elementy nawigacji.

a. Menu typu „hamburger”

Pozwala ukryć menu na małych ekranach. Obecnie trochę nadużywane – więc widać też początek trendu odwrotu….

b. Okruszyny (breadcrumbs)

Ścieżka linków do odwiedzonych stron ułatwia powrót. Zmienia się wygląd tego elementu nawigacji, ale jest on nadal często spotykany na różnych stronach.

c. Ikony

Dobrze znane z systemów „okienkowych” i mobilnych – pojawiają się coraz częściej także na stronach internetowych (głównie za sprawą znalezienia efektywnego sposobu ich skalowania – w postaci czcionek Awesome).

2. Efektywne sposoby na osiągnięcie nowoczesnego wyglądu:

a. Budowa stron z komponentów

Projektowane są komponenty z których składa się strony. Przykład: web designer systemu Odoo (zob. projekte14p.pl).

b. Flat design (płaski projekt)

Zasady zgodnez ideą MaterialDesign (żywe kolory, minimalizacja treści, duże przejrzyste komponenty,brak wypukłości).

Przykład:https://www.spotify.com/pl/

c. Stosowanie siatek (grid) i responsywność

Responsywność wygrywa z adaptowalnością. Dlaczego? Może z powodu ładniejszego terminu?

3. Modne rozwiązania i efekty

One-Page – Long-page

Wszystkie informacje na jednej stronie – najczęściej dynamicznie zmieniającej się w trakcie przewijania.Łatwiej jest skrolować niż klikać.Przykład:http://www.reverenddanger.com/

Ładowanie stron startuje od zarysu

Pokazuje się struktura strony, zanim ściągnie się szczegóły. Mogą to też być rozmyte zdjęcia przed ściągnięciem maksymalnej rozdzielczości.

Ładowanie zsynchronizowane z ruchami myszką

Ładowanie stronywraz z przesuwaniem w dół –jak na Facebooku(zob.http://jestem.mobi/). Zmiana wraz z ruchami myszką, scrolljacking (zob.https://www.apple.com/mac-pro/).

Split screen design- podział ekranu na dwie części o różnych treściachhttp://www.hongkiat.com/blog/vertical-split-screen-layouts/

Złote reguły projektowania

Niezależnie od tego, czy posługujemy się gotowymi rozwiązaniami, czy też projektujemy własne (a zwłaszcza wtedy) -warto pamiętać o tym, że istnieją pewne uniwersalne reguły projektowania.

Niezależnie od tego, czy posługujemy się gotowymi rozwiązaniami, czy też projektujemy własne (a zwłaszcza wtedy) -warto pamiętać o tym, że istnieją pewne uniwersalne reguły projektowania.Poniżej podano kilka takich reguł opracowanych głównie na podstawie książki „Design dla hakerów”.

Proporcje

Doborem odpowiedniej proporcji można sprawić, by jeden element wydawał się ważniejszy, a inny mniej ważny. Relacje proporcji pomagają w organizowaniu różnych elementów projektu — poza przyciąganiem uwagi odbiorcy także prowadzą jego wzrok przez kompozycję.

W projektowaniu można zastosować proporcje opisywane złotą liczbą - oznaczanąjako małe fi (φ).

fi =(a+b)/a = a/b

Odcinki linii podzielonej zgodnie ze złotą proporcją pozostająjeślidługość a+b ma się tak do długości a, jak długość a do długości b.

Inne atrakcyjne proporcje: to 1:√2 oraz 2:3, 3:4

Złota proporcja jest bardzo blisko spokrewniona z ciągiem Fibonacciego-liczb całkowitych, w którym każda kolejna liczba jest sumą dwóch poprzednich, czyli: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55...Proporcja 2:3(=66%)jest zbliżona do złotej. W dalszej części ciągu jest ona już dokładnie taka sama(34 : 55 = 61,8%). Na podstawie ciągu Fibonacciego i złotej proporcji można utworzyć niemalnieodróżnialne spirale logarytmiczne.Takie spirale bywają świadomie wykorzystywane do rozmieszczania elementów na stronie.

Zasada dominacji

Kiedy dany element dominuje w kompozycji, jest on jedną z pierwszych rzeczy, na które odbiorca zwraca uwagę. Działa jak magnes na spojrzenie, ale także jak kotwica-wzrok powraca do tego elementu, kiedy odbiorca zapoznaje się z innymi obszarami kompozycji.

Zwracaj uwagę na najistotniejsze treści. Najprościej jest to zrobić poprzez elementy "duże" i "pogrubione" – co niekoniecznie odnosi się do czcionki! Chodzi o poświęcenie dużej ilości miejsca na ekranie jednym, na prosty ale efektowny element opisujący produkt lub usługę.

Dobór kolorów

Dobór kolorów jest bardzo ważny. Trudno spodziewać się tego, że bez studiowania historii sztuki osiągniemy w tym doskonałość (zob. http://historiasztuki.com.pl/NOWA/30-00-01-KOLOR.php, http://www.warsztatywzlodziejewie.pl/poradnik/kolo-kolorow-klika-porad-dla-wszystkich-fotomalarzy ). Zawsze jednak można skorzystać z „gotowców”, które można znaleźć na przykład tutaj: http://paintstrap.com/gallery/.

Jednak warto wziąć przy tym pod kilka ogólnych sugestii (na podstawie „Design dla hakerów):

  1. Największy wpływ na ogólny kształt projektu ma kolor tła. Porównuje się go z kolorem papieru na list motywacyjny. Biały lub kremowy robi od razu korzystne wrażenie. Ludzie są w większości przyzwyczajeni do czytania materiałów drukowanych na białym papierze, tak jak w gazetach i czasopismach. […] Biel kojarzy się na Zachodzie z czystością, schludnością i niewinnością.
  2. Ciemne tło może skojarzyć się użytkownikowi z udaną nocą na mieście — dlatego z ciemnym tłem można się zetknąć na stronach restauracji i klubów. Ciemne tła pojawiają się również na stronach webdesignerów, a także projektantów mody. Mogą wywoływać wrażenie ekskluzywności i wysublimowania.
  3. Kolor czerwony jest wyjątkowy:
    • używa się go w ostrzeżeniach i komunikatach o błędach;
    • zachęca do działania (np. przycisk „kup teraz”);
    • czerwony sprawdza się w projektach związanych z jedzeniem (ponoć dla odmiany niebieski tłumi apetyt);
    • należy unikać czerwieni tam gdzie ważna jest efektywność (np. quiz) – bo rozprasza.

  4. Zielony na stronach internetowych często wskazuje na postęp. Wiele ikonek i elementów interfejsu jest tego koloru. Zielony haczyk często pojawia się w tabelach porównawczych, wskazując, że dany produkt spełnia określony warunek. Komunikat informujący o tym, że jakaś czynność się powiodła, też bywa koloru zielonego. Zieleń jest popularnym kolorem dla przycisków mających zachęcić użytkownika do działania i niekiedy osiąga lepsze wyniki niż inne barwy, choć czerwień również dobrze się w tym sprawdza.

  5. Jako że większości z nas zdarzyło się kiedyś zaznaczyć jakieś istotne fragmenty książki żółtym podkreślaczem, kolor żółty często wykorzystuje się w projektach stron internetowych, by zwrócić uwagę na ważne komunikaty. […] Żółty kojarzy się ze sprzedażą, transakcjami i cenami. Na Amazon.com żółta ikonka w kształcie skrzynki złota kieruje do najlepszych w danym dniu okazji; żółte gwiazdki występują też w systemie ocen, a na stronach produktów znajdują się żółte przyciski, które wzywają użytkowników do działania.

  6. Niebieski jest standardowym kolorem odnośników w sieci. Niektórzy webdesignerzy wręcz nie zgadzają się na oznaczanie odnośników jakąkolwiek inną barwą. […] Unikaj używania niebieskiego tekstu poza odnośnikami. Możesz zlekceważyć tę regułę, jeśli pracujesz nad stroną, której kolorystyka jest w tak znacznym stopniu niebieska (a odnośnikom przypisana jest inna barwa), że od razu widać, iż jest to element projektu.

  7. Barwy o określonych funkcjach nie będą wywoływać silnego wrażenia, jeżeli nie będą kontrastować z otoczeniem.

  8. Podobno istnieją trzy pary przeciwstawnych barw, jakimi nasz wzrok się posługuje: czerwony i zielony, niebieski i żółty oraz czarny i biały. Teoria kolorów przeciwstawnych twierdzi, że ludzie mogą jednocześnie widzieć tylko jeden z kolorów z danego spektrum. Nie należy więc umieszczać elementów o przeciwstawnych kolorach w podobnych proporcjach.

Generowanie zamiast programowania

W projektowaniu stron wykorzystywane są doświadczenia z projektów materiałów drukowanych (służą temu między innymi szykowane zmiany w CSS). Wypracowane reguły - takie jak opisane powyżej - stają się wspólne dla projektów, niezależnie od tego jakie stosujemy medium.

Skoro rozumiemy jakie reguły należy stosować – to mamy podstawę do tego, by żmudne programowanie zastąpić programami generującymi kod. Carson Miller z WebFlow twierdzi: „To tylko kwestia czasu, zanim narzędzia projektowania i prototypowania zastąpią rozwój front-endu, bez problemu produkując wysokiej jakości kod do wykorzystania.” Takim narzędziem ma być Webflow: https://preview.webflow.com.