Bad Design vs. Good Design: 5 Examples We Can Learn From

Patrzenie na przykłady złego wzornictwa obok kontrprzykładów dobrego wzornictwa jest nie tylko zabawne, ale także pozwala wyciągnąć ważne wnioski dla projektantów. Podkreślają pułapki, których projektanci powinni unikać i pozwalają nam zrozumieć, jak przekładać teorie projektowe na rozwiązania, które sprawdzają się w realnym świecie. Jared Spool, amerykański pisarz, badacz i ekspert od użyteczności, powiedział kiedyś: „Dobry design, kiedy jest zrobiony dobrze, staje się niewidzialny. Dopiero gdy jest zrobiony źle, zauważamy go”. Przyjrzyjmy się więc pięciu przykładom ewidentnie złych projektów, rzućmy światło na to, jak dobry projekt sprawia, że to działa, i wydestylujmy kilka lekcji, abyśmy wszyscy mogli tworzyć wspaniałe i niewidzialne doświadczenia dla naszych użytkowników.

Przeciążenie informacyjne

Złe: Znaki parkingowe w Los Angeles

Znaki parkingowe w Los Angeles (LA) są uosobieniem przeciążenia informacyjnego od dziesięcioleci. Zawsze były notorycznie trudne do zrozumienia, ponieważ zasady ruchu drogowego są złożone, co skutkuje koniecznością przekazania wielu informacji na małej powierzchni.

Jak bardzo mylące są te znaki? Tradycyjnie, bardzo – spójrz na ten przykład z lat 2010:

Autor/posiadacz praw autorskich: Jorge Gonzalez. Warunki i licencja praw autorskich: CC BY-SA 2.0

Jak na znaki parkingowe w LA, ten przykład jest już całkiem prosty.

Wyobraź sobie, że jesteś kierowcą na tej drodze we wtorek rano o godzinie 9. Czy możesz zaparkować w tym miejscu? To, co brzmi jak proste pytanie, wymaga dużo umysłowego przetwarzania, aby na nie odpowiedzieć.

Jako projektanci często spotykamy się z sytuacjami, w których musimy zaprojektować wiele informacji, które mają być wyświetlane na małej przestrzeni. Znaki parkingowe w Los Angeles mogą być skrajnym przypadkiem, ale wiele razy projektowanie aplikacji mobilnych oznacza stawianie czoła tym samym problemom. Czy istnieje jakieś wyjście – zarówno dla znaków parkingowych, jak i projektantów w ogóle?

Dobrze: Nikki Sylianteng’s Parking Sign

Zaprojektowanie znaku tak, aby wyświetlał wszystkie informacje, a jednocześnie był łatwy do zrozumienia, brzmi jak zadanie niemożliwe do wykonania. Ale to jest dokładnie to, co zrobiła brooklyńska projektantka Nikki Sylianteng.

Autor/posiadacz praw autorskich: Nikki Sylianteng. Warunki i licencja praw autorskich: CC BY-NC-SA 4.0

Zaproponowany przez Nikki znak parkingowy został ostatecznie użyty w Los Angeles w ramach próbnego uruchomienia.

Częścią tego, dlaczego projekt Nikki1 działa dobrze, jest to, że jest skoncentrowany na użytkowniku: Nikki zdała sobie sprawę, że kierowcy chcą po prostu wiedzieć, czy mogą zaparkować w danym miejscu. Tak lub nie – to wszystko, czego potrzebują kierowcy, i to wszystko, co pokazuje znak parkingowy.

Jej projekt wykorzystał również elementy wizualne, a nie tekst, do przekazania informacji. Wynik jest niewiarygodnie intuicyjny: zielony dla OK, czerwony dla No Parking. Jest nawet zaprojektowany dla osób niewidomych, z paskami oznaczającymi Zakaz Parkowania.

Teraz, gdy spojrzysz na znak, będziesz wiedział, że we wtorek o 9 rano parkowanie jest zabronione. Paski pokazują, co jest czym na pierwszy rzut oka – proste.

Lessons Learnt: Best Practice

• Zrozum, czego potrzebują Twoi użytkownicy, a następnie projektuj w oparciu o to. Pomaga to ograniczyć przeładowanie informacjami.
• Masz dużo informacji do przekazania swoim użytkownikom? Spróbuj użyć wizualizacji zamiast tekstu. Dowiedz się więcej o wizualizacji danych tutaj.

Tajemnicza nawigacja po mięsie

Zła: LazorOffice.com

Określona w 1998 roku przez Vincenta Flandersa z Web Pages That Suck2, nawigacja Mystery Meat Navigation (MMN) odnosi się do przypadków, w których miejsce docelowe łącza nie jest widoczne, dopóki użytkownik go nie kliknie lub nie wskaże go kursorem. Termin „tajemnicze mięso” był odniesieniem do mięsa serwowanego w amerykańskich stołówkach szkolnych, które są tak przetworzone, że ich dokładny rodzaj nie jest już rozpoznawalny.

MMN jest zła, ponieważ zmniejsza odkrywalność elementów nawigacyjnych. To dodaje obciążenie poznawcze do użytkowników, ponieważ teraz muszą zgadywać, jak się poruszać lub co kliknięcie czegoś robi.

Choć większość MMN znajdują się w starszych witrynach, są one zaskakująco powszechne w nowoczesnych witrynach. Weźmy na przykład Lazor Office, firmę projektową, która tworzy domy prefabrykowane.

Autor/posiadacz praw autorskich:Lazor Office, LLC. Warunki i licencja praw autorskich: Fair Use

LazorOffice.com ma siatkę obrazów MMN na swojej stronie głównej. Jak widać, to tableau daje cenne niewiele wskazówek, gdzie iść. Zamiast tego, dziewięć obrazów po prostu siedzieć, pozostawiając niektóre z nas zastanawiać enigma, a nie interakcji z page.

Poniżej fałdy ich stronie głównej, siatka miniatur obrazów leżeć czeka. Czy można je kliknąć? Cóż, tak – jeśli przesuniesz kursor myszy nad obrazem, zmieni się on w wskaźnik. Ale co się dzieje, gdy użytkownik kliknie na obrazie?

„Kliknij, aby się dowiedzieć!” nigdy nie jest dobrym rozwiązaniem User Experience (UX). Szanse są takie, że Twoi użytkownicy porzucą nawigację i znajdą alternatywne rozwiązanie w witrynie konkurencji.

Dobrze: Karty kursów na stronie Interaction Design Foundation

Na szczęście problemy MMN są łatwe do rozwiązania. Kluczem jest świadomość, że trzeba wyraźnie oznaczyć linki. Wystarczy dodać „View project”, który pojawia się po najechaniu myszką, aby poprawić użyteczność powyższej strony Lazor Office.

Autor/posiadacz praw autorskich: Interaction Design Foundation ApS. Warunki i licencja praw autorskich: Fair Use

Nasze karty kursów są tak samo nietajemnicze jak linki.

W przypadku kart kursów Interaction Design Foundation, nie tylko mamy „View Course” na dole każdej karty, aby wskazać akcję, która nastąpi, ale mamy również stan hover z tekstem „Go to course”. Wiele stron internetowych stosuje podobną konwencję i Ty też powinieneś, aby zmaksymalizować użyteczność swojej witryny.

Lesson Learnt: Best Practice

Zawsze oznaczaj swoje linki! Nie chciałbyś jeść tajemniczego mięsa – podobnie, Twoi użytkownicy nie chcieliby klikać na tajemnicze linki.

Dodawanie tarcia do działań użytkownika

Zły: iFly50.com

Jako projektanci, powinniśmy dodawać tarcie do działań użytkownika z wielką ostrożnością, chyba że celem jest zniechęcenie użytkowników do wykonania tej czynności. Czasami jednak możemy nawet nieumyślnie dodać tarcie do działań użytkownika (głównie z powodów estetycznych lub nowatorskich), które skutkują szkodliwym UX.

Jednym z przykładów jest strona iFly50.com, stworzona z okazji rocznicy wydania magazynu iFly przez KLM. iFly 50 jest pionowo przewijaną stroną internetową prezentującą 50 miejsc podróży, a w niektórych miejscach (takich jak to poniżej), przycisk w pobliżu dna prosi użytkowników o kliknięcie i przytrzymanie przez kilka sekund, aby zobaczyć więcej zdjęć.

Autor/posiadacz praw autorskich: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Warunki i licencja praw autorskich: Fair Use

iFly 50 oczekuje od swoich użytkowników kliknięcia i przytrzymania przez kilka sekund za każdym razem, gdy chcą zobaczyć więcej zdjęć.

Dodanie kilku sekund tarcia do każdego działania może skutkować ogromnie gorszym UX. Wyobraź sobie, że zamiast kliknąć, aby załadować stronę natychmiast, musisz teraz kliknąć i przytrzymać przez dwie sekundy dla każdego linku, który kliknąłeś w przeglądarce. Po kilku kliknięciach i przytrzymaniach przestaniesz w ogóle korzystać z internetu.

Wielokrotnie my, projektanci, mamy tendencję do zachłyśnięcia się najnowszymi stylami interakcji lub działaniami, ale ważne jest, aby zawsze zachować ostrożność, gdy twój projekt może dodać tarcie do działań użytkownika. Przez większość czasu, wypróbowane i przetestowane konwencje (na przykład proste kliknięcia lub machnięcia) działają doskonale.

Dobrze: Elastic Scrolling on iOS

Co ciekawe, świadome dodawanie tarcia do działań użytkownika może zaowocować świetnym designem. Jednym z najbardziej popularnych wynalazków Apple w ich mobilnym systemie operacyjnym, iOS, jest stworzenie elastycznego przewijania, gdzie w pewnych sytuacjach (takich jak na końcu strony internetowej) przewijanie staje się coraz trudniejsze.

Autor/posiadacz praw autorskich: Interaction Design Foundation ApS. Warunki i licencja praw autorskich: Fair Use

W elastycznym przewijaniu w iOS, tarcie jest celowo dodawane w niektórych sytuacjach.

Można to zobaczyć w działaniu powyżej, gdzie zwiększone tarcie występuje, gdy użytkownik przewija do końca strony internetowej. Tarcie zostało dodane, aby wskazać sytuacje, w których przewijanie nie jest już dozwolone: a efektem jest intuicyjne doświadczenie.

Wyciągnięta lekcja: Najlepsza praktyka

Unikaj dodawania jakiegokolwiek rodzaju tarcia do działań użytkownika tak daleko, jak tylko możesz – i ostrożnie wdrażaj je, gdy nie masz alternatywy.

„Sprytny” projekt, który ignoruje użyteczność

Zły: Bolden.nl

Czasami sprytne projekty mogą być szkodliwe dla UX. Co czyni ten błąd bardziej niebezpiecznym, to fakt, że my projektanci uwielbiamy sprytne projekty. Są to małe graficzne cuda, które wywołują uśmiech na naszych twarzach. Niestety, większość ludzi nie jest projektantami. Co smutniejsze, nie wszystkie sprytne projekty są dobrymi projektami, zwłaszcza gdy stwarzają problemy z dostępnością, odkrywalnością lub użytecznością.

Przykładem może być strona holenderskiego studia projektowania strategicznego i rozwoju Bolden:

Autor/posiadacz praw autorskich: Bolden. Warunki i licencja praw autorskich: Fair Use

Czy potrafisz powiedzieć, co ich strona główna próbuje powiedzieć? Nie? Cóż, to dlatego, że musisz przesunąć kursor myszy do rogu strony, aby poprawnie zobaczyć wiadomości.

Autor/posiadacz praw autorskich: Bolden. Warunki i licencja praw autorskich: Fair Use

Czy to sprytny projekt? Tak, zdecydowanie. Ale czy jest to zły projekt? Absolutnie!

Jest to świetny przykład projektowania dla projektanta, a nie dla użytkownika: strona poważnie zmniejszyła czytelność swoich nagłówków w determinacji jej twórców, aby dostarczyć nowatorski projekt. Ktokolwiek to zaprojektował, pominął również tekst informujący użytkowników o tym, że powinni przesuwać myszkę do rogów, co oznacza, że odkrycie nagłówków zależy od przypadku. Co więcej, nawet gdy nagłówek zostanie ujawniony, kontrast między tekstem a tłem jest słaby, ponieważ wciąż widać nakładający się tekst. To wszystko składa się na stworzenie strony nieprzyjaznej dla użytkownika.

Dobra: CultivatedWit.com

Strona Cultivated Wit jest świetnym kontrprzykładem na to, że sprytny projekt nie musi nadwyrężać użyteczności.

Autor/posiadacz praw autorskich: Cultivated Wit. Warunki i licencja praw autorskich: Fair Use

Na stronie głównej Cultivated Wit wyświetlana jest ilustrowana sowa.

Na stronie głównej Cultivated Wit ilustracja sowy mruga, gdy przesuwa się nad nią mysz:

Autor/posiadacz praw autorskich: Cultivated Wit. Warunki i licencja praw autorskich: Fair Use

Niespodzianka! Sowa mruga do Ciebie, gdy kierujesz na nią kursor. Zauważ również mądrą alokację przestrzeni białej.

Kluczową różnicą jest to, że nie stanowi ona istotnej części strony, więc nie zmniejsza użyteczności, nawet jeśli użytkownik nie odkryje tego sprytnego elementu projektu.

Co więcej, mają one wyraźną strzałkę skierowaną w dół, aby zasugerować, że coś znajduje się pod fałdą. A kiedy przewiniesz w dół, zobaczysz to:

Autor/posiadacz praw autorskich: Cultivated Wit. Warunki i licencja praw autorskich: Fair Use

A strony internetowe mogą być mądre bez poświęcania UX.

Kopia (która jest czytelna i ma dobry kontrast) tworzy poczucie dowcipu – nie podobne do tego, co Bolden próbował osiągnąć – bez zmniejszania UX strony. Jedynym małym problemem jest tekst „Dołącz do naszego klubu e-mailowego”, który powinien być bardziej widoczny, ale biorąc pod uwagę całość, strona Cultivated Wit jest świetnym przykładem dostarczenia sprytnego projektu bez tworzenia słabego UX.

Lesson Learnt: Best Practice

Mądre projekty powinny być zawsze tak niezawodne, jak to tylko możliwe, i/lub testowane na rzeczywistych użytkownikach. Czasami, sprytne projekty mogą się zepsuć i zaszkodzić użyteczności.

Nadmierne animacje

Zły: PayPal Receipt Concept on Dribbble

Animacje są istotnym elementem projektowania interakcji, ale zawsze powinny służyć celowi. Nigdy nie powinny być robione dla samej animacji. Niestety, projektanci mają tendencję do romansowania z animacjami, częściowo dlatego, że animacje są tak zabawne w tworzeniu, że możemy nie wiedzieć, kiedy przestać.

Koncepcja animacji Vladyslava Tyzuna dla paragonu e-mailowego PayPal, zamieszczona na Dribbble, jest przykładem animacji zrobionej źle:

Autor/posiadacz praw autorskich: Vladyslav Tyzun. Warunki i licencja praw autorskich: Fair Use.

Animacja jest ładna, ale zbędna. W sumie, aby zobaczyć szczegóły transakcji, potrzeba aż 3,5 sekundy. Proste fade-in paragonu byłoby bardziej eleganckie, a ponieważ zajmuje mniej czasu, lepiej dla użytkownika, jak również.

Ten problem staje się niebezpieczny, gdy projektanci pozornie nie może uzyskać dość animacji. Od 2016 roku animacja Vladyslava otrzymałaby ponad 500 polubień i 8000 wyświetleń. To pokazuje błędne uznanie, jakie projektanci mają wobec animacji dla samej animacji. Posiadanie wglądu w tendencję projektanta do preferowania swoopingowych epopei nad bardziej bezpośrednimi reprezentacjami i wyłapywanie siebie, zanim poddasz się animacjom, zaoszczędzi Ci wiele czasu i zapobiegnie wielu bólom głowy. Pamiętaj, że użytkownicy wchodzą na strony w określonym celu – chcemy pokazać im to, czego szukają w krótkim czasie, a nie zatrzymywać ich w wielkiej wycieczce po galerii.

Dobrze: Stripe Checkout’s Animation

Gdy jednak robimy animację celowo, wyniki mogą być świetne. Spójrz na animację Stripe Checkout, gdy użytkownik otrzymuje kod weryfikacyjny:

Autor/posiadacz praw autorskich: Stripe, Inc. Warunki i licencja praw autorskich: Fair Use.

Stripe używa animacji, aby rzeczy wydawały się szybsze niż są: zapewnia użytkownikom aktualizacje (jak „Wysłane”), mimo że mogli jeszcze nie otrzymać SMS-a. Dzięki temu użytkownicy nie czują się sfrustrowani koniecznością czekania i zyskują pewność, że SMS jest już w drodze.

Rachel Nabors, zaproszony ekspert ds. animacji internetowych w W3C, sugeruje pięć zasad, o których należy pamiętać przy projektowaniu animacji3:

1. Animuj świadomie: przemyśl każdą animację, zanim ją stworzysz.
2. Potrzeba więcej niż 12 zasad: 12 zasad animacji Disneya sprawdza się w filmach, ale niekoniecznie w witrynach i aplikacjach.
3. Użyteczne i niezbędne, a potem piękne: estetyka powinna zajmować tylne miejsce w stosunku do UX.
4. Działaj cztery razy szybciej: dobre animacje nie rzucają się w oczy, co oznacza, że działają szybko.
5. Zainstaluj kill switch: dla dużych animacji, takich jak efekty parallex, stwórz przycisk opt-out.

Lesson Learnt: Best Practice

Zawsze rób animacje celowe: zbyt wiele może zabić UX produktu. Piękno musi ciągnąć swoją wagę i być funkcjonalne.

The Take Away

Czy patrzenie na przykłady złego wzornictwa nie jest zabawne? Na szczęście, jest to również pouczające. Oto najważniejsze lekcje i najlepsze praktyki z pięciu przykładów dobrych i złych projektów:

1. Zrozum, czego potrzebują Twoi użytkownicy, a następnie dostarcz im te informacje.
2. Jeśli masz dużo informacji do przekazania, spróbuj użyć wizualizacji zamiast tekstu.
3. Zawsze oznaczaj swoje łącza! Użytkownicy nie lubią tajemniczych łączy.
4. Unikaj dodawania jakichkolwiek utrudnień do działań użytkownika, chyba że mają one na celu zniechęcenie go do działania.
5. Testuj swoje sprytne projekty i włączaj je ostrożnie.
6. Animacje są jak przekleństwa. Jeśli jej nadużywasz, traci cały swój wpływ.4

Następnym razem, gdy będziesz się marszczyć na przykład złego projektu, zatrzymaj się, aby pomyśleć: zrozum, dlaczego projekt zawiódł, znajdź przykłady projektów, które zrobiły to dobrze, i zanotuj lekcję, której się nauczyłeś. A potem podziel się miłością: podziel się swoją lekcją z innymi projektantami na naszym forum dyskusyjnym!

.