Slide sobre Interface e Usabilidade, apresentado no 5º Bate Papo Sobre Ecommerce em Aracaju-SE no dia 11/12 pelo @Mahtchelo

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 interfacesEm 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. Histórico da evolução nas interfacesO 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.

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

6. A revolução tecnológica de SiliconValleyAs 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)

7. A revolucionária apresentação de Doug Engelbart no San Francisco CivicAuditorium. - 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.

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

9. O mercado e a rápida evolução dos computadores: - Surgimento da Apple computere a metáfora do DESKTOP (usando o Xerox Star como trampolim). - 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).

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

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. A Interface na “prática”. 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.

14. A web era questionada como modelo de negócios no início do milênio, hoje o MC Donaldsinveste mais em Web que TV.

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

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

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. Por que projetados e a realidade!

21. As 10 Heurísticas de Jakob Nielsen1) 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44. 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 (QuestionnaireofUser 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).

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

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

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

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

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

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

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

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

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

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

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

57. O Flash é inimigo da usabilidade ? Facilitar ou surpreender ? (site)

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

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

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

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

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

64. Tendências

65. Templates X Web Designer

66. Integração com Redes Sociais

67. A Era do mobile.

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

69. www.bymk.com.br

70. www.camiseteria.com.br

71. www.milcasmurro.com.br

72. Quais seriam os próximos passos?

73. Tablets... E mais o que?

74. “(...) 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)”

75. Marcelo PrudenteEmail:mahcelo28@hotmail.comTwitter:@mahtcheloPortfolio:www.monopixel.com.br