WPAM. W6 (Mobilny) interfejs użytkownika cz. 1. Piotr Gawrysiak

Transkrypt

1 WPAM W6 (Mobilny) interfejs użytkownika cz. 1 Piotr Gawrysiak pgawrysiak@supermedia.pl Politechnika Warszawska Instytut Informatyki Zakład Systemów Informacyjnych CC-BY-SA Piotr Gawrysiak 2011

2 Interfejs mobilny czyli jaki??? Interfejs dla aplikacji mobilnej tj. działającej na urządzeniu mobilnym Urządzenie mobilne == smartphone (ad. 2011) Przypomnienie #1: Smartphone to nie jest telefon (To jest telefon)

3 Interfejs mobilny czyli jaki??? Przypomnienie #2: Smartphone to nie jest komputer (to jest komputer) Przewidywalne środowisko pracy Przewidywalny scenariusz pracy (sesja) Wygodne mechanizmy wprowadzania danych (klawiatura, mysz) Duży monitor (prezentacja informacji, multitasking itd.) Foto - Avi Abrams

4 OK, i co z tego??? Smartphone to jednocześnie komputer, telefon a także notatnik, książka, aparat fotograficzny, magnetofon, kamera wideo, konsola do gier, portfel, latarka, zegarek, budzik Środowisko pracy (czy nawet scenariusz użytkowania) trudny do przewidzenia Sesja jeśli jest sens ją definiować bardzo krótka Mały ekran, klawiatura (jeśli jest) Jednocześnie najbardziej bodajże ludzkie urządzenie techniczne jakie do tej pory udało się nam wymyśleć

5 Sposób użytkowania (vs. komputer) Różnice sprzętowe (mały ekran itp. ale wiele czujników, zasilanie bateryjne itp.) Urządzenie osobiste należy (zwykle) do jednego tylko użytkownika Urządzenie przenośne używane w ruchu (obsługa jedną ręką, krótki czas dostępu do urządzenia ) Zawsze włączone może być obudzone w dowolnym momencie, przez użytkownika lub np. przez sieć Zawsze podłączone zarówno samo posiada dostęp do sieci, jak też jest w każdej chwili osiągalne, ale Zasilane bateryjnie co wymaga oszczędności energii, zaś z połączeniami bywają problemy

6 Sposób użytkowania (vs. komputer) Zaczynamy używać więcej niż jednego urządzenia do wykonania pojedynczej czynności (workflow) np: Sprawdzamy pocztę elektroniczną wykorzystując telefon, zaś dłuższe odpowiedzi tworzymy używając komputera Wybieramy najciekawsze zdjęcia z kolekcji używając telefonu, a następnie retuszujemy w programie komputerowym itd. Urządzenia (nie tylko mobilne) mogą (i powinny) uzupełniać wzajemnie swoją funkcjonalność Dearman, D. and Pierce, J. S "It's on my other computer!": computing with multiple devices, CHI 2008, Florence, Italy, 2008

7 Sposób użytkowania (vs. komputer) Charakterystyka interakcji mobilnej: Przede wszystkim konsumpcja informacji Krótki czas trwania (średnio mniej niż 1 minuta) i łatwość przerwania sesji (np. ktoś dzwoni, wreszcie przyjechał autobus itp.) Inny sposób wykorzystania urządzeń w zależności od lokalizacji (dom, praca, podróż itd.) Ważny czas dostępu i inicjalizacji interakcji - np. odpowiadanie na Mobile Desktop #1 Desktop #2 Access Initialize Work

8 Wniosek? Tak się nie da tylko czy to źle??? Miniaturyzacja zła! Umobilnienie dobre!

9 Mobile opportunity Tworzenie aplikacji mobilnej może być okazją do wynalezienia nowych sposobów obsługi i interakcji z użytkownikiem. W 1996 roku też nie bardzo wiedzieliśmy na czym polegają silne strony Internetu

10 Intermedium - UI vs UX vs Usability Kilka skrótów (i problemów): UI user interface UI user interaction (także HMI human machine interface/interaction) UX user experience Obecnie UI to raczej niemodny skrót, obowiązuje UX jako określenie obejmujące całokształt doświadczeń związanych z korzystaniem z aplikacji i urządzenia mobilnego (a zatem nie tylko Usability ( użyteczność ) łatwość obsługi, łatwość opanowania interfejsu, jego przyjazność dla użytkownika Interfejs łatwy do nauczenia wcale nie musi być łatwy/efektywny w użyciu (np. VIM, narzędzia CAD itp.) Discoverability łatwość odkrycia funkcji i możliwości interfejsu Czy zawsze potrzebna jest ta interakcja???

11 Problem #1 brak klawiatury Wprowadzanie danych (interakcja!) jest jednym z największych problemów w przypadku interfejsu mobilnego. Typowe rozwiązania: Stosowanie sensownych (najbardziej prawdopodobnych) wartości domyślnych Auto-completion (inteligentne nie tylko oparte tylko o słownik) Alternatywne metody wprowadzania danych: Barcode Mowa Kamera Specjalizowane (ale sensowne) kontrolki Cel: Minimalizacja liczby naciśnięć i możliwości popełnienia błędu

12 Problem #2 interfejs dotykowy Dokładność ekranów pojemnościowych jest wciąż marna palcem możemy wskazywać jedynie duże obiekty Urządzenie może być obsługiwane jedną ręką najczęściej wykorzystywane elementy interfejsu powinny znajdować się w strefie dostępnej (pamiętajmy także o osobach innoręcznych ) albo przynajmniej w dolnej części ekranu Wykorzystujmy (jeśli urządzenie jest w nie wyposażone) fizyczne przyciski First ELSE (RIP)

13 Problem #2 interfejs dotykowy

14 Powtórka prawo Fitts a Formalnie : MT = a + b log 2 (2A/W + c) gdzie MT czas reakcji A odległość do środka celu W szerokość celu a, b, c stałe, zależne od urządzenia Po ludzku łatwiej jest trafić w element interfejsu który jest blisko i który jest duży Fitts,P.M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47,

15 Wnioski z prawa Fitts a W interfejsach klasycznych istnieją elementy, które: mają nieskończone wymiary: rogi ekranu brzegi ekranu do których odległość jest zawsze zerowa: pop-up menu (magic pixel) Co prawo Fitts a oznacza dla interfejsów dotykowych wielkość elementów interfejsu ma znaczenie Pop-ups są wciąż istotne (ale trudniej je aktywować ) Nie możemy korzystać z efektu rogów ekranu, ale możemy wykorzystywać gesty (gestures)

16 Spatial memory "Spatial or spacial adj - relating to or occurring in space." Spatial (ew. muscle) memory pamięć motoryczna, pozwalająca nam (tj. ludzkiemu mózgowi) automatyzować często wykonywane czynności. Znacznie łatwiej trafić te elementy interfejsu, które znajdują się w miejscach których użytkownik się spodziewa.

17 Intermedium conceptual model Jeśli użytkownik będzie miał niewłaściwe wyobrażenie o tym, w jaki sposób jego akcje wpływają na działanie naszej aplikacji, to z pewnością sobie z nią nie poradzi Klasyczne przykłady (Donald A. Norman) : kuchenka (physical mapping) lodówka (conceptual mapping)

18 Lodówka D. Normana Problem: Zamrażalnik za bardzo ziębi, a lodówka chłodzi tak jak powinna. Jak ustawić pokrętła, aby zamrażalnik był cieplejszy, a temperatura lodówki się nie zmieniła?

19 Lodówka D. Normana

20 Lodówka D. Normana

21 Prezentacja informacji Skoro interakcja jest kosztowna to należy jej unikać. W niektórych przypadkach samo zaprezentowanie informacji może okazać się wystarczające dla użytkownika E. Tufte, Visual Display of Quantitative Information, Graphics Press, 2001

22 Prezentacja informacji Teoretycznie dysponujemy ponadto informacją o kontekście użytkownika, która może ułatwić nam ograniczenie możliwych sposobów interakcji (np. automatyczny tryb nocny/dzienny - ale należy pamiętać o override )

23 Kontekst A Foto - Rachel Hinman

24 Prezentacja informacji Bret Victor, Magic Ink,

25 Problem #3 Mały ekran A dokładniej: Aplikacja zajmuje zawsze cały ekran (pomimo, iż może nie być jedyną działającą) - multitasking Dzielenie informacji pomiędzy aplikacjami nie jest proste (copy-paste jest trudne, przeciąganie właściwie niemożliwe) Zdarzenia zewnętrzne (wiadomości SMS, telefony itp.) powodują, z konieczności, zmianę trybu pracy całego urządzenia (i zmianę scenariusza użytkowania) Wreszcie - wizualizacja dużych ilości danych nie jest prosta (ba, nawet czytanie dużej ilości tekstu nie jest przyjemne)

26 Problem #3 typowe rozwiązania Ograniczanie do minimum konieczności wymiany informacji klasycznymi metodami (zatem zamiast copy-paste rozpoznawanie typowych typów danych np. adresów stron WWW, numerów telefonów itp. i możliwość bezpośredniego wywołania pewnych akcji) Customization pozwólmy użytkownikowi zdecydować które elementy interfejsu powinny być większe, a które mniejsze Unikanie modalnych elementów interfejsu, właściwe odtwarzanie stanu aplikacji

27 Problem #3 nietypowe rozwiązania Ekran jest większy niż nam się wydaje: 1. ZUI (zooming user interfaces) Jef Raskin Pinch gesture mobilne przeglądarki internetowe Microsoft Seadragon (teraz zoom.it) 2. Microsoft Hubs (Windows Phone 7)

28 Przykład PULSE RSS Tu próba rozwiązania zarówno problemu #2 jak i #3

29 Problem #4 Zasilanie bateryjne i sieć Energię należy oszczędzać, zaś dostęp do sieci wykorzystywać jak najbardziej efektywnie (to także kwestia kosztów) Należy unikać ciągłej komunikacji z siecią Najczęściej wykorzystywane dane należy zapisać w pamięci urządzenia Do maksimum wykorzystać możliwość przechowania kopii roboczych danych (cache) Użytkownik powinien mieć możliwość pełnej kontroli nad przechowywanymi danymi (w szczególności możliwość ich przygotowania a priori Gdy dane są nieaktualne, nie należy tego ukrywać przed użytkownikiem

30 Spójność (consistency) Większość platform mobilnych posiada spisane reguły tworzenia elementów interfejsu użytkownika (tzw. HIG Human Interface Guidelines) np.: Nokia Series 40 UI Style Guide Bada Application UI Guide iphone Human Interface Guidelines ipad Human Interface Guidelines UI Guidelines for BlackBerry 6.0 Smartphones W większości przypadków warto zastosować się do wytycznych, niż starać się tworzyć własną estetykę interfejsu użytkownika. Jeśli zaś się odróżniać to drastycznie!

31 Ekspresja Interfejs mobilny nie pozostawia zbyt dużego marginesu błędu twórcy aplikacji: Zanim zaczniemy pisać kod zastanówmy się zatem przez chwilę

32 Prototypowanie

33 Prototypowanie Rachel Hinman, Adaptive Path

34 Prototypowanie Funkcje Najpierw pytanie

35 Prototypowanie Czy możemy z naszych funkcji złożyć odpowiedź?

36 Beauty A przede wszystkim interfejs użytkownika powinien być piękny

37 Cdn.