Wzorce projektowania interfejsów użytkownika: sprawdzone rozwiązania dla powszechnych problemów z użytkowaniem

11 Min.
Wzory projektowania interfejsu użytkownika

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

Czym są wzorce projektowania interfejsów użytkownika (UI)?

Wzorce projektowania interfejsu użytkownika (UI) to biblioteki problemów z użytecznością, które zostały już pomyślnie przeanalizowane i rozwiązane. Nie powinny być one jednak przyjmowane w stosunku jeden do jednego. Stanowią one jednak wszechstronną podstawę dla harmonijnych doświadczeń użytkownika. Wzorce interfejsów użytkownika mają na celu ułatwienie i przyspieszenie przepływu pracy.

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

Jak w ten artykuł Dobra użyteczność pomaga płynnie prowadzić użytkowników przez Twoją stronę, produkt lub markę.

Wzór na wzorce projektowe UI

Skąd wiesz, które wzory graficzne są odpowiednie dla Twojej strony i jak je prawidłowo wykorzystać? Chris Bank napisał o tym w swoim e-booku Wzory projektowania mobilnych interfejsów użytkownika opracowana jest następująca procedura:

  • Identyfikacja problemu: Co użytkownik stara się osiągnąć na swojej stronie internetowej i jakie problemy napotyka? Spróbuj sformułować problemy w jednym zdaniu.
  • Rozwiązanie: Czy inni projektanci rozwiązali już ten problem? Jeśli tak, to jak?
  • 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. Pomyśl o tym, co sprawiło, że pomyślałeś - a może nawet rozmyśliłeś się - o tym zadaniu. 
  • Zastosowanie: Podsumuj wyniki swojej analizy. Jak można je wdrożyć na swojej stronie internetowej, aby oferowały wartość dodaną dla odwiedzających? Których wzorów należy lepiej unikać? Jeśli masz przewodnik po stylu, powinieneś umieścić tam swoje wyniki.
Wzorce projektowania interfejsów użytkownika: sprawdzone rozwiązania dla powszechnych problemów z użytkowaniem

4 kategorie wzorów wzorców projektowych UI

Wzorce projektowe UI można podzielić na cztery kategorie, które pokrótce przedstawię w tej części. Niestety, nie będę w stanie pokryć wszystkich wzorów projektowych UI. Jeśli chcesz zagłębić się w ten temat, sieć oferuje prawie nieograniczone możliwości, aby przeczytać więcej. Kilka pomocnych zasobów na temat wzorców projektowania interfejsu użytkownika to:

1. najczęstsze elementy nawigacyjne

Nawigacja jest jednym z najważniejszych elementów interakcji dla użytkownika: działa nie tylko jako spis treści strony, ale także jako przewodnik orientacyjny. Fakt, że zazwyczaj jest on umieszczony na górze lub na boku strony, był pierwotnie głównie z powodów hierarchicznych. Za pomocą nawigacji na pierwszy rzut oka pokazujemy użytkownikowi, co może zrobić na naszej stronie i gdzie aktualnie się znajduje.

Dzięki wieloletniej praktyce zinternalizowaliśmy tę wiedzę do tego stopnia, że tendencja do minimalizmu nie musi zatrzymać się na nawigacji. Wzorce projektowe są więc całkiem konfigurowalne - lub nawet muszą być zindywidualizowane, aby Twoja strona działała.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Strona internetowa Kółka i Pollux

Castor et Pullex stosują się do zasad wzorca UI i nadal dostosowują je do swojej strony: nawigacja, która znajduje się w prawym górnym rogu ekranu i staje się "lepka" podczas przewijania. Logo, które zawsze sprowadza użytkownika z powrotem do "bezpiecznej przystani" - strony głównej.

Strona internetowa, która pozwala na wiele interakcji, a przez to wydaje się prawie chaotyczna, uzyskuje przyjemną użyteczność dzięki zastosowaniu znanych już rozwiązań projektowych.

Nawigacja "Sticky", jak to opisano w powyższym przykładzie, jest wspaniałym wynalazkiem w projektowaniu stron internetowych. Mogą one służyć nie tylko do wyświetlania imponujących animacji, ale także zapewnić, że odwiedzający Twoją stronę szybciej dotrą z "A do B". Z One Pager'em też działają jak czerwony wątek: Użytkownik wie, gdzie jest i co już widział.

Podobnie jest z bułką tartą: Nie mają zbyt wiele sensu z małymi stronami. Ale dla bardziej skomplikowanych stron mogą zdziałać cuda. Pomagają one użytkownikowi nie tylko w orientacji, ale także w powrocie do dowolnego miejsca w nawigacji.

Inny sposób wykorzystania tych wzorców jest pokazany w poniższym przykładzie:

Twórcy tej strony przyjęli wiedzę z zakresu menu mobilnego burgera: z jednej strony, aby ułatwić minimalistyczną nawigację po swojej stronie, która nie jest obca użytkownikowi. Z drugiej strony, chcieli dać swojemu produktowi wystarczająco dużo miejsca, aby stanął na pierwszym planie.

screenshot-demodern.com
Przykładowy projekt z Demodery

Nieco niemodne - ale przynajmniej tak samo przydatne - są tzw. karty w nawigacji. Przypominają one system archiwizacji i są szybko i intuicyjnie rozumiane przez użytkowników. Także tutaj, w wersji odchudzonej, praca pół-wykwalifikowana jest tak samo jak w wersji oryginalnej.

Tymczasem karty są coraz częściej wykorzystywane jako karty 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ładowane, aby wyświetlić inne treści. Zwłaszcza na stronach produktów sklepów opartych na nich często je WooCommerce widzimy - jak na poniższych przykładach: 

Wzorce projektowania interfejsów użytkownika: sprawdzone rozwiązania dla powszechnych problemów z użytkowaniem
widok z Patio Atlantyckie

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

Wzorce projektowania interfejsów użytkownika: sprawdzone rozwiązania dla powszechnych problemów z użytkowaniem
przykładowa strona z ubrania bambusowe

Wzorce UI często opierają się na interakcjach w świecie rzeczywistym. Dlatego ważne jest, aby nigdy nie tracić z oczu właściwości fizycznych i/lub celowo je zmieniać. Ponieważ prowadzi to do tego, że użytkownik nie może już intuicyjnie zrozumieć tych działań i ich konsekwencji. Żeby było to dla ciebie jasne, dostosowałem raz powyższy przykład:

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

Właściwości fizyczne struktury folderu nie są już podane. Zakładki wyglądają teraz jak źle rozmieszczone elementy nawigacyjne. Przynależność elementów jest nieco utracona - wydają się prawie przypadkowo ułożone.

Menu przelewowe i przyciski "Przejdź do sekcji".

Aby nasza lista była kompletna, nie powinno zabraknąć menu przepełnienia i przycisków "Przejdź do sekcji". "Przyciski przeskoku do sekcji znajdują się zazwyczaj w lewym dolnym rogu. Pozwalają one użytkownikowi na przejście z powrotem na górę strony za pomocą jednego kliknięcia. Szczególnie w przypadku One Pager, przyciski Skocz do sekcji mają sens: pozwalają zaoszczędzić czas i uniknąć frustracji poprzez żmudne przewijanie.

Spadki w menu mają swoje źródło w mniejszym stopniu w poprawie użyteczności stron. Zostały one opracowane, aby zaoszczędzić miejsce i zmieścić więcej treści w nawigacji. Sprawiają one również, że Twój projekt jest bardziej uporządkowany i przejrzysty. Menu rozwijane należą do wzorców projektowych, które często nazywane są Anti-Patterns - ponieważ tak naprawdę nie ułatwiają poruszania się po stronie. Nadal jednak zaleca się korzystanie z rozwijanego menu. Przecież ich funkcja jest znana i poznana. Wskaźnikami dla menu rozwijanego są często wzorce śledziowe skierowane w dół.

Wzorce projektowania interfejsów użytkownika: sprawdzone rozwiązania dla powszechnych problemów z użytkowaniem
Strona internetowa Ehire

Przyciski i linki są celowo wymienione w tym artykule tylko pokrótce, 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 układu wizualnego oferowanych informacji. Powinny być one wyraźnie widoczne w Podstawowy kolor strony i umieszczone tak, aby były pogrupowane z odpowiednią treścią.

To samo odnosi się do linków: Nie muszą już być one wyświetlane w kolorze niebieskim z podkreśleniem, jak to miało miejsce wcześniej. Ale ich istnienie musi być jasne i przede wszystkim jednolite. Rozległa wiedza o przyciskach, które otrzymujesz tutaj.

Paginacja - czyli dzielenie się treścią na wielu stronach - jest szczególnie ważna dla sklepów internetowych, które oferują dużą liczbę produktów. Za pomocą paginacji zawartość jest oferowana na kilku stronach, czas ładowania jest skrócony, a zawartość podzielona na łatwo strawne części. Gazety, takie jak FAZ, również używają Pagination do dzielenia dłuższych artykułów.

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

Ponadto, tak zwana "gruba stopka", która stała się trendem w ostatnich latach, jest obecnie jednym z wyuczonych wzorców UI. Tutaj można na przykład linkować do często odwiedzanych podstron, przechowywać dane kontaktowe i wyświetlać treści prawne, na które nie ma miejsca w głównej nawigacji. 

Stopka funkcjonuje wtedy częściowo jako inaczej skonstruowany spis treści Twojej strony. Ale może też służyć jako swego rodzaju teaser dla dalszych informacji. Gdy użytkownik przewinie Twoją stronę, stopka może zaoferować mu odpowiednie treści - takie jak interesujące artykuły, linki do serwisów społecznościowych itp.

2. wejście i wyjście: Kontakt i subskrypcja formularzy

Oprócz wytycznych dotyczących ochrony danych osobowych, warto tu również skupić się na potrzebach użytkowników. Zwłaszcza w przypadku urządzeń przenośnych formularz wejściowy może szybko doprowadzić do frustracji: Już mały ekran, środowisko fizyczne podczas użytkowania, aspekt czasowy i ewentualne niestabilne połączenie mogą szybko stać się testem hamowania nerwowego. Na szczęście istnieją pewne wzorce projektowe, które już rozwiązały dokładnie te problemy.

Wskazówka:

To samo dotyczy tutaj, jak ogólnie w sieci: Tak krótko jak to możliwe, tak długo jak to konieczne. Badania wykazały, że dodawanie bezużytecznych pytań jest upadkiem uczestnictwa i może kosztować wiele pieniędzy.

W dalszej części stworzyłem fikcyjną formę, aby pokazać wam najważniejsze zasady:

Formularz
Zasady dotyczące formularzy wprowadzania danych
  1. Testy naśladowania wzroku odkryli, że przetwarzamy informacje szybciej, gdy są one ułożone od góry do dołu, a nie od lewej do prawej. Dlatego wskazane jest umieszczenie nagłówka nad polem formularza i utworzenie tylko jednej kolumny.
  2. Pomocne jest podanie użytkownikowi przykładowych danych wejściowych w predefiniowanych miejscach - w ten sposób z wyprzedzeniem wizualizowane są wymagane informacje. Należy unikać fragmentarycznych wpisów liczb, ponieważ komplikują one jedynie wprowadzanie danych. Ponadto powinny być one zaprogramowane w taki sposób, aby były tolerancyjne na przestrzeń.
  3. Obsługa błędów jest ważnym i złożonym tematem. Gwiazdka i obramowane na czerwono pole wejściowe sprawdziły się jako wzorce UI. Idealnie byłoby, gdyby pola te były oczywiste. Mimo to zawsze należy się spodziewać, że coś nie działa. Dlatego oferują różne opcje pomocy. Jest na to kilka możliwości: Przycisk informacyjny, który oferuje pomoc przy poruszaniu się. Albo wyskakiwanie małych modali, jeśli formularz nie zostanie pomyślnie wysłany.
  4. Sensowne jest przekazywanie informacji zwrotnych już w trakcie wprowadzania danych. W przypadku haseł okazało się również przydatne, aby dać użytkownikowi jakościową ocenę tego, jak bezpieczne jest wybrane przez niego hasło. 
  5. Formularz Multi-Step ma kilka psychologicznych zalet. Po pierwsze, ma on wyraźniejszy i mniej odstraszający efekt. Jeśli wskaźnik (tutaj pasek ładowania) pokazuje użytkownikowi, gdzie znajduje się w formularzu, wie on dokładnie czego się spodziewać. Prawdopodobieństwo, że zerwie przedwcześnie, jest mniejsze. Dane osobowe powinny być zawsze wymagane na końcu formularza. Jeśli odwiedzający Twoją stronę internetową w dużej mierze już wypełnił formularz, trudniej będzie mu zrezygnować z czasu, który już zainwestował bez efektów. Wskazane jest również, aby pytać tylko o te informacje, których naprawdę potrzebujesz i uzasadnić swoją prośbę. Jeśli poprosisz swoich użytkowników o zapisanie się na coś, wskazane jest podanie korzyści dla nich à la "Zawsze najpierw zdobądź najlepszą ofertę". W ostatnim kroku powinieneś dać mały przegląd tego, co dzieje się dalej - i czego użytkownik może się spodziewać, kiedy.

Ponadto, formularze powinny zawierać automatyczne wypełnianie (przez dane przechowywane w przeglądarce) i rozpoznawanie informacji (np. dodanie miasta po wpisaniu kodu pocztowego). Szczególnie WordPress wiele formularzy ma to już domyślnie włączone. 

Należy unikać stosowania captchas, jeśli to możliwe, lub przynajmniej ograniczyć je do minimum. Według z tego badania captchas może prowadzić do 30 procent mniej interakcji z formą.

3. strukturyzacja treści

Jako operator strony internetowej, powinieneś zwrócić szczególną uwagę na to, jak zorganizowana jest zawartość Twojej strony: Czy wspierają one odwiedzających w odnalezieniu drogi przez Twoją stronę? Czy Twoje treści są łatwo dostępne i czy ich hierarchia jest zrozumiała? 

Kwestia łatwej dostępności szczególnie przemawia do użytkowników, którzy przeglądają Twoją stronę w zmienionych warunkach. Na przykład, osoby z problemami z widzeniem kolorów i zaburzeniami widzenia. Jeśli chcieliby Państwo bardziej szczegółowo zająć się tematem dostępności i wolności od barier, dalsze informacje znajdą Państwo tutaj: 

Jeśli masz bloga lub magazyn internetowy, prawdopodobnie znasz problem: masz wiele interesujących treści, które chciałbyś zaoferować jak najbardziej równomiernie. Odpowiednim wzorem do tego jest tak zwana "Lista artykułów". Tutaj kategoryzujesz swoją zawartość i pokazujesz tylko niewielką jej część. W ten sposób możesz pokazać wiele tematów na pierwszy rzut oka, nie zalewając przy tym użytkowników informacjami. Ładny przykład pokazuje tutaj RAIDBOXES:

RAIDBOXES  WP unboxed
Widok WordPress magazynu wp unboxed

Podział ten pozwala użytkownikowi na przeglądanie całej zawartości według obszarów zainteresowań, a tym samym na szybsze znalezienie tego, co go interesuje.

W celu zaoferowania pewnych treści bez rozpraszania uwagi, można użyć boksów modalnych. Te pola są umieszczone nad resztą strony i pozwalają użytkownikowi skoncentrować się na zawartości. To może być konieczne i ważne. Zwróć jednak uwagę, że te modały są również bardziej antymateriałowe: Zasadniczo blokują one swobodę działania użytkownika tak długo, jak długo modal jest otwarty.

Prawidłowo używane, jednak boksy modalne mogą pomóc gościom lepiej zrozumieć Twoją zawartość. Jednak zbyt częste lub pozornie niesprowokowane boksy modalne mogą szybko wywołać frustrację i poczucie bezradności.

Tryb Lightbox i pełnoekranowy również należą do tej kategorii. Z jednej strony, pozwalają one użytkownikowi na bliższe przyjrzenie się wybranym treściom. Z drugiej strony, uniemożliwiają one wszelkie inne interakcje. Dlatego ważne jest, aby zawsze oferować co najmniej jeden punkt znikający. Szczególnie dobrze znane są kliknięcia na X w prawym górnym rogu zdjęcia lub kliknięcia poza polem, aby zamknąć je ponownie.

Pokazy slajdów są również popularnym sposobem wyświetlania obrazów. Rozróżnia się pomiędzy pokazami slajdów z automatycznym odtwarzaniem a pokazami slajdów z ręczną nawigacją. Galerie są często wymieniane jako miniatury, a następnie powiększane za pomocą pokazów slajdów i/lub lightboxów.

Tutaj należy działać przede wszystkim zgodnie z funkcją: Jakiego rodzaju obrazy reprezentujesz? Czy muszą być dostępne jako pełnoekranowe? A co jest ważniejsze: twoja treść jako całość czy poszczególne obrazy? Czy warto uciekać się do innych możliwości - np. szkła powiększającego, które powiększa obraz podczas zawisania? Ten ostatni jest szczególnie popularny w handlu elektronicznym.

Zrzut ekranowy Wzory wzorców projektowych Unsplash-UI
Widok na miniaturkę unsplash.com

unsplash.com wykorzystuje mieszankę galerii obrazów i lightboxów. Jednak obrazy nie są wyświetlane jako miniatury. Dlaczego? Unsplash to platforma, która oferuje wyłącznie obrazy do pobrania. Oznacza to, że użytkownicy muszą być w stanie zdecydować za lub przeciw obrazowi na pierwszy rzut oka. Aby móc podjąć tę decyzję, rozdzielczość obrazu musi być stosunkowo dobra. Miniaturki byłyby na to za małe. Klikając na każdy obraz z osobna lub poruszając się po pokazie slajdów, można wielokrotnie zminimalizować wydajność strony.

Podczas całego procesu wdrażania i tworzenia koncepcji nie wolno tracić z oczu kwestii użyteczności/wartości dodanej i znaczenia.

4. korzystanie z kanałów społecznościowych

Dotyczy to wzorców, które pomagają poprowadzić użytkowników do kanałów mediów społecznościowych i/lub ułatwiają interakcję społeczną. Szczegółowe przykłady tych wzorów można znaleźć tutaj Czytaj dalej.

Wniosek

Podsumowując, mogę polecić w szczególności dwa podejścia. Po pierwsze: Odwiedź i przeanalizuj jak najwięcej stron internetowych, aby zebrać inspirację: Jak inni projektanci rozwiązywali lub nie rozwiązywali pewnych problemów? Co mnie frustruje, gdy surfuję po sieci? Kiedy ostatni raz byłam pozytywnie zaskoczona - i dlaczego? 

Po drugie, zawsze pamiętaj, że nie jesteś użytkownikiem. Odwiedzający Twoją stronę internetową myślą zaskakująco inaczej niż Ty. Mogą jeszcze nie znać twojego produktu. W związku z tym należy wielokrotnie przeprowadzać różne testy, aby ocenić, jak naprawdę wygląda użyteczność Twojej strony.

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

Zachęcamy do skorzystania z funkcji komentarza. Chcesz być informowany o nowych artykułach i wskazówkach dotyczących projektowania i rozwoju stron internetowych? Następnie podążaj za nami dalej TwitterFacebook albo o naszym Newsletter.

Po studiach projektowania gier i kreatywnego pisania w zielonym regionie Auckland, wyspecjalizował się Sonja Hoffmannw projektowaniu stron internetowych i aplikacji oraz ich rozwoju. Skupia się na gamifikacji i badaniu motywacji i doświadczenia użytkowników, w połączeniu z pasją i ciekawością trendów technologicznych.

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola oznaczone są * Zaznaczone.