Núcleo de User Experience

Aproveitando o ensejo do último post, resolvemos juntar num só lugar várias referências pesquisadas ao longo dos estudos sobre nossos amigos formulários. =) Tem coisa nova, tem coisa não tão nova assim (mas, que ainda faz sentido), tem um pouco de tudo, um começo para quem está confuso na hora de projetar campos, mensagens de erro, feedback, dicas de preenchimento, fluxo…

No blog de Luke Wroblewski, um post sobre perguntas excludentes. E um pouco mais sobre o livro que deu origem ao post anterior.

A smashingmagazine publicou dois (parte 1 e parte 2) posts sobre padrões em formulários de criação de conta. São resultado de uma pesquisa com 100 sites cujo sucesso depende do preenchimento do famigerado. São abordados, entre outras coisas, posicionamento na página, layout, alinhamento de rótulos e campos, melhor rótulo para o link, mensagens de erro e tooltips.

Encontramos também considerações de um estudo de eyetracking em CXPartners. E uma proposta ousada de sign up e log in em um passo único, sem distinção entre os dois “tipos de usuários”.

Para quem trabalha com mobile… formulários em dispositivos móveis na smashingmagazine.

O ponto de vista da Google, relacionando o desenho de formulários com taxa de conversão.

Inspire-se com alguns patterns em PatternTap.

O Nux espera ter sido útil, objetivo e simples o suficiente com esse post, assim como nós esperamos que os formulários sejam!😉

Diariamente me deparo com o desafio de elaborar formulários que sejam fáceis de entender o seu preenchimento e que atendam as inúmeras necessidades de negócio que me são apresentadas.

Por que é tão importante pensar em design de formulários? Aqui vou citar Luke Wroblewski em seu livro Web Form Design Web form design Book nele o autor diz, “Só o fato das pessoas não gostarem de preencher formulários deveria ser motivo suficente para que nos preocupássemos.” Quantas vezes nos deparamos com eles e quase desistimos de terminar um processo? A questão é que, dependendo do caso,o usuário só os preenche quando não tem nenhuma outra alternativa para completar a tarefa ou quando percebe que a vantagem é maior do que o esforço.

Mas continuando, Luke nos lembra que para realizarmos grande parte das interações online, seja com outras pessoas que interagem conosco em redes sociais, para fazermos compras ou utilizarmos algum tipo de aplicativo baseado na web, lá estão os tão indesejáveis formulários. Enfim, chega a ser inevitável não falarmos sobre eles.

Fato é que as regras de negócio podem e muitas vezes influenciam as decisões de interação e geralmente não o contrário. As vontades do usuário e o seu cognitivo não são levados em conta. No livro, pede para que pensemos seriamente sobre como planejar a experiência dos usuários, através de seu engajamento gradual, com uma solução cuidadosamente planejada.

Vejo pela web diversos IU Patterns para cada tipo de campo, boas práticas disso e daquilo, JQuery , pipocam “soluções” para nos ajudar a elaborar uma interação mais atraente, mas se fosse apenas copiar e colar, não seria tão importante avaliarmos o seu impacto sobre a experiência dos usuários no seu dia-a-dia.

Seu livro não é apenas mais um Guia de Boas Práticas, ele nos lembra que o engajamento dos usuários depende do controle que mantemos sobre experiência nos suportes que desenhamos para seu uso e sua leitura é fundamental para nos ajudar a ampliar este entendimento. Fica aqui a dica!

No dia 29 de janeiro, o NUX lançou a pergunta: E o que os campuseiros sabem sobre Arquitetura de Informação ? Aproveitando o clima tecnológico da semana da Campus Party, o Nux quis saber quão conhecida está nossa área (AI, UX e afins) entre o pessoal de tecnologia (muitos deles desenvolvedores web, inclusive…).

Um pouco sobre quem respondeu a pesquisa

Perfil dos participantes

Perfil dos participantes

Infográfico de Silas Augusto


Sobre usabilidade

Apenas 6,67% não soube responder o que é usabilidade. Com o restante houve quase um consenso quanto ao o que é isso afinal… Em quase todas as definições enviadas lemos: facilidade de uso de uma interface (física ou não) e uma forma de melhorar a produtividade.

No longínquo 2005, a Amyris Fernandez (especialista em usabilidade) fez uma abordagem bem legal sobre o tema no WebInsider. Apesar de antigo, o conteúdo ainda é muito relevante. A Wikipédia também reúne um conteúdo interessante, citando a famosa ISO 9241-11: “pela definição da International Organization for Standardization, usabilidade é a medida pela qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico”.

Mas, a grande questão é: fica a cargo de quem aplicar a usabilidade nos projetos? E é nesse quesito que as opiniões divergem…

O que o pessoal respondeu

Respostas dos participantes

Respostas dos participantes

Infográfico de Silas Augusto

Centrado no usuário. Esse foi o mais próximo que chegamos…

Concluímos então que o problema está em ligar a teoria a prática. Ok! Sabe-se o que é usabilidade, mas e aí? Quem faz isso acontecer? Como faz isso?

Primeiro, algumas respostas básicas:
Não, não somos designers
Não, não somos nós que definimos cor, tamanho e tipo da letra
Não somos nós que criamos um ícone XYZ
Não, não somos um ‘webmaster’ (o famigerado ser mitológico que fazia TUDO nos primórdios da web)
Não temos que saber minúcias da implementação de infraestrutura e relacionados
Também não precisamos codificar

Sim, somos nós que planejamos a navegação, a hierarquia da informação, rótulos, design patterns
Nós que vamos a campo conhecer o usuário, seus hábitos, seus anseios…
Também representamos aquela vozinha inconsciente que, de tempos em tempos, fazem as pessoas envolvidas nos projetos lembrarem que láááááááá no final vai ter uma pessoa (sim, parece estranho, mas é a realidade, meu caro) usando isso que estão desenvolvendo agora.

E o mais importante… Não, não estamos competindo com ninguém! Cada um tem seu papel no processo criativo, cada um tem seu momento. O nosso é facilitar o diálogo, permitir a comunicação, envolver desenvolvimento e criação desde o início com seus inputs sempre ricos. Criar o melhor produto, revolucionar…

Para nossos amigos tecnólogos, uma boa definição de um Arquiteto de Informação seria: um analista de sistemas que vê o mundo com olhos de designer, que levanta os requisitos do sistema do ponto de vista do usuário e não da tecnologia disponível. Não se pensa uma solução porque ela é mais fácil de implantar, porque é a mais barata, por que está na moda ou é a mais bonita, mas porque é a que gera melhor experiência para o usuário.

Na definição da Wikipédia temos algo semelhante a isso:

…Não por acaso, a Arquitetura de Informações guarda muitas semelhanças com aquela sua ancestral (Arquitetura tradicional). A principal delas é a característica de ser centrada no ser humano: como a informação só pode existir em “comunidades de sentido”, a Arquitetura de Informações trata primeiramente de pessoas, buscando assegurar-lhes conforto e, somente depois, de tecnologia.

Bom, é isso… Esperamos ter elucidado um pouco essa questão! E você o que acha?

Abs!

Outros posts sobre o papel do AI

É isso aí, Peter Morville com um bando de amigos e empresas associadas ao IXDA estão promovendo algo que nós aqui do Brasil também questionamos muito:

Afinal, o que é AI? Por que é tão importante? Qual o real significado de Arquitetura de Informação para você?

A fim de chegar a uma “definição definitiva” essa galera resolveu dar prêmios às melhores definições, seja em 140 caracteres, vídeo, foto, texto ou mesmo diagramas. Entre os prêmios estão livros autografados, cursos on-line, inscrições para os próximos eventos e bufunfa, minha gente – sim! Mil doletas para a melhor definição, $500 para o vídeo mais criativo e outros $500 para o melhor diagrama.

Para participar basta enviar seu material (limite de 3 propostas) no grupo do flickr “Explain IA” com a tag “explainia” até dia 11 de Fevereiro de 2010. O bacana é que a promoção tem validade para os arquitetos do mundo inteiro!

Mais detalhes acessem o grupo no flickr:
http://flickr.com/groups/explainia/

Abaixo uma amostra divertida do que a galera anda produzindo, corram!

Explain IA

Aproveitando o clima tecnológico da semana. O Nux quer saber o que os campuseiros sabem da nossa área.

Se você é da área de tecnologia, acesse o questionário e nos ajude nessa empreitada. Em alguns dias postaremos o resultado aqui! =)

Abs!

No dia 12 de novembro de 2009 nos reuníamos no Auditório da Abril para o World Usability Day afim de discutir um tema importante: Design para um mundo Sustentável. Pensando nisso, o NuxAbril promoveu duas ações incentivando a conscientização durante o evento: uma dinâmica criativa na qual cada participante deixava um recadinho em nossa árvore e a distribuição de marcadores de página com dicas de sustentabilidade.

Para começar o ano com uma reflexão sobre nosso papel enquanto Arquitetos de Informação, Designers de Interação, Especialistas em experiência do usuário e, acima de tudo, humanos… reunimos todos os devaneios deixados na árvore do NUX nesse dia… Enjoy! =D

Ande, caminhadas fazem bem à saúde. Você aproveita e conhece novos lugares!

Pense sempre no futuro. Cuide da noosfera.

Adapte: prefira empresas que possuem programas de trocas dos equipamentos usados na compra de novos.

Desligue o motor do carro se for ficar mais de 90 segundos parado. A economia vai para o seu bolso e ajuda os meus pulmões.

Use rascunho! Imprima somente o necessário!

Faça xixi no banho

Pense na acessibilidade + usabilidade = inclusão social (Wanessa – Abril Educação)

Use menos seu carro! Ande quando possível!

Faça o bem. Plante mais. Economize. Ande mais. Beba água.

Interfaces bem planejadas reduzem o tempo de processamento de dados. Pense nisso!

Design já pressupõe equilíbrio/sustentabilidade. O bom projeto objetiva a melhor performance e resultado com o menor impacto. #prontofalei

Pense usabilidade e sustentabilidade em todo o ciclo de desenvolvimento.

Pense em soluções práticas! Navegação objetiva reduz o tempo do usuário em uma única tarefa. (Pri NuxAbril)

Escove o dente com a torneira fechada.

Pedale http://www.smbikers.com.br/ mais!

Please! Use somente o necessário – não consuma além disto – recicle, reuse, minimalize, doe o que se lhe tornou supérfluo. Pode ser útil para muitos em África até água falta, por exemplo! http://www.baconsulting.com.br/

Crie tendências sustentáveis e compartilhe! Cada vez que fizer algo assim no seu trabalho, divulgue ou divida com os outros. (Tássia NuxAbril)

Pense antes de fazer.

Traga seu copo/xícara/garrafinha para beber água. Trate bem TODOS os seres vivos, inclusive as plantas.

Diminua o uso de copos plásticos, prefira copos de vidro!

Desligue o monitar após desligar o PC! =)

Imprima menos. Compre im kindle (e me dê um tb) @elisavolpato

Usar menos saco de papel da GRSA lanchonete para ensacar o lanche

Plante uma… quer dizer, várias árvores! =)

O lixo do coffe break não está sendo coletado separadamente.
(Olha a bronca… =/ Mal ae! Fica a dica para os promotores do ano que vem e vale ressaltar que o Abril faz coleta seletiva em todo seu prédio…)

“Hackeie” os sistemas de “furnas” e promova apagões! @econstantino
(Olha o responsável pelo apagão de 10/11…)

Use DDA e não receba mais contas em papel
(Seria fantástico se funcionasse… =()

O que você pode fazer por um mundo melhor?

Use a bateria do seu note até o fim! @econstantino

As idéias que merecem, além de lidas, serem vistas! =)

Use mais escada =)

Faça o bem. Plante mais. Economize. Ande mais. Beba água.

Pense antes de fazer.


Já os marcadores -totalmente incorporados aos participantes- traziam os seguintes apelos:

reduza
Evite a dispensa de material físico, faça impressões só quando necessário.
recicle
Se você imprimir seu trabalho, lembre-se sempre de guardar as folhas para reaproveitar o lado limpo e utilize cartuchos remanufaturados.
reuse
O aproveitamento de padrões e de modelos conceituados na web incentiva a consistência visual e as soluções utilizadas pelo senso comum.
recupere
Procure fazer com que os produtos que você projeta sejam úteis mesmo depois do seu uso inicial, quando seriam descartados.
compartilhe

Disponibilize seu trabalho a fim de que mais pessoas possam usá-lo e aprimorá-lo. Assim, diminuímos os recursos individuais para o mesmo trabalho.
pense longe
Certifique-se de que os novos componentes possam ser adaptados a contextos já existentes. Projete sites com a largura flexível para evitar a troca de monitores.
preserve a herança
Mantenha alguns elementos do site, tais como títulos de urls e imagens, para que links e bookmarks possam permanecer úteis por mais tempo.
ofereça alternativas
Dê alternativas digitais a necessidades físicas. Se for necessário que o usuário guarde informações, ofereça uma ferramenta que permita o armazenamento dos dados.
ajude
Ofereça suporte contínuo e sistêmico aos seus usuários e estimule-os a aprender sempre, para evitar a repetição desnecessária de ações que levem a erro.

[wikipedia] Usabilidade é um termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante.

Que em 2010 a facilidade na realização da tarefa seja realmente tão aplicada quanto essa definição. Um 2010 ainda melhor que 2009! =D

Resultado do teste de usabilidade

Como trabalho de conclusão de uma disciplina da pós em Arquitetura de Informação, fizemos um teste de usabilidade com o aplicativo Brasileirão Placar.

Foi um teste bem informal com apenas dois participantes (um pré-teste e um teste), mas que nos trouxe um feedback bem interessante sobre o aplicativo. Além de confirmar algumas limitações que já conhecíamos, os usuários questionaram outras coisas que não havíamos previsto. Além disso, é totalmente diferente testar algo que você tenha participado do desenvolvimento, porque você conhece os limites do sistema e o porque deles, foi uma experiência muito rica e gratificante.

Para o pré-teste, o usuário selecionado não possuia iPhone, o que trouxe uma outra visão sobre a experiência com o aplicativo e, para o teste um outro usuário que já estava familiarizado com a proposta de interação do aparelho.

Testamos grande parte das funcionalidades do aplicativo, exceto a tela de Jogos (Ao vivo e Ficha de Jogo).

Dentro da disciplina, as etapas para elaboração do teste foram:

– levantar o público-alvo
– conhecer o aplicativo (para os integrantes do grupo que não participaram do desenvolvimento da app)
– elaborar o roteiro de teste de acordo com a análise heurística praticada anteriormente
– aplicar o teste afim de ajustar o roteiro para o teste final
– refinar o roteiro
– aplicar o teste
– tabular as informações coletadas durante o teste
– elaborar uma lista de prioridades (pode ser também um relatório ou uma apresentação)

O que colhemos de informação do usuário resultou na tabela de prioridades lá de cima.

Espero que esse post elucide um pouco o tema testes de usabilidade…

Abs! =)

NUX no Flickr

Participantes EBAI 2009

Carol e Guilhermo

Maria Ercília

EBAI 2009

EBAI 2009

EBAI 2009

Mais fotos

Twitter: Siga-nux