1 / 24

Estilos de interfaces gráficas

Estilos de interfaces gráficas. Maria Alice Grigas Varella Ferreira EP-USP Março 2003. Interação. É a troca de informações entre homem e computador, composta por: Execução de comandos do ser huma-no – interface de ação Apresentação de respostas do com-putador – interface de percepção.

lynne
Download Presentation

Estilos de interfaces gráficas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Estilos de interfaces gráficas Maria Alice Grigas Varella Ferreira EP-USP Março 2003

  2. Interação É a troca de informações entre homem e computador, composta por: • Execução de comandos do ser huma-no – interface de ação • Apresentação de respostas do com-putador – interface de percepção

  3. As duas componentes Percepção Ação

  4. Como podem ser

  5. Estilos de IHC • Gráficas • WYSIWYG • Manipulação Direta • Icônicas • Não Gráficas • Modelo de Automação de Escritórios (menus) • Linguagens de Comandos • Linguagens Naturais • Pergunta e Resposta

  6. “What you see is what you get “ (WYSIWYG - WIZ-EE-WIG) A imagem de manipulação da interface é a mesma que a aplicação cria . Ex: Editores de texto, como o Word da Microsoft. “Aqui você tem negrito, sublinhado e itálico. “Aqui voc^^e tem ^bnegrito, ^ssublinhado e ^iit^’alico.”

  7. “What you see is what you get “ (WYSIWYG - WIZ-EE-WIG) • Vantagens: • O usuário vê na tela aquilo que terá na impressão; clareza. • Existem aplicações que não conseguem ser implementadas neste estilo (estilo restrito) • Desvantagens: • Tela difere da impressão no estilo não WISISWYG, o que pode confundir o usuário. Ex: Latex • Entretanto, estes estilos podem ser poderosos.

  8. Manipulação Direta • Todos os objetos, atributos e relações são expressos e operados visualmente (o estilo de Manipulação Direta pura é o sistema Macintosh) • As operações são realizadas por ações realizadas sobre a representação na tela. Exemplo: para excluir um arquivo, ele sofre “dragging” e é levado para a lixeira.

  9. I love you Manipulação Direta • Representação: • Texto: nome de um arquivo • Gráfico: ícones com algum tipo de signifi-cado (o significado deve ser “aprendido” pelo usuário e nem sempre é imediato)

  10. Manipulação Direta • Vantagens: • uso fácil por usuários leigos • aprendizado rápido • Desvantagens: • lenta para os usuários experientes • buscas difíceis sobre conjuntos extensos de elementos. Exemplo: exclusão de arquivo: excluir *.txt é mais fácil • encoraja o uso de nomes longos

  11. Preenchimento de Formulários(form fill-in) • Uso restrito porém, estatisticamente, muito usado. Não requer aprendizado. Porque estudar IHC – Heloisa Vieira da Rocha – IHC’2002

  12. Interfaces Mixtas • As interfaces de padrão WIMP são, geralmente, do tipo mixto, isto é, constituídas por: • manipulação direta • comandos (teclados e menus) • Vantagens: • Maior eficiência

  13. Interfaces Mixtas • Padrão “desktop” - metáfora da mesa de escritório Página ativa

  14. Metáfora • metáfora . [Do gr. metaphorá, pelo lat. metaphora.] S. f. 1. Tropo que consiste na transferência de uma palavra para um âmbito semântico que não é o do objeto que ela designa, e que se fundamenta numa relação de semelhança subentendida entre o sentido próprio e o figurado; translação. [Por metáfora, chama-se raposa a uma pessoa astuta, ou se designa a juventude primavera da vida.] [Dicionário Aurélio]

  15. Metáfora Visual • O aspecto central da metáfora do escritório foi criar contrapartidas eletrônicas para os objetos de escritório. Isto significou representar os objetos na tela através de ícones e buscar ações similares às que ocorrem em um escritório real: buscar pastas, esvaziar o lixo, copiar documentos etc.

  16. Interfaces WIMP • As interfaces GUI (Graphical User Interfaces) são chamadas também de interfaces WIMP: • W = Windows • I = Icons • M = Menus • P = Pointers

  17. Uso de ícones • Ícone - representação pictórica de: • objetos, • ações, • propriedades ou • conceitos considerados relevantes • Devem ser “aprendidos”, pois nem sempre representam o “objeto” exato.

  18. Representação de Objetos • Objetos reais

  19. Representação de Ações • Através de objetos reais • Representação abstrata imprimir Mover Deslocar para a direita

  20. Representação de Ações • Antes e depois Translação Rotação Escala uniforme Escala horizontal Escala vertical

  21. Representação de Ações • Representação arbitrária – sempre requer aprendizado. Os ícones são apresentados com nomes.

  22. Interfaces com ícones • Vantagens: • Reconhecimento mais rápido • Menos espaço desperdiçado na tela • Independência de linguagem – após o aprendizado, não é necessário fazer a tradução

  23. Comparação entre formas de diálogo (Foley, 1990)

  24. Referências • (Foley et al, 1990) Foley, J. D. et al. Computer Graphics Principles and Practices. Addison-Wesley, Reading, 1990. Cap. 8-10.

More Related