infoshare 2014: maciej saganowski, designing mobile services

63
Maciek Saganowski @saganon

Post on 21-Oct-2014

224 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: infoShare 2014: Maciej Saganowski, Designing Mobile Services

Maciek Saganowski@saganon

Page 2: infoShare 2014: Maciej Saganowski, Designing Mobile Services

Designing Mobile Services

Maciek Saganowski@saganon

projektuję usługi

Page 3: infoShare 2014: Maciej Saganowski, Designing Mobile Services

Designing Mobile Services

Page 4: infoShare 2014: Maciej Saganowski, Designing Mobile Services

Designing Mobile Services

Page 5: infoShare 2014: Maciej Saganowski, Designing Mobile Services

kolory

Page 6: infoShare 2014: Maciej Saganowski, Designing Mobile Services

typografia

Page 7: infoShare 2014: Maciej Saganowski, Designing Mobile Services

cienie

Page 8: infoShare 2014: Maciej Saganowski, Designing Mobile Services

wizualne ornamenty

Page 9: infoShare 2014: Maciej Saganowski, Designing Mobile Services

Designing Mobile Services= Decyzje

Page 10: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 11: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 12: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 13: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 14: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 15: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 16: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 17: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 18: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 19: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 20: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 21: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 22: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 23: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 24: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 25: infoShare 2014: Maciej Saganowski, Designing Mobile Services

decyzja #1 jakie problemy rozwiązujemy

Page 26: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 27: infoShare 2014: Maciej Saganowski, Designing Mobile Services

decyzja #2 jaki nasz produkt

ma nie być

Page 28: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 29: infoShare 2014: Maciej Saganowski, Designing Mobile Services

decyzja #3 przez jakie kroki

ma przechodzić user i czego dotyka

Page 30: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 31: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 32: infoShare 2014: Maciej Saganowski, Designing Mobile Services

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

Touchpoints

Page 33: infoShare 2014: Maciej Saganowski, Designing Mobile Services

` decyzja #4 mobile first?

Page 34: infoShare 2014: Maciej Saganowski, Designing Mobile Services

–Janek Jabłonka

„Wpisz tu cytat.”

Page 35: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 36: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 37: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 38: infoShare 2014: Maciej Saganowski, Designing Mobile Services

decyzja #5 jak ułatwić userowi

Page 39: infoShare 2014: Maciej Saganowski, Designing Mobile Services

–Janek Jabłonka

Optymalizowaliśmy interfejs na 1 rękę

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

Page 40: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 41: infoShare 2014: Maciej Saganowski, Designing Mobile Services

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

Page 42: infoShare 2014: Maciej Saganowski, Designing Mobile Services

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

Page 43: infoShare 2014: Maciej Saganowski, Designing Mobile Services

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: infoShare 2014: Maciej Saganowski, Designing Mobile Services

zredukowaliśmy konieczną liczbę tapnięć

Page 45: infoShare 2014: Maciej Saganowski, Designing Mobile Services

marginalizacja klawiatury

domyślne wartości w formularzu

szybka ścieżka

1 2 i 3 4 5

Page 46: infoShare 2014: Maciej Saganowski, Designing Mobile Services

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

rozwinięciu

Page 47: infoShare 2014: Maciej Saganowski, Designing Mobile Services

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

rozwinięciu

Page 48: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 49: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 50: infoShare 2014: Maciej Saganowski, Designing Mobile Services

decyzja #6 jak się wyróżnić

Page 51: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 52: infoShare 2014: Maciej Saganowski, Designing Mobile Services

Skrypt

Page 53: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 54: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 55: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 56: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 57: infoShare 2014: Maciej Saganowski, Designing Mobile Services

decyzja #4 na ile web i mobile

mają się różnić?

Page 58: infoShare 2014: Maciej Saganowski, Designing Mobile Services

Desktop vs. Mobile

Page 59: infoShare 2014: Maciej Saganowski, Designing Mobile Services

–Janek Jabłonka

„Wpisz tu cytat.”

Page 60: infoShare 2014: Maciej Saganowski, Designing Mobile Services
Page 61: infoShare 2014: Maciej Saganowski, Designing Mobile Services

Design to decyzje

Page 62: infoShare 2014: Maciej Saganowski, Designing Mobile Services