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

Transcrição

1 Introdução

2 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

3 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).

4 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.

5 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

6 User experience Dan Saffer:

7 User experience Stephen Anderson: Seductive Interaction Design

8 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.

9 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 Eden

10 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.

11 Papéis Estrategista de marca ou diretor Analista de negócio Estrategista de conteúdo Redator Designer visual Desenvolvedor de Interface

12 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?

13 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?

14 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?

15 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?

16 Processos e Técnicas

17 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.

18 Personas São documentos que descrevem típicos usuáriosalvo. 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.

19 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.

20 Personas

21 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.

22 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

23 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.

24 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

25 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?

26 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.

27 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.

28 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.

29 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.

30 Moodboard

31 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.

32 Mapa do Site

33 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.

34 Storyboard

35 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.

36 Vocabulário Visual Jesse James Garret: Similar ao Diagrama de Atividades (UML) e BPMN.

37 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.

38 Fluxo de uso

39 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.

40 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.

41 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.

42 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.

43 Eye Tracking

44 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.

45 Wireframe 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.

46 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

47 Wireframe O que não é apresentado: Layout final Identidade visual da marca Texto e conteúdo final Todos os casos de uso do produto

48 Anotações 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

49 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.

50 Prototipagem 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.

51 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.

52 Prototipagem em Papel 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.

53 Prototipagem Digital 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.

54 Mockup 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.

55 Comparativo Técnica Wireframe Protótipo Mockup Fidelidade Baixa Média para alta Alta Custo Uso Características $ Documentação e rápida comunicação Rascunho, preto e branco, representação da interface. $$$ Teste com o usuário, avaliação de reuso da interface Interativa $$ Obter feedback e conseguir compromentimento dos patrocinadores Visualização estática

56 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.

57 Checklist É 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?

58 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?

59 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?

60 Referências GOTHELF, J. SIDEN, J. Lean UX. Applying Lean Principles to Inprove User Experience. California: O Reilly Media, UNGER, R. O Guia para Projetar UX. São Paulo: Bookman, TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa do Código,