Post on 19-May-2015
A
Prof. Dra. Sílvia Dotta
Aula 6. IHC – Estilos, Guias, Padrões
IHM Interface Humano-Máquina
Requer:
• Técnicas, métodos e ferramentas adequadas, aliadas à experiência do designer;
• Guidelines de design de interface, usabilidade etc.
• Guias de estilos;
• Checklists;
Design da Interface
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
• Checklists;
• Padrões para interfaces;
• Padrões de qualidade;
• Protótipos
Estilos de Interação
• É um termo genérico que inclui todas as formas como os usuários se comunicam ou interagem com sistemas computacionais (PREECE,1994; Scheiderman,1998).
• Entende-se por estilos, atributos relativos à apresentação ou
formatação visual, podendo também referir-se a questões de posicionamento e outras condições de apresentação gráfica
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
posicionamento e outras condições de apresentação gráfica
Estilos de Interação
• Linguagem natural
• Linguagem de comando
• Menus
• Preenchimento de Formulários
• Manipulação direta
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
• Manipulação direta
• Wimp (windows, icons, menus, pointers)
Estilos de InteraçãoLinguagem natural: Algumas aplicações permitem ao
usuário se expressar em linguagem natural. Este tipo de interação é bastante atrativa para o usuário com pouco ou nenhum conhecimento em computação;*não se aplica a todos os tipos de sistemas;*sistemas de consultas a informações são exemplos em
que a utilização de interfaces em linguagem natural é bastante interessante;
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
que a utilização de interfaces em linguagem natural é bastante interessante;*para permitir que um usuário interaja com aplicações
em linguagem natural podemos fornecer uma interface textual onde ele deve digitar as frases que expressam seus comandos ou questionamentos. Alternativas são as interfaces orientadas por menus, por meio dos quais se pode selecionar cada palavra ou expressão até compor a frase desejada.
Estilos de InteraçãoLinguagem de comando: as interfaces baseadas neste
estilo proporcionam ao usuário a possibilidade de enviar instruções diretamente ao sistema por meio de comandos específicos;*podem ser consideradas poderosas por oferecerem
acesso direto a funcionalidade do sistema e por permitirem maior iniciativa do usuário, maior flexibilidade na construção dos comandos pela variação
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
permitirem maior iniciativa do usuário, maior flexibilidade na construção dos comandos pela variação de parâmetros e combinação de palavras e sentenças;*contudo esse poder e flexibilidade implicam uma
maior dificuldade dos iniciantes em aprender e utilizar os sistemas.
Estilos de InteraçãoSeleção por Menus: é um conjunto de opções apresentado
na tela no qual a seleção de uma ou mais opções resulta em uma mudança da interface;
*neste estilo os usuários não precisam lembrar dos itens que deseja, basta reconhecê-los.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Estilos de InteraçãoPreenchimento de formulários: interfaces neste estilo são
utilizadas principalmente para entrada de dados em sistemas de informação (cadastros, controles de venda, estoque, aplicações de internet),
*layout de um formulário com freqüência é semelhante a um formulário impresso. São interfaces fáceis de se usar
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
um formulário impresso. São interfaces fáceis de se usar no entanto devem deixar claro o tipo de dado que pode entrar em cada campo, facilitar a correção de erros de digitação etc.
Estilos de InteraçãoManipulação direta: interfaces neste estilo são aquelas que
permitem ao usuário agir diretamente sobre os objetos da aplicação sem a necessidade de comandos de uma linguagem especifica;
*o usuário interage com ícones utilizando o mouse ou outro dispositivo equivalente por meio de ações do tipo
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
outro dispositivo equivalente por meio de ações do tipo clicar e arrastar.
Estilos de Interação
WIMP (Windows, Icons, Menus, Pointers): permite a interação através de componentes virtuais denominados Widgets;*este estilo é implementado com auxilio das tecnologias de interfaces gráficas que proporcionam desenhos de janelas e o controle de entrada através do teclado e do mouse em cada uma dessas janelas;*WIMP não deve ser considerado como um só estilo, mas a implementação de vários estilos como manipulação direta, preenchimento de formulários e linguagens de comandos .
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
implementação de vários estilos como manipulação direta, preenchimento de formulários e linguagens de comandos .
Um widget é um componente de uma interface gráfica do usuário (GUI), o que inclui janelas, botões, menus, ícones, barras de rolagem, etc..
Guidelines (recomendações)
• Guidelines são guias contendo um conjunto de recomendações norteadores tanto do design quanto da avaliação de interfaces.
• Conforme o nível de abstração as recomendações são denominadas regras de design (detalhados), ou princípios de design (mais de alto nível)
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
design (mais de alto nível)
• A aplicação de guidelines ajuda o designer a focar no que é necessário e a lidar com restrições e compromissos de design.
Guia de Estilo
• Um Guia de Estilo consiste em uma coleção de regras de design específicas
• Um Guia de estilo dita a aparência e o modo de atuar (lookand feel) de uma interface, tem o objetivo de garantir uma experiência visual consistente.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Checklist
• Checklist é um conjunto de regras que pode ser diretamente aplicável ao projeto, e que não necessita de um grande esforço de interpretação. Também pode ser usado tanto para auxiliar o design quanto para efetuar avaliações ou testes
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Padrões para Web
• W3C (Word Wide Web Consortium) – define linguagens de padrões para a web (html, xml, css, etc.)
• Folhas de Estilo (Cascade Style Sheets) – Tecnologia que agrega funções de estilo e formatação ao html, o CSS define dentro ou através da ligação a pastas externas os estilos de diversos
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
através da ligação a pastas externas os estilos de diversos elementos de documentos em html
Exemplos de Guidelines
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Os princípios heurísticos de Nielsen(10 heuristicas)
1. Visibilidade do estado do sistema
2. Compatibilidade entre sistema e mundo real
3. Liberdade e controle do usuário
4. Consistência e padrões
5. Prevenção de erros
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
5. Prevenção de erros
6. Ênfase no reconhecimento
7. Flexibilidade e eficiência no uso
8. Estética e projeto minimalistas
9. Auxílio ao reconhecimento, diagnóstico e recuperação de erros
10. Help e documentação
As oito regras de ouro de Shneiderman
1. Consistência
2. Habilitação de atalhos para usuários frequentes
3. Feedback informativo
4. Diálogos com encerramento evidente
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
4. Diálogos com encerramento evidente
5. Prevenção e tratamento simplificados de erros
6. Fácil reversão das ações
7. Suporte ao Controle por parte do Usuário
8. Redução da carga da memória de curto prazo
Princípios IBM
� A IBM mantém um site na Internet, www.ibm.com/ibm/easy/, especializado em questões relativas ao projeto centrado no usuário e à usabilidade, ou, como a própria empresa chama, facilidade de uso (Ease of Use).
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Princípios IBM1. Simplicidade
2. Suporte
3. Familiaridade
4. Obviedade
5. Encorajamento
6. Satisfação
7. Acessibilidade
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
7. Acessibilidade
8. Segurança
9. Versatilidade
10. Personalização
11. Afinidade
Princípios IBM 1- Simplicidade� Deve-se privilegiar a usabilidade à funcionalidade, ou
seja, a lógica de utilização deve prevalecer à lógica de funcionamento.
� A interface deve ser simples e direta, evitando-se que o
excesso de informações possa tirar a atenção do usuário.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
� Funções básicas devem estar sempre visíveis, e funçõesavançadas devem ser menos óbvias para usuáriosnovatos.
� Essencialmente, devem ser mantidas na tela, exclusivamente, as funções aplicáveis à tarefa emexecução.
Princípios IBM 2- Suporte� O sistema deve:
� mostrar o estado atual do sistema e, também , os estadospossíveis
� ter recursos que permitam ao usuário retomar com facilidade
um trabalho interrompido por períodos de horas e até dias
� reconhecer o objetivo da interação e proporcionar o níveladequado à experiência do usuário
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
reconhecer o objetivo da interação e proporcionar o níveladequado à experiência do usuário
� ter opções suficientes para atender a diferentes formas de
pensar do usuário
Princípios IBM 3- Familiaridade� O projeto deve proporcionar ao usuário condições para
aprender a partir do seu próprio conhecimento e de suaspróprias experiências do mundo real.
� O uso de conceitos e técnicas que o usuário já conhece no mundo real permite obter um progresso rápido e efetivo no que se refere à utilização do sistema.
Um conceito aprendido uma vez pode ser aplicado para
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
� Um conceito aprendido uma vez pode ser aplicado parafavorecer o aprendizado de situações similares.
Princípios IBM 4- Obviedade� Os objetos empregados na interface e seus respectivos
controles devem ser visíveis e intuitivos.
� A utilização de objetos do mundo real na interface permite ao usuário intuir comportamentos, dando-lhe mais conforto e segurança.
� Recomendação: combinação de representações do mundo
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
� Recomendação: combinação de representações do mundo
real com mecanismos de ação direta.
Princípios IBM 5- Encorajamento� A confiança do usuário com relação ao sistema é tanto maior
quanto mais as respostas do sistema corresponderem aos
resultados esperados, por isso as ações dever ser igualmente
previsíveis e reversíveis.
� Quando o software produz resultados previsíveis e reversíveis, o usuário sente-se mais encorajado a explorar a interface,
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
o usuário sente-se mais encorajado a explorar a interface, ativar funções, ver os resultados e desfazer ações indesejáveis.
Princípios IBM 6- Satisfação� recomendações:
� as ações do sistema devem ser seguidas de feedback imediato. Demoras excessivas tendem a reduzir a confiança do usuáriocom relação ao sistema, e respostas imediatas permitem aousuário ativar rapidamente os mecanismos de reversão de açõescom resultados indesejáveis;
devem ser evitadas situações nas quais os usuários podem estar
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
� devem ser evitadas situações nas quais os usuários podem estartrabalhando com dados desatualizados. Quando isso não for possível, o usuário deve ser prontamente informado.
Princípios IBM 7- Acessibilidade� Os objetos de interação devem estar acessíveis todo o tempo,
podendo ser usados em qualquer sequência.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Princípios IBM 8- Segurança� Este princípio sugere “manter os usuários longe de
problemas”.
� O projetista tem a função de criar mecanismos que impeçam os usuários de cometer erros.
� A interação nunca deve depender exclusivamente da memória do usuário para ter sequência, especialmente
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
memória do usuário para ter sequência, especialmente quando o sistema requer informações previamente fornecidas.
� A comunicação com o sistema por meio do help ou de indicativos visuais que permitam escolher os objetos de interação necessários pode ajudar o usuário a alcançar seus objetivos.
Princípios IBM 9- Versatilidade� A interface deve ser projetada de forma a suportar técnicas
alternativas de interação.
� Quanto mais versátil for a interface, maior será a quantidadede perfis de usuários que ela poderá satisfazer, especialmenteno que se refere ao nível de experiência.
� Desenvolver interfaces flexíveis é reconhecer a diversidade
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
� Desenvolver interfaces flexíveis é reconhecer a diversidadehumana, que pode ser influenciada por incapacidades, ambientes, culturas ou preferências.
Princípios IBM 10- Personalização� A interface deve ser customizável, isto é, deve ser
passível de adequação às necessidades e desejos individuais dos usuários.
� considerações para ambientes nos quais operam múltiplos usuários:
usuários que compartilham um mesmo equipamento devem
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
� usuários que compartilham um mesmo equipamento devem possuir mecanismos que permitam que cada operador crie sua
personalização. A personalização efetuada deve ser facilmente acessível ao respectivo operador;
� usuários que operam vários equipamentos devem possuir mecanismos que permitam que a configuração criada em um equipamento seja acessível em outro que venha a ser utilizado.
Princípios IBM 11- Afinidade� “trazer à vida os objetos de interação por meio de um bom
projeto visual”.
� “O resultado final deve ser uma representação intuitiva e familiar do que é a segunda natureza para os usuários”, ouseja, a função do projeto visual é criar um modelo virtual quecorresponda o mais fielmente possível à forma como o usuário
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
corresponda o mais fielmente possível à forma como o usuário
percebe e interage com os objetos reais.
Guidelines Usability - MIT� O IST - Information Services & Tecnology do MIT mantém um
site na Internet, http://ist.mit.edu/services/consulting/usability/guidelines com guidelines de usabilidade.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Guia de estilos
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Guia de estilos
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Exemplo de checklist
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
Diretrizes para homepage
Texto flui entre os espaços em branco
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta38
Diretrizes para homepage
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta39
Diretrizes para homepage
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta40
Padrões para design de interface de usuárioDescrição Site na Web/PadrõesANSI www.ansi.orgANSI
ANSI-HFES
ANSI-NSC
O ANSI e a Sociedade de Fatores Humanos e Ergonomia publicaram vários padrões conjuntos. O ANSI também tem o ANSI-NSC Z365 que diz respeito ao controle e à prevenção de desordem por estresse cumulativo (também conhecida como lesão por esforço repetitivo).
O ANSI está preparando padrões relativos à interação homem-computador como parte do Painel de Padrões da Infa-estrutura da Informação (IISP) em http://web.ansi.org/public/iisp/std_need/needcat.html.
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
ISO www.iso.chISO 9241 Uma grande variedade de padrões relativos, principalmente, à ergonomia de
estações de trabalho, mas também inclui um guia sobre usabilidade (parte 11). Também a base para ANSI-HFES 200, em desenvolvimento.
ISO 10075: 1991
Princípios ergonômicos relacionados à carga de trabalho mental
ISO 17041-1: 1995
Controle de cursor para edição de texto
ISO 11581 Série que trata de ícones e ponteiros
ISO 13407: 1999
Padrão para processos de design centrado no usuário para sistemas interativos
Atividade em grupo
• Seminário
• Grupo 1. Padrões de interação Apple
• Grupo 2. Padrões de interação Mobile
MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta