usabilidade de interfaces - parte 1
TRANSCRIPT
“Pequenos atos como atender o celular, realizar um saque em um caixa-eletrônicoou 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.
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).
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.
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).
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.
O mercado e a rápida evolução dos computadores:
- A IBM entra no mercado em 1981 através do PersonalComputer (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 (índice de rejeição).
A Interface na “prática”.
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.
- WIMP- Windows, icons, menus andpointers, 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.
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.
O que os projetistas criam!
O que os usuários vêem!
Projetado vs. 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árioO 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çãoO 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.
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.
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.
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
Qual a relação do seu usuário com a cor na web?
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.
Amarelo
- É ótimo para indicar janelas ativas.
- Deve ser evitada para textos, a não ser com fundo escuro e frio.
Vermelho
- Boa alternativa para sinalizar perigo ou chamar atenção do usuário
- Evitar seu uso em fundos amplos.
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.
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.
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?
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.
“Arquitetura da informação são as estruturas de metal que sustenta um outdoor”.
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 UserInterface 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).
- 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.
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.
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:
- 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.
- 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.
Já conhecemos os requisitos de uma boa interface e como fazer um teste de usabilidade, vamos um caso?
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).
“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.
O Flash é inimigo da usabilidade ? Facilitar ou surpreender ?
HTML e Server Side Applications FlashRecursos 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.
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:
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 linksquebrados 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.
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.
Dois projetos que fazem parte da história das interfaces, principalmente por fracassarem, foram o Bob e o Magic Cap.
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 Capdescartaram 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.
Tendências
Templates X Web Designer
Integração comRedes Sociais
A Era do mobile.
Landing pageswww.fastshop.com.br/iPhone6
UX – User eXperience
http://en.wikipedia.org/wiki/User_experience_design
Cases de aplicação de interfaces projetos interativos de sucesso:
www.bymk.com.br
www.camiseteria.com.br
www.milcasmurro.com.br
Quais seriam os próximos passos?
Tablets... E mais o que?
“(...) 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 apudTEDESCO, 2004, p.22)”
