Nie 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?
-
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...
-
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.
-
Mało miejsca między przyciskami - przez to użytkownik może przypadkiem nacisnąć przycisk "Potwierdzam", chcąc wybrać opcję "Rezygnuję".
-
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ę.
-
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...
-
Zmienić etykiety na przyciskach. "Anuluj transakcję" / "Rezygnuj z płatności" / "Nie, rezygnuj" i "Potwierdź płatność" / "Zapłać" są jaśniejsze.
-
Wrócić do prawidłowej hierarchii przycisków.
-
Przeprowadzić testy z użytkownikami.
-
Przeprowadzić testy na różnych urządzeniach i różnych typach kont, by ujednolicić interfejs.
-
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.
#ux #userexperience #uxwriting #mbank #bekazmbanku
A tu zrzucik z konta firmowego. Fajen, nie?
@Wrzoo jak robisz przelew na kwotę ujemną to znaczy, że dostajesz pieniądze od odbiorcy? ( ͡° ͜ʖ ͡°)
@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 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).
@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 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.
@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 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ł
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
Of kiedy to zmienili anulowalem sobie z 5 transakcji
@Cybulion i bardzo dobrze, bo tak to byś męczył dupę infolinii o wycofanie bo kliknąłeś w nie to co trzeba (☞ ゚ ∀ ゚)☞
@VonTrupka joooo
@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.
@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
@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 A weź ;_;
@Wrzoo codziennie na klatę biorę te wyzwanie ale chyba odpuszczę :)
Będę nie wiem, kurde noże znów sprzedawał.
@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 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.
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?
@slawek-borowy na iOSie bezproblemowo je robię, choć kojarzę, że kiedyś można było wyłączyć blokowanie wykonywania zrzutów ekranu gdzieś w ustawieniach... Możliwe więc, że to w którymś momencie wyłączyłam i dzięki temu ma tę moc.
@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
@slawek-borowy jak to mówi mój mąż, "raz na rok i kura pierdnie"
@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 ¯\_(ツ)_/¯
@Wrzoo Dajesz. Korciło mnie parę lat temu pójście w UX/UI, bo co raz więcej interfejsów jest chujowe, ale szybko odkryłem że ci co to robią to często uprawiają pierdolety i papierologię, zniechęciłem się.
@Opornik Praca jest megaciekawa, ale trzeba być gotowym na zderzenie z betonem.
@Wrzoo Nie wiem, dla mnie robienie interfejsów bez żadnej znajomości chociaż html/css jest dziwne, ale ja stary dziad jestem. Bawiłem się kiedyś Figmą. Może kiedyś jeszcze spróbuję.
@Opornik zrobienie czegoś w 2h jest proste
udokumentowanie dlaczego tak, to 2 dni papierologii
jebłem tym bardzo szybko, choć nie poszedłem zawodowo w projektowanie interfejsów aplikacji
@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
@roadie O, też mi się zdarza chodzić na taką siłownię. U mnie to Tonezone, nie ogarniam tych ich zamków elektronicznych bez instrukcji xD
@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...
@lipa13 Dzięki! Fajnie byłoby bardziej zgłębić temat apek bankowych, bo tu dobry UX ma ogromne znaczenie, tylko jak to zrobić bez zakładania dziesiątek kont?
@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".
@Opornik o, to będę musiała sprawdzić przy najbliższej płatności, bo nie kojarzę
@Opornik możesz szczegóły podać bo też nie kojarzę o co chodzi?
@wonsz No normalnie, dymek z informacją że kod został skopiowany do schowka zasłania przez kilka sekund guzik "potwierdź".
@Wrzoo @wonsz editt: właśnie wysłałem przelew, nie zdążyłem zapamiętać co tam pierdoliło, ale zasłaniało guzik potwierdź, tak jak przy Bliku.
@Opornik a to nie wiem, ja klikam skopiuj kod, przełączam się do aplikacji w której mam zapłacić, wklejam kod, rozpoczynam płatność, czekam na powiadomienie o nowej płatności do zatwierdzenia, po kliknięciu w które przenosi mnie do apki mbanku gdzie klikam potwierdź i żadnych dymków nie ma.
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
@macgajster xD spokojnie, planuję czepiać się tylko anonimowych gigantów
@Wrzoo jednak kusi, bo to jest (dla mnie) top kek, choć podczas pierwszego kontaktu może być strasznie
Podumam i w razie co klepnę na pw
@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.....
@eloyard Słuszna uwaga, w sumie też z uwagi na screen readery. Dzięki! Wiedziałam, że gdzieś popełnię błąd.
@Wrzoo kombinujesz iść w to zawodowo, czy tylko się bawisz?
@Opornik Robię to na co dzień od ponad 3 lat. Głównie pracuję z angielskim microcopy, polski szlifuję i się dokształcam w tym kierunku.
@Opornik W dużej mierze tak.
@Opornik Also, na tej stronie jest sporo microcopy, które jest obecnie uznawane za nieUXowe.
@Wrzoo ludzie to nazwę na wszystko wymyślą. Nawet nie wiedziałem że it's a "thing".
@eloyard o tym „nie, rezygnuj” właśnie mialam sama pisać, bo dość, no, duża wpadka z czytelnością (mamy przecinek i jednocześnie zaprzeczenie) i intencjonalnością [prosi się o wyjaśnienie, bo mamy implikację „nie, rezygnuj (z czego?), więc znowu trzeba to rozegrać komunikatem nad przyciskiem], więc dobrze, że zwróciłeś na to uwagę
Właśnie odkad wprowadzili ta zmiane nie moge sie przyzwyczaic i zawsze się zawieszam nad tym menu.
@Wrzoo potwierdzam powinno być jeszcze na górze
@GazelkaFarelka W sumie, to zależy od ich logiki. W teorii nie chcą sugerować, które działanie jest domyślnym, a w praktyce i tak sugerują przez ten porządek
To jeszcze chuj 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!
@AndrzejZupa
“Twój telefon nie wspiera tej wersji!”
Standard. Miałem tak z Allegro i paroma innymi.
Kupuj nowy telefon brudny goju, no czemu nie kupujesz, chuj nas obchodzi że aktualny świetnie działa!
@Opornik w AppStore upgrade aplikacji nie jest widoczny jak nie wspiera Twojego telefonu. Tutaj był dostępny a po instalacji powiedział “eeee…jednak nie!” xD
@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
@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
@DrGurgul obecnie mBank ma tak, że po naciśnięciu "Potwierdź" biometria jest wyzwalana automatycznie. I wówczas, jeśli ktoś ma face ID, to nie miałby nawet chwili na zrezygnowanie.
@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
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 🤷
@AureliaNova No średnio logiczne no.
@AureliaNova jestem szczerze przekonany, że to celowo tak jest ułożone.
Mniej celowe jest to, że na moim ekranie przycisk "Potwierdzam" jest poniżej ekranu, muszę scrollować żeby do niego dotrzeć
O, widzę koleżanka po fachu
@ismenka Dzięki
@Wrzoo oj tam, podobno AI mnie zastąpi, bo w końcu co to jest klepać jakieś literki
@ismenka nie dość, że AI produkuje teraz treści, to jeszcze tylko ono je czyta
@Wrzoo kurrrna ile razy przez to anulowalem przelew to nie zliczę, cieszę się że nie tylko ja na to kurwię.
@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.
@MamaParrot
z tej strony UX
Czyli kto?
@Opornik skrótowo dla UX designer
@MamaParrot moje szczęście, że przeczytałem oddolne komentarze, bo chciałem to samo napisać
Każda jedna błędnie (czyt. pochopnie) zatwierdzona decyzja przekłada się na realne koszty obsługi i proces odwrócenia jest żmudny, czasochłonny a w takich instytucjach wielopoziomowy.
mnie osobiście cieszy rezygnacja z domyślnej kolorystyki, która prowadziła za rąsię.
Bo trudniej było mi przeczytać etykiety na przyciskach.
Nie chcę przy bliku dodawać odbiorcy płatności do zaufanych, a tej opcji nie można (przynajmniej w mbanku) całkowicie wyłączyć aby nie pojawiała się przy płatnościach B.
Aż się ciśnie na usta "my klikali w zielone i po chwili nam wyczyściło konto".
słyszała @Wrzoo ?
Słupki statystyk błędnych zatwierdzeń i ilości feedbacku na który trze...hmm...należy reagować są bezlitosne.
Już i tak we wszystkich webaplikacjach, w szczególności tych wrażliwych, ułatwienia poszły za daleko.
Potem człowiek przeciera oczy ze zdumienia jak gdzieś wypłyną statystyki ukazujące scam i przekręty, w tym jak duży jest odsetek udanych "ataków", a wszystko to zatwierdzane głupotą użytkowników.
@VonTrupka ja się z założeniem i przyczyną tych decyzji w pełni zgadzam. Nie zgadzam się z ich wykonaniem, bo jest gowniane.
@Wrzoo dla mnie personalnie zmiana na lepsze
ogranicza bezmyślne klikanie, ułatwia wybór przez zwiększoną czytelność
wszystkie knefle muszą się zmieścić na widocznym ekranie, bez żadnego scrollowania
jest czas na zatwierdzenie, to nie telefoniczny konkurs radiowy
@VonTrupka exactly, problemy biznesowe rozwiązywane być muszą, bez tego projektanci nie mają pracy 🙈 @Wrzoo to rozwiązanie nie jest moim zdaniem gówniane, a gdyby którykolwiek przycisk stał się pierwszorzędowy to już byśmy zmienili zachowanie użytkowników w stronę, której nie chcemy.
A mBank ten co zapomniał wrzucić CSS
apka (i serwis transakcyjny) mBanku to kopalnia kontentu do tego tagu
Nowy ekran weryfikacji dwuetapowej przy logowaniu do ZUS - po wpisaniu/wklejeniu kodu weryfikacji odruchowo klikam pierwszy przycisk z góry, aby przejść dalej... i chuj ¯\_(ツ)_/¯
@Wrzoo Jakbyś chciała małe zlecenie to dawaj znaka:)
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
A przeciez 20 lat temu taki piekny i prosty interfejs miał mbank
@mitsue niestety przez te 20 lat nic się nie zmieniło
@owczareknietrzymryjski zmieniło się i to bardzo. Niestety na gorsze
@Wrzoo nienienienie i jeszcze raz nie. Ciocia @Wrzoo zawodowo zajmuje się nawadnianiem innych, proszę nie podszywać się ew. uwiarygodnić wrzucając mema o piciu.
właśnie mi się pokazał ten wpis na linkedin ( ͡° ͜ʖ ͡°)
@mortt Kurde, przyponks
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
Zaloguj się aby komentować