Większość z nas spędza więcej niż 3 godziny dziennie na przeglądaniu stron w Internecie przy użyciu różnych urządzeń, na których można wyświetlić już ponad bilion stron internetowych i miliony aplikacji mobilnych konkurujących ze sobą designem i użytecznością. Aby pomóc zrozumieć UX i UI, wybraliśmy 7 najważniejszych zasad projektowania, którymi się kierujemy, aby tworzyć użyteczne i zapadające w pamięć witryny i aplikacje internetowe.
1. Projekt powinien koncentrować się na doświadczaniu!
Ludzie nie zawsze zapamiętują przekazywane informacje, ale na pewno pamiętają co czuli. Reklamodawcy skupiają się na wywołaniu emocji, więc dlaczego tego nie wykorzystać przy budowaniu stron czy aplikacji? Mark Hassenzahl w wywiadzie IDF powiedział m.in. o tym, że nie jest ważna sama informacja czy produkt, ale efekt emocjonalny, który wywołuje.
To dlatego projektowanie UX stało się tak integralną częścią stron internetowych i aplikacji. Dobrze zaprojektowana strona powinna być skutecznym splotem lub kombinacją tekstu, grafiki, układu i elementów interaktywnych zapewniających użytkownikom doświadczenie emocjonalne, a nie tylko przekaz informacyjny.
Jeśli przyjrzysz się dzisiejszym interfejsom aplikacji mobilnych i stron internetowych to zauważysz, że zawierają one coraz więcej efektów wizualnych, opowiadają i wzbudzają więcej emocji, i to wszystko dlatego aby wyróżnić się w morzu konkurencji. To prowadzi nas do następnego punktu …
2. Ludzie nie czytają stron internetowych, oni je skanują.
Zatem ty też stwórz swoją stronę do skanowania, ponieważ w większości użytkownicy nie czytają stron internetowych, spróbuj przyciągnąć ich innymi materiałami. Czy można więc się dziwić, dlaczego wykorzystanie infografiki stało się standardem dla każdego, kto chce przekazać zestaw danych lub informacji? Badania pokazują, że “użytkownicy przełączają się ze skanowania wizualnego strony na faktyczne czytanie jej treści i w dużej mierze pomaga im w tym nacisk na sekcje ich zainteresowań.”
W skrócie wygląda to tak, mamy mało czasu, spieszymy się i najprawdopodobniej nie będziemy czytać całego artykułu, więc skanujemy nagłówki i nurkujemy w tych treściach które rzeczywiście chcemy czytać dalej, pozostałe pomijamy. Przejrzysty i przyjemny wizualnie interfejs, który automatycznie skanujemy naszym wzrokiem na pewno będzie nam to ułatwiał i w gruncie rzeczy poprowadzi do kolejnego punktu…
3. Użytkownicy pragną prostoty i jasności
To o czy mówiliśmy w powyższym punkcie trwa na ogół zaledwie 0,5 sekundy to wystarczająco dużo dla odwiedzających by zdecydować, czy są zainteresowani pozostać na tej witrynie, czy też nie, dlatego dla użytkownika musi być jasne od początku, co może zrobić dalej na twojej witrynie. Dzisiejsze interfejsy powinny być tak oczywiste, jak to tylko możliwe. Użytkownik nie powinien myśleć o tym, co chcesz mu przekazać, on musi to ewidentnie zobaczyć! Na przykład, może to oznaczać, iż powinieneś skoncentrować uwagę wizualną zamiast czterech na jednym przycisku swojej strony głównej.
Zastanów się, co twoja aplikacja internetowa bądź strona powinna zrobić, aby ułatwić odwiedzającym życie i zaoszczędzić ich czas. Na przykład, postaraj się dać wartości domyślne większości użytkownikom, niech na początek zobaczą co masz im do zaoferowania z czasem gdy zyskasz stałych czytelników możesz ustawić by nie każda z opcji była widoczna bezpośrednio dla wszystkich, lecz pojawiała się np. po zalogowaniu. Z reguły jeśli coś projektujemy robimy to dla większości użytkowników i dopiero z czasem dodajemy nowe elementy, nie róbmy wszystkiego naraz, bo jeśli rzucimy na dzień dobry czytelnikowi ogromem funkcjonalności w twarz z pewnością uzyskamy efekt odwrotny do zamierzonego.
Spójny projekt jest rzeczywiście prostszy i przyjemniejszy w użytkowaniu, ponieważ ponownie wykorzystuje składniki, zachowania, kolory i estetykę, które już znamy, w efekcie zmniejsza to zapotrzebowanie użytkowników do intensywnego myślenia co mają z czym ugryźć. Ludzie są już zaznajomieni z wieloma komponentami używanymi w Internecie, zgodne z tymi wzorami system będzie po prostu prostszy i jaśniejszy na początek, to prowadzi nas do kolejnego z punktów…
4. Gdzie być kreatywnym, a gdzie używać typowych wzorców projektowych?
Bądź ostrożny jeśli chodzi o innowacyjne i nowoczesne wzorce UI, to nic, że najprawdopodobniej w innych rejonach są już powszechnie znanymi wzorami. Nie chcemy przecież, aby ludzie musieli myśleć zbyt intensywnie który element do czego służy. Na ogół większość interfejsów powinna być już znana użytkownikom. Na ten przykład, linki powinny wyglądać tradycyjnie… jak linki. Przyciski powinny wyglądać jak przyciski. Logowanie, dostęp zazwyczaj znajduje się w prawym górnym rogu; a z kolei logo i nazwę firmy znajdziemy zazwyczaj w górnej, lewej części, nie mieszajmy więc tego, pamiętaj nie da się zrobić nic na siłę, witryna ma być przyjemna przede wszystkim dla użytkowników, więc nie podchodźmy do tego nader egoistycznie!
Uważaj by się nie stać twórcą na siłę i nie kpij z typowych wzorców, można powiedzieć iż faktycznie fajniej jest mieć kierunkowskaz z możliwością sterowania radiem do samochodu niż standardowy kij w górę/w dół po lewej stronie kierownicy. Fakt możesz czuć się dobrze robiąc coś inaczej niż tradycyjnie, ale fajniej nie koniecznie znaczy tutaj lepiej. Użyteczność i kreatywność muszą być zrównoważone.
Nawigacja, adresy URL, umieszczenie przycisku to wszystko powinno skupić się na funkcjonalności zanim zabierzesz się do projektowania estetyki. To dlatego najlepszą praktyką projektowania estetycznego bez kraksy jest w pierwszej kolejności skupienie się na układzie. Następnie można poddać się twórczości bo kreatywność oczywiście też jest doceniana, gdy to już mamy omówione zabierzmy się za kolejny punkt…
5. Projektuj aby uchwycić czyjąś uwagę.
Po pierwsze projektowanie treści strony musi opierać się na jakimś sensownym, spójnym kontekście. Powinna ona posiadać także nieco inny wygląd dla każdego urządzenia umożliwiającego jej przeglądanie. Pamiętajmy, że obecnie mamy dostęp do wielu różnego rodzaju urządzeń w tym mobilnych gdzie będzie ona prezentować się inaczej niż na naszym laptopie czy 24 calowym monitorze kuzyna. Przestrzegajmy zasad responsywności to, że na dużym ekranie bez problemu znajdziemy pewne treści nie znaczy, że na smartfonie przyjdzie nam to równie łatwo.
Bardzo istotna w tej kwestii jest część widoczna bez konieczności przewijania tj. ta zaraz po załadowaniu strony w przeglądarce (pierwszy view dla oczu). Nie pakuj w to miejsce wszystkiego, skup się na tym co najważniejsze, oprzyj tą treść na swoim doświadczeniu i umiejętnościach jakie masz zamiar przekazać innym, w przeciwnym wypadku będzie to wyglądało podobnie jak w przypadku, który omawia Eric Hubert czyli coś w rodzaju odpowiednika klienta robiącego zakupy w swoim ulubionym sklepie – chce kupić wszystko choć wie, że go nie stać mimo to gromadzi interesujące go produkty w jednym miejscu, zamalowuje wszystkie ceny, drzwi i okna na wszelki wypadek gdyby ktoś przechodzący obok nie wszedł do środka i nie wykupił mu tych wszystkich rzeczy.
Oczywiście nie twierdze, że część strony widoczna bezpośrednio po załadowaniu nie jest ważna bo odgrywa ona znaczenie w hierarchii informacji, bądź co bądź jest to pierwszy wgląd do tego co zobaczą użytkownicy tej witryny. Radziłbym jednak, żeby ją stosownie zrównoważyć – postaw raczej na prostotę, klarowność i doświadczenie, co spowoduje, że tak jakby z automatu zostanie nadany odpowiedni kontekst, a nie zrobi się z tego pewna ‘x’ zmienna z wielu. To jest zwyczajnie przestarzały pogląd, że wszystko co ważne musi się znajdować u góry. W żaden sposób nie przełoży się to na to czy ktoś zajrzy na dół twej strony bądź aplikacji czy też nie…
6. Przewijanie jest szybsze od stronicowania
Dzisiejsze strony są dłuższe jeśli chodzi o przeglądanie w pionie, można by rzec, że znacznie dłuższe w porównaniu do czasów gdy designerzy myśleli, że wszystko musi znajdować się w miejscu widocznym najlepiej od razu po załadowaniu. Weźmy ten przykład z Amazon, który sprzedaje swój nowy Kindle, jeśli wydrukujesz tę stronę będzie składać się ona z 17 kartek. Amazon jest wyjątkowy ale ich praktyki jako światowego lidera witryny ecommerce nie koniecznie są najlepszymi praktykami dla każdego, wystarczy odwiedzić 10 innych nowoczesnych stron firmowych, znajdziesz tam średnią długość stron po wydrukowaniu sięgającą od 3 do 6 wzwyż.
Wróćmy na chwile do 1997r. Jakob Nielsen, znany ekspert co do użytkowania stron internetowych, postanowił opracować coś co pozwoliłoby użytkownikom skupić się na szybkości znajdowania pożądanych treści. Wpadł więc na pomysł scrolowania strony, ponieważ przewijanie jest zwyczajnie szybsze od klikania, co oznacza, że dłuższe strony mogą okazać się lepszym rozwiązaniem niż kilkanaście mniejszych podstron. Dzięki temu pomysłowi współczesna nawigacja jest w efekcie bardziej płaska.
Często narzekamy, że klikanie jest męczące, ale tak naprawdę męczy nas czas który musimy poświęcić na oczekiwanie związane z odświeżaniem i załadowaniem poszczególnej podstrony. Ludzie nie lubią dużo klikać. Na koniec dnia większość z nas preferuje jak najprostsze i najszybsze surfowanie w sieci by zdobyć to czego tak naprawdę szukamy. Tak oto mamy kolejny plus dla przewijanych stron.
Faktem jest, że scrolowanie znacznie ułatwia skanowanie strony (patrz punkt 2) kiedy średni czas odświeżania klikalnej strony, może sięgać 6,5s. Co więc wolisz wybrać – przeglądanie strony startowej w 5-10 sekund czy 30-40s? Opcja ta ma wiele pozytywów, a już szczególnie stała się wybawieniem w sensie przyjemnego użytkowania w sieci dla użytkowników urządzeń mobilnych, dzięki niech mu będą za to!
7. Budowanie ładnego responsywnego projektu a zwykły responsywny układ
Responsywny projekt – projektowanie strony czy aplikacji aby miała ona swój płynny interfejs dla różnych rozmiarów urządzeń, stało się bardzo popularne w przeciągu ostatnich kilku lat. Nawet jeśli jeszcze jakimś cudem nie podążasz za responsywną modą na pewno już słyszałeś, że jest to dość istotna sprawa, której nie powinieneś lekceważyć, więc jeśli wciąż wahasz się czy aby to coś zmieni – wiedz o tym, że badania dowodzą iż na pewno tak się stanie!
Na szczęście już większość firm projektujących od początku tworząc stara się trzymać w większym bądź mniejszym stopniu zasad responsywności, niestety w tym drugim przypadku w rezultacie zdarza się, że elementy strony jak obrazki i teksty często mają zachwiane proporcje.
Dzisiejsi użytkownicy opanowali już wszystkie typy urządzeń naturalnym jest więc, że strona powinna się korzystnie reprezentować na każdym z nich. Oczywiście wbrew pozorom istnieje znacząca różnica pomiędzy posiadaniem responsywnej strony, a posiadaniem responsywnej strony która wygląda przyzwoicie. Zatem zanim opublikujesz swoją witrynę, pamiętaj aby sprawdzić jak prezentuje się ona na urządzeniach mobilnych (tablecie, smartfonie…) i zadaj sobie szczere pytanie czy to faktycznie wygląda dobrze.
Mam nadzieję, że te kilka zamieszczonych tutaj wskazówek, (7 zasad UI / UX) nakierują was w jakiś sposób i w rezultacie wasze projekty staną się jeszcze lepsze na ten czas pozostaje mi życzyć wam powodzenia i do następnego artykułu! ;)
