Princpios e Diretrizes para o Design de IHC

Princpios e Diretrizes de Design

Podem auxiliar um projeto de IHC por chamarem ateno e apontarem solues para problemas comuns na prtica; Eles jamais devem substituir as atividades de anlise, design e avaliao de IHC, pois cada caso de design possui suas particularidades que no podem ser ignoradas; Os princpios e as diretrizes comumente utilizados em IHC giram em torno:
Correspondncia com as expectativas dos usurios; Simplicidade nas estruturas de tarefas; Equilbrio entre controle e liberdade do usurio; Consistncia e padronizao; Promoo da eficincia do usurio; Antecipao das necessidades do usurios; Visibilidade e reconhecimento; Contedo relevante e expresso adequada; Projeto para erros.
20/10/12 2

Correspondncia com as expectativas dos usurios

Explorar os mapeamentos naturais, seja entre as variveis mentais e as fsicas, seja entre as tarefas e os controles utilizados para manipular essas variveis no mundo real e no sistema projetado:
Por exemplo, o sistema deve permitir que o usurio encontre o produto desejado antes de se identificar, como ele costuma fazer em lojas fsica:

Estruturar o dilogo de forma a seguir uma linha de raciocnio e fornecer um fechamento; Seguir as convenes do mundo real, fazendo com que a informao aparea em uma ordem natural e lgica.

20/10/12

Simplicidade nas Estruturas das Tarefas

Simplificar a estrutura das tarefas, reduzindo a quantidade de planejamento e resoluo de problemas que elas requerem; Para simplificar a estrutura de tarefas, os designers podem seguir quatro abordagens tecnolgicas:
Manter a tarefa a mesma, mas fornecendo diversas formas de apoio para que o usurios consigam aprender a realizar a tarefa; Usar tecnologia para tornar visvel o que seria invisvel, melhorando o feedback e a capacidade do usurio se manter no controle da tarefa; Automatizar a tarefa, mantendo-a igual; Modificar a natureza da tarefa;

20/10/12

Equilbrio entre Controle e Liberdade do Usurio

Mantenha o usurio no controle; Explore o poder das restries, tanto naturais como artificiais, e projetar restries para que o usurio sinta como se houvesse apenas uma coisa possvel a fazer a coisa certa; Usurios no devem ficar presos num caminho de interao nico para realizar uma atividade; Fornea aos usurios uma sada clara e rpida, mas deve ser mais fcil se manter no caminho do que sair dele inadvertidamente.

20/10/12

Equilbrio entre Controle e Liberdade do Usurio

Permita que o usurio cancele, desfaa e refaa suas aes. Isso facilita o aprendizado por explorao

20/10/12

Equilbrio entre Controle e Liberdade do Usurio

Quando uma operao considerada perigosa no puder ser desfeita, devemos projetar medidas de segurana para que ela no seja acionada incidentalmente;

O sistema no deve forar o usurio a escolher o tempo todo uma quantidade enorme de opes para prosseguir rumo ao objetivo; Escolha bons valores padro (defaults) para quando no for necessrio incomodar o usurio.
20/10/12 7

Consistncia e Padronizao
Padronize as aes, os resultados das aes, o layout dos dilogos e as visualizaes de informao: Por exemplo: aes semelhantes devem funcionar de modo semelhante; Os usurios no devem ter de se perguntar se palavras, situaes ou aes diferentes significam a mesma coisa: Por exemplo: utilizar rtulos Salvar e Gravar indiscriminadamente em um mesmo sistema pode confundir o usurio; A mesma terminologia deve ser utilizada em perguntas, menus e sistemas de ajuda.

20/10/12

Promovendo a Eficincia do Usurio

Mantenha o usurio ocupado, ou seja, os processamentos demorados no devem impedir o usurio de realizar outras atividades no sistema, deixando o processos rodando em background; Proteja o trabalho dos usurios, ou seja, o sistema deve evitar perder ou deixar de salvar algo que o usurio j fez; Fornea atalhos e aceleradores, como teclas de atalho e botes na barra de ferramenta.

20/10/12

Antecipao
Tente prever o que o usurio quer e precisa, para fornecer todas as informaes e ferramentas necessrias para cada passo do processo; Tome iniciativa e fornea informaes adicionais teis, em vez de apenas responder precisamente a pergunta que o usurio tiver feito:

Considere cada alternativa. Ela eciente? neutra? Ou induz a uma determinada opo?
20/10/12 10

Visibilidade e Reconhecimento
O designer deve tonar os objetos visveis: abreviar os golfos de execuo e avaliao; O estado do sistema, os objetos, as aes e as opes devem estar atualizados e facilmente perceptveis; O usurio no deve ter de se lembrar de informaes de uma parte da aplicao quando tiver passado para uma outra parte da aplicao; Quando o usurio realiza uma ao, o sistema deve mant-lo informado sobre o que ocorreu ou est ocorrendo, atravs de feedback (resposta do sistema) adequado e no tempo certo.

20/10/12

11

Visibilidade e Reconhecimento
Em geral, as informaes de status podem ser bem sutis; Para aes frequentes e com resultado esperado, a resposta pode ser sutil, mas para aes infrequentes e com grandes consequncias, a resposta deve ser mais substancial;

(a) um feedback sutil como resultado de um cadastro bem-sucedido; (b) outro feedback destacado, indicando uma falha.
20/10/12 12

Contedo Relevante e Expresso Adequada

Projeto esttico e minimalista (Apple); As mensagens de instruo e ajuda devem ser concisas e informativas sobre problemas que ocorrerem; Os rtulos de menus e botes devem ser claros e livres de ambiguidade; Certifique-se de que o texto tambm seja legvel.

20/10/12

13

Projeto para Erros

Deve ser fcil reverter as operaes e difcil realizar aes irreversveis; Ajudar aos usurios a reconhecerem, diagnosticarem e se recuperarem de erros, informando-lhe sobre o que ocorreu, as consequncias disso e como reverter os resultados indesejados

20/10/12

14

Projeto para Erros

No coloque controles de funes utilizadas com frequncia adjacentes a controles perigosos ou que raramente so utilizados; Exemplo: um boto de inspeo de Propriedades est posicionado bem prximo ao boto para Desabilitar a conexo de rede que, inclusive, efetua a operao sem pedir confirmao do usurio

20/10/12

15

Padres de Design de IHC

Padres de design (design patterns) so descries de melhores prticas num determinado domnio de design; Padres no so solues prontas, nem regras ou heursticas. aplicao de um padro difere ligeiramente uma da outra; Cada

O uso de padres no substitui o processo criativo envolvido num projeto de design, nem assegura por si s a qualidade do produto final; As vantagens do uso de padres, alm da captura da sabedoria coletiva de designers experientes, o fornecimento de um vocabulrio comum e divulgao de boas solues para a comunidade de design; Os padres no so isolados, esto relacionados com outros padres de diversas maneiras; Cada padro pode ser descrito em maior ou menor nvel de detalhamento e pode ser adequado a apenas um certo contexto.

20/10/12

16

Padres de Design de IHC

Padres de IHC podem ser descritos pelos seguintes elementos:
O nome do padro, para transmitir em poucas palavras a ideia do padro; Uma avaliao de sua validade, indicando o grau de confiana que os autores tinham no padro; Uma imagem como exemplo de aplicao do padro; O contexto em que o padro pode ser usado; Uma breve descrio do problema, um resumo da situao geral que o padro enderea; Uma descrio detalhada do problema; A soluo central do padro, um conjunto claro de instrues que possam ser aplicadas; Um diagrama ilustrando a soluo, geralmente um esboo grfico da soluo e seus principais constituintes; Referncias a padres outros padres, recomendao da autor sobre como implementar e desdobrar ainda mais a soluo representada no padro atual.
20/10/12 17

Exemplo
Ttulo: Acordeo: Problema: O usurio precisa encontrar um item dentre as opes de navegao. Soluo: Empilhar painis vertical ou horizontalmente, abrindo um painel de cada vez, enquanto colapsa os demais. Usar quando: Como mecanismo de navegao, sendo conceitualmente equivalente a Guias e uma soluo alternativa a rvores de navegao. Embora seja utilizado como parte de um Assistente, isso no recomendado, pois apresenta pior qualidade de uso do que implementaes tradicionais. Pode ser uma boa forma de implementar uma seo de Perguntas Frequentes (FAQ), em que cada pergunta aberta de uma vez. Um outro uso seria para gerenciar configuraes de preferncias. O nmero de painis deve ser reduzido, em geral menor que dez.

20/10/12

18

Exemplo
Como: Os painis podem ser dispostos vertical ou horizontalmente. Apenas um painel mantido aberto de cada vez. Quando mais do que um painel pode ser mantido aberto, trata-se do padro Painis Colapsveis. Em geral, painis verticais so destinados a submenus, enquanto painis horizontais revelam grandes reas de contedo. Os seguintes cuidados devem ser tomados na implementao do padro Acordeo:
Anime a abertura dos painis para fornecer aos usurios feedback sobre o que est acontecendo. A animao deve ser sutil e durar no mximo 250 ms; Permita que a navegao seja feita atravs das setas do teclado; Destaque o painel atual para que o usurio possa facilmente diferenciar o cabealho do painel aberto dos cabealhos dos painis fechados; Certifique-se de que o tamanho total do Acordeo pode aumentar ou diminuir para acomodar o contedo adequadamente.

Por qu: Um acordeo til para comprimir muitos elementos num espao de tela compacto. Os elementos podem ser propriedades, perguntas ou simples itens de navegao. A desvantagem bvia que os elementos dos outros painis ficam ocultos.
20/10/12 19

Exemplo

20/10/12

20

Guias de Estilo
comum, principalmente em projetos grandes, reunir os princpios e diretrizes adotados em um documento intitulado guia de estilo; Trata-se de um registro das principais decises de design tomadas, de forma que elas no se percam, isto , sejam efetivamente incorporadas no produto final; A de estilo servem de ferramenta de comunicao entre os membros da equipe de design e tambm com a equipe de desenvolvimento; importante que as decises de design possam ser facilmente consultadas e reutilizadas nas discusses sobre extenses ou verses futuras do produto;

20/10/12

21

Guias de Estilo
Podem ser elaborados com diferentes escopos:
Plataforma (composio de dispositivo e sistema operacional); Corporativo (para assegurar a padronizao e consistncia entre produtos de uma empresa); Famlia de produtos; Um produto especfico;

Uma guia de estilo deve incorporar decises de design envolvendo os principais elementos e consideraes de design de interface:
Layout: proporo e grids; uso de metforas espaciais; design grfico de exibidores e ferramentas; Tipografia e seu uso em dilogos, formulrios e relatrios; Simbolismo: clareza e consistncia no design de cones; Cores: os dez mandamentos sobre o uso de cores; Visualizao de informao: design de grficos, diagramas e mapas; Design de telas e elementos de interface (widgets - um componente de uma interface grfica do usurio (GUI), o que inclui janelas, botes, menus, cones, barras de rolagem, etc..).
20/10/12 1 - a arte e o processo de criao na composio de um texto, fsica ou digitalmente. 22