O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
prezentuje<br />Krzysztof Piwowar<br />Wspomaganie percepcji: niewerbalna komunikacja w formularzach    i nie tylko :)<br />
1<br />?<br />Czym jest percepcja<br />
Percepcją możemy nazwać 3 etapowy proces, <br />w którym informacja jest:<br />1<br />selekcjonowana<br />porządkowana<br ...
2<br />Czym jest komunikacja niewerbalna<br />?<br />
Jeśli myślimy o podstawowej <br />definicji komunikacji<br />niewerbalnej to dotyczy ona …<br />2<br />„ (…) wszystkich lu...
A mówiąc prościej komunikacja niewerbalna to …<br />2<br />Ilustracja pochodzi ze strony: www.ehow.com<br />Ilustracja poc...
… ale co z sytuacją, kiedy<br />mówimy o komunikacji<br />w ramach interfejsu?<br />2<br />Ilustracje pochodzą ze stron: m...
2<br />interfejs analogowy<br />
Niektóre interfejsy  analogowe …<br />2<br />Ilustracja pochodzi ze strony: drivemileone.com<br />
nie wspomagają percepcji!<br />2<br />Ilustracja pochodzi ze strony: clivesimpkins.blogs.com<br />
Ale na szczęście są też takie,<br />które to robią :)<br />2<br />Ilustracja pochodzi ze strony: drivemileone.com<br />
Ale na szczęście są też takie,<br />które to robią :)<br />2<br />Ilustracje pochodzą ze stron: asia.ru, faqs.org<br />
Za pomocą jakich nośników lub form przekazu odbywa się tutaj komunikacja?<br />2<br />Są to:<br /><ul><li>barwa
kształt lub znak
sygnał dźwiękowy
„sygnał” wizualny lub imitacja ruchu
zapach</li></ul>Ilustracja pochodzi ze strony: drivemileone.com, asia.ru, faqs.org<br />
2<br />interfejs cyfrowy (digital)<br />
2<br />Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com<br />
Za pomocą jakich nośników lub form przekazu odbywa się tutaj komunikacja?<br />2<br />Są to:<br /><ul><li>barwa
kształt lub znak
sygnał dźwiękowy
„sygnał” wizualny
animacja (ruch)
haptic technology (forcefeedback)</li></ul>Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com<br />
Podsumowując …<br />2<br />VS.<br />Dla i. analogowych są to:<br /><ul><li>barwa
kształt lub znak
sygnał dźwiękowy
„sygnał” wizualny lub imitacja ruchu
zapach</li></ul>Dla i. cyfrowych są to:<br /><ul><li>barwa
kształt lub znak
sygnał dźwiękowy
„sygnał” wizualny
animacja (ruch)
haptic technology (forcefeedback)</li></ul>Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com<br />
Podsumowując …<br />Co z tych elementów można wykorzystać w komunikacji w formularzach?<br />2<br />VS.<br />Dla i. analog...
kształt lub znak
sygnał dźwiękowy
„sygnał” wizualny lub imitacja ruchu
zapach</li></ul>Dla i. cyfrowych są to:<br /><ul><li>barwa
kształt lub znak
Terminou este documento.
Próximos SlideShares
EMG Biofeedback
Avançar
Próximos SlideShares
EMG Biofeedback
Avançar

Compartilhar

Krzysztof Piwowar "Wspomaganie percepcji: niewerbalna komunikacja w formularzach i nie tylko :)"

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

Krzysztof Piwowar "Wspomaganie percepcji: niewerbalna komunikacja w formularzach i nie tylko :)"

  1. 1. prezentuje<br />Krzysztof Piwowar<br />Wspomaganie percepcji: niewerbalna komunikacja w formularzach i nie tylko :)<br />
  2. 2. 1<br />?<br />Czym jest percepcja<br />
  3. 3. Percepcją możemy nazwać 3 etapowy proces, <br />w którym informacja jest:<br />1<br />selekcjonowana<br />porządkowana<br />interpretowana<br />znaczenie<br />
  4. 4. 2<br />Czym jest komunikacja niewerbalna<br />?<br />
  5. 5. Jeśli myślimy o podstawowej <br />definicji komunikacji<br />niewerbalnej to dotyczy ona …<br />2<br />„ (…) 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 (…)”<br />definicja według S.P Morreale<br />
  6. 6. A mówiąc prościej komunikacja niewerbalna to …<br />2<br />Ilustracja pochodzi ze strony: www.ehow.com<br />Ilustracja pochodzi ze strony: thepoodleanddogblog.typepad.com<br />
  7. 7. … ale co z sytuacją, kiedy<br />mówimy o komunikacji<br />w ramach interfejsu?<br />2<br />Ilustracje pochodzą ze stron: mytechnews.info, steepleashton.com<br />
  8. 8. 2<br />interfejs analogowy<br />
  9. 9. Niektóre interfejsy analogowe …<br />2<br />Ilustracja pochodzi ze strony: drivemileone.com<br />
  10. 10. nie wspomagają percepcji!<br />2<br />Ilustracja pochodzi ze strony: clivesimpkins.blogs.com<br />
  11. 11. Ale na szczęście są też takie,<br />które to robią :)<br />2<br />Ilustracja pochodzi ze strony: drivemileone.com<br />
  12. 12. Ale na szczęście są też takie,<br />które to robią :)<br />2<br />Ilustracje pochodzą ze stron: asia.ru, faqs.org<br />
  13. 13. Za pomocą jakich nośników lub form przekazu odbywa się tutaj komunikacja?<br />2<br />Są to:<br /><ul><li>barwa
  14. 14. kształt lub znak
  15. 15. sygnał dźwiękowy
  16. 16. „sygnał” wizualny lub imitacja ruchu
  17. 17. zapach</li></ul>Ilustracja pochodzi ze strony: drivemileone.com, asia.ru, faqs.org<br />
  18. 18. 2<br />interfejs cyfrowy (digital)<br />
  19. 19. 2<br />Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com<br />
  20. 20. Za pomocą jakich nośników lub form przekazu odbywa się tutaj komunikacja?<br />2<br />Są to:<br /><ul><li>barwa
  21. 21. kształt lub znak
  22. 22. sygnał dźwiękowy
  23. 23. „sygnał” wizualny
  24. 24. animacja (ruch)
  25. 25. haptic technology (forcefeedback)</li></ul>Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com<br />
  26. 26. Podsumowując …<br />2<br />VS.<br />Dla i. analogowych są to:<br /><ul><li>barwa
  27. 27. kształt lub znak
  28. 28. sygnał dźwiękowy
  29. 29. „sygnał” wizualny lub imitacja ruchu
  30. 30. zapach</li></ul>Dla i. cyfrowych są to:<br /><ul><li>barwa
  31. 31. kształt lub znak
  32. 32. sygnał dźwiękowy
  33. 33. „sygnał” wizualny
  34. 34. animacja (ruch)
  35. 35. haptic technology (forcefeedback)</li></ul>Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com<br />
  36. 36. Podsumowując …<br />Co z tych elementów można wykorzystać w komunikacji w formularzach?<br />2<br />VS.<br />Dla i. analogowych są to:<br /><ul><li>barwa
  37. 37. kształt lub znak
  38. 38. sygnał dźwiękowy
  39. 39. „sygnał” wizualny lub imitacja ruchu
  40. 40. zapach</li></ul>Dla i. cyfrowych są to:<br /><ul><li>barwa
  41. 41. kształt lub znak
  42. 42. sygnał dźwiękowy
  43. 43. „sygnał” wizualny
  44. 44. animacja (ruch)
  45. 45. haptic technology (forcefeedback)</li></ul>Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com<br />
  46. 46. Podsumowując …<br />Co z tych elementów można wykorzystać w komunikacji w formularzach?<br />2<br />VS.<br />Dla i. analogowych są to:<br /><ul><li>barwa
  47. 47. kształt lub znak
  48. 48. sygnał dźwiękowy
  49. 49. „sygnał” wizualny lub imitacja ruchu
  50. 50. zapach</li></ul>Dla i. cyfrowych są to:<br /><ul><li>barwa
  51. 51. kształt lub znak
  52. 52. sygnał dźwiękowy
  53. 53. „sygnał” wizualny
  54. 54. animacja (ruch)
  55. 55. haptic technology (forcefeedback)</li></ul>Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com<br />
  56. 56. Pamiętamy?<br />informacja jest:<br />selekcjonowana<br />porządkowana<br />interpretowana<br />znaczenie<br />
  57. 57. 3<br />Jak możemy wspomóc percepcję<br />?<br />
  58. 58. 3<br />komunikacja niewerbalna w formularzach<br />
  59. 59. W formularzach można wyróżnić przynajmniej pięćobszarów, które mogą pośredniczyć w komunikacji niewerbalnej<br />3<br />Należą do nich:<br />Obszar pomocy kontekstowej (tzw. hinty).<br />Obszar komunikatów walidacyjnych.<br />Obszar wizualizacji i rozmieszczenia elementów formularza.<br />Obszar użytych oznaczeń.<br />Obszar zachowania formularza w trakcie interakcji.<br />
  60. 60. Obszar pomocy kontekstowej (tzw. hint)<br />3<br />Loremipsumdolor<br />ikony<br />dymki<br />Zobacz pomocne informacje »<br />elementy wywołujące<br />
  61. 61. Obszar pomocy kontekstowej (tzw. hint)<br />3<br />
  62. 62. Obszar komunikatów walidacyjnych<br />3<br />Loremipsumdolor<br />ikony<br />dymki<br />oznaczenia elementów formularza<br />ruch<br />
  63. 63. Obszar komunikatów walidacyjnych<br />3<br />
  64. 64. Obszar komunikatów walidacyjnych<br />3<br />
  65. 65. Obszar wizualizacji i rozmieszczenia elementów formularza<br />3<br /><ul><li>rozmieszczenie pól w obrębie formularza
  66. 66. rozmieszczenie poszczególnych elementów formularza względem siebie (labele, inputy, headery itd.)
  67. 67. sekcje
  68. 68. oznaczenia pól</li></li></ul><li>Obszar wizualizacji i rozmieszczenia elementów formularza<br />3<br />
  69. 69. Obszar użytych oznaczeń<br />3<br /><ul><li>pola wymagane, pola opcjonalne
  70. 70. elementy aktywne, nieaktywne
  71. 71. pole zablokowane
  72. 72. pole z focusem
  73. 73. wygląd poszczególnych elementów formularza (pola, przyciski, komunikaty, linki itd.)
  74. 74. zakres oznaczeń (ikony)
  75. 75. oznaczenia sekcji, nagłówków</li></li></ul><li>Obszar użytych oznaczeń<br />3<br />
  76. 76. Obszar zachowania formularza podczas interakcji<br />3<br /><ul><li>reagowanie na wprowadzane dane
  77. 77. zachowanie przy zaznaczaniu, odznaczaniu elementów
  78. 78. pojawienie się komunikatów
  79. 79. wczytywanie danych
  80. 80. ilustracja stanu działania
  81. 81. hold&drag, drag&drop, on focus, on click itp.</li></li></ul><li>Obszar zachowania formularza podczas interakcji<br />3<br />https://edit.yahoo.com/registration<br />
  82. 82. 3<br />informacja jest:<br />selekcjonowana<br />Obszary pośredniczące w komunikacji w ramach formularzy:<br /><ul><li>Obszar pomocy kontekstowej (tzw. hinty).
  83. 83. Obszar komunikatów walidacyjnych.
  84. 84. Obszar wizualizacji i rozmieszczenia elementów formularza.
  85. 85. Obszar użytych oznaczeń.
  86. 86. Obszar zachowania formularza w trakcie interakcji.</li></ul>porządkowana<br />interpretowana<br />
  87. 87. 4<br />Jakie narzędzia mogę zastosować<br />?<br />
  88. 88. Możesz wykorzystać:<br />4<br />AJAX (AsynchronousJavaScript and XML)<br />JavaScript<br />CSS<br />HTML5<br />
  89. 89. 5<br />Jakie wyobrażamy sobie wspomaganie percepcji w przyszłości<br />?<br />
  90. 90. 5<br />Augmented Reality - The Future of Education ( AraPacis )<br />Deep Green & Augmented Reality Pool<br />http://www.youtube.com/watch?v=Q_xF8ujj7ko<br />http://www.youtube.com/watch?v=AENJxqR0g48<br />
  91. 91. 5<br />The Future of Self-Service Banking<br />http://vimeo.com/14939329<br />
  92. 92. prezentował<br />Krzysztof Piwowar<br />k.piwowar@adv.pl<br />lub<br />usability-onair.com<br />Dziękuję za uwagę! Pytania?<br />
  • kubagula

    Nov. 11, 2011
  • marszu

    Dec. 2, 2010

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

Vistos

Vistos totais

1.125

No Slideshare

0

De incorporações

0

Número de incorporações

46

Ações

Baixados

0

Compartilhados

0

Comentários

0

Curtir

2

×