Interface web

295 visualizações

Publicada em

Interface web

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Interface web

  1. 1. “Pequenos atos como atender o celular, realizar um saque em um caixa-eletrônico ou jogar videogame tem mostrado que o homem mudou sua forma de se relacionar com o mundo a sua volta e se comunicar.”
  2. 2. Histórico da evolução nas interfaces Em seu sentido mais simples, a palavra se refere a softwares que dão forma à interação entre usuários e computador. A interface atua como uma espécie de tradutor, mediando entre as duas partes, tornando uma sensível para a outra.
  3. 3. Histórico da evolução nas interfaces O código Binário (a lógica por trás dos chips e sistemas). A Guerra na evolução e os saltos evolutivos do computador.
  4. 4. A revolução tecnológica de Silicon Valley As sucatas se tornam computadores para fins pacíficos. Limitações pelas complexas programações e circuitos elétricos fizeram necessária a criação de interfaces para facilitar o acesso de usuários inexperientes, porém ainda era inacessível ao público casual.
  5. 5. ALTAIR, o primeiro computador comercial (1975): Surgem os recursos interativos de som, gráficos e textos. Xerox PARC e a primeira tentativa de um computador amigável, o Xerox Star. (O fracasso da primeira metáfora de interface).
  6. 6. O mercado e a rápida evolução dos computadores: - A IBM entra no mercado em 1981 através do Personal Computer (com funções apenas de produção de textos e manutenção de pequenos bancos de dados). - Surgimento da Apple computer e a metáfora do DESKTOP (usando o Xerox Star como trampolim).
  7. 7. - Surge a Microsoft com o desenvolvimento também de uma interface gráfica, o Windows. - A metáfora da interface confirma sua superioridade sob as escrivaninhas virtuais, porém os simuladores de vôos e games (que se inspirava na virtualidade da escrivaninha) se desenvolviam de forma paralela, oferecendo um tipo diferente de interatividade.
  8. 8. A partir disso ocorreram diversas implementações na forma de desenvolver uma interface, porém na sua essência o modelo DESKTOP estava consolidado como mais eficiente na interação Homem-Computador. Dentro desse contexto surgiram as técnicas e estudos para aperfeiçoamento de cada projeto interativo, dentre os quais um dos mais importante, os testes de usabilidade ( estudo de compatibilidade entre tecnologia e seu usuário).
  9. 9. USABILIDADE + INTERFACE, estão interligados! “O estilo de uma interface, no que diz respeito a formas, fontes, cores e elementos gráficos que são utilizados e a maneira como são combinados, tem influência em se determinar quão agradável é interagir com eles. Quanto mais eficaz for o uso das imagens em uma interface, mais envolvente e agradável ela será”. A interface e a usabilidade podem ser os heróis contra a sobrecarga de informações.
  10. 10. Durante a primeira onda (pré-bolha) o design insatisfatório de interface acarretou uma série de custos para companhias online. Os principais eram: - Perda de aproximadamente 50% das vendas, porque os clientes não conseguiam encontrar os produtos e informações. - O resultado negativo da primeira visita ao site gerava perda de 40% em média dos clientes em uma segunda visita. A Interface na “prática”.
  11. 11. A web era questionada como modelo de negócios no início do milênio, hoje o MC Donalds investe mais em Web que TV.
  12. 12. Existem diversos tipos de interação HOMEM- COMPUTADOR, desde o objetivo contato com a máquina de bilhete do metrô, até as mais profundas experiências de imersão em ambientes virtuais e sistemas de aprendizagem via internet. Os tipos de interação dividem- se em:
  13. 13. - Linguagem Natural- Interação com o sistema utilizando- se da sua própria linguagem. - Linguagem de Comando- Comunicação com o sistema através de comandos específicos (teclas simples). - Menus- Conjunto de opções apresentado na tela forma hierarquicamente. - Preenchimento de Formulário- Usado para entrada de informação no sistema. - Manipulação Direta- Permite ao usuário agir diretamente sobre os elementos representados na tela, sem comandos (metáforas, games, etc) - Agentes- Identificam necessidades do usuário e realizam tarefas em segundo plano, de maneira colaborativa.
  14. 14. O que o usuário vê na tela e como seu olhar “caminha” por ela. - A hierarquia visual é uma guia. - Força das palavras, grátis, venda. - Carrinhos de compras, lixeiras e outros tipos de affordances auxiliam, mas também limitam, os usuários já estão acostumado e dependo do caso pode não focar em elementos desgastados.
  15. 15. O que os projetistas criam!
  16. 16. O que os usuários vêem!
  17. 17. Por que projetados e a realidade!
  18. 18. As 10 Heurísticas de Jakob Nielsen 1) Feedback O sistema deve informar continuamente ao usuário sobre o que ele está fazendo. 10 segundos é o limite para manter a atenção do usuário focalizada no diálogo. 2) Falar a linguagem do usuário A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário.
  19. 19. 3) Saídas claramente demarcadas O usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior. 4) Consistência Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.
  20. 20. 5) Prevenir erros Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram. 6) Minimizar a sobrecarga de memória do usuário O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico.
  21. 21. 7) Atalhos Para usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto. Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal. 8) Diálogos simples e naturais Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas.
  22. 22. 9) Boas mensagens de erro Linguagem clara e sem códigos. Devem ajudar o usuário a entender e resolver o problema. Não devem culpar ou intimidar o usuário. 10) Ajuda e documentação O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessária a ajuda deve estar facilmente acessível on-line.
  23. 23. A escolha da Interface ideal: Metáfora ou abstração? As representações físicas, conhecidas na área da multimídia como “metáforas de interface” são “modelos conceituais desenvolvidos para ser semelhante de alguma forma, a aspectos de uma entidade física (ou entidades), mas. que também tem seu próprio comportamento e suas propriedades.
  24. 24. Uma discussão complexa. As metáforas contribuíram para a construção de uma mídia intuitiva, e de fácil acesso, não apenas aos programadores, mas também a todos aqueles que desejassem “se aventurar” nesse novo universo.
  25. 25. Metáforas são soluções velhas e limitadas. A verdadeira mágica dos computadores gráficos deriva do fato de eles não estarem amarrados ao velho mundo analógico dos objetos. Para que limitarmos a “andar” ao se deslocar de um local a outro se podemos simplesmente “voar”.
  26. 26. Abstrato Metáfora Permite o uso de simbologias que trabalhem melhor o sistema cognitivo do usuário, sem limitações “realistas”. Geralmente utiliza-se de affordances (ícones considerados por muitos desgastados para remeter a ideias). A pouca similaridade com o mundo real permite atividades não permitidas no mundo real, sem estranheza do usuário. Preso a conceitos do mundo físico, limitando a navegação em alguns aspectos.. Permite uso de atalhos e ferramentas que otimizam a navegação para os mais familiarizados com o sistema. Menor aceitação dos usuários avançados. Dificuldades de assimilação de alguns conceitos abstratos pelos iniciantes. Maior facilidade de uso por usuários inexperientes. Permite maior quantidade de texto e imagens sem um desconforto do usuário, através de uma diagramação mais fácil. Com o uso de textos e imagens pode ficar facilmente sobrecarregado.

×