A inovação pela Usabilidade, em 7 minutos

A inovação pela Usabilidade, em 7 minutos
 

No dia 29 de abril aconteceu no iMasters Lab em São Paulo mais uma edição do 7Masters, dessa vez com o tema Usabilidade.

O 7Masters – Encontro de Especialistas é um evento presencial e pequeno que acontece em São Paulo, com 7 palestrantes falando por apenas 7 minutos. O objetivo é fazer uma lightinig talk, no estilo TED, para que os “mestres” apresentem algum case, inovação ou ideia na qual estão trabalhando. É um evento pequeno, focado e de nível avançado, com 20 participantes na plateia. Esses participantes são selecionados pelo pessoal do iMasters, mediante inscrição e análise do currículo, ou a convite dos palestrantes. A ideia é que essa plateia seja formada por pessoas que possam contribuir com a discussão.

Eu, que sou o curador desse encontro, me orgulho de ter convidado um time de peso para essa edição: Robson Santos, Diana Fournier, Carolina Leslie, Érico Fileno, Emerson Niide, Eurípedes Magalhães e Patrícia de Cia.

Se você não pode fazer parte da seleta platéia, não fique triste. Veja abaixo os vídeos das apresentações :)

Robson Santos: Indicadores para avaliar usabilidade

Robson Santos é Doutor (2006) e Mestre (2000) em Design pela PUC-Rio, na área de concentração Ergonomia e Usabilidade e Interação Humano-computador. Graduado em Desenho Industrial pela Escola Superior de Desenho Industrial (Uerj/Esdi). Tem como temas de interesse metodologias para avaliação de usabilidade e experiência do usuário; redes sociais; dispositivos e serviços móveis. Possui diversos artigos publicados no Brasil e no exterior, com larga experiência profissional na área de usabilidade e experiência do usuário, tendo participado de projetos de abrangência global. É consultor e pesquisador em Experiência do Usuário (UX), mentor na Interaction Design Foundation (IDF) e líder local na Interaction Design Association (IxDA SP).

Diana Fournier: Usabilidade como estratégia de fidelização em players de músicas online

Diana Fournier é UX Designer e Product Owner no UOL e Diretora do UXPA São Paulo, pós graduada em Mídias Digitais pelo SENAC SP e graduada em Desenho Industrial pela Universidade Federal do Amazonas – UFAM. Tem foco em mobile e projetos com metodologias ágeis. Já trabalhou na Tritone Interativa como Arquiteta da Informação focada em mobile, na Try Consultoria e Pesquisas como Analista de Usabilidade e no Instituto Nokia de Tecnologia (INdT) como Pesquisadora UX. No 7Masters Usabilidade, falou sobre usabilidade como estratégia de fidelização em players de streaming de músicas online.

Carolina Leslie: Testes de usabilidade: você está fazendo isso errado

Carolina Leslie é Cientista molecular de formação, UX por vocação e empreendedora por acaso, Carolina é sócia da Saiba+, consultoria em UX que atende clientes como Itaú, Smiles, Pão de Açúcar e Vivo. Em 2015 lançou o Tagarela, um aplicativo de pesquisa de mercado via celular. Desde 2007 organiza eventos da área – quatro edições do Encontro Brasileiro de Arquitetura de Informação (EBAI) e, mais recentemente, realiza o Dia Mundial da Arquitetura de Informação (WIAD) em São Paulo.

Érico Fileno: Design-driven Innovation

Érico Fileno é Designer pela UFPR, especializado em Design Estratégico e diretor da Welab Design e Inovação. Possui atuação pioneira no Brasil através da liderança de iniciativas da IxDA (Interaction Design Association) e SDN (Service Design Network). Já realizou centenas de projetos para grandes empresas nacionais e internacionais, como Google, Nokia, Itaú, Bradesco, HSBC, Samsung, HP, Volvo, Renault, GM, Whirlpool, Electrolux, Vivo, TIM, Oi, GVT, Claro, O Boticário, Mondeléz, Petrobras, etc, nas áreas de design de serviços, design de interação e design estratégico. Leciona desde 2007 em cursos de design em Curitiba, São Paulo e Rio, e há mais de 10 anos presta consultoria através da abordagem do Service Design Thinking, inclusive com cursos no MIT, DMI e d.School Stanford. Já palestrou em grandes eventos de design e inovação na Europa, EUA e América Latina.

Emerson Niide: A importância de discordar

Emerson Niide é Consultor independente e especialista em UX, começou a programar aos 13, mas desistiu dessa vida para trabalhar como web designer. Ao ler “Designing Web Usability” descobriu que UX unia suas duas paixões – comunicação e tecnologia – aos seus talentos – navegar na web e beber café. Desde então, atua nesta área, em projetos tanto para empresas pequenas como para as maiores listadas na Fortune 500, como o projeto de redesign do Internet Bank do HSBC, eleito o melhor do Brasil por duas vezes pela Global Finance.

Eurípedes Magalhães: 5 motivos para a publicidade desistir de UX

Eurípedes Magalhães é Consultor em UX Design, Design Thinking, Educação, Digital Design e Graphic Design, Eurípedes trabalha em publicidade desde 1995 e dá aulas desde 2003. Empreendedor, ou maluco, por topar o desafio de fazer a primeira pós-graduação de Marketing Digital em São Paulo e por criar o Reset-Lab, consultoria especializada em UX e educação.

Patricia de Cia: O papel do txt na usabilidade

Patrícia de Cia é gerente de Experiência do Usuário na Locaweb e lidera um time de onze designers. Tem mais de dez anos de experiência na área, com passagens por UOL, Somlivre.com, Try e Abril. Trabalha junto a times de desenvolvimento ágil desde 2008 e é adepta da metodologia Lean. Ex-jornalista, foi repórter e correspondente nos EUA da Folha de S. Paulo. Tem pós-graduação em História da Arte e é mestre em literatura italiana. No 7Masters Usabilidade, ela abordou o papel do texto na usabilidade.

A etnografia e o design da experiência do usuário

Curso UX Weekend
 

Eu mantenho seis honestos servidores (eles me ensinaram tudo o que sei). Seus nomes são: O “O que”, o “Por quê”, o “Quando”, o “Como”, o “Onde”, e o “Quem” // Rudyard Kipling – Autor e poeta Britânico, Nobel de Literatura de 1907.

Em Outubro 2015, São Paulo sediará pela primeira vez a conferência internacional EPIC, cuja proposta é o de refletir sobre as práticas atuais e futuras da aplicação da etnografia e design no mundo dos negócios. Para nós, profissionais de UX, este evento representa uma oportunidade única para aprendermos a usar a etnografia nos processos de desenvolvimento de produtos digitais.

Neste artigo, compartilho COMO utilizei a etnografia durante a fase de concepção de um portal Web corporativo. A versão detalhada desta experiência foi apresentada como Caso de Mercado em Novembro de 2013 no Interaction South America / ISA 13, em Recife, PE, Brasil.

A história

Em Julho de 2012, a Oi Internet (empresa do grupo Oi) passou por uma reestruturação geral. O departamento de Desenvolvimento e Soluções foi criado e nova equipe de profissionais contratada, dentre eles, arquitetos de informação, designers visuais, programadores front-end e back-end. Adotou-se uma metodologia híbrida de trabalho combinando o desenvolvimento ágil com o Kanban.

Os primeiros projetos encaminhados para nós arquitetos da informação (AIs), demonstrou que nossa função na equipe era vista de modo “engessado”, ou seja, esperavam apenas que entregássemos mapas de site, fluxogramas e wireframes interativos com boa usabilidade.

A oportunidade para a etnografia

Em Novembro de 2012 iniciamos o primeiro grande projeto da equipe, um portal Web de indicadores e de comunicação interna. A entrada da Arquitetura de Informação no projeto ocorreu durante a revisão do Sprint 0 (zero) e o planejamento do Sprint 1. Estávamos pegando o bonde andando.

A documentação do produto, ainda incipiente por se tratar de projeto de inovação com escopo aberto, listava 16 tipos de usuários do portal, indo de operadores de campo a diretores. Os casos de usuários (user cases) estavam escritos em linguajar técnico (“o usuário poderá incluir, alterar, consultar e excluir dados…”) e listavam tantas funcionalidades que me fez concluir que o escopo estaria 100% definido.

Identificamos a necessidade de melhor conhecer os usuários do portal Web. Se teríamos tantos usuários, quais seriam as experiências e contextos de uso diferenciados do produto para cada um deles? E quais seriam os problemas de negócio que o portal deveria atender?

Inicialmente aplicamos um questionário online visando entender o perfil e necessidades do usuário primário do portal (ou a persona primária). Os respondentes eram um público maduro, de nível educacional alto, e confortável no uso de tecnologias e da Web. Nas respostas recebidas identificamos as tarefas mais críticas para este grupo e suas expectativas sobre como o portal poderia auxiliá-los na gestão diária de seus negócios com a Oi. Concluímos que os casos de usuário previamente definidos estavam desalinhados com as prioridades do usuário/persona primário. Isso nos motivou a visitar uma das operações piloto do projeto, localizada no interior do Estado da Bahia.

A viagem durou três dias úteis. Eu e o gerente do projeto (GP) saímos de São Paulo para Salvador e de lá viajamos mais 3 horas de carro para o interior da Bahia, onde o “dono do produto”(ou PO, “product owner”), se juntou a nós vindo do Rio de Janeiro.

Ao todo foram dois dias inteiros de contato com o cliente, que incluiu:

  • Conversas formais (entrevista com roteiro);
  • Conversas informais (almoços e jantares);
  • Design participativo com a equipe de gestores da operação local, visando fechar o escopo e mapa do site do portal;
  • Observação contextual da equipe técnica atuando no local de trabalho, resolvendo problemas reais;
  • Documentação etnográfica: fotografias capturando o ambiente físico e humano de trabalho da operação.

Apesar de rápida, a visita nos proporcionou um aprendizado muito rico sobre a realidade da operação e da persona/usuário primário do portal. Ela subverteu nossos pressupostos iniciais sobre qual seria o funcionamento da operação e gerou subsídios para entendermos o contexto de trabalho e a necessidades imediatas dos usuários.

De volta a São Paulo, montamos uma apresentação da visita posicionando o design centrado no usuário/persona como a estratégia adequada para a priorização dos requisitos do projeto. A apresentação causou um grande impacto na equipe da Oi Internet (diretor, gerentes, desenvolvedores e designers), fazendo com que o projeto saísse do âmbito da abstração (uma coleção de funcionalidades) para o âmbito da realidade e empatia para com os usuários do produto.

A consequência imediata para o projeto foi a redefinição de seu escopo e para nós, arquitetos da informação, nos posicionar como estrategistas e planejadores do produto. No entanto, talvez o impacto mais crítico deste projeto para a Oi Internet foi a de “oferecer inteligência e estratégia aos projetos de inovação” para a Oi, deixando de ser vista como mera fábrica de software.

O kit pesquisa e a coleta de dados

Na preparação para a visita, desenvolvemos um “kit pesquisa” consistindo de:

  • Objetivos com perguntas a serem validados;
  • Roteiro da pesquisa contextual;
  • Roteiro da entrevista com o dono do negócio;
  • Checklist da documentação a ser coletada;
  • Checklist para o workshop de design participativo.

As condições para a coleta de dados e condução das atividades de pesquisa foram muito desafiadoras pois lidamos com limitações de tempo e equipamento. Em alguns momentos as atividades ocorreram de modo planejado e em outros, espontâneo. O acaso e imprevisto nos ajudou, quando por exemplo, consegui fotografar operadores de rede e vendedores de rua antes de saírem a campo. Nosso tempo foi escasso e nossos equipamentos para a pesquisa, precários:

  • Câmera fotográfica semi-profissional;
  • Gravador do iPhone + um outro semi-profissional;
  • Acesso lento á Internet (estávamos no interior da Bahia).

Lições aprendidas

Os gestores da operação estavam sempre muito atarefados já que a operação tinha apenas 3 meses de idade e poucos funcionários. Tendo isso como pano de fundo, a sinopse de nossa interação com a operação ocorreu assim:

  • Conseguir entrevistar o dono da empresa (persona primária) por 30 min foi uma vitória;
  • Seguir o roteiro planejado para a pesquisa contextual, observando e entrevistando vários grupos de funcionários, foi impossível. Meu colega GP se prontificou a me ajudar e o orientei a o que observar e anotar;
  • Realizar a atividade de design participativo foi desafiante. A atenção e concentração dos três principais gestores operacionais e do dono da empresa eram disputadas entre nossa atividade e as demandas da gestão diária do negócio, sendo interrompidos continuamente para assinar notas fiscais, atender telefonemas urgentes, encontrar soluções para problemas técnicos que somente eles poderiam solucionar;
  • Documentar a viagem e fotografar as pessoas e premissas da operação só foi possível com a ajuda de meus colegas da Oi. Ambos revezaram comigo a condução da atividade de design participativo com os gestores executivos da operação.

Outras lições aprendidas:

  • Ter um roteiro planejado para a pesquisa é crítico, mas precisamos ser flexíveis pois constantemente nos deparamos com imprevistos não antecipados;
  • Ter uma equipe de pesquisa sintonizada e cooperativa pode implicar na qualidade final da pesquisa realizada; mesmo não treinados para a função, colegas podem ser orientados e nos auxiliar na coleta de dados e observação;
  • Diferenciar o dado/informação críticos do não crítico vem com a tempo e a experiência acumulada do profissional/designer.

Finalmente, na avaliação da visita pela operação da Oi na Bahia, recebemos um feedback muito positivo da equipe entrevistada. Relataram que participar do design colaborativo os ajudou a explicitar suas visões de gerência e negócio pela primeira vez. Devido ao trabalho intenso da operação, ainda não haviam tido oportunidades para a troca rica que ocorreu durante nossa visita. Durante a atividade de design participativo, os gestores de tornaram co-criadores da operação, se sentiram ouvidos e foram ouvidos pelos colegas e pela Oi, e assim, se tornaram também, os donos do projeto.

Fonte da imagem: Plurale Tantum

O Google e a experiência Mobile-Friendly

O Google e a experiência Mobile-Friendly
 

O Google segue como o rabo que balança o cachorro da web. Isto é bom. Diferente da Microsoft que criou uma web dependente da droga do IE.

É bom que uma empresa influencie tanto assim a internet?

Um antigo statement do Google dizia “don’t be evil”. Hoje muita gente teria um gogol de motivos para listar que não é bem assim. Mas convenhamos que o Google impactou na web quando ela poderia ter escorrido pelo ralo com o estouro da dotcom bubble, com o vírus player do IE dominando, e uma internet nova em folha e muito mais chata – a WAP – botando as manguinhas para fora.

O Google entrou em cena e meio que arrumou a casa. A web volta a ser relevante. Publicidade não sustentou a bolha? Olha aqui o Ad Sense. Seu site gasta 80% da banda passando metatag keyword, usando termos QUE TODO SITE usa? Não ligamos. Quem anda usando <h1> neste mar de <div> e <p>? É este que queremos.

O Google amestrou web designers a fazer o serviço que deveriam estar fazendo deste sempre.

Eu poderia dizer aqui então que a recente atualização do seu algoritmo (o pessoal do Marketing de Busca costuma chamar cada reforma desta com nomes de furacões, por causa do estrago que causam em suas estratégias), priorizando sites Mobile-Friendly, é mais do Google não sendo malévolo?

Não, isto entra na cota do gogol de malícias do Google.

É fato que a mobilidade cresce a cada dia. Mesmo no Brasil, na lanterna de adoção de tecnologias (porque somos um povo tradicional, que preza muito ter ministros da ciência e tecnologia que promulga leis que impeça adotar tecnologias que demitam trabalhadores – se Aldo Rabelo fosse um lorde inglês há um século e meio, ele teria ajudado a quebrar teares; se fosse um congressista americano há um século atrás, teria mandado prender Henry Ford), a mobilidade já ultrapassa o número de acesso usando a caixinha mágica em cima da mesa.

Mobile-Friendly

Hoje, quando vemos um livro ou um curso de Flash, não contemos a vontade de rir. Quanto tempo perdido numa coisa que foi esquecida com a mudança de panorama.

Naturalmente a experiência mobile é diferente daquela do desktop.

O desktop tem telas largas, multitarefa, salva, imprime, copia e cola. O celular está limitado a uma tela por vez, alternar telas é bem menos produtivo e estamos amarrados ao que há no menu “compartilhar”. Mas o diacho é que a experiência desktop está para esta geração o que a TV estava para a geração anterior: É uma experiência de hora marcada, no conforto da residência, escritório ou de uma lan house.

Mobile, é o tempo todo, ao alcance do bolso (ou do tablet na mochila). Liga e tem internet (não é como um boot do computador, que você liga, vai buscar um café, vai ao banheiro, arruma seus CDs e volta, e ainda está na tela da bandeira do Windows). As conveniências da mobilidade não são as mesmas do desktop, mas elas ganharam na proximidade e na praticidade.

Faltava agora um terceiro “P”: Pertinência. Seria isto que o Google estaria fazendo, adestrando web designers a se adaptarem a este novo paradigma mobile? Uma olhada superficial diria que sim. Mas eles não fazem isto porque são bonzinhos.

O Google anunciou recentemente seu Projeto Fi. Basicamente, habilitará os usuários do Nexus 6 (isto mesmo, apenas um tipo de celular, num mercado dominando de iPhones e Galaxies) a usar o Google como operadora de telefonia. A treta usará uma rede de wi-fi específica, por uma taxa muito mais módica. Quando o tal wi-fi não estiver ao alcance, será usado duas redes 3G dos EUA aonde rolou um acordo.

Basicamente, o Google começa a testar o óbvio futuro da telefonia: Provedores deixarão de servir ligações de voz para ser mera ligação de dados. Eu pensei que quando o WhatsApp habilitasse chamadas de voz, seria a demarcação do fim das operadoras de ligação de voz. O Google furou o WhatsApp.

Mas só no Nexus 6? Não é proteção para o “celular do Google”?

O Google declarou que o Projeto Fi seria de “nicho”. O gigante das buscas não pode abrir um serviço de massa, e precisou desse nicho para que nenhuma operadora se assustasse. Um fato conhecido da tecnologia da informação é que uma boa ideia no momento errado ainda assim, dará errado. Transformar ligações de voz em pacotes IP é inevitável. Mas nenhuma operadora alegremente irá fazer uma canja de uma galinha que ainda está botando ovos.

Então o plano maligno do Google é:

  1. Adestrar web designers a fazer sites Mobile-Friendly;
  2. Tornar mais barato o acesso mobile;
  3. Lucros.

Diferente do business plan dos gnomos das cuecas, o Google tem bem em vista todas as etapas. Vai lucrar porque quanto mais gente online, mais gente clicando no Ad Sense. E para que as pessoas vejam Ad Sense, é melhor exibi-los num dispositivo que é usado umas 10 horas por dia (desktops) ou naquele que as pessoas usam todo o tempo enquanto estão acordadas (mobile)?

O Google só vai perder o foco em mobile quando puder inserir Ad Sense nos nossos sonhos.

O SEO dos sites Responsivos

O SEO dos sites Responsivos
 

Nos últimos dias começaram a pipocar na web uma série de notícias dizendo que o novo algoritmo do Google pode dificultar a vida das pequenas empresas, o que não passa de uma grande besteira sensacionalista. O Google está apenas privilegiando em seu algoritmo de busca os sites que proporcionam uma boa experiência mobile para os seus usuários, principalmente aqueles que possuem uma estrutura responsiva.

Já faz um certo tempo que o Google age dessa maneira. Há pelo menos um ano e meio eu digo para os meus alunos do curso de Design Responsivo que o “gigante das buscas” deixa muito claro o padrão de design que ele recomenda:

Sites que usam Web Design Responsivo, isto é, sites que funcionam em todos os dispositivos com o mesmo conjunto de URLs, com cada URL fornecendo o mesmo HTML a todos os dispositivos e usando apenas CSS para alterar como a página é processada no dispositivo. Essa é a configuração recomendada pelo Google.

Desde que o Google existe, muitos profissionais do chamado “marketing de busca” estão sempre tentando encontrar formas de burlar o funcionamento de seu algoritmo (sim, é isso que o SEO faz) para privilegiar suas páginas nos resultados de busca. O que o Google vem fazendo em contra-partida é priorizando como critério de indexação os sites que proporcionam uma boa experiência para os usuários. Dessa forma, questões como validação social e bounce rate ganham cada vez mais importância do que a quantidade de palavras-chave.

A cada dia, são vendidos mais iPhones do que nascem bebês. Fonte: http://www.lukew.com/ff/entry.asp?1506

A cada dia, são vendidos mais iPhones do que nascem bebês. Fonte: http://www.lukew.com/ff/entry.asp?1506

A verdade é que não são apenas as pequenas empresas que correm o risco de verem os seus sites afundando no mar de resultados de busca. Hoje, a grande maioria dos sites, independente do porte da empresa, não proporcionam uma boa experiência mobile (uma fatia significativa é ruim inclusive no desktop). O que está sendo decretado não é o fim de qualquer empresa, mas sim de profissionais que insistem em técnicas arcaicas de web design e SEO, e colocam o marketing acima da experiência do usuário.

Adotar uma abordagem Mobile First não é mais uma questão de pensar no futuro, e sim de estar antenado com o presente.

Be Quick Or Be Dead!

UX no E-commerce: a importância dos testes de usabilidade

UX no E-commerce: a importância dos testes de usabilidade
 

A maioria dos e-commerces atualmente utilizam em sua estrutura as mesmas convenções de interface (disposição dos menus, formatos dos destaques, campo de busca e call-to-action, por exemplo), o que traz uma certa segurança em relação à curva de aprendizado para os usuários, já que não existem grandes novidades entre um e outro. Porém, isso faz com que tenhamos muitos sites idênticos, que proporcionam experiências parecidas.

Já vi algumas lojas tentarem inovar no modelo e formato da interface (e toda experimentação é digna de aplausos). O problema é fazer experiências seguindo a própria intuição ou suposições, sem qualquer teste com usuários que possam validar a interface. O resultado dessa falta de testes pode ser, em muitos casos, uma considerável queda nas vendas.

A maioria dos sites de e-commerce utilizam as mesmas convenções de interface.

A maioria dos sites de e-commerce utilizam as mesmas convenções de interface.

É importante que todo e-commerce procure proporcionar aos usuários experiências diferenciadas dos seus concorrentes, mas toda estrutura visual e funcional de uma interface deve ser criada com base em pesquisas com usuários, e validada com os mesmos através de testes de usabilidade. É essencial proporcionar interações fluidas de acordo com o modelo mental de seus clientes, com um número mínimo de tarefas para atingir o objetivo final (a compra), fornecendo diferentes filtros de pesquisa para se chegar ao produto ideal, disponibilizando informações detalhadas de maneira organizada para cada item, assim como maneiras eficientes de comparar esses produtos. Mas, se nada disso for testado e validado com usuários, será apenas um tiro no escuro. Meras suposições e achismos.

No Congresso de Marketing & Vendas organizado pelo E-commerce Brasil no último dia 13 de março, Horácio Soares perguntou para uma plateia de mais de 1000 profissionais de e-commerce “quem costuma aplicar testes de usabilidade em suas lojas?”, e não foi surpresa (infelizmente) ver que apenas uma meia dúzia de gatos-pingados levantaram a mão. Também costumo comprovar essa triste realidade durante o workshop UX Weekend, onde na maioria das vezes utilizamos sites de e-commerce para aplicar Testes de Usabilidade ou Card Sorting com os alunos, e é impressionante a quantidade de problemas de interface e navegação que encontramos nesses sites somente nesses pequenos testes simulados. Isso tudo só comprova que a grande maioria das lojas brasileiras não têm investido como deveriam em UX e Usabilidade, e com certeza estão perdendo dinheiro com isso, até porque muitas pesquisas já nos mostram que a experiência dos usuários em breve será mais importante que o preço, como diferencial competitivo.

Teste de Usabilidade em E-commerce, durante o workshop UX Weekend em Florianópolis

Teste de Usabilidade em E-commerce, durante o workshop UX Weekend em Florianópolis

A verdade é que os e-commerces que mais aumentam suas taxas de conversão são aqueles que realizam testes com usuários em suas interfaces. Mesmo os pequenos detalhes nas interações podem otimizar a experiência dos usuários e proporcionar grandes resultados. Um ótimo exemplo disso é a famosa história do pequeno ajuste em um botão feito após a aplicação de testes de usabilidade, que fez com que um e-commerce aumentasse as vendas em 45%, o que proporcionou um faturamento adicional de U$S 300 milhões no primeiro ano. Outro bom exemplo é o que faz a Amazon, que mesmo não possuindo um site atrativo esteticamente, possui uma interface muito funcional, por se preocupar com detalhes que fazem toda a diferença para uma interação fluida e prazerosa, como é o caso do trabalho feito no seu menu dropdown.

Sei que os E-commerces hoje preferem se agarrar ao Marketing, e enxergam a Usabilidade somente como um plus, um adendo em que poderão investir quando tiverem mais tempo e dinheiro. Alias, a falta de tempo de dinheiro para contratar uma consultoria costuma ser a desculpa mais usada pelas empresas para não se dedicarem a usabilidade. Mas não caiam nessa. Como já nos mostrou Steve Krug em seu livro Simplificando coisas que parecem complicadas, não precisamos de tanto tempo e dinheiro assim para testar a usabilidade com usuários.

Não se esqueçam de que não basta apenas trazer novos usuários para a sua loja, pois é a boa experiência de uso que poderá reter de fato esses clientes ;)


Leia também: UX no E-commerce: mapeando a jornada do consumidor

Design Responsivo: as Media Queries são só um detalhe

Design-Responsivo--as-Media-Queries-são-só-um-detalhe
 

É com muita frequência que vejo pessoas que querem aprender a criar sites responsivos publicarem em grupos e listas de discussão algo como “quero aprender design responsivo… como uso as Media Queries?” ou então “O que é melhor para começar a aprender Design Responsivo: Bootstrap ou Foundation?”. Também é comum encontrar designers dizendo que a responsabilidade de fazer com que um layout torne-se responsivo é do Front-Ender, e que eles não precisam se preocupar com isso.

Tudo errado!

Associar os esforços para o desenvolvimento de uma interface responsiva a etapa de Front-End é um dos maiores equívocos atuais do desenvolvimento web.

Ethan Marcotte, o cara que cunhou o termo Responsive Web Design, publicou o primeiro texto sobre o assunto no A List Apart em maio de 2010. O que eu acho mais interessante nesse texto são as “categorias” na qual o Ethan classificou esse texto: CSS, Layout & Grids, Mobile/Multidevice, Responsive Design, Interaction Design. Isso mostra por si só a multidiciplinaridade de conhecimentos necessários para desenvolver um site responsivo. Para criar o conceito, Ethan se inspirou em uma ideia mais antiga, a Arquitetura Responsiva, aonde os espaços e ambientes podem se adaptar a condições pre-definidas ou desejáveis, por meio de sensores, de acordo com os diferentes contextos.

Contexto! Essa é a palavra chave.

O Design Responsivo não é apenas uma questão tecnológica de adaptação para diferentes dispositivos, mas sim uma adaptação para diferentes contextos. Desenvolver interfaces com layouts e conteúdos flexíveis e adaptáveis a uma ampla variedade de resoluções de tela, dispositivos e, principalmente, contextos de uso.

As pessoas consomem conteúdo e interagem com os dispositivos de maneiras diferentes de acordo com o contexto em que se encontram. A forma que uma pessoa navega por um site sentada em uma mesa de escritório em um computador com teclado e mouse, com uma tela espaçosa, boa conexão e um ambiente razoavelmente controlado é bem diferente da forma que essa mesma pessoa faria se estivesse no metrô com um smartphone de tela pequena e sem luz adequada, conexão instável e ambiente caótico, segurando o dispositivo com uma única mão e interagindo sem precisão com um dedo gordo e engordurado. Nesses diferentes contextos, as pessoas têm disposições diferentes para consumir conteúdo. O tempo e o ritmo são diferentes, e a forma e quantidade de informação que estamos dispostos a consumir são proporcionalmente opostas.

Criar um site responsivo não consiste simplesmente em aplicar Media Queries ao código para espremer os conteúdos de forma um pouco mais amigável em telas menores. Aquilo que o usuário irá visualizar em um smartphone precisa ter mais foco e ser mais enxuto. Não temos espaço nem tempo disponíveis para conteúdos de relevância duvidosa, e por isso precisamos projetar uma interface mais específica e adequada, o que nos obriga a dar mais atenção à áreas como Arquitetura de Informação, Usabilidade e Acessibilidade. Entre o Desktop e o Mobile, precisamos estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site, e com isso repensar a pertinência de apresentação dessas informações em diferentes contextos e dispositivos. Não se trata apenas do tamanho da tela, mas sim do contexto em que o usuário se encontra.

Para que essa adaptação a diferentes contextos e dispositivos aconteça de forma adequada, precisamos de uma interface com caracteristicas bem específicas como um Layout Fluido com um Design Adaptativo. A estrutura fluida, onde todas as medidas utilizadas são relativas (porcentagem ao invés de pixels, por exemplo) permitirá que o site se adapte em pequenas variações de tamanhos de tela, como por exemplo a diferença entre um iPhone 6 e um iPhone 6 Plus. Por outro lado, em variações de telas maiores, como a diferença entre um iPad e um iPhone, provavelmente a interface fluida se quebraria, e uma parte do conteúdo se tornaria irrelevante. Nessa situação, precisamos de um layout adaptativo, ou seja, quando o site encontrar um desses pontos de quebra (Break Points), o layout e o conteúdo irão se recompor para serem exibidos de uma maneira mais adequada e adaptada.

Exemplo de metodologia de Design feito diretamente no navegador. Fonte: https://medium.com/@astralwave/designing-for-outcomes-a6484e1682cc

Exemplo de metodologia de Design feito diretamente no navegador. Fonte: https://medium.com/@astralwave/designing-for-outcomes-a6484e1682cc

A questão chave é que para implementar todo esse dinamismo no código, além de conhecer bem os usuários e os diferentes contextos de uso, é preciso ter um projeto de design muito bem definido. E, para projetar o design dessas interfaces, um meio estático como o Photoshop não nos ajuda da maneira adequada. Nessas horas é que Designers e Front-Enders precisam dar as mãos, desde a concepção até a implementação dessas interfaces. No projeto de Design Responsivo é onde começam a fazer mais sentido as metodologias de Designing in the Browser, onde a partir de Sketchs, wireframes e um guia de estilo, o layout é desenvolvido diretamente no navegador com a ajuda de um inspetor de código como o Firebug. É uma maneira ágil e consistente e projetar e testar possibilidades e limitações reais simultaneamente.

Para que um site responsivo proporcione uma boa experiência para os usuários, além de layout fluido e design adaptativo, é necessária uma boa otimização de desempenho, o que pode ser feito muito bem por um designer que entende minimamente de código, e um front-ender que entenda minimamente de design.

Designer e Front-enders, sejam amiguinhos. Cada vez mais vocês vão precisar um do outro ;)

Google e o mito da garagem

Google e o mito da garagem
 

Lendo o artigo “A verdade oculta das ‘empresas de garagem’ do Vale do Silício” no El País, dois trechos me chamaram a atenção:

Há ainda a do número 232 da Santa Margarida Avenue, em Menlo Park. Essa foi alugada em 1998 por dois jovens, Larry Page e Sergei Brin, para desenvolver uma jovem empresa chamada Google. A garagem continua surpreendentemente intacta hoje. Com o tapete azul que a então proprietária da casa, Susan Wojcicki, hoje executiva-chefe do YouTube, instalou para que os inquilinos se sentissem mais à vontade. A mesa de pingue-pongue onde se distraíam.

Tudo disposto para que o mito pareça real e nada relembre que, na realidade, o Google foi fundado dois anos antes; já havia arrecadado mais de um milhão de dólares de vários investidores; e a economia que representava alugar uma garagem em vez de um escritório era risível. E mais, em janeiro de 1999, depois de apenas cinco meses pisando no tapete azul, os nove empregados do Google se mudaram para escritórios convencionais. Mas a garagem está ali, é propriedade da empresa desde 2006, e os lucros que gera em seu mito institucional são incalculáveis.

Céus! E quando eles descobrirem que as banquinhas de limonadas que as crianças americanas montam na porta de casa são subsidiadas pelas fundos familiares dos empreendedores?

Dei um bizu no pai dos burros da internet para procurar a quantidade de patentes de dois países, comparativamente, a título de curiosidade:

Pedidos de patentes em 2012:
EUA: 542815
Brasil: 30116

O que isto tem a ver com a carocha da garagem? Ela é conceitual.

Quando o Steve Jobs, lá de sua garagem criou os ícones do iOS, nenhuma reportagem veio dizer que aquela câmera não era uma câmera de verdade, mas meramente uma representação que ativava as rotinas para o celular fotografar. O ícone era conceitual. Ele contava uma história (o termo correto é “esqueomorfismo”). Seu cérebro via o ícone de câmera e imediatamente, sem precisar tirar um MBA em interfaces, sabia o que aconteceria ao clicá-lo.

É engraçado tratar um cérebro como um ente, mas ele muitas vezes funciona assim mesmo. Você não se detém numa análise detalhada que aquele ícone é de uma câmera, e não procura em todos os registros visuais de uma vida um matching de imagem para julgar que se trata de uma câmera fotográfica, nem faz alusões aos Daguerreótipos para finalmente concluir que aquilo ali é para fotografar. Seu cérebro faz isto sem você ter consciência de todos estes processos. São processos subconscientes acionados por conceitos.

Steve Jobs na juventude.

Steve Jobs na juventude.

E vejam só, o país aonde o conceito da garagem é ecoado, fez 18 pedidos de patentes, enquanto o país aonde implantam o conceito no subconsciente de que precisamos perseguir a segurança de um cargo público concursado, registrou uma patente.

A questão pode evoluir para outros conceitos arragaidos. Há tempos se questiona que a colonização protestante dos EUA determina hoje seu sucesso industrial. Embora seja tão cristão quanto a colonização brasileira, os protestantes tem uma diferença: sua conduta valoriza o trabalho como meio de aprimoramento do caráter. Já a tradição cristã ibérica passou a tradição da efemeridade da vida e que o trabalho árduo que os pobres tem que suportar será recompensado… depois de morrerem.

Não lembro de o El País trazendo reportagens dizendo que passagens cristãs (concepção imaculada, assunção de Maria ou com quem Caim teve filhos para formar a humanidade) não tem correlação com passagens bíblicas, ou mesmo passagens bíblicas não batem com registros naturais (o dia que Terra parou, o dilúvio, ou o tal do Apocalipse), mas ainda assim, as estórias inspiraram o empreendedorismo nos EUA.

Nossos cérebros tem uma linguagem poderosa de conexão: são metáforas, conceitos e estórias. Ninguém nunca disse que eles precisavam ter reflexo na realidade. Elas só precisavam acionar nossos cérebros para implantar uma ideia.

Novamente: o país que implantou a ideia do empreendedorismo de garagem pediu o registro de 18 patentes enquanto o país aonde trabalhar é fardo de pobres, pediu um registro.

Naturalmente, os EUA não registra mais patentes só por causa do mito da garagem (a China não o tem até aonde eu saiba, e registram muito mais). Mas eu só estava plantando uma ideia sobre a importância de cultura que estimula ideias empreendedoras.

The Grid: Web Designers ficando obsoletos?

The Grid
 

É, se a tecnologia anda roubando um monte de empregos por aí (felizmente as máquinas ainda não conseguem fazer trocadilhos, assegurando meu emprego), com web designers não seria diferente:

Este é o The Grid. Basicamente é um serviço que analisa seu conteúdo e define automagicamente até as cores num web design responsivo. Tudo usando aqueles minúsculos sul-coreanos que moram dentro de softwares de inteligência artificial.

Funciona assim: ao invés de ter um editor que você arrasta o conteúdo, estica e encolhe até caber na tela, este Server vai fazer uma parada de inteligência artificial para pegar o conteúdo e manjar até as cores que nele vai entrar. Como são computadores e eles são bons em tarefas repetidas, a coisa já vai com design responsivo. O problema é que é possível que os sites usando a inteligência artificial, em algum momento, fiquem com a mesma cara. Mas vamos ser honestos: todos os sites feitos pelos humanos tem a mesma cara. Chamam isso de “tendência”.

Tá em beta, e lançam a parada por roubados $25 no ano que vem. Dá tempo para vocês, web designers, aprenderem alguma profissão que não tem chance das máquinas fazerem melhor. Cobrar para fazer cafuné, por exemplo.

Projetando com Lean UX

Projetando com Lean UX
 

No dia 04 de fevereiro de 2015 aconteceu na 8º edição da Campus Party Brasil a palestra “Projetando com Lean UX”. Nela, eu e a minha amiga Diana Fournier procuramos apresentar como a abordagem Lean pode nos ajudar a encontrar a verdadeira natureza do nosso trabalho.

Abaixo, disponibilizo o vídeo e os slides da palestra.

A área da Experiência do Usuário é muito baseada em entregáveis, e quando somamos a isso a herança de abordagem cascata que a maioria das empresas ainda trabalha, temos como efeito uma área departamental e burocrática. A ideia de projetar para a Experiência do Usuário deve ser compreendida como uma cultura, e não como uma disciplina ou departamento. Precisamos fazer com que todos aqueles cujo trabalho geram de alguma forma impacto na Experiência do Usuário mantenham foco nas pessoas durante todo o projeto, e aprendam a trabalhar de forma colaborativa.

Lean UX: Edu Agni e Diana Fournier

Quando somamos ao nosso processo a visão do Design Thinking, temos a possibilidade de lidar com os nossos projetos com base na empatia, colaboração e experimentação, agrupando todos os envolvidos dentro de uma mesma finalidade comum. Incluir nessa abordagem colaborativa uma metodologia ágil vai nos permitir simplificar o desenvolvimento de produtos/serviços, nos livrando do excesso de entregáveis e trabalhando apenas com documentos rápidos, colaborativos e facilmente editáveis, com menos ênfase nos resultados e maior foco na experiência real do usuário.

Assim, o nosso objetivo passa a ser colocar o quanto antes um protótipo funcional na mão do usuário final, testando e corrigindo os possíveis erros, trabalhando com a ideia de um mínimo produto viável em constante evolução, e avançando para uma próxima versão. Afinal, a tentativa e erro colaborativa tem mais sucesso que o planejamento do gênio solitário :)

Mínimo produto viável

Acessibilidade vs Navegadores Antigos: uma escolha que pode custar caro

Acessibilidade vs Navegadores Antigos
 

Vou te propor uma experiência. Procure os desenvolvedores front-end que você conhece, desde novatos até os ninjas, e faça três perguntas:

  1. Na sua opinião, o que gera mais acessos para um site: pessoas com deficiência ou pessoas com navegadores antigos?
  2. No seu trabalho, qual é a maior exigência: fazer sites acessíveis ou sites que funcionem em navegadores antigos?
  3. Você testa, ou possui alguém na sua equipe que teste o nível de acessibilidade dos sites desenvolvidos?

Infelizmente, esse tipo de experiência nos leva a triste conclusão de que [1] os desenvolvedores não testam a acessibilidade dos projetos que codificam, [2] não se preocupam em desenvolver um site acessível da mesma forma que se preocupam em desenvolver um site que funcione nos navegadores antigos, e [3] sequer sabem que existem mais pessoas com deficiência do que usuários de versões antigas do Internet Explorer.

Uma em cada cinco pessoas possuem alguma deficiência

O número pode parecer um exagero, mas não é. Mesmo que algumas deficiências como as auditivas ou uma miopia que exija o uso de óculos possam “quase” não dificultar o uso da web, tornar um site acessível fará com que essas pessoas tenham uma experiência mais consistente, e trará benefícios que vão além de simplesmente atender essa faixa de usuários.

23,9% dos brasileiros declaram ter alguma deficiência. A deficiência visual foi a que mais apareceu entre as respostas dos entrevistados e chegou a 35,7 milhões de pessoas. Pelo estudo, 18,8% dos entrevistados afirmaram ter dificuldade para enxergar, mesmo com óculos ou lentes de contato. – IBGE, no Censo Demográfico 2010

Se nos atentarmos ao fato de que usuários de versões antigas de certos navegadores normalmente representam algo em torno de 1% ou 2% dos acessos aos sites, podemos facilmente perceber que algo está muito errado na prioridade que os desenvolvedores e Stakeholders dão as necessidades dos usuários que precisam ser atendidas.

O retorno sobre investimento dos sites acessíveis

Profissionais que primam por boas práticas de desenvolvimento, quando argumentam sobre a necessidade de cuidados e prazo adicional para melhorias de acessibilidade, eventualmente barram em gestores com uma visão de negócio retrograda, e justificativas do tipo “cegos não compram”. Os mesmos gestores costumam afirmar que é indispensável manter suporte a navegadores anciões, pois na visão deles existem muitas pessoas que ainda utilizam versões antigas do Internet Explorer.

Trabalho com soluções em e-commerce há anos e nós continuamos tendo maior renda com investimento em acessibilidade do que se importando com Internet Explorer 6/7/8- Christophe Porteneuve (@porteneuve)

Afinal, o que está errado? Será que o diretor de algum e-commerce ou portal de notícias (ou pessoas em seu nome) intencionalmente tomaria uma decisão estratégica ruim?

Na verdade, o mais provável é que essas pessoas acabem priorizando requisitos de forma errada por desconhecimento dos dados. A falta de informação faz com que stakeholders e desenvolvedores deem mais importância em manter a compatibilidade dos sites com o Internet Explorer 7 ou 8 do que fazê-los mais acessíveis.

É importante que todos os envolvidos em um projeto web tenham em mente que, caso tenham que decidir entre um e outro, manter o suporte a navegadores antigos proporciona um menor impacto na qualidade e acaba custando mais caro do que zelar por acessibilidade.

Acessibilidade não é apenas para cegos

Um contra-argumento extremo, que geralmente é utilizado para desqualificar quem defende a implementação de acessibilidade, é que ela faria diferença apenas para cegos, e que, por existirem poucos cegos, não vale o custo de investimento. Essa afirmação é extremamente parcial.

Saiba que implementar a acessibilidade melhora o acesso a informação também de pessoas sem qualquer deficiência. Vários de seus princípios, que já eram pregados há décadas, hoje são populares como recomendações de usabilidade, e claro, também ajudam nos processos de conversão, como as vendas de um e-commerce. Isso explica porque, mesmo que o percentual de pessoas utilizando navegadores antigos fosse o mesmo que o das pessoas com alguma deficiência, ainda assim investir em acessibilidade abrangeria mais usuários. Praticamente 100% dos usuários são beneficiados.

Testar e melhorar seus sites para leitores de tela também melhora indexação feita pelos sistemas de busca. Leitores de tela, que são os sistemas usados por pessoas cegas ou com baixa visão, requerem que o código HTML esteja no mínimo escrito de forma semântica, contendo significado suficiente para que as máquinas também o compreendam. Um erro comum é a estrutura de títulos inadequada: mesmo que visualmente um título esteja com tamanho e cor em destaque em uma página, ele pode ter sido implementado usando uma marcação com hierarquia incorreta no HTML. Ao testar seu site com leitores de tela, você pode identificar mais facilmente alguns erros de estrutura, como os que fariam os atributos de um produto vendido ser confundido com os de outro produto na mesma página, ou mesmo com um espaço para publicidade de terceiros, o que poderia gerar vantagens em segmentos bem concorridos para buscas orgânicas no Google.

Como melhorar a situação geral

Conscientização é a chave do negócio. Ao trabalhar em equipe, sempre que você notar essas escolhas técnicas não ideais por parte de outras pessoas, mesmo que não sejam de sua área, questione e mostre uma referência técnica, ou mesmo uma ferramenta de validação automática. Designers costumam aceitar bem a ideia de um design universal. Desenvolvedores front-end também costumam aceitar sugestões de melhoria.

Acessibilidade não é um tema novo, mas para muitos ainda é uma novidade quando vai além do atributo “alt” nas imagem. Dar importância a isso não é algo apenas sobre ajudar cegos. Sites acessíveis possuem melhor alcance dos resultados. E a cada pequena ação nessa direção, você estará tornando a web um lugar melhor.

Acessibilidade não é um mero custo a mais. Acessibilidade é investimento.