User eXperience

Comunicação Social - MidialogiaTIC - Tecnologia da Informação e Comunicação

Daniel Paz de Araújoprofessor@danielpaz.net

Introdução

User eXperience

● Todas as experiências são subjetivas, influenciada por fatores humanos e fatores externos.

● Entretanto as experiências digitais são projetadas.

“A maioria das pessoas acredita que User Experience é somente encontrar a melhor solução para os seus usuários – mas não é. UX se trata sobre definir o problema que precisa ser resolvido (o porquê), definir para quem esse problema precisa ser resolvido (o quem), e definir o caminho que deve ser percorrido para resolvê-lo (o como).”

Whitney Hess

User eXperience

● Experiência de quem usa.

● O uso está além de interfaces computacionais, mas em objetos e produtos do cotidiano.

● Desde que o momento em que algo é usado para realizar uma tarefa, existe a experiência do usuário.

● A experiência é positiva quando a tarefa é realizada sem disperdício, frustração ou problemas.

● A tarefa pode ser funcional (usar um banco) ou emocional (usar uma rede social digital).

O que é User eXperience

● A criação e a sincronização dos elementos que afetam a experiência dos usuários em uma empresa em particular, com a intenção de influenciar suas percepções e o seu comportamento.

● Para criar experiencias satisfatórias é preciso entender como criar uma estrtura lógica e viável para a experiencia, identificando os elementos importantes para criar uma conexão emocional com os usuários do produto.

O que é User eXperience

● Coisas com que o usuário possa:

○ tocar

○ ouvir

○ sentir

● Coisas com que o usuário pode interagir de formas que vão além do físico:

○ interfaces digitais (web, apps, etc)

○ pessoas

User eXperience

Dan Saffer: http://www.designingforinteraction.com

User eXperience

Stephen Anderson: Seductive Interaction Design

UX designers

● Constroem produtos fáceis de usar (usabilidade), reduzindo a fricção e permitindo que os usuários completem a tarefa desejada em menos tempo, com menos ruído e obstáculos.

● Apoiam-se em princípios de psicologia para motivar o usuário e incentivá-lo a seguir adiante.

● Não define a identidade visual de um produto e sim a maneira com que algo será utilizado para se chegar ao objetivo.

UX designers

“Eu já tive um pouco de problema em entender o que um UX designer faz de verdade, e eu continuo chegando sempre à mesma conclusão: um user experience designer não faz nada de especial. Ele é só um designer. Todos os produtos têm uma experiência do usuário (UX). E essa experiência não é explicitamente desenhada; é um subproduto de desenhar uma interface.”

Daniel Edenhttp://daneden.me

Papéis

● Arquiteto da Informação: responsável por criar modelos para a estrutura da informação e utilizá-la para projetar uma navegação amigável ao usuário e categorizar o conteúdo.

● Designer de Interação: responsável pela definição do comportamento de um site ou aplicação de acordo com as ações do usuário. Inclui fluxos e interatividade dentro de uma visualização.

● Pesquisador do Usuário: responsável por fornecer ideias considerando as necessidades dos usuários finais, baseadas nas informações que são geradas a partir de pesquisas.

Papéis

● Estrategista de marca ou diretor

● Analista de negócio

● Estrategista de conteúdo

● Redator

● Designer visual

● Desenvolvedor de Interface

Arquitetura da Informação

● Raízes na Biblioteconomia: organizar e catalogar.

● Como fazer com que as informações sejam organizadas no menu para facilitar o acesso?

● Qual o perfil de usuário que está buscando qual tipo de informação?

● Como os ítem são ordenados, agrupados e organizados dentro da estrutura?

Usabilidade

● Garantir que as interfaces sejam fáceis de usar.

● O usuário consegue realizar uma tarefa sem transtorno?

● Quantos passos são necessários para que o objetivo do usuário seja atingido?

● As informações são de fácil entendimento?

● Após o uso o usuário está satisfeito?

Design de Interação

● Entender e definir o comportamento das interfaces ao serem interagidas.

● Como a interface responde?

● Qual a quantidade de informação que o usuário precisa saber para realizar a tarefa naquele momento?

● Como a interface pode ser usada para criar uma narrativa na experiência do usuário?

Taxonomia

● Arranjar, organizar e rotular a informação para que faça sentido para o usuário.

● Entender o perfil demográfico para propor a melhor linguagem.

● Buscar a melhor classificação para aplicar nas informações.

Estratégia de design

● Entender e definir os porquês do produto.

● Para quem ele foi criado?

● Como evoluirá?

● Quais os objetivos de negócio e como podem ser alcançados?

● Como avaliar o sucesso do produto?

● Como analisar o retorno previsto X realizado?

Pesquisa com usuários

● Entender o público-alvo.

● Quais as necessidades, anseios, motivaçõs e expectativas do usuário?

● Quais as principais tarefas que serão realizadas?

● Quais as particularidades do comportamento dos grupos de usuários que influenciam as decisões de design?

Processos eTécnicas

Processos e artefatos

● Busca facilitar a comunicação entre os envolvidos, documentar decisões e colher feedback.

● Varia de acordo com cada projeto.

● São influenciados pelos processos e métodos das áreas relacionadas.

Blueprint

● Ferramenta operacional que descreve a natureza e características da interação do serviço em detalhes suficientes para que seja feita sua verificação, implementação e manutenção.

● Auxilia na análise do caminho dos consumidores em vários canais.

● Apóia a identificação de oportunidades de melhorias.

Blueprint

Mapa da Jornada do Usuário

● Descreve a jornada de um usuário representando diferentes pontos de contato que caracterizam sua interação com um serviço.

● Permite a definição de motivações e necessidades do consumidor nas várias etapas da jornada,c riando soluções de design apropriadas.

Mapa da Jornada do Usuário

Use Cases

● São tradicionalmente utilizados para descrever os fluxos de interação.

● Descrevem ações de interação segundo uma narrativa impessoal entre o usuário e o sistema.

Use Cases

Use Story

● Foca nos objetiso do usuário e como o sistema alcança estes objetivos.

● Fracionam os requisitos para estimar esforço para realizar o objetivo.

Como um …[persona] ... quero/preciso/devo/gostaria de ...[ação]... para …[finalidade]

Job Story

● Organiza cada interação como um Job, focando no início de um evento ou situação, a motivação e o objetivo.

Quando …[persona] ... quero/preciso/devo/gostaria de ...[ação]... para que eu possa …[finalidade]

User Story X Job Story

● User Story: Como moderador, quero selecionar um item para ser estimado ou re-estimado, para que a equpe possa estimá-lo

● Job Story: Quando um ítem não tiver sido estimado ou eu não concordar com a estimativa, quero reiniciar o processo de estimativa e avisar a equipe, para que possam saber que um ítem particular deve ser estimado.

Personas

● São documentos que descrevem típicos usuários-alvo.

● Podem dar uma visão clara sobre quem está usando o produto e como está sendo usado.

● As personas podem limitar a criatividade, inovação ou o bom design.

● Por outro lado elas atendem a uma necessidade específica que influencia o processo de criação de forma positiva.

Personas

● Representação do público alvo, destacando seus dados demográficos, comportamentos, necessidades e motivações através da criação de um personagem fictício baseado em dados de pesquisa.

● Personas permitem aos designers e desenvolvedores criarem empatia com os consumidores durante o processo de design.

Personas

Ecossistema

● Representa as propriedades digitais de uma marca, suas conexões e função estratégica de marketing.

● Permite avaliar como aproveitar melhor as propriedades que a marca possui para atingir os objetivos de negócio.

Ecossistema

● Presença de marca: facilita o relacionamento entre a empresa e o público geral.

● Campanha de marketing: obtém uma resposta específica e mensurável de um público geral ou particular por determinado período.

● Fonte de conteúdo: depósito de informações em diferentes tipos de mídia para informar e entreter.

● Baseada em tarefas: permitir que os usuários realizem tarefas ou fluxos de trabalho

Ecossistema

Benchmarking

Os estudos de benchmarking são conduzidos para comparar práticas organizacionais com as melhores práticas que existem nas empresas concorrentes, no governo ou na indústria.

O objetivo dos estudos de benchmarking é determinar como as companhias alcançam seus níveis superiores de performance e usam essa informação para desenhar projetos para melhorar as operações da empresa.

Benchmarking

● Identificar a área a ser estudada

● Identificar as organizações que são líderes no setor

●Conduzir uma pesquisa nas organizações selecionadas para compreender as suas práticas

●Organizar visitas às melhores organizações

●Desenvolver uma proposta de projeto para implementar as melhores práticas

Brainstorming

O objetivo é produzir numerosas novas ideias e derivar delas temas para análise futura.

●Quais opções estão disponíveis para atuar sobre a questão em mãos?

●Quais fatores estão impedindo o grupo de avançar com uma abordagem ou opção?

●O que poderia estar causando um atraso na atividade “A”?

●O que o grupo pode fazer para resolver o problema “B”?

Brainstorming - Preparação

●Desenvolver uma definição clara e concisa da área de interesse.

●Determinar um limite de tempo para o grupo gerar ideias; quanto maior for o grupo, mais tempo é necessário.

● Identificar o facilitador e os participantes da sessão.

●Definir as expectativas junto aos participantes e conseguir com que eles se envolvam com o processo.

●Estabelecer critérios para avaliação e ranqueamento das ideias.

Brainstorming - Sessão

●Compartilhar novas ideias sem nenhuma discussão, criticismo ou avaliação.

●Registrar visivelmente todas as ideias.

●Encorajar os participantes a serem criativos, compartilhar ideias exageradas e construir sobre as ideias dos demais.

●Não limitar o número de ideias, uma vez que o objetivo é elicitar tantas quantas o período de tempo permitir.

Brainstorming - Fechamento

● Uma vez que o limite de tempo é alcançado, usando os critérios de avaliação pré-determinados, discutir e avalie as ideias.

● Criar uma lista condensada de ideias, combine ideias quando apropriado e elimine duplicatas.

● Ordenar as ideias.

● Distribuir a lista final de ideias às partes apropriadas.

Moodboard

● Coleção de imagens e referências que poderão se transformar no estilo visual do projeto.

● Ajuda a apresentar para o cliente e equipe a linha visual que está sendo criada antes de utilizar ferramentas de produção visual.

Moodboard

Mapas do Site

● Representação visual das páginas de um site.

● Podem ser utilizados para qualquer tipo de aplicação que utiliza de páginas identificadoras, visualizações, estados e instâncias.

● Útil para visualizar como o conteúdo é organizado.

● Fornece um panorama de navegação, exibindo as conexões de cada item.

Mapa do Site

Storyboard

● Série de ações que os consumidores tomarão enquanto estão usando o produto.

● Traduzem as funcionalidades de forma tangível, em situações reais.

Storyboard

Fluxo de Tarefa

● Identificam caminhos ou processos que os usuários farão enquanto avançam.

● Representa detalhes das opções dos usuários e dos caminhos que poderão seguir.

● Jesse James Garret: www.jjg.net/ia/visvocab

● Similar ao Diagrama de Atividades (UML) e BPMN.

Vocabulário Visual

Fluxo de uso

● Representação visual do fluxo do usuário para completar suas tarefas.

● É a perspectiva do usuário sobre a organização do produto, auxiliando a identificação de passos que possam ser melhorados.

Fluxo de uso

Pesquisa quantitativa

● Questões que produzem um número como resultado.

● Forma rápida e simples de medir a satisfação dos consumidores e coletar feedback sobre o produto.

● Podem apontar a necessidade de outro tipo de pesquisa em profundidade.

Teste de usabilidade

● Série de tarefas em um protótipo ou mesmo no produto final.

● À medida que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento e suas opiniões.

● Ajuda a validar fluxos, layouts e funcionalidades.

Teste A/B

● Oferecer duas versões diferentes do produto para diferentes usuários e ver qual delas tem melhores resultados.

● Melhora a taxa de conversão de funis de compra, landing pages ou formulários de cadastro.

Eye Tracking

● Analisar o movimento dos olhos do usuário à medida que ele interage com o produto.

● Fornece informações sobre as partes da interface que mais interessam ao usuário e também sobre qual a ordem de leitura dos elementos da tela.

Eye Tracking

Wireframe

● Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem.

● Útil para discutir ideias como time e com os clientes, e também para informar o trabalho dos diretores de arte e desenvolvedores.

● Protótipo de baixa fidelidade de uma página Web ou da tela da aplicação.

● O tamanho da fonte é importante, mas o tipo não.

● Usado para identificar elementos que serão exibidos.

Wireframe

● O que é apresentado:

○ Hierarquia da interface

○ Disposição das informações na tela

○ Quantidade e tipo de conteúdo

○ Menus e elementos de navegação

○ Comportamento em vários tamanhos de tela

○ Requisitos de negócio e sistema

○ Variações e estados diferentes do sistema

Wireframe

● O que não é apresentado:

○ Layout final

○ Identidade visual da marca

○ Texto e conteúdo final

○ Todos os casos de uso do produto

Wireframe

● Explicações e notas sobre um elemento ou uma interação em um wireframe.

● Contem informações tais como:

○ identificação do conteúdo ou rotulação

○ Fonte(s) de conteúdo

○ Regras de exibição

○ Regras de Interação

○ Destinos de Interação

○ Conteúdo/mensagem de erro

Anotações

Prototipagem

● Simulação da navegação e das funcionalidades de um site, composto normalmente por wireframes clicáveis ou layouts.

● Forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.

● Ato de criar e testar toda ou parte da funcionalidade de uma aplicação ou Website com os usuários.

● Pode ser um processo interativo para identificar ou validar questões sobre a experiência do usuário.

● Seu resultado é o retorno acionável dos conceitos que podem ser usados para aumentar e aprimorar o design.

Prototipagem

● São uma forma de alcançar vários objetivos:

○ Trabalhar através de um design

○ Criar uma plataforma de comunicação comum

○ Vender as ideias do design internamente

○ Testar a possibilidade técnica

○ Testar os conceitos de design com usuários/consumidores finais.

Prototipagem

● Abordagem mais flexível pois permite revisar rapidamente de teste para teste.

● Ao ser utilizada no início do processo, pode ajudar a descobrir assuntos relacionados antecipadamente.

● As mudanças neste momento poderão ser mais rápidas e eficientes.

● Embora seja de baixo custo, não pode ser distribuída para ser reutilizada quando as partes precisam ser atualizada.

Prototipagem em Papel

● Permitem que sejam apresentadas as interações entre as partes do aplicativo ou Website e o usuário.

● Podem ser feitas referências às personas ao apresentar ou testar o protótipo, para detalhar o acesso aos wireframes e às propriedades do design visual.

Prototipagem Digital

● Artefato de alta fidelidade visual em relação ao produto final.

● É produzido para simular o produto e obter feedback sobre a hierarquia visual, relação entre figuras e grupos de elementos além das ações.

● Devem ser navegáveis para que possam ser utilizados naturalmente em testes de experiência.

Mockup

Comparativo

Técnica Fidelidade Custo Uso Características

Wireframe Baixa $Documentação e

rápida comunicação

Rascunho, preto e branco, representação

da interface.

Protótipo Média para alta $$$Teste com o usuário, avaliação de reuso da

interfaceInterativa

Mockup Alta $$

Obter feedback e conseguir

compromentimento dos patrocinadores

Visualização estática

Biblioteca de padrões

● Lista prática com exemplos e código dos padrões de interação que serão usados em todo o site.

● Ajuda a manter o design consistente em diferentes telas

● Facilita a vida dos desenvolvedores na hora de implementar os elementos.

● É possível retirar algum elemento ou informação?

● As informações são exibidas progressivamente?

● Está sendo utilizado o mesmo estilo visual e padrões de interação?

● As informações são apresentadas da forma mais simples possível?

● É possível ocultar visualmente algumas ações, para que a ação primária receba mais importância?

● Todas as informações coletadas estão sendo utilizadas?

● A usabilidade foi testada com usuários reais?

● Quais métricas estão sendo coletadas?

Checklist

● Está claro para o usuário a ação que deve ser tomada naquele momento?

● O rótulo da ação explicita o que ocorrerá após ser acionada?

● Os botões e links têm a aparência apropriada de interação?

● As informações da tela são sufucientes para a continuidade do fluxo?

● É possível se localizar dentro da estrutura do site a qualquer momento?

● As mensagens de erro apresentam a causa e ação para correção?

Checklist

● A ação mais comum ao usuário está destacada?

● Os erros são prevenidos antes que possam ocorrer?

● É possível desfazer as ações?

● Existe tolerância a falhas?

● As informações do usuário estão sendo utilizadas para aprimorar sua experiência?

● É possível automatizar algum processo para minimizar o esforço do usuário?

● Outros sentidos estão sendo utilizados para transmitir a mensagem para o usuário?

Checklist

GOTHELF, J. SIDEN, J. Lean UX. Applying Lean Principles to Inprove User Experience. California: O’Reilly Media, 2013.

UNGER, R. O Guia para Projetar UX. São Paulo: Bookman, 2009.

TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa do Código, 2014.

● http://www.wireframeshowcase.com

● http://uxpin.com/guide-to-wireframing.html

Referências