Wspomaganie percepcji: komunikacja niewerbalna w formularzach i nie tylko

1,876 views
1,699 views

Published on

Prezentacja z World Usability Day 2010, Wrocław

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,876
On SlideShare
0
From Embeds
0
Number of Embeds
136
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wspomaganie percepcji: komunikacja niewerbalna w formularzach i nie tylko

  1. 1. Wspomaganie percepcji: niewerbalna komunikacja w formularzach i nie tylko :)
  2. 2. 1 Czym jest percepcja?
  3. 3. 1 Percepcją możemy nazwać 3 etapowy proces, w którym informacja jest: selekcjonowana porządkowanainterpretowana znaczenie
  4. 4. 2 Czym jest komunikacja niewerbalna?
  5. 5. 2 Jeśli myślimy o podstawowej definicji komunikacji niewerbalnej to dotyczy ona … „ (…) 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. 6. 2 A mówiąc prościej komunikacja niewerbalna to … Ilustracja pochodzi ze strony: www.ehow.com Ilustracja pochodzi ze strony: thepoodleanddogblog.typepad.com
  7. 7. 2 … ale co z sytuacją, kiedy mówimy o komunikacji w ramach interfejsu? Ilustracje pochodzą ze stron: mytechnews.info, steepleashton.com
  8. 8. 2 interfejs analogowy
  9. 9. 2 Niektóre interfejsy analogowe … Ilustracja pochodzi ze strony: drivemileone.com
  10. 10. 2 nie wspomagają percepcji! Ilustracja pochodzi ze strony: clivesimpkins.blogs.com
  11. 11. 2 Ale na szczęście są też takie, które to robią :) Ilustracja pochodzi ze strony: drivemileone.com
  12. 12. Ale na szczęście są też takie, które to robią :) Ilustracje pochodzą ze stron: asia.ru, faqs.org 2
  13. 13. 2 Za pomocą jakich nośników lub form przekazu odbywa się tutaj komunikacja? Ilustracja pochodzi ze strony: drivemileone.com, asia.ru, faqs.org Są to:  barwa  kształt lub znak  sygnał dźwiękowy  „sygnał” wizualny lub imitacja ruchu  zapach
  14. 14. 2 interfejs cyfrowy (digital)
  15. 15. 2 Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com
  16. 16. 2 Za pomocą jakich nośników lub form przekazu odbywa się tutaj komunikacja? Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com Są to:  barwa  kształt lub znak  sygnał dźwiękowy  „sygnał” wizualny  animacja (ruch)  haptic technology (force feedback)
  17. 17. 2 Podsumowując … Dla i. analogowych są to:  barwa  kształt lub znak  sygnał dźwiękowy  „sygnał” wizualny lub imitacja ruchu  zapach Dla i. cyfrowych są to:  barwa  kształt lub znak  sygnał dźwiękowy  „sygnał” wizualny  animacja (ruch)  haptic technology (force feedback) Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com
  18. 18. Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com 2 Podsumowując … Dla i. analogowych są to:  barwa  kształt lub znak  sygnał dźwiękowy  „sygnał” wizualny lub imitacja ruchu  zapach Dla i. cyfrowych są to:  barwa  kształt lub znak  sygnał dźwiękowy  „sygnał” wizualny  animacja (ruch)  haptic technology (force feedback) Co z tych elementów można wykorzystać w komunikacji w formularzach?
  19. 19. Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com 2 Podsumowując … Dla i. analogowych są to:  barwa  kształt lub znak  sygnał dźwiękowy  „sygnał” wizualny lub imitacja ruchu  zapach Dla i. cyfrowych są to:  barwa  kształt lub znak  sygnał dźwiękowy  „sygnał” wizualny  animacja (ruch)  haptic technology (force feedback) Co z tych elementów można wykorzystać w komunikacji w formularzach?
  20. 20. Pamiętamy? selekcjonowana porządkowanainterpretowana znaczenie informacja jest:
  21. 21. 3 Jak możemy wspomóc percepcję?
  22. 22. 3 komunikacja niewerbalna w formularzach
  23. 23. 3 W formularzach można wyróżnić przynajmniej pięć obszarów, które mogą pośredniczyć w komunikacji niewerbalnej Należą do nich: 1. Obszar pomocy kontekstowej (tzw. hinty). 2. Obszar komunikatów walidacyjnych. 3. Obszar wizualizacji i rozmieszczenia elementów formularza. 4. Obszar użytych oznaczeń. 5. Obszar zachowania formularza w trakcie interakcji.
  24. 24. 3 Obszar pomocy kontekstowej (tzw. hint) ikony Lorem ipsum dolor dymki Zobacz pomocne informacje » elementy wywołujące
  25. 25. 3 Obszar pomocy kontekstowej (tzw. hint)
  26. 26. 3 Obszar komunikatów walidacyjnych Lorem ipsum dolor dymkiikony oznaczenia elementów formularza ruch
  27. 27. 3 Obszar komunikatów walidacyjnych
  28. 28. 3 Obszar komunikatów walidacyjnych
  29. 29. 3 Obszar wizualizacji i rozmieszczenia elementów formularza  rozmieszczenie pól w obrębie formularza  rozmieszczenie poszczególnych elementów formularza względem siebie (labele, inputy, headery itd.)  sekcje  oznaczenia pól
  30. 30. 3 Obszar wizualizacji i rozmieszczenia elementów formularza
  31. 31. 3 Obszar użytych oznaczeń  pola wymagane, pola opcjonalne  elementy aktywne, nieaktywne  pole zablokowane  pole z focusem  wygląd poszczególnych elementów formularza (pola, przyciski, komunikaty, linki itd.)  zakres oznaczeń (ikony)  oznaczenia sekcji, nagłówków
  32. 32. 3 Obszar użytych oznaczeń
  33. 33. 3 Obszar zachowania formularza podczas interakcji  reagowanie na wprowadzane dane  zachowanie przy zaznaczaniu, odznaczaniu elementów  pojawienie się komunikatów  wczytywanie danych  ilustracja stanu działania  hold&drag, drag&drop, on focus, on click itp.
  34. 34. 3 Obszar zachowania formularza podczas interakcji https://edit.yahoo.com/registration
  35. 35. selekcjonowana porządkowanainterpretowana informacja jest: 3 Obszary pośredniczące w komunikacji w ramach formularzy:  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.
  36. 36. 4 Jakie narzędzia mogę zastosować?
  37. 37. 4 Możesz wykorzystać: AJAX (Asynchronous JavaScript and XML) JavaScript HTML5 CSS
  38. 38. 5 Jakie wyobrażamy sobie wspomaganie percepcji w przyszłości?
  39. 39. 5 http://www.youtube.com/watch?v=AENJxqR0g48http://www.youtube.com/watch?v=Q_xF8ujj7ko Augmented Reality - The Future of Education ( Ara Pacis ) Deep Green & Augmented Reality Pool
  40. 40. 5 http://vimeo.com/14939329 The Future of Self-Service Banking
  41. 41. Dziękuję za uwagę! Pytania?

×