UX w projektowaniu mobilnym
(programisto zrozum dizajnera)
@emiliamaj
YOU ARE
THE CSS
TO MY
HTML
zrozumieć
współpracować
uczyć się od siebe
Jak powstaje aplikacja
mobilna?
1. Analiza
3. Grafika
2. Makiety
4. Implementacja
analiza
• Co chcemy zrobić?
• Jaka będzie najważniejsza funkcjonalnośc?
• Co zyska użytkownik?
• Dla kogo projektujemy? (persony)
• Jakie cele i motywacje ma użytkownik?
• W jakim kontekście będzie używana aplikacja?
• Jak będzie wyglądała interakcja z produktem ?
analiza wymagań
Potrzeby
Funkcjonalności
gromadzenie danych
rejestracja konta
system rekomendacji
możliwość oceny
sugerowanie miejsc
zaangażowanie
geolokalizacja
sharowanie
spisuj i grupuj: wymagania, potrzeby, pomysły, inspiracje
feedback – podziel się wynikiem z zespołem i każdym
kto wyrazi konstruktywną opinię
analiza wymagań
Must be
Should have
Nice to have
makieta – wstępna i mało dokładna koncepcja projektu
makieta
• rysuj szybko: ściana + flamaster
• pokaż tylko najważniejsze funkcje
• szukaj różnych podejść, nie zatrzymuj się na jednym,
nawet jeśli ci się podoba
• prześledź wiele rozwiązań
każdy rysuje 4, 2 i 1 wersję; następnie: jedną wspólną
• jeśli nie wiesz co robić, to rysuj cokolwiek
najważniejsze to myśleć głośno i to rysować
• jeśli się pogubisz zacznij od początku
architektura informacji – to sposób uporządkowania
i wzajemnego powiązania informacji w systemie
• Organizacja
• Nazewnictwo
• Nawigacja
• Wyszukiwanie
użyteczność – łatwość, z jaką użytkownik może
osiągnąć swój cel
Heurystyki wg Jakoba Nielsen:
Nauczalność – jak łatwo jest wykonać proste zadania
przy pierwszym kontakcie z produktem
Efektywność – jak szybko korzystają z produktu
użytkownicy, którzy go już znają
Zapamiętywalność– łatwość przypomnienia sobie
korzystania z produktu po przerwie
Błędy– jak często są popełniane i jak łatwo
użytkownicy mogą z nich wyjść
Satysfakcja – jak bardzo produkt przyjemny
jest w korzystaniu
Projektowanie zorientowane na użytkownika
(User Centered Design) – użytkownicy zostają
zaangażowani w proces projektowy, aby rozpoznać
ich potrzeby, ograniczenia i cele
• każdy etap tworzenia produktu przebiega przy udziale
użytkowników (od wywiadu wstępnego, aż po testy końcowe)
• potrzeby i zachowania użytkownika stanowią podstawę
dla hierarchii informacji i nawigacji
• cele biznesowe, funkcjonalności i możliwości technologiczne
są na drugim miejscu
• produkt jest bardziej wydajny, zadowalającego i przyjazny
„User Experience encompasses all
aspects of the end-user [on-linae] interaction
with the company, its services and products.”
Nielsen Norman Group, „User Experience - Our Definition”
heurystyki
Heurystyki wg Donald Norman:
Visibility – widzę do czego, to służy
Feedback – widzę efekty swoich działań
Constraints – wiem czemu nie mogę czegoś zrobić
Mapping – wiem gdzie jestem i jak mam się poruszać
Consistency – poznaję podobne elementy systemu
Afordance – wiem, co mam zrobić
visibility – widzę do czego, to służy
feedback – widzę efekty swoich działań
constraints – wiem czemu nie mogę czegoś zrobić
mapping – wiem gdzie jestem i jak mam się poruszać
consistency – poznaję podobne elementy systemu
afordancja – wiem, co mam zrobić
afordancja
afordancja
afordancja
dobre rady
• nie myśl rozwiązaniami a potrzebami
• myśl o użytkowniku jako o osobie mobilnej
• maksymalnie upraszczaj
• projektuj jedną funkcjonalność per widok
• im mniej kroków do przejścia, tym lepiej
• nie powielaj funcjonalności (a logicznie grupuj)
• obserwuj aplikacje globalne (model mentalny)
ograniczenie informacji
• Mamy tendencję do dzielenia informacji w większe
grupy zawierające po 3-4 elementy (np. numery
telefonów 506–99–85–97). Krokowe wybory
w nawigacji są zwykle lepsze
• Gubimy się w bardzo„zagłębionych” systemach
• Mamy trudności z efektywnym wyborem spośród
większej liczby wariantów niż 3-4 obiekty
paradoks wyboru – jesteśmy nieszczęśliwi, kiedy mamy
zbyt dużo możliwości i często nie wybieramy nic
(tzw. paraliż decyzyjny)
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
• Performa
635
636
637
638
640
5200
5215
5300
6110
6112
6115
6116
6117
6118
6200
6205
6214
6216
6218
6220
6230
6290
6300
• Performa 200
• Performa 400
• Performa 405
• Performa 410
• Performa 430
• Performa 450
• Performa 460
• Performa 466
• Performa 467
• Performa 475
• Performa 476
• Performa 550
• Performa 560
• Performa 575
• Performa 577
• Performa 578
• Performa 580
• Performa 600
• Performa 630
• Performa 631
• Quadra
605
• Centris/Quadra 610
• Quadra
630
• Centris/Quadra 650
• Centris/Quadra 660
• Quadra 800
• Quadra 840
• Quadra 950
• Power Mac 5200
• Power Mac 5300
• Power Mac 6100
• Power Mac 6200
• Power Mac 7100
• Power Mac 7200
• Power Mac 7500
• Power Mac 8100
• Power Mac 8500
• Power Mac 9500
• PowerBook145
• PowerBook150
• PowerBook160
• PowerBook165
• PowerBook180
• PowerBook190
• PowerBookDuo 210
• PowerBookDuo 230
• PowerBookDuo 250
• PowerBookDuo 270
• PowerBookDuo 280
• PowerBook520
• PowerBook540
• PowerBookDuo 2300
• PowerBook5300
Produkty
Apple w latach
90-tych
paradoks wyboru
Produkty Apple ok. 2000 r. po redukcji przez S. Jobsa
prostota wizualna
Letterpress by
Loren Brichter,
multitasking
• Ludziesą w stanie świadomie robić tylko jedną
rzecz na raz
• Wyjątkiem są dobrze opanowane aktywności
fizyczne (jazda na rowerze, samochodem)
• Możemy się najwyżej szybko przełączać
między zadaniami
pole ostrego widzenia – to ok. 2,5 cm ; Ograniczaj liczbę
elementów i dbaj o ich właściwe wyróżnienie
pierwszy ekran – jest najważniejszy!
Użytkownik ma zrobić i zobaczyć to czego oczekuje
FUX (First User Experience) – jeśli interfejs może być
skomplikowany, ucz jak z niego korzystać
sugestie
max. wykorzystanie ekranu
bezpośrednia interakcja
gesty
Flat Pomodoro
minimalizm
Eve Nap Timer
flat design
Timelet
typografia
SMOG
Emilia Maj
UX & Graphic Designer
@emiliamaj
www.wearemonk.com
www.emimaj.com
emi@wearemonk.com