Aula6 - Estilos, guias, padrões

1.414 visualizações

Publicada em

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.414
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
88
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula6 - Estilos, guias, padrões

  1. 1. AIHMInterface Humano-MáquinaProf. Dra. Sílvia DottaAula 6. IHC – Estilos, Guias, Padrões
  2. 2. 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ótiposMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  3. 3. 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áficaMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  4. 4. Estilos de Interação • Linguagem natural • Linguagem de comando • Menus • Preenchimento de Formulários • Manipulação direta • Wimp (windows, icons, menus, pointers)MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  5. 5. Estilos de Interação 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  6. 6. Estilos de Interação 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  7. 7. Estilos de Interação 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  8. 8. Estilos de Interação 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  9. 9. Estilos de Interação 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  10. 10. 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 .Um widget é um componentede uma interface gráfica dousuário (GUI), o que incluijanelas, botões, menus, ícones,barras de rolagem, etc.. MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  11. 11. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  12. 12. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  13. 13. 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 testesMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  14. 14. 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 htmlMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  15. 15. Exemplos de GuidelinesMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  16. 16. 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çãoMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  17. 17. As oito regras de ouro de Shneiderman1. Consistência2. Habilitação de atalhos para usuários frequentes3. Feedback informativo4. Diálogos com encerramento evidente5. Prevenção e tratamento simplificados de erros6. Fácil reversão das ações7. Suporte ao Controle por parte do Usuário8. Redução da carga da memória de curto prazoMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  18. 18. 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
  19. 19. 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. AfinidadeMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  20. 20. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  21. 21. 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árioMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  22. 22. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  23. 23. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  24. 24. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  25. 25. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  26. 26. 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
  27. 27. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  28. 28. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  29. 29. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  30. 30. 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.MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  31. 31. 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
  32. 32. Guia de estilosMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  33. 33. Guia de estilosMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  34. 34. MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  35. 35. MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  36. 36. MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  37. 37. Exemplo de checklistMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  38. 38. Diretrizes para homepage Texto flui entre os espaços em branco 38MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  39. 39. Diretrizes para homepage 39MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  40. 40. Diretrizes para homepage 40MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  41. 41. 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 MC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta
  42. 42. Atividade em grupo • Seminário • Grupo 1. Padrões de interação Apple • Grupo 2. Padrões de interação MobileMC71404-Interface Humano-Máquina : Prof. Dra. Sílvia Dotta

×