Obserwując przebieg zmian w inteligo mógłbym pewnie pozwolić sobie na trochę złośliwej satysfakcji¹, tak naprawdę jest mi jednak po prostu żal². Niemniej, nabijałem się dzisiaj trochę z niektórych wpadek nowego interfejsu. A wtedy szef prowokująco zapytał: fajnie, krytykować łatwo, a umiałbyś sam zaprojektować lepiej?

Pytanie było retoryczne (miewałem i miewam różne pomysły na ulepszenia ale kompleksowe projektowanie interfejsów to nie jest mój profil umiejętności) ale zacząłem się trochę zastanawiać. I … aby oderwać się od podziwiania kolejnych usterek, napiszę sobie mój pomysł na bank.

Wygląd

Mój bank (a raczej interfejs webowy banku) zorientowany jest wokół jednego centralnego ekranu. Ekran ten wygląda jakoś tak:

i jest w razie potrzeby długi, na pewno pozwala na prezentację setki czy dwóch setek elementów w obu kolumnach o ile zachodzi taka potrzeba.

A cóż na nim mamy? Ano, trzy główne części: edytor poleceń, rejestr i oś czasu. Opiszę je poczynając od dołu.

Oczywiście są też po brzegach rozmaite drobne dodatkowe ikonki, od kontroli sesji i otwarcia formularza kontaktowego począwszy, po drobiazgi sterujące wspominane niżej.

Aha: na wąskich ekranach (mały tablet, telefon) kolumny leżą w tabach, widać jedną naraz ale łatwo można między nimi przechodzić (nie tracąc kontekstu, tj. jeśli jakoś przesortuję, przefiltruję czy przescrolluję rejestr, przejdę do osi czasu, a potem wrócę do rejestru, to jest on w takim stanie, w jakim go zostawiłem).

Rejestr

Rejest to informacja o statycznych elementach mojego konta. Są tutaj:

• wszelkie moje rachunki bankowe - zwykłe, oszczędnościowe, celowe, jakiekolwiek,

• używane przeze mnie karty płatnicze i kredytowe,

• kredyty i podobne produkty (o ile z nich korzystam),

• fundusze inwestycyjne,

• obligacje,

• i wszelkie inne produkty o ile jakieś wykorzystuję.

Innymi słowy: podsumowanie wszystkiego co mam i wszystkiego co jestem winien.

Każdy element ma swoje pudełko, w którym znajdują się kluczowe informacje na jego temat (nazwa, saldo, stan odsetek, mniejszym fontem numer rachunku, może data ostatniej zmiany) i przy którym dostępne są kontekstowe linki do bardziej szczegółowych ekranów związanych z danym obiektem (szczegóły, historia, itd - najużyteczniejsze operacje pod hiperlinkami, rzadsze w formie rozwijanego menu z dodanej ikony).

Różne typy elementów (rachunki zwykłe od lokat od kart od …) rozróżnia klucz kolorystyczny ramek i tła (np. zwykłe rachunki mają zieloną ramkę i zielonkawe tło, lokaty też ale ciemniejsze, kredyty są czerwonawe, karty brązowe… - kolory rzucam w tej chwili losowo), być może też jakieś niewielkie graficzne ikony.

Lista jest posortowana według jakiegoś deterministycznego porządku (np. najpierw rachunki zwykłe, potem oszczędnościowe, potem lokaty, potem kredyty, potem karty, potem fundusze, ... a w ramach każdej grupy wdg. kolejności powstawania).

Gdzieś przy lewym brzegu mogą leżeć (zawsze widoczne niezależnie od scrollowania) małe ikonki pozwalające zmieniać porządek sortowania (w szczególności na taki, w którym elementy sortujemy wdg. daty ostatniej aktywności/zmiany) i pokazywać/chować poszczególne grupy (np. schować lokaty). Ikonki te mają też skróty klawiszowe (lista skrótów i ich opis są wyświetlane w stylu pomocy do gmaila) a ich forma graficzna pokazuje czy aktualnie są wciśnięte.

Jeśli w grę wchodzą rachunki wspólne czy firmowe, także znajdują się na liście w odpowiednich miejscach (zwykłe wśród zwykłych, lokaty wśród lokat, ...) ale są wyróżnione jakimś dodatkowym graficznym elementem (deseniem i stylem ramki?) który pokazuje ich związek (np. moje konta mają prostą ramkę i tło, wspólne z żoną ramkę lekko falistą i odcień fali w tle a zarządzane rachunki dziecka przerywaną ramkę i tło w paski). Do tego dochodzą boczne ikonki pozwalające: zmienić porządek sortowania na taki, w którym elementy lewej kolumny grupujemy najpierw po właścicielu (najpierw wszystkie moje konta/karty/fundusze, potem wszystkie wspólne, potem wszystkie firmowe) a nie po typie, a także pokazywać czy chować elementy rejestru według tego klucza (czyli np. schować rachunki firmowe).

O ile ilość elementów do prezentacji nie przekracza kilkuset, rejestr zawiera faktycznie wszystko, bez żadnych form podziału na strony (acz może być dla wydajności doładowywany dynamicznie). Tylko w szczególnie ogromnych przypadkach wymaga jakiejś formy nawigacji.

I działa Ctrl-F (przeglądarkowe wyszukiwanie w stronie).

Oś czasu

Oś czasu to informacja co się działo, co się dzieje i co się dziać niedługo będzie. Łączy następujące informacje:

• wszelkie niedawno wykonane przeze mnie operacje bankowe i okołobankowe, takie jak przelewy wewnętrzne i zewnętrzne, zakupy funduszy czy obligacji, transakcje karciane, spłaty kredytów, doładowania i cokolwiek jeszcze bank będzie swą ofertą obejmował,

• wszelkie inne wykonane przeze mnie operacje, takie jak zmiany danych osobowych, definiowanie czy usuwanie szablonów przelewów, wnioski o cokolwiek, zmiany profilu powiadomień, aktywacje kart, nadawanie haseł itd itp - ogólnie wszystko, co przy pomocy dowolnego interfejsu banku niedawno zrobiłem i co miało jakiekolwiek konsekwencje,

• ewentualne niedokończone operacje (np. jeśli robiłem przelew, definiowałem zlecenie stałe albo składałem wniosek kredytowy, wypełniłem część danych ale nie doszedłem do końca, pojawi się tu odpowiednia wzmianka pozwalająca powrócić do tej operacji),

• informacje o ewentulnych przelewach odrzuconych czy wstrzymanych,

• wszelkie cudze operacje na moim koncie - przelewy przychodzące, pobrane przez bank prowizje, naliczone odsetki, przelewy zrobione przez współwłaściciela konta wspólnego, skonsumowane polecenia zapłaty, wypłacone raty kredytu…

• ważne przypomnienia wynikające z moich zachowań (zapłać rachunek za telefon, termin upłynął/upływa za trzy dni; za cztery dni upływa termin spłaty karty kredytowej; pojutrze mają się wykonać przelewy i zlecenia stałe na 950 zł a na rachunku jest tylko 320 zł),

• zapowiedzi przelewów oczekujących i zleceń stałych do wykonania w niedalekiej przyszłości,

• bardzo uważnie przemyślane i sprofilowane oferty bankowe (np. oferta dobrej lokaty jeśli mam sporo pieniędzy na słabo oprocentowanym ROR) - nigdy więcej niż jedna-dwie, nigdy masówki i nigdy ponownie oferta, którą już niedawno odrzuciłem.

Innymi słowy: cała dynamika mojego konta, rzeczy które się stały i rzeczy które staną się lub mogą się stać niedługo, rzeczy które ja zrobiłem i rzeczy które ktoś zrobił na mnie.

Każdy element ma swoje pudełko w którym prezentowane są kluczowe informacje o danym wydarzeniu i które zawiera rozmaite kontekstowe opcje (zależne od rodzaju wpisu). Najważniejsze opcje to:

• cofnij - o ile tylko jest to możliwe, pozwalamy cofnąć przelew, wycofać wniosek, anulować zmiany w danych itd itp;

• popraw - znowu, jeśli tylko się da, pozwalamy skorygować kwotę czy tytuł przelewu, uzupełnić wniosek, zmienić ilość kupowanych obligacji, …;

• (dla operacji niedokończonych) wznów - kontynuuj proces od miejsca, w którym został przerwany;

• (dla ofert, ostrzeżeń czy przypomnień) skorzystaj/zrób - wykorzystaj ofertę, spłać zaległy kredyt, powtórz odrzucony przelew‚ …

• (dla ofert, przypomnień, powiadomień) usuń - przestań mi to pokazywać.

Całość jest posortowana według czasu, od wydarzeń najnowszych (tj. zaczyna się od wydarzeń przyszłych, przy czym dbamy by pokazać ich domyślnie niewiele).

Podobnie jak to było w rejestrze, stosujemy klucz kolorystyczny i graficzny by odróżniać różne rodzaje wpisów. Dajemy też (ikonki przy prawym brzegu, skróty klawiszowe) możliwość chowania wybranych grup.

Lista jest domyślnie obszerna (dla spokojnego użytkownika obejmuje choć parę miesięcy wstecz i parę tygodni w przód, dla bardzo aktywnego choć setkę czy dwie wpisów), można ją pogłębiać (tak wstecz jak w przód) przez jakąś formę scrollowania (być może iluzję nieskończonej strony a'la facebook czy twitter).

Edytor poleceń

Edytor poleceń to po prostu duże, na całą szerokość ekranu, pole edycyjne. Jest to główny sposób na zaczynanie rozmaitych rzeczy. Mogę tam napisać rzeczy takie jak:

• przelew 50102055580000111122227733 37.20PLN 2013-09-23 (otworzy formatkę przelewu z już wpisanym numerem rachunku, kwotą i datą)

• płatność Czynsz 74.00 FV-342011 (otworzy formatkę wykonania płatności Czynsz na kwotę 74 zł, uzupełniając tytuł przelewu podanym numerem faktury)

• płatność (otworzy listę płatności do wyboru)

• doładowanie 501233711 50PLN (otworzy okno doładowania na 50 zł)

• historia Płatności (otworzy historię rachunku o nazwie Płatności)

• historia 2010-01-01 2010-01-31 (otworzy zagregowaną historię za styczeń 2010),

• lokata 5000PLN (zaprezentuje porównanie kilku możliwości ulokowania pięciu tysięcy złotych)

• karta pin (otworzy okno zmiany pinu karty płatniczej)

• szukaj Stoen (wyszuka przelewy do Stoenu i ewentualne inne zdarzenia związane z tym słowem)

• … (komendy istnieją dla wszystkiego, co mógłbym chcieć w banku zrobić).

Pole inteligentnie rozwija to co piszę, np. jeśli napiszę prze i wcisnę tab, wcisnę spację albo po prostu zawaham się przez moment, rozwinie mi to słowo do przelew.

Dla wszystkiego co wpisuję pojawiają się autosugestie, np. jeśli napiszę przelew Cz (i przez moment zawaham), pojawi się popup z nazwami płatności i odbiorców rozpoczynającymi się na Cz (w popupie widać i te nazwy i minimum szczegółów) a jeśli napiszę przelew 5, pojawi się popup z rozmaitymi rachunkami o numerze zaczynającym się na 5, na które robiłem już przelewy. Popupy są nieinwazyjne - mogę pisać dalej ignorując ich obecność (po każdej literze dostosowują swą zawartość do aktualnej sytuacji) albo strzałkami i tabem wybrać z nich wartość.

Autosugestie uczą się mnie najlepiej jak się da, na sugerowanych listach pierwsze są rzeczy których najbardziej prawdopodobnie mogę chcieć użyć - czy to dlatego, że najczęściej ich używam, czy to dlatego, że pasują do kontekstu (jest akurat 15-y marca a między 15-ym a 20-ym marca zwykle płacę doroczny podatek od nieruchomości, więc ta płatność będzie pierwsza). Optymalizowaniu tych sugestii autorzy systemu poświęcają dużo wysiłku.

Edytor komend nie upiera się przy kolejności, nawet jeśli kanoniczną formą jest doładowanie 603124111 30PLN, to można też wpisać 30PLN 60312411 doładowanie.

Wciśnięcie Enter zatwierdza aktualną komendę i otwiera odpowiednie okienko (zamiast rejestru i osi czasu ale z zachowaniem dostępności samego edytora poleceń gdybym chciał zrezygnować i wydać inną komendę).

Otwierane okno jest wybierane z uwzględnieniem następujących zasad:

• wybieramy najwężej jak się da (komenda płatność Czynsz otwiera okienko wykonywania płatności Czynsz gdzie mogę wpisać kwotę, datę, tytuł itd i zatwierdzić operację, komenda płatność otwiera listę płatności),

• rzeczy mające nietrywialne konsekwencje (np. transfer pieniądza) zawsze otwierają okienko w którym mam przegląd danych, możliwość ich poprawienia i ten ostateczny przycisk OK,

• focus jest ustawiany na pierwszym nie wypełnionym polu (i oczywiście działa nawigacja tabem i zatwierdzanie formularza enterem, da się nie dotykać myszy).

Dostępna jest kontekstowa pomoc (po prostu wyświetlana poniżej pola edytora gdy tylko zacznę w nim pisać). Treść pomocy zależy od zawartości okna, gdy pole jest jeszcze puste sugeruje najczęstsze komendy, gdy wpiszę komendę, podaje jakie może mieć ona parametry itp. Można też otworzyć osobne okno z pełną rozbudowaną dokumentacją wszystkich poleceń i rozmaitymi przykładami (oraz cheatsheetem do wydruku).

Jest też alternatywna forma - obok pola znajduje się ikona (na rysunku czarna kropka z lewej strony) która rozwija wielopoziomowe menu podstawowych operacji i otwiera odpowiednie okienka. Menu to działa edukacyjnie, np. w trakcie wybierania z menu Przelewy→Płatności→Czynsz, w polu edytora pojawi się płatność Czynsz.

A na tabletach i smartfonach treść komend można podawać głosem.

Ogólna nawigacja

Oczywiście można na różne sposoby nawigować myszą (klikać ikony i linki, rozwijać menu, klikać w pole edytora poleceń).

Strona obsługuje rozmaite skróty klawiszowe (komputer) i gesty (tablet), w szczególności zawsze jest dostępny skrót (Ctrl-E?, pociągnięcie dwóch palców do góry?) pozwalający wskoczyć do pola edytora poleceń, są też skróty pozwalające aktywować sensownie wybrane elementy rejestru czy osi czasu i wybierać ich kontekstowe opcje. Wszelkie otwierane okna można zatwierdzać enterem i porzucać escape (do porzuconych łatwo wrócić dzięki osi czasu).

Okna otwierane z edytora poleceń pojawiają się albo jako nowe okna albo jako modalne popupy przysłaniające rejestr i oś czasu (ale nie usuwające edytora poleceń). Gdy operacja wymaga sekwencji kroków, prowadzimy je tradycyjnym trybem Dalej/Wstecz, na koniec wracamy do głównego okna (gdzie właśnie wykonana operacja zajmuje pierwsze miejsce na osi czasu).

Czy to jest realny projekt?

Cóż, oczywiście to w ogóle nie jest projekt. Jest to luźny początek pomysłu, który wymagałby ogromnej pracy, by stać się faktycznym projektem.

Czy taki interfejs byłby możliwy do używania przez masowego użytkownika? Nie wiem. Na pewno trochę osób by wystraszył. Mam nadzieję, że kogoś by przyciągnął. W końcu banków mających menu rachunki, przelewy, historia, lokaty i karty (oraz siedemdziesiąt różnych ekranów historii różnych rzeczy) jest wiele, naprawdę czas by próbować czegoś innego…

Główny motyw

W tle całego pomysłu tkwi prosta obserwacja: wcale nie przepadam za logowaniem się do banku, zaglądam tam gdy muszę i gdy zajrzę, nie chcę wędrować po interfejsie ale maksymalnie szybko wykonać potrzebne operacje (a przy tej okazji krótkim rzutem oka ogarnąć stan moich rachunków i ostatnie zdarzenia na koncie).

I może jeszcze fakt: znaczna część użytkowników komputerów to nie są zupełnie początkujący. Naprawdę wiele osób umie używać klawiatury, jest w stanie zapamiętać parę skrótów klawiszowych (jeśli są warte pamiętania) i … szanuje swój czas.

Przypisy

¹ Skoro bank nie opisuje, co tak naprawdę się w ten weekend stało, to i ja pisać nie będę. Niemniej, jako że kiedyś przyznawałem się do udziału w tworzeniu i rozwoju inteligo, to dziś napiszę, że od 8 września 2013 do frontendu webowego już się w najmniejszym stopniu nie poczuwam (ani nie poczuwa żaden z moich współpracowników, choć nazwa firmy w źródłach niektórych html-i jeszcze - przez czyjąś nieuwagę - została).

² Niezależnie od kontekstów zawodowych, jestem po prostu klientem inteligo, jest to mój główny bank rozliczeniowy (do realizacji bieżących płatności, do prowadzenia karty, do przyjmowania wpłat…) i nie mogę znaleźć naprawdę wartościowej alternatywy. Przebieg zmian i ich kierunek budzi spory niepokój u mnie jako u klienta, który miał dobrze, ma gorzej i nie wie, gdzie pójść, jeśli trend się utrzyma.