aula6 - estilos, guias, padrões

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


posicionamento e outras condições de apresentação gráfica


• Linguagem natural

• Linguagem de comando

• Menus

• Preenchimento de Formulários

• Manipulação direta


• 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;


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


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.


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


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


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 .


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)


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.


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


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


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


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 IBM1. Simplicidade

2. Suporte

3. Familiaridade

4. Obviedade

5. Encorajamento

6. Satisfação

7. Acessibilidade


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çõ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


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


� 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


� 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,


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


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


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


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


� 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


� 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


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

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

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.


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


aula6 - estilos, guias, padrões

Education