Czy kiedykolwiek odczuwałeś frustrację podczas poruszania się po stronie internetowej lub aplikacji, nie rozumiejąc, jak ona działa? Oczywiście, że tak.
Przyczyną Twojej frustracji jest najprawdopodobniej źle zaprojektowany interfejs, który nie pozwala na intuicyjną nawigację. Zamiast tego musisz zatrzymać się i przeanalizować każdy element, aby zrozumieć, jak działa i do czego służy.
Jednym z najczęstszych błędów prowadzących do złego projektu produktu jest niespójność interfejsu użytkownika.
Oprócz tego, że jest to jeden z najbardziej powszechnych błędów, jest również naprawdę łatwy do naprawienia lub całkowitego uniknięcia. Zrozummy więc, na czym polega niespójność interfejsu użytkownika i jak możesz zadbać o to, aby Twoi użytkownicy jej nie doświadczali.
Zrozumienie spójności interfejsu użytkownika
Jak sama nazwa wskazuje, spójność interfejsu użytkownika polega na stosowaniu identycznych elementów interfejsu, atomowego projektowania i ogólnego doświadczenia użytkownika dla tego samego rodzaju działania lub elementu w produkcie.
Jeśli w wielu miejscach interfejsu masz przyciski głównej akcji, wszystkie powinny wyglądać tak samo (UI) i działać tak samo (UX). Na przykład po zalogowaniu się do konta Dropbox i przejrzeniu różnych sekcji zauważysz, że wszystkie przyciski głównych akcji są identyczne.
Jeśli przyjrzysz się bliżej, zauważysz, że w Dropboxie spójny wygląd mają nie tylko przyciski głównych akcji, ale praktycznie wszystkie elementy.
Istnieje kilka ważnych powodów, dla których zespoły projektowe przywiązują dużą wagę do spójnego projektowania interfejsu użytkownika. Są to między innymi:
- Wygląda schludnie i jest przyjemny dla oka. Różnorodność nie zawsze jest najlepszym rozwiązaniem w interfejsach użytkownika. Zbyt wiele rodzajów elementów wizualnych sprawia, że interfejs staje się ciężki i utrudnia czytelność.
- Wygląda profesjonalnie. Schludny interfejs użytkownika wywołuje wrażenie profesjonalizmu i kompetencji. Użytkownicy mają większe zaufanie do marek, których strony internetowe lub produkty są dobrze zaprojektowane.
- Poprawia doświadczenie użytkownika. Jeśli zobaczysz gdzieś w Dropboxie czarny przycisk i rozpoznasz go jako główną akcję, za każdym razem, gdy zobaczysz przycisk wyglądający identycznie, będziesz wiedzieć, że on również oznacza główną akcję. Dzięki temu nie będziesz musieć za każdym razem zastanawiać się, do czego służy napotkany przycisk.
Na koniec warto wspomnieć również o tworzeniu tego interfejsu. Jeśli w całym produkcie masz spójne elementy interfejsu użytkownika, zespół zajmujący się warstwą frontendową nie musi tworzyć każdego nowego elementu od podstaw. Zamiast tego tworzy pojedynczy element i ponownie wykorzystuje go na nowych ekranach, które musi opracować. W ten sposób znacząco skracasz czas potrzebny na tworzenie nowych interfejsów i funkcji.
Pomimo swojego znaczenia i wpływu na doświadczenie użytkownika spójny projekt nie zawsze jest obecny. Nawet duże produkty technologiczne mają ten problem. Moim ulubionym przykładem jest menu ustawień systemu Android.
Przyjrzyj się różnym elementom na tej liście i powiedz mi, które z nich są klikalne (przyciski), a które są tylko tekstem informacyjnym. Prawdopodobnie nie potrafisz tego stwierdzić, dopóki nie otworzysz tego samego menu w swoim telefonie i nie zaczniesz wszystkiego dotykać.
Nawet jeśli udało Ci się poprawnie odgadnąć (są to „Dane konta Google” oraz „Zdjęcia i filmy”), wymagało to od Ciebie pewnego wysiłku poznawczego.
Tak nie powinno działać UX. W końcu słynny cytat guru UX, Steve’a Kruga, brzmi:
Nie zmuszaj mnie do myślenia.
Przy okazji gorąco polecam przeczytanie jego książki, a także „biblii” UX autorstwa Dona Normana - Wzornictwo na co dzień.
Ogólna idea jest taka, że użytkownicy będą w stanie automatycznie rozpoznawać elementy interfejsu bez konieczności zastanawiania się, czym one są, i poruszać się po aplikacji na poziomie „pamięci mięśniowej”.
Podstawy projektowania interfejsu użytkownika
Zanim przejdziemy do omówienia sposobów utrzymania spójności projektu, przypomnijmy sobie podstawowe zasady projektowania, które przede wszystkim umożliwiają tworzenie przyjaznego dla użytkownika interfejsu oraz zachowanie spójności.
Have an account? Log In
Przejrzystość i prostota
Minęły już czasy stron internetowych z migającymi GIF-ami i wszystkimi kolorami tęczy reprezentowanymi w interfejsie (milenialsi, pamiętacie je?).
Im więcej osób zaczęło korzystać z internetu, tym większą uwagę projektanci UI i UX poświęcali temu, jak użytkownicy postrzegają interfejsy i wchodzą z nimi w interakcję.
Wkrótce odkryli, że zbyt wiele kolorów i elementów wizualnych utrudnia użytkownikom wykonywanie zadań, które chcieli zrealizować. Jedyne, co użytkownicy czerpią z przeglądania takich interfejsów, to zmęczenie oczu.
W naturalny sposób zaczęliśmy więc zmierzać w kierunku minimalizmu i prostoty. Spójność interfejsu jest bowiem kolejnym sposobem na jego uproszczenie.
Hierarchia wizualna
Gdy na ekranie znajduje się wiele elementów, trudno zrozumieć zależności między nimi. Skąd na przykład wiadomo, czy dany fragment tekstu jest nagłówkiem artykułu, czy tylko częścią tekstu?
Pomagasz użytkownikom zrozumieć te zależności za pomocą hierarchii wizualnej. Umieszczając elementy wyżej, powiększając je, nadając im kolory, pogrubiając je i stosując inne zabiegi, możesz ułatwić użytkownikom dostrzeżenie, że są one ważniejsze od pozostałych elementów na ekranie. Dzięki temu użytkownicy intuicyjnie spojrzą najpierw na ten element, a dopiero potem przejdą do drugiego.
Istnieje słynny mem, który pokazuje magię hierarchii wizualnej.
Uśmiechnąłeś się, czytając ten tekst, prawda? Właśnie tak — podobnie jak u każdego innego człowieka, Twój wzrok jest zaprogramowany na podążanie za hierarchią wizualną.
Informacja zwrotna
Za każdym razem, gdy użytkownik wykonuje działanie w Twoim produkcie, oczekuje informacji, czy to działanie zakończyło się powodzeniem.
Jeśli klikniesz przycisk usuwania i nic się potem nie wydarzy, możesz poczuć dezorientację. Czy usunięcie się powiodło, czy wystąpił błąd? Aby pomóc użytkownikom, musisz przekazać im wizualną (albo dźwiękową, a nawet haptyczną) informację zwrotną, która poinformuje ich o rezultacie działania.
Jeśli system pomyślnie przetworzył żądanie usunięcia, poinformuj użytkownika, że element został usunięty. Jeśli zamiast tego wystąpi błąd, również o nim poinformuj. Dzięki temu użytkownicy będą wiedzieć, że element nie został usunięty i że muszą spróbować ponownie albo skontaktować się z Tobą w celu uzyskania pomocy.
Najlepsze praktyki zapewniania spójności interfejsu
Na pierwszy rzut oka spójność interfejsu jest bardzo prosta do osiągnięcia i każdy projektant powinien sobie z nią poradzić. To prawda, zakładając, że jesteś jedyną osobą pracującą nad produktem, a sam produkt jest mały i prosty.
W chwili, gdy zaczynasz pracować w większym zespole (w którym każdy projektant ma własny styl) oraz nad produktem składającym się z dziesiątek stron i funkcji, utrzymanie spójności elementów staje się prawdziwym wyzwaniem.
Po prostu nie jesteś w stanie zapamiętać, jak wygląda każdy element w całym produkcie, a następnie odtworzyć go w nowej funkcji, nad którą pracujesz.
Na szczęście istnieje wiele procesów i metod, które pozwalają ograniczyć ryzyko wprowadzenia niespójności do projektu. Oto trzy rozwiązania uznawane za standardy branżowe.
Przewodniki stylu: Jest to dokument określający standardy projektowe produktu i reprezentujący tożsamość marki. Obejmuje typografię (czyli czcionki, ich rozmiary, rozmieszczenie itd.) dla różnych rodzajów tekstu (np. nagłówków, tekstu głównego, komentarzy itd.), ikonografię, paletę kolorów oraz inne podstawowe elementy projektu.
Przewodnik stylu gwarantuje, że cały zespół projektowy pracuje zgodnie z tymi samymi globalnymi standardami, a treści, kolory i ikony pozostają spójne w całym produkcie.
Apple jest prawdopodobnie najlepszym przykładem konsekwentnego stosowania przewodnika stylu wszędzie, także w firmach tworzących aplikacje dla jego produktów.
Przedstawiony tutaj przykład to przewodnik stylu dotyczący przycisku, który można umieścić na stronie internetowej, aby umożliwić użytkownikom pobranie aplikacji z App Store. Jak widać, Apple bardzo precyzyjnie określa sposób używania tego przycisku.
Biblioteki wzorców: Jest to kolejny dokument zawierający wytyczne, który koncentruje się na opisywaniu szczegółów niskiego poziomu standardu projektowego, w przeciwieństwie do poprzedniego dokumentu przedstawiającego najważniejsze założenia projektu na wysokim poziomie. Biblioteki wzorców projektowych są często tworzone, gdy zespół stosuje projektowanie atomowe.
Koncepcja projektowania atomowego zakłada istnienie jasno zdefiniowanych, małych elementów interfejsu, które po połączeniu tworzą bardziej złożone elementy. Typowe kategorie elementów i ich kombinacji w tym podejściu obejmują:
- Atomy (stąd nazwa): Podstawowe elementy, takie jak formularze, przyciski, ikony i inne. Są to elementy, których nie można dalej rozłożyć na mniejsze części.
- Cząsteczki: Połączenia atomów, które służą konkretnemu celowi. Przykładami są paginacja list, okruszki nawigacyjne i inne elementy.
- Organizmy: Bardziej złożone elementy interfejsu składające się z wielu atomów i cząsteczek, które reprezentują określone obiekty. Są to karty, paski wyszukiwania i inne elementy.
- Szablony: Połączenia wielokrotnego użytku organizmów, które można dodawać do stron. Mogą to być listy wyników wyszukiwania, sekcje opisów produktów i inne elementy.
- Strona: Końcowy rezultat projektu oraz miejsce, w którym użytkownik wchodzi z nim w interakcję. Jak wskazuje nazwa, są to poszczególne strony produktu, takie jak strona główna.
Biblioteka wzorców to zbiór ustandaryzowanych cząsteczek i organizmów, których można używać w projekcie. Spójność osiąga się poprzez ciągłe ponowne wykorzystywanie tych samych elementów w różnych częściach produktu, ponieważ użytkownicy natychmiast rozpoznają dany element w chwili otwarcia określonej strony.
System projektowy: To całościowe połączenie wytycznych dotyczących stylu wysokiego poziomu, krojów pisma, schematów kolorów i opisów drobnych elementów interfejsu użytkownika, a także zbiór gotowych komponentów interfejsu użytkownika, których można używać zarówno w projekcie, jak i podczas tworzenia produktu.
niemal wszystkie duże firmy technologiczne opracowują własny system projektowy, aby zapewnić spójność wizualną. Google ma Material, Shopify ma Polaris, a Apple ma Human Interface. Istnieją również niezależne systemy o otwartym kodzie źródłowym, które można łatwo zintegrować z produktem i używać bezpłatnie. Moim ulubionym z nich jest ant.design.
Podobnie jak inne systemy projektowe, oferuje zarówno bibliotekę projektową, której można używać w Figmie lub innych popularnych narzędziach, jak i bibliotekę komponentów wstępnie zakodowanych w popularnych strukturach programistycznych (np. React), z których deweloperzy mogą korzystać w swoim kodzie.
Narzędzia do utrzymywania spójności interfejsu użytkownika
Aby zachować spójność projektu we wszystkich zespołach i częściach produktu, należy udokumentować wytyczne i zadbać o to, aby cały zespół współpracował nad ich stosowaniem.
Do dokumentowania i stosowania standardów projektowych podczas codziennego projektowania funkcji i ekranów można wykorzystać wyspecjalizowane funkcje wielu nowoczesnych narzędzi do projektowania.
Figma umożliwia na przykład tworzenie skalowalnych komponentów, które można przechowywać w pliku systemu projektowego i udostępniać wszystkim osobom w firmie.
Obsługuje również zestawy interfejsu użytkownika — gotową bibliotekę wytycznych i zasad projektowych, którą można pobrać z biblioteki Figmy i wykorzystywać w swoich produktach. Oto zestaw dla systemu Material Design firmy Google.
Ten konkretny zestaw zapewnia szeroki wybór elementów do projektowania aplikacji na Androida zgodnie ze standardami projektowymi Google.
A teraz kwestia współpracy. Bez odpowiedniej współpracy w zespole projektowym można spodziewać się elementów, które nie będą zgodne z wytycznymi i naruszą spójność wizualną. Na szczęście istnieją również narzędzia do projektowania UX/UI wspierające współpracę.
Zeplin pomaga na przykład projektantom i deweloperom skuteczniej współpracować, tworząc przyjazne deweloperom wersje projektu, w których zespół programistyczny może znaleźć dokładne specyfikacje CSS elementów, a także łatwo pobierać obrazy, ikony i inne zasoby z projektu. Integruje się również z innymi narzędziami do tworzenia interfejsu użytkownika, aby ułatwić przenoszenie projektów z miejsca, w którym zostały utworzone, do Zeplina.
More Articles
Testowanie i iteracyjne doskonalenie spójności interfejsu użytkownika
Podobnie jak wymagania dotyczące produktu czy strategia, wytyczne projektowe również nie są statycznymi dokumentami. Zawsze będą wymagać zmian i aktualizowania.
Do typowych powodów zmiany wytycznych należą:
- Dodawanie nowych elementów, których wcześniej nie było w bibliotece.
- Przyjmowanie nowych trendów projektowych i najlepszych praktyk.
- Znajdowanie problemów i „błędów projektowych”, które wymagają naprawy.
Wreszcie dobrym zwyczajem jest pozwalanie zespołowi projektowemu na okresowe przeglądanie go i wprowadzanie w nim drobnych ulepszeń.
Oprócz poprawy ogólnego wyglądu i jakości projektu, to drugie działanie pozwala również przeprowadzić tak zwany „test spójności interfejsu użytkownika”, podczas którego zespół projektowy aktywnie wyszukuje niespójności w systemie projektowym i je naprawia.
Podobny test możesz również przeprowadzić na gotowych projektach. Zawsze istnieje ryzyko, że kilka funkcji zawiera elementy, których nie ma w zestawie interfejsu użytkownika, lub że nie wyglądają one tak, jak powinny.
Oprócz przeprowadzania testów wewnętrznych sugerowałbym również aktywne zaangażowanie użytkowników w proces testowania. Można to zrobić na dwa sposoby.
- Poproś o opinię na temat projektu, poznaj potrzeby użytkowników i aktywnie wprowadzaj kolejne iteracje na podstawie ich komentarzy.
- Przeprowadź testy użyteczności, aby zrozumieć poziom spójności interfejsu.
Jeśli chodzi o tę drugą kwestię, wyobraź sobie, że użyłeś głównego przycisku działania w 10 różnych miejscach w całym produkcie. Czy masz pewność, że we wszystkich tych 10 przypadkach użytkownicy rozpoznają go jako główne działanie?
Nie możesz mieć takiej pewności, dopóki nie przeprowadzisz moderowanych lub niemoderowanych testów użyteczności z wykorzystaniem prototypów zbudowanych w narzędziu UX i nie zobaczysz, jak użytkownicy z nimi wchodzą w interakcję.
Na podstawie tych testów i opinii użytkowników możesz następnie podejmować decyzje projektowe oparte na danych.
Nie każ mi myśleć
Spójność jest jednym z najważniejszych elementów świetnego projektu interfejsu użytkownika. Utrzymując wszystko w prostocie i zapewniając wizualną jednolitość, masz pewność, że użytkownicy nie zgubią się w interfejsie. Zamiast tego intuicyjnie rozumieją przeznaczenie każdego elementu na ekranie i z łatwością wykonują swoje zadania.
Nie zapomnij zapisać się do naszego newslettera, aby otrzymywać więcej materiałów i poradników dotyczących zarządzania produktami, a także najnowsze podcasty, wywiady i inne spostrzeżenia liderów oraz ekspertów z branży.
