UX ma znaczenie.
O różnych podejściach do
projektowania interakcji na mobile.
Kraków, 24.05.2013
Agenda
1. Co to jest UX?
2. Benchmark vs Badania
3. Guidelines vs my way
4. Silosy vs Team
5. Beta vs alfa
6. Co zapamięta...
1. Co to jest UX?
Men in hats look up at the night sky, ca. 1945 © Bettmann
http://lawrenceripsher.com/post/49637077383/as-part-of-a-talk-yesterday-i-used-one-of-my
http://www.flickr.com/photos/mbgmbg/6073443866/
http://www.freeimages.co.uk/galleries/nature/environment/slides/roofducting.htm
Usability
User experience
Jaki jest cel? Co jest ważne? Co mogę zrobić?
Jaki jest cel? Co jest ważne? Co mogę zrobić?
Jaki jest cel? Co jest ważne? Co mogę zrobić?
“Design is not just about
making things more useful, it’s
not just about making things
more beautiful, it’s about
really f...
Poszukując odpowiedzi na pytanie,
co i jak zaprojektować…
http://www.flickr.com/photos/maurizio_costanzo/5906286785
Użytkownicy Cele biznesoweBiznes
Styl życia
Użytkownicy
Konkretne potrzeby
Akcje
(scenariusze użycia)
Marka
Pozycjonowanie
Kontekst użycia marki
Biznes
Fun...
http://jane-ta.tumblr.com/post/51051973787
Big Idea
Aplikacja powinna
jednoznacznie komunikować
wartość proponowaną
klientowi
Scream plakat
Airbnb iOS app
Airbnb
Find
a place to stay
Flipboard Android app
Flipboard
Create Your
Own
Magazines
Instagram Android app
Instagram
Fast beautiful
Photo sharing
http://25.media.tumblr.com/b99499d5e18974aa12ced854870df905/tumblr_mmw61eemMn1qb8vpuo1_1280.png
2. Benchmark vs badania
Cel: wzbudzić zainteresowanie
Jak w praktyce wygląda
poszukiwanie pomysłu na
aplikację?
http://www.freeimages.co.uk/galleries/nature/environment/slides/roofducting.htm
Biznes,
co aplikację
mobilną mieć chce
http://lawrenceripsher.com/post/49637077383/as-part-of-a-talk-yesterday-i-used-one-of-my
Benchmark
Badania
Doprowadź strukturę i flow
do niezbędnego minimum
http://lawrenceripsher.com/post/49637077383/as-part-of-a-talk-yesterday-i-used-one-of-my
Struktura i flow
http://lawrenceripsher.com/post/49637077383/as-part-of-a-talk-yesterday-i-used-one-of-my
Wewnętrzny test interakcji
http://thescienceofdesign.blogspot.com/2012/05/nina-leen.html
3. Guidelines vs my way
Guidelines
Android – action bar
1. Ikona aplikacji
2. Menu rozwijane (niekonieczny
element)
3. Action buttons
4. Dodatkowe buttony
Navigation drawer
Nawigacja w aplikacji
NET-A-PORTER - iOS NET-A-PORTER Android
Wstecz
NET-A-PORTER - iOS NET-A-PORTER Android
Up
podstawę
stanowi
hierarchia
w aplikacji
Wstecz
Działanie w
ramach
urządz...
Listy
NET-A-PORTER - iOS NET-A-PORTER Android
Windows phone
SKEUMORFIZM VS FLAT DESIGN
Skeumorfizm:
“Odtworzenie właściwości,
kształtu, tekstury, barwy lub
funkcji przedmiotu
oryginalnego w materiale
zastępczy...
iBooks Apple
GENEZA
• Wejście iPhone na rynek - 2007
rok
• Premiera iOS (systemu
operacyjnego na iPhone) -
zupełnie nowe spojrzenie na
...
Dlaczego Skeumorfizm?
 Celowe odniesienie do wyglądu i
działania realnych przedmiotów w
natywnych aplikacjach Apple.
 Po...
Zalety Wady
• Redukuje barierę w poznawaniu
nowego interfejsu przez
skojarzenia z naturalnymi
obiekatmi i mechanizmami
• P...
Flatdesign - Google i Microsoft w natarciu
Google Maps na ios
• Sukces Apple świadczy, że użytkownicy chcą płacić za dobry design
(urządzeń i aplikacji)
• Flat Design zrywa z przestarz...
Skeumorfizm vs Flat
Skeumorfizm vs Flat
Różne platformy, różne podejścia
Przykład
Brak wsparcia dla tabów po lewej na oknie dialogowym Androida
http://www.youtube.com/watch?v=S00H-rz7fGo
Clear
Różne podejścia do procesu
produkcyjnego
Linia produkcyjna vs teamwork
Kiedy publikujemy?
• Proces produkcyjny jest
długotrwały
• Kiedy aplikacja jest już
wystarczająco dobra?
• Wiele poprawek ...
Przykład 1 – ios 5 vs ios 6
Zmiana logowania do portali społecznościowych FB i
Twitter w aplikacji Stefczyk.INFO
Przykład 2 – feedback od
użytkowników
Kształtowanie aplikacji przez użytkowników
„If you can dream it, you can do it”
Walt Disney
Comprende?
Lemon Sky Spółka z ograniczoną odpowiedzialnością S.K.A.
ul. Fabryczna 19
53-609 Wrocław
NIP: 5862236051
Dziękujemy.
ul. ...
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
#IT fest 2013 -  UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile
Upcoming SlideShare
Loading in...5
×

#IT fest 2013 - UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile

2,054

Published on

Autor: Karolina Kobiela, Katarzyna Kozikowska (Lemon Sky)
Strona: www.itfest.pl
Facebook: https://www.facebook.com/festiwal.it
--------------------------------------
#IT fest to dwudniowy festiwal prezentujący kierunki oraz możliwości rozwoju kariery zawodowej w IT. W ramach projektu odbędą się targi pracy informatyka, prelekcje ekspertów z branży IT oraz warsztaty i szkolenia informatyczne.

Tematami #IT fest 2013 są:
- Optymalizacja (poruszane aspekty: Architektura, Praca w chmurze, Bezpieczeństwo)
- Big data (poruszane aspekty: Business Intelligence, Real Time Analysis)
- HR w IT (poruszane aspekty: Personal Brand w social media, Możliwości Rozwoju kariery w IT)
- Responsive Web Design/Mobile (poruszane aspekty: Tworzenie rozwiązań, Development)

Published in: Technology

Transcript of "#IT fest 2013 - UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile"

  1. 1. UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile. Kraków, 24.05.2013
  2. 2. Agenda 1. Co to jest UX? 2. Benchmark vs Badania 3. Guidelines vs my way 4. Silosy vs Team 5. Beta vs alfa 6. Co zapamiętać?
  3. 3. 1. Co to jest UX? Men in hats look up at the night sky, ca. 1945 © Bettmann
  4. 4. http://lawrenceripsher.com/post/49637077383/as-part-of-a-talk-yesterday-i-used-one-of-my
  5. 5. http://www.flickr.com/photos/mbgmbg/6073443866/
  6. 6. http://www.freeimages.co.uk/galleries/nature/environment/slides/roofducting.htm
  7. 7. Usability
  8. 8. User experience
  9. 9. Jaki jest cel? Co jest ważne? Co mogę zrobić?
  10. 10. Jaki jest cel? Co jest ważne? Co mogę zrobić?
  11. 11. Jaki jest cel? Co jest ważne? Co mogę zrobić?
  12. 12. “Design is not just about making things more useful, it’s not just about making things more beautiful, it’s about really figuring out what is the right thing to make and how to make it right” Matias Duarte, Director of User Experience, Android http://www.youtube.com/watch?feature=player_embedded&v=VDNngQjN6o4#!
  13. 13. Poszukując odpowiedzi na pytanie, co i jak zaprojektować…
  14. 14. http://www.flickr.com/photos/maurizio_costanzo/5906286785 Użytkownicy Cele biznesoweBiznes
  15. 15. Styl życia Użytkownicy Konkretne potrzeby Akcje (scenariusze użycia) Marka Pozycjonowanie Kontekst użycia marki Biznes Funkcjonalności Proponowana wartość Koncept na aplikację mobilną
  16. 16. http://jane-ta.tumblr.com/post/51051973787 Big Idea
  17. 17. Aplikacja powinna jednoznacznie komunikować wartość proponowaną klientowi
  18. 18. Scream plakat
  19. 19. Airbnb iOS app Airbnb Find a place to stay
  20. 20. Flipboard Android app Flipboard Create Your Own Magazines
  21. 21. Instagram Android app Instagram Fast beautiful Photo sharing
  22. 22. http://25.media.tumblr.com/b99499d5e18974aa12ced854870df905/tumblr_mmw61eemMn1qb8vpuo1_1280.png 2. Benchmark vs badania
  23. 23. Cel: wzbudzić zainteresowanie
  24. 24. Jak w praktyce wygląda poszukiwanie pomysłu na aplikację?
  25. 25. http://www.freeimages.co.uk/galleries/nature/environment/slides/roofducting.htm Biznes, co aplikację mobilną mieć chce
  26. 26. http://lawrenceripsher.com/post/49637077383/as-part-of-a-talk-yesterday-i-used-one-of-my
  27. 27. Benchmark
  28. 28. Badania
  29. 29. Doprowadź strukturę i flow do niezbędnego minimum
  30. 30. http://lawrenceripsher.com/post/49637077383/as-part-of-a-talk-yesterday-i-used-one-of-my Struktura i flow
  31. 31. http://lawrenceripsher.com/post/49637077383/as-part-of-a-talk-yesterday-i-used-one-of-my Wewnętrzny test interakcji
  32. 32. http://thescienceofdesign.blogspot.com/2012/05/nina-leen.html 3. Guidelines vs my way
  33. 33. Guidelines
  34. 34. Android – action bar 1. Ikona aplikacji 2. Menu rozwijane (niekonieczny element) 3. Action buttons 4. Dodatkowe buttony
  35. 35. Navigation drawer
  36. 36. Nawigacja w aplikacji NET-A-PORTER - iOS NET-A-PORTER Android
  37. 37. Wstecz NET-A-PORTER - iOS NET-A-PORTER Android Up podstawę stanowi hierarchia w aplikacji Wstecz Działanie w ramach urządzenia, a nie tylko aplikacji
  38. 38. Listy NET-A-PORTER - iOS NET-A-PORTER Android
  39. 39. Windows phone
  40. 40. SKEUMORFIZM VS FLAT DESIGN
  41. 41. Skeumorfizm: “Odtworzenie właściwości, kształtu, tekstury, barwy lub funkcji przedmiotu oryginalnego w materiale zastępczym” George Basalla: The Evolution of Technology
  42. 42. iBooks Apple
  43. 43. GENEZA • Wejście iPhone na rynek - 2007 rok • Premiera iOS (systemu operacyjnego na iPhone) - zupełnie nowe spojrzenie na interfejs i nawigację. • Wprowadzenie standardów dla twórców aplikacji na urządzenia Apple (Design guidelines)
  44. 44. Dlaczego Skeumorfizm?  Celowe odniesienie do wyglądu i działania realnych przedmiotów w natywnych aplikacjach Apple.  Pomoc w zniwelowaniu barier poznawania nowego interfejsu (rewolucja na tle powszechnych wówczas featurefonów Nokii i innych tradycyjnych komórek z klawiaturą
  45. 45. Zalety Wady • Redukuje barierę w poznawaniu nowego interfejsu przez skojarzenia z naturalnymi obiekatmi i mechanizmami • Pozwala na dużą ekspresję wizualną i bogatą oprawę aplikacji • Są nisze w których jest najlepszą i oczekiwaną estetyką, głównie kiedy odbiorcą jest młoda widownia. • Po 6 latach nie jest postrzegany jako innowacyjny, mimo wszystko nadal jest rozpoznawalny i lubiany. Nie wyznacza trendów. • Na tle nowoczesnych minimalistycznych aplikacji może wydawać się niedojrzały. • Bogaty w skomplikowane grafiki nie dba o ergonomię pobieranych danych. • Konkurencja (Google i Microsoft) promują inną estetyką i zdobywa tym samym klientów
  46. 46. Flatdesign - Google i Microsoft w natarciu
  47. 47. Google Maps na ios
  48. 48. • Sukces Apple świadczy, że użytkownicy chcą płacić za dobry design (urządzeń i aplikacji) • Flat Design zrywa z przestarzałą estetyką pozwalająć na innowacyjne minimalistyczne podejście. • Dzięki czemu stosujemy szybko ładujące się pliki graficzne • Stawia na stonowane kolory (nasz wzrok mniej się męczy przy świecących ekranach) • Pozwala nam na obsługę intuicyjnymi gestami • Lepsza czytelność treści Zalety Flat Design i jego ergonomia
  49. 49. Skeumorfizm vs Flat
  50. 50. Skeumorfizm vs Flat
  51. 51. Różne platformy, różne podejścia
  52. 52. Przykład Brak wsparcia dla tabów po lewej na oknie dialogowym Androida
  53. 53. http://www.youtube.com/watch?v=S00H-rz7fGo Clear
  54. 54. Różne podejścia do procesu produkcyjnego
  55. 55. Linia produkcyjna vs teamwork
  56. 56. Kiedy publikujemy? • Proces produkcyjny jest długotrwały • Kiedy aplikacja jest już wystarczająco dobra? • Wiele poprawek kosztuje czas • Dynamika zmian na poszczególnych platformach
  57. 57. Przykład 1 – ios 5 vs ios 6 Zmiana logowania do portali społecznościowych FB i Twitter w aplikacji Stefczyk.INFO
  58. 58. Przykład 2 – feedback od użytkowników Kształtowanie aplikacji przez użytkowników
  59. 59. „If you can dream it, you can do it” Walt Disney
  60. 60. Comprende?
  61. 61. Lemon Sky Spółka z ograniczoną odpowiedzialnością S.K.A. ul. Fabryczna 19 53-609 Wrocław NIP: 5862236051 Dziękujemy. ul. Elżbiety Drużbackiej 6 01-622 Warszawa

×