Przebudowa systemu transakcyjnego Pekao24

Case study
Spis treści
Pekao24.................................................................... 3
Tekst: Maciej Lipiec, Magdalena Bicka
Zakres projektu.......................................................... 4
© 2009-2010
Proces User-Centered Design...................................... 5
Analiza...................................................................... 6 K2 Internet SA
al. Solidarności 74A,
Projektowanie wersji WWW.......................................... 7 00-145 Warszawa
tel. +48 22 448 70 00,
Założenia projektowe dla wersji WWW..........................15 fax. +48 22 448 71 01
e-mail: biuro@k2.pl
Eye-tracking i badania usability.................................. 26 www.k2.pl

Projektowanie wersji mobilnej.................................... 29 K2 User Experience

www.k2.pl/ux
Ograniczenia i założenia dla wersji mobilnej....................31
Badania usability prototypu wersji mobilnej.................. 36
Zespół..................................................................... 40
Autorzy....................................................................41

2
Pekao24
System transakcyjny Pekao24 należący do banku Pekao SA powstał w
2002 roku. Składa się z części bankowej oraz serwisów Pekao24Makler
i CDM24 zapewniających obsługę rachunków brokerskich w Domu Ma-
klerskim Pekao SA i Centralnym Domu Maklerskim Pekao SA. Dostęp do
systemu posiada 1,5 miliona klientów banku.

Przez lata system był systematycznie rozbudowywany o nowe funkcje.

Z biegiem czasu interfejs Pekao24 stawał się coraz bardziej przeładowa-
ny i stracił na czytelności. Nie pozwalał na dalsze poszerzanie funkcjo-
nalności. Wymagał dostosowania do nowych technologii i odświeżenia
graficznego (był zoptymalizowany dla rozdzielczości ekranu 800x600
pikseli).

W 2009 roku bank podjął decyzję o przeprowadzeniu modernizacji

serwisów Pekao24 i Pekao24Makler oraz o wdrożeniu wersji mobilnej
systemu dostosowanej do korzystania z niej za pomocą urządzeń
przenośnych, takich jak telefony komórkowe lub PDA.

Do realizacji projektu wybrana została agencja K2 Internet.

Poprzednia wersja serwisu Pekao24

3
Zakres projektu
Prace związane z rewitalizacją serwisów Pekao24 dotyczyły zaprojek-
towania i wdrożenia nowego interfejsu użytkownika. K2 jedynie w nie-
wielkim stopniu ingerowało w funkcje systemu, z których większość
musiała pozostać niezmieniona.
Cele przebudowy przedstawiały się następująco:
1. Zaprojektowanie i wdrożenie nowego interfejsu użytkownika
dostosowanego do minimalnej rozdzielczości ekranu 1024x768
pikseli.
2. Stworzenie nowej skalowalnej architektury informacji zapew-
niającej możliwość łatwej rozbudowy w przypadku wprowadzenia
nowych usług lub produktów.
3. Poprawa ergonomii i user experience systemu. Optymalizacja
nawigacji i formularzy, ułatwienie dotarcia do trudno dostępnych
funkcji.
4. Wprowadzenie mechanizmów sprzedażowych i marketingo-
wych w serwisie (zachęcanie użytkowników do korzystania ze
wszystkich usług udostępnianych przez bank drogą elektroniczną,
cross-selling).
5. Zapewnienie możliwości obustronnej komunikacji w systemie:
klient – bank, bank – klient.
Przebudowa interfejsu użytkownika dotyczyła wszystkich usług
Pekao24, takich jak obsługa rachunków bankowych, lokat, kredytów,
funduszy inwestycyjnych, doładowań kart telefonicznych, e-faktur oraz
pełnej obsługi rachunków brokerskich.
W drugim etapie prac K2 zaprojektowało dla Pekao nowy produkt ban-
kowości elektronicznej, czyli wersję mobilną systemu zawierającą wy-
brane funkcje serwisów bankowego i maklerskiego.
W obu przypadkach koncepcję interfejsu użytkownika przygotowali
Magdalena Bicka i Maciej Lipiec z działu K2 User Experience zajmującego
się projektowaniem interakcji i użytecznością (usability).
Projekt rozpoczął się pod koniec czerwca 2009, a zakończył latem 2010.
Sama faza projektowa trwała około czterech miesięcy.
Demo nowego systemu transakcyjnego dostęp-
ne jest pod adresem demo.pekao24.pl
Nowe Pekao24 zebrało bardzo pozytywne opi-
nie ze strony użytkowników oraz specjalistów
w branży. Zdobyło także wyróżnienie magazynu
PC WORLD jako najlepszy interfejs systemu
bankowości elektronicznej w Polsce.
4
Proces User-Centered Design
Nowy serwis Pekao24 został zaprojektowany w metodyce User-Centered Design (projektowanie zorientowane na użytkownika) zgodnej z wytycznymi
normy ISO 13407:1999.

Zaplanowanie procesu
projektowego 1b. Analiza
kontekstu użycia

1a. Analiza
2. Projektowanie
wymagań

3. Ewaluacja
projektu z udziałem
Sukces! Projekt spełnia
użytkowników
wymagania biznesowe
i użytkowników

5
Analiza

W ramach fazy analitycznej poprzedzającej proces projektowania

nowego systemu K2 przeprowadziło badania z udziałem użytkow-
ników istniejącego serwisu Pekao24 oraz użytkowników konkuren-
cyjnych systemów bankowości elektronicznej.

W badaniach wzięło udział 25 klientów Pekao SA oraz użytkowni-

ków internetowych systemów bankowych i maklerskich 5 konku-
rencyjnych banków.

Przeprowadzono indywidualne wywiady pogłębione (IDI) z użyt-

kownikami i obserwacje, tego w jaki sposób klienci różnych ban-
ków korzystają ze swoich systemów bankowości elektronicznej.

Badania pozwoliły na rozpoznanie silnych i słabych stron różnych

rozwiązań projektowych stosowanych w systemach konkurencyj-
nych i zwróciły uwagę na problemy z użytecznością występujące w
serwisie Pekao24.

Przeanalizowaliśmy również statystyki operacji najczęściej wyko-

nywanych przez klientów Pekao24 oraz przyjrzeliśmy się świato-
wym trendom w dziedzinie bankowości elektronicznej.

6
Projektowanie wersji WWW

Podczas fazy projektowej przygotowany został projekt architek-

tury informacji w postaci interaktywnego prototypu serwisu oraz
projekt graficzny.

Prototyp został następnie poddany testom usability z udziałem

użytkowników, a na projektach graficznych przeprowadzono bada-
nie eye-trackingowe.

7
Proces projektowania architektury informacji
Metodyka projektowania zorientowanego na użytkownika (User- Cała funkcjonalność systemu musiała zostać odtworzona w nowym
Centered Design) wymaga przygotowania dokładnego prototypu interfejsie użytkownika na podstawie analizy interfejsu istniejącego
aplikacji, tak aby możliwe było przeprowadzenie testów z użytkownikami serwisu. Było to możliwe dzięki bliskiej współpracy z Klientem, który
przed rozpoczęciem produkcji. na bieżąco wyjaśniał wszystkie niejasności związane z logiką działania
aplikacji.
Z uwagi na rozmiar projektu i bardzo napięty harmonogram rozpo-
częliśmy projektowanie architektury informacji od razu od pracy nad
interaktywnym prototypem HTML, rezygnując z etapu przygotowania
statycznych makiet.

Gotowy prototyp serwisu bankowego zawierający kluczowe ekrany in-

terfejsu użytkownika liczył 300 stron, a prototyp serwisu maklerskiego
Prototyp architektury
150 stron.

Zaczęliśmy od zaprojektowania ogólnej struktury serwisu i najbardziej

informacji serwisu
podstawowych funkcji związanych z rachunkami bankowymi oraz od
funkcji ogólnych, takich jak ustawienia. Po wstępnej akceptacji tej czę-
ści przez Pekao kontynuowaliśmy pracę nad następnymi działami serwi-
liczył 450 ekranów
su, oddając je kolejno do akceptacji Klienta.

Cotygodniowe spotkania projektowe z Klientem pozwalały na dokładne

omówienie każdej funkcji, wyjaśnienie wątpliwości i zgłoszenie ewen-
tualnych uwag do każdego ekranu.

8
Proces projektowania architektury informacji
Równolegle z projektowaniem architektury informacji i tworzeniem
prototypu prowadzone były prace nad projektem graficznym serwisu,
który musiał być zgodny z corporate identity banku. Oprawa graficzna
nowego Pekao24, której autorem jest Arek Sobczyk, powstawała w
ścisłej współpracy z architektami informacji.
Ze względu na to, że przy tak złożonym projekcie nie jest możliwe
przygotowania makiet graficznych dla wszystkich ekranów interfejsu
użytkownika, zaprojektowane zostały tylko elementy wyjątkowe oraz
style dla wszystkich powtarzających się elementów w całym systemie.
Dzięki konstrukcji interfejsu użytkownika wykorzystującej powtarzające
się moduły cały projekt graficzny do liczącej ponad 400 ekranów aplikacji
ograniczył się do 16 makiet.
Prototyp serwisu został przygotowany w programie Microsoft Visio
z wykorzystaniem dodatku VisDynamica napisanego przez Tomasza
Seroczyńskiego z K2.
Visio pozwoliło nam na szybkie wykonanie graficznego prototypu, który
dzięki VisDynamice był całkowicie interaktywny – działały w nim wszyst-
kie linki, rozwijane menu, dynamiczne panele i formularze. Specjalnie
na potrzeby projektu Pekao Tomek dopisał do VisDynamiki wiele no-
wych funkcji, m.in. opcję pełnej walidacji pól występujących w formula-
rzach i wyświetlania komunikatów błędów.

Stylistyka elementów określona w projekcie graficznym została zastoso-

wana w prototypie architektury informacji, który na tyle, na ile to było
możliwe przypominał gotowy serwis. Dzięki temu rozwiązaniu:

• Osoby uczestniczące w projekcie ze strony banku mogły sobie

bez problemu wyobrazić wygląd i działanie gotowego serwisu na
podstawie prototypu;
• Badania usability przeprowadzone z użytkownikami na prototy-
pie dotyczyły maksymalnie wiernej symulacji gotowego produktu;
• Podczas produkcji serwisu webdeveloperzy mieli jasność, co do
tego w jakiej stylistyce wykonać elementy każdej strony, kierując
się wyglądem prototypu, bez potrzeby dodatkowego opisu.

9
Protototyp serwisu

Pierwsze podejście do architektury informacji strony głównej Finalny prototyp architektury informacji użyty podczas badań
po zalogowaniu. usability.

10
Corporate identity UniCredit Group
Kolory podstawowe Kolory uzupełniające

Paleta dozwolonych kolorów z identyfikacji wizualnej Grupy UniCredit,

której częścią jest bank Pekao SA.

11
Pierwsze projekty graficzne

12
Wersja robocza rozwijanego projektu

13
Finalny projekt graficzny

14
Założenia projektowe dla wersji WWW

Projektując interfejs użytkownika dla nowego serwisu Pekao24

przyjęliśmy szereg założeń mających na celu poprawę ergonomii
i user experience:

1. Zmniejszenie liczby jednocześnie dostępnych do wyboru opcji.

2. Łączenie i grupowanie powiązanych funkcji razem.
3. Skupienie uwagi użytkowników na treści strony i wykonywanych
operacjach, a nie na nawigacji.
4. Zapewnienie elastyczności kolejności wykonywanych czynno-
ści.
5. Czytelna informacja zwrotna dla użytkowników po wykonaniu
operacji.
6. Zapewnienie spójności rozwiązań w całym systemie.
7. Wyeliminowanie niejasności.

15
Zmniejszenie liczby opcji do wyboru

Menu działu Menu działu

„Rachunki” w starym „Rachunki” w serwisie
serwisie Pekao24 - zaprojektowanym przez
21 pozycji plus K2 - 10 pozycji.
nagłówki sekcji.

16
Zmniejszenie liczby opcji do wyboru
Zarówno zbyt mało, jak i zbyt dużo opcji do wyboru wpływa negatywnie
na satysfakcję użytkowników, dlatego ważne jest zachowanie optymal-
nej liczby elementów.
Źródło ilustracji: Luke Wroblewski,
http://www.lukew.com/ff/entry.asp?429
Im więcej prezentowanych jednocześnie opcji, tym więcej czasu
zabiera:
• Zapoznanie się z każą opcją i odnalezienie konkretnej funkcji
(Prawo Hicka).
• Podjęcie decyzji, która z opcji jest najbardziej odpowiednia.
Zbyt wiele opcji do jednoczesnego wyboru:
• Zmniejsza efektywność pracy;
• Zmniejsza satysfakcję użytkownika;
• Może wywoływać paraliż decyzyjny.
(Barry Schwartz - „The Paradox of Choice”)
17
Łączenie i grupowanie podobnych funkcji
Grupowanie powiązanych opcji umożliwia zmniejszenie liczby jedno-
cześnie prezentowanych pozycji i ukierunkowuje wybór pozwalając
użytkownikom na podejmowanie coraz bardziej szczegółowych decyzji
w kolejnych krokach („progressive disclosure”).
Fragment zrzutu ekranu z nowego serwisu.
Na przykład:
1. Najpierw wybieram rodzaj przelewu (jednorazowy, zdefiniowa-
ny, cykliczny).
2. Potem wybieram typ dla tego przelewu (zewnętrzny, wewnętrz-
ny, walutowy, ZUS, US, spłata karty, rachunek brokerski).
18
Uwaga użytkowników ma skupiać się na treści
Koncentrując się na wykonywanej czynności użytkownicy poświęcają
najwięcej uwagi polu treści strony, często zapominając o menu. Badania
eye-trackingowe pokazują, że użytkownicy skupiają się najmocniej na
środku strony i zwykle zaczynają oglądać stronę patrząc na jej środek.

Badania przeprowadzone przez K2 w fazie analitycznej projektu wyka-

zały, że użytkownicy woleli najpierw wybrać rachunek i dopiero z jego
poziomu wykonywali transakcje, przy czym mieli tendencję do poszuki-
wania akcji związanych z danym produktem przede wszystkim w polu
treści, a nie w menu.

Mapa cieplna (heatmap) z badania eye-trackingowego Pekao24. Kolory

czerwony i żółty oznaczają obszary najbardziej przyciągające uwagę
użytkowników podczas wykonywania zadania.

19
Uwaga użytkowników ma skupiać się na treści

Linki do operacji umieszczone w polu treści.

Fragment zrzutu ekranu z nowego serwisu.

20
Elastyczność kolejności wykonywanych czynności
System zapewnia dwa możliwe sposoby wykonywania operacji:

1. Wybór operacji -> wybór rachunku

2. Wybór rachunku -> wybór operacji

1
2

Fragment zrzutu ekranu z nowego serwisu - po prawej stronie kontekstowe rozwijane menu dla konkretnego rachunku.

21
Czytelna informacja zwrotna od systemu
Komunikaty po wykonaniu akcji są zawsze widoczne w tym samym miejscu i pozwalają kontynuować pracę bez przerw oraz dodatkowego klikania, co
byłoby konieczne w przypadku komunikatów wyświetlanych w oknie dialogowym lub na osobnej stronie.

Nowy serwis Pekao24 wykorzystuje

podobny system komunikatów jak
m.in. poczta Gmail lub serwis Flickr.

22
Czytelna informacja zwrotna od systemu
Komunikaty błędów powinny informować na czym polega problem i jak go rozwiązać.

Chcę aktywować kartę kodów, ale nie mogę, bo nie mam aktywnej karty kodów? Komunikat nie wyjaśnia problemu i nie mówi, co zrobić!

Komunikat w starym serwisie Pekao24.

23
Spójność rozwiązań
Spójność wewnętrzna interfejsu użytkownika pozwala na szybką i łatwą
naukę korzystania z niego i zmniejsza prawdopodobieństwo pomyłek.

Projektując nowy system Pekao24 stworzyliśmy jednolite standardy

wyglądu i zachowania dla wszystkich elementów interfejsu użytkowni-
ka powtarzających się na ponad 400 ekranach aplikacji. Przyciski akcji w nowym serwisie Pekao24.
Przykład:

1. Wszystkie przyciski zawsze wyrównane do prawej strony.

2. Najważniejszy przycisk akcji (primary action) wyróżniony kolo-
rem niebieskim, zawsze pierwszy od prawej strony.
3. Mniej ważne przyciski (secondary actions) w kolorze szarym, po
lewej.
4. Wszystkie akcje negatywne (anuluj, wróć, usuń) zawsze przed-
stawione za pomocą linków, dla odróżnienia od akcji pozytywnych
(zatwierdzających).

24
Wyeliminowanie niejasności
Czy kartę anuluje przycisk „anuluj” czy „zatwierdź”? :-)

Formularz w starym serwisie Pekao24.

25
Eye-tracking i badania usability
Testy użyteczności oraz eye-tracking zostały przeprowadzone na
grupie 25 użytkowników bankowości elektronicznej i usług ma-
klerskich, nie będących klientami Pekao SA.

Podczas testów usability użytkownicy byli proszeni o wykonanie

na prototypie serwisu serii zadań będących najbardziej typowymi
przypadkami użycia systemu.

Badania wskazały miejsca w serwisie wymagające poprawy oraz

możliwości optymalizacji użyteczności interfejsu. W czasie badań
przetestowano także dwa różne projekty formularzy wniosków
(testy A/B), co pozwoliło na wybranie bardziej efektywnej wersji.

Eye-tracking, czyli badanie śledzenia wzroku użytkowników, został

przeprowadzony na statycznych projektach graficznych kluczowych
stron serwisu. Przedstawiciele grupy celowej byli proszeni o wyko-
nanie zadań polegających na odnalezieniu wzrokiem i wskazaniu
kursorem myszki wybranych funkcji na prezentowanych ekranach.
Zbadano także spontaniczne postrzeganie interfejsu.

Eye-tracking umożliwił sprawdzenie czytelności projektów graficz-

nych i ich optymalizację. Pozwolił na upewnienie się, że odnale-
zienie wszystkich najbardziej istotnych informacji jest łatwe i nie
sprawia użytkownikom problemów.

26
Jak działa eye-tracker?
Eye-tracker (okulograf), to urządzenie badawcze służące do rejestracji
ścieżek wzroku respondentów. Badanie przeprowadzone za pomocą
eye-trackera pozwala sprawdzić jak osoby badane postrzegają stronę
internetową - na jakie elementy strony zwracają uwagę, w jakiej
kolejności je oglądają, a czego w ogóle nie dostrzegają w serwisie.

Zaletą eye-trackingu jest to, że pozwala on na pomiar reakcji

fizjologicznych, które nie podlegają pełnej kontroli i często są
nieświadome. Eye-tracking dostarcza danych, które są niemożliwe do
uzyskania innymi drogami i jest doskonałym uzupełnieniem tradycyjnych
metod badawczych, takich jak testy zadaniowe oraz wywiady.

Do prowadzenia badań eye-trackingowych K2 wykorzystuje własny

eye-tracker Tobii wraz z najnowocześniejszym oprogramowaniem
analitycznym Tobii Studio. Wartość tego sprzętu to ponad 20 tys. euro.

Eye-tracker Tobii jest wmontowany w monitor LCD, nie wymaga

specjalnego kasku lub gogli jak w starych modelach eye-trackerów i jest
całkowicie nieinwazyjny dla osób badanych. Umożliwia badanie osób
noszących okulary i ma wysoką tolerancję na ruchy głową.

Sprzęt ten może być wykorzystywany nie tylko do badań ergonomii

serwisów internetowych, ale także do oceny efektywności kreacji
reklamowych - materiałów prasowych czy spotów wideo.

Eye-tracker Tobii 1750, źródło ilustracji: Tobii

27
Po badaniach wersji WWW Pekao24
Zmiany wprowadzone w projekcie w wyniku badań dotyczyły m.in.:

• Nazewnictwa, które nie zawsze było w pełni zrozumiałe dla

użytkowników;
• Poprawy widoczności komunikatów;
• Poprawy widoczności opcji wyboru rodzaju przelewu;
• Poprawy widoczności zaznaczenia wybranego działu w menu;
• Ułatwienia powrotu do strony głównej;
• Poprawy widoczności odnośnika do notowań w części makler-
skiej serwisu.

Z 19 zadań jakie wykonywali użytkownicy podczas testów tylko jedno

zostało ocenione jako trudne, dziewięć jako przeciętne pod względem
stopnia trudności, a pozostałe dziewięć jako bardzo łatwe.

Testy prototypu i projektów graficznych wersji WWW serwisu zostały

przeprowadzone przez zespół Komitywa.com w laboratorium badaw-
czym K2 przy ulicy Pilickiej w Warszawie.

W końcowym etapie prac nad serwisem już gotowy system był pilotażo-
wo testowany na grupie 14 tys. pracowników banku.

Pomieszczenie badawcze z lustrem weneckim w

laboratorium użyteczności K2 User Experience.

28
Projektowanie wersji mobilnej

Podczas projektowania wersji mobilnej przygotowaliśmy statyczne

makiety interfejsu użytkownika dla całego serwisu. Prototyp prze-
znaczony do testów usability z udziałem użytkowników został wy-
konany po zaakceptowaniu makiet przez Klienta.

Prototyp wersji mobilnej Pekao24 przygotowaliśmy w edytorze

programistycznym Microsoft Visual Studio For .NET z wykorzysta-
niem możliwości graficznego budowania interfejsów użytkowni-
ka dla aplikacji mobilnych. Dzięki zastosowaniu środowiska .NET
możliwe stało się szybkie przygotowanie w pełni interaktywnego
prototypu z działająca walidacją formularzy po stronie serwera bez
JavaScript. Pozwoliło to nam na przeprowadzenie testów na tele-
fonach komórkowych, których przeglądarki nie zawsze radzą sobie
dobrze z kodem JavaScript.

29
Wersja mobilna Pekao24 po zalogowaniu

Projekt graficzny nowego serwisu mobilnego Pekao24

30
Ograniczenia i założenia dla wersji mobilnej
Projektowanie aplikacji internetowych na urządzenia przenośne wyma-
ga wzięcia pod uwagę wielu ograniczeń:
• Mały ekran;
• Różne rozdzielczości ekranu dla różnych urządzeń;
• Brak wygodnego urządzenia wskazującego w telefonach pozba-
wionych ekranu dotykowego;
• Mało komfortowe wprowadzanie znaków z klawiatury – duża
możliwość pomyłek;
• Powolne wczytywanie się stron;
• Ograniczenia przeglądarek mobilnych (brak działania JavaScrip-
tu lub jego powolne działanie, nie wszystkie tagi są obsługiwane
przez wszystkie telefony);
• Dużo dystraktorów przy typowym kontekście użycia.
Przygotowując wersję mobilną serwisów Pekao24 i Pekao24Makler
przyjęliśmy jako założenia:
1. Wykorzystanie technologii XHTML Mobile Profile.
2. Zapewnienie działania serwisu bez obsługi JavaScript. Java-
Script powinien być wykorzystywany tylko jako dodatek uspraw-
niający pracę dla posiadaczy lepszych telefonów.
3. Obsługa tylko tych funkcji transakcyjnych, które nie wymagają
autoryzacji.
4. Dostosowanie serwisu do podstawowej rozdzielności 240x320
pikseli.
5. Nawigacja oparta o listy.
6. Płytka struktura serwisu.
7. Lekkie strony pozbawione skomplikowanej grafiki.
8. Uproszczona prezentacja danych tabelarycznych.
31
Kontekst użycia aplikacji mobilnych

32
Struktura i nawigacja serwisu mobilnego
Uproszczona, płytka struktura serwisu Układ stron oparty o listy

Źródło: dotMobi Mobile Web Developers Guide, 2007

33
Różne rozdzielczości ekranów urządzeń mobilnych
Popularne rozdzielczości telefonów Trend wzrostu wielkości wyświetlaczy

Źródło: http://sender11.typepad.com

+ iPhone 320x480

Źródło: dotMobi Mobile Web Developers Guide, 2007

34
Telefony używane do korzystania z WWW w Polsce

Najpopularniejsze telefony używane do przeglądania stron internetowych w Polsce według badania

firmy Gemius i ich rozdzielczości ekranów:

• Apple iPhone (320x480 px)

• Nokia E51, 6300, N95 (240x320 px)
• Sony Ericsson K800, K550 (240x320 px)

35
Badania usability prototypu wersji mobilnej

Badania wersji mobilnej serwisu zostały przeprowadzone na gru-

pie 10 użytkowników Pekao24.

Respondenci korzystali z prototypu serwisu na jednym z dwóch

modeli telefonów (Nokia N95 lub iPhone) w całkowicie normal-
ny sposób, a podgląd ekranu urządzenia mobilnego był przesyłany
do komputera. Osoby prowadzące badanie i klienci siedzący za lu-
strem weneckim mogli obserwować na żywo na ekranie monitora
operacje wykonywane na telefonie.

Użytkownicy wykonywali zadania na prototypie bankowego serwi-

su transakcyjnego oraz serwisu maklerskiego.

36
Przebieg badania serwisu mobilnego
Komputer  z  podglądem  
ekranu  testowanej  
aplikacji  mobilnej.  

Osoba  badana  i  badacze  

Klienci
Facylitator  

Osoba  badana  
korzysta  z  telefonu    
Obserwator  
z  testowaną  aplikacją  

Lustro
weneckie

Komputer  badawczy,  do  

którego  przekazywany  jest  
obraz  ekranu  z    telefonu.  

37
Prototyp wersji mobilnej Pekao24

Badanie usability przeprowadzone tylko na dwóch modelach telefonów pozwoliło nam na sprawdzenie jak z serwisem radzą sobie użytkownicy naj-
popularniejszych w Polsce platform reprezentujących zupełnie różne światy: mniejszy ekran, fizyczna klawiatura oraz dość ograniczona przeglądarka
Nokia N95, a z drugiej strony Safari oraz duży ekran multitouch iPhone’a.

38
Wyniki badania wersji mobilnej
Podczas badań wersji mobilnej 100% respondentów wykonało popraw-
nie wszystkie zadania (i we wszystkich przypadkach przed czasem).

Serwis okazał się tak prosty w użyciu, że nawet osoby dla których korzy-
stanie z internetu mobilnego przez komórkę było nowością nie miały z
jego obsługą żadnych problemów. Dotyczyło to także użycia bardzo zło-
żonej aplikacji serwisu maklerskiego, która w wersji mobilnej zawiera
prawie wszystkie funkcje wersji pełnej.

Po badaniach dokonaliśmy jedynie drobnej optymalizacji formularzy,

aby korzystanie z nich było bardziej komfortowe.

Serwis mobilny dostępny jest pod adresem http://m.pekao24.pl

100% respondentów
wykonało wszystkie zadania
przed czasem

39
Zespół
Projektowanie interakcji, architektura informacji
Magdalenia Bicka - user experience team leader
Maciej Lipiec - user experience director
Projekt graficzny
Development JavaScript
Daniel Gromysz - programmer
Krzysztof Jasewicz - programmer
Joanna Pietras - programmer
Jacek Podgórski - programmer

Arek Sobczyk - senior graphic designer

Dokumentacja i prototyp wersji mobilnej
Michał Gołębiowski - systems architect
FX
Tomasz Seroczyński - new internet concepts manager
Podziękowania
Marcin Mościcki - art director
Eryk Orłowski - komitywa.com
Maciej Szandar - art director
Piotr Wawrzyniak - art director

Project managment
Jarek Górecki - project manager
Magdalena Zawada - account director

Development szablonów XSL

Michał Kamosz - webdeveloper
Łukasz Mańkowski - webdeveloper
Hubert Smusz - webdeveloper
Paweł Włodarczyk - webdeveloper

40
Autorzy
Magdalena Bicka
User Experience Team Leader w K2 Internet S.A.

Od 2006 roku zajmuje się w K2 projektowaniem interakcji i badaniami user experience. Psycholog
społeczny informatyki i komunikacji. Ukończyła Szkołę Wyższą Psychologii Społecznej w Warszawie.

Pracowała m.in. dla takich klientów jak Coca-Cola, Nokia, Open Finance, Agora S.A., Play, Sanitec
KOŁO, Instytut Wzornictwa Przemysłowego, Ministerstwo Kultury i Dziedzictwa Narodowego.

Maciej Lipiec
User Experience Director w K2 Internet S.A.

W K2 od 2007 roku - początkowo jako architekt informacji w zespole Konsultingu agencji, później
współzałożyciel spółki Komitywa.com, która po roku działalności została zastąpiona przez markę K2
User Experience. Zespołem K2 User Experience kieruje od początku 2009. Wcześniej pracował w
dziale Strategii i Architektury Informacji w agencji McCann Erickson Polska. Autor bloga dotyczącego
użyteczności i projektowania interakcji uxdesign.pl.
Psycholog społeczny ze specjalizacją w psychologii reklamy i marketingu. Absolwent Szkoły Wyższej
Psychologii Społecznej w Warszawie.

Pracował m.in. dla takich klientów jak PZU, Aviva / Commercial Union, Noble Bank, Nokia, Play,
Polkomtel, PTC Era, Telewizja Polska, Coca-Cola, Maspex, Exxon Mobil, PKN Orlen.

41
K2 User Experience to wyspecjalizowany zespół działający w ramach Potrzebujesz konsultacji?
agencji K2 Internet zajmujący się tworzeniem koncepcji dla nowych Skontaktuj się, jeśli interesuje Cię współpraca z nami!
produktów interaktywnych i e-usług, projektowaniem interakcji, pro-
wadzeniem badań z udziałem użytkowników.
Maciej Lipiec
Pomagamy naszym Klientom tworzyć udane produkty i usługi. User Experience Director
e-mail: maciej.lipiec@k2.pl
Odkrywamy potrzeby konsumentów. tel. 510 533 592

Projektujemy ergonomiczne i efektywne aplikacje oraz serwisy Katarzyna Wiśniewska

internetowe, aplikacje na urządzenia mobilne (systemy iOS, Android,
Symbian, Windows), interfejsy dla ekranów dotykowych, kiosków New Business Director
multimedialnych, sprzętu elektronicznego. e-mail: katarzyna.wisniewska@k2.pl
tel. +48 (22) 448 70 21; 605 102 574
Konsultujemy i testujemy użyteczność (audyty i badania usability, eye-
tracking). K2 Internet S.A.
Badamy skuteczność kreacji reklamowych - nie tylko w Internecie. al. Solidarności 74A,
00-145 Warszawa
Łączymy wysokiej klasy wiedzę psychologiczną z know-how technolo- tel. +48 (22) 448 70 00
gicznym i doświadczeniem marketingowym. fax. +48 (22) 448 71 01
e-mail: biuro@k2.pl
Naszą ofertę projektowo-badawczą znajdziesz na stronie www.k2.pl
www.k2.pl/ux

42
43