Estetyka vs funkcjonalność, czyli jakich błędów unikać przy projektowaniu UX/UI aplikacji

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
Jan UI Designer

Jan Kosek

Projektant UX/UI, od 2 lat w Holdapp. Tworząc użytkowe designy, kieruje się przede wszystkim potrzebami użytkownika końcowego. Po godzinach oddaje się pracy artystycznej w drewnie lub klasycznie – na kartce papieru.

Dowiedz się więcej

5 mitów i faktów na temat MVP. Kiedy warto zbudować Minimum Viable Product?

Wszyscy radzą, żeby zacząć projekt od stworzenia MVP, ale nie jesteś pewien, czy to konieczne w przypadku Twojego biznesu? Zanim podejmiesz ostateczną dezycję, warto przyjrzeć się kilku popularnym założeniom na temat MVP. Dzięki temu dowiesz się, co naprawdę wiąże się z budową Minimum Viable Product i będziesz mieć lepsze pojęcie o tym, jakie daje to korzyści.

Przeczytaj

Wycena projektu

Opowiedz nam o swoim projekcie i napisz, jak możemy Ci pomóc.

Dlaczego warto rozwijać z nami projekty?

Logo Mobile Trends Awards

Mobile Trends Awards 2021

Wygrana w kategorii
ŻYCIE CODZIENNE

Nagroda Legalnych Bukmacherów

Nagroda Legalnych Bukmacherów 2019

Najlepsza aplikacja mobilna

Mobile Trends Awards logo

Mobile Trends Awards 2023

Wygrana w kategorii
MCOMMERCE ROZWÓJ

23

opinie klientów

Clutch logo