Design De Interfaces

3,295 views

Published on

Trabalho realizado para a disciplina: Interfaces Hipertextuais para Visualização da Informação - ECI-UFMG

Published in: Education, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,295
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • <number>
  • Design De Interfaces

    1. 1. Universidade Federal de Minas Gerais Escola de Ciência da Informação Interfaces Hipertextuais para Visualização da Informação Biblioteconomia – 7º período Prof.: Marcel Ferrante Bruno Henrique Brant Juliana Aiala Mendes Maristela Reis Ferreira Roseane Netto Vinte Belo Horizonte 2009
    2. 2. Design de Interfaces: Prototipação e Construção
    3. 3. Agenda <ul><li>Prototipação; </li></ul><ul><li>Recomendações (guidelines) e regras disponíveis para auxiliar os designers de interação; </li></ul><ul><li>Ferramentas de suporte disponíveis para o design de interação. </li></ul>
    4. 4. Prototipação e construção O que é um protótipo? <ul><li>Protótipo é uma representação limitada de um design que permite aos usuários interagir com ele e explorar a sua conveniência. </li></ul>
    5. 5. Por que fazer protótipos? <ul><li>Protótipos são dispositivos que facilitam a comunicação entre os membros das equipes; </li></ul><ul><li>Servem para testar a viabilidade técnica de uma idéia ou verificar se um certo rumo que se tomou no design é compatível com o resto do desenvolvimento do sistema. </li></ul>
    6. 6. Prototipação de baixa-fidelidade <ul><li>Não se assemelha muito ao produto final; </li></ul><ul><li>Feitos de materiais como papel e cartolina; </li></ul><ul><li>Simples, baratos e de rápida produção; </li></ul><ul><li>Rapidamente modificáveis, oferecendo idéias alternativas; </li></ul><ul><li>Quase sempre se baseia na realização de esboços (sketchs). </li></ul>
    7. 7. Prototipação de alta-fidelidade <ul><li>Utiliza materiais que se espera que estejam no produto final; </li></ul><ul><li>Realiza um protótipo que se parece muito com algo acabado; </li></ul><ul><li>É útil para vender idéias a pessoas e para testar questões técnicas. </li></ul>
    8. 8. Concessões na prototipação <ul><li>Os protótipos devem ter concessões (principalmente os de baixa-fidelidade). </li></ul><ul><li>Testar um aspecto específico do produto. </li></ul><ul><li>Os tipos de concessão na prototipação são: </li></ul><ul><li>- Horizontal, que fornece uma ampla gama de funções, mas com poucos detalhes </li></ul><ul><li>- Vertical, que fornece bastante detalhes para poucas funções. </li></ul>
    9. 9. Construção: do design à implementação <ul><li>Todos os pontos do design levantados nos protótipos devem ser inseridos no produto final. </li></ul><ul><li>Avaliar para se ter certeza que todos os requisitos foram atendidos. </li></ul>
    10. 10. Design conceitual: dos requisitos ao primeiro design <ul><li>Preocupa-se com transformar os requisitos e as necessidades do usuário em um modelo conceitual. </li></ul><ul><li>É uma descrição do sistema proposto que seria compreensível pelos usuários da maneira pretendida. </li></ul>
    11. 11. Princípios-chave norteadores do design conceitual <ul><li>Manter a mente aberta, mas nunca esquecer os usuários em seu contexto; </li></ul><ul><li>Discutir idéias com outros stakeholders o máximo possível; </li></ul><ul><li>Utilizar prototipação de baixa-fidelidade para obter rápido feedback; </li></ul><ul><li>Iterar. “Para ter uma boa idéia, tenha muitas idéias” (Retting, 1994). </li></ul>
    12. 12. Três perspectivas para o desenvolvimento de um modelo conceitual <ul><li>Nesta parte discutiremos três formas de pensar sobre o modelo conceitual: </li></ul><ul><li>Que modo de interação? </li></ul><ul><li>Existe uma metáfora de interface adequada? </li></ul><ul><li>Que paradigma de interação usar? </li></ul>
    13. 13. Modo de Interação <ul><li>Modo de interação refere-se a como o usuário invoca ações quando interage com o aparelho. </li></ul>Aibo, o cão interativo Ananova, a apresentadora virtual
    14. 14. Metáforas de interface <ul><li>Constituem uma outra forma de pensar sobre os modelos conceituais. </li></ul><ul><li>São destinadas a combinar conhecimento familiar em conhecimento novo, de uma maneira que ajude o usuário a entender o sistema. </li></ul>
    15. 15. Paradigmas de interação <ul><li>São filosofias de design que ajudam a pensar sobre o produto que está sendo desenvolvido. </li></ul>
    16. 16. Protótipos no design conceitual <ul><li>O objetivo de se fazer protótipos é permitir alguma avaliação das idéias que vão surgindo. </li></ul><ul><li>A prototipação é utilizada para se ter feedback dos designs emergentes. </li></ul>
    17. 17. Design físico: tornando-o concreto <ul><li>O design físico envolve considerar questões mais concretas e detalhadas acerca do projeto de uma interface, como design de tela, quais ícones utilizar, como estruturar menus etc. </li></ul>
    18. 18. Recomendações (guidelines) para o design físico <ul><li>Esforce-se pela consistência : Previna a perda de dados; </li></ul><ul><li>Possibilite que usuários frequentes utilizem atalhos : opções para usuários avançados (teclas de atalho); </li></ul><ul><li>Ofereça feedback informativo : informe o que está acontecendo de forma clara para leigos; </li></ul><ul><li>Projete diálogos para encerrar as ações : “impressão finalizada”, “e-mail enviado”; </li></ul>
    19. 19. Recomendações (guidelines) para o design físico <ul><li>Ofereça prevenção contra erros e manuseio fácil dos mesmos : a interface deve ajudar a evitar erros e a consertá-los. </li></ul><ul><li>Permita uma revisão fácil das ações : tecla de “desfazer”. </li></ul><ul><li>Forneça suporte para um local interno de controle : os usuários se sentem mais confortáveis no controle da interação. </li></ul><ul><li>Reduza a carga de memória de curto prazo: oferecer opções em vez de exigir que o usuário lembre das informações. </li></ul>
    20. 20. Aspectos principais do design da interface <ul><li>Existem aspectos principais da interface que são aplicáveis a uma ampla variedade de produtos interativos: WIDGETS </li></ul>
    21. 21. “ Widgets” <ul><li>São elementos que fazem parte da interface, como: </li></ul><ul><li>- caixas de diálogo; </li></ul><ul><li>- menus; </li></ul><ul><li>- ícones; </li></ul><ul><li>- barras de ferramentas, etc. </li></ul>
    22. 22. Design do menu <ul><li>Os menus proporcionam escolhas que podem ser de comandos ou de opções relacionadas a um comando. </li></ul><ul><li>Eles fornecem os meios pelos quais o usuário pode realizar ações relacionadas à tarefas em questão. </li></ul>
    23. 23. Design de ícones <ul><li>Um bom ícone leva muito tempo para se fazer. </li></ul><ul><li>Ícones devem atender a diversos grupos de usuários. </li></ul><ul><li>Normalmente acontece que alguns ícones fazem sentido só a um grupo restrito de usuários. </li></ul><ul><li>Ícones são culturais . </li></ul>
    24. 24. Design da tela <ul><li>Traduzir a análise de tarefas nas telas. </li></ul><ul><li>Informações pertinentes devem estar disponíveis nos momentos relevantes. </li></ul>
    25. 25. Exibição de Informação <ul><li>As informações relevantes devem sempre estar disponíveis. </li></ul><ul><li>É importante o formato em que elas serão exibidas. </li></ul><ul><li>Diferentes tipos de informação requerem diferentes tipos de exibição. </li></ul>
    26. 26. Conclusão <ul><li>Existem diversos aspectos do design de interfaces que devem ser levados em consideração </li></ul><ul><li>O designer deve estar preparado para mudanças bruscas em seu ambiente de trabalho, atento a novas tecnologias que podem auxiliar em sua função e ser politizado para ser capaz de “se dar bem” no momento da sugestão do design. </li></ul>
    27. 27. Referências: <ul><li>PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de Interação : Além da Interação Homem – Computador. Rio de Janeiro: Bookman, 2005. p. 259-297. </li></ul><ul><li>Shneiderman, Ben --  Designing the user interface : strategies for effective human-computer interaction.   </li></ul>

    ×