Design da comunicação de IHC

Transcrição

1 Design da comunicação de IHC ERBASE EPOCA

2 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.

3 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

4 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

5 Design da Arquitetura da Interface: Exemplos ERBASE EPOCA

6 Janela principal com objeto de aplicação Arquitetura com janela principal menu e caixa de diálogo

7 Também conhecida com Center Stage ERBASE EPOCA

8 Janela principal e janelas filhas Uma janela principal e subjanelas

9 Múltiplas janelas independentes Múltiplas janelas

10 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)

11 Janela única com abas Uma janela e múltiplas abas

12 Janela única com divisões Uma janela, menu de navegação e área de edição

13 Design da Comunicação de IHC: Layout ERBASE EPOCA

14 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

15 Contra-exemplo: falta de organização

16 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

17 Aplicando os princípios Proximidade Alinhamento Contraste

18 Resultado Repetição

19 Design da Interação: exemplos ERBASE EPOCA

20 Interação por menu + caixa de diálogo

21 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

22 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

23 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)*

24 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

25 Visualização da informação ERBASE EPOCA

26 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

27 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

28 Diferentes objetos permitem diferentes visões 80, , ,000. Improvement 65, , , , , , Selling price

29 Outras mensagens do sistema Feedback Advertências ou erros

30 Feedback Mostra ao usuário a ação que o sistema está realizando

31 Advertências Mensagem ruim Mensagem boa

32 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é.