A presentation I've made for the UX/UI workshop in Szczecins Samsung Labo

1. User Experience i User Interface
w budowaniu prototypów
Czym to się klika?

2. Mam na imię Marcin Bauer i dziś
porozmawiamy o:
• Co to jest User Experience design i jakie są jego zastosowania
• Jak grafika ma wpływ na to jak wchodzimy w intreakcje z programem
• Jakie narzędzia możemy wykorzystać by zmierzyć efektywność naszego
produktu
• Cykl projektowania, jego poszczególne etapy i wariacje
• Różne rodzaje wireframeow ich podział i zastosowanie
• Podstawowe miary KPI
• Część warsztatowa
• Testowanie prototypów I wybór najlepszego
Całość potrwa 2,5h

3. ZARTUJE!
PREZENTACJA NIE BEDZIE TAK
WYGLĄDAĆ

4. Odczucia?

5. Mam na imię Marcin Bauer i dziś
porozmawiamy o:
• Co to jest User Experience design i jakie są jego zastosowania
• Jak grafika ma wpływ na to jak wchodzimy w intreakcje z programem
• Jakie narzędzia możemy wykorzystać by zmierzyć efektywność naszego
produktu
• Cykl projektowania, jego poszczególne etapy i wariacje
• Różne rodzaje wireframeow ich podział i zastosowanie
• Podstawowe miary KPI
• Część warsztatowa
• Testowanie prototypów I wybór najlepszego
Całość potrwa 2,5h

6. AGENDA
Prezentacja (30min)
Co to jest UX design
Cykl projektowania
Podział wireframeów
Narzędzia do projektowania
Synergia UI design
Podstawowe miary weryfikacji
Wstęp do prototypowania w UXPin.com
Warsztaty
Tworzymy prototyp w UXPin.com (60min)
Piszemy scenariusze testowe (30min)
Testujemy prototyp (30min)

7. Jakie zadanie ma UX design?
“…poprawić satysfakcję i lojalność klientów poprzez użyteczność, łatwość
użytkowania i przyjemność we wchodzeniu w interakcję z produktem.”
Oxford Journal Interacting With Computers

8. UX
Interaction
Design
Content
Strategy
User Interface
Typography
Usability
Functionality
Visual Design
Information
Architecture
Copyrighting
Technology
Psychology

9. POTRZEBY
BIZNESU UX

10. POTRZEBY
BIZNESU
POTRZEBY
UŻYTKOWNIKAUX

11. Co robi UX designer?
Zadaje pytania!

12. Dlaczego?
Bo sam nie jest swoim end-userem

13. User Centered Design
DESIGNMESURE
LAUNCH BUILD

14. The WWWWW’s of UX
What – Jaki problem produkt/usługa stara się rozwiazać?
Why – Dlaczego mają używać Twoj produkt/usługę? Jak wzbogaca ich życie?
Who – Kto jest grupą docelowa, jakie mają potrzeby, jakie przyzwyczajenia
Where – Gdzie mozna wprowadzić zmiany w istniejacych rozwiązaniach, na
jakich platformach (mobile/desktop)
When – Kiedy zacząć słuchać feedbacku użytkowników?

15. Skill unlocked!
Lvl1 Podstawowa Wiedza UX

16. Co to jest Wireframe i co umożliwia?
Wireframe jest to szkic (architektoniczny) interface’u tego co
chcemy zbudować

17. Wireframey komunikują:
Strukture nawigacji (architektura informacji)
Layout
Content
Funkcjonalności

18. Wireframe (lo-fi)
Cechy:
Skecze, czarno/białe, powierzchownie reprezetują interface
Zastosowanie:
Dokumentacja, komunikacja
Narzedzia:
Papier.com, uxpin.com, Illustrator, balsamiq, Keynote, PowerPoint,
Sketch
Rodzaje WIREFRAME -> MOCKUP -> PROTOTYP

20. Mockup(mid-hi fi)
Cechy:
Statyczne, docelowe treści, branding
Zastosowanie:
Wizualizacja, visual feedback
Narzedzia:
uxpin.com, hotgloo.com, justinmind.com, proto.io, inVision, Sketch
Rodzaje WIREFRAME -> MOCKUP -> PROTOTYP

21. https://dribbble.com/shots/2316407-Vigo-iOS-App-Mockups

22. Prototyp(mid-hi fi)
Cechy:
Interaktywne, kosztowne w produkcji (czas/ludzie),
Zastosowanie:
User testing, UI design
Narzedzia:
Axure, uxpin.com, Principle, Pixate, Solidify
Rodzaje WIREFRAME -> MOCKUP -> PROTOTYP

23. https://dribbble.com/shots/1914587-InVision-Mail-App-Prototype

24. http://www.cooper.com/prototyping-tools

25. http://www.cooper.com/prototyping-tools

26. http://www.cooper.com/prototyping-tools

27. http://www.cooper.com/prototyping-tools

28. Skill unlocked!
Lvl1 Narzędzia UX

29. User Interface
“Ale ja nie umiem rysować!”

30. You don’t have to reinvent the wheel!

31. “Pogromcy Mitów” – Discovery Channel

32. UI/UX Design Guidelines
Google Android/Wear Material Design
https://www.google.com/design/spec/material-design/introduction.html
Samsung Gear S (Tizen)
http://developer.samsung.com/technical-doc/view.do?v=T000000184#none
Apple iOS Human Interaction Guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
Windows 10 (Phone)
https://dev.windows.com/en-us/design

33. Czym jest interfejs?
Klawiatura?
Ekran dotykowy?
Guziki?
Jest to miejsce w ktorym dwie rzeczy się ‘łączą’:
interakcja człowieka z …

34. A/B testing

39. Pamiętaj!
Możemy naśladować innych ale myśl krytycznie!

40. mobilemozaic.com

41. pttrns.com

42. android-app-patterns.com

43. Material Design UI KIT

44. Material Design UI KIT

45. Material Design UI KIT

46. Skill unlocked!
Lvl1 Basics of UI design

47. Jakie testy wykonuje UX designer?
Card sorting (open/closed)
A/B testing
Scenariusze z moderatorem / ankiety
SUS
5s rule
Blur test

48. Card Sorting

49. A/B testing
50% wariant A >
50% wariant B >
> 43% konwersji
> 12% konwersji
WYPRÓBUJ
ZA DARMO!
ZOBACZ

50. Zadanie: Stwórz konto w aplikacji i zaloguj się.
Scenariusze z moderatorem

51. 1. I think that I would like to use this system frequently.
2. I found the system unnecessarily complex.
3. I thought the system was easy to use.
4. I think that I would need the support of a technical person to be able to use this system.
5. I found the various functions in this system were well integrated.
6. I thought there was too much inconsistency in this system.
7. I would imagine that most people would learn to use this system very quickly.
8. I found the system very cumbersome to use.
9. I felt very confident using the system.
10. I needed to learn a lot of things before I could get going with this system.
SUS (1986)

52. 5 second rule

53. Blur test (pijany użytkownik)

54. Key Performance Indicators:
Task Success rate
Time on Task
# of errors
# of clicks
Jak mierzymy?

55. Skill unlocked!
Lvl1 Basics of UX testing

56. UXPin: Wstęp
(10min)

57. Warsztaty: Tworzenie prototypu
(60min)

58. Warsztaty: Pisanie scenariuszy
(30min)

59. Warsztaty: Testowanie scenariuszy
(30min)

60. Ciekawe linki
studio.uxpin.com/ebooks
littlebigdetails.com
uxlabs.pl
smashingmagazine.com
uxstarter.pl
useronboard.com
uxdesignweekly.com
uxmag.com

61. Marcin Bauer
662 139 951
marcinbauer85@gmail.com
http://marcinbauer.com
facebook.com/marcin.bauer