
Wpis użytkownika Wrzoo w UX / UI / WebDesign
WrzooMistrz
162piorunówNie wiem, czy ktoś jest zainteresowany takimi treściami, ale... czemu nie? Chciałabym pokazać Wam raz na jakiś czas UX-owe faile, które frustrują w aplikacjach, a które, no... da się poprawić, jak się trochę pomyśli.
Zapraszam więc na nieregularną serię wpisów pt. "UX płakał, jak używał"
Gwoli wyjaśnienia, UX to skrót od User Experience - doświadczenia użytkownika.
Jest to odnoga projektowania i szeroko pojętego designu, która skupia się nie tyle na wizualnej jego części, ale części użytkowej. Chodzi o to, by użytkownik kumał, co się dzieje w interfejsie aplikacji, co się stanie, gdy naciśnie jakiś przycisk, jaka jest ścieżka do wykonania danego działania (np. gdzie kliknąć i co zrobić, żeby kupić sobie nowe cottonworldy na internetowym bazarze).
W dobrym UXie chodzi o minimalizowanie tzw. cognitive load, czyli obciążenia poznawczego. Innymi słowy, chcemy, żeby użytkownik nie musiał myśleć.
...no i przechodzimy do dzisiejszego bohatera, czyli mBanku.
Mam nieszczęście używać go na co dzień, i za każdym razem moje serduszko płacze, gdy ich dział UX "ulepsza" ekran potwierdzania płatności. Może patrząc na ten zrzut ekranu już powoli intuicyjnie czujecie, że coś tu nie pykło.
Co się dzieje złego na tym ekranie?
1. Mamy dwa przyciski drugiego stopnia - rezygnuję i potwierdzam. Normalna hierarchia zakłada, że jest jakaś akcja domyślna i akcja drugorzędowa. Akcją domyślną na ekranie potwierdzania płatności powinno być, no cóż... potwierdzenie płatności. Akcją drugorzędową - rezygnacja z płatności. Ale mBank z nie do końca zrozumiałego dla mnie powodu zdecydował się oba te przyciski postawić na równi jako przyciski drugorzędowe. Wprowadzając więcej konfuzji, bo użytkownik musi wykonać więcej myślonka, żeby zrozumieć, który przycisk co zrobi. I to sprowadza nas do...
2. Wyjaśnienie, co robi przycisk, który powinien być zrozumiały sam z siebie - dobry UX to między innymi dobry UX writing - takie tworzenie microcopy (treści, etykiet przycisków itp.) w interfejsie, by nie pozostawiały wątpliwości, co robią. Dodawanie okienka z wyjaśnieniem, które na domiar złego znajduje się bezpośrednio nad przyciskiem "Rezygnuję", zmusza użytkownika do niepotrzebnego wysiłku.
3. Mało miejsca między przyciskami - przez to użytkownik może przypadkiem nacisnąć przycisk "Potwierdzam", chcąc wybrać opcję "Rezygnuję".
4. Przycisk "Potwierdzam" czasem się chowa - na niektórych urządzeniach oraz typach kont (np. na koncie firmowym) przycisk "Potwierdzam" chowa się w dolnej części ekranu. Użytkownik musi przescrollować ekran, żeby zatwierdzić operację. 😒
5. Po przyciśnięciu "Potwierdzam" trzeba jeszcze... potwierdzić - biometrią albo PINem. Tak więc etykieta jest zła, tory są złe, wszystko jest złe.
Nie zawsze było tak dziwnie. Wcześniej na tym ekranie mogliśmy znaleźć pierwszorzędową akcję "Potwierdzam" i drugorzędową "Rezygnuję". Jednak UXowcy mBanku z nieznanych, niestety, przyczyn, zdecydowali się wprowadzić widoczne obecnie zmiany.
A wystarczyłoby...
1. Zmienić etykiety na przyciskach. "Anuluj transakcję" / "Rezygnuj z płatności" / "Nie, rezygnuj" i "Potwierdź płatność" / "Zapłać" są jaśniejsze.
2. Wrócić do prawidłowej hierarchii przycisków.
3. Przeprowadzić testy z użytkownikami.
4. Przeprowadzić testy na różnych urządzeniach i różnych typach kont, by ujednolicić interfejs.
5. Pomyśleć.
No, to wylałam swoją frustrację (bobrze, ile tego wyszło), mogę wracać do roboty.
--
A tak w ogóle, to cześć - jestem Wrzoo i zawodowo zajmuję się UX Writingiem. Jeśli dział User Experience w Twojej firmie nie domaga językowo, to daj znać, bo fajnie byłoby zmienić robotę (jeśli czyta to ktoś z mBanku, to tym bardziej). Pracuję głównie z językiem angielskim, ale też i polskim.
Komentarze (89)
Wczoraj córce obiadów nie wykupiłem, bo niechcący kliknąłem rezygnuję i przypomniał mi się Twój wpis i zacząłem żonie tłumaczyć, że to jest do bani (żona w veevie podobne rzeczy robi) i przyznała racje, że coś jest nie teges iii koniec końców córka w przedszkolu bez obiadu. Przedszkolanka musiała na szybko kupić pierogi XD
właśnie mi się pokazał ten wpis na linkedin ( ͡° ͜ʖ ͡°)
A przeciez 20 lat temu taki piekny i prosty interfejs miał mbank 😉
Problemy interfejsu leżą na samym końcu drogi eskalacji a już problemy które nie są problemem czekają na masę krytyczna takich problemow i albo są zamykane albo ktoś w końcu się za to zabierze
@Wrzoo Jakbyś chciała małe zlecenie to dawaj znaka:)
Nowy ekran weryfikacji dwuetapowej przy logowaniu do ZUS - po wpisaniu/wklejeniu kodu weryfikacji odruchowo klikam pierwszy przycisk z góry, aby przejść dalej... i c⁎⁎j ¯\\(ツ)/¯
apka (i serwis transakcyjny) mBanku to kopalnia kontentu do tego tagu :smiley:
A mBank ten co zapomniał wrzucić CSS
@Wrzoo dzień dobry, z tej strony UX i bardzo prawodopodobne, że zmiany o których mówisz zostały wprowadzone na podstawie tego, o czym nie wiemy.
To, czego nauczyło mnie 5 lat pracy w zawodzie + studia z nauk kognitywnych + mój mentor, to że każdy projektant, osoba decyzyjna buduje produkty wg. ich najlepszej wiedzy.
Moja hipoteza jest taka, że zespół odnotowywał dużą ilość błędnie zatwierdzonych transakcji, a odkręcanie takich rzeczy jest kosztowne. Więc ruszyła machina rozwiązywania problemów.
Projekt wskazuje na to, że projektanci chcą zmuszać użytkowników do myślenia. UX nie zawsze polega na usuwaniu kłód spod nóg, a czasem chcemy dodatkowych kroków - szczególnie, jeśli chodzi o bezpieczeństwo i płatności.
Krótko mówiąc wygląda na to, że mBank woli 5 błędnych rezygnacji, niż 1 błędne zatwierdzenie.
@Wrzoo kurrrna ile razy przez to anulowalem przelew to nie zliczę, cieszę się że nie tylko ja na to kurwię.
O, widzę koleżanka po fachu :grinning: Z tym że ja obecnie bardziej creative copywriter, a UX writingien wspomagam tylko współpracujące agencje software jako zewnętrzny specjalista :grinning: Tag dodaje do obserwowanych. Pisz wincyj.
To może być celowy feature - żeby była mniejsza szansa na automatyczne klikniecie "potwierdzam", bo przycisk u góry, a ty chcesz wkurzony odklikac błąd. Coś jak bashowe "napisz Potwierdzam, bo imho robisz poważną rzecz".
No ale średnio logiczne, bo i tak potwierdzasz biometryczne, więc jest drugi szczebelek weryfikacji, a poza tym i tak trzeba wcześniej wybrać, że chcesz zapłacić to 50 zł za coś, więc mała szansa, że będziesz żałować sekundę później 🤷
@Wrzoo świetny pomysł, jako frontendowca (ale bez dużego doświadczenia UXowego) też mnie zawsze triggerują chujowo zrobione stronki i UXowe gówna. Kontynuuj plis :smiley:
@Wrzoo
>Po przyciśnięciu "Potwierdzam" trzeba jeszcze... potwierdzić -
To w ogóle po co ten widok jest? Wystarczyłby sam ekran z potwierdzeniem biometrią lub pinem gdzie jest opcja anuluj...
Ja to jestem prosty inżynier ze wsi i tak bym właśnie zrobił, ale zauważam, że trend jest taki że teraz aplikacje mają wyglądać, a wygoda użytkowania i sama poprawność działania to jest tam gdzieś na końcu w hierarchii ważności
@Wrzoo Weż mi nie pokazuj tego okienka ostatnio przy zakupie z allegro kliknalem rezygnuj zamiast potwierdź. Tam jescze na samym poczatku pojawia się jakis wyszarzony komunikat który przeslania na chwile przycisk potwierdzam. Brandzlowałem się od nowa z platnościa przez to :confused: na pohybel mózgom z mbanku.
To jeszcze c⁎⁎j co tam się dzieje z UX…
Kiedyś wystawili update apki mobilnej po którym apka powiedziała, że “Twój telefon nie wspiera tej wersji!”🙃
Zostałem odcięty od bankowości mobilnej bez możliwości downgrade i jakiejkolwiek pomocy z mBank.
Na szczęście miałem kontakt do autorów aplikacji i dzięki znajomościom zgłosiłem problem - wystawili poprawkę po 2 dniach( ͡° ͜ʖ ͡°)
Fajny wpis, wrzucaj!
@Wrzoo potwierdzam powinno być jeszcze na górze
Właśnie odkad wprowadzili ta zmiane nie moge sie przyzwyczaic i zawsze się zawieszam nad tym menu.
@Wrzoo skoro mowa o czytelności, to a propos "Nie, rezygnuj" - na rany Chrystusa, nie używajcie w istotnych miejscach zwrotów które zmieniają znaczenie ze względu na to czy jest (jest zauważony) przecinek, czy nie.....
Podrzuciłbym stronę i główny program elektrokołchozu, ale wolałbym żebyś nie wrzucała i jednak przeżyła bez uszczerbku na zdrowiu to starcie 😉
@Wrzoo Jeszcze można by dodać że jak w apce płacisz blikiem, to prompt "kod skopiowano do schowka" przez kilka sekund zasłania przycisk "potwierdzam".
@Wrzoo Bardzo fajny wpis! Ogólnie na temat błednych UXów apek bankowych można by chyba doktorat napisać. Chyba wszystkie banki z których korzystam poszły w "cukierkowość" kosztem przejrzystości. Wiele akcji jest niejasnych aleee za to mam zaokrąglone brzegi przycisków i animowane ikonki...
@Wrzoo też mnie to wkurza. A co do pkt 5, z tego co kojarzę to da się ustawić odbiorcę jako "zaufanego" i wtedy nie trzeba potwierdzać pinem. Ale mogliby umożliwić potwierdzanie odciskiem palca zamiast pinem.
Ps ostatnio na basenie gdzie chodzę zrobili nowy system do szafek i zrobili takiego babola że musieli wywiesić instrukcje korzystania xD jak będę następnym razem to zrobię zdjęcie i podrzucę bo ciekawy temat
@Wrzoo Dajesz. Korciło mnie parę lat temu pójście w UX/UI, bo co raz więcej interfejsów jest ch⁎⁎⁎we, ale szybko odkryłem że ci co to robią to często uprawiają pierdolety i papierologię, zniechęciłem się.
mam takie same wrażenia, u mnie jeszcze wyskakuje jakiś komunikat pomiędzy tymi przyciskami (bodaj o wyborze domyślnego konta z którego płacę), co już zupełnie rozwala cały proces, ale nie udało mi się zrobić screena nigdy bo apka blokuje robienie screenów -_-
I tutaj pojawia się pytanie, jak zrobiłaś te screeny? :grinning:
@slawek-borowy afair wyłączenie nakładek HW w opcjach programatora włączało łatwiejsze wykradanie danych podejrzanemu oprogramowaniu 😉
poza tym, rzucasz ekran po kablu czy poprzez ADB na kompie i zrzucasz sshoty dowoli ¯\\(ツ)/¯
@slawek-borowy jak to mówi mój mąż, "raz na rok i kura pierdnie" :grinning:
@Wrzoo ciekawe, w Androidzie mam tylko komunikat, że sama aplikacja zablokowała robienie zrzutów i koniec. Po raz pierwszy czuję się bardziej ograniczony w dostępie do funkcji telefonu niż w iOS :grinning:
@Wrzoo lubiłem cię za namawianie do pijaństwa wody (świadomie bez polskich znaków :) ). Ale że używasz @mBank to się nie spodziewałem. A tym bardziej że się przyznasz :)
Ale po prawdzie trzeba przyznać że współpracuje z wieloma kontrahentami robiąc dla nich małe lub średnie zlecenia i wiem że pojęcie UX jest obce nie tylko z definicji ale i zrozumienia.
Klient dla którego robiłem dodatkowy moduł nie mógł zrozumieć że zmiana przycisków na bardziej intuicyjne ich położenie zmniejszy do zera ilość zażaleń na anulowanie płatności ale będzie kosztowało 500 zł. Odbywamy tę rozmowę z tym klientem co miesiąc. Wygląda zawsze tak samo.
Chyba zapytam chataGPT czy mu zrobi rozwiązanie do rozmowny z tym jednym klientem który co miesiąc płaci nam 1000 zł żebyśmy wyjaśniali problem zamiast go rozwiązać za jednorazowe 500.
Whhh, człowiek na elquatro bo chory to wylewny.
@Wrzoo chyba trudniej byłoby jakbyś była słynna pijaczką :)
Ja do baru się nie nadaje ale chętnie bym popracował w kuchni. Boję się tylko małej kasy i tego że mogę zobaczyć więcej niż wiem już teraz o zapleczu gastronomicznym. A to byłaby straszna katastrofa.
@Astro Ja bym może i wróciła do pracy w pubie, ale ciężko by było, będąc abstynentką. xD
@Wrzoo codziennie na klatę biorę te wyzwanie ale chyba odpuszczę :)
Będę nie wiem, kurde noże znów sprzedawał.
@Astro A weź ;_;
@Wrzoo ux nie przebije się do świadomości klienckiej jeszcze dość długo. Głównie dlatego że (pomijając opór klienta) wszyscy programiści, skryptowych i inni odpowiedzialni za wdrożenia nie widzą nic złego w podejściu „to tylko jedno kliknięcie więcej”. I to niestety się mnoży w rozwiązaniu bo przecież „jedno kliknięcie więcej” to nie kłopot.
Trochę to uprościłem bo nawet nie chce mi się pisać że oczywiście klient nie zawsze rozumie co ma kliknąć „ w to jedno więcej”. I tak się żyje na tej wsi cyfrowej
@Astro Chyba trzyma mnie już tylko to, że mam stary typ konta, które w praktyce nic mnie nie kosztuje, i to, że mój pracodawca też ma mBank, więc wypłata przychodzi natychmiast...
A, no i lenistwo związane z papierologią. 😉
Współczuję klienta. Wciąż się łudzę, że UX przebije się jakoś do mainstreamu, ale Twój przypadek ewidentnie potwierdza, że jeszcze daleka droga :confused:
Of kiedy to zmienili anulowalem sobie z 5 transakcji
@VonTrupka joooo
@Cybulion i bardzo dobrze, bo tak to byś męczył dupę infolinii o wycofanie bo kliknąłeś w nie to co trzeba (☞ ゚ ∀ ゚)☞
Oczekujesz za wiele, mBankowi ten system robi Dom Data, tam płacą tak gówniane pieniądze że na UXowca nigdy nie znajdą.
@djcrovley patrzę właśnie na ich stronę... Zrobiłam makietę landingu banku w Figmie w 2 godziny, i wygląda na bardziej dopracowaną, niż ich wizytówka 😅
@Wrzoo mnie też początkowo irytowała kolejność przycisków, ale dostrzegam w tym logikę: nie da się, jak to słusznie zauważasz, "bezmyślnie" zatwierdzić płatności, a to oznacza większe bezpieczeństwo, przynajmniej teoretycznie.
@MostlyRenegade mam dokładnie takie same odczucia i dzięki temu doceniam ux mbanku. @Wrzoo to ma sens, nie rób afery bo to nie bug tylko ficzer żebyś przypadkiem za szybko złodziejom nie przelał
@Dziwen ja nie teoretyzuję, tylko piszę o własnych doświadczeniach. Odruchowo chciałem naciskać górny przycisk, bo nie zwracałem uwagi na ich etykiety. To sprawiło, że teraz przy robieniu przelewów poświęcam temu więcej uwagi. Również brak innego wyróżnienia (np. kolorem) zmusza do większego wysiłku i uwagi.
Nie wiem, czy taki był zamysł projektanta, ale w moim przypadku tak to zadziałało. Czy jest to ergonomiczne i wygodne? No nie jest, ale można argumentować, że właśnie taki był cel.
@MostlyRenegade można to odwrócić, że ci, co chcą anulować, bo o czymś zapomnieli i chcą wrócić szybko do edycji, zatwierdzą to przez przypadek. Tu aż się prosi o różne kolory przycisków.
@MostlyRenegade dokładnie to miałem napisać - tyle się mówi o czytaniu tego co się zatwierdza w przypadku dokonywania płatności, to nie - zróbmy bezmyślne dalej-dalej-dalej? sam się na tym łapię że przy każdym przelewie czytam który przycisk jest do czego zanim kliknę.
@MostlyRenegade Ale z kolejnością nie mam problemu. Problem mam z etykietami przycisków, ich hierarchią (wyróżnieniem przycisku głównego i drugorzędnego), przestrzenią między przyciskami i umieszczeniem "wyjaśniacza" (który jest zbędny). :grinning: Układ góra-dół jest okej.
A tu zrzucik z konta firmowego. Fajen, nie? :upside_down_face: