Qual a importância do Design de UX para desenvolver projetos digitais

QUAL A IMPORTÂNCIA DO DESIGN DE UX PARA DESENVOLVERPROJETOS DIGITAIS

EBOOK EXCLUSIVO

Saiba como elaborarprojetos utilizando conceitose ferramentas para ser umdesign web de primeiro nível.

Idealizador: Profº Francisco Esperança

CRIACAO | DESIGN UX

Uma publicação de

QUAL A IMPORTÂNCIA DO DESIGN DE UX PARA DESENVOLVER PROJETOS DIGITAIS

Nos últimos anos, a agência H4Digital pensou que no mundo cybertrônico de hoje, deveria haver um espaço parainformação de qualidade e criatividade, então com o engajamento que temos com a tecnologia e midias digitais criamos a Sobretech - Tecnologia, Design e Entreterimento.

Em nosso Portal que fica na url: www.sobretech.com.br, temos conteúdo que vocês amigos e usuários terão muitafacilidade de utilizar pois estão divididos em categorias como: Programação, Criação, Tecnologia, Games, entre outras...

E sobre este ebook ele foi escrito a partir de conhecimentos de várias pessoas. Profissionais de alto gabarito e E sobre este ebook ele foi escrito a partir de conhecimentos de várias pessoas. Profissionais de alto gabarito e experiência com os meios digitas, por isso seu conteúdo é de extremo estudo e dedicação em sua criação.

A Sobretech

A H4Digital é formada por profissionais que se especializam em criar soluções interativas para o seu negócio e principalmente estudar e alcançar o público-alvo de nossos clientes.

Temos o compromisso de projetar sua empresa no mercado com planejamento estratégico, criatividade e inovação, motivando o público a dar o retorno que o cliente almeja.

Nossos Valores são:

- Trabalhar com transparência, dando um retorno imediato de nossas ações aos clientes.- Negociar projetos de maneira fácil e rápida com nossos clientes.- Negociar projetos de maneira fácil e rápida com nossos clientes.- Tratar todas as empresas e segmentos de negócios de igual para igual, resolvendo seus problemas e atendendo - suas necessidades especificas de negócios e projeção no mercado.- Nossos Objetivos são:

- Dar Suporte total ao nosso cliente (Atendimento Excepcional).- Desenvolver projetos com rapidez utilizando metodologias ágeis e praticas (SCRUM ou XP).- Criar projetos sempre com o foco no usuário (UX – USER EXPERIENCE).- Dar o retorno sobre o investimento (ROI) que o cliente preciso através de acompanhamento de ações online.- Dar o retorno sobre o investimento (ROI) que o cliente preciso através de acompanhamento de ações online.

Prestamos serviços (full service) em Midias Digitais nos seguintes quesitos: Websites, Web Marketing, Mobile, Midias Interativas, SAAS e Prints.

Entre em contato e marque uma reunião com agente.

H4Digital - Resultados Digitais de expressão.Tel: +55 21 27974653 | +55 21 86362652Email: [email protected]: www.h4digital.com.br

Sobre H4Digital

2

www.sobretech.com.br

CRIACAO | DESIGN UX

Uma publicacao de


Capítulo 1 | O Que é Design de UX ou UX Design? .................................................................................................... 4

Capítulo 2 | Ecossistema de um projeto de Design UX ................................................................................................ 6

Capítulo 3 | Modelos de Design de UX ......................................................................................................................... 7

Capítulo 4 | Cliente: coleta de dados ou breafing ......................................................................................................... 8

Capítulo 5 | Buscar entendimento do problema ou brainstorm .................................................................................... 9Capítulo 5 | Buscar entendimento do problema ou brainstorm .................................................................................... 9

Capítulo 6 | Objetivo do projeto .................................................................................................................................. 10

Capítulo 7 | Entendimento do usuário ou personas ................................................................................................... 12

Capítulo 8 | Ideação: fluxogramas, wireframe e lista de recursos .............................................................................. 14

Capítulo 9 | Lançamento: teste de a/b, usabilidade, acessibilidade, eye tracking ..................................................... 16Capítulo 9 | Lançamento: teste de a/b, usabilidade, acessibilidade, eye tracking ..................................................... 16

Conclusão ................................................................................................................................................................... 23

Sumário

3


CRIACAO | DESIGN UX

Uma publicacao de


O termo “User Experience” surgiu por volta da década de 90, criado por um design chamado Donald Norman, para caracterizar a relação entre os usuários e uma empresa, seus produtos ou serviços.

Na época Norman era Vice-Presidente do setor de Tecnologia Avançada na Apple.

Existem os que dizem que o termo surgiu antes de Norman e outros que dizem que ele não é o dono da verdade e que deveríamos utilizar mais fontes de pesquisa … Talvez tenham razão nesse ponto, mas para mim Norman tem seus méritos e sinceramente não me interessa se ele foi mesmo o primeiro a utilizar o termo, o que deveria ser ressaltado ao meu ver é o conhecimento que ele – e muitos outros – compartilharam e continuam a fazê-lo.

Tenho certeza que é uma boa, para qualquer um interessado em aprender mais sobre o assunto, dar uma olhadinhano trabalho desses caras, existe muito material no site do grupo e também espalhado por aí, tanto na internet comono trabalho desses caras, existe muito material no site do grupo e também espalhado por aí, tanto na internet comoem livros especializados.

Norman diz que para uma experiência ideal é preciso oferecer o que o usuário deseja procura de forma simples e direta.

Criar produtos e serviços que sejam prazerosos de possuir e utilizar e que várias áreas [engenharia, marketing, design gráfico, industrial e de interface] precisam trabalhar em conjunto para que, somadas, apresentem a melhor solução.

Capítulo 1 | O Que é Design de UX ou UX Design?

4


CRIACAO | DESIGN UX

Uma publicacao de


Em 1883, Brunel / GWR (Great Western Railway).

No livro Change By Design há um exemplo bacana para entender melhor o conceito de UX e Design Thinking:

O engenheiro Isambard Kingdom Brunel se preocupava com a experiência da viagem. “Flutuar pelo país”, dizia ele.Toda a ferrovia foi planejada para proporcionar a melhor viagem, pra ficar com aquela vontade de viajar melhor viagem, pra ficar com aquela vontade de viajar de novo só por causa dessa experiência. A comunicação sobre a ferrovia foi feita com isso em mente e não nos avanços tecnológicos da época – o que seria natural tendo em vista que em 1883 a revolução industrial estava, literalmente, à pleno vapor.

O design de UX pode ser uma embalagem, um jogo, um site, um hot site, uma torradeira. Qualquer coisa que possua algum nível de comunição com um usuário.

Então quando pensamos, por exemplo, sobre “Como atender da melhor maneira o desejo do usuário?”, “O que fazer para tornar esse site mais agradável e prazeroso de navegar?”, “Como ajudar o usuário a encontrar o que procura?”, “Como “Como ajudar o usuário a encontrar o que procura?”, “Como torná-lo intuitivo?”, “Como conquistar a afetividade dos usuários?”, “Como criar uma conexão bacana entre o que o usuário quer e o que o cliente quer oferecer?” ou até num nível mais valioso: “Como melhorar a imagem de uma empresa e ao mesmo tempo fazer algo útil e bom para a sociedade?” etc acredito que estamos, grosso modo, falando de alando de UX Design.

O que posso dizer hoje sobre UX Design e o que imagino atualmente sobre sua relação com meu trabalho é que quando desenvolvemos um site não estamos apenas vendendo um produto ou serviço do nosso cliente, estamos oferecendo um lugar fictício para o usuário onde ele vai se hospedar enquanto estiver navegando, este lugar deve, obviamente, ser aconchegante, acolhedor, confortável e não menos importante: deve conter o que o usuário está procurando.

Brunel, ele é considerado um dos primeiros Designs Thinkers porque se colocou no lugar dos passageiros (E esta, acredito eu, é a melhor e mais objetiva definição de Design Thinking e, obviamente, está totalmente relacionado com UX, aliás eu ainda tenho problemas para diferenciar tantos termos que se referem à mesma coisa, mas enfim … ).

Imagine se você, ao flutuar de trem pelos belos vales da Inglaterra naquela época, com toda aquela natureza exuberante, não ficaria com uma vontade irresistível de voltar lá, de contar aos seus amigos como foi sua experiência, de recomendar essa experiência incrível para eles.experiência, de recomendar essa experiência incrível para eles.

Acho que deu para perceber que UX não se resume à internet, UX se aplica em tudo à nossa volta e é fácil notar que as coisas mais presentes em nossas vidas, as coisas que mais adoramos tiveram no usuário sua chave para o sucesso.

5


CRIACAO | DESIGN UX

Uma publicacao de


Para o desenvolvimento de um Design de UX para Web é preciso primeiramente identificar o tipo de site que você irá criar:

Presença de Marca: Uma plataforma online constantemente presente que facilita o relacionamento entre as empresas e o público em geral( qualquer um interessado em seus produtos e serviços). Ex: SITES INSTITUCIONAIS.

Campanha de Marketing: um site ou aplicativo direcionado com o objetivo de obter uma resposta específica e mensurável de um público particular ou de um público geral por um determinado período de tempo. Ex: HOTSITES PROMOCIONAIS.PROMOCIONAIS.

Fonte de Conteúdo: Um depósito de informações, potencialmente composto de vários tipos de mídias (artigos, documentos, vídeo, fotos, tutoriais) com o intuito de informar, envolver e entreter o usuário. Ex: PORTAIS DE COMUNICACÃO E SITES DE ENSINO A DISTANCIA.

Aplicação baseada em tarefas: Uma ferramenta ou coleção de ferramentas com o objetivo de permitir que os usuários realizem uma serie de tarefas ou fluxo de trabalhos importantes. EX: SITES DE INTERNET BANKING e SAAS.

Quando você se torna um Design de UX, geralmente você acaba tendo que exercer vários papeis, é bom saber os tipos de papeis que você possa se sentir confortável em assumir em um projeto, são eles: Arquiteto da Informação: É responsável por criar modelos para a estrutura da informação e utiliza-los para projetar uma navegação amigável ao usuário e dividir o conteúdo em categorias. Durante a criação de sites e aplicações, as responsabilidades comuns incluem a criação de mapas de site detalhados e a verificação de que as categorias e as subcategorias da informação são distintas e amigáveis ao usuário.e as subcategorias da informação são distintas e amigáveis ao usuário. Design de Interação: Um design de interação é responsável pela definição do comportamento de um site ou de uma aplicação de acordo com as ações usuário. Inclui fluxos no site através de varias visualizações e interatividade dentro de uma visualização particular. Durante a criação dos sites ou das aplicações, as atividades comuns são criar fluxos de tarefa mostrando a interação nas paginas ou nos componentes dentro do site e criar wireframes mostrando interações dentro da página como menus de conteúdo dinâmicos e extensíveis.

Pesquisador de Usuário: Pesquisador de Usuário: É responsável por fornecer ideias considerando as necessidades dos usuários finais, baseadas nas informações que são geradas a partir da pesquisa com o cliente. Existem atividades que podem entrar na categoria de pesquisa do usuário e elas podem ocorrer em vários pontos do cronograma do projeto: entrevistas de usuário, pesquisas e testes de usabilidade.

Outros tipos de papeis que você pode exercer no Design de UX: Estrategista da Marca ou Diretor, Analista de Negócios, Estrategista de Conteúdo, Redator, Design Visual, Desenvolvedor de Interface.

Capítulo 2 | Ecossistema de um projeto de Design UX

Escolha o seu papel como Design de UX

6


CRIACAO | DESIGN UX

Uma publicacao de


Um modelo que exemplifica um fluxo ideal de processos que tenho visto é mais ou menos assim, lembrando que o UX Design estará presente em todo o processo:

1. Cliente: Coleta de Dados ou Breafing;

2. Buscar entendimento do problema ou Brainstorm;

3. Objetivo do Projeto;

4. Dados Existentes;

5.5. Entendimento do Usuário ou Personas;

6. Ideação: Fluxogramas, Wireframe e Lista de Recursos;

7. Implementação e Finalização: PSD, JPG, HTML, CSS, WORDPRESS, MAGENTO e etc...;

8. Lançamento: Teste de A/B, Usabilidade, Acessibilidade, Eye Tracking, etc...

9. Reunião pós – finalização.

10. Monitoramento de Desempenho: Métricas e Analise de Usuários.

11. Agenda para melhorias.

Capítulo 3 | Modelos de Design de UX

7


CRIACAO | DESIGN UX

Uma publicacao de


O Briefing é um conjunto de informações passadas em uma reunião para o desenvolvimento de um trabalho, sendo muito utilizadas em Administração, Relações Públicas e na Publicidade. O Briefing deve criar um roteiro de ação para criar a solução que o cliente procura, é como mapear o problema, e com estas pistas, ter ideias para criar soluções.

O Briefing é uma peça fundamental para a elaboração de uma proposta de pesquisa de mercado. É um elemento chave para o planejamento de todas as etapas da pesquisa de acordo com as necessidades do cliente.

Os itens que devem compor um bom Briefing são:Os itens que devem compor um bom Briefing são:

- Nome da empresa (insira o nome da empresa).

- Nome do projeto ou campanha (insira o nome da campanha).

- Data de realização.

- Tarefa (o que deve ser realizado nesta atividade).

- Objetivos do projeto: (o que você quer alcançar).

- Objetivos do negócio.

- Objetivo desta comunicação. - Objetivo desta comunicação.

- Contexto do projeto: (detalhes relevantes do contexto).

- Estratégia.

- Público alvo.

- Estratégia do projeto: (como vamos motivar nosso publico alvo a agir da maneira como desejamos?).

- Vantagem competitiva circunstancial: (porque eles iriam considerar o seu produto ou serviço em detrimento de outros?).

- Mensagem chave: (Qual é a promessa ou benefício único mais importante para o cliente? Em 25 palavras ou - Mensagem chave: (Qual é a promessa ou benefício único mais importante para o cliente? Em 25 palavras ou menos.).

- Suporte: (quais as provas que suportam a mensagem chave?).

- Obrigações: (que elementos devem ser incluídos no trabalho criativo? Isto é, gráficos, logos, parafernália legal...).

- Orçamento.

- Data do briefing.

- Conceitos criativos apresentados pela agência.

- Participaram da elaboração deste documento: (insira aqui os nomes de todos os envolvidos). - Participaram da elaboração deste documento: (insira aqui os nomes de todos os envolvidos).

Capítulo 4 | Cliente: coleta de dados ou breafing

8


CRIACAO | DESIGN UX


Brainstorm é uma palavra em inglês cuja tradução é “tempestade mental”. É uma metodologia de exploração de idéias, visando a obtenção das melhores soluções de um grupo de pessoas.

O Brainstorm não é espontâneo. É uma técnica cujo princípio básico reside na ausência de julgamentos ou de autocríticas.

A partir do Brainstorm, chegamos à idéias de qualidade, ou até à solução de uma situação ou problema. Além disso, traz a vantagem de ter seu mérito distribuído, pois é o resultado do trabalho de toda uma equipe.

Passo a PassoComece com um tema ou assunto e peça para os presentes expressarem todas as idéias que lhes venham presentes expressarem todas as idéias que lhes venham à mente espontaneamente.

Nenhuma idéia apresentada deve ser criticada.

Todas as idéias verbalizadas devem ser escritas de maneira a ficarem expostas para todos, estimulando novas idéias.

Ao término das verbalizações, todas as idéias escritas e expostas devem ser repassadas e analisadas para seleção expostas devem ser repassadas e analisadas para seleção das mais adequadas à situação.

A seguir, selecione a melhor idéia.

Como Aplicar o Brainstorm?Uma solução muito simples e eficaz é o diagrama de causa e efeito, ou se preferir “diagrama de espinha de peixe”.

Ele é uma forma visual de levantamento de causas e efeitos, que combinados com os princípios do Brainstorm tem Ele é uma forma visual de levantamento de causas e efeitos, que combinados com os princípios do Brainstorm tem ótimos resultados.

Podemos organizar num quadro um diagrama como o de cima e, em seguida, um grupo de pessoas levanta quais são os fatores ou as espinhas do peixe que levam ao seu objetivo. Usando ainda da Brainstorm, elas levantam parâmetros que influenciam nessas espinhas de forma organizada e clara. Ao final, usando um quadro branco e alguns post-its, têm-se de forma visual todo um diagrama de causa e efeito. Tornando muito mais fácil trabalhar para alcançar os objetivos.

Capítulo 5 | Buscar entendimento do problema ou brainstorm

9


CRIACAO | DESIGN UX


Os objetivos do projeto de um web site explicitam a visão de todos os stakeholders sobre os resultados esperados, desde os clientes finais à organização, incluindo os patrocinadores e a equipe de trabalho. Esta visão, que inclui tanto o produto quanto o projeto, atravessa os processos operacionais diários e funciona como uma referência razoavelmente estável para a tomada de decisões. No entando, desde a adoção, por muitas equipes, de métodos ágeis como Scrum, XP e Lean, não se espera mais que os objetivos se mantenham estáveis durante toda a realização de um projeto e que se crie soluções de design compatíveis com uma única visão inicial. Objetivos podemmudamudar, assim como a percepção do produto pela equipe durante a realização do projeto.

No primeiro momento, o entendimento dos objetivos do site e do projeto ajuda a definir:

As metas prioritárias do veículo (inclusive as prioridades e as influências políticas de cada stakeholder).

Como o canal web se relaciona com outras mídias ou produtos de marketing integrados à política de veiculação de conteúdo organizacional.

A conceituação editorial e o tratamento do conteúdo para o público, o que conduz a experiência do usuário, o que cria empatia e o que atende às suas necessidades (de informação, produtos, serviços, participação), o que gera valovalor.

As forças, fraquezas, oportunidades e ameaças (SWOT) do projeto, da equipe, do produto final.

As linhas gerais para o controle de qualidade e a avaliação dos resultados, sob o ponto de vista da organização e dos clientes, incluindo a programação dos testes da interface, frequência, investimentos necessários.

As linhas gerais para o controle dos riscos do projeto.

A conceituação editorial e comercial do conteúdo a ser arquivado, identificando sua aderência aos objetivos estratégicos, verificando como será indexado e a abrangência desta indexação (se exaustiva, com mais pontos de acesso, ou seletiva, com nível de acesso limitado). Os objetivos vão sendo atualizados aos poucos e delineam acesso, ou seletiva, com nível de acesso limitado). Os objetivos vão sendo atualizados aos poucos e delineam diferentes pontos de vista sob os quais os resultados do projeto são avaliados. Norteiam também os objetivos dos subprojetos (subsites, processos, funcionalidades) que podem derivar do projeto principal.

Capítulo 6 | Objetivo do projeto

10


CRIACAO | DESIGN UX


Os objetivos de um web site combinam diversos processos de negócios, como:

Vender produtos e serviços.

Publicar informações para públicos segmentados.

Disponibilizar ferramenta de busca a banco de dados.

Apresentar uma organização e sua missão.

Reforçar uma marca.

Criar comunidades de pessoas em torno de ideias, pessoas, interesses comuns.Criar comunidades de pessoas em torno de ideias, pessoas, interesses comuns.

Compartilhar arquivos de imagens, vídeos, sons.

Ministrar treinamentos.

Veicular jogos e entretenimento.

Estabelecer conexões com (e entre) os colaboradores, fornecedores e parceiros.

Compartilhar e divulgar conhecimento.

11


CRIACAO | DESIGN UX


Se você estiver criando uma interface do usuário, você deve considerar criar personas para ajudá-lo. Personas são uma das ferramentas básicas de design de experiência do usuário (UX). Um persona é uma descrição de uma pessoa fictícia que representa um segmento de usuário do software que você está desenvolvendo. É claro, a palavra "fictícia" se aplica a pessoa não a descrição; que deve ser como grounded na realidade possível. O fato quepersonas são criados por meio de um ato de ficção levou a algumas pessoas a pergunta seu valor inteiramente. Tais críticas são útil se ele funciona como um lembrete de que o personas são criados em dados isto é, por sua natureza, incompleta e imperfeita. Mas personas Entretanto são bastante útil. Entre suas vantagens, personas:natureza, incompleta e imperfeita. Mas personas Entretanto são bastante útil. Entre suas vantagens, personas:

Habilite os designers a fazer inferências sobre as necessidades e desejo de segmentos de público-alvo.

Servir para se comunicar características do usuário de maneira facilmente compreendida e compacta.

Ajudar a manter os participantes alterem a definição de segmentos de público-alvo para Avançar interesses estreitas.

Colocar um rosto sobre a pessoa para quem você está criando a interface do usuário.

Como criar PersonasComo a maioria dos elementos de design, personas podem ser desenvolvidos iterativamente. E como a maioria dosComo a maioria dos elementos de design, personas podem ser desenvolvidos iterativamente. E como a maioria dos elementos de design, existem vantagens para criar os personas se de forma colaborativa. Envolvendo os interessados e outros membros da equipe aumenta a precisão do Norbert e cria um nível de conhecimento sobre os usuários que ajuda a equipe de alinhar ao redor delas. Como as pessoas tornam-se familiarizado com os personas, iniciarem falando sobre eles como se fossem pessoas reais. Quando isso acontece, você tiver obtido um foco valioso. Personas não precisará ser complexo para ser útil. Normalmente eu comece criando breves contornos dos personas com base em conversas com pessoas que conhecem o público-alvo, como vendedores ou a equipe de personas com base em conversas com pessoas que conhecem o público-alvo, como vendedores ou a equipe de serviço de cliente. Chamo esses personas "personas assumptive" porque eles não são baseados em dados reais.

Às vezes, isso é tudo o que precisa tempo ou recursos para fazer. Mas uma prática melhor é Entrevistar usuários e usar os dados coletados para validar e refinar os personas. Em alguns casos, as organizações executar dados abrangentes de coleta e análise, usando uma variedade de técnicas de pesquisa ethnographic, para criar personas altamente refinados.

É ótimo ter realmente bem pesquisadas personas, mas mesmo que você pode criar juntos apenas poucas simples assumptive personas, você descobrirá que eles são ferramentas de design realmente útil.assumptive personas, você descobrirá que eles são ferramentas de design realmente útil.

Por que Personas trabalho isso caixaPersonas toque em uma habilidade humana fundamental — a capacidade de fazer previsões sobre como outras pessoas reagirá com base em modelos mental deles. Geralmente, um pode prever com precisão como um amigo fechar ou membro da família será reagir a um evento específico e decidir como agir com base nessas Inferências.

Obviamente, suposições sobre como as pessoas vai comportar-se de uma determinada situação podem não estar corretas e você normalmente fazer erros de inferência.

No entanto, a capacidade para confiável prever o comportamento de outros usuários é essencial para sobrevivência No entanto, a capacidade para confiável prever o comportamento de outros usuários é essencial para sobrevivência e humanos são cognitively well-equipped para fazer isso. Esse é o que torna o persona tão poderoso. Quando você cria modelos do seu público-alvo, você não conseguir fazer inferências sobre como eles reagirá para as opções de design feitas.

Capítulo 7 | Entendimento do usuário ou personas

12


CRIACAO | DESIGN UX


Tipos de suporte de Personas InferênciasHá uma série de maneira que você pode usar personas para facilitar o processo de design. Você pode usá-los para:

Ajudá-lo a escolher entre várias alternativas de design, selecione aquele que o usuário de destino é mais provável que preferir.

Ajudar a definir as prioridades para recursos em consideração, diferenciando entre o usuário precisa e o que é uma boa com.boa com.

Decidir o que irá envolver um usuário.

Decidir o que será ofensiva ou fazer com que não confiar.

Determinar se uma interface de usuário único servirá todos os usuários ou se você precisar criar várias interfaces de usuário.

Obviamente, sempre que possível você deve verificar as decisões de design feitas por meio de testes de usabilidade ou outra interação direta com o usuário.

Quantos Personas?Quantos Personas?Mais interativos produtos possuem vários segmentos de público-alvo. Isso sugere que você deve construir personasvários. No entanto, com muitas personas, o processo pode obter fora do lado. Como regra prática, três ou quatro personas são suficiente para a maioria dos projetos. Se você achar que você está criando mais de cinco ou seis, pare e reconsidere. Muitos especialistas achar que você deve designar um persona como o principal persona e tratar os outros como secundário. As decisões do projeto deve ser feitas com o persona principal em mente e testadas (por meio de um experimento de pensamento) contra os personas secundários. Em seguida, você pode adicionar design adicionais para abordar qualquer necessidades unmet de personas secundários. Se você não adicionar design adicionais para abordar qualquer necessidades unmet de personas secundários. Se você não conseguir reconciliar personas primárias e secundários, ele pode sugerir que você precisa considerar interfaces de usuário distintas.

Em geral, inclua os seguintes elementos no persona descrições:

Nome da pessoa e fotos.

Uma cotação ou o slogan que captura a personalidade.

Dados demográficos (sexo, idade, estado civil, Dados demográficos (sexo, idade, estado civil, família, onde reside a pessoa).

Formação educacional.

Trabalho.

Fatores de estilo de vida e objetivos.

Competência do computador e o uso.

Valores e posturas.

13


CRIACAO | DESIGN UX


Para facilitar o entendimento, pode-se observar a aplicação da A.I. por etapas. Abaixo serão apresentadas algumas aplicações e respectivas ferramentas consideradas importantes. O conteúdo textual precisa ser organizado e rotulado para que o usuário possa encontrá-lo facilmente, para isso, é dividido em pedaços que receberão rótulos e estes rótulos poderão ser agrupados, os grupos rotulados e assim sucessivamente.

O card sorting é uma ferramenta aplicada para entender como o usuário organiza as informações na mente, sendo eficaz para definir os rótulos mais próximos da realidade do público-alvo.

Basicamente trata-se da distribuição de cartões com rótulos ou conteúdo, para que o usuário faça a correspondência Basicamente trata-se da distribuição de cartões com rótulos ou conteúdo, para que o usuário faça a correspondência que considera lógica, em alguns casos os rótulos são preenchidos pelo próprio usuário.

Definidos os rótulos, é necessário definir o fluxo da navegação, ou seja, os caminhos que o usuário percorrerá até cada informação. Esse processo de navegação pode ser representado por meio de fluxogramas que são bases para outra ferramenta, o mapa do site – lista hierárquica com links diretos para os conteúdos das páginas.

O fluxograma não depende necessariamente da rotulação.

Com a organização mental do texto definida, é necessário determinar a localização desse conteúdo na página física,Com a organização mental do texto definida, é necessário determinar a localização desse conteúdo na página física,a interface.

Essa distribuição deve considerar tanto elementos textuais quanto imagens e animações, e deve ser feita aplicando conceitos de diagramação para evidenciar a hierarquia de importância das informações.

Capítulo 8 | Ideação: fluxogramas, wireframe e lista de recursos

14


CRIACAO | DESIGN UX


Desenvolve-se o rascunho da página apontando a localização dos itens, o wireframe, como numa planta de arquitetura.

Um wireframe deve mostrar como uma página se comporta de uma perspectiva da arquitetura, deve exibir os elementos de navegação, e definir quais os elementos terão maior destaque do conteúdo.

Os wireframes estão no limite entre a arquitetura da informação e o design de interface. Ao construir um wireframe, o arquiteto pensa no limite espacial da página e é forçado a fazer escolhas sobre quais elementos da arquitetura devem estar visíveis e acessíveis aos usuários.devem estar visíveis e acessíveis aos usuários.

O desenvolvimento do wireframe ajuda ainda a decidir o agrupamento de componentes de conteúdo, como ordená-los e priorizá-los.

15


CRIACAO | DESIGN UX


Existem vários testes de usabilidade que designers podem fazer para avaliar se um design serve ao propósito dele, qualquer que seja.

Teste A/BTestes de usabilidade servem para avaliar se um design serve ao propósito dele: é fácil de identificar o telefone da empresa no cartaz criado? Dá pra encontrar a seção de contato no site em um só clique? O que é esse site e pra que ele serve? E por aí vai. Não preciso nem dizer que o objetivo do designer é de responder perguntas – afinal, é isso que o design é. E existem vários testes que podem ser feitos para responder a estas perguntas: desde isso que o design é. E existem vários testes que podem ser feitos para responder a estas perguntas: desde dinâmicas de grupo até entrevistas individuais com pessoas aleatórias – mas o mais fácil de criar é o Teste A/B.

Imagine um campeonato de futebol. Um time joga contra o outro, e quando um perde é eliminado do campeonato.

No fim, só vai restar o melhor. O Teste A/B funciona assim. Eventualmente o design que melhor se adequar a pro-posta ganha, e indiferente se você estiver comparado dois designs ou cem, você deve conseguir informação útil que te diz o que funciona melhor.

E o E o Teste A/B pode ser utilizado desde o início do processo de design, desde sketches a wireframes ao resultado final. Este teste de usabilidade pode nos ajudar a chegar a uma solução adequada.

Como funciona um Teste A/B?É bem simples: você oferece duas versões (ou mais) de um mesmo design. Metade das pessoas que vão fazer o teste vendo a versão A, a outra metade a versão B. Perguntas simples são feitas aos usuários e eles clicam no local da imagem onde eles acreditam que esta informação esteja. Após um certo número de testes, um mapa de cliques é gerado e o designer pode ver onde os usuários acreditam que fica o conteúdo. Além disto, é também analisado o tempo levado para que o usuário encontrasse o que foi pedido. Por exemplo, eu poderia mostrar duas analisado o tempo levado para que o usuário encontrasse o que foi pedido. Por exemplo, eu poderia mostrar duas versões do Design Blog e redirecionar metade do meu tráfego pra um, e metade para o outro – no primeiro, a página de contato estaria identificada como “Contato“, no segundo como “Fale conosco“. Faria perguntas simples aos usuários, como “Onde que fica a seção de contato?” ou, melhor ainda, “Onde você acharia um e-mail para contato?“.

Capítulo 9 | Lançamento: teste de a/b, usabilidade, acessibilidade, eye tracking

16


CRIACAO | DESIGN UX


O usuário clicaria na área da imagem onde ele acredita que esta informação ficaria, e então eu posso analisar qual das soluções funciona melhor: a palavra “Contato” ou “Fale conosco”. E assim por diante.

Existem também ferramentas que auxiliam na criacao de Testes A/B, como as soluçoes da Google:

Existem scripts que geram mapas de cliques (em inglês, heat maps) mas que precisam ser configurados para o propósito. Um site bom que faz testes assim é o IntuitionHQ que cobra apenas US$ 9. Uma alternativa gratuita é o Google Website Optimizer, mas aí você teria que ter um conhecimento mediano de HTML e JavaScript.

O GoogleO Google Analytics oferece uma ferramenta de criação de URL que gera links para você, incorporando as informa-ções de campanha especificadas. Essa ferramenta garante a sintaxe correta dos seus links. É importante utilizar nomes e grafias consistentes em todos os valores de variáveis da sua campanha. Por exemplo, escolha um código ou um nome que indique "custo por clique" e utilize-o de modo consistente. Para o Google Analytics, utm_medium=cpc e utm_medium=cost_per_clicksão mídias diferentes.

Use o Google Analytics com a ferramenta Otimizador de website gratuita do Google para ter outras opções de testeque são mais rápidas e mais fáceis de implementaque são mais rápidas e mais fáceis de implementar. De acordo com as suas necessidades, você pode usar o Otimizador de website para Testes A/B ou multivariáveis. Saiba quais são as experiências certas para você. Antes de usar o Otimizador de website e o Google Analytics juntos, você precisará fazer inscrição em uma conta.

UsabilidadeTécnicas que ajudam os seres humanos a realizarem tarefas em meios gráficos de computador. 3 conceitos muito importantes. Trabalhamos para seres humanos, que querem realizar uma tarefa de uma forma simples e eficaz e neste caso particularmente, devem realizá-la frente ao computador em um meio gráfico, a web. A usabilidade ajuda a que esta tarefa se realize de uma forma simples analisando o comportamento humano, e os passos necessários a que esta tarefa se realize de uma forma simples analisando o comportamento humano, e os passos necessários para realizar a tarefa de uma forma eficaz. Talvez soa um pouco como um trabalho industrial, mas ao fazer referên-cia ao termo "tarefa", estamos nos referindo a buscar um programa que queremos ver na tv, ou ver informação sobre um time de futebol favorito, ou comprar um livro sobre artes marciais, por exemplo.

Seja sua web um portal ou uma página pessoal, não se esqueça que as pessoas que entram em sua web basica-mente entram porque buscam algo. Para tornar isso mais simples a decisão é sua, mas certamente entre todos nós podemos fazer da internet um lugar melhor onde as pessoas não se sintam perdidas ou extraviadas ou simplesme-podemos fazer da internet um lugar melhor onde as pessoas não se sintam perdidas ou extraviadas ou simplesme-nte defraudadas.

8 regras de Ouro sobre a usabilidade1. Na internet o usuário é quem manda: Isto quer dizer que sem usuários sua página morre, portanto mais vale que cuide bem deles e dê o que te pedem, caso contrário, você ficará sozinho.

2. Na internet a qualidade baseia-se na rapidez e na confiança: Na internet conta que a sua página seja mais que rápida que bonita, confiável que moderna, simples que complexa, e direta.

3. Segurança: 3. Segurança: Se na vida real às vezes nos custa confiar no banco da esquina, imagina como se sente as pessoas na internet quando chegam no seu site. Procure fazer com que tudo funcione como um relógio para que o pessoal possa confiar no seu site.

4. A confiança é algo que custa muito ganhar e pode se perder com um simples link quebrado: Isto quer dizer que tal como está a competência na internet, não se pode perder nem um só visitante por ter um link mal feito. É melhor sair com algo simples e ir complicando pouco a pouco, do que sair com tudo e ver "o que acontece". Versões 1.0 são boas enquanto o que esteja posto gere confiança. Pouco a pouco e com o feedback dos usuários, poderá ir são boas enquanto o que esteja posto gere confiança. Pouco a pouco e com o feedback dos usuários, poderá ir complicando a página. Mas tenha certeza antes de arriscar.

17


CRIACAO | DESIGN UX


5. Se quiser fazer uma página decente, simplifique, reduza, e otimize: As pessoas não vão decorar tudo que houver no seu site por muito que insista, portanto faça-o pelo menos simples, utilize todos os elementos que puder, para que deste modo os usuários sintam-se cômodos e não se percam cada vez que necessitem encontrar algo em seu site.

6. Coloque as conclusões no início: O usuário se sentirá mais cômodo ao ver as metas ao princípio. Desta forma não terá que buscar o que necessita e perderá menos tempo em completar sua tarefa. Se ele completa sua tarefa em menos tempo se sentirá cômodo e talvez se dedique a explorar seu site ou inclusive, talvez o recomende a um em menos tempo se sentirá cômodo e talvez se dedique a explorar seu site ou inclusive, talvez o recomende a um amigo. 7. Não faça as pessoas perderem o tempo com coisas que não necessitam: Cuidado com as promoções, se fizer pelo menos faça com cuidado. Procure fazer com que a seleção de produtos a exibir seja conseqüente e não seja do tipo "vender tudo" em todas as páginas. Segundo avance o usuário em sua navegação procure deixar mais espa-ço livre. Pode acontecer de na hora de comprar algo veja uma oferta que lhe distraia e perca essa venda.

8. Bons conteúdos: 8. Bons conteúdos: Escrever bem para internet é uma arte. Contudo, seguindo as regras básicas de colocar as con-clusões no princípio e (2) escrever como um 25% do que você colocaria em um papel, com isso pode-se chegar longe. Ler na tela custa muito, portanto, no caso de textos para internet, reduza e simplifique tudo o que puder.

Testes de Usabilidade e Avaliações de ErgonomiaO teste de usabilidade é uma técnica formal que pode envolver usuários representando a população alvo para aque-le determinado sistema. Estes usuários são designados para desenvolver tarefas típicas e críticas havendo com issouma coleta de dados para serem posteriormente analisados. Contudo o teste de usabilidade caracteriza-se por uma coleta de dados para serem posteriormente analisados. Contudo o teste de usabilidade caracteriza-se por utilizar diferentes técnicas voltadas em sua maioria para a avaliação da ergonomia dos sistemas interativos.

Avaliação Heurística;

Critérios Ergonômicos;

Inspeção Baseada em Padrões, Guias de Estilos ou Guias de Recomendações;

Inspeção por Checklists;

Percurso (ou Inspeção) Cognitivo;

TTeste Empírico com Usuários.

Entrevistas e Questionários;

18


CRIACAO | DESIGN UX


AcessibilidadeA expressão Acessibilidade, presente em diversas áreas de atividade, tem também na informática um importante significado. Representa para o nosso usuário não só o direito de acessar a rede de informações, mas também o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipa-mentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos.

Não é fácil, a princípio, avaliar a importância dessa temática associada à concepção de páginas para a web. Mas os dados W3C (Consórcio para a WEB) e os dados W3C (Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na Rede) apontam situações e características diversas que o usuário pode apresentar:

Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade - quando não a impossibilidade - de interpretar certos tipos de informação.

Dificuldade visual para ler ou compreender textos.

Incapacidade para usar o teclado ou o mouse, ou não dispor deles.

Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma ligação muito lenta à Internet.

Dificuldade para falar ou compreendeDificuldade para falar ou compreender, fluentemente, a língua em que o documento foi escrito.

Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a caminho do emprego, ou no trabalho em ambie-nte barulhento.

Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completamente diferente dos ha-bituais, ou por voz ou sistema operacional menos difundido.

Essas diferentes situações e características precisam ser levadas em conta pelos criadores de conteúdo durante a concepção de uma página. Para ser realmente potencializador da acessibilidade, cada projeto de página deve pro-porcionar respostas simultâneas a vários grupos de incapacidade ou deficiência e, por extensão, ao universo de porcionar respostas simultâneas a vários grupos de incapacidade ou deficiência e, por extensão, ao universo de usuários da web.

Os autores de páginas em HTML obtêm um maior domínio sobre as páginas criadas, por exemplo, com a utilização e divisão de folhas de estilo para controle de tipos de letra, e eliminação do elemento FONT. Assim, além de torná-las mais acessíveis a pessoas com problemas de visão, reduzem seu tempo de transferência, em benefício da totalidade dos usuários.

PrincípiosPrincípios para a acessibilidade na WEB:Princípios para a acessibilidade na WEB: A acessibilidade à web é parte integrante do projeto brasileiro de inclusão digital para as pessoas portadoras de necessidades especiais. No início do processo de adaptação dos sítios exis-tentes a esse novo conceito, foram estabelecidos princípios gerais que, embora sem a garantia de total acessibilida-de, favorecem seu conhecimento e experimentação por parte dos responsáveis. São os seguintes:

1. Quanto à apresentação da informação: Associação de um texto a cada elemento não textual, como imagens, representações gráficas de texto, regiões de mapa de imagem, animações, botões gráficos etc.

2. Quanto à navegação: 2. Quanto à navegação: Garantia de que as ligações textuais ou com um equivalente textual sejam palavras ou expressões compreensíveis e que os elementos da página possam ser ativados pelo teclado.

19


CRIACAO | DESIGN UX


3. Quanto à implantação: Utilização dos requisitos de acessibilidade de conteúdo da WEB do W3C/WAI, disponí-veis em português (www.acessobrasil.org.br) ou inglês (www.cast.org/bobby) .

4. Quanto à página principal: Exposição do símbolo de acessibilidade na web.Entre as várias versões existentes, recomendamos a versão brasileira em logotipos.html, sendo necessário que se associe a essa imagem a ligação a uma página com o seguinte texto:

Esse símbolo de acessibilidade não garante que o sítio tenha 100% de acessibilidade, mas que os responsáveis porele tenham desenvolvido esforços no sentido de torná-lo acessível a todos. Nela também deverão constar informa-ele tenham desenvolvido esforços no sentido de torná-lo acessível a todos. Nela também deverão constar informa-ções gerais sobre a acessibilidade do sítio e o endereço eletrônico do responsável por sua criação.

Desenho UniversalSão pressupostos do conceito de desenho universal: 1. Equiparação nas possibilidades de uso: O design é útil e comercializável às pessoas com habilidades diferenciadas.

2. Flexibilidade no uso: 2. Flexibilidade no uso: O design atende a uma ampla gama de indivíduos, preferências e habilidades.

3. Uso Simples e intuitivo: O uso do design é de fácil compreensão, independentemente de experiência, nível de formação, conhecimento do idioma ou da capacidade de concentração do usuário.

4. Captação da informação: O design comunica eficazmente ao usuário as informações necessárias, independente-mente de sua capacidade sensorial ou de condições ambientais.

5. Tolerância ao erro: O design minimiza o risco e as conseqüências adversas de ações involuntárias ou imprevistas.

6. Mínimo esforço físico: 6. Mínimo esforço físico: O design pode ser utilizado com um mínimo de esforço, de forma eficiente e confortável.

7. Dimensão e espaço para uso e interação: O design oferece espaços e dimensões apropriados para interação, alcance, manipulação e uso, independentemente de tamanho, postura ou mobilidade do usuário.

A visão dos cegosAs pessoas portadoras de deficiência visual podem navegar pela Internet, utilizando um programa de leitura de tela.

Estes programas vão passando por textos e imagens e sintetizando a fala humana. Basicamente, o programa lê para a pessoa o que está na tela.

Fazendo uma analogia com a leitura de uma tela de site acessível e de um site não adaptado, apresentamos um Fazendo uma analogia com a leitura de uma tela de site acessível e de um site não adaptado, apresentamos um exemplo visual.

http://www.acessobrasil.org.br/ciiee/cego.htm

20


CRIACAO | DESIGN UX


Validadores de AcessibilidadeDA SILVA: Possui versão para a avaliação segundo as diretrizes brasileiras de acessibilidade do governo Eletrônico -EMAG, mas tem também a possibilidade de uma avaliação segundo o W3C, baseado no WCAG, que pode ser interessante para as pessoas que estejam iniciando no entendimento de como se faz acessibilidade. Não é, no enta-nto, um avaliador de excelência.

http://www.dasilva.org.br/

Hera: Hera: Parece ser, atualmente, o mais completo e inteligente dos validadores.

http://www.sidar.org/hera

Examinator: (em português) Excelente como o Hera, produz um incentivo didático de dar uma nota avaliadora da acessibilidade. O profissional se constrange em produzir uma página com uma nota baixa. Além disso, possui um relatório qualitativo ensinando como produzir a acessibilidade que falta e dando os parabéns para os itens de ace-ssibilidade já existentes na página.

http://www.acesso.umic.pt/webax/examinator.php

Cynthia Says:Cynthia Says: possui um relatório não tão simples de ser entendido para seus novos usuários, mas também bem conhecido e utilizado internacionalmente.

http://www.cynthiasays.com/

EYE TRACKINGO movimento ocular é tipicamente dividido entre fixações e movimentações. A série resultante das fixações e movi-mentações é chamada “caminho do escaneamento”.

A maior parte das informações do olhar são obtidas durante as fixações, e não durante as movimentações. Os locaisde fixação em um “caminho de escaneamento” demonstram quais informações foram processadas durante uma de fixação em um “caminho de escaneamento” demonstram quais informações foram processadas durante uma sessão de eye tracking.

Em média, as fixações levam por volta de 200 milisegundos durante a leitura de um texto, e 350 milisegundos dura-nte a visualização de uma imagem.

A movimentação e fixação em um novo objetivo toma por volta de 200 milisegundos. A análise de um “caminho de escaneamento” tem se mostrado útil para se realizar análises de intenção cognitivas, de interesse e de realce. Estasdiferentes “intenções” resultam em tempos levemente diferentes de fixação.

Como um exemplo de uso do eye tracking, a ilustração abaixo demonstra como usuários “visualizam” a homepage Como um exemplo de uso do eye tracking, a ilustração abaixo demonstra como usuários “visualizam” a homepage do website do Banco Real durante os primeiros 20 segundos.

21


CRIACAO | DESIGN UX


Finalidades do eye-trackingExistem dois componentes primários para a maioria dos estudos de eye tracking: análise estatística (esta quantifica onde os usuários olham, às vezes diretamente, e às vezes baseando-se em modelos de engajamento cognitivo) e renderização gráfica.

Nos últimos anos, o aumento da sofisticação e acessibilidade às tecnologias de eye tracking criaram uma grande demanda de interesse nos setores comerciais e empresariais, tendo como foco aplicações comuns incluindo usabi-lidade na web, publicidade, design, etc. No geral, estudos comerciais de eye tracking funcionam através da apresen-lidade na web, publicidade, design, etc. No geral, estudos comerciais de eye tracking funcionam através da apresen-tação de um foco de estímulo visual para uma amostra de consumidores enquanto um eye tracker é utilizado para gravar a movimentação do olhar.

Os dados resultantes podem ser analisados em esfera estatística e renderizados graficamente para demonstrar evidências de padrões visuais específicos. Examinando as fixações e movimentos, dilatação da pupila, piscar de olhos e uma variedade de outros comportamentos, pesquisadores podem determinar uma grande quantidade de informações sobre uma dada mídia ou produto. Especificamente, eye tracking pode ser utilizado para medir a eficiência de localização, branding, publicidade online, usabilidade navegacional, design geral e muitos outros com-eficiência de localização, branding, publicidade online, usabilidade navegacional, design geral e muitos outros com-ponentes de um site.

A fhios tem executado uso extensivo do eye tracking em vários cenários web, incluindo:

Análise do estado real (real state) de homepages e de páginas chave de um site.

Estudo de priorização de navegação. Análise de e-mails.

Agregando sentido aos dados de eye-tracking.Agregando sentido aos dados de eye-tracking.

Vários estudos tem se focado no entendimento de como os usuários ?lêem? e-mails, particularmente e-mails que são enviados como confirmação para processos finalizados online (ex. compras e/ou mensagens de marketing).

Estes estudos tem claramente ilustrado um comportamento inicial de ?scanning? e ?browsing? dos usuários quandoolham para estes e-mails, mais do que leitura linear dos mesmos. Através da análise do tempo de fixação, tem sidotambém possível avaliar como usuários estão lendo e-mails, o que lhes chama atenção no texto e quais palavras, frases e sentenças estão sendo ignoradas.

Mais Estudos:Mais Estudos:

Texto atrai a atenção antes de gráficos .

Não modifique as convenções só para ser ?original?.

Leitores ignoram os banners.

Formatações e fontes extravagantes são ignorados.

Mostre números como números.

O tamanho das fontes influencia o comportamento visual.

Usuários só lêem um subtítulo se este os interessa. Usuários só lêem um subtítulo se este os interessa.

As pessoas normalmente escaneam as partes baixas da página e muito mais...

22


CRIACAO | DESIGN UX


O que devemos saber de mais importante em Design UX, é que seus métodos e ferramentas servem para organizar toda estrutura de um projeto, visando sempre trazer novas experiências aos usuários, tudo que é feito em Designde UX é para o usuário final, que irá consumir, iteragir e ficar engajado com a marca e produtos oferecidos de umaempresa ou mesmo seus serviços.

Para maiores informações, dúvidas ou pedidos de ebooks, por favor entrar em contato pelo site:www.sobretech.com.br ou por email: [email protected].

Acesse tambem nosas Redes Socias e #Compartilhe esse ebook:Acesse tambem nosas Redes Socias e #Compartilhe esse ebook:

Att,

Equipe Sobretech -Tecnologia, Design e Entreterimento a um clique.

:-)Obrigado!

Conclusão

23


CRIACAO | DESIGN UX

Documents

Qual a importância do Design de UX para desenvolver projetos digitais