Wzorce projektowe UI: Sprawdzone rozwiązania typowych problemów z użytecznością

Sonja Hoffmann Ostatnia aktualizacja 21.10.2020
11 Min.
Wzorce projektowe UI
Ostatnia aktualizacja 21.10.2020

Jak powinno być skonstruowane menu Twojej strony internetowej? Dlaczego niektórym właścicielom stron internetowych łatwiej jest zdobyć subskrybentów niż innym? Co sprawia, że użytkownicy wypełniają formularz na Twojej stronie lub go ignorują? Jako projektant, zmagam się z pytaniami dotyczącymi projektowania interfejsu użytkownika i użyteczności stron internetowych - odpowiedzi znajdziesz w tym wpisie.

Czym są wzorce projektowe interfejsu użytkownika (UI)?

Wzorce projektowe interfejsu użytkownika (UI) to biblioteki problemów użyteczności, które zostały już z powodzeniem przeanalizowane i rozwiązane. Nie powinny one jednak być przyjmowane jeden do jednego. Stanowią one jednak kompleksową podstawę dla harmonijnego doświadczenia użytkownika. Wzorce UI są po to, aby ułatwić i przyspieszyć przepływ pracy.

Więcej wskazówek na temat projektowania UX i użyteczności stron internetowych

Jak opisano w tym artykule, dobra użyteczność pomaga płynnie prowadzić użytkowników przez stronę, produkt lub markę.

Formuła wzorców projektowych UI

Skąd wiesz, które wzorce projektowe są odpowiednie dla Twojej strony i jak je poprawnie stosować? Chris Bank w swoim e-booku Mobile UI Design Patterns opracował następujące podejście:

  • Identyfikacja problemu: Co użytkownik próbuje osiągnąć na Twojej stronie i jakie problemy napotyka? Postaraj się sformułować problemy w jednym zdaniu.
  • Podejście do rozwiązania: Czy inni projektanci rozwiązali już ten problem? Jeśli tak, to w jaki sposób?
  • Real-Life-Example: Spójrz na przykłady i przejdź przez nie jako użytkownik. Spróbuj przeanalizować, co pomogło Ci w rozwiązaniu danego zadania. Zastanów się, co sprawiło, że pomyślałeś - a może nawet poczułeś się niepewnie. 
  • Rezultat: Podsumuj wyniki swojej analizy. W jaki sposób można je wdrożyć na swojej stronie internetowej, aby stanowiły wartość dodaną dla odwiedzających? Jakich wzorców projektowych powinieneś unikać? Jeśli masz przewodnik stylu, powinieneś zawrzeć w nim swoje wyniki.

4 Kategorie wzorców projektowych UI

Wzorce projektowe UI można podzielić na cztery kategorie, które pokrótce przedstawię w tym rozdziale. Niestety, nie będę w stanie opisać wszystkich wzorców projektowych UI. Jeśli chcesz zagłębić się w temat, sieć oferuje niemal nieograniczone możliwości czytania na ich temat. Kilka pomocnych zasobów na temat wzorców projektowych UI to:

1. najczęściej spotykane elementy nawigacji

Nawigacja jest dla użytkownika jednym z najważniejszych elementów interakcji: pełni ona nie tylko funkcję spisu treści strony, ale także pomoc w orientacji. Fakt, że jest on zwykle umieszczany na górze lub z boku, miał pierwotnie głównie powody hierarchiczne. Dzięki nawigacji pokazujemy użytkownikowi na pierwszy rzut oka, co może zrobić na naszej stronie i gdzie aktualnie się znajduje.

Dzięki wieloletniej praktyce zinternalizowaliśmy tę wiedzę do tego stopnia, że trend na minimalizm nie musi kończyć się na nawigacji. Wzorce projektowe są zatem dość konfigurowalne - lub nawet muszą być zindywidualizowane dla Twojej witryny, tak aby działały.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Strona internetowa Castor & Pollux

Castor et Pullex zastosowali się do zasad UI Pattern, ale mimo to dostosowali je indywidualnie do swojej strony: nawigacja, która znajduje się w prawym górnym rogu ekranu i staje się "lepka" podczas przewijania. Logo, które zawsze prowadzi użytkownika z powrotem do "bezpiecznej przystani" - strony startowej.

Strona, która sama w sobie pozwala na wiele interakcji, a przez to wydaje się wręcz chaotyczna, otrzymuje przyjemną użyteczność dzięki zastosowaniu znanych już rozwiązań projektowych.

"Lepkie" nawigacje, jak opisano w powyższym przykładzie, są wspaniałym wynalazkiem w projektowaniu stron internetowych. Za ich pomocą można nie tylko wyświetlać efektowne animacje, ale także sprawić, że odwiedzający Twoją stronę szybciej dotrą z punktu "A do B". W przypadku One Pagerów działają one również jak czerwona nitka: Użytkownik wie, gdzie się znajduje i co już widział.

Podobnie jest z bułką tartą: Dla małych stron nie mają one większego sensu. Dla bardziej złożonych stron, jednak, mogą one zdziałać cuda. Pomagają one użytkownikowi nie tylko w orientacji, ale także w powrocie do dowolnego miejsca w nawigacji.

Możesz zobaczyć inny sposób użycia tych wzorców w poniższym przykładzie:

Twórcy tej strony przyjęli wiedzę o mobilnym menu burgera: z jednej strony, aby ułatwić minimalistyczną nawigację po swojej stronie, która nie jest obca dla użytkownika. Z drugiej strony, aby nadal oferować swój produkt wystarczająco dużo miejsca, aby być na pierwszym planie.

screenshot-demodern.com
Przykładowy projekt z Demodern

Nieco niemodne - ale co najmniej równie użyteczne - są tzw. zakładki w nawigacji. Przypominają one system archiwizacji i są szybko i intuicyjnie rozumiane przez użytkowników. Także i w tym przypadku poznane rozwiązanie funkcjonuje w odchudzonej wersji tak samo dobrze jak w wersji oryginalnej.

Tymczasem zakładki są coraz częściej używane jako zakładki modalne do wyświetlania treści, które powinny być powiązane ze sobą w sposób oszczędzający miejsce. Jako zakładki modalne, mają one również tę zaletę, że strony nie muszą być całkowicie przeładowywane, aby pokazać inną zawartość. Szczególnie na stronach produktowych sklepów opartych o WooCommerce często je widzimy - jak na poniższych przykładach: 

Wzorce projektowe UI: Sprawdzone rozwiązania typowych problemów z użytecznością
Widok z patio Atlantic

Następnie, mniej minimalistyczny przykład dla porównania:

Wzorce projektowe UI: Sprawdzone rozwiązania typowych problemów z użytecznością
Przykładowa strona z Bamboo Clothing

Często wzorce UI są wzorowane na rzeczywistych interakcjach. Dlatego ważne jest, aby nigdy nie tracić z oczu właściwości fizycznych i/lub celowo ich nie zmieniać. Ponieważ prowadzi to do tego, że użytkownik nie jest w stanie intuicyjnie zrozumieć tych działań i ich konsekwencji. Aby było to dla Ciebie bardziej zrozumiałe, dostosowałem powyższy przykład:

screenshot-bambooclothing.co.uk-2020.06.11-18-33-55_modified

Fizyczne właściwości struktury folderów nie są już obecne. Zakładki wyglądają teraz jak źle rozmieszczone elementy nawigacyjne. Nieco gubi się przynależność elementów - wydają się one niemal przypadkowo ułożone.

Menu przepełnienia i przyciski "Przejdź do sekcji".

Aby nasza lista była kompletna, nie może zabraknąć menu overflow i przycisków "Przejdź do sekcji". Przyciski "Jump to Section" znajdują się zazwyczaj w lewym dolnym rogu. Dzięki nim użytkownik może jednym kliknięciem wrócić na górę strony. Zwłaszcza w przypadku stron typu one pager, przyciski przeskoczenia do sekcji mają sens: oszczędzają czas i zapobiegają frustracji spowodowanej żmudnym przewijaniem.

Menu rozwijane faktycznie mają swoje źródło mniej w poprawie użyteczności stron. Zostały one opracowane w celu zaoszczędzenia miejsca i zmieszczenia większej ilości treści w nawigacji. Sprawiają one również, że projekt jest bardziej uporządkowany i przejrzysty. Drop down menus to jeden z tych wzorców projektowych, które często określane są mianem anty-wzorców - ponieważ tak naprawdę nie ułatwiają nawigacji po stronie. Jednak nadal zalecane jest używanie rozwijanych menu. W końcu jak one działają jest znane i poznane. Wskaźnikami rozwijanego menu są często skierowane w dół wzory jodełki.

Wzorce projektowe UI: Sprawdzone rozwiązania typowych problemów z użytecznością
Strona internetowa Ehire

Przyciski i linki są celowo wspomniane tylko krótko w tym wpisie, ponieważ powinny być wystarczająco znane każdemu projektantowi. Nie ma prawie żadnych ograniczeń w projektowaniu i animacji przycisków. Ich styl zależy zazwyczaj od wizualnego układu oferowanych informacji. Powinny być one wyraźnie wyeksponowane w podstawowym kolorze strony i umieszczone tak, aby były zgrupowane z odpowiednimi treściami.

To samo dotyczy linków: Nie muszą już być wyświetlane na niebiesko z podkreśleniem, jak to było do tej pory. Ich istnienie musi być jednak jasne, a przede wszystkim spójne. Tutaj można uzyskać obszerną wiedzę na temat przycisków.

Paginacja - dzielenie treści na wiele stron - jest szczególnie ważna dla sklepów e-commerce, które oferują większą liczbę produktów. Dzięki temu treść jest oferowana na kilku stronach, czas ładowania jest skrócony, a treść jest podzielona na łatwo przyswajalne sekcje. Gazety, takie jak FAZ, również używają paginacji do dzielenia dłuższych artykułów.

screenshot-www.faz.net-2020.06.13-15-49-43
Przykład FAZ

Również modna w ostatnich latach tzw. gruba stopka jest obecnie jednym z wyuczonych wzorców UI. W tym miejscu można na przykład umieścić odnośniki do często odwiedzanych podstron, zapisać dane kontaktowe i wyświetlić treści prawne, które nie mają miejsca w hierarchii głównej nawigacji. 

Stopka funkcjonuje wtedy częściowo jako inaczej skonstruowany spis treści dla Twojej strony. Ale może również stanowić rodzaj zapowiedzi dalszych informacji. Po przewinięciu strony przez użytkownika, stopka może zaoferować mu odpowiednie treści - takie jak ciekawe artykuły, linki do mediów społecznościowych, itp. które jeszcze bardziej zaangażują go w Twój produkt.

2. wejście i wyjście: Formularze kontaktowe i subskrypcyjne

Poza wytycznymi dotyczącymi ochrony danych osobowych, warto skupić się tutaj również na potrzebach użytkowników. Szczególnie na urządzeniach mobilnych, formularz wprowadzania danych może szybko doprowadzić do frustracji: Już mały ekran, fizyczne środowisko podczas korzystania z niego, aspekt czasowy, jak również możliwe niestabilne połączenie mogą szybko stać się nerwowym testem. Na szczęście istnieją pewne wzorce projektowe, które już zajęły się tymi właśnie kwestiami.

Wskazówka:

Jak to zwykle bywa w sieci, tak samo jest tutaj: Tak krótko, jak to możliwe, tak długo, jak to konieczne. Badania wykazały, że dodawanie bezużytecznych pytań powoduje spadek uczestnictwa i może w pewnych okolicznościach kosztować dużo pieniędzy.

Poniżej stworzyłem fikcyjny formularz, aby pokazać Ci główne zasady: 

Formularz
Zasady dotyczące formularzy wejściowych
  1. Badania eyetrackingowe wykazały, że przetwarzamy informacje szybciej, gdy są one ułożone od góry do dołu, a nie od lewej do prawej. Dlatego warto umieścić nagłówek nad polem formularza i stworzyć tylko jedną kolumnę.
  2. Pomocne jest dostarczenie użytkownikowi przykładowych danych wejściowych w predefiniowanych polach wyboru - pozwala to z wyprzedzeniem zwizualizować wymagane informacje. Powinieneś unikać fragmentarycznych wpisów liczb, ponieważ tylko komplikują one wprowadzanie danych. Ponadto powinny one być zaprogramowane w taki sposób, aby były tolerancyjne w stosunku do przestrzeni.
  3. Obsługa błędów jest ważnym i złożonym tematem. Gwiazdka i pole wejściowe z czerwonym obramowaniem sprawdziły się jako wzorce UI. Najlepiej byłoby, gdyby pola te nie wymagały wyjaśnień. Niemniej jednak zawsze należy liczyć się z tym, że coś nie zadziała. Dlatego pamiętaj, aby zaoferować różne sposoby pomocy. Można to zrobić na kilka sposobów: Przycisk informacyjny, który oferuje ewentualną pomoc po najechaniu kursorem. Albo wyskakiwanie małych modali, gdy formularz nie zostanie pomyślnie przesłany.
  4. Dobrym pomysłem jest zapewnienie informacji zwrotnej w trakcie wprowadzania hasła. W przypadku haseł przydatne okazało się również zapewnienie użytkownikowi jakościowej oceny stopnia bezpieczeństwa wybranego przez niego hasła. 
  5. Forma wieloetapowa ma kilka zalet psychologicznych. Po pierwsze, jest to bardziej przejrzyste i mniej zniechęcające. Jeśli użytkownik jest również informowany o tym, gdzie znajduje się w formularzu za pomocą wskaźnika (w tym przypadku paska ładowania), wie dokładnie, czego może się spodziewać. Jest mniejsze prawdopodobieństwo przedwczesnej aborcji. O podanie danych osobowych należy zawsze prosić na końcu formularza. Dzieje się tak dlatego, że jeśli odwiedzający Twoją stronę wypełnił już większość formularza, trudniej będzie mu zrezygnować z czasu, który już zainwestował bez rezultatów. Zaleca się również, aby prosić tylko o te informacje, które są rzeczywiście potrzebne, a także uzasadnić prośbę. Jeśli prosisz użytkowników o zapisanie się na coś, dobrze jest zapewnić im jakąś korzyść à la "Zawsze najpierw otrzymuj najlepsze oferty". W ostatnim kroku powinieneś dać mały zarys tego, co będzie się działo dalej - i czego użytkownik może się spodziewać, kiedy.

Dodatkowo, w formularzach powinny być zintegrowane funkcje automatycznego wypełniania (poprzez dane przechowywane w przeglądarce) oraz rozpoznawania informacji (np. dodawanie miasta po wpisaniu kodu pocztowego). Szczególnie na stronie WordPress wiele formularzy ma to już domyślnie włączone. 

Powinieneś unikać używania captchas, jeśli to możliwe, lub przynajmniej ograniczyć je do minimum. Według tego badania, captcha mogą prowadzić do 30% mniej interakcji z formularzem.

3. strukturyzacja treści

Jako właściciel strony internetowej, powinieneś zwrócić szczególną uwagę na to, jak skonstruowana jest treść na Twojej stronie: Czy pomaga odwiedzającym znaleźć drogę na Twojej stronie? Czy Twoje treści są łatwo dostępne i czy ich hierarchia jest zrozumiała? 

Kwestia łatwej dostępności jest szczególnie atrakcyjna dla użytkowników, którzy przeglądają Twoją stronę w zmienionych warunkach. Na przykład osoby mające problemy z widzeniem barwnym oraz osoby z upośledzeniem wzroku. Jeśli chcesz zagłębić się w temat dostępności, więcej informacji znajdziesz tutaj: 

Jeśli prowadzisz bloga lub magazyn internetowy, zapewne znasz ten problem: masz dużo ciekawych treści, które chciałbyś oferować jak najrówniej. Odpowiednim wzorcem projektowym do tego jest tak zwana "Lista artykułów". Tutaj kategoryzujesz swoją zawartość i pokazujesz tylko mały fragment w danym czasie. W ten sposób pokazujesz wiele tematów na pierwszy rzut oka, nie zalewając użytkowników informacjami. Ładny przykład pokazany jest tutaj RAIDBOXES:

RAIDBOXES WP unboxed
Widok na magazyn WordPress wp unboxed

Dzięki takiemu podziałowi użytkownik może przeglądać całą zawartość według obszarów zainteresowań i w ten sposób szybciej znaleźć to, co go interesuje.

Aby zaoferować określoną treść bez rozpraszania uwagi, można użyć boksów modalnych. Nakładają się one na resztę strony i pozwalają użytkownikowi skupić się tylko na jej zawartości. Może to być konieczne i ważne. Zauważ jednak, że te modale mają również tendencję do bycia anty-wzorcami: Zasadniczo blokują one użytkownikowi możliwość podjęcia jakiejkolwiek akcji tak długo, jak modal jest otwarty.

Jednak poprawnie użyte, modalne okienka mogą pomóc odwiedzającym lepiej zrozumieć treść. Jednak okna modalne, które są wywoływane zbyt często lub bez powodu, mogą szybko wywołać frustrację i poczucie bezradności.

Lightbox i tryb pełnoekranowy również należą do tej kategorii. Z jednej strony pozwalają one użytkownikowi na dokładne przyjrzenie się wybranym treściom. Z drugiej strony, uniemożliwiają one wszelkie inne interakcje. Dlatego zawsze ważne jest, aby zaoferować co najmniej jeden punkt zaniku. Szczególnie znane są kliknięcia na znak X w prawej górnej części obrazu lub kliknięcie poza ramką, aby ją ponownie zamknąć.

Popularnym sposobem wyświetlania zdjęć są również pokazy slajdów. Rozróżnia się między pokazami slajdów odtwarzanymi automatycznie a tymi, po których można poruszać się ręcznie. Galerie są często wyświetlane jako miniaturki, a następnie powiększane za pomocą pokazów slajdów i/lub lightboxów.

Tutaj powinieneś działać przede wszystkim zgodnie z funkcją: Jakiego rodzaju obrazy wyświetlasz? Czy muszą być one dostępne w trybie pełnoekranowym? A co jest ważniejsze: treść jako całość czy poszczególne zdjęcia? Czy warto skorzystać z innych możliwości - np. lupy, która po najechaniu na nią powiększa zdjęcia? To ostatnie jest szczególnie popularne w e-commerce.

Screenshot Unsplash Wzorce projektowe UI
Miniaturka na unsplash.com

Stronaunsplash.com wykorzystuje połączenie galerii obrazów i lightboxów. Obrazy nie są jednak wyświetlane jako miniatury. Dlaczego? Unsplash to platforma, która oferuje wyłącznie zdjęcia do pobrania. Oznacza to, że użytkownicy muszą być w stanie zdecydować za lub przeciw obrazowi bezpośrednio na pierwszy rzut oka. Aby podjąć taką decyzję, rozdzielczość obrazu musi być stosunkowo dobra. Miniaturki byłyby na to za małe. A klikanie na każdy obrazek z osobna lub nawigowanie po pokazie slajdów wielokrotnie zminimalizowałoby wydajność strony.

W całym procesie wdrażania i projektowania nigdy nie wolno tracić z oczu kwestii korzyści/wartości i znaczenia.

4. grać na kanałach społecznościowych

Dotyczy to wzorców, które pomagają kierować użytkowników do Twoich kanałów social media i/lub ułatwiają im interakcję społeczną. Bardziej szczegółowe przykłady można przeczytać tutaj.

Wnioski

Podsumowując, mogę polecić Ci w szczególności dwa podejścia. Po pierwsze, odwiedź i przeanalizuj jak najwięcej stron internetowych, aby zebrać inspiracje: W jaki sposób inni projektanci rozwiązali lub nie rozwiązali pewnych problemów? Co mnie samego frustruje, gdy surfuję po sieci? Kiedy ostatni raz byłem pozytywnie zaskoczony - i dlaczego? 

Po drugie, zawsze pamiętaj, że to nie Ty jesteś użytkownikiem. Osoby odwiedzające Twoją stronę myślą zaskakująco inaczej niż Ty. Mogą jeszcze nie znać Twojego produktu. Dlatego wielokrotnie przeprowadzaj różne testy, aby móc ocenić jak naprawdę wygląda użyteczność na Twojej stronie.

Jakie masz pytania do Sonji na temat Wzorców UI?

Zapraszamy do skorzystania z funkcji komentarza. Chcesz być informowany o nowych artykułach i poradach dotyczących projektowania i tworzenia stron internetowych? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.