Poprawa użyteczności internetowych stron bankowych i instytucji finansowych

Nowe trendy Informatyczne w bankowości i instytucjach finansowych

Warszawa, 1 czerwca 2011 r.

Doradzałem m.in.

Wiesław Kotecki - UseLab

Doradzałem m.in.

Wiesław Kotecki - UseLab

O czym nie będziemy mówić ?

” Usability to nie malowanie trupa.Poprawa interfejsu i inwestycja w „look&feel”, w momencie gdy fundamentalne założenia produktu są błędna nie da nam oczekiwanych skutków.

O czym (także) nie będziemy mówić ?

To o czym będziemy mówić ?

U!YTKOWNIKBIZNESprzyjazno!"

u#yteczno!"

znalezienie produktu/informacji

szybko!"

wygoda

wy#sza sprzeda#

wi$ksza ogladalno!"

innowacyjno!"

ni#sze koszty

wi$cej reklam

technologia

Wyścig konkurencyjny trwa

W jaki sposób dokonujemy wyboru ?

W jaki sposób dokonujemy wyboru ?

Konto za 0 złPrzelewy za 0 złWypłaty za 0 zł

Jak w takim razie dokonujemy wyboru?

.... dziś rano w drodze do pracy...

Bardzo często o wyborze produktu decyduje jego użyteczność.

frustracja

liczba funkcjonalności

Chcę wykopać dół - jakiego narzędzia użyć?

Źródło: Kamil Luberecki

frustracja

liczba funkcjonalności

Chcę wykopać dół - jakiego narzędzia użyć?

Źródło: Kamil Luberecki

frustracja

liczba funkcjonalności

Chcę wykopać dół - jakiego narzędzia użyć?

Źródło: Kamil Luberecki

frustracja

liczba funkcjonalności

Chcę wykopać dół - jakiego narzędzia użyć?

Źródło: Kamil Luberecki

frustracja

liczba funkcjonalności

Chcę wykopać dół - jakiego narzędzia użyć?

Źródło: Kamil Luberecki

frustracja

liczba funkcjonalności

Chcę wykopać dół - jakiego narzędzia użyć?

Źródło: Kamil Luberecki

Usability/Użyteczność - dyscyplina określająca łatwość użycia danego

narzędzia lub przedmiotu w celu osiągnięcia celu człowieka.

Jest również określeniem na metodologię przeprowadzania testów na

produktach w celu ocenienia/zmierzenia łatwości z jaką osoby wykorzystując produkt osiągają cele.

Wikipedia

Wg ISO 9241: miara, zgodnie z którą produkt może być używany do osiągnięcia celów użytkowników w sposób:

• wydajny (głównie czas wykonania zadań),

• efektywny (jakość wykonania zadań, korzystanie z pomocy),

• satysfakcjonujący (brak stresu, zadowolenie z korzystania).

Czy użyteczność/funkcjonalność to jedyny aspekt?

Źródło: Alior Bank

Ekosystem Customer Experience - Alior Bank

User Experience encompasses all aspects of the end-user [on-line] interaction with the company, its services and products.”

Nielsen Norman Group, „User Experience - Our Definition”

”

Czym jest User Experience ?

Jak to zrobić ?

Nasz serwis jest przestarzały, musimy go koniecznie zmienić - 2 lata w internecie to wieczność.

/Klient/

Zastanówmy się czy koniecznie musimy zaczynać wszystko od początku. Jest kilka

wariantów działania....

/Konsultant ux/

18

Wariant 1: Niech żyje rewolucja

!ród"o: Mind Over Machines

IT Business Klient

Spójna wizja ?

108

Spójna wizja

Źródło: Mind Over Machines

Cele BiznesoweCele Użytkownika

Technologia

Biznes, Marketing,Dział Prawny

Cele Biznesowe Cele Użytkownika

UX Team, Agencja UX

Dział IT, Podwykonawca

Technologia

Biznes, Marketing,Dział Prawny

Cele Biznesowe Cele Użytkownika

UX Team, Agencja UX

Dział IT, Podwykonawca

Technologia

UCD

Jak tworzone są produkty (usługi) IT?

Jak tworzone są produkty (usługi) IT?

Jak tworzone są produkty (usługi) IT?

Jak tworzone są produkty (usługi) IT?

Jak tworzone są produkty (usługi) IT?

User Centered Design:

✓ Filozofia projektowa

✓ Opiera się na ciągłej ocenie naszej pracy przez końcowych odbiorców

✓ Zakłada, wykorzystanie metod projektowych (persony, scenariusze), gdy niemożliwa jest interakcja z prawdziwymi użytkownikami

Jak tworzone są produkty (usługi) IT?

1. Poznaj potrzeby swoich użytkowników

Źródło: „About Face „ - Allan Cooper

1. Poznaj potrzeby swoich użytkowników

Źródło: „About Face „ - Allan Cooper

1. Poznaj potrzeby swoich użytkowników

Źródło: Historie kuchenne - plakat z filmu

2. Określ scenariusze użycia (później funkcjonalności)

3. Projektuj - prototypuj - badaj

Strona g!ówna: makieta high fidelity

English version

Newsy

16:9

52 3 41

Wi!cej>>

logo partnera

logo partnera

logo partnera

logo partnera

logo partnera

logo partnera

logo partnera

logo partnera

logo partnera

logo partnera

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis.

Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus.

Czytaj...

dd-mm-rrrr

HeaderLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus.

dd-mm-rrrr

Czytaj...

HeaderLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus.

dd-mm-rrrr

Czytaj...

Nazwa eventuLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus.

dd-mm-rrrr

Czytaj...HeaderLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus.

dd-mm-rrrr

Czytaj...

Dialog spo"ecznyFundusze unijneCentrum

Monitorowania Legislacji

Oferty gospodarczeCz"onkowieAktualno#ciG"ówna

Biuletyn KPP:

wpisz adres email Gotowe

Subskrypcja

Pobierz ostatnie wydanie w formacie PDF

Subskrypcja RSS ( co to jest? )

Kontakt:

ul. Przyk!adowa 55

00-000 Warszawa

telefon: 602 000 000

email: centrum.informacyjne@kpp.org.pl

Zobacz tak"e:

ul. Przyk!adowa 55

00-000 Warszawa

telefon: 602 000 000

email: centrum.informacyjne@kpp.org.pl

Nazwa afiliowanego serwisu

www.serwis.pl

Nazwa afiliowanego serwisu

www.serwis.pl

Nazwa afiliowanego serwisu

www.serwis.pl

Nazwa afiliowanego serwisu

www.serwis.pl

Nazwa afiliowanego serwisu

www.serwis.pl

HeaderLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus.

dd-mm-rrrr

Czytaj...

Konferencje

Przetargi

HeaderLorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus.

dd-mm-rrrr

Czytaj...

Ministerstwo Transportu Republiki Egiptu og!asza przetarg na zakup 20 wagonów elektrycznych Do klimatyzowanych poci#gów pasa"erskich (czytaj)

Wi!cej przetargów

Ministerstwo Transportu Republiki Egiptu og!asza przetarg na zakup 20 wagonów elektrycznych Do klimatyzowanych poci#gów pasa"erskich (czytaj)

Polecamy

Foto

Foto

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis.

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit.

Suspendisse ut purus.

Suspendisse tristique. Cras

et sem at odio porttitor

mattis.

Dyskutuj o tym na Forum! FORUM

Makieta

Makieta prezentuj$ wst$pn# koncepcj$ architektury informacji serwisu

internetowego KPP. Jest to uk!ad funkcjonalny, zawieraj#cy najwa"niejsze

elementy serwisu, ich umiejscowienie i zale"no%ci mi$dzy nimi.

Jest to podstawa do rozpocz$cia prac graficznych na pó"niejszych etapach

prac. Obecna makieta powsta!a jako prezentacja naszych mo"liwo%ci i

filozofii pracy i nie nale"y jej traktowa& jako finalnego produktu.

Moodbar

Mo"liwo%& prezentacji najwa"niejszych wydarze' /

informacji w formie interaktywnego bannera, gdzie w

sposób ci#g!y wymieniaj# si$ informacje (zdj$cie +

tre%&). Rotacji podlega np 4-5 newsów. Podobne

rozwi#zania stosowane s# w serwisach typu

gazeta.pl. cnn.com

Newsy

Prezentacja najwa"niejszych informacji

gospodarczych, z "ycia KPP w formie krótkich

informacji. Jako pierwsza pojawia si$ albo najbardziej

aktualna informacja lub promowana.

Polecamy

Prezentacja polecanych wydarze', konferencji,

promowanych projektów przez KPP.

Forum

Dost$p do forum dyskusyjnego gdzie mo"na

wymienia& si$ pogl#dami na tematy zwi#zane z

"yciem spo!eczno-gospodarczym

Przetargi

Informacje o przetargach, wa"nych umowach/

transakcjach mi$dzynarodowych.

Biuletyn KPP

Formularz umo"liwiaj#cy zapisanie si$ do biuletynu/

newslettera KPP, wraz z mo"liwo%ci# subskrypcji

RSS, a tak"e pobrania ostatniego wydania w formie

PDF.

Kontakt

Prezentacja adresu i danych

kontaktowych do KPP

Zobacz tak$e

Prezentacja adresów/projektów

wspieranych/promowanych przez

KPP

Konferencje

Prezentacja najbli"szych konferencji/spotka'/

seminariów promowanych/organizowanych przez

KPP.

4. Testuj i optymalizuj

✓ Badania prototypów ✓ Badania makiet

✓ Badania zdalne ✓ Badania trafficu

✓ Badania grafiki

2'34%,'$'+.)

(')%*+

('/%5',6

74%/8

('"/01

!"',-.'

!"#$%&'

Testy usability

Analiza wska!ników itesty u"yteczno#ci

Analiza i badaniasystemu

Wymagania biznesowe

Nadzór usability

Projekt

Prototyp

Ewaluacja

Cele u"ytkownikówTekst

Wymagania

Projektowanie

Projektowanie

Uruchomienie

Ekslpoatacja

Optymalizacja

Źródło: Erik Smit (Elsevier Amsterdam)  from SigChi conference in Amsterdam 2005

UCD - porównanie z modelem klasycznym

UCD - tnij koszty

Obniżaj koszty wdrożenia

Ogranicz czas wdrożenia

Ogranicz koszty zmian w grafice

Wzrost liczby transakcji/zakupów

Wzrost konwersji

Wzrost oglądalności witryny

UCD - tnij koszty

A jaki to ma wpływ na rynek bankowy?

A jaki to ma wpływ na rynek bankowy?

Zwiększenie sprzedaży- wyższa konwersja- otwieranie konta- zakup karty kredytowej- formularze kredytowe- lepsza informacja o nowych produktach i usługach

Zwiększenie lojalności- lepsza jakość obsługi (serwisy transakcyjne, informacyjne mobilne)- łatwiejszy kontakt z bankiem- satysfakcja z użytkowania

Obniżenie kosztów- odciążenie obsługi w punktach-modciążenie call-center-,niejsza liczba skarg i zażaleń

Wariant 2: Ewolucja czyli metoda małych kroków

Bank Millennium - Case Study

maj 2006 - styczeń 2007

testy z użytkownikami,

analiza ekspercka,

card sorting

2008-2009

obserwacja użytkownika i eyetracking na klikalnych prototypach HTML

serwisu informacyjnego i systemu transakcyjnego

Maj 2010

Zdalne badania z użytkownikami na działającym serwisie

Analiza i strategia Badania prototypów

Weryfikacja

6

Zmiana konwersji o 17% wartości na samą stronę „Oferta Indywidualna” w ciągu 3 miesięcy od wprowadzenia zmian.”

Konwersja na "Oferta Indywidualna"

40.78%34.66%

Przed Po

"Millennium""Oferta Indywidualna"

Poprawa nazewnictwa

„Proszę otworzyć konto w Banku Millennium.””

Konwersja formularzy

Zwiększenie konwersji nawet o 53% (dla kart kredytowych) dla osób indywidualnych w ciągu 3 miesięcy od uruchomienia serwisu.

”

Układ wniosków - Efekty

Zwiększenie konwersji nawet o 53% (dla kart kredytowych) dla osób indywidualnych w ciągu 3 miesięcy od uruchomienia serwisu.

Konwersja

19.57%

12.81%

Stary wniosek Nowy Wniosek

Przed Po

”

Badania on-line

Dzięki metodzie badań online możliwe jest obiektywne stwierdzenie:

• Jak użytkownik korzysta z serwisu w naturalnych warunkach?

• Jakie są naturalne nawyki osób badanych wobec eksplorowanego serwisu?

• Jakie obszary serwisu sprawiają użytkownikowi problemy?

• Zbadanie ścieżek zainteresowania, czyli kolejność, w jakiej osoba eksploruje serwis?

3

Podsumowanie

1. Użyteczność to nie tylko ładny interfejs - to dopasowanie produktu do potrzeb, kontekstu i otoczenia konkurencyjnego

2. User Experience to kontakt klienta z całym ekosystemem usług (nie tylko www)

3. User Centered Design to proces ciągły zakładający cykle iteracyjne i ciągłą pracę nad poprawą produktu

Podsumowanie

Dane kontaktowe

UseLab Sp. z o.o.ul. Żurawia 26/1000-515 Warszawa

tel. +48 22 863 20 71kontakt@uselab.pl

”

Wiesław KoteckiPrezes Zarządu UseLab Sp. z o.o.

wieslaw.kotecki@uselab.pltel. 505 185 939

Zapraszam do kontaktu