Prezentacja Krzysztofa Piwowara z Adv.pl w ramach World Usability Day 2010!

1. prezentuje Krzysztof Piwowar Wspomaganie percepcji: niewerbalna komunikacja w formularzach i nie tylko :)

2. 1 ? Czym jest percepcja

3. Percepcją możemy nazwać 3 etapowy proces, w którym informacja jest: 1 selekcjonowana porządkowana interpretowana znaczenie

4. 2 Czym jest komunikacja niewerbalna ?

5. Jeśli myślimy o podstawowej definicji komunikacji niewerbalnej to dotyczy ona … 2 „ (…) wszystkich ludzkich zachowań postaw i obiektów innych niż słowa, które komunikują wiadomości i posiadają wspólne społeczne znaczenie. Obejmuje: wygląd fizyczny, ruch ciała, gesty, wyraz twarzy, ruch oczu, dotyk, głos oraz sposób wykorzystywania czasu i miejsca w komunikowaniu się. Nie zawiera jednak gestów które zawierają słowa, takich jak język migowy, ani słów pisanych lub przekazywanych elektronicznie (…)” definicja według S.P Morreale

6. A mówiąc prościej komunikacja niewerbalna to … 2 Ilustracja pochodzi ze strony: www.ehow.com Ilustracja pochodzi ze strony: thepoodleanddogblog.typepad.com

7. … ale co z sytuacją, kiedy mówimy o komunikacji w ramach interfejsu? 2 Ilustracje pochodzą ze stron: mytechnews.info, steepleashton.com

8. 2 interfejs analogowy

9. Niektóre interfejsy analogowe … 2 Ilustracja pochodzi ze strony: drivemileone.com

10. nie wspomagają percepcji! 2 Ilustracja pochodzi ze strony: clivesimpkins.blogs.com

11. Ale na szczęście są też takie, które to robią :) 2 Ilustracja pochodzi ze strony: drivemileone.com

12. Ale na szczęście są też takie, które to robią :) 2 Ilustracje pochodzą ze stron: asia.ru, faqs.org

14. kształt lub znak

15. sygnał dźwiękowy

16. „sygnał” wizualny lub imitacja ruchu

17. zapachIlustracja pochodzi ze strony: drivemileone.com, asia.ru, faqs.org

18. 2 interfejs cyfrowy (digital)

19. 2 Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com

21. kształt lub znak

22. sygnał dźwiękowy

23. „sygnał” wizualny

24. animacja (ruch)

25. haptic technology (forcefeedback)Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com

27. kształt lub znak

28. sygnał dźwiękowy

29. „sygnał” wizualny lub imitacja ruchu

31. kształt lub znak

32. sygnał dźwiękowy

33. „sygnał” wizualny

34. animacja (ruch)

35. haptic technology (forcefeedback)Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com

37. kształt lub znak

38. sygnał dźwiękowy

39. „sygnał” wizualny lub imitacja ruchu

41. kształt lub znak

42. sygnał dźwiękowy

43. „sygnał” wizualny

44. animacja (ruch)

45. haptic technology (forcefeedback)Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com

47. kształt lub znak

48. sygnał dźwiękowy

49. „sygnał” wizualny lub imitacja ruchu

51. kształt lub znak

52. sygnał dźwiękowy

53. „sygnał” wizualny

54. animacja (ruch)

55. haptic technology (forcefeedback)Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com

56. Pamiętamy? informacja jest: selekcjonowana porządkowana interpretowana znaczenie

57. 3 Jak możemy wspomóc percepcję ?

58. 3 komunikacja niewerbalna w formularzach

59. W formularzach można wyróżnić przynajmniej pięćobszarów, które mogą pośredniczyć w komunikacji niewerbalnej 3 Należą do nich: Obszar pomocy kontekstowej (tzw. hinty). Obszar komunikatów walidacyjnych. Obszar wizualizacji i rozmieszczenia elementów formularza. Obszar użytych oznaczeń. Obszar zachowania formularza w trakcie interakcji.

60. Obszar pomocy kontekstowej (tzw. hint) 3 Loremipsumdolor ikony dymki Zobacz pomocne informacje » elementy wywołujące

61. Obszar pomocy kontekstowej (tzw. hint) 3

62. Obszar komunikatów walidacyjnych 3 Loremipsumdolor ikony dymki oznaczenia elementów formularza ruch

63. Obszar komunikatów walidacyjnych 3

64. Obszar komunikatów walidacyjnych 3

66. rozmieszczenie poszczególnych elementów formularza względem siebie (labele, inputy, headery itd.)

67. sekcje

70. elementy aktywne, nieaktywne

71. pole zablokowane

72. pole z focusem

73. wygląd poszczególnych elementów formularza (pola, przyciski, komunikaty, linki itd.)

74. zakres oznaczeń (ikony)

77. zachowanie przy zaznaczaniu, odznaczaniu elementów

78. pojawienie się komunikatów

79. wczytywanie danych

80. ilustracja stanu działania

83. Obszar komunikatów walidacyjnych.

84. Obszar wizualizacji i rozmieszczenia elementów formularza.

85. Obszar użytych oznaczeń.

86. Obszar zachowania formularza w trakcie interakcji.porządkowana interpretowana

87. 4 Jakie narzędzia mogę zastosować ?

88. Możesz wykorzystać: 4 AJAX (AsynchronousJavaScript and XML) JavaScript CSS HTML5

89. 5 Jakie wyobrażamy sobie wspomaganie percepcji w przyszłości ?

90. 5 Augmented Reality - The Future of Education ( AraPacis ) Deep Green & Augmented Reality Pool http://www.youtube.com/watch?v=Q_xF8ujj7ko http://www.youtube.com/watch?v=AENJxqR0g48

91. 5 The Future of Self-Service Banking http://vimeo.com/14939329

92. prezentował Krzysztof Piwowar k.piwowar@adv.pl lub usability-onair.com Dziękuję za uwagę! Pytania?