8 de fev. de 2012

Mito - Ícones melhoram a usabilidade


Muitas pesquisas têm mostrado que os ícones são difíceis de memorizar e são muitas vezes, altamente ineficientes. A barra de ferramentas do Microsoft Outlook é um bom exemplo. O que ajudou foi a introdução de rótulos de texto ao lado dos ícones, pois eles resolveram as questões de usabilidade e as  pessoas começaram a usar a barra de ferramentas. Em outro estudo, a equipe da UIE observou que as pessoas se lembram da posição de um botão em vez da interpretação gráfica da função.

Na maioria dos projetos, é muito dificil achar ícones que representem de forma clara e é necessário fazer muitos testes para que se encontre um desenho adequado à função e para coisas abstratas, ícones raramente funcionam bem.

Resultados de pesquisas e artigos sobre a utilidade dos ícones:
• UIE conduziram dois experimentos para testar como as pessoas usam ícones. Primeiro eles mudaram as imagens de ícones em uma barra de ferramentas, porém mantiveram cada ferramenta no mesmo local. As pessoas rapidamente se adaptaram a esta mudança. Depois, eles mantiveram as imagens  e e trocaram oas ferramentas de seus locais habituais. Essa mudança confundiu os participantes e causou problemas de acesso aos links que os usuários estavam buscando.
• Michael Zuschlag diz que "ícones, contrário à intuição, não necessariamente ajudam o usuário a encontrar um item de menu melhor do que um rótulo de texto sozinho (ver Wiedenbeck S 1999. O uso de ícones e etiquetas em um programa de aplicação do usuário final: um estudo empírico de aprendizagem e Tecnologia Comportamento de retenção, e da Informação, 18 (2), p68-82). Não vale a pena. " Ele também discute a sua opinião sobre UX Exchange.

Onde os ícones agregar valor:
• ícones universalmente compreendidos funcionam bem (ou seja, imprimir, fechar, play / pause resposta,).
• Os ícones podem servir como bulletpoints, estruturando uma página web (ícones de arquivo ou seja, tipo de PDFs, DOCs, etc.)
• ícones bonitos e objetivos podem deixar a página mais agradável de navegar.
http://uxmyths.com/
Mais informações

Mito - Você não precisa do conteúdo para criar um site


Muitos designers criam wireframes e composições com "lorem ipsum" como texto de enchimento. Usar texto fictício muitas vezes resulta em um design esteticamente agradável, mas irrealista. O que é pior, ele cria a ilusão de que o conteúdo é secundário.

O fato é que os usuários vêm para o conteúdo, e não para o design. Conteúdo é de longe o elemento mais importante no design de interface do usuário. Uma página web com uma estrutura simples, mas com um conteúdo de qualidade funciona muito melhor em testes de usabilidade do que um layout layout agradável, com texto parágrafo.


Algumas pesquisas sobre o assunto:
• Luke Wroblewski argumenta que "usando conteúdo simulado ou informações falsas no processo de design Web pode resultar em produtos com suposições irrealistas e falhas de projeto potencialmente graves." Ele também explica como estes projetos geralmente falham quando o conteúdo real é adicionado.

• Em uma entrevista, Kristina Halvorson, especialista em conteúdo, argumenta que as decisões de projeto devem ser conduzidas pelo conteúdo, e todo o layout deve ser criado para apoiar o conteúdo.

• Em seu livro Getting Real, especialistas em web 37signals explicam quão perigoso pode ser utilizar simulaçãoes de texto e que "lorem ipsum" não traduz os espaços corretos do conteúdo real. Ele é apenas um elemento de design visual e não uma forma de marcar e demonstrar marcações de textos verdadeiros e oficiais.

• Outra passagem do Getting Real: "Redação é design de interface. Grandes interfaces são escritas. Se você acha que cada pixel, cada ícone, cada fonte importa, então você também precisa também acreditar no material textual ".

• "O texto é uma interface de usuário", diz Jakob Nielsen em seu artigo sobre a importância de copywriting: Twitter Comentários: Iterative Design.

• Conteúdo "precede design. Design na ausência de conteúdo não é design, sua decoração. "- Diz web designer e autor Jeffrey Zeldman.

por .http://uxmyths.com/
Mais informações

7 de fev. de 2012

Mais entregáveis para sua AI

Mais entregáveis para sua AI

A medida que os projetos aumentam a inserção de profissionais que desenham a experiencia do usuário e os desafios se tornam mais dramáticos, nada melhor do que uma boa dose de entregáveis para que o design do projeto fique muito bem alinhado e entendido por todos da equipe, incluindo o cliente!

Análise heuristica
É um conjunto de “boas praticas”de usabilidade que um site deve conter. Jakob Nielsen criou um conjunto bastante robusto e realista onde podemos observar e analisar alguns pontos que podem definir se o site está acessível ou não:

• Visibilidade do estado do sistema;
• Correspondência entre o sistema e o mundo real;
• Controle e liberdade do usuário;
• Consistência e padronização;
• Prevenção de Erros;
• Reconhecimento em vez de lembrança;
• Flexibilidade e eficiência de uso;
• Projeto estético e minimalista;
• Recuperação de Erros;
• Ajuda e Documentação;
• Controle e liberdade do usuário.

Analise de requisitos
Consiste em conversas com o cliente/usuario sobre as diretrizes do projeto e para conhecer as funcionalidades do sistema que será desenvolvido. É nesta fase também que ocorre a maior parte dos erros, pois a falta de experiência dos clientes ou usuários faz com que eles nem sempre tenham claro em sua mente quais funcionalidades o software terá.


Analise de acessibilidade
Consiste basicamente em uma analise para verificar o nível de acessos facilitados do site/portal. Se está disponível e acessível via web a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário. Também pode apontar se os usuários podem acessá-lo de diferentes sistemas operacionais e principalmente se podem ser acessadas por todos, independente de capacidade motora, visual, auditiva, mental, econômico, social ou cultural.


Analise de métricas
É o olhar do arquiteto de informação sobre as métricas do projeto. Analisar os números de acesso, navegação e interação e encontrar soluções para melhora ou manutenção das telas. Se a taxa de rejeição de determinada tela está alta, talvez ela seja seu próximo alvo de melhorias de design e usabilidade.


É uma lista do que vai ser usado para medir se o seu projeto/design/redesign atingiu os objetivos do cliente. Número de visitas? Número de seguidores no Twitter? Porcentagem de pessoas que compartilham seu conteúdo? Nessa hora vale uma boa conversa com o pessoal de Data Intelligence para definir quais métricas são importantes e possíveis de serem mensuradas. Sem essas métricas fica difícil calcular o retorno sobre investimento (ROI) do projeto.


Analise hierarquica dos objetivos
Avaliar a importância relativa de diferentes alternativas com respeito a múltiplos atributos (quantitativos ou qualitativos)

• Identificar os elementos do problema
• Determinar objetivos
• Estabelecer a hierarquia
• Determinar prioridades


Analise qualitativa e quantitativa
Análise de interface qualitativa descobre o comportamento do usuário durante a navegação. Por exemplo: descobrir que todo usuário clica no logo quando quer voltar para a home ou que os usuários de uma determinada seção do site são predominantemente mulheres. Já as análises quantitativas permitem, como no focus group, mensurar opiniões de grupos sobre o produto.

Os resultados não são apenas “este produto agrada” ou “este produto não me agrada”, mas sim os motivos dessas opiniões. Pode ser informação valiosa no desenvolvimento do projeto e depois de sua implantação.

Estes dados permitem redefinir as seções privilegiando as informações de acordo com o público ou definir premissas para um determinado projeto; onde antes só considerávamos os browsers e resoluções de tela, hoje podemos ir muito além, considerando também o perfil do usuário.


Testes Usabilidade
São roteiros criados a partir dos fluxos existentes no protótipo ou site, e testados a partir de usuários para que possamos enxergar os pontos fortes e a melhorar do site, e ajustar para que a entrega esteja bem alinhada e com usabilidade eficiente.

Olhando as pessoas interagirem com o resultado do projeto permite um olhar bastante claro e realista sobre as telas e sua forma de interação com o usuário e o resultado destes testes ajuda na defesa de alguns conceitos envolvidos no projeto (quer seja pelo cliente ou equipe), desalinhados com o entendimento e necessidade do usuário.


Eye tracking
Última moda e grito da modernidade, o mapeamento do olhar do usuário sobre a interface auxilia na definição de pontos de interesse sobre conceito, layout, navegação e modelo de interação, com dados realistas para ajustar as informações da tela para que sejam mais atraentes ou fáceis de encontrar.

O entregável é um relatório que mostra quais pontos da tela foram mais olhados pelos usuários, em um modelo parecido com a imagem acima: um heatmap que mostra em cores quentes as áreas mais visualizadas da interface. O custo de realização dos testes de eyetracking é mais alto do que os testes de usabilidade, pois são necessários equipamentos especiais para monitorar o movimento do olho do usuário.


Teste de stress de navegação
É uma técnica de simulação usada para determinar o comportamento de um produto digiral em diferentes cenários.


Design participativo
A proposta do Design Participativo é valorizar a participação de usuários durante o processo de desenvolvimento de produtos e serviços. Através de oficinas e ferramentas colaborativas, os usuários participam ativamente da definição das características do que está sendo projetado.


Documento URL
Sugestão de url's amigáveis para as telas.


Grids
São linhas que demarcam a diagramação do conteúdo. Eles são parentes bem próximos das réguas e métricas e sua principal função é sustentar a padronização da diagramção, facilita a leitura e torna a navegação hibrida e intuitiva.


Wireframe
A planta baixa do site, seu esqueleto. O resultado de pesquisas onde pode ser encontrados todos os elementos em cada tela e suas disposições e orientações. O intuito é mostrar a hierarquia das informações, das telas e o fluxo de navegação que irá existir.

Importante relembrar para os desavisados que o wireframe deve ser apresentado em tons de cinza, não há neste momento niveis de escalas ou posicionamento de elementos gráficos, o que significa que o designer tem toda a liberdade de criar um layout diferente do wireframe desde que sejam respeitadas ar organizações textuais e hierárquicas das telas.


Mochups
São reproduções de uma idéia que mais se aproximam da realidade, em tamanho real, ou aproximado do real, mas que nno precisam reproduzir, necessariamente, suas funções.


Fluxograma
É um sitemap com QI acima da média onde é organizado hierarquias das informações e seus fluxos. Desta forma é mais fácil compreender a transição das informações em cada tela. Fluxogramas são fundamentais para o olhar realista do projeto pois além de se compreender os caminhos ainda permite encontrar fluxos mais objetivos para a visualização de determinadas seções ou telas.


Protótipo
É uma variação dos wireframes, mas com links E interações entre as telas. Você pode clicar e navegar entre elas, como se estivesse navegando no produto final. Pode ser usado com diversos objetivos: desde ser exibido em um teste de usabilidade até fazer com que o público interno do projeto (desenvolvedores, gerentes de projeto, designers, cliente) visualizem mais facilmente como determinada peça vai funcionar.


Sitemap
Organograma contendo todas as páginas que o site/portal irá conter. Este documento especifica as várias telas e geralmente é produzido no início do projeto, e refinada durante todas as etapas conforme as demandas posteriores.


Vocabulario Controlado
É um instrumento de controle terminológico que estabelece a forma de representar os assuntos que compõem um conjunto de áreas do conhecimento, tornando possível maior coerência entre os termos indexados.


Documento de taxonomia
De forma mais genérica, podemos dizer que taxonomia é uma classificação. Porém a taxonomia trata de uma estrutura de organização baseada na hierarquia – vai do geral para o específico, do maior para o menor, do menos complexo para o mais complexo. Meios de Transporte > Terrestres > Automóveis > Carros.


Inventário de conteúdo
Um nome bastante autoritário, mas no fundo trata-se de um cara legal. Quando o projeto quer seja novo ou já existente, e o conteúdo informativo é grande se faz necessário ter um controle global destes textos que serão gerados para o site. Consiste em um mapeamento de todas as páginas (previstas ou existentes) e todos os conteúdos de cada uma.

Assim, conseguimos ver holisticamente todo o conteúdo o que trará uma facilidade em organizar as informações (taxonomias, vocabulário controlado, etc) retirando o conteúdo duplicado muito comum em sites com grande volume de informações e facilitando sua encontrabilidade.


Definições de conteúdo (globais/locais)
Definições de posicionamento e ocorrencia de informaçoes dentro do site/sistema.


Modelo conceitual
Normalmente é usado para representar uma visão macro de como um produto funciona do ponto de vista conceitual – sem a necessidade de entrar em detalhes sobre cada funcionalidade. Pode ser um gráfico, um parágrafo de texto ou um fluxograma – o importante é mostrar de forma simples como o produto irá funcionar. Geralmente é apresentado nas fases iniciais do projeto, para garantir o alinhamento entre as áreas.


Definições de objetivos
É o resultado gerado da analise de métricas.


Benchmark
É a observação e estudo de projetos que tenham semelhança quer seja em comportamento ou conteúdo, com o projeto que vamos desenvolver. É a analise dos pontos positivos e negativos para que sejam considerados no momento em que iremos criar o “jeitão” das telas e seus comportamentos. Benefícios bacanas de um benchmark:

• Novo olhar sobre conceitos e padrões o que pode trazer novidades bem focadas e pertinentes com a proposta;
• Permite que o conhecimento sobre o mercado e sobre o cliente seja amplificado e consequentemente, do projeto também;
• Facilita a identificação das áreas críticas;
• Permite um olhar realista ao traçar objetivos.


Card sorting
Esta é uma interessante técnica onde podemos entender um pouco do fluxo mental do publico do projeto. São dados pequenos cartões com as categorias de determinada tela, para um número de pessoas com o intuito que o usuário organize um fluxo que considere prático e simples, de acordo com seu entendimento.

Neste momento, onde pode acontecer (e deve!) uma conversa entre ele e o arquiteto de informação, é possível entender os motivos deste modelo de classificação e depois todas as escolhas é feito uma analise onde os fluxos mais indicados pelos usuários serão aplicados na tela.


Focus group
É uma discussão entre um grupo geralmente pequeno sobre o “produto” que está sendo desenvolvido, que informa suas opiniões a respeito. O custo geralmente é baixo, rápido para organizar e pode trazer resultados interessantes focados diretamente no consumidor final.


Mapas mentais
É o nome dado para um tipo de diagrama voltado para a gestão de informações, de conhecimento e de capital intelectual. Auxilia a compreensão dos problemas, é utilizado como ferramenta de brainstorm.


Cenários
São descrições de situações hipotéticas em que são colocadas pessoas que interessam ao projeto. Essa técnica é usada de maneiras muito diferentes. Alguns utilizam para auxiliar numa decisão crucial de projeto, para avaliar as características do projeto, para demonstrar as características do artefato projetado em uso e etc.

O cenário pode se escrito formalmente, servindo como documentação de projeto, ou ser criado enquanto se discute questões de projeto. O que se segue a essa frase é um cenário: "suponha que o usuário faça isso, então...".

Num projeto simples, os cenários não precisam ser necessariamente oficializados, escritos. Eles podem surgir no meio de conversas da equipe, ou apenas na mente do designer. O mais importante é estar colocando à prova o jogo de cintura da aplicação. Isso se torna especialmente importante nos momentos tensos da aplicação: formulários complexos, negociações financeiras, tratamento de erros e etc.


Orientações de design
Verificar com o DA o desenvolvimento das telas quanto as diretrizes de AI e possíveis ajustes necessários durante o projeto.


Orientações de funcionalidade
Verificar com a equipe de modelagem o desenvolvimento das telas quanto as diretrizes de AI e possíveis ajustes necessários durante o projeto.


Orientações de acessibilidade
Verificar com a equipe de implantação e modelagem o desenvolvimento das telas quanto as diretrizes de AI e possíveis ajustes necessários durante o projeto.


Ecosistema
Quando um projeto é formado por diversas peças (um site, um aplicativo mobile, uma página no Facebook, um banner, um hotsite etc.), é um mapa detalhado de como esses diversos ambientes conversam entre si. Para onde você quer levar cada usuário e por quê? Qual o caminho que você espera que ele percorra?


Roadmap
É um plano de ação, um roteiro, um passo a passo para o desenvolvimento de um projeto que precise de fases nas entregas, ajudando a coordenar e planejar os avanços. Além de deixar claras as datas, ajuda também a enxergar o conjunto de tecnologias que podem ser aplicadas para o projeto.


Personas
Se a premissa é cada projeto tem um publico alvo a atingir, a personas são formatos de entender e enxergar melhor o usuário da solução web. É uma descrição que pode ser detalhadíssima ou mais simples, com o intuito de personificar um usuário do publico alvo. Esta pessoa de “mentirinha” ajuda o alinhamento das expectativas tanto do cliente quanto da equipe, sobre recursos e funcionalidades que devem estar contidas no projeto, na avaliação do produto. Criando sua pessoa, é bacana conter:

• Nome para facilitar a associação com pessoas reais;
• Características e razões para que o site seja importante para ele. Um histórico da persona, em relação às suas expectativas com o projeto;
• Cenários para ambientar as condições em que a persona vai interagir com o site;
• Características de comportamento quer sejam emocionais ou sociais, que sejam comuns ao publico representado pela persona, hábitos, linguagem e motivações.


Mood Board
Geralmente é um documento elaborado com ajuda do time de Cultural Insights, Planejamento e/ou Design, e procura reunir referências visuais do que se espera encontrar no seu site.
Ajuda muito os designers a definirem qual linha visual devem seguir no projeto, baseado no universo de referências dos usuários.


Caso de uso / Documento de especificação e mensagem de sistema
É o detalhamento de todos os cenários de uso e regras de funcionamento do sistema. Utilizados em projetos que possuem muitas variações de uso, esses documentos normalmente são escritos por um tecnólogo, que conta com a ajuda e validação do arquiteto de informação para levantar todas as situações possíveis.

É importante prever soluções e mensagens (de sucesso ou de erro) para cada uma delas, para garantir que a conversa com o usuário seja consistente e eficaz independente do cenário em que ele se encontra.


Teste A/B
São testes comparativos entre duas ou mais soluções para uma mesma tela ou tarefa. O modelo clássico funciona da seguinte forma: metade dos visitantes vêem a versão A da tela, metade vêem a versão B, durante certo período de tempo.

No final, mede-se e compara-se a desempenho de cada uma das versões – e a melhor delas é implementada para 100% dos visitantes. Testes A/B podem acontecer de forma sucessiva e constante, para que o produto evolua sempre.


Agora é estudar o cliente e seguir criando sets de entregáveis muito personalizados! Bons projetos!
Ah! Tenho que agradecer as contribuições do Fabricio Teixeira e do Brenner Cruvinel :)
Mais informações
Página inicial