Interface web

2. “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.”

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

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

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

6. 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).

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

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

9. 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).

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

11. 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”.

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

13. 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:

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

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

16. O que os projetistas criam!

17. O que os usuários vêem!

18. Por que projetados e a realidade!

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

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

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

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

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

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

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

26. 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”.

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