Design da comunicação de IHC ERBASE EPOCA 2009 2010
Design da comunicação sobre IHC Preciso comunicar ao usuário o que ele pode fazer e como ele pode interagir Contexto social e organizacional Estratégias comunicativas: IHC - escolha dos signos, - elaboração do diálogo, - organização de telas, páginas, etc.
Técnicas para comunicação de IHC Exemplos de técnicas para: Comunicação sobre IHC Arquitetura da interface de usuário Layout de telas Design da interação (diálogo) Estrutura dos comandos Visualização de informações Os itens acima são tratados separadamente apenas para fins teóricos Na prática, eles ocorrem de forma conjunta no design ERBASE EPOCA 2009 2010
Entendendo melhor Arquitetura da interface Define as forma como os elementos principais da interface (unidades de apresentação) estão organizados Define a forma de apresentação das telas (unidades de apresentação) e a navegação do usuário através delas. Layout de telas Define como os elementos de interação e informação estão organizados em unidade de apresentação Design da interação (diálogo) Define a estrutura do diálogo entre o usuário e o sistema Define quais os elementos de interação são utilizados Visualização da informação Escolha dos signos palavras, ícones, gráficos e código para representar as informações do sistema Permite representar dados complexos para o usuário ERBASE EPOCA 2009 2010
Design da Arquitetura da Interface: Exemplos ERBASE EPOCA 2009 2010
Janela principal com objeto de aplicação Arquitetura com janela principal menu e caixa de diálogo
Também conhecida com Center Stage ERBASE EPOCA 2009 2010
Janela principal e janelas filhas Uma janela principal e subjanelas
Múltiplas janelas independentes Múltiplas janelas
Uma tela por vez Quando existe limitação de espaço, apenas uma tela é mostrada por vez As telas são organizadas com uma tela principal que dá acesso a outras Comum em MUI (celulares, iphone, etc.) e WUI (páginas Web)
Janela única com abas Uma janela e múltiplas abas
Janela única com divisões Uma janela, menu de navegação e área de edição
Design da Comunicação de IHC: Layout ERBASE EPOCA 2009 2010
Aplicação: layout de telas exemplo 1 O layout de um IU precisa ser bem organizado Organização torna a leitura e interpretação mais claras Oferece consistência e previsibilidade
Contra-exemplo: falta de organização
Design gráfico: 4 princípios básicos Robin Williams, 94 Proximidade A proximidade implica em uma relação Itens relacionados entre si deve ser agrupados Alinhamento Nada deve ser colocado arbitrariamente em uma página Cada item deve ter uma conexão visual com algo na página Contraste Se dois itens não foram, diferencie-os completamente. O contraste atrai o leitor. Repetição Algum aspecto do design deve repetir-se no material inteiro. Cria uma identidade. Situa o elemento no contexto. ERBASE EPOCA 2009 2010
Aplicando os princípios Proximidade Alinhamento Contraste
Resultado Repetição
Design da Interação: exemplos ERBASE EPOCA 2009 2010
Interação por menu + caixa de diálogo
Interação por menu contextual Usuário clica com o botão direito do mouse sobre um objeto da aplicação Selec. objeto ->clique -> selec. ação ERBASE EPOCA 2009 2010
Interação instrumental Neste modo de interação, o usuário escolhe a ferramenta (que determina a função) e atua sobre um objeto Selec. função -> Selec. Objeto Selec. função -> Ação
Interação focal Neste modo, o usuário primeiro seleciona o objeto, em seguida escolhe a função (ferramenta ou propriedade) Selec. objeto -> (Selec. Ação ou Ação)*
Interação por categorias: árvore de seleção O usuário comanda a aplicação fornecendo valores em diversas categorias. Quando escolhe OK/Cancel a interação está finalizada
Visualização da informação ERBASE EPOCA 2009 2010
Visualização de informações e IHC Em sistemas de visualização de informação, IHC é fundamental Comandos para busca e seleção de dados Mecanismos de controle para visualizar dados (ver exemplo Mapa do Mercado) Em sistemas convencionais, a visualização de informações aplica-se na formatação dos dados computados resultados de computação ERBASE EPOCA 2009 2010
Visualizando resultados de computação O resultado de uma função deve ser claramente apresentado ao usuário para que ele possa Perceber Interpretar Avaliar
Diferentes objetos permitem diferentes visões 80,000. 75,000. 70,000. Improvement 65,000. 60,000. 55,000. 50,000. 45,000. 40,000. 140.0 160.0 180.0 200.0 220.0 240.0 260.0 280.0 300.0 Selling price
Outras mensagens do sistema Feedback Advertências ou erros
Feedback Mostra ao usuário a ação que o sistema está realizando
Advertências Mensagem ruim Mensagem boa
Ofereça sempre feedback Mantenha o usuário continuamente informado sobre O que o sistema está fazendo Como o comando foi interpretado Os resultados do comando O que ele está fazendo? > >Procurando Isto vai levar 5 minutos... Hora do café.