Aula6 - Estilos, guias, padrões

A

IHM
Interface Humano-Máquina

Prof. Dra. Sílvia Dotta

Aula 6. IHC – Estilos, Guias, Padrões

Design da Interface
Requer:
• Técnicas, métodos e ferramentas adequadas, aliadas à
experiência do designer;
• Guidelines de design de interface, usabilidade etc.
• Guias de estilos;
• Checklists;
• Padrões para interfaces;
• Padrões de qualidade;
• Protótipos

MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

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


• Linguagem natural
• Linguagem de comando
• Menus
• Preenchimento de Formulários
• Manipulação direta
• Wimp (windows, icons, menus, pointers)


Linguagem 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;
*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.


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


Seleçã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.


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


Manipulaçã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
clicar e arrastar.


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 .

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)
• 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 (look
and feel) de uma interface, tem o objetivo de garantir uma
experiência visual consistente.


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


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
elementos de documentos em html


Exemplos de Guidelines


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


Princípios IBM
1. Simplicidade
2. Suporte
3. Familiaridade
4. Obviedade
5. Encorajamento
6. Satisfação
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.
Funções básicas devem estar sempre visíveis, e funções
avançadas devem ser menos óbvias para usuários
novatos.
Essencialmente, devem ser mantidas na tela,
exclusivamente, as funções aplicáveis à tarefa em
execução.


Princípios IBM 2- Suporte
O sistema deve:
mostrar o estado atual do sistema e, também , os estados
possí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ível
adequado à 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 suas
pró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
favorecer 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
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,
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ário
com relação ao sistema, e respostas imediatas permitem ao
usuário ativar rapidamente os mecanismos de reversão de ações
com resultados indesejáveis;
devem ser evitadas situações nas quais os usuários podem estar
trabalhando 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.


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
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 quantidade
de perfis de usuários que ela poderá satisfazer, especialmente
no que se refere ao nível de experiência.
Desenvolver interfaces flexíveis é reconhecer a diversidade
humana, 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
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”, ou
seja, a função do projeto visual é criar um modelo virtual que
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.


Guia de estilos


Exemplo de checklist


Diretrizes para homepage

Texto flui entre os espaços em branco

38


39


40

Padrões para design de interface de usuário
Descrição Site na Web/Padrões
ANSI www.ansi.org
ANSI 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
ANSI-HFES
controle e à prevenção de desordem por estresse cumulativo (também
ANSI-NSC 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.

ISO www.iso.ch
ISO 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: Princípios ergonômicos relacionados à carga de trabalho mental
1991
ISO 17041-1: Controle de cursor para edição de texto
1995
ISO 11581 Série que trata de ícones e ponteiros
ISO 13407: Padrão para processos de design centrado no usuário para sistemas interativos
1999

Atividade em grupo
• Seminário
• Grupo 1. Padrões de interação Apple
• Grupo 2. Padrões de interação Mobile


Aula6 - Estilos, guias, padrões

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula6 - Estilos, guias, padrões

Último

Aula6 - Estilos, guias, padrões