O mito da rolagem

by with No Comment Arquitetura de informaçãoDesignUsabilidade

 

Quem nunca tentou espremer o conteúdo ao máximo para que ele ficasse acima da linha de rolagem que atire a primeira pedra. E quem nunca refez uma diagramação quando descobriu que era impossível evitar o inevitável scroll? Também não devem ter sido poucas as vezes em que foi preciso justificar para o cliente o uso da malfadada rolagem.

O estudo feito pela ClickTale com 120 mil páginas da web entre novembro e dezembro de 2006 traz algumas justificativas e respostas para que seus sites não fiquem limitados a uma determinada resolução. Importante destacar que a pesquisa incide apenas sobre a rolagem vertical. Seguem alguns números, como o cliente gosta:

  • 96% das páginas da web possuem rolagem
  • 76% dos usuários que encontram páginas com rolagem fazem uso da mesma, pelo menos pelas 2 ou 3 páginas abaixo da resolução
  • 23% dos usuários costumam fazer a rolagem até o final, independente do tamanho da página

O estudo ainda faz algumas recomendações:

Não tente espremer a página para deixá-la mais compacta. O benefício para os visitantes é mínimo. Caso a página tenha scroll, a maioria irá usá-lo

Já que a rolagem é um mal necessário, invista em um layout que facilite o escaneamento das áreas mais baixas da página (essa também é uma dica de outro estudo, o Eye Track III)

MAIS SOBRE O TEMA

Unfolding the fold
Blasting the mith of the fold
The fold is an unecessary limitation

Agora é navegar e rolar (não resisti ao trocadilho)!

Padrões para a construção da biblioteca de padrões

by with No Comment Arquitetura de informaçãoIdeias
 Silvia Melo

A organização de uma biblioteca de padrões é algo que tem tirado o meu sono há algum tempo. Sempre que preciso de um determinado componente, às vezes tão simples quanto um “enviar para amigo”, saio numa verdadeira cruzada em busca dos projetos onde ele foi utilizado. Mas a jornada não pára por aí: é também preciso checar os resultados obtidos, o desempenho nos testes de usabilidade e as novas referências que irão garantir que o recurso continua novo e atualizado. Essa expedição cheia de idas e vindas acaba esgotando o prazo da grande estrela do projeto: a inovação.

Felizmente as desculpas para a inexistência de uma biblioteca de padrões estão se esgotando. Os novos softwares utilizados para o desenvolvimento de wireframes (Axure, iRise e Omnigraffle, entre outros) já permitem a organização de componentes em “libraries”. Eles não dão o peixe, mas são instrumento para uma boa pesca. Achei um artigo interessante da User Interface Engineering que ensina justamente como pescar. O autor Jared M. Spool listou algumas dicas para quem está começando a organizar a própria biblioteca de padrões. Destaco aqui alguns destes “padrões” propostos por Spool:

Nome da seção – apesar de óbvio e aparentemente simples, esse início é determinante para o sucesso de sua biblioteca. Evite nomes criativos. Procure utilizar os termos mais recorrentes do mercado para agrupar componentes simulares: busca, login, menus, grids, navegação, seleção, customização, auto-completar…

Descrição da seção – é muito importante dizer o que esta seção engloba. Caso o nome da seção tenha deixado alguma dúvida, a descrição vai eliminar qualquer vestígio dela

Contexto de uso – informe em que situações o componente pode ser aplicado. Um processo de check-out, por exemplo, pode atender a qualquer finalização de pedido, não sendo necessariamente uma loja virtual

Onde foi utilizado – indique que outros sistemas utilizaram a mesma solução, para que os desenvolvedores possam vê-la aplicada

Especificações – Nos casos em que os padrões pertencem a projetos específicos de uma mesma empresa, vale a pena detalhar tamanhos de fontes, dimensões e cores

Seções relacionadas – o auto-completar, por exemplo, pode ser aplicado a uma busca ou a um formulário, entre outros componentes. Faça estes relacionamentos em sua biblioteca

Histórico – quem atualizou e quando atualizou são informações preciosas em um ambiente colaborativo

Testes de usabilidade – reporte os resultados de componentes que tenham sido testados. Spool inclusive recomenda que sejam colocadas informações como: período em que o teste foi realizado, número de testadores e observações feitas por eles

Fórum de discussão – permita que os desenvolvedores façam comentários na biblioteca. Desta forma o processo do design se manterá vivo e atualizado

E para ver como tudo isso pode ser aplicado na prática, faça um tour pelas bibliotecas do Yahoo! e de Martijn van Welie, Ph.D. em Interação Homem-Computador. São ótimos exemplos de como organizar seus componentes e soluções.

A biblioteca de padrões não deve ser um projeto pessoal, mas sim um trabalho em constante progresso de toda a empresa. Arquitetos, designers, analistas, engenheiros de programação e desenvolvedores em geral devem colaborar na geração do conhecimento. A biblioteca não reflete necessariamente tendências de mercado, mas sim a cultura da organização.

BIBLIOTECAS DE PADRÕES NA WEB

LEITURA RECOMENDADA

LITERATURA SOBRE O TEMA

:)

Usuária carente

by with No Comment Arquitetura de informaçãoIdeiasInteratividadeROIUsabilidadeUsuário

 

Por Elisa Volpato

Fiquei um tempão pensando em como seria minha estréia no blog, e conclui que teria de escrever sobre alguma coisa que entendo bem. Então resolvi começar reclamando, como usuária. Por que acho que os sites por aí deviam prestar mais atenção em mim.

Em minha breve vida de moça emancipada, já passei pela situação várias vezes: procurar um apartamento para morar. Agora até meus amigos resolvem me pedir palpite quando querem sair da casa dos pais. Se tem uma coisa que percebi é que lugar é um fator muito importante para quase todo mundo. E lá vou eu no google encontrar sites de imóveis.Então eles me perguntam: “Quer morar onde?” De cara, imagino meus amigos dando pelo menos cinco tipos de resposta diferentes:

  1. “Perto do metrô, na linha verde.”
  2. “Perto da faculdade e do trabalho.”
  3. “Tem que ser no bairro de Pinheiros”.
  4. “Ainda não sei, mas quero que seja na zona sul.”
  5. “Em um lugar barato e bacana.”

Já o modelo de pesquisa mais comum entre os sites que encontrei é filtrar por cidade, região, zona e bairro -nessa ordem. Só que esse tipo de pesquisa atende apenas dois dos meus cinco amigos. O amigo número 1 teria de procurar (em um mapa!) todos os bairros atendidos pela linha verde, ou escolher entre esses bairros aqueles cujo nome fosse mais simpático. Já o número 2 teria de traçar um ponto médio entre a faculdade e o trabalho e buscar ofertas em todos os bairros próximos desse ponto. O número 5 provavelmente viria me pedir uma sugestão de bairro barato e bacana.

Mesmo quem faz uma busca orientada por bairros nem sempre tem bairro específico em mente. E mesmo que tenha, como saber ao certo onde acaba e termina cada bairro? Qual a divisão exata entre Pinheiros e Vila Madalena? Onde começa e termina a zona sul? Isso sem falar na confusão entre o bairro de verdade –Jardim Paulistano- e o distrito (seria Jardins? Até eu me confundi agora).

No começo eu criei estratégias para lidar com as dificuldades: mapas impressos onde marcava a localização de cada oferta, consulta a sites de conteúdo para descobrir os bairros mais interessantes, busca no Google Earth para ver quais eram as ruas mais verdinhas do bairro que eu tinha escolhido. E comecei a pensar em como seria um site de busca de imóveis que realmente prestasse atenção à forma como eu -e meus amigos- fazíamos a pesquisa:

  • Pesquisa baseada em um ponto: eu tenho uma referência fixa, perto da qual gostaria de morar. Mas não sei exatamente os limites de bairro e região ali por perto. Então indico um ponto em um mapa e peço por imóveis em um raio de 5 km.
  • Pesquisa baseada em dois pontos: eu informaria o endereço da faculdade e do trabalho, e o sistema me traria os imóveis que estão na área abrangida pelos dois.
  • Resultados de pesquisa mostrados em mapa. Já montei várias vezes mapinhas mentais -e impressos- para entender onde ficava cada opção de imóvel. Bem que um site poderia fazer isso para mim!
  • Pesquisa baseada em serviços e lazer: pesquisar por apartamentos próximos do metrô ou de parques.
  • Por fim, conteúdo sobre os bairros de cada cidade. Ajudaria muito integrar o site de imóveis com um guia de entretenimento -daí os resultados da pesquisa já mostrariam a densidade de bares, de parques e de escolas em cada local. Ruas mais roxinhas = ruas mais badaladas. Ruas amarelas = grande concentração de comércio. Mais ou menos como um SimCity. Além das cores, os moradores do local poderiam fazer comentários sobre ruas e locais, do tipo: “Essa vila é muito fofa! Veja essa foto aqui”.

Alguém conhece algum site assim? Alguém quer me ajudar a fazer um? :)

A usabilidade pode influenciar no preço das ações de uma empresa?

by with No Comment Arquitetura de informaçãoDesignROIUsabilidade

Um estudo divulgado pelo Nielsen Norman Group em 2003 já havia mostrado como a usabilidade impacta positivamente nos resultados de um site. Com um redesign bem mais centrado no usuário, os sites das 42 empresas envolvidas no estudo registraram um aumento médio de 135% nas métricas desejadas – tráfego, conversão de vendas, performance do usuário e uso de funções específicas.

A UX Magazine divulgou no começo do mês os resultados de um estudo também focado no retorno de investimento em usabilidade. Desta vez o objetivo era saber o quão as iniciativas de uma empresa no setor seriam capazes de refletir no preço de suas ações na bolsa de valores.

Para isso a própria UX Magazine investiu US$ 50 mil em ações de 10 companhias que tinham realizado recentemente grandes trabalhos de user experience (aqui foram estabelecidos alguns critérios). O resultado deste UX Fund, como foi batizado o investimento, mostra o que aconteceu com essas ações após 1 ano:

Research In Motion (RIMM) + 207.97% $10,387.44
Apple (AAPL) + 131.81% $6,607.96
Google (GOOG) + 47% $2,248.40
Nike (NKE) + 38.65% $1,921.32
Electronic Arts (ERTS) + 10.62% $530.16
Yahoo (YHOO) + 15.61% $775.20
Target (TGT) – 2.09% ($104.16)
Netflix (NFLX) – 4.82% ($239.40)
Progressive Insurance (PGR) – 23.27% ($1,165.41)
JetBlue Airways (JBLU) – 29.36% ($1,476.00)

Na minha opinião, apesar de lucrativo (o portifólio cresceu quase 40%) o resultado do estudo ainda é pouco conclusivo, uma vez que vários fatores podem influenciar no preço das ações – a Apple, por exemplo, lançou o iPhone neste período.

Nas palavras da UX, o estudo provou que “usabilidade não é tudo”. Muitas empresas, apesar de atenderem bem os seus usuários online, estão sujeitas a realidade do negócio. Este foi o caso da companhia aérea JetBlue Airways, prejudicada por uma forte tempestade de inverno bem no Dia dos Namorados.

De qualquer forma temos aqui mais alguns argumentos (se é que é preciso) para vender a usabilidade como uma importante (mas não única) aliada na geração de resultados. Não deixem de ver o estudo completo.

Algumas razões para cair de amores pelos protótipos navegáveis

by with No Comment Arquitetura de informaçãoPrototipação

Se você, assim como eu, nasceu na década de 70, provavelmente já teve contato com uma máquina de escrever. Este, que foi o principal instrumento de trabalho dos profissionais de comunicação durante muito tempo, forçava os usuários a escrever de forma doentiamente planejada, na maioria das vezes pressionados pelo medo de errar. Realocar uma frase em outro parágrafo significava ter que bater novamente toda uma página – 1.400 toques a mais (considerando uma lauda de 20 linhas com 70 toques cada) e cerca de 10 minutos perdidos (no caso de um datilógrafo mediano). O editor de texto, com os recursos de apagar, copiar e colar causou uma verdadeira revolução na vida de milhões de pessoas, sobretudo de escritores e de jornalistas.

Vejo uma revolução bem parecida para os arquitetos de informação com a chegada dos programas que geram protótipos (e/ou wireframes) navegáveis em HTML. Nessa lista incluo o Axure, o iRise e o OmniGraffle, entre outros que listarei adiante. Não é mais necessário dedicar tempo e esforços para organizar slides, fazer ajustes em um grande volume de telas ou até mesmo publicar centenas de comentários sobre o fluxo de navegação. A preocupação agora é com o que realmente interessa – o design centrado no usuário.

Ok, o assunto não é novo. Mas como é cada vez mais recorrente alguém me perguntar sobre as vantagens deste tipo de protótipo vou pontuar algumas delas. Mais do que vantagens, são verdadeiras razões para cair de amores por estes softwares:

Experiência de navegação – Este item vem no topo da lista porque acredito que é aqui onde está o maior ganho do protótipo em HTML. Por ser todo navegável ele simula realmente o que acontece a cada clique, resultado que víamos somente depois que o projeto já tinha passado pelo design e pela interface.

Dimensionamento do projeto – Fica bem mais fácil entender quais são as telas-tipo (ou templates) com o uso dessas ferramentas. No Axure, por exemplo, é possível acessar com facilidade a lista de páginas e até mesmo gerar um mapa (também navegável) a partir dela.

Componentização – O bom arquiteto tira proveito disso. Não é preciso desenhar novamente um fluxo de “enviar por e-mail” ou de “cadastro” a cada projeto que eles aparecem na matriz de escopo. Os softwares para desenvolvimento de wireframes permitem a criação de verdadeiras bibliotecas de padrões, que podem ser reaproveitadas com o mínimo de ajustes em outros trabalhos. Isso também dá uma grande agilidade na execução do protótipo.

Documentos mais enxutos (ou o fim do trabalho escravo) – Em um passado não muito distante cheguei a criar wireframes em PowerPoint com mais de 2.000 slides para simular fluxos e cenários diversos – uma documentação burra, pesada e de eficácia totalmente discutível que ainda me causava algumas lesões por esforços repetitivos.

E o cliente? – Pelas minhas estatísticas esta é a pergunta número 1. Devo ressaltar que só tenho tido resultados positivos. Os clientes não só estão compreendendo melhor a proposta como também estão aprovando mais rapidamente os trabalhos, com solicitações de ajustes cada vez menores. Alguns clientes inclusive já pediram (e pagaram!) para que documentações feitas inicialmente em PowerPoint fossem convertidas para HTML.

Fácil aprendizado – Quando a diretoria da empresa em que trabalho autorizou a compra do Axure ficamos com receio de demorar a aprender o software. Esse medo foi dissipado já no primeiro dia de uso da ferramenta – medo seria ter que voltar a usar o PowerPoint. O suporte do Axure, por exemplo, é muito bom: no site da empresa há tutoriais e um blog que realmente convida o usuário a compartilhar críticas e sugestões. Muitas melhorias já foram feitas partir delas.

Designers e programadores menos irritados – Abrir um wireframe em Visio ou PowerPoint era, para os desenvolvedores, uma experiência semelhante a de ler “Os Sertões”, de Euclides da Cunha, em mandarim. Além de chato, muitas vezes o documento gerava uma série de dúvidas que simplesmente travavam o trabalho, a maioria delas referente ao fluxo de navegação. Por não conter libraries, os documentos em Visio e Powerpoint também traziam erros de consistência e muitas páginas escapavam da revisão, aumentando a incidência de erros. Para os programadores, um grande recurso destes programas é a geração da especificação técnica.

Reaproveitamento de código – Aqui vale a pena fazer um alerta: protótipo é protótipo, código é outra coisa. Não encare este tipo de documento como um avanço na etapa do desenvolvimento. Os recursos de programação dessas ferramentas são limitados e geram códigos feios, sujos e gigantes, para não ser mais explícita.

Most Contagious – Branding, Tecnologia e Cultura Popular

by with No Comment Arquitetura de informaçãoDesignInteratividadeMost ContagiousUsabilidade

A Most Contagious é uma publicação anual da Contagious Magazine que elege e agrupa as melhores iniciativas do ano em relação a Branding, Tecnologia e Cultura Popular. Uma das melhores curadorias do mercado publicitário, na minha opinião.

Interessante o que a presença de categorias como “projects not campaigns”, “social business” e “service design” diz sobre o caminho que as marcas estão seguindo.

É só ler um pouco sobre as campanhas selecionadas para perceber que existem alguns movimentos acontecendo simultaneamente nesse mercado:

  • Marcas querendo desenvolver mais produtos a longo prazo, e menos campanhas a curto prazo.
  • O grande diferencial dos produtos oferecidos pelas marcas sendo cada vez menos o produto físico em si, palpável, e cada vez mais o serviço que vem embutido nesse produto.
  • As “Redes Sociais” já invisíveis, obrigatórias, requisito mínimo de qualquer produto ou campanha online ou offline – e não um termo/budget/departamento à parte.
  • O Service Design ajudando fortemente na materialização dessas iniciativas, por ser uma das disciplinas que mais entende de criação de produtos digitais verdadeiramente relevantes.
  • As marcas tentando agir como transformadores da cultura popular, tentando promover conversas de bar, tentando resolver tensões culturais que existiam há anos ou tentando criar novas dessas tensões.
  • As marcas querendo ter a credibilidade natural das pessoas e as pessoas querendo ter a credibilidade formal das marcas.
  • A tecnologia como conexão inevitável de todos esses pontos.

Não dá pra olhar para todos esses movimentos e para todos os cases selecionados no Most Contagious e não ficar animado com a importância que o Design de Interação tem e continuará tendo nesse processo. Great times are coming 🙂

Link: Most Contagious 2011

Fonte: http://arquiteturadeinformacao.com/

Um olhar moderado sobre o eye-tracking – 23 lições e 1 alerta

by with No Comment Arquitetura de informaçãoDesignInteratividadeUsabilidade

O artigo “Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies”, escrito por Christina Laun e publicado na primeira quinzena do mês, está fazendo sucesso no meio. Ele traz um compilado do Eye Track III, estudo realizado pelo The Poynter Institute em parceria com a Eyetools Inc. e o Estlow Center for Journalism and New Media. Em 2003 esse time de pesquisadores fez com que 46 pessoas (homens e mulheres entre 19 e 60 anos) olhassem para 10 diferentes publicações online, entre elas o The New York Times, o The Wall Street Journal e o MSNBC.