Embed Size (px)
DESCRIPTION
Prezentacja z World Usability Day 2010, Wrocław
Citation preview
Wspomaganie percepcji: niewerbalna komunikacja w formularzach i nie tylko :)
prezentuje
Krzysztof Piwowar
1Czym jest percepcja
?
1 Percepcją możemy nazwać 3 etapowy proces, w którym informacja jest:
selekcjonowana
porządkowanainterpretowanaznaczenie
2Czym jest komunikacja niewerbalna
?
2 Jeśli myślimy o podstawowej definicji komunikacjiniewerbalnej 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
2 A mówiąc prościej komunikacja niewerbalna to …
Ilustracja pochodzi ze strony: www.ehow.com Ilustracja pochodzi ze strony: thepoodleanddogblog.typepad.com
2 … ale co z sytuacją, kiedymówimy o komunikacjiw ramach interfejsu?
Ilustracje pochodzą ze stron: mytechnews.info, steepleashton.com
2
interfejs
analogowy
2 Niektóre interfejsy analogowe …
Ilustracja pochodzi ze strony: drivemileone.com
2 nie wspomagają percepcji!
Ilustracja pochodzi ze strony: clivesimpkins.blogs.com
2 Ale na szczęście są też takie,które to robią :)
Ilustracja pochodzi ze strony: drivemileone.com
Ale na szczęście są też takie,które to robią :)
Ilustracje pochodzą ze stron: asia.ru, faqs.org
2
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
2
interfejs
cyfrowy (digital)
2
Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com
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)
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)
VS.
Ilustracje pochodzą ze stron: in-carpc.co.uk, gentleface.com
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)
VS. Co z tych elementów można wykorzystać w komunikacji w formularzach?
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)
VS. Co z tych elementów można wykorzystać w komunikacji w formularzach?
Pamiętamy?
selekcjonowana
porządkowanainterpretowanaznaczenie
informacja jest:
3Jak możemy wspomóc percepcję
?
3
komunikacja niewerbalna
w formularzach
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.
3 Obszar pomocy kontekstowej (tzw. hint)
ikony
Lorem ipsum dolor
dymki
Zobacz pomocne informacje »
elementy wywołujące
3 Obszar pomocy kontekstowej (tzw. hint)
3 Obszar komunikatów walidacyjnych
Lorem ipsum dolor
dymkiikony
oznaczenia elementów formularza ruch
3 Obszar komunikatów walidacyjnych
3 Obszar komunikatów walidacyjnych
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
3 Obszar wizualizacji i rozmieszczenia elementów formularza
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
3 Obszar użytych oznaczeń
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.
3 Obszar zachowania formularza podczas interakcji
https://edit.yahoo.com/registration
selekcjonowana
porządkowanainterpretowana
informacja jest:
3Obszary 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.
4Jakie narzędzia mogę zastosować
?
4 Możesz wykorzystać:
AJAX (Asynchronous JavaScript and XML)
JavaScript
HTML5CSS
5Jakie wyobrażamy sobie wspomaganie percepcji w przyszłości
?
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
Dziękuję za uwagę! Pytania?prezentował
Krzyszto
f Piwowar
lub
usability-onair.com
