code

UX Design - przewodnik dla programistów

UX Design - Co to jest?

User Experience Design to projektowanie doświadczeń użytkownika, czyli dbanie o to, aby interakcja z produktem dostarczała użytkownikom pozytywnych doświadczeń. Termin ten został po raz pierwszy użyty przez Dona Normana, który pracując w Apple Computers, nadał sobie tytuł „Architekta User Experience”. Korzystanie z aplikacji czy strony internetowej powinno sprawiać przyjemność i dawać satysfakcję na tyle, aby użytkownik chciał po raz kolejny sięgnąć po nasz produkt oraz polecić go innym.

UX Design - jak sama nazwa wskazuje, koncentruje się na użytkowniku, bo to właśnie on decyduje o sukcesie naszego projektu. Obecnie użytkownicy mają wysokie wymagania wobec produktów cyfrowych. Jeśli napotkają na trudności podczas korzystania z naszego produktu, to istnieje duże prawdopodobieństwo, że przeciętny użytkownik go wyłączy i już nigdy nie wróci. Dlatego tak istotne jest włączenie elementów UX Designu do procesu projektowego - minimalizacja ryzyka, że użytkownik nie odnajdzie się w naszej aplikacji i pójdzie do konkurencji.

Powiecie - dobrze, ale co ja jako software developer mam z tym wspólnego? W jaki sposób w codziennej pracy mogę wykorzystać UX Design?

Tak naprawdę każdy z nas ma na co dzień do czynienia z UX Designem, tylko o tym nie wie. Najlepiej zobrazuje to przykład: przestawienie czajnika elektrycznego bliżej szafki z herbatą, aby przygotowywanie napoju było łatwiejsze i szybsze. To właśnie UX – dostosowanie „produktu” do potrzeb użytkowników, którymi jesteśmy my sami.

UX Design - przewodnik dla programistów

Podczas pracy nad produktem cyfrowym powinniśmy myśleć o osobach, które będą z projektowanego rozwiązania korzystać. Nie jest to łatwe, bo tworząc nowy produkt możemy się jedynie domyślać kto to będzie i jakie ma oczekiwania wobec tego co tworzymy. Jest jednak kilka kwestii, na które możemy zwrócić uwagę aby poprawić UX naszego produktu i nauczyć się dobrych praktyk stosowanych w procesie projektowania wrażeń użytkowników.

1. Unikaj niezrozumiałych komunikatów

Użytkownik musi czuć się pewnie korzystając z naszego produktu. Dlatego ważne jest zaprojektowanie tekstów w taki sposób żeby nie było wątpliwości w jaki sposób korzystać z danej funkcjonalności. Każdy zawiły komunikat czy niefortunnie zadane pytanie sprawią, że użytkownik traci czas na zastanawianie się, co właściwie powinien zrobić. Poza tym traci też pewność siebie i zaufanie do aplikacji.

img1 (1).png

Po lewej przykład złego komunikatu – użytkownik może przez przypadek anulować subskrypcję myśląc, że Cancel zamknie modal, a nie usunie subskrypcję. Po prawej wersja poprawiona – teraz nie ma wątpliwości, za co każdy z przycisków odpowiada.

Mając na co dzień do czynienia z produktem, który tworzymy bardzo łatwo zapomnieć o tym, że osoba korzystająca z naszego produktu może nie zrozumieć wyświetlonego komunikatu. Gdy użytkownik nie będzie wiedział jak poprawić błąd w formularzu albo dlaczego nie udało mu się zalogować jest duża szansa, że nie będzie więcej chciał korzystać z naszej aplikacji.

img2 (1).png

Dla użytkownika komunikat Specified date is incorrect jest niezrozumiały, zwłaszcza że format daty wydaje się poprawny. Nie ma informacji na czym polega błąd. Zmiana tekstu na Date occurs in the past sprawia, że użytkownik od razu wie co powinien poprawić.

2. Intuicyjne przyciski

Każdy przycisk w aplikacji powinien być zaprojektowany w taki sposób, aby od razu było wiadomo czy da się w niego kliknąć czy nie. O ile na desktopie można posiłkować się zmianą kursora na pointer, to w aplikacjach mobilnych nie jest to możliwe.

img3 (1) (1) (1) (1).png

Na lewym designie użytkownik może nie mieć pewności czy Add to cart jest klikalne i może próbować znaleźć inny sposób na dodanie produktu do koszyka. Zmiana styli przycisku sprawia, że nie powinno już być wątpliwości.

img4 (1).png

Przycisk „back” na lewym designie sprawia wrażenie wyłączonego, niemożliwego do kliknięcia – szarość kojarzy się z buttonami disabled. Lekka zmiana styli a design od razu staje się czytelniejszy.

3. Uprość design

Projektuj tak, aby jak najbardziej ułatwić użytkownikowi korzystanie z aplikacji. Pamiętaj, że nie projektujesz dla siebie a dla użytkownika, który będzie miał kontakt z twoim produktem po raz pierwszy (i miejmy nadzieję że nie ostatni).

img5 (1).png

Zamień select na radio buttony gdy do wyboru jest niewiele opcji (2-4) – bowiem jest to wygodniejsze dla użytkownika. Poza tym pozwala na szybsze podjęcie decyzji gdy od razu wiadomo co mamy do wyboru.

img6 (1).png

Zrezygnuj z placeholderów, bo przestają być użyteczne w momencie gdy użytkownik zaczyna pisać. Zamiast nich dodaj informacje wyświetlające się pod inputem, dostępne dla usera cały czas.

Niejasne komunikaty, źle zaprojektowane przyciski i skomplikowane layouty to doskonały przepis na produkt, którego nikt nie będzie chciał używać. Ludzie śmieją się ze stron Web 1.0, bo tam UX po prostu nie istnieje. W Web 2.0 zaczął się pojawiać, a obecnie staje się standardem w projektach. Programiści, którzy pomijają UX w swoich projektach, zostaną po prostu w tyle.

software developer oferty pracy

avatar
Anna Borowska
05/04/2022
ebook