Na tym etapie naszej historii absolutnie nie ma żadnego usprawiedliwienia dla kiepskiego projektowania produktów. W niezwykle konkurencyjnym świecie produktów programistycznych właściwe zaprojektowanie interfejsu użytkownika i doświadczenia użytkownika jest niepodlegającym negocjacjom wymogiem. Nawet jeśli dysponujesz świetną technologią, która potrafi rozwiązać problemy użytkowników, kiepskie doświadczenie użytkownika sprawi, że uciekną oni od twojego produktu — albo dlatego, że nie potrafili zrozumieć, jak go używać, albo po prostu dlatego, że go nie znoszą.
Przygotuj się; zaraz przedstawię ci kilka „trudnych prawd” na temat tego, jak nie projektować doświadczeń użytkownika, wymieniając siedem grzechów głównych projektowania produktów i ujawniając niektóre z najgorszych przykładów.
Grzech nr 1: „Choinka”
Jednym z moich najprzyjemniejszych wspomnień z dzieciństwa jest wspólne z siostrą dekorowanie choinki. Gdy tylko kończyliśmy, patrzyliśmy na nią z zachwytem, ponieważ wydawała nam się absolutnie wspaniała. Cóż, przynajmniej tak ją widzieliśmy. Jak wyglądała w rzeczywistości? Mniej więcej tak.
Zakładam, że wiesz, do czego zmierzam. W przeciwieństwie do choinki, którą naprawdę chcesz pozwolić dzieciom udekorować zgodnie z ich upodobaniami, twój interfejs użytkownika i doświadczenie użytkownika nie powinny wyglądać jak ogromny bałagan elementów i kolorów porozrzucanych po całym ekranie.
Przyjrzyjmy się teraz prawdziwemu produktowi, który wygląda jak „choinka”.
Spójrz na to przez chwilę i spróbuj wyjaśnić mi, czego dotyczy ten produkt. Jestem pewien, że zagubiłeś się w interfejsie użytkownika i przez jakiś czas również nie potrafiłeś zrozumieć, co się dzieje. Na tym ekranie dzieje się po prostu zbyt wiele — praktycznie niemożliwe jest zrozumienie, gdzie się znajdujesz i co powinieneś robić.
Problemy, które dostrzegam w tym interfejsie, obejmują:
- Nadużywanie kolorów: Kolor jest potężnym narzędziem w rękach kreatywnych projektantów produktów, ponieważ mogą oni za jego pomocą wskazywać użytkownikom właściwy kierunek. Jeśli jednak w interfejsie użytkownika jest zbyt wiele kolorów, osłabia to ich moc, a każdy kolorowy element zaczyna konkurować o uwagę.
- Nadmiar wezwań do działania: Co jest teraz najważniejsze i w co powinienem kliknąć? Szczerze mówiąc, nie mam pojęcia — przyciski znajdują się wszędzie.
- Niejasny układ: Zasadniczo ekran jest podzielony na trzy kolumny, przy czym środkowa zawiera dwie karty, a na dole znajduje się również duża sekcja osi czasu. Projektanci próbowali zmieścić na jednym ekranie jak najwięcej elementów.
Zamiast tego zrób tak
To przykład próby podejścia do projektowania doświadczeń użytkownika poprzez stworzenie pewnego porządku z ogromnej ilości informacji. Zamiast tego potraktuj swoje doświadczenie użytkownika jak mapę zachowań, których oczekujesz od użytkowników. Podstawą projektowania produktów jest to, aby kolory, wezwania do działania i układ współpracowały ze sobą, kierując użytkownika do podjęcia właściwych kolejnych kroków.
Grzech nr 2: Zła hierarchia wizualna
Hierarchia wizualna odnosi się do rozmieszczenia elementów w interfejsie użytkownika w taki sposób, aby jasno przekazywało ono hierarchiczną relację między nimi.
Na przykład artykuł, który właśnie czytasz, ma wyraźną hierarchię wizualną: tytuł znajduje się u góry i jest zapisany dużą czcionką, śródtytuły są mniejsze od tytułu, ale znacznie pogrubione w porównaniu z akapitami, i tak dalej.
W obu przypadkach wyróżniamy tytuły, powiększając je lub pogrubiając — jasno wskazując, że akapity dotyczą tematów przedstawionych w odpowiadających im śródtytułach.
Hierarchia wizualna to świetny sposób na uporządkowanie interfejsu użytkownika i ułatwienie nawigacji. Jej brak jest natomiast świetnym sposobem na sprawienie, że użytkownicy będą mieli trudności z odnalezieniem się w interfejsie.
Jedną z najbardziej rzucających się w oczy porażek hierarchii wizualnej, która codziennie mnie irytuje, jest sekcja odpowiedzi w serwisie Quora.
Aby zachęcić użytkowników do przeglądania innych pytań i dłuższego pozostawania w serwisie, Quora uwzględniła również pytania i odpowiedzi powiązane z pytaniem, które aktualnie przeglądasz.
Nie mam nic przeciwko temu. To istniejące zachowanie użytkowników, a Quora znalazła naturalny sposób, aby czerpać z niego korzyści.
Przeszkadza mi natomiast sposób, w jaki zaprojektowano te powiązane pytania i odpowiedzi. Wyglądają niemal identycznie jak właściwe odpowiedzi na stronie i brakuje im hierarchii wizualnej. Spójrz na powyższy zrzut ekranu i powiedz mi, która z pozycji jest odpowiedzią, a która powiązanym pytaniem. Naprawdę trzeba czytać powoli, żeby to zauważyć.
Have an account? Log In
Zamiast tego zrób to
Idealnie byłoby, gdyby powiązane pytania były mniej eksponowane w interfejsie i znajdowały się niżej niż główne odpowiedzi pod względem hierarchii wizualnej (np. miały szare tło zamiast białego).
Grzech nr 3: Interfejs rodem z lat 2000.
Wiem, wiem, Craigslist ma strasznie przestarzały interfejs, a mimo to nadal działa doskonale. Jest jednak wyjątkiem od reguły i nie powinieneś uważać, że w 2023 roku coś takiego jest nadal całkowicie w porządku.
Problem polega na tym, że w przeciwieństwie do Craigslist Twój produkt nie będzie niezwykle popularny i nie ma powszechnie rozpoznawalnej marki. Dlatego jeśli ludzie zobaczą coś przestarzałego podczas odwiedzania Twojej strony internetowej lub korzystania z aplikacji, po prostu nie będą traktować Cię poważnie. Zawsze masz jednak szansę zyskać rozpoznawalność dzięki kreatywnemu projektowi logo i identyfikacji marki.
Niestety czasami to właśnie najbardziej „poważne” organizacje są winne popełniania tego grzechu.
Kilka lat temu miałem okazję współpracować z Bankiem Centralnym Armenii. Pracują tam jedni z najbardziej utalentowanych analityków finansowych i ekspertów w dziedzinie polityki monetarnej. Co więcej, prezes tej instytucji (absolwent Harvardu) był moim profesorem i jest prawdopodobnie najmądrzejszą osobą, jaką spotkałem w życiu.
Strona internetowa Banku Centralnego wygląda jednak tak źle, że trudno będzie Ci uwierzyć, iż jest to bardzo ważna organizacja zatrudniająca niezwykle utalentowanych pracowników.
Grzech nr 4: Mroczne wzorce (czyli wykorzystywanie UX przeciwko użytkownikom)
W świecie UX „mroczne wzorce” to ścieżki użytkownika i elementy interfejsu, które wprowadzają użytkownika w błąd i skłaniają go do wykonania działania, którego nie jest świadomy.
Istnieje pewien sklep internetowy z logo w kształcie pomarańczowej strzałki, który jest szczególnie „słynny” z wdrażania mrocznych wzorców. Są na tyle winni ich stosowania, że przeciwko nim prowadzone są trwające skargi i dochodzenia w związku z nieprzestrzeganiem zasad FCC.
Jednym z najbardziej znanych doświadczeń użytkownika należących do tej kategorii jest sposób, w jaki należy anulować członkostwo Prime.
Żeby być sprawiedliwym, uważam, że proszenie użytkowników o opinię przy anulowaniu płatnej subskrypcji, a nawet zaoferowanie im zniżki „proszę, nie odchodź”, nadal jest dobrym pomysłem. Musisz jednak szanować czas i cierpliwość swoich użytkowników.
Pamiętaj, że osoby, które chcą anulować Twoją subskrypcję, najprawdopodobniej są zirytowane lub niezadowolone z Ciebie. Jeśli więc utrudnisz im rezygnację, jeszcze bardziej się rozzłoszczą (i możesz zapomnieć o szansie na odzyskanie ich w przyszłości).
Jeśli na przykład spróbujesz anulować członkostwo Prime, Amazon poprosi Cię o ponowne rozważenie tej decyzji.
Ten ekran mi nie przeszkadza, robią to wszyscy.
Nie podoba mi się jednak to, że aby anulować członkostwo, musisz jeszcze dwukrotnie(!) potwierdzić swój wybór (żartujesz sobie, prawda?). Co więcej, treść komunikatów i kolory użyte w ich CTA zostały dobrane tak, aby utrudnić znalezienie opcji anulowania członkostwa zamiast jego utrzymania.
Zamiast tego zrób to
Nie próbuj nakłaniać użytkowników do działania sprzecznego z ich intencjami ani nie próbuj ich „wymęczyć”, nadmiernie utrudniając rezygnację. Ludzie są wystarczająco inteligentni, by wiedzieć, że robisz to celowo, a to tylko sprawi, że Twoi konkurenci będą wyglądać atrakcyjniej. Zamiast tego przeprowadź krótką ankietę na temat powodu ich odejścia, usprawnij proces i pozostaw im otwartą możliwość powrotu.
Grzech nr 5: Nieprzestrzeganie najlepszych praktyk dotyczących formularzy
Formularze są jednym z podstawowych elementów stron internetowych i jedną z pierwszych rzeczy, których programiści uczą się tworzyć, a projektanci — cóż, projektować.
Tworzenie świetnych doświadczeń użytkownika w przypadku formularzy jest prawdopodobnie jednym z najczęściej omawianych tematów wśród projektantów, a najlepsze praktyki, poradniki i lekcje na ten temat można znaleźć praktycznie wszędzie.
Author's Tip
Uwaga: Jeśli chcesz dowiedzieć się więcej na ten temat, zdecydowanie polecam książkę „Designing UX: Forms” autorstwa Jessiki Enders
Biorąc pod uwagę powszechność materiałów edukacyjnych dotyczących formularzy oraz znaczenie ich prawidłowego projektowania (w końcu będzie to miało bezpośredni wpływ na pozyskiwanie użytkowników i inne kluczowe wskaźniki), twierdzę, że nieprzestrzeganie ustalonych najlepszych praktyk UX dotyczących formularzy jest grzechem.
Teraz pokażę przykład złego projektu formularza.
Nie mogę nawet patrzeć na tę stronę, bo aż bolą mnie oczy. Jest tu tak wiele problemów. Wymieńmy kilka z nich:
Niewłaściwe wykorzystanie pustej przestrzeni: Dlaczego nazwy pól znajdują się tak daleko od samych pól? Dlaczego użyto całego bloku do umieszczenia dwóch małych przełączników dotyczących odbioru osobistego i dostawy? Można stworzyć formularz zawierający wszystkie te informacje, który będzie co najmniej 4 razy mniejszy i znacznie łatwiejszy do przejrzenia.
Niewłaściwe formatowanie pól: Jest tu pole telefonu, w którym wpisywane cyfry nie będą wyświetlane w formacie numeru telefonu (np. +1 (555) 123-1234), co ułatwiłoby ich odczytanie. To tak powszechne rozwiązanie, że większość narzędzi projektowych ma nawet gotowe komponenty do jego obsługi.
Brak tekstu zastępczego: ledwo można zauważyć, że w sekcji „Dodatkowe instrukcje dotyczące dostawy” znajduje się pole tekstowe. Co więcej, nie jestem pewien, co właściwie należy tam wpisać. Dobry UX formularzy zawsze zakłada obecność tekstów zastępczych, które dają użytkownikowi wskazówkę, na przykład „Proszę zostawić paczkę na werandzie z przodu domu”.
Zrób to tak
Rozwiązania tych problemów są dość oczywiste, ale w tym przypadku wygląda na to, że jedynymi osobami, które przetestowały ten formularz, byli jego twórcy. Projektanci powinni byli zebrać rzeczywiste opinie użytkowników na temat tego rozwiązania UX przed jego uruchomieniem.
Grzech nr 6: Używanie niewłaściwych elementów interfejsu użytkownika
Kolejny grzech, o którym chcę porozmawiać, jest kontynuacją poprzedniego. Formularze nie są jedynymi elementami interfejsu użytkownika w produkcie, które powinny być zgodne z ugruntowanymi konwencjami i najlepszymi praktykami. Istnieją również inne typowe elementy, takie jak przełączniki, pola wyboru i inne.
Użytkownicy mają już wypracowane modele mentalne dotyczące działania każdego z tych elementów, dlatego trzeba zadbać o ich właściwe wykorzystanie.
Oto kilka przykładów tego, do czego służą te elementy i jak nie należy ich używać:
Przełączniki: Ten element pokazuje stan „logiczny” (na przykład Wł./Wył. lub Aktywny/Nieaktywny). Doskonale nadają się do pokazywania użytkownikom stanu anteny Bluetooth w smartfonie i umożliwiania jej włączania lub wyłączania.
W poprzednim formularzu znajdują się jednak dwa przełączniki, które pozwalają użytkownikowi wybrać odbiór osobisty lub dostawę.
Jeśli chwilę się nad tym zastanowisz, poświęcisz na to więcej czasu niż projektant. Te przełączniki oznaczają, że aby wybrać opcję „dostawa”, trzeba wyłączyć „odbiór osobisty” i włączyć „dostawę”! Można było użyć przycisków jednokrotnego wyboru. Szczerze zastanawiam się, co się stanie, jeśli użytkownik włączy oba przełączniki jednocześnie.
Listy wyboru bez filtrowania: jako jedne z najstarszych elementów pojawiających się na stronach internetowych listy wyboru nadal są popularne i bardzo przyjazne dla użytkownika, jeśli są stosowane prawidłowo.
Zrób to tak
Najlepsze praktyki wskazują, że listy wyboru należy stosować w przypadkach, gdy użytkownik musi wybrać jedną opcję z listy zawierającej od 5 do 15 możliwości. Jeśli opcji jest mniej niż 5, należy użyć przycisków jednokrotnego wyboru.
Jeśli lista opcji do wyboru jest obszerna (np. 50 stanów USA lub około 200 krajów), do listy wyboru trzeba dodać filtrowanie. W przeciwnym razie użytkownik będzie musiał przewijać długą listę, aby znaleźć odpowiednią opcję.
More Articles
Grzech nr 7: Ignorowanie tego, kim są użytkownicy i czego chcą
Na koniec największy grzech ze wszystkich: stworzenie nowego produktu z projektem UX, który nie odpowiada potrzebom i zainteresowaniom użytkowników. To prosty przepis na porażkę.
Zrób to tak
Dobry proces projektowania produktu zawsze zaczyna się od badań użytkowników. Jeśli nie wiesz, kim są Twoi użytkownicy i czego potrzebują, bez względu na to, jak piękny interfejs użytkownika stworzysz, prawie na pewno otrzymasz źle zaprojektowany produkt.
Wiem, że badania użytkowników nie są łatwym zadaniem. W końcu firmie Apple zajęło lata testów z użytkownikami osiągnięcie wyjątkowego poziomu użyteczności zarówno w zakresie wzornictwa przemysłowego, jak i doświadczenia użytkownika iPhone’a. Jednak uwierz mi — to zdecydowanie najważniejsze działanie, jakie możesz podjąć, aby zapewnić sukces swojego produktu.
Naprawdę łatwo jest uniknąć błędów w projektowaniu
Jeśli zajmujesz się tworzeniem stron internetowych, masz lepszą pozycję wyjściową. Dlaczego? Ponieważ narzędzia do projektowania stron internetowych zwykle oferują szablony, które już pozwalają uniknąć niektórych wymienionych tutaj błędów. Jednak bez względu na to, czy jesteś startupem tworzącym produkty cyfrowe, czy przedsiębiorstwem budującym produkty fizyczne (takie jak klawiatury lub czujniki ruchu), uniknięcie złego projektu jest w rzeczywistości całkiem łatwe.
Dopóki proces tworzenia produktu koncentruje się na potrzebach i problemach użytkowników oraz korzystasz z odpowiedniego oprogramowania do projektowania produktów, będziesz w stanie uniknąć poważnych błędów projektowych i nie dopuścić do powstania źle zaprojektowanego produktu (jest to również jedna z wielu zalet oprogramowania do projektowania wykorzystującego sztuczną inteligencję).
Mam nadzieję, że te przykłady poprawiły Twoje samopoczucie związane z własnymi produktami albo przynajmniej wywołały uśmiech. Aby poznać więcej wskazówek dotyczących UX i innych artykułów dla osób zajmujących się produktami, koniecznie zapisz się do naszego newslettera!
