Estetyka vs funkcjonalność, czyli jakich błędów unikać przy projektowaniu UX/UI aplikacji
Kilka lat temu dostałem w prezencie wałek do ciasta. Plastikowy, ze wskaźnikami grubości wałkowania i kilkoma innymi udogodnieniami. W teorii był bardzo funkcjonalny.
To złudzenie jednak prysło przy pierwszej próbie użycia. Wskaźniki obracały się razem z wałkiem i nie mogłem utrzymać stałej grubości ciasta, które na dodatek ciągle się do niego kleiło. Nawet mąka nie pomagała. Radość z pieczenia ustępowała miejsca frustracji.
Ale co wałek do ciasta ma wspólnego z aplikacjami? Ten przykład dobrze obrazuje problem przerostu formy nad treścią. Chociaż produkt jest ładny, nie jest użyteczny. Niestety często obserwuję ten problem w aplikacjach mobilnych.
Jak zachować balans pomiędzy użytecznością a estetyką? Sprawdź, czym się kierować, żeby unikać błędów przy projektowaniu interfejsu.
Ładny design – sposób na ukrycie błędów w UI
Wydaje się oczywiste, że ludzie powinni rezygnować z nieużytecznych aplikacji od razu po pierwszym uruchomieniu. Ale w rzeczywistości nie zawsze się tak dzieje. Czasem dają im drugą szansę. Czemu?
Odpowiedź tkwi w problemie poznawczym. Dobrze tłumaczy to prawo estetyki-użyteczności. To jedno z praw UX opisanych przez Jona Yablonskiego. Jego główne przesłanie brzmi: “Użytkownicy często postrzegają ładny design jako design bardziej funkcjonalny.”
To dlatego widząc ładny wałek, od razu założyłem, że jest wspaniały. Tak samo reagują użytkownicy, gdy mają do czynienia z miłymi dla oka aplikacjami.
Czemu nie potrafimy się oprzeć estetycznym produktom?
Lubimy otaczać się pięknymi przedmiotami. Często z góry zakładamy, że są praktyczne. Wiąże się to z naszą potrzebą obcowania ze sztuką w jej różnych formach. Estetyczny design wpływa też pozytywnie na odbiór produktu, jak piszą autorzy artykułu Effects of Design Aesthetics on the Perceived Value of a Product, Aiqin Shi, Faren Huo i Guanhua Hou. Według ich badań estetyka produktu wywołuje w ludziach emocje i sprawia m.in. że postrzegają go jako bardziej wartościowy. Ciekawe, prawda?
Ale to nie wszystko.
Jakby tego było mało, prawo estetyki-użyteczności głosi, że użytkownicy mają skłonność do przymykania oczu na drobne niedociągnięcia. Kiedy mają do czynienia z ładnym produktem, estetyka odciąga ich uwagę od pomniejszych problemów z użytecznością.
Brzmi cudownie, prawda? Małe niedociągnięcia schodzą na drugi plan. Nie jest to jednak aż tak korzystne jak się wydaje. To, że problemu nie widać, nie oznacza, że go nie ma. Z czasem użytkownicy będą odczuwać coraz większą frustrację. Wtedy porzucą Twoją aplikację na rzecz konkurencji, która zadbała i o funkcjonalność, i wygląd.
Dlatego musisz wiedzieć, jak zadbać o równowagę pomiędzy tymi dwoma elementami.
Przepis na ładny design
Słownik Języka Polskiego definiuje piękno jako “zespół cech, który sprawia, że coś się podoba”. Ale jak stwierdzić czy coś się podoba, czy nie?
Wykorzystaj wzorce, które w różnych kulturach na przestrzeni dziejów były zawsze postrzegane pozytywnie np. złotą proporcję, symetrię czy rytm (powtarzalność). Możesz je obserwować w naturze – patrząc na muszle wyrzucone na brzeg albo analizując przekrój tulipana.
Nie należy jednak zapominać o trendach. Przy projektowaniu interfejsu najlepiej łączyć ponadczasowe wzorce z aktualnymi standardami piękna.
Dzięki temu łatwiej Ci będzie tworzyć estetyczne projekty.
3 sytuacje, gdy poświęcamy użyteczność na rzecz estetyki i jak tego uniknąć
Nawet jeśli wydaje Ci się, że zawsze pamiętasz o zachowaniu równowagi w projekcie, w pewnych sytuacjach łatwo stracić czujność.
1. Gdy zapominasz o technologii i wpływa to na płynność działania aplikacji
Piękno nie zawsze idzie w parze z wydajnością. Często projektanci zapominają o tym, inspirując się ładnymi interfejsami znalezionymi na platformie Behance czy Dribbble. W rezultacie powstają projekty pełne komponentów, które spowalniają aplikację. Wpływa to na odbiór produktu i może zniechęcać użytkowników.
Rozwiązanie
Podczas projektowania warto mieć na uwadze docelowy system operacyjny. Dlatego zachęcam designerów do współpracy z deweloperami od samego początku projektu. Oni doskonale znają swoje środowisko programistyczne i mogą Ci powiedzieć, co spowolni aplikację. Dzięki ich pomocy będziesz w stanie wybrać takie rozwiązania, które nie będą miały dużego wpływu na szybkość aplikacji.
2. Gdy zamiast na prostotę i intuicyjność, stawiasz na oryginalność
Masz czasem poczucie, że wszystkie aplikacje eCommerce są do siebie podobne? Chcesz zaprojektować coś, czego inni nie mają? Takie myśli bywają kuszące. Zwłaszcza jeśli lubisz wykazywać się kreatywnością w projektach.
Rezultatem są jednak często problemy z intuicyjnością interfejsu. Trafiłeś kiedyś na menu aplikacji, które sprawiało, że znalezienie potrzebnego widoku zajmowało mnóstwo czasu? Albo na formularze, których nie dało się prawidłowo uzupełnić? A na layout i niejasne podpisy, które wprowadzały w błąd? Kiedy kreatywność wybija się na pierwszy plan, poczucie zagubienia rośnie, a z nim frustracja.
Rozwiązanie
Użytkownicy lubią schematy. One pozwalają im szybciej znajdować pożądane elementy. I choć pewna doza kreatywności jest niezbędna w projektowaniu UI, kluczem jest umiar. Co pomoże Ci zachować równowagę pomiędzy użytecznością a potrzebą oryginalności?
- Stwórz style guide z dokładnie rozpisanym użyciem fontów i rozmiarów tekstów oraz paletą kolorów. Przyda się też wyjaśnienie zasad, kiedy można stosować cienie. Dzięki temu łatwiej Ci będzie zachować spójność w projekcie. Do tego nauka obsługi interfejsu stanie się prostsza.
- Poświęć czas na research. Zobacz, jakie standardy obowiązują w aplikacjach podobnych do tej, którą sam projektujesz. Skup się na najważniejszych funkcjach. Rób zrzuty ekranu i twórz notatki. W ten sposób dowiesz się, kiedy warto opierać się na znanych wzorcach i gdzie można pozwolić sobie na większą dozę oryginalności.
- Przeanalizuj hierarchię elementów UI, żeby zobaczyć, czy nie powoduje zagubienia. Jeśli nie masz pewności, czy najważniejsze elementy są wyraźnie zaznaczone, wypisz je sobie z podziałem na rodzaje widoków. Następnie sprawdź czy elementy, które wskazałeś jako priorytetowe to te same, które są wyróżnione w projekcie i mają odpowiednie kolory lub rozmiary.
3. Gdy za bardzo skupiasz się na estetyce i zapominasz o dostępności
Twój design przyciąga wzrok, stosujesz popularne wzorce projektowe i na pierwszy rzut oka wszystko wygląda dobrze. Tylko czy na pewno interfejs będzie tak postrzegany przez wszystkich użytkowników? Chociaż brzmi to jak banał, to każdy jest inny i w projektowaniu aplikacji ma to duże znaczenie.
Wiesz, że problemy ze wzrokiem dotykają przynajmniej 2,2 mld ludzi na całym świecie? Takie dane podaje WHO. Mimo to, wiele aplikacji nie jest przystosowanych do ich potrzeb. Podobnie jest w przypadku m.in. osób zmagających się z problemami ze słuchem albo motoryką.
Rozwiązanie
Twoim zadaniem jest dbanie o dostępność, co umożliwi większej liczbie osób korzystanie z aplikacji. Opieraj się na wytycznych dotyczących dostępności i sprawdzaj, czy design aplikacji jest zgodny z zaleceniami dotyczącymi uniwersalności.
- Upewnij się, że odległości między poszczególnymi elementami są wystarczająco duże, by osoby o większych palcach niż Twoje mogły swobodnie wybierać je na ekranie.
- Zadbaj o kontrast – dzięki niemu rozróżnianie elementów stanie się łatwiejsze. Korzystaj z narzędzi do sprawdzania, czy zastosowany kontrast spełnia wymogi dostępności.
- Dodawaj teksty alternatywne do obrazów i zadbaj o transkrypcję i audiodeskrypcję w przypadku materiałów audio i/lub wideo.
- Pamiętaj, że gesty odgrywają ważną rolę w korzystaniu z aplikacji. Nie powinny być zbyt skomplikowane.
To tylko niektóre zalecenia dotyczące dostępności. Zapoznaj się z rekomendacjami dla Androida i iOS. Miej je na uwadze podczas pracy nad projektami.
Co dalej?
Jeśli nie masz pewności, czy Twój design jest funkcjonalny i przyjazny użytkownikowi, zapoznaj się z testami, które sprawdzają dostępność. Na wczesnym etapie możesz przeprowadzić również testy korytarzowe z pracownikami, którzy nie są bezpośrednio zaangażowani w rozwój tego projektu. To sposób, który nie wymaga dodatkowych nakładów finansowych i nie zabierze Ci wiele czasu.
Warto też pomyśleć o testach z użytkownikami lub testach A/B. Wybór metody zależy w dużej mierze od celów projektu, etapu prac, a także budżetu. Testy pozwolą Ci wykryć potencjalne problemy z użytecznością i sprawdzić, na ile intuicyjne są Twoje rozwiązania.
Dowiedz się więcej:
- Audyt UX – sposób na znalezienie odpowiedzi na problemy z użytecznością
- UX research i jego wpływ na projektowanie użytecznych aplikacji
- Etap Product Discovery, czyli odkrywanie potrzeb Twojej grupy docelowej