Skocz do linków, Skocz do treści

Karuzelą czy akordeonem? O efektywnym wyborze wzorców projektowych

16 lipca 2012 15:01. Autor: Robert Drózd. 3 komentarze

Jednym z ulubionych ostatnio chłopców do bicia pod względem interfejsu stał się bank Alior Sync.

I całkowicie zasłużenie. Liczba i charakter błędów użyteczności, są wręcz podręcznikowe – i mogłyby się przydać na kursach dla młodych adeptów projektowania. Kordian Klecha na swoim odświeżonym blogu przeanalizował kilka z tych błędów.

Chciałem zwrócić uwagę na jeden element. Na stronie przelewu bank stosuje znany wzorzec akordeonu.

Akordeon z przelewem

Wzorzec znany – ale nie ze stron banków. W prawie każdym banku tradycyjny formularz przelewu zajmuje po prostu jeden ekran.

Formularz przelewu w mbanku

Banki formularze te starają się optymalizować – w powyższym przykładzie mBanku ukryto dodatkowe dane odbiorcy (ulica i miasto), których nie trzeba podawać. Ale najczęściej układ jest bardzo podobny – różnice w wyborze konkretnych pól i czasami w kolejności.

Ale akordeon? Kordian podsumowuje to rozwiązanie następująco:

Wprowadzić do schematu interakcji co najmniej kilka zupełnie zbędnych kliknięć i zagmatwać cały proces tak, żeby ustalenie na którym właściwie znajdujemy się etapie wymagało zastanowienia ? wydawałoby się, że takich rzeczy nie można zrobić przypadkiem. Czyli dywersja.

Dlaczego tak się stało? Kto wymyślił akordeon do takiego procesu?

Akordeon to interfejs w którym w jednej chwili widoczny jest tylko jeden element. Używa się ich najczęściej do schowania nadmiarowych elementów nawigacji, choć w książce „Magia interfejsu” (s. 131) możemy zobaczyć przykład zastosowania go do wielokrokowych formularzy. Tutaj – definiowanie ustawień kampanii reklamowej.

Akordeon w Magii Interfejsu

Magik, który projektował stronę Alior Sync podążył być może tym tropem, nie pamiętając, że znane są poważne wady tego wzorca (por. Why the Accordion UI is Rubbish), jak choćby to, że uniemożliwia ogarnięcie wzrokiem całego procesu. Nie jest to wielki problem gdy wypełniamy CV, ale gdy w banku decydujemy się na przelew, to chcielibyśmy wiedzieć w jednym momencie – do kogo ten przelew jest, kiedy i na jaką kwotę. Alior tego nie umożliwia.

Posługiwanie się wzorcami, których dużo znajdziemy w literaturze czy internecie (polecam np. stronę wzorceusability.pl Bartka Dymeckiego) nie jest oczywiście niczym złym. Wzorzec jest po prostu odpowiedzią na pytanie projektowe, która – jak wynika z doświadczenia czy tradycji – optymalnie działa w danej sytuacji.

Nie ma też nic złego w próbowaniu. To nawet dobre ćwiczenie na kreatywność. Jeśli trafiamy na problem projektowy, spróbujmy go rozwiązać co najmniej na dwa sposoby:

  • wzorcem „standardowym”, jaki nam przychodzi na myśl przy tego typu problemach,
  • wzorcem innym – rozwiązanie może nie będzie efektywniejsze, ale pozwoli nam spojrzeć na nasz problem z innej strony.

Nawet jeśli się okaże, że nasz problem nie ma jeszcze idealnie pasującego wzorca – to może na jakimś warto się oprzeć, choćby z tego względu, że uwzględnimy przyzwyczajenia użytkowników.

Ale „ślepa kreatywność” niekoniecznie przynosi dobre rezultaty.

Wyobraźmy sobie, że na stronie przelewu będę chciał zastosować karuzelę. Najlepiej do wyboru odbiorców zdefiniowanych. Ponieważ bank jest nowoczesny i połączony z Facebookiem, strona będzie zaciągać facebookowe awatary. Jeśli kogoś nie ma na liście odbiorców, można tradycyjnie wpisać numer konta.

Karuzela w prototypie banku

Wyobraźmy sobie dalej, że projekt zrobiłem i uradowałem klienta, który na takie innowacyjne pomysły liczył. Czas ucieka, a do zaprojektowania było wiele, poszło więc wszystko szybko do wdrożenia. Programiści też się ucieszyli, bo przecież gotowa biblioteka w jQuery do tego jest. Nawet na testach z użytkownikami nie wypadło źle. Znalezienie ciotki Jadzi na liście odbiorców w systemie napełnionym przykładowymi danymi nie nastręczyło użytkownikom problemów.

Wszyscy będą szczęśliwi, aż do czasu, gdy przed ekranem zasiądą prawdziwi klienci:

  • którzy nie używają facebooka i zastanawiać się będą przy generycznym awatarze o którą Annę F. może chodzić? Bo akurat w kontaktach są dwie.
  • którzy mają kilkudziesięciu odbiorców zdefiniowanych i przewinięcie przez całą listę jest wielkim bólem, szczególnie że zostali posortowani nie alfabetycznie, a według częstości przelewów.
  • którzy wykonują przelewy zdefiniowane przede wszystkim do firm. Czy mój dostawca energii ma swoją stronę na facebooku?

Oczywiście te wszystkie przypadki można przewidzieć i odpowiednio obsłużyć w interfejsie. Ale właśnie do tego służą wzorce projektowe – mamy element, który działa w określony sposób. Ale w nietypowych przypadkach ze wzorca zostaje tylko wydmuszka – wygląd interfejsu, który nie musi działać tak czy inaczej.

Na tym polega niebezpieczeństwo korzystania ze wzorców – z myślenia możemy się zwolnić tylko w tym przypadku gdy wzorca używamy tak jak należy. I to nie zawsze, bo istnieją wzorce, które niemal w każdym przypadku są katastrofą, np. chmura tagów.

Dlatego im częściej sięgamy do gotowych wzorców, powinniśmy tym bardziej przerobić wszystkie scenariusze i sprawdzić czy wzorzec aby na pewno nam do nich pasuje.

Podobne artykuły:

Być może zainteresują Cię następujące artykuły:

Zapisz się na kanał RSS bloga i dołącz do ponad 1500 czytelników RSS.

Zostań fanem WebAudit na Facebooku.

Komentarze czytelników

Śledź komentarze do tego artykułu: format RSS
  1. Paweł Zinkiewicz

    Wczoraj się pierwszy raz tam zalogowałem i miałem właśnie problem z harmonijką.
    Kompletnie się zgubiłem, bo (z tego co pamiętam) nie można po prostu rozwinąć wszystkich elementów, które chciałem rozwinąć przy definiowaniu przelewu.

    Do przelewów przez fejsa nie potrafiłem wczoraj dotrzeć, a trochę się naklikałem..

Komentarze z innych blogów

  1. Dużo WUD-u w listopadzie : WebAudit Blog

    […] Użyteczności, tym razem z naciskiem na tematykę systemów finansowych. Mam nadzieję, że projektanci Alior Sync wybiorą się na wszystkie spotkania z tej okazji, które organizowane są w tym […]

  2. mBanku, nie idź tą drogą : WebAudit Blog

    […] ta sama, która odpowiada za Alior Sync – a nie tylko ja wskazywałem na wiele poważnych błędów użyteczności tego serwisu. Co się przekłada na ich wymierne straty. Zastanawiałem się choćby nad lokatą […]

Zostaw komentarz

W komentarzu można (choć nie trzeba) używać podstawowych znaczników XHTML. Komentarze zawierające w podpisie słowa kluczowe mogą zostać potraktowane jako spam i usunięte.