�ݺ�ߣ

World Usability Day Tour
13 listopada 2009
Wyzwania w projektowaniu
aplikacji mobilnych
Izabela 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!

usability@comarch.pl
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

�ݺ�ߣ

WUD 2009 - Wyzwania w projektowaniu aplikacji mobilnych

More Related Content

WUD 2009 - Wyzwania w projektowaniu aplikacji mobilnych