Pequenos atos como atender o celular, realizar um saque em um caixa-eletrnico ou jogar videogame tem mostrado que o homem mudou

sua forma de se relacionar com o mundo a sua volta e se comunicar.

Histrico da evoluo nas interfaces

Em seu sentido mais simples, a palavra se refere a softwares que do forma interao entre usurios e computador. A interface atua como uma espcie de tradutor, mediando entre as duas partes, tornando uma sensvel para a outra.

Histrico da evoluo nas interfaces

O cdigo Binrio (a lgica por trs dos chips e sistemas). A Guerra na evoluo e os saltos evolutivos do computador.

Durante a Segunda Guerra Mundial, o alemo Konrad Duse construiu a primeira calculadora universal binria 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 crebro e adotando o das mquinas).

A revoluo tecnolgica de Silicon Valley

As sucatas se tornam computadores para fins pacficos. Limitaes pelas complexas programaes e circuitos eltricos fizeram necessria a criao de interfaces para facilitar o acesso de usurios inexperientes, porm ainda era inacessvel ao pblico casual. (vdeo)

A revolucionria apresentao 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 no vo fazer ningum deixar de ser analfabeto (relacionando aos anteriores cdigos de programao). Apontar para figuras no leva muito longe.

ALTAIR, o primeiro computador comercial (1975): Surgem os recursos interativos de som, grficos e textos. Xerox PARC e a primeira tentativa de um computador amigvel, o Xerox Star. (O fracasso da primeira metfora de interface). (vdeo)

O mercado e a rpida evoluo dos computadores: - Surgimento da Apple computer e a metfora do DESKTOP (usando o Xerox Star como trampolim). - A IBM entra no mercado em 1981 atravs do Personal Computer (com funes apenas de produo de textos e manuteno de pequenos bancos de dados).

- Surge a Microsoft com o desenvolvimento tambm de uma interface grfica, o Windows. - A metfora da interface confirma sua superioridade sob as escrivaninhas virtuais, porm os simuladores de vos 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 implementaes na forma de desenvolver uma interface, porm na sua essncia o modelo DESKTOP estava consolidado como mais eficiente na interao Homem-Computador. Dentro desse contexto surgiram as tcnicas e estudos para aperfeioamento de cada projeto interativo, dentre os quais um dos mais importante, os testes de usabilidade ( estudo de compatibilidade entre tecnologia e seu usurio). (vdeo)

USABILIDADE + INTERFACE, esto interligados! O estilo de uma interface, no que diz respeito a formas, fontes, cores e elementos grficos que so utilizados e a maneira como so combinados, tem influncia em se determinar quo agradvel interagir com eles. Quanto mais eficaz for o uso das imagens em uma interface, mais envolvente e agradvel ela ser. A interface e a usabilidade podem ser os heris contra a sobrecarga de informaes.

A Interface na prtica.
Durante a primeira onda (pr-bolha) o design insatisfatrio de interface acarretou uma srie de custos para companhias online. Os principais eram: - Perda de aproximadamente 50% das vendas, porque os clientes no conseguiam encontrar os produtos e informaes. - O resultado negativo da primeira visita ao site gerava perda de 40% em mdia dos clientes em uma segunda visita.

A web era questionada como modelo de negcios no incio do milnio, hoje o MC Donalds investe mais em Web que TV.

Existem diversos tipos de interao HOMEMCOMPUTADOR, desde o objetivo contato com a mquina de bilhete do metr, at as mais profundas experincias de imerso em ambientes virtuais e sistemas de aprendizagem via internet. Os tipos de interao dividemse em:

- Linguagem Natural- Interao com o sistema utilizandose da sua prpria linguagem. - Linguagem de Comando- Comunicao com o sistema atravs de comandos especficos (teclas simples). - Menus- Conjunto de opes apresentado na tela forma hierarquicamente. - Preenchimento de Formulrio- Usado para entrada de informao no sistema. - WIMP- Windows, icons, menus and pointers, isso , PC padro. - Manipulao Direta- Permite ao usurio agir diretamente sobre os elementos representados na tela, sem comandos (metforas, games, etc) - Agentes- Identificam necessidades do usurio e realizam tarefas em segundo plano, de maneira colaborativa.

O que o usurio v na tela e como seu olhar caminha por ela.

- A hierarquia visual uma guia. - Fora das palavras, grtis, venda e sexo. - Carrinhos de compras, lixeiras e outros tipos de affordances auxiliam, mas tambm limitam, os usurios j esto acostumado e dependo do caso pode no focar em elementos desgastados.

O que os projetistas criam!

O que os usurios vem!

Por que projetados e a realidade!

As 10 Heursticas de Jakob Nielsen

1) Feedback O sistema deve informar continuamente ao usurio sobre o que ele est fazendo. 10 segundos o limite para manter a ateno do usurio focalizada no dilogo.
2) Falar a linguagem do usurio A terminologia deve ser baseada na linguagem do usurio e no orientada ao sistema. As informaes devem ser organizadas conforme o modelo mental do usurio.

3) Sadas claramente demarcadas O usurio controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operao e retornar ao estado anterior.
4) Consistncia Um mesmo comando ou ao deve ter sempre o mesmo efeito. A mesma operao deve ser apresentada na mesma localizao e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.

5) Prevenir erros Evitar situaes de erro. Conhecer as situaes que mais provocam erros e modificar a interface para que estes erros no ocorram. 6) Minimizar a sobrecarga de memria do usurio O sistema deve mostrar os elementos de dilogo e permitir que o usurio faa suas escolhas, sem a necessidade de lembrar um comando especfico.

7) Atalhos Para usurios experientes executarem as operaes mais rapidamente. Abreviaes, teclas de funo, duplo clique no mouse, funo de volta em sistemas hipertexto. Atalhos tambm servem para recuperar informaes que esto numa profundidade na rvore navegacional a partir da interface principal. 8) Dilogos simples e naturais Deve-se apresentar exatamente a informao que o usurio precisa no momento, nem mais nem menos. A seqncia da interao e o acesso aos objetos e operaes devem ser compatveis com o modo pelo qual o usurio realiza suas tarefas.

9) Boas mensagens de erro Linguagem clara e sem cdigos. Devem ajudar o usurio a entender e resolver o problema. No devem culpar ou intimidar o usurio. 10) Ajuda e documentao O ideal que um software seja to fcil de usar (intuitivo) que no necessite de ajuda ou documentao. Se for necessria a ajuda deve estar facilmente acessvel on-line.

A escolha da Interface ideal: Metfora ou abstrao? As representaes fsicas, conhecidas na rea da multimdia como metforas de interface so modelos conceituais desenvolvidos para ser semelhante de alguma forma, a aspectos de uma entidade fsica (ou entidades), mas. que tambm tem seu prprio comportamento e suas propriedades.

Uma discusso complexa.

As metforas contriburam para a construo de uma mdia intuitiva, e de fcil acesso, no apenas aos programadores, mas tambm a todos aqueles que desejassem se aventurar nesse novo universo.

Metforas so solues velhas e limitadas. A verdadeira mgica dos computadores grficos deriva do fato de eles no estarem amarrados ao velho mundo analgico dos objetos. Para que limitarmos a andar ao se deslocar de um local a outro se podemos simplesmente voar.

Abstrato
Permite o uso de simbologias que
trabalhem melhor o sistema cognitivo do usurio, sem limitaes realistas. A pouca similaridade com o mundo real permite atividades no permitidas no mundo real, sem estranheza do usurio. Permite uso de atalhos e ferramentas que

Metfora
Geralmente utiliza-se de affordances
(cones considerados por muitos desgastados para remeter a ideias). Preso a conceitos do mundo fsico, limitando a navegao em alguns aspectos.. Menor aceitao dos usurios avanados.

otimizam a navegao para os mais

familiarizados com o sistema. Dificuldades de assimilao de alguns conceitos abstratos pelos iniciantes. Maior facilidade de uso por usurios inexperientes.

Permite maior quantidade de texto e

imagens sem um desconforto do usurio, atravs de uma diagramao mais fcil.

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, esboada e pintada, desenhada, rabiscada, construda, esculpida ou gesticulada, a substncia visual da obra composta a partir de uma lista bsica de elementos. Os elementos visuais constituem a substncia bsica daquilo que vemos, e seu nmero reduzido: o ponto, a linha, a forma, a direo, o tom, a cor, a textura, a dimenso, a escala e o movimento. Donis A. Dondis.

Gestalt
Muito do que conhecemos sobre o efeito de percepo humana sobre o significado visual tem origem nos experimentos da psicologia da Gestalt. Segundo sua teoria, a abordagem da compreenso e da anlise de todos os sistemas, exigem que reconhea 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 mudana de um elemento causadora da mudana de toda o sistema.

A fora da Cor A cor como elemento da comunicao visual, carregada de informao, e um dos mais penetrantes elementos das experincias visuais, com conceitos e sensaes muito comuns a todos As cores podem ser divididas em 3 dimenses: Matiz (ou croma)- a cor em si, est dividida em Vermelho, Verde e Azul. Saturao- a pureza relativa de uma cor at o cinza. Quanto mais saturado mais carregado de expresso e emoo. Acromtica- o brilho relativo de claro escuro.

Qual a relao do seu usurio com a cor na web?

Vamos conhecer um pouco do sentido implcito 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 mximo em um site (com exceo de fotografia) - Magenta e rosa devem ser usadas com cautela, assim como cores de muita luminosidade. - Prefira fundos monocromticos. - Use a cor para agrupar elementos (menus dividindo sub-sees com cores). -O uso de fundos claros com caracteres escuros (contraste positivo) so melhores que o inverso.

Amarelo - timo para indicar janelas ativas.

- Deve ser evitada para textos, a no ser com fundo escuro e frio.

Vermelho
- Boa alternativa para sinalizar perigo ou chamar ateno do usurio - Evitar seu uso em fundos amplos.

Verde
- timo pra memorizao. - a cor que a retina encontra seu ponto mais alto de sensibilidade, sendo o mais indicado quando se deseja transmitir rapidamente uma informao.

Azul
- Seus comprimentos de onda so menos sensvel aos olhos, logo uma cor de difcil focalizao, no devendo ser utilizada para pequenos detalhes.

Onde entra a Arquitetura da informao? Analisando a forma como nos relacionamos com os sistemas interativos a nossa volta (celulares, celular, entre outros), ser que esses nos proporcionam realmente uma experincia agradvel? conseguimos atingir nossos objetos com a facilidade que desejamos?

O termo navegao sempre esteve muito ligado a transportes marinhos, porm a amplitude do seu sentido vai alm, e envolve o movimento atravs do espao e tambm virtual, pelos espaos cognitivos. Na web a navegao dividida segundo Rosenfeld e Morville em: sistema de navegao global, local e contextual.

Meados de 70 o arquiteto Wurman cria a expresso arquitetura da informao. O arquiteto da informao o indivduo com a misso de organizar padres 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 informao e constroem o conhecimento. Porm, apesar da sua relevncia, infelizmente pouco conhecida no meio acadmico.

Arquitetura da informao so as estruturas de metal que sustenta um outdoor.

A pesquisa modelo da arquitetura da informao composta por 3Cs: Contexto, contedo e comportamento ( como o brienfing pela publicidade). Uma forma barata e eficiente de obter dados importantes para a construo da Arquitetura de um site so os QUIS (Questionnaire of User Interface Satisfaction). Para isso preciso anteriormente identificar seu pblico, sendo ele dividido em: novato, intermedirio ou freqente? Saiba como ele navega, e o que busca (uso de menus, pesquisa, etc).

Uma das partes mais importantes da arquitetura da informao est ligada a usabilidade. A qual possui crenas em certos tipos de direitos alienveis do homem: - Direito de ser superior a tecnologia. - O direito ao empowerment (controle e entendimento da mquina e dos seus resultados). - Direito a simplicidade (encontrar caminhos nos sistemas sem esforo 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 mdias mais antigas (ganhando sempre convenes prprias). E assim como outras mdias est ligada a experincia do usurio, e a melhor forma de fazer um eficiente sistema atravs de testes com os perfis de usurios que usaro os mesmos, analisando tecnicamente os resultados obtidos. Esses testes so os famosos testes de usabilidade. O nmero de usurios com acesso a internet aumenta a cada dia e com isso tambm os desafios, afinal os novos internautas so iniciantes. Por isso primordial conhecer esse usurio, seu potencial e principalmente suas limitaes para construo de um projeto mais amigvel.

Mas como so realizados os testes de usabilidade e o que podemos fazer para garantir a sua qualidade e eficincia? Que tal listar algumas dicas importantes para um bom teste de usabilidade? (vdeo)

- O paradigma da acessibilidade (usurios com deficincia so mais parecidos com os mdios do que possa parecer). - Os testes de usabilidade no podem ser realizados com os desenvolvedores, mas sim com um usurio real. - O teste de usabilidade tem seu diferencial na observao ou gravao do comportamento do usurio. - A tica dos testes pede que fique claro pros usurios que quem est sendo testado o software, no a pessoa. - Para Jakob Nielsen 5 pessoas so suficientes identificar 75% dos problemas crticos.

- No deve ser no final do processo, mas sim intercalado. - Teste e conhea o usurio, eles no so todos iguais, muito menos iguais ao desenvolvedor. - Tipos de conhecimento do usurio a serem considerados: Nvel educacional, alfabetizao tecnolgica, experincia no aplicativo (ou web). - Desenhar interfaces um processo poltico. preciso reunies e integrao entre a equipe e os superiores da empresa. Usabilidade = inovao, por isso empresas jurssicas podero repudiar.

-Boas empresas na web e em seus sistemas no reproduzem sua burocracia aos clientes. Eles o simplificam para facilitar a interao homem-computador. Bons exemplos disso so os caixas eletrnicos de bancos, variados entre as empresas, alguns so mais intuitivos que os outros. -A internet precisa funcionar para todos, pois ela uma importante ferramenta que auxilia na transparncia 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 formulrio em HTML com integrao a websites.

E o Flash nessa histria? 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 usurio tem um interesse prvio grande naquele contedo (Filmes, games, grandes empresas, etc).

Palestra A vocao do Flash: RIA, Hotsites e Infogrficos, o pesquisador em design de interao Frederick van Amstel ressaltava que ele serve principalmente para trazer maior usabilidade para aplicaes, mais emoo para a publicidade e ensinar conceitos complexos atravs da hipermdia. Isso o que ele faz de melhor e sem concorrncia. Us-lo para substituir HTML e criar introdues animadas desperdcio e equvoco.

Flash serve para atender a uma necessidade muito especfica, usar animaes, vdeo, som e interatividade para envolver o usurio, ou outros recursos avanados da plataforma que no esto disponveis em HTML ou em outras tecnologias. Quando essas necessidades no 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 Recursos tcnicos prprios. Carregamento quase instantneo.

Flash Instalao de plugin. Tempo de carregamento maior.

Facilidades na indexao por parte dos mecanismos de busca.

Melhor para uso em portais e blogs. Uso de gifs e animaes limitadas. Recursos interativos com efeitos limitados. Maior familiaridade do usurio intermedirio. (maior acessibilidade)

Dificuldade e limitaes de SEO

Pouco indicado para grande contedo. Efeitos animados sofisticados. Infinidade de efeitos interativas. Projetos menos intuitivos. (menor acessibilidade, para alguns tericos).

Excelente quando o interesse informar atravs de contedo de texto e imagem.

timo quando o interesse criar uma nova experincia.

Trabalha com contedos fixos e interaes mais limitadas no que se refere a efeitos.

Permite simulaes verossmeis e infogrficos diferenciados.

Erros ensinam mais que acertos, que tal analisar o que leva a frustrao do usurio?
Grande parte das experincias frustrantes no processo de comunicao Homem-computador esto ligadas a esttica das interfaces grficas e aos sistemas de interao:

Iluses - Ocorrendo em casos em que se clica em um link de um website e esse exibe uma mensagem de site em construo, ou links quebrados que no direcionam o usurio a pgina nenhuma. Mensagem de erro - Com longa histria na histria da interface, so notrias por serem incompreensveis, geralmente lidando com notas tcnicas em seu informativo. Sobrecarga ao usurio Como exemplo, tem-se os procedimentos de atualizao de softwares e instalao de plug-in, muitas vezes indesejados, tomando muito tempo e exigindo a ateno em etapas e operaes algumas vezes complexas.

Aparncia estritamente ligada ao aspecto esttico da interface grfica, esse se caracteriza principalmente por websites sobrecarregados de textos e imagens, animaes excessivas, uso copioso de efeitos sonoros, uso excessivo de operaes em menus e bancos de dados, agentes de ajuda infantis em momentos inadequados e botes e estrutura de layout mal projetada, dificultando que os usurios cliquem nos menus corretos.

Dois projetos que fazem parte da histria das interfaces, principalmente por fracassarem, foram o Bob e o Magic Cap.

O espao fsico limitado uma realidade do mundo fsico que pode ser facilmente superada pelos meios digitais, entretanto o design de interao dos sistemas do Bob e do Magic Cap descartaram esses potenciais, criando o que Johnson (2001) caracteriza como histeria de simulao total, lembrando que j temos salas de estar e corredores para andar por eles; no precisamos que dupliquem tambm pelos nossos monitores.

Tendncias

Templates X Web Designer

Integrao com Redes Sociais

A Era do mobile.

Cases de aplicao de interfaces e projetos interativos de sucesso:

www.bymk.com.br

www.camiseteria.com.br

www.milcasmurro.com.br

Quais seriam os prximos passos?

Tablets... E mais o que?

(...) as redes de comunicao e as aplicaes interativas multimdia esto proporcionando os fundamentos para uma transformao das ordens socioeconmicas existentes, tendo em vista uma sociedade da informao. Esta concebida como o resultado de uma mudana de paradigma nas estruturas industriais e relaes sociais, semelhante revoluo industrial, que no seu momento transformou as sociedades agrrias. (OECD apud TEDESCO, 2004, p.22)

Marcelo Prudente Email: mahcelo28@hotmail.com Twitter: @mahtchelo Portfolio: www.monopixel.com.br