28

Interface web

Embed Size (px)

Citation preview

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

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.

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.

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.

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

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

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

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

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.

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

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.

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:

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

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.

O que os projetistas criam!

O que os usuários vêem!

Por que projetados e a realidade!

As 10 Heurísticas de Jakob Nielsen

1) FeedbackO 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árioA 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.

3) Saídas claramente demarcadasO 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ênciaUm 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.

5) Prevenir errosEvitar 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.

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

9) Boas mensagens de erroLinguagem 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.

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.

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.

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

Abstrato MetáforaPermite 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.