Texto-Aula3.1–Prof.RonaldoBarbosaEstilosdeInteraçãoemIHC:manipulaçãodiretaepreenchimentodeformulários1-IntroduçãoObserveafiguraabaixoqueretrataainteraçãousuário-computador:

O usuário age sobre o sistema e o sistema age sobre o usuário. Adaptado deRocha(2003)Noprocessodeinteraçãousuário-sistemacabemduasperguntasimportantes:• Comoainformaçãovindadousuáriodevesertratadapelosistema?• Comoainformaçãovindadosistemadeveserapresentadaaousuário?Existemestilosgeraisdeinteraçãousuário-sistemaquenosajudamaresponderessasperguntas.Vamosconhecercincoestilosbásicosdeinteraçãousuário-sistema:• manipulaçãodireta• seleçãodemenu• formulários• linhasdecomando• linguagemnatural2–EstilosdeInteração:ManipulaçãoDiretaAideiamaisimportanteaquiéaproximarainteraçãodamanipulaçãodeobjetosdomundoreal.

Objetivo

Processo de interação

sistema

???

???

Oobjetodomundorealdeveterumametáforavisualnomundovirtualecadamanipulação sobre o objeto deve ser mapeada para operações do mouse outeclado, comoclique simples,duplo clique, arrasto, etc.Vejana figuraabaixoatela que representa o movimento de um ícone de um ponto da tela até aaproximaçãocomalixeira.

Observeametáforavisualpresente:jogarodocumentonalixeiraequivaleaarrastarodocumentoatéondeestáíconecomaparênciadelixeira.Osgamesdecomputadorrepresentambemaevoluçãodossistemasdeinteraçãodotipomanipulaçãodireta.Umbomexemplodemanipulaçãodiretaé dirigirumautomóvelemumgame.Observeafiguraabaixo.

Poruma janelaque lembraumpára-brisas, você temumavisãodoqueestáà

frentedoveículo.Paraviraràdireita,vocêgiraumpoucoodesenhodovolante,paratrocaramarchavocêacionaumdesenhodeumaalavanca,paraaceleraroufrear,bastaacionarodesenhodopedalcomomouse,eassimpordiante.http://www.techtudo.com.br/noticias/noticia/2013/11/real-racing-3-asphalt-8-e-mais-os-melhores-jogos-de-corrida-para-android.htmlExemplos de outros jogos clássicos na figura seguinte são representativos daevoluçãodasinterfacesinterativas.

Telejogo: jogopara ser jogadoque erainstalado nos antigos televisores nadécadade1970.https://www.youtube.com/watch?v=_YNmG6PhPaE

PacMan: um dos jogos maisimportantes da história dos jogoseletrônicos.https://www.youtube.com/watch?v=pbzCTMHFlxg

Comaevoluçãodasplataformasesistemas,édifícilenxergarlimitesparaopoderdeinteratividadedosjogos.Masoestilodeinteraçãodotipomanipulaçãodiretaéútilapenasparaconsolesdegames?Naverdade,não.Háexemploseminúmerasoutrasáreascomoengenharia,projetosdiversosesimuladoresdetodotipo.

FerramentadeprojetosAutoCADhttp://www.autodesk.com/education/free-software/autocad

FerramentadecriaçãodecenáriosemaquetesBrycehttp://www.daz3d.com/bryce-7-pro

Simuladordepráticadedireçãohttp://www.autoescolas.com/simulador-para-auto-escola

Conformevimos,amanipulaçãodiretapriorizarepresentaçõesvisuaisquepodemserbastantesofisticadas,emlugarderepresentaçõesnuméricasoutextuais.VantagensdamodalidadedeinteraçãousuáriocomputadorManipulaçãoDireta:• Açõesfísicassãomaisfáceisdeaprenderdoqueumasintaxecomplexa.• Resultadosdasaçõesgeramefeitoimediato.• Reduçãodetaxasdeerro.• Aumentodoengajamentoemotivaçãodousuário.• Requermenorexperiênciaanteriordousuário.DesvantagensdamodalidadedeinteraçãousuáriocomputadorManipulaçãoDireta:• Requeraparatodeequipamentosmaissofisticados.• Consomemuitoespaçodatela.• Usuáriodeveentenderasmetáforasvisuais.• Nãohámetáforasvisuaisparatudo!• Programação/designpodesertrabalhosaeexcessivamentesofisticada.3-Estilodeinteração:PreenchimentodeFormuláriosÉ um estilo muito comum de interação em que o sistema solicita dados dousuário através de campos que precisam ser preenchidos em campos fixos natela.Osformulárioscomumenteencontradosemwebsitesseencaixamnesseestilodeinteração(cadastrodeprodutos,clientes,pedidos,etc).Vejaafiguraabaixoquerepresentaumformuláriotípico.

Ousuárioprecisapreenchertodososcamposefazerescolhasdeumarelaçãodeopções.Aconstruçãodeumformuláriorequercriaritensrelacionadoseordenadosdeforma lógica, requer ainda que se use terminologias de forma consistente,forneceratalhospralocalizareselecionarumitem,etc.Deve-sepensartambémnostiposdebotõesdeacordocomcadatipodedadoseaténomovimentoqueousuáriodevefazercomocursorquandovaideumitemaoutrodoformulário.Vantagensdoestilodeinteraçãoformulário:• Fácildeutilizar.• Fácildeprogramar(geralmenteassociadaaumbancodedados).• Apesardaaparentesimplicidade,apresentadesafiosinteressantespara

prevençãoerecuperaçãodeerrosdepreenchimentodousuário.Desvantagensdoestilodeinteraçãoformulário:• Ocupamuitoespaçonatela.• Usoumtantorestritoasistemasdecadastro.Um bom formulário deve respeitar regras básicas de diagramação, típicas daprodução gráfica tradicional. Apresentamos a seguir algumas regras simplesmaisdiretamenteaplicáveisàconstruçãodeformulários.Existemoutrasregras.

3.1–Regrasdelay-outquepodemsemaproveitadasnaconstruçãodeformuláriosVamosverapenasduasregras:AlinhamentoeProximidade.A regra do Alinhamento diz que os elementos de uma página devem estaralinhadosunscomosoutros,alinhadosàesquerda,centralizadoouàdireita.Exemplo de mau alinhamento em umformulário:observecomoissodificultaaleituraepreenchimento.

Exemplo de bom alinhamento em umformulário que facilita a leitura epreenchimento.

A regra daProximidade diz que os elementos que tem significados próximosdevemestar juntos.Deve-seagrupar itensquesesubordinemaoutrosouquetenhamfortesconexõesdesentido.Observeissonosexemplosapresentadosnafiguraabaixo.

Problema de Proximidade: qual blocodetextoserefereaqualtítulo?

Sabe-seclaramentequalblocodetextotemavercomqualtítulo.

Bibliografia:BARBOSA, S.D.J. Interação humano-computador. Rio de Janeiro: Elsevier,2010.

ROCHA,H.V.;BARANAUSKAS,M.C.DesigneAvaliaçãodeInterfacesHumano-Computador.Campinas,SP:NIED/UNICAMP,2003.PREECE,J.,Rogers,Sharp,H.,Benyon,D.,Holland,S.,Carey,T.Designdeinteração:alémdainteraçãohumano-computador.PortoAlegre:Bookman,2013.