usability aplikacji mobilnych - wykład z wud tour 2009

World Usability Day Tour

World Usability Day Tour13 listopada 2009

World Usability Day Tour13 listopada 2009

Wyzwania w projektowaniu aplikacji mobilnychWyzwania w projektowaniu aplikacji mobilnych

Izabela HanusIzabela Hanus

www.comarch.pl


Comarch usability architekt • Od 2005 (marketing > usability)

• Sektor: Finanse, Bankowość i Ubezpieczenia

• M.in. aplikacje mobilne:– Inwestor Mobilny BZ WBK

– Bankowość mobilna Alior Bank


“A picture is worth a thousand words. An interface is worth a thousand

pictures.”

Ben Shneiderman

1 interfejs = 1 000 zdjęć

1 zdjęcie = 1 000 słów

1 interfejs = 1 000 x 1 000 = 1 000 000 słów


Agenda

• Mobilny świat

• Wyzwania w projektowaniu

• Wytyczne – krótkie case study

• Rozwój interfejsów


2/3 świata z urządzeniem mobilnym• Dane na 100 mieszkańców

Źródło: ITU World Telecommunication


Świat staje się (jest!) mobilny

• Urządzeń mobilnych jest na świecie: – 2 x więcej niż unikalnych posiadaczy rachunków bankowych

– 2,5 x więcej niż unikalnych posiadaczy kart kredytowych

– 4,6 x więcej niż użytkowników internetu (jedynie PC)

– 3 x więcej użytkowników niż zarejestrowanych zestawów TV

– 4 x więcej niż komputerów osobistych

Źródło: TomiAhonen Consulting


Top producenci

Źródło: Gartner, dane na 1Q 2009

• Wiodący producenci urządzeń mobilnych w Europie Zachodniej


Popularność smartfonów

• Udział smartfonów w sprzedaży urządzeń mobilnych

Źródło: Gartner


Top producenci

Źródło: Gartner, dane na 1Q 2009

• Wiodący producenci smartfonów w Europie Zachodniej


Wyzwania w projektowaniu


iPhone• Ekran: 320 x 480 px

• Interakcja: ekran dotykowy

• System: Mac OS

• Przeglądarka: Safari


Nokia E61• Ekran: 320 x 240 px

• Interakcja: QWERTY+ joystick

• System: Symbian OS v9.1

• Przeglądarka: Minuet


HTC Diamond• Ekran: 480 x 650 px


• System: MS Windows Mobile 6.0 Pro

• Przeglądarka: Opera


Samsung Omnia• Ekran: 240 x 400 px


• System: MS Windows Mobile 6.1 Pro

• Przeglądarka: Opera


Rozpiętość parametrów jest obszerna

• Projektuj dla „wybranej grupy” o określonych parametrach

• Korzystaj z baz parametrów urządzeń mobilnych


Co oznacza zmieniający się kontekst?


Kontekst jest skomplikowany

• Użytkownik jest mobilny, urządzenie przy okazji

• Projektuj z myślą o „przerywanej uwadze” i zakłóceniach

• Opcje muszą być zawsze widoczne

• Pamiętaj o wyraźnym kontraście między treścią a tłem


PC vs mobile

• Przewidywalne otoczenie

• Duży ekran umożliwiający

wykonanie wielu zadań

• Klawiatura i mysz do wprowadzania

danych


PC vs mobile

• Zmieniające się i nieprzewidywalne

otoczenie

• Mały ekran i utrudnione

wprowadzanie danych

• UI na całym ekranie


Urządzenie mobilne nie jest komputerem

• Nie przenoś aplikacji 1:1

• Skoncentruj się na potrzebach użytkownika a nie na rozwiązaniu

• Miej na uwadze ograniczenia urządzeń mobilnych


Inne wyzwania

• Ograniczona żywotność baterii

• Bezpieczeństwo

• Kwestie prywatności

• Koszt pobieranych danych


Jak sobie radzić z tymi wyzwaniami?


m.Alior – case study• Uzupełnienie bankowości internetowej

– Dodatkowa warstwa prezentacji dla wspólnej logiki biznesowej

• Ograniczenie funkcjonalności w stosunku do bankowości internetowej– Brak filtrów zaawansowanych

– Brak możliwości generowania plików wyciągów (pdf, CSV)

• Testy na przeglądarkach, m.in.:– Internet Explorer

– Opera for Windows Mobile


m.Alior• Standardowy ekran 240 x 320 px (QVGA)

• Prosta struktura – menu główne

• Możliwość wylogowania z każdego poziomu zawsze na dole ekranu

• „Odchudzone strony” – max 20 kB

• Button „Powrót” w kolorze odróżniającym się od akcji pierwotnych umożliwiający powrót do poprzedniego poziomu

• Nawigacja na dole ekranu


m.Alior• Ograniczenie pól do wprowadzania

danych (listy wyboru, radiobuttony)

• Do walidacji formularzy nie jest używany Java Script

• Etykiety blisko pól tekstowych

• Ekrany pośrednie z ponowną prezentacją danych oraz zapytaniem o ostateczne potwierdzenie

• Scroll zamiast dodatkowego ekranu


Rozwój interfejsów• Gesture-based Interface

– Interakcje za pomocą gestów

• Augmented reality– Podgląd na żywo rzeczywistości

• Beyond screen– Przenoszenie kontentu poza urządzenie

mobilne


Podsumowanie

• Wraz z rozwojem rynku mobilnego rozwijają się

aplikacje mobilne

• One również muszą (i mogą!) być usable

• Przede wszystkim należy pamiętać o użytkowniku


Każdy kiedyś musi zacząć, a więc…


Powodzenia!


[email protected]@comarch.pl

Dziękuję za uwagęDziękuję za uwagę

www.comarch.pl


Przydatne adresy

• Wytyczne W3C– http://www.w3.org/Mobile/

• dotMobi– http://mtld.mobi/

• Baza urządzeń mobilnych:– http://deviceatlas.com/

• Emulatory: – http://www.ready.mobi

usability aplikacji mobilnych - wykład z wud tour 2009

Economy & Finance

ekran dotykowy system

iphone ekran

alior standardowy ekran

px interakcja

wiat staje si jest

nokia e61 ekran

htc diamond ekran

samsung omnia ekran