Designing Mobile Services - InfoShare 2014 Deck

of 63 /63
Maciek Saganowski @saganon

description

Things to keep in mind while designing mobile services. Slides in Polish.

Transcript of Designing Mobile Services - InfoShare 2014 Deck

Page 1: Designing Mobile Services - InfoShare 2014 Deck

Maciek Saganowski@saganon

Page 2: Designing Mobile Services - InfoShare 2014 Deck

Designing Mobile Services

Maciek Saganowski@saganon

projektuję usługi

Page 3: Designing Mobile Services - InfoShare 2014 Deck

Designing Mobile Services

Page 4: Designing Mobile Services - InfoShare 2014 Deck

Designing Mobile Services

Page 5: Designing Mobile Services - InfoShare 2014 Deck

kolory

Page 6: Designing Mobile Services - InfoShare 2014 Deck

typografia

Page 7: Designing Mobile Services - InfoShare 2014 Deck

cienie

Page 8: Designing Mobile Services - InfoShare 2014 Deck

wizualne ornamenty

Page 9: Designing Mobile Services - InfoShare 2014 Deck

Designing Mobile Services= Decyzje

Page 10: Designing Mobile Services - InfoShare 2014 Deck
Page 11: Designing Mobile Services - InfoShare 2014 Deck
Page 12: Designing Mobile Services - InfoShare 2014 Deck
Page 13: Designing Mobile Services - InfoShare 2014 Deck
Page 14: Designing Mobile Services - InfoShare 2014 Deck
Page 15: Designing Mobile Services - InfoShare 2014 Deck
Page 16: Designing Mobile Services - InfoShare 2014 Deck
Page 17: Designing Mobile Services - InfoShare 2014 Deck
Page 18: Designing Mobile Services - InfoShare 2014 Deck
Page 19: Designing Mobile Services - InfoShare 2014 Deck
Page 20: Designing Mobile Services - InfoShare 2014 Deck
Page 21: Designing Mobile Services - InfoShare 2014 Deck
Page 22: Designing Mobile Services - InfoShare 2014 Deck
Page 23: Designing Mobile Services - InfoShare 2014 Deck
Page 24: Designing Mobile Services - InfoShare 2014 Deck
Page 25: Designing Mobile Services - InfoShare 2014 Deck

decyzja #1 jakie problemy rozwiązujemy

Page 26: Designing Mobile Services - InfoShare 2014 Deck
Page 27: Designing Mobile Services - InfoShare 2014 Deck

decyzja #2 jaki nasz produkt

ma nie być

Page 28: Designing Mobile Services - InfoShare 2014 Deck
Page 29: Designing Mobile Services - InfoShare 2014 Deck

decyzja #3 przez jakie kroki

ma przechodzić user i czego dotyka

Page 30: Designing Mobile Services - InfoShare 2014 Deck
Page 31: Designing Mobile Services - InfoShare 2014 Deck
Page 32: Designing Mobile Services - InfoShare 2014 Deck

- Offline (usługodawca) - Appstore - Email - Aplikacja - Klient - Aplikacja - Biznes - Web - Klient - Web - Biznes - Widget - Strona Biznesu

Touchpoints

Page 33: Designing Mobile Services - InfoShare 2014 Deck

` decyzja #4 mobile first?

Page 34: Designing Mobile Services - InfoShare 2014 Deck

–Janek Jabłonka

„Wpisz tu cytat.”

Page 35: Designing Mobile Services - InfoShare 2014 Deck
Page 36: Designing Mobile Services - InfoShare 2014 Deck
Page 37: Designing Mobile Services - InfoShare 2014 Deck
Page 38: Designing Mobile Services - InfoShare 2014 Deck

decyzja #5 jak ułatwić userowi

Page 39: Designing Mobile Services - InfoShare 2014 Deck

–Janek Jabłonka

Optymalizowaliśmy interfejs na 1 rękę

źródło: http://www.lukew.com/

Page 40: Designing Mobile Services - InfoShare 2014 Deck
Page 41: Designing Mobile Services - InfoShare 2014 Deck

pamiętając, że kciuk nie dosięga wszędzie

Page 42: Designing Mobile Services - InfoShare 2014 Deck

Źródło: http://bit.ly/yJ3N2d

Page 43: Designing Mobile Services - InfoShare 2014 Deck

domyślne wartości w formularzach = 4 razy

szybszy input

wystarczające odstępy między aktywnymi

elementami

Minimalna wielkość pojedynczego obszaru

dotyku - ok 7mm

Page 44: Designing Mobile Services - InfoShare 2014 Deck

zredukowaliśmy konieczną liczbę tapnięć

Page 45: Designing Mobile Services - InfoShare 2014 Deck

marginalizacja klawiatury

domyślne wartości w formularzu

szybka ścieżka

1 2 i 3 4 5

Page 46: Designing Mobile Services - InfoShare 2014 Deck

zastosowaliśmy tzw. progressive disclosure, pokazując tylko to co istotne, a reszta po

rozwinięciu

Page 47: Designing Mobile Services - InfoShare 2014 Deck

zastosowaliśmy tzw. progressive disclosure, pokazując tylko to co istotne, a reszta po

rozwinięciu

Page 48: Designing Mobile Services - InfoShare 2014 Deck
Page 49: Designing Mobile Services - InfoShare 2014 Deck
Page 50: Designing Mobile Services - InfoShare 2014 Deck

decyzja #6 jak się wyróżnić

Page 51: Designing Mobile Services - InfoShare 2014 Deck
Page 52: Designing Mobile Services - InfoShare 2014 Deck

Skrypt

Page 53: Designing Mobile Services - InfoShare 2014 Deck
Page 54: Designing Mobile Services - InfoShare 2014 Deck
Page 55: Designing Mobile Services - InfoShare 2014 Deck
Page 56: Designing Mobile Services - InfoShare 2014 Deck
Page 57: Designing Mobile Services - InfoShare 2014 Deck

decyzja #4 na ile web i mobile

mają się różnić?

Page 58: Designing Mobile Services - InfoShare 2014 Deck

Desktop vs. Mobile

Page 59: Designing Mobile Services - InfoShare 2014 Deck

–Janek Jabłonka

„Wpisz tu cytat.”

Page 60: Designing Mobile Services - InfoShare 2014 Deck
Page 61: Designing Mobile Services - InfoShare 2014 Deck

Design to decyzje

Page 62: Designing Mobile Services - InfoShare 2014 Deck