Texto-Aula 3.1 Prof. Ronaldo Barbosa Estilos de Interação em IHC: manipulação direta e preenchimento de formulários

Tamanho: px

Começar a partir da página:

Download "Texto-Aula 3.1 Prof. Ronaldo Barbosa Estilos de Interação em IHC: manipulação direta e preenchimento de formulários"

Ângelo Gentil Palha
6 Há anos
Visualizações:

Texto-Aula 3.1 Prof. Ronaldo Barbosa Estilos de Interação em IHC: manipulação direta e preenchimento de formulários 1 - Introdução Observe a figura abaixo que retrata a interação usuário-computador:?

Adaptado de Rocha (2003) No processo de interação usuário-sistema cabem duas perguntas importantes: Como a informação vinda do usuário deve ser tratada pelo sistema?

1 Texto-Aula 3.1 Prof. Ronaldo Barbosa Estilos de Interação em IHC: manipulação direta e preenchimento de formulários 1 - Introdução Observe a figura abaixo que retrata a interação usuário-computador:??? Objetivo Processo de interação sistema O usuário age sobre o sistema e o sistema age sobre o usuário. Adaptado de Rocha (2003) No processo de interação usuário-sistema cabem duas perguntas importantes: Como a informação vinda do usuário deve ser tratada pelo sistema? Como a informação vinda do sistema deve ser apresentada ao usuário? Existem estilos gerais de interação usuário-sistema que nos ajudam a responder essas perguntas. Vamos conhecer cinco estilos básicos de interação usuário-sistema: manipulação direta seleção de menu formulários linhas de comando linguagem natural??? 2 Estilos de Interação: Manipulação Direta A ideia mais importante aqui é aproximar a interação da manipulação de objetos do mundo real.

O objeto do mundo real deve ter uma metáfora visual no mundo virtual e cada manipulação sobre o objeto deve ser mapeada para operações do mouse ou teclado, como clique simples, duplo clique, arrasto,

2 O objeto do mundo real deve ter uma metáfora visual no mundo virtual e cada manipulação sobre o objeto deve ser mapeada para operações do mouse ou teclado, como clique simples, duplo clique, arrasto, etc. Veja na figura abaixo a tela que representa o movimento de um ícone de um ponto da tela até a aproximação com a lixeira. Observe a metáfora visual presente: jogar o documento na lixeira equivale a arrastar o documento até onde está ícone com aparência de lixeira. Os games de computador representam bem a evolução dos sistemas de interação do tipo manipulação direta. Um bom exemplo de manipulação direta é dirigir um automóvel em um game. Observe a figura abaixo. Por uma janela que lembra um pára-brisas, você tem uma visão do que está à

acelerar ou frear, basta acionar o desenho do pedal com

br/noticias/noticia/2013/11/real-racing-3-asphalt8-e-mais-os-melhores-jogos-de-corrida-para-android.

Telejogo: jogo para ser jogado que era instalado nos antigos televisores na década de 1970. https://www.youtube.com/watch?

v=p bzctmhflxg Com a evolução das plataformas e sistemas, é difícil enxergar limites para o poder de interatividade dos jogos.

3 frente do veículo. Para virar à direita, você gira um pouco o desenho do volante, para trocar a marcha você aciona um desenho de uma alavanca, para acelerar ou frear, basta acionar o desenho do pedal com o mouse, e assim por diante. Exemplos de outros jogos clássicos na figura seguinte são representativos da evolução das interfaces interativas. Telejogo: jogo para ser jogado que era instalado nos antigos televisores na década de YNmG6PhPaE PacMan: um dos jogos mais importantes da história dos jogos eletrônicos. bzctmhflxg Com a evolução das plataformas e sistemas, é difícil enxergar limites para o poder de interatividade dos jogos. Mas o estilo de interação do tipo manipulação direta é útil apenas para consoles de games? Na verdade, não. Há exemplos em inúmeras outras áreas como engenharia, projetos diversos e simuladores de todo tipo. Ferramenta de projetos AutoCAD k.com/ education/freesoftware/autocad Ferramenta de criação de cenários e maquetes Bryce /bryce-7-pro Simulador de prática de direção imulador-para-auto-escola

4 Conforme vimos, a manipulação direta prioriza representações visuais que podem ser bastante sofisticadas, em lugar de representações numéricas ou textuais. Vantagens da modalidade de interação usuário computador Manipulação Direta: Ações físicas são mais fáceis de aprender do que uma sintaxe complexa. Resultados das ações geram efeito imediato. Redução de taxas de erro. Aumento do engajamento e motivação do usuário. Requer menor experiência anterior do usuário. Desvantagens da modalidade de interação usuário computador Manipulação Direta: Requer aparato de equipamentos mais sofisticados. Consome muito espaço da tela. Usuário deve entender as metáforas visuais. Não há metáforas visuais para tudo! Programação/ design pode ser trabalhosa e excessivamente sofisticada. 3 - Estilo de interação: Preenchimento de Formulários É um estilo muito comum de interação em que o sistema solicita dados do usuário através de campos que precisam ser preenchidos em campos fixos na tela. Os formulários comumente encontrados em websites se encaixam nesse estilo de interação (cadastro de produtos, clientes, pedidos, etc). Veja a figura abaixo que representa um formulário típico.

5 O usuário precisa preencher todos os campos e fazer escolhas de uma relação de opções. A construção de um formulário requer criar itens relacionados e ordenados de forma lógica, requer ainda que se use terminologias de forma consistente, fornecer atalhos pra localizar e selecionar um item, etc. Deve-se pensar também nos tipos de botões de acordo com cada tipo de dados e até no movimento que o usuário deve fazer com o cursor quando vai de um item a outro do formulário. Vantagens do estilo de interação formulário: Fácil de utilizar. Fácil de programar (geralmente associada a um banco de dados). Apesar da aparente simplicidade, apresenta desafios interessantes para prevenção e recuperação de erros de preenchimento do usuário. Desvantagens do estilo de interação formulário: Ocupa muito espaço na tela. Uso um tanto restrito a sistemas de cadastro. Um bom formulário deve respeitar regras básicas de diagramação, típicas da produção gráfica tradicional. Apresentamos a seguir algumas regras simples mais diretamente aplicáveis à construção de formulários. Existem outras regras.

Exemplo de mau alinhamento em um formulário: observe como isso dificulta a leitura e preenchimento. Exemplo de bom alinhamento em um formulário que facilita a leitura e preenchimento.

6 3.1 Regras de lay-out que podem sem aproveitadas na construção de formulários Vamos ver apenas duas regras: Alinhamento e Proximidade. A regra do Alinhamento diz que os elementos de uma página devem estar alinhados uns com os outros, alinhados à esquerda, centralizado ou à direita. Exemplo de mau alinhamento em um formulário: observe como isso dificulta a leitura e preenchimento. Exemplo de bom alinhamento em um formulário que facilita a leitura e preenchimento. A regra da Proximidade diz que os elementos que tem significados próximos devem estar juntos. Deve-se agrupar itens que se subordinem a outros ou que tenham fortes conexões de sentido. Observe isso nos exemplos apresentados na figura abaixo. Problema de Proximidade: qual bloco de texto se refere a qual título? Sabe-se claramente qual bloco de texto tem a ver com qual título. Bibliografia: BARBOSA, S.D.J. Interação humano-computador. Rio de Janeiro: Elsevier, 2010.

7 ROCHA, H.V.; BARANAUSKAS, M.C. Design e Avaliação de Interfaces Humano- Computador. Campinas, SP:NIED/UNICAMP, PREECE, J., Rogers, Sharp, H., Benyon, D., Holland, S., Carey, T. Design de interação: além da interação humano-computador. Porto Alegre: Bookman, 2013.

Documentos relacionados

Texto-Aula 3.2 Prof. Ronaldo Barbosa Estilos de Interação: sistema de menus, linhas de comando, linguagem natural

Texto-Aula 3.2 Prof. Ronaldo Barbosa Estilos de Interação: sistema de menus, linhas de comando, linguagem natural 4 Estilo de interação Sistema de menus Sistema de menus é o modelo de interação mais genérico