Núcleo de User Experience

Posts Tagged ‘ux

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! 😉

Anúncios

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

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! =)

Opa Digníssimos,

Há exatos dois dias do apagão, uma ironia. Quase acreditamos que o World Usability Day em São Paulo não seria possível, ou pior, não teríamos a oportunidade de homenagear esse dia que marca profissionais da área no mundo inteiro.

(mas passou, né pessoal. parem de twittar. =P)

Confessamos que foi árduo para nós chegarmos em comum acordo sobre o tema, Sustentabilidade. Eram tantas indagações a respeito que estávamos praticamente mergulhados em teorias que conhecíamos de congressos ou movimentações a respeito, mas ainda não encontrávamos o exato encaixe com o que fazemos atualmente na ABD. Sabemos sim, que alguns dos princípios master da usabilidade são o aproveitamento, a prevenção do erro, a otimização do trabalho do desenvolvedor, a experiência do usuário. Mas e aí? Eu posso achar que estou fazendo tudo isso de maneira eficiente apenas digerindo necessidades e requisitos que me foram passados e transformando-os em interface usável, sem me preocupar, por exemplo, qual a finalidade desses sistemas mesmo depois de descontinuados. Uma cilada, Bino.

Encontramos o nosso caminho nas boas práticas do dia-a-dia. E nos fizemos um time de verdade, no qual todos trabalharam com afinco e reaproveitaram as idéias do outro. E nesse ano, nos aproximamos mais do design, tanto quanto ferramenta que modifica o meio ambiente (e por isso mesmo deve ser checada com bastante atenção), quanto pelo design de interação em si.

O conceito de sustentabilidade é bem mais amplo, e apesar das variáveis importantes que já conhecemos, como a reciclagem do lixo e a produção de materiais recicláveis, a própria relação humana e continuidade do trabalho independente da atuação daquele profissional no momento devem ser preservadas.  Design patterns, processos sustentáveis, interfaces que dispensem o uso de material impresso para o usuário, tudo isso importa. A interação humano computador afeta diretamente o ecossistema, estamos falando com software e hardware todos os dias, pessoal. Softwares que controlam a luz que recebemos, por exemplo.

Esperamos assim, que uma mudança de comportamento espontânea ao longo do tempo, sendo construída conscienciosamente pelos profissionais da área, afim de incluir cada vez mais pessoas nessa mudança, entre elas, usuários e profissionais.

Um exemplo feliz disso sendo feito lá fora: http://www.thefuntheory.com/

Our 2 cents,

IMG_1866x

reduza
Evite a dispensa de material físico, imprima só quando necessário.

recicle
Se você imprimir seu trabalho, guarde para reaproveitar o lado limpo e use cartuchos remanufaturados.

reuse
O uso de padrões e de modelos conceituados na web incentiva a consistência visual de soluções de senso comum.

adapte
Prefira empresas que possuem programas de trocas dos equipamentos usados na compra de novos.

recupere
Faça com que os produtos que você projeta sejam úteis mesmo depois do seu uso inicial, quando seriam descartados.

compartilhe
Disponibilize seu trabalho para que mais pessoas usem e aprimorem-no. Diminuindo os recursos individuais no mesmo trabalho.

pense longe
Crie novos componentes que possam ser adaptados a contextos já existentes. Projete sites com largura flexível evitando a troca de monitores.

preserve a herança

Para que links e bookmarks fiquem úteis por mais tempo, mantenha alguns elementos do site, como títulos de urls e imagens

ofereça alternativas
Dê alternativas digitais a necessidades físicas. Caso o usuário precise guardar informações, ofereça algo 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, evitando ações que levem a erro.

Esperamos que todos tenham um WUD bastante enriquecedor.

post_150

Quantas vezes você já teve que fazer ou refazer dezenas de entregas de wireframes  por causa de ajustes só pensados depois? E se você passou por isso, com certeza pensou em algum momento que o esforço envolvido foi grande demais em proporção ao imaginado no início do projeto. Ainda, você pode ter lido sobre (ou trabalhado com) ‘protótipos de papel’ (chamados neste post de ‘esboços’, simplesmente), mas ficou sem saber ao certo como eles se integram e complementam a criação de wireframes.

É aí que entra Bill Buxton e mesmo que seu livro seja voltado prioritariamente a designers de produto, traz algumas idéias – e desafios – para os AI’s e especialistas em UX. Bill Buxton é músico de formação e tem uma carreira de mais de 30 anos em pesquisa sobre os aspectos humanos da tecnologia. É hoje o principal pesquisador do Microsoft Research (centro de pesquisa da Microsoft). Seu último livro, ‘Sketching user experiences’ (‘Esboçando as experiências do usuário’, em tradução livre) de 2007, é uma tentativa de analisar diversos aspectos do design em busca da atividade comum a todo tipo de designer, independentemente da área em que atuem e através desta investigação e demonstração de casos, definir o que seja o “pensar design”. E o argumento de Buxton é que esta atividade é esboçar. Buxton deixa clara a necessidade de esboçar, esboçar e esboçar novamente. A etapa mais arquetípica de um processo de design, traria também economia à organização já que “o custo de planejar – e replanejar – antes de dar sinal verde a um projeto é ínfimo, se comparado ao de um produto mal pensado ou com defeito.”

Buxton sugere que ideação e prototipação sejam processos diferentes. Durante a ideação o objetivo é fazer surgir o maior número possível de idéias encadeadas, enquanto que na prototipação o objetivo é limitar as idéias às melhores. Ok, mas e como deixar claras as diferenças entre essas fases para todos do time? Pode ser uma tarefa bem difícil argumentar a necessidade de um período longo de pesquisa e ideação (em que só sejam produzidos “rabiscos”) para um grupo de colegas em que a maioria não é designer, especialmente se já os seus primeiros wireframes tiverem um nível de fidelidade tal que sugiram um trabalho ‘acabado’ mesmo que tenham sido produzidos apenas para que os demais possam visualizar suas primeiras ideias.

Assim, o livro acaba por nos oferecer um possível caminho da ideação à prototipação, diferenciando as intenções de cada tipo de material produzido, conforme o esquema abaixo:

Do Esboço              ao Protótipo
Evocar                        Ensinar
Sugerir                        Descrever
Explorar                     Refinar
Questionar                 Responder
Propor                         Testar
Provocar                    Resolver
Tentar                         Especificar
Tolerar                       Retratar

“Todos podem contribuir com o design  – e isso evidentemente inclui o usuário do produto final – mas nem todos são designers.”

Para isso serve a fase de ideação: para que ideias possam ser livremente propostas e visualizadas, de forma rápida e barata. Claro que há muito mais nesta fase do que os esboços em si, inclusive o exercício da capacidade de contar histórias e atuar nelas de forma livre a fim de explicar alguma experiência de forma contextualizada ou mesmo a de criar brincadeiras entre todos para ilustrar um ponto. Os esboços seriam válidos na medida em que se mantenham: rápidos, baratos, fáceis de jogar fora e refazer, variados, fluidos, com o mínimo de detalhes e abertos a diversas interpretações. No entanto, o autor lembra que “sem um verdadeiro espírito de time a coisa não anda. É preciso que áreas distintas sejam complementares e todas contribuam criativamente para o projeto.” Somente depois de esses esboços serem colaborativamente discutidos entre todos os envolvidos é que entra a habilidade que só o designer terá, a de saber filtrar todas as contribuições dadas, e esboçar soluções que ofereçam a melhor experiência para o usuário final.

Atualizado em 08/09/2009

Capa do livroSketching User Experiences

Capa do livro'Sketching User Experiences'

Sketching User Experiences: getting the design right and the right design.
William Buxton
Focal Press / Morgan Kaufmann
ISBN – 13: 978-0-12-374037-3

fonte da imagem: http://wireframes.linowski.ca/2009/07/hybrid-stickyframes/

design-pattern

Uau, Benchmark, Analytics, Wireframe, Design Pattern… Uma sopa de palavras pra vocês, alguém aí fez bingo?

O papo agora é design pattern! Mas o que são design patterns? São padrões ou modelos que definem as melhores soluções de usabilidade a problemas comuns ou problemas de acessibilidade em contextos específicos. Esses modelos tornam mais fácil a compreensão de uma interface aos usuários em realizar suas tarefas.

Ok, chega de blá, bla, blá porque existem milhares de sites falando sobre design patterns. Nossa abordagem aqui é mais direta e prática…  e aí? Como aplicar no dia-a-dia a definição de design patterns?

Você, gênio da arquitetura de informação e usabilidade, já deve ter uma receita de bolo pronta, mas nós do NUX também temos nosso step-by-step, confira:

1. Definição do que será pesquisado – é a hora de escolher o foco de pesquisa. Ex.: os footers (mais uma palavra para marcar na cartela de bingo) dos sites que sou responsável estão fora de padrão, cada novo release (bingo!) possui um footer diferente do anterior. Preciso então definir um padrão mega-blaster para os footers! Muito bem garotão, próximo passo.

2. Benchmark – nada mais é do que obter referências, listar todos seus concorrentes, sites com soluções que você acha interessante, levando em consideração as funcionalidades. Depois de criar essa listagem de referências, analise cada caso sobre o que há de legal, ruim e dê uma nota. Ex.: achei interessante os footers da Revista Exame, CNET e desatualizados os footers do Estadão e UOL.

3. Google Analytics – a ferramenta serve para analisar qual o comportamento do usuário em seus sites, não se preocupe com os números absolutos apenas em identificar padrões de busca e acessos. Ex.: No meu site identifiquei que o usuário procura por notícias, acessa mais conteúdo específico para mulheres e como assinar meu serviço oferecido.

4. Wireframe – com base nas informações obtidas em suas referências e o Analytics, agrupe as informações e comece a rabiscar um modelo. Troque muita informação com o gerente responsável pelo projeto que trabalha, troque figurinhas com a equipe de SEO (se existir) a fim de esgotar todas as possibilidades de inputs ao seu trabalho.

wire1

Ex.: Com base no menu de navegação e resultado do analytics resolvi agrupar meu footer em 4 áreas: Navegação primária, conteúdo mais acessado, serviço ao assinante e informações institucionais.

wire2

5. Documentação – Depois que o formato for aprovado entre os interessados documente todas as funcionalidades do novo padrão criado. Crie um wireframe de alta fidelidade e compartilhe o documento entre os visual designers, diretores de criação e etc.

wire3

6. Testes com o novo formato – Como assim fechar um padrão se ele não foi testado? A chance de errar ao se criar um modelo com base no comportamento de seus usuários (via Analytics) e referências que já funcionam (benchmarks) é bem baixa, mas isso não lhe garante 100% de certeza que está indo para o caminho correto.

Todo design pattern está em eterna atualização, é um trabalho contínuo. Vocês notarão que esta não é uma receita fechada de como um footer deve ser, pois para cada produto há uma necessidade e usuários distintos.

Você, arquiteto e ux specialist precisa sempre estar atento as mudanças de cenário e novas ferramentas a fim de trazer valor a seu usuário e consequentemente um produto melhor.

Como aplicar testes de usabilidade? Isso fica para outro post com nossos ninjas do UX.

nux

Em meio a tantas mudanças, a Abril Digital ganha uma área que até então não existia: o Núcleo de pesquisa focado em User Experience (UX) e Arquitetura de Informação (AI).

Provavelmente você já escutou que um sistema precisa ser enxuto, objetivo e claro o suficiente para ser bem utilizado. Afinal, o tempo que se perde pensando ou fazendo uma ação errada é muito frustrante. Chega a dar vontade de falar aquela frase que brasileiro adora dizer – é tudo culpa do sistema – e no pior dos casos, ainda acredita-se que seja falha do usuário.

Tudo isso porque, quando pensamos em uma interface, em muitos projetos, a preocupação com o usuário final só se torna explícita antes da ação de lançamento. Principalmente quando temos um prazo e metas agressivas, tudo que envolve pesquisa qualitativa demonstra um outro lado da realidade. Porém, existem métodos não muito custosos que podem ser agregados a práticas de desenvolvimento ou de produto. Investigar necessidades e manter um estudo prévio centrado no usuário pode evitar retrabalhos e melhorar a produtividade do time.

Um profissional de UX inserido em seu projeto significa o amortecimento das barreiras criadas entre projetistas  e a aplicação de uma interface usável, útil e que proporcione uma experiência significativa. Baseado livremente no processo de design centrado no usuario do C.E.S.A.R. pretendemos manter um fluxo de trabalho interativo através das fases de pesquisa, ideação, prototipação e avaliação.

ciclo

Desde a sua formação, em maio, o NUX já começa a dar os primeiros passos. Contamos com 3 pessoas e as atividades diárias são atualmente baseadas em demandas e prioridades, as quais complementamos de acordo com a necessidade de cada projeto e o tempo que temos para executar as melhores práticas na área.

O compromisso do núcleo é a entrega de uma interação de qualidade antes do Product Backlog. Para garantir isso, o grupo participa e atua em definição de requisitos, sketches, storyboards, paper prototype e testes com usuários.

A área entende a estratégia de cada produto junto com os PO’s e avalia as necessidades frente a seu público alvo, através de interações contínuas e acompanhamento em todas as fases de vida de um projeto.

Como esse assunto rende bastante, fica apenas um gostinho inicial. Para quem tem interesse na área, pretendemos manter este blog e atualizá-lo semanalmente. No próximo post, iremos abordar o estudo de personas e aguardamos a sua visita. Contamos com você, leitor, para que siga o propósito de design centrado no usuário em seu projeto e o NUX possa sempre ajudar em seus estudos.


NUX no Flickr

Twitter: Siga-nux

Anúncios