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

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

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. (vídeo)

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.

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). (vídeo)

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). (vídeo)

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

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!

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.

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?

Vamos conhecer um pouco do sentido implícito em algumas cores?

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

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

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:

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.

Mas como são realizados os testes de usabilidade e o que podemos fazer para garantir a sua qualidade e eficiência? Que tal listar algumas dicas importantes para um bom teste de usabilidade? (vídeo)

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

-Boas empresas na web e em seus sistemas não reproduzem sua burocracia aos clientes. Eles o simplificam para facilitar a interação homem-computador. Bons exemplos disso são os caixas eletrônicos de bancos, variados entre as empresas, alguns são mais intuitivos que os outros.

-A internet precisa funcionar “para todos”, pois ela é uma importante ferramenta que auxilia na transparência governamental (Human-centered design).

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

O Formstack é um construtor de formulário em HTML com integração a websites.

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

Palestra “A vocação do Flash: RIA, Hotsites e Infográficos”, o pesquisador em design de interação Frederick van Amstel ressaltava que ele serve principalmente “para trazer maior usabilidade para aplicações, mais emoção para a publicidade e ensinar conceitos complexos através da hipermídia. Isso é o que ele faz de melhor e sem concorrência. Usá-lo para substituir HTML e criar introduções animadas é desperdício e equívoco.”

“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 ? (site)

HTML e PHP 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 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.

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

Tendências

Templates X Web Designer

Integração com Redes Sociais

A Era do mobile.

Cases de aplicação de interfaces e 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 apud TEDESCO, 2004, p.22)”

Marcelo PrudenteEmail:mahcelo28@hotmail.com

Twitter:@mahtchelo

Portfolio:www.monopixel.com.br