01/09/2016

OqueAffordanceecomoprojetarpensandonissoHomemMquina

OqueAffordanceecomoprojetarpensandonisso
HomemMquina
01julho2014
OexemplomaisclssicodeAffordanceumaportacommaaneta.Quandoolhamosparaessa
porta,anicainteraoqueparecepossvelademexernamaaneta.Essapodenoseranica
aopossvel,massuaAffordancemaisforte.
Affordanceopotencialdeumobjetodeserusadocomofoiprojetadoparaserusado.
OtermoAffordancefoicunhadopelopsiclogoJamesJ.Gibsonedepoisintroduzidonasdisciplinas
deinteraohomemmquinapelolivroODesigndoDiaaDia,doDonaldNorman(esselivrouma
dasjiasdanossabibliotecaaquinaHomemMquina).

Affordancenodesigndeinterfaces
QuemprojetainterfacestrabalhadiretamentecomasAffordances,atmesmosenosouberdoque
setrata.Diferentedeobjetosfsicos,quetmAffordancesbaseadasnoseutamanho,formatoe
peso,asinterfacesnawebemobiletemqueganharsuasAffordancespelassuasrepresentaes
grficasemetforas.
Paramuitosdesignersissosetornainstintivoebaseadoemsuaheursticapadresdeinterfaces
queelesvemeanalisamtodososdias.Oimportantepararprapensar:quaissoas
qualidadesquefazemumobjetoconvidarousurioaoclique,scrollouqualqueroutra
ao?
TrabalharasAffordancesdasuainterfacepodeimpactarmuitoastaxasdeconverso,taxasde
registroeaesquemaisimportamnoseusiteouapp.Vamosverumexemplo.Onmerodeaes
diferentesqueumusuriopodefazernapginainicialdoTumblr.
Pareceserumatelamuitosimples,masexistemonzeaespossveisnapginainicialdoTumblr.
1.Inputdeemail
2.Inputdesenha
3.Inputdenomedeusurio
4.Cliquenobotocriarconta
5.Cliquenobotoentrar,parausurioexistentes
6.CliquenolinkTermosdeServio
7.CliquenolinkPrivacidade
8.CliquenolinkPublicadoporUsurio
9.CliquenaimagemdeavatardoUsurio
10.CliquenacaixadebuscadoTumblr
http://www.homemmaquina.com.br/design/oqueeaffordance/

1/3

01/09/2016

OqueAffordanceecomoprojetarpensandonissoHomemMquina

11.ApertarEnterparaprocurarpeloquevocescreveunacaixadebusca
AsAffordancesdeumainterfacetmumaimportnciadiferenteeporissoprecisamservisualmente
diferentesentresi.NocasodapginainicialdoTumblr,omaisimportantefoibotaremprimeiro
planoofluxodeaesparaocadastro.Issoinduzousurioapensarqueoformulrioaprincipal
razodestapginaexistirequeeledevepreenchloparaprosseguir.

TiposdeAffordance
Explcita
sinalizadaporalgumtipodelinguagemverbal.Textoscomocliqueaquiexplicitametraduzema
Affordancedaaodeclique.Soexplcitasporquetodousurio,semqualquerexperinciaem
interfaces,podeadivinharcomointeragircomoobjeto.ParaessaAffordanceserdescobertao
requisitobsicoterusuriosquesaibamclicar.

Convencional
otipomaiscomumdeAffordancenasinterfaces.Nssabemos,porexemplo,queaspalavras
sublinhadaseemazulnumtextosolinksclicveis.Sabemosqueologonotopodeumapgina
podeserclicadoenoslevapginainicialdosite.
OrequisitobsicoparausaressaAffordanceterumpblicojacostumadoaessespadresnas
interfaces.Seforprojetarparaidososoucrianas,talvezsejamelhorusaroutrospadresdedesign.

Oculta
UmaAffordanceocultaficaaparentesquandoumacertacondiocompletada.Porexemplo:
palavrasqueviramlinksclicveissquandosepassaocursorsobreelas.
OutroexemploperfeitosooscardsdoPinterest,comquatroAffordancesreveladasquando
passamosocursorporcima.(1)cliquenobotoPinit,(2)cliquenobotoEnviar,(3)cliqueno
botoLike(4)cliqueparadarzoom.
ObenefciodaAffordanceocultadeixarainterfacemaislimpaaonomostrartantasinteraes
emumaspgina.Oriscoqueumusuriopodenosabercomorevellaepodesetornarum
obstculo.

Metafrica
Umconedeenvelopeconvidaousurioamandarumemail,umconedecasa,airparaapgina
inicial,umdecorrente,convidacriaodelinkseporavai.Algumasvezesojeitomaisfcilde
comunicaraAffordanceusarumobjetodomundorealcomometfora.

http://www.homemmaquina.com.br/design/oqueeaffordance/

2/3

01/09/2016

OqueAffordanceecomoprojetarpensandonissoHomemMquina

Quandoamaioriadossmartphonespassouausarorecursotouchscreen,foinecessriocriarum
coneparausaroprincipalrecursodotelefone:fazerligaes.Nessecaso,usadooconedeum
telefonerealcomometfora,quepassaainformaodeumaformamaisintuitiva.

Interaonopermitida
Algumasvezesnecessriodesabilitarcertasfuncionalidadesemostrlascomoindisponveis.Pra
issousamosorecursovisualdeacinzentaroelementodesabilitado.
Nesseexemplo,ocampoparaoinputdasenhaestcinzaporquemomentaneamentenoaceita
cliquesouinputs.Parahabilitaressainterao,ousurioprecisaclicarnobotochangeprimeiro.

Concluso
Viu?VocjtrabalhacomAffordancesmesmosenousaessapalavranoseuvocabulrio.
AoentendereusarasAffordancesagenteconsegueajudaraspessoasaentenderemnossa
interfacemaisrpidoemotivlasacompletaraes.Bastahierarquizaraspossibilidadeseusara
interaocerta.

http://www.homemmaquina.com.br/design/oqueeaffordance/

3/3