A importncia das affordances

no projeto de interfaces web

Airton Jordani Jardim Filho
Especializao em UX Design
Orientadora: Profa. Dra. Berenice Santos Gonalves
outubro/2015

Interface web - ferramenta de mediao entre software e

usurio

Realizao de tarefas com o uso de software necessitam

de condies
Usabilidade: medida em que um sistema,
produto ou servio pode ser usado por
usurios especficos para se atingir
objetivos especficos com eficcia,
eficincia e satisfao em um determinado
contexto de uso. (ISO, 2011, p. 5)

A interface deve indicar o para-que-serve de forma clara

Conceito de affordance - o uso que se percebe ser capaz
de fazer com determinado objeto

Objetivo especfico
Contribuir para a discusso da importncia das
affordances no projeto de interfaces web

Justificativa
Crescimento exponencial dentro das equipes de
desenvolvimento de interfaces web da figura do UX
designer - toda busca pela sistematizao na rea
relevante

Objetivo
Identificar abordagens para
avaliao de affordances e
interfaces digitais

Interface

A interface revela o carter de

ferramenta dos objetos e o
contedo comunicativo das
informaes. A interface
transforma objetos em produtos.
(Bonsiepe, 1997, p. 12)

Interface
mediao - tradutor de processos

Interface Grfica do Usurio (GUI)

senso comum - quase sinnimo de interface;
responsveis pela popularizao dos sistemas
computacionais

Histrico
Das janelas de Engelbart aos dias de hoje

Design de
Interao

Interao: Sketchpad de Ivan Sutherland (1962)

Abordagem de desenvolvimento centrado no usurio, no

nas limitaes tcnicas

Uma ao recproca entre duas ou mais pessoas ou objetos

Na web, uma interface efetiva, eficaz e satisfatria propicia
ao usurio acesso as inmeras possibilidades que o
hipertexto oferece

Usabilidade

Retomada do conceito de usabilidade

Comparativo agrupando por semelhana e funo

Avaliao atravs de critrios ergonmicos / regras de

ouro / princpios / heursticas
(Scapin & Bastien; Shneiderman; Jordan e Nielsen)

Interfaces e a
Satisfao do
Usurio

Levantamento de estudos que tratam da satisfao do

usurio

Emoo e design, por Donald Norman

Norman apresenta nova abordagem para o conceito de

affordances, de Gibson

possvel que para avaliar a satisfao do usurio com

relao a uma interface web, os critrios ergonmicos no
sejam suficientes

Affordances

Affordances:
Gibson
oportunidades para a ao
Norman
pistas deixadas pelo designer para que
o usurio consiga intuir o que deve ser
feito para executar a ao desejada

Classificao das affordances, por William Gaver:

percebida, escondida e falsa

Percebida: oferece uma ligao direta entre percepo e

ao. Aquilo que se percebe tem relao direta com
aquilo que resulta da ao

User
Experience

Final dos anos 1990: Web navigation: Designing the user

experience (Fleming, 1998)

Mtodo de projeto por Garrett (2003) - The elements of

user experience: user-centered design for web

Marc Hassenzal (2003) - The thing and I: understanding

the relationship between user and product

PADOVANI et al (2012) - "Novo termo para englobar a

usabilidade tradicional, uni-la a atributos hednicos e
emocionais e ampliar seu escopo de mensurao []
desse modo surgiu a necessidade de adaptar mtricas e
procedimentos

Instrumentos
de Avaliao de
Affordances

Comparao entre instrumentos de avaliao de affordances

Ferramenta
/ Autor(es)

IXD
Checklist,
por LEGASPI
& JAKHU
(2015)

Affordance
Strenght,
por ROSLING
(2011)

Mini-modos,
por CONN
(1995)

Tipo de instrumento de
avaliao

Parmetros reconhecidos pelo

design de interao affordance,
feedback, simplicidade,
estrutura, consistncia,
tolerncia e acessibilidade.

Cinco fatores que representam

os aspectos relacionais do
objeto, do observador e da
dinmica do contexto: a)
capacidade tcita; b)
disponibilidade (inclui potencial
situado, conscientizao e apoio
do ambiente); c) tendncia (inclui
motivao, preferencia e hbito);
d) habilidade; e) suporte
institucional.

Heursticas: a) Disponibilizar
affordances; b) Usar
consistentemente os minimodos; c) Permitir a
customizao de barras de
tarefas para agrupar e criar
novas affordances; d) Indicar
quando um estado est ativo ou
ligado; e) Usar consistentemente
os paradigmas de affordances no
mesmo aplicativo; f) Usar
affordances de forma
cooperativada ou agrupada para
reduzir ambiguidades.

O que se prope a avaliar

Consideraes sobre a ferramenta

Diferentes aspectos de uma

interface, podendo ser utilizada
modularmente. No caso deste
estudo, adotou-se, assim como
em DICK & GONALVES (2014),
se recomenda o uso do
parmetro affordance.

Por tratar-se de estudo recente, ainda no

existem registros sistematizados de seu
uso, tampouco h em seu site um maior
detalhamento da utilizao. No entanto,
pode oferecer uma significativa
contribuio na avaliao de affordances
em interfaces digitais.

Comparao da fora da
affordance em diferentes tipos
de ferramentas de software,
fornecendo informaes
essenciais aos designers de
interface, nos diferentes estgios
durante o processo de
desenvolvimento

Esses fatores em conjunto podem ser

usados como base para questes de
estudo de usurio que ajudam o designer
para compreender os aspectos relacionais
da fora da affordance de forma
operacional. Diferente da IXD Checklist, a
proposta de Rosling avaliar a affordance.
Isso faz desta proposta uma ferramenta
mais especfica, com parmetros mais
detalhados para a avaliao.

Modelo de affordances baseado

em mini-modos. Esses minimodos definem os estados nos
quais as operaes indicadas
pelas affordances se tornam
disponveis.
Apesar de ter 20 anos, o trabalho
de CONN traz importantes
sugestes a respeito da relao
entre interface e affordances,
sugerindo tanto como avali-las,
quanto indicando heursticas de
boas prticas.

Uma proposta abrangente: prope uma

forma de avaliar e apresenta
recomendaes de uso. Na poca do
estudo, Alex Paul Conn era pesquisador
da Digital/Compaq. No meio dos anos
1990, a Compaq era uma das lderes em
inovao e pesquisa. Antes da era Google,
o maior buscador de internet do mercado
era o Alta Vista, de propriedade da
Compaq. Essa informao contextualiza o
interesse em pesquisa e desenvolvimento
que a empresa tinha naquela poca.

Concluso

 Nos ltimos anos o interesse acadmico por reas como design

emocional e design experiencial cresceu ainda mais (pode ser aferido

pela quantidade de materiais encontrados durante a reviso bibliogrfica
realizada para a efetivao desta pesquisa)

Este trabalho buscou, a partir de referencias relevantes para as reas do

design de interao e do design experiencial, demonstrar a relevncia das

affordances nestas discusses e sua relao entre a interface web e o
usurio, como forma de apresentar-lhe, de forma intuitiva, caminhos para
a interao.

Buscou-se, ainda, identificar diferentes abordagens para avaliao de

affordances e interfaces digitais.

Possveis desdobramentos desta pesquisa, para trabalhos futuros:

aprofundamento dos estudos a cerca das ferramentas de avaliao;

proposio de uma ferramenta que reunisse as caractersticas mais
relevantes dos instrumentos analisados, agregando ainda mais
referencias e estudos desta rea.

Referncias

BESSA, D. D. Teorias da comunicao. Braslia: Universidade de Braslia, 2006.

BLYTHE, M.; HASSENZAHL, M.; NORMAN, D. Interview with Donald Norman. In: Interactions. September-October, 2004.
BONSIEPE, G. Do material ao digital. Florianpolis: LBDI, 1997.
______. Design, cultura e sociedade. So Paulo: Blucher, 2011.
BROCH, J. C. O conceito de affordance como estratgia generativa no design de produtos orientado para a versatilidade. Dissertao de Mestrado,
PGDesign/UFSC, 2010.
CAUDURO, F. V. O Digital na Comunicao. In: LEVACOV, M. et al. Tendncias na Comunicao. Porto Alegre: L&PM, 1998.
CYBIS, W.; BETIOL, A.; FAUST, R. Ergonomia e usabilidade: conhecimentos, mtodos e aplicaes. So Paulo: Novatec, 2010.
COLE, J.; FOSTER, H. Using Moodle. Second Edition. Sebastopol, CA: OReilly, 2008.
CONN, A. P. Diagnostic affordances: heuristics for Enhancing Interface Information. In: CHI '95 Proceedings of the SIGCHI Conference on Human Factors
in Computing Systems. Pages 186-193, 1995.
FACCA, C. A. Como o design pode ajudar em pocas de crise. In: Revista Publish, dez. 2009.
FLAVIN-BLANCO, C., GURREA-SARASA, R., & ORS-SANCLEMENTE, C. (2011). Analyzing the emotional outcomes of the online search behavior with
search engines. In: Computers in Human Behavior, 27(1), p. 540551, 2011.
FLEMING, J. Web Navigation: Designing the User Experience. Sebastopol, CA: OReilly, 1998.
FRANCO, E. S. Hqtrnicas: do suporte papel rede Internet. So Paulo: Annablume, 2004.
GARRETT, J.J.. The Elements of User Experience. New York, NY USA: AIGA American Institute of Graphic Arts, 2003.
_______. The Elements of User Experience: User-Centered Design for the Web and Beyond. 2nd Ed. Berkeley: New Riders. 2011.
GAVER, William W. Technology affordances. Cambridge, 2002. Disponvel em: < http://www.cs.umd.edu/class/fall2002/cmsc434-0201/p79-gaver.pdf>.
Acesso em: 10 maio 2014
GIBSON, J. J. The theory of affordance. In: SHAW, R.; BRANSFORD, J. Perceiving, acting and knowing: toward an Ecological psychology. New Jersey:
Laurence Erlbaum Associates, p. 67-82, 1977.
______. The ecological approach to visual perception. Psychology Press, 1986.
GROSSMANN, M. Museu como interface. In: GROSSMANN, M. & MARIOTTI, G. Museum Art Today / Museu Arte Hoje, So Paulo, Hedra & Forum
Permanente, 2011, p. 193-221.
HASSENZAHL, M.; TRACTINSKY, N. User experience a research agenda. In: Behaviour & Information Technology, Vol. 25, No. 2, March-April 2006, 91
97.
HASSENZAHL, M. The Thing and I: Understanding the Relationship Between User and Product. In: BLYTHE, M. A.; MONK, A. F.; OVERBEEK, K. & WRIGHT, P.
C. (Eds.). Funology: From Usability to Enjoyment, 2003, p 1-12.
______. User Experience (UX): Towards an experiential perspective on product quality. In: IHM '08 Proceedings of the 20th International Conference of
the Association Francophone d'Interaction Homme-Machine. P. 11-15, 2008.
ISO (International Standard Organization). ISO 9241 Ergonomia da interao humano-sistema - Parte 210: Projeto centrado no ser humano para
sistemas interativos. ISO 9241-210:2010(E). Genebra: ISO, 2010.
JOHNSON, S. Cultura da interface: como o computador transforma nossa maneira de criar e comunicar. Rio de Janeiro: Jorge Zahar Ed. 2001.

KALBACH, J. Design de Navegao Web: Otimizando a experincia do usurio. Porto Alegre: Bookman, 2009.
______. Designing Web Navigation: Optimizing the User Experience. Sebastopol: OReilly Media, 2007.
KAPTELININ, V.; NARDI, B. Affordances in HCI: Toward a Mediated Action Perspective. In: CHI 2012, May 5-10, Austin, Texas, USA. P. 967-976, 2012.
LEGASPI, A.; JAKHU, A. IxD Checklist. Disponvel em: <http://ixdchecklist.com/>. Acesso em: 9 jul. 2015.
LEVACOV, M. Do analgico ao digital: a comunicao e a informao no final do milnio. In: LEVACOV, M. et al. Tendncias na Comunicao. Porto Alegre:
L&PM, 1998.
LVY, Pierre. As tecnologias da inteligncia - o futuro do pensamento na era da informtica. Rio de Janeiro: Ed. 34, 1993.
LYNCH, P.J.; HORTON, S. Guia de estilo da web: princpios bsicos de design para criao de websites. Barcelona: Editorial Gustavo Gili, 2004.
______. Web style guide: basic design principles for creating web sites. Kendallville: Yale University, 2008.
MCGRENERE, J.; HO, W. Affordances: Clarifying and Evolving a Concept. In: Proceedings of Graphic Interface 2000, Montreal, May-2000, p. 1-8.
NIELSEN, J.; MOLICH, R. Heuristic evaluation of user interfaces. In J. C Chew & J. Whiteside (eds). Empowering people: CHI 90 Conference Proceedings (pp.
249 - 256) Monterey, CA: ACM Press, 1990.
NIELSEN, J.; LORANGER, H. Prioritizing web usability. Berkeley: New Riders, 2006.
NIELSEN, J. Usability Engineering. San Diego: Academic Press. 1993
______. How to conduct a Heuristic Evaluation (Jan, 1995). Disponvel em: <http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/>.
Acesso em 6 out 2014.
______. 10 Usability Heuristics for User Interface Design (Jan, 1995). Disponvel em <http://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso
em 14 nov 2014.
______. Designing Web Usability, Indiana: New Riders Publishing, 1999.
NORMAN, D. O design do dia-a-dia. So Paulo: Rocco. 2006.
______. Design emocional. So Paulo: Rocco. 2008.
OLIVEIRA, F. I. S.; RODRIGUES, S.T. Affordances: a relao entre agente e ambiente. In: Cincias & Cognio. 2006. Vol. 09, p. 120-130.
ONG, C.-S., CHANG, S.-C., & LEE, S.-M. Website satisfaction dimensions: factors between satisfaction and dissatisfaction. In: Information Development, 29(4),
p. 299308, 2013.
PREECE, J.; ROGERS, Y.; SHARP, H. Design de interao: alm da interao homem-computador. Porto Alegre, RS: Bookman, 3a Ed, 2013.
PRIBERAM. Dicionrio da Lngua Portuguesa. Disponvel em: <http://www.priberam.pt/DLPO/interface>. Acesso em: 3 mar. 2015.
ROCHA, C. Interfaces computacionais e experincia sensvel. In: Anais do 19o. Encontro da Associao Nacional de Pesquisadores em Artes Plsticas. Entre
Territrios. Cachoeira: ANPAP, 2010.
______. Pontes, janelas e peles: cultura, poticas e perspectivas das interfaces computacionais. Goiania: UFG, 2014.
ROSLING, H. Is This Thing Working? The Study of New Affordances. In: RUECKER, S.; RADZIKOWSKA, M.; SINCLAIR, S. (Orgs.) Visual Interface Design for digital
Cultural Heritage: A Guide to Rich-Prospect Browsing. Ashgate: MPG Books Group/UK, 2011.
SANTANNA, H. C. Design sem designer. Serra: Edio do autor, 2013.
TONETTO, L. M.; COSTA, F. C. X. Design Emocional: conceitos, abordagens e perspectivas de pesquisa. In: Strategic Design Research Journal, 4(3): 132-140.
September-December, 2011.
VILAA, M. L. C. Pesquisa e ensino: consideraes e reflexes. In: e-scrita - Revista do Curso de Letras da UNIABEU Nilpolis, v. I, Nmero2, Mai. -Ago. 2010
WEINSCHENK, S. 100 Things Every Designer Needs to Know About People. Berkeley: New Riders, 2011.

Obrigado!
Airton Jordani Jardim Filho
Especializao em UX Design
Orientadora: Profa. Dra. Berenice Santos Gonalves
outubro/2015