1) O documento discute a evolução histórica das interfaces homem-computador desde os primórdios dos computadores até as interfaces gráficas modernas. 2) Também aborda princípios importantes de usabilidade e design de interfaces, como heurísticas de Nielsen e uso de cores. 3) Por fim, discute conceitos como arquitetura da informação e navegação em sites para melhorar a experiência do usuário.

1. Onde levar o
usuário onde
queremos?
PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM)
TWITTER: @OZIELNETO

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. Durante a Segunda
Guerra Mundial, o alemão
Konrad Duse construiu a
primeira calculadora
universal binária controlada
por um programa, o Z3.
Em parceria entre
americanos e ingleses é
desenvolvido o EDVAC, o
primeiro computador nos
moldes atuais. (rompendo o
paradigma do cérebro e
adotando o das máquinas).

5. Histórico da evolução nas interfaces
O código por trás dos chips e sistemas.
A Guerra na evolução e os saltos evolutivos do
computador.

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

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

8. A revolucionária apresentação de Doug
Engelbart no San Francisco Civic Auditorium.
- O rastreamento por bitmap dá origem ao mouse.
- O Creative Computing no ano de 1980, afirmou que “ícones e
mouse não vão fazer ninguém deixar de ser analfabeto
(relacionando aos anteriores códigos de programação).
- Apontar para figuras não leva
muito longe.

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

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

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

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

13. 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 (índice de rejeição).
A Interface na “prática”.

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

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

16. - Preenchimento de Formulário- Usado
para entrada de informação no sistema.
- WIMP- Windows, icons, menus and
pointers, isso é, PC padrão.
- 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.

17. 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 e sexo.
- 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.

18. O que os projetistas criam!

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

20. Projetado vs. Realidade!

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

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

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

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

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

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

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

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

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

30. As cores dentro de um projeto interativo.
“Sempre que alguma coisa é projetada e
feita, esboçada e pintada, desenhada,
rabiscada, construída, esculpida ou gesticulada,
a substância visual da obra é composta a partir
de uma lista básica de elementos. Os elementos
visuais constituem a substância básica daquilo
que vemos, e seu número é reduzido: o ponto, a
linha, a forma, a direção, o tom, a cor, a textura,
a dimensão, a escala e o movimento. ” Donis A.
Dondis.

31. Gestalt
Muito do que conhecemos sobre o efeito de
percepção humana sobre o significado visual
tem origem nos experimentos da psicologia da
Gestalt. Segundo sua teoria, a abordagem da
compreensão e da análise de todos os sistemas,
exigem que reconheça o sistema como um
todo é formado por partes interatuantes, que
podem ser isoladas e analisadas independentes,
e depois reunidas, formando um conceito
amplo, sendo a mudança de um elemento
causadora da mudança de toda o sistema.

32. As cores podem ser divididas em 3 dimensões:
Matiz (ou croma)- É a cor em si, está
dividida em Vermelho, Verde e Azul.
Saturação- É a pureza relativa de
uma cor até o cinza. Quanto mais saturado
mais carregado de expressão e emoção.
Acromática- É o brilho relativo de
claro escuro.
A força da Cor
A cor como elemento da
comunicação visual, é carregada de
informação, e é um dos mais
penetrantes elementos das experiências
visuais, com conceitos e sensações
muito comuns a todos

33. Qual a relação do seu usuário com a cor
na web?

35. Dicas do uso das cores na Web.
Gerais
- Evite azul e vermelho juntos (diferente
profundidade e foco).
- Use 3 a 7 cores no máximo em um site
(com exceção de fotografia)
- Magenta e rosa devem ser usadas com
cautela, assim como cores de muita
luminosidade.
- Prefira fundos monocromáticos.
- Use a cor para agrupar elementos
(menus dividindo sub-seções com cores).
-O uso de fundos claros com caracteres
escuros (contraste positivo) são melhores que
o inverso.

36. Amarelo
- É ótimo para indicar janelas
ativas.
- Deve ser evitada para
textos, a não ser com fundo
escuro e frio.

37. Vermelho
- Boa alternativa para sinalizar
perigo ou chamar atenção do
usuário
- Evitar seu uso em fundos
amplos.

38. Verde
- Ótimo pra memorização.
- É a cor que a retina encontra seu
ponto mais alto de sensibilidade, sendo
o mais indicado quando se deseja
transmitir rapidamente uma
informação.

39. Azul
- Seus comprimentos de onda são menos sensível aos
olhos, logo é uma cor de difícil focalização, não devendo ser
utilizada para pequenos detalhes.

40. Onde entra a Arquitetura da
informação?
Analisando a forma como
nos relacionamos com os
sistemas interativos a nossa
volta (celulares, celular,
entre outros), será que esses
nos proporcionam
realmente uma experiência
agradável? conseguimos
atingir nossos objetos com a
facilidade que desejamos?

41. O termo navegação sempre esteve muito ligado a transportes
marinhos, porém a amplitude do seu sentido vai além, e envolve o
movimento através do espaço e também virtual, pelos espaços
cognitivos. Na web a navegação é dividida segundo Rosenfeld e
Morville em: sistema de navegação global, local e contextual.
Meados de 70 o arquiteto Wurman cria a expressão “arquitetura da
informação”. O arquiteto da informação é o indivíduo com a
missão de organizar padrões dos dados e de transformar o que é
complexo e confuso em algo mais claro. Ela integra o campo da
ergonomia e trabalha com os processos cognitivos, os quais dizem
respeito a como as pessoas apreendem a informação e constroem
o conhecimento. Porém, apesar da sua relevância, infelizmente é
pouco conhecida no meio acadêmico.

42. “Arquitetura da informação são as
estruturas de metal que sustenta um
outdoor”.

43. A pesquisa modelo da arquitetura da
informação é composta por 3Cs: Contexto,
conteúdo e comportamento (é como o
brienfing pela publicidade).
Uma forma barata e eficiente de obter dados
importantes para a construção da Arquitetura
de um site são os QUIS (Questionnaire of User
Interface Satisfaction). Para isso é preciso
anteriormente identificar seu público, sendo ele
dividido em: novato, intermediário ou
freqüente? Saiba como ele navega, e o que
busca (uso de menus, pesquisa, etc).

44. - Direito de ser superior a tecnologia.
- O direito ao empowerment (controle e
entendimento da máquina e dos seus
resultados).
- Direito a simplicidade (encontrar caminhos
nos sistemas sem esforço demasiado).
- Direito do seu tempo respeitado
(carregamento e feedback, seja de resposta
do site, ou atendimento por email.

45. A usabilidade da web tem respaldo nas mídias mais
antigas (ganhando sempre convenções próprias). E assim
como outras mídias está ligada a experiência do usuário, e a
melhor forma de fazer um eficiente sistema é através de
testes com os perfis de usuários que usarão os mesmos,
analisando tecnicamente os resultados obtidos. Esses testes
são os famosos testes de usabilidade.
O número de usuários com acesso a internet aumenta a
cada dia e com isso também os desafios, afinal os novos
internautas são iniciantes. Por isso é primordial conhecer esse
usuário, seu potencial e principalmente suas limitações para
construção de um projeto mais amigável.

46. Uma das partes mais importantes da arquitetura da
informação está ligada a usabilidade. A qual possui crenças
em certos tipos de direitos alienáveis do homem:

47. - O paradigma da acessibilidade (usuários
com deficiência são mais parecidos com os
médios do que possa parecer).
- Os testes de usabilidade não podem ser
realizados com os desenvolvedores, mas sim
com um “usuário real”.
- O teste de usabilidade tem seu diferencial
na observação ou gravação do
comportamento do usuário.
- A ética dos testes pede que fique claro pros
usuários que quem está sendo testado é o
software, não a pessoa.
- Para Jakob Nielsen 5 pessoas são suficientes
identificar 75% dos problemas críticos.

48. - Não deve ser no final do processo, mas sim
intercalado.
- Teste e conheça o usuário, eles não são
todos iguais, muito menos iguais ao
desenvolvedor.
- Tipos de conhecimento do usuário a serem
considerados: Nível educacional, alfabetização
tecnológica, experiência no aplicativo (ou
web).
- Desenhar interfaces é um processo político.
É preciso reuniões e integração entre a equipe e
os superiores da empresa. Usabilidade =
inovação, por isso empresas jurássicas poderão
repudiar.

49. Já conhecemos os requisitos de uma
boa interface e como fazer um teste
de usabilidade, vamos um caso?

50. E o Flash nessa história?
A linguagem HTML foi criada
por cientistas que nunca
imaginaram como ferramenta
de visual. Com a necessidade
crescente de sistemas mais
“visuais” surgiram novas
alternativas de linguagem para
web.
Sites que exigem longo
download é eficiente quando o
usuário tem um interesse prévio
grande naquele conteúdo
(Filmes, games, grandes
empresas, etc).

51. “Flash serve para atender a uma
necessidade muito específica, usar animações,
vídeo, som e interatividade para envolver o
usuário, ou outros recursos avançados da
plataforma que não estão disponíveis em HTML
ou em outras tecnologias. Quando essas
necessidades não existem no projeto, utilizar
qualquer recurso em Flash vai atrapalhar mais
do que ajudar”. Zeh Fernando, desenvolvedor
Flash na Firstborn Multimedia.

52. O Flash é inimigo da usabilidade ?
Facilitar ou surpreender ?

53. HTML e Server Side Applications Flash
Recursos técnicos próprios. Instalação de plugin.
Carregamento quase instantâneo. Tempo de carregamento maior.
Facilidades na indexação por parte dos
mecanismos de busca.
Dificuldade e limitações de SEO
Melhor para uso em portais e blogs. Pouco indicado para grande conteúdo.
Uso de gifs e animações limitadas. Efeitos animados sofisticados.
Recursos interativos com efeitos limitados. Infinidade de efeitos interativas.
Maior familiaridade do usuário intermediário.
(maior acessibilidade)
Projetos menos intuitivos. (menor
acessibilidade, para alguns teóricos).
Excelente quando o interesse é “informar”
através de conteúdo de texto e imagem.
Ótimo quando o interesse é “criar uma
nova experiência”.
Trabalha com conteúdos fixos e interações
mais limitadas no que se refere a efeitos.
Permite simulações verossímeis e
infográficos diferenciados.

54. Erros ensinam mais que acertos, que tal analisar
o que leva a frustração do usuário?
Grande parte das experiências frustrantes no
processo de comunicação Homem-computador
estão ligadas a estética das interfaces gráficas e
aos sistemas de interação:

55. Ilusões - Ocorrendo em casos em que se clica
em um link de um website e esse exibe uma
mensagem de site em construção, ou links
quebrados que não direcionam o usuário a
página nenhuma.
Mensagem de erro - Com longa história na
história da interface, são notórias por serem
incompreensíveis, geralmente lidando com
notas técnicas em seu informativo.
Sobrecarga ao usuário – Como exemplo, tem-se
os procedimentos de atualização de softwares e
instalação de plug-in, muitas vezes indesejados,
tomando muito tempo e exigindo a atenção em
etapas e operações algumas vezes complexas.

56. Aparência – estritamente ligada ao aspecto
estético da interface gráfica, esse se caracteriza
principalmente por websites sobrecarregados
de textos e imagens, animações excessivas, uso
copioso de efeitos sonoros, uso excessivo de
operações em menus e bancos de dados,
agentes de ajuda infantis em momentos
inadequados e botões e estrutura de layout mal
projetada, dificultando que os usuários cliquem
nos menus corretos.

57. Dois projetos que fazem parte da história das
interfaces, principalmente por fracassarem,
foram o Bob e o Magic Cap.

58. O espaço físico limitado é uma realidade do
mundo físico que pode ser facilmente superada
pelos meios digitais, entretanto o design de
interação dos sistemas do Bob e do Magic Cap
descartaram esses potenciais, criando o que
Johnson (2001) caracteriza como “histeria de
simulação total”, lembrando que “já temos salas
de estar e corredores para andar por eles; não
precisamos que dupliquem também pelos
nossos monitores.

59. Tendências

60. Templates X Web Designer

61. Integração com
Redes Sociais

62. A Era do
mobile.

63. Landing pages
www.fastshop.com.br/iPhone6

64. UX – User eXperience
http://en.wikipedia.org/wiki/User_experience_design

65. Cases de aplicação de interfaces
projetos interativos de sucesso:

66. www.bymk.com.br

67. www.camiseteria.com.br

68. www.milcasmurro.com.br

69. Quais seriam os próximos passos?

70. Tablets... E mais o que?

71. “(...) as redes de comunicação e as aplicações
interativas multimídia estão proporcionando os
fundamentos para uma transformação das ordens
socioeconômicas existentes, tendo em vista uma
sociedade da informação. Esta é concebida como
o resultado de uma mudança de paradigma nas
estruturas industriais e relações sociais, semelhante
à revolução industrial, que no seu momento
transformou as sociedades agrárias. (OECD apud
TEDESCO, 2004, p.22)”

72. Onde levar o
usuário onde
queremos?
PROF. OZIEL NETO (OZIEL.NETO@GMAIL.COM)
TWITTER: @OZIELNETO