Livros estudados

Refactoring ui
maneira frustante
a maneira mais frustante de começar, é começar a desenhar um
aplicativo
o aplicativo é um conjunto de recursos
antes de começar a desenhar o recursos, você nem mesmo tem as
informações necessárias para tomar uma decisão sobre como a
navegação deve funcionar.
o que é shell
é um recurso de qualquer sistema operacional
começando do zero
maneira fácil
comece com a real funcionalidade da tela
começe com um recurso, não com um layout
serviço de reserva de voo, comece com o procurar um voo
um campo para a cidade de partida
um campo para a cidade de destino
um campo para a data de partida
um campo para data de retorno
botão para realizar a pesquisa
o detalhe vem depois
não fique preocupado com detalhes de baixo nivel, eles virão em
outro momento
use uma caneta grossa para não precisar fazer detalhes
segure a cor
mesmo quando estiver pronto para refinar um projeto
você é forçado a trabalhar hierarquia, constraste e espaçamento
não invista demais
protótipos de baixa só servem para tomar decisões e descarta-los
não projete demais
pensar em cada recurso como vai interagir ou como cada caso
extremo deve ser, é muito difícil
trabalhe em ciclos
Comece projetando uma versão simples do próximo recurso que
você deseja criar.
é mais fácil criar assim do que do nada, mas vc saberá quais os
problemas surgirão com algo em mãos.
em seguida, volte para o próximo recurso
iterar até não ter mais problemas
seja pessimista
Construa ele sempre com a menor ideia possível, não adicione
uma funcionalidade que não conseguira terminar ou que não tem
braço para fazer.
muitas vezes é deixado uma ideia de lado por não ter tempo para
construi-lo
Se parte de um recurso for “bom de se ter”, projete-o
posteriormente . Construa a versão simples primeiro e você
sempre terá algo para recorrer.
escolha uma personalidade
 Cada projeto tem algum tipo de personalidade
dependo do projeto pode ser sério ou divertido, alguns fatores
determinam isso como:
escolha uma fonte
Se você quer um visual elegante ou clássico, você pode querer
incorporar um tipo de letra com serifa em seu design
Para um visual divertido, você pode usar um sem serifa
arredondado:
cores
muito disso é apenas sobre o que parece bom para você
raio da borda
arrendondado
muito redondo já traz um lance mais divertido
meio termo
Um pequeno raio de borda é bastante neutro e não comunica
muita personalidade por conta própria
duro
quando é muito, traz a sensação de seriedade
pode trazer um grande impacto no seu design
misturar os 2, é péssima ideia
Linguagem
as palavras estão em todos os lugares da interface, saber qual é a
melhor é tão importante quanto a cor que vai utilizar
Usar um tom menos pessoal pode parecer mais oficial ou
profissional:
uma linguagem mais amigável e casual faz um site parecer,
bem, mais amigável:
decidindo o que você quer
benchmarketing para identificar como os concorrentes utilizam, se
são mais divertidos ou sérios, te trará um spectro de como seguir
só não copia para não parecer um versão pior do seu concorrente
limite as escolhas
ter diversas escolhas é ruim, você acaba não sabendo qual é o
melhor ou pior. Limite a quantidade de opções de atomos
projetando no processo de eliminação
escolha uma opção parece melhor    para você, e depois pegue a
variação e coloque do lado, uma de cada lado. E assim faça a
escolha. Caso escolha da lateral é a melhor, façå novamente,
escolha a do lado e escolha a melhor
Essa abordagem funciona para qualquer coisa em que você
tenha definido um sistema. Quando você está limitado a um
conjunto de opções que parecem visivelmente diferentes,
escolher a melhor é fácil.
Sistematize tudo
Quanto mais sistemas você tiver, mais rápido será capaz de
trabalhar e menos terá que adivinhar suas próprias decisões.
todos os componentes que precisam de uma baixa decisão de
design
Sistematize tudo
Hierarquia é tudo
Nem todos os elementos são iguais
Hierarquia visual é a ferramenta mais importante para deixar algo
bem projetado
não enfatizando os elementos secundário ou terceiros, mas
destacando somente os elementos primários, o destaque já
acontece
tamanho não é tudo
É um erro muito grande deixar somente o tamanho para controlar
a hierarquia
não trabalhe somente com o tamanho da fonte
utilize a Cor
usar uma cor mais suave para manter o texto de apoio, deixa
o elemento secundário. E não sacrifica a legibilidade
utilize o Peso
deixar o texto em negrito reforça sua importância primária
peso é quando você tem negrito no conteúdo ou mais area na
superfície
Peso é também o tamanho de um elemento esta na superfície
contraste é quanto escuro claro ele é
regras
primaria
Uma cor escura para o conteúdo principal
secundária
Um cinza para conteúdo secundário
menos ênfase
etiquetas, rótulos de dados
terciário
Um cinza mais claro para conteúdo terciário (talvez o aviso de
direitos autorais em um rodapé)
para retirar a ênfase, mude o peso ou diminua o tamanho da
fonte
Peso de fonte
normal
400 ou 500 dependendo da fonte) para a maioria dos textos
fique longe de fontes menores de 400 para interfaces
pesado
(600 ou 700) para o texto que você deseja enfatizar
Não use texto cinza em cores
fundos
textos cinzas em fundos brancos tiram a ênfase, mas no fundos
coloridos não ficam bom
o que vemos no branco é redução do contraste
Fundos coloridos
tornar o texto mais próximo da cor de fundo é o que realmente
reduz o contraste
fica desbotado, fica sem brilho, e pode parecer desativado
não utilize a opacidade, utilize uma cor mais próxima do fundo
utilize saturação
utilize a claridade
Enfatizar por desenfatizar
 Quando você não esta conseguindo enfatizar mais um elemento
primário, agora a ideia e tirar ênfase do elemento que esta em
destaque mais
se for uma area grande, você pode pensar em remover a cor do
elemento do fundo e deixa-la com o fundo da tela
As etiquetas são um último recurso
O problema com essa abordagem é que ela dificulta a
apresentação dos dados com qualquer tipo de hierarquia; cada
parte dos dados recebe a mesma ênfase.
etiquetas
nome, email, endereço = dados do banco de dados
Você pode não precisar de um rótulo
você reconhece como é formato de cada rotulo
formato do e-mail
telefone
preço
Quando o formato não é suficiente, o contexto geralmente é
o nome do departamento de alguém indica onde trabalha e
não precisa do rotulo departamento
Combinar rótulos e valores
mesmo que um dado não é completamente claro sem o rótulo é
possível utilizar a estratégia de combinar rótulos em valores
evite
estoque: 12 item
quartos: 3
prefira
12 em estoque
3 quartos disponíveis
deixar mais dialogicos
Rótulos são secundários
Nessas situações, adicione o rótulo, mas trate-o como conteúdo
de suporte. Os dados em si são o que importa, o rótulo está lá
apenas para maior clareza.
Retire a ênfase do rótulo tornando-o menor, reduzindo o
contraste, usando um peso de fonte mais leve ou alguma
combinação dos três.
quando enfatizar um rótulo
quando você sabe que o usuário buscará pelo nome do campo
e não pelo valor dele exemplo, quando o usuário buscará por
dimensão e não pelo valor 4.5mm
dar ênfase utilizando um peso maior no dado ou reduzindo o
contraste do valor
ênfase no rotulo e não no valor
Separe a hierarquia visual da hierarquia do documento
faz sentindo um h1 ser semanticamente ter mais destaques que
outros elementos, mas geralmente são mais utilizados com rótulos
do que para o conteúdo principal
não deveriam chamar tanta atenção
geralmente o conteúdo é mais importante, os titulos de seção
devem ser bem pequenos
 você pode escolhe-los para fins semânticos, mas não deixe eles
influenciaram na decisão de hierarquia visual
equilibrar peso e contraste
a diferença entre textos em negrito    e texto normal é a quantidade
de pixel sobre a superfície, isso faz com que o elemento tenha
mais ênfase
isso é importante porque isso está estreitamente ligado a
hierarquia visual da interface com outros elementos
Constrate é a cor entre claro e escuro
Peso é quando o elemento tem mais area do que a superficie
usando o contraste para equilibrar o peso
os icones sólidos quando eles são paralelamente ligados ao
negrito das fontes, quando ele tem uma cor chapada, ele fica
com uma ênfase muito maior.
O ideal é deixa-lo com uma cor mais suave para que ele tenha
equilibrio entre o texto e o icone
isso funciona em qualquer lugar onde vc precise balancear os
elementos. Reduzir o contraste funciona como um contrapeso,
fazendo com que os elementos mais pesados pareçam mais
leves, mesmo que o peso não tenha mudado.
usando peso par compensar o contraste
assim como o contraste ajuda e diminuir a ênfase do peso, o
peso pode ajudar muito a dar ênfase a elemento de pouco
contraste
se você tem uma borda de 1 um pix é aumentar o contraste
ele deixará o design bem bagunçado
aumente a largura do elemento = area de preenchimento =
Peso
aumente o peso (area preenchida) do elemento que ele trará
esse o constraste sem ser agressivo
semântica é secundária
quando há várias ações que o usuário pode fazer numa pagina,
você pode cair na armadilha de projetar pensando somente na
semântica
quando vc adota uma hierarquia, mantem uma clareza na página
Geralmente as paginas possuem um hierarquia de importância
ações primárias
ação verdadeira
devem ser obvias, fundo sólido e alto constraste
devem ser obvias, fundo sólido e alto constraste
ações secundárias
menos importante
devem ser claras, mas não destacadas, contornos, cores de
fundo com menos destaque
ações terciárias
quase ninguém utiliza
deve ser detectáveis, mais discretas, ações como link
ações destrutivas
cai não mesmo conceito, se não for a principal ação da pagina
ela deve seguir o conceito mencionado
 secundário
terciário
caso seja a principal ação
utilizar ação primária
disposição e espaçamento
comece com muito espaço em branco
uma maneira mais simples de deixar um design limpo, é dar espaço
para ele respirar
parece simples, porque não fazemos isso?
é mais fácil remover espaço do que aplicar
o espaço em branco deve ser removido e não adicionado
geralmente o que fazemos é dar espaço para coisas que achamos
que ficou apertado
essa abordagem é ruim já que acabamos dando espaços iguais
para todos os elementos
issa abordagem fica ativamente menos ruim
para ficar ótimo
dar no começo muito espaço e ir removendo as poucos até que
fique realmente satisfeito
você pode achar que ficará com muito espaço em branco, mas
focando em um único elemento, sentirá que é apenas suficiente
deixa a sensação de mais limpa e simples
para ficar realmente bom
Ui densas tem o seu lugar
ter espaços mais ocupados quando você precisa que todos os
elemento sejam visiveis para o usuário, por exemplo paineis
só faz isso depois de uma decisão deliberada
Estabeleça um sistema de espaçamento e dimensionamento
de forma arbitraria por exemplo, 12px e muda para 25px
na melhor das hipótese
reduzirá drasticamente a sua velocidade
na pior das hipótese
criará designs feios e inconsistentes
uma escala linear, não funcionara
certifique-se de que tudo é um múltiplo de 4px, isso é tão ingênuo
do que 12px ou 15px
no extremo menor, uma mudança de 4px pode representar um
acréscimo de 33% enquanto no layout maior, esse tamanho é
quase imperceptível
o ideal é não ter um aumento que represente mais do 25%
definindo um sistema
comece com a extremidade menor com 0.25%, (16*0.25), e vai
crescendo os décimos a medida que a extremidade fica muito
mais para o final
Usando o sistema
Precisa adicionar algum espaço sob um elemento? Pegue um
valor da sua escala e experimente. Não é o suficiente? O
próximo valor é provavelmente perfeito.
Você não precisa preencher toda a tela
antigamente as telas eram de 960px hoje não existe um celular
 com uma resolução tão baixa. hoje com monitores maiores, temos
a sensação de que precisamos preencher todas a area
Se você precisar apenas de 600px, use 600px
Espalhar as coisas ou torná-las desnecessariamente amplas
apenas dificulta a interpretação da interface
Encolher a tela
se precisa criar um tela para mobile e desktop, reduza a tela
primeiro, e desenvolva a tela, depois aumente a tela e e ajuste
para o tamanho, você não terá tanta dificuldade
Pensando em colunas
se você tem um formulário que você acha que pode ficar dividido
em colunar, ficará melhor sem comprometer a design,
pense em colunas
Se você quiser fazer melhor uso do espaço disponível sem
tornar o formulário mais difícil de usar, você pode dividir o texto
de suporte em um Isso faz com que o design pareça mais
equilibrado e consistente sem comprometer a largura ideal para
o próprio formulário. coluna:
não o force
como vc não precisa preencher a tela inteira, também não
precisa amontoar tudo.
não o force
as grandes são superestimadas
usar uma grade de 12 colunas para desktop pode deixar seu layout
satisfatório e de ordem, mas cuidado, terceiriza todas as decisões
para a grade é ruim
Nem todos os elementos devem ser fluidos
dependendo do contexto, manter uma barra lateral fixa e deixar o
conteúdo principal com fluidez, é melhor que deixar tudo fluído, é
interessante especificar alguns elementos em fixo e fluído
é interessante também para componentes
Não encolha um elemento até que você precise para caber na
grade
não precisa construir elementos que não precisam de um
tamanho maior do que o necessário, é muito mais importante se
orientar para tamanho menores, reduzindo para caber
Não seja escravo da grade - dê aos seus componentes o espaço
de que precisam e não faça concessões até que seja realmente
necessário
O dimensionamento relativo não é dimensionado
A redução de 25% de um elemento A não se aplica no elemento B,
justamente porque não é garantia que ele tamanho se aplica a tudo
Como regra geral, elementos que são grandes em telas grandes
precisam encolher mais rápido do que elementos que já são
razoavelmente pequenos - a diferença entre elementos pequenos
e elementos grandes deve ser menos extrema em telas pequenas
Relacionamentos dentro dos elementos
para cada elemento, é interessante ter tamanhos diferentes, para
que possam ter padrões especificas, não necessariamente
precisa ter espaçamentos como ampliações, você pode diminuir
 usando outras lógicas
Deixe de lado a ideia de que tudo precisa ser dimensionado
proporcionalmente – dar a si mesmo a liberdade de ajustar as
coisas de forma independente torna muito mais fácil projetar
para vários contextos.
evite espaçamentos ambiguos
Quando grupos de elementos são separados explicitamente —
geralmente por uma borda ou cor de fundo — fica óbvio quais
elementos pertencem a qual grupo.
se o usuário tiver um elemento que não tem a separação por linha e
sim por espaço e nesse espaço tiver a mesma margem de cima
com a de baixo o usuário não cria uma ideia do que faz parte com o
que
na melhor hipótese
O usuário tem que trabalhar mais para interpretar a interface do
usuário
na pior das hipóteses
significa colocar acidentalmente os dados errados no campo
errado
solução
é aumentar o espaço em cada grupo e dentro do grupo diminuir
o espaçamento para identificar quais são os componentes de
cada elemento
Sempre que você estiver confiando no espaçamento para
conectar um grupo de elementos, sempre certifique-se de que
haja mais espaço ao redor do grupo do que dentro dele —
interfaces difíceis de entender sempre parecem piores.
isso serve para horizontal e vertical
texto de design
Estabeleça uma escala de tipo
não escolher um sistema de fontes é ruim por 2 motivos
1. Isso leva a inconsistências irritantes em seus projetos.
2. Atrasa seu fluxo de trabalho.
Escolhendo uma escala
salto menores em momentos reduzidos funciona bem
para contexto maiores, decidir entre 46px e 48px não tem relevância
balança modulares
começa com um número 16px padrão da web e vai multiplicando
por 1.618,    4:5 ou 2:3 ( dois pontos significa divisão na
matemática).
ela é atraente, mas gera muitos números fracionários, o ideal é
que    arredonde esses números
Você geralmente precisa de mais tamanhos
escalas modulares para interface não são muito legais justamente
porque você precisa entre cada tamanho, um tamanho intermediário
você utilizar outras escalas, mas no final você esta utilizando
aquilo que mais te convêm
balança feito a mão
Para design de interface, uma abordagem mais prática é
simplesmente selecionar valores manualmente.    Desta forma você
 não fica presa a formulas matemáticas e não precisa ficar
arredondo para funcionar
12, 14, 16px
Evite unidade Em
ele fará um calculo referente a fonte pai, e isso acaba atrapalhando
as fontes que são aninhadas
utilize px ou rem
Use boas fontes
diverta com segurança
um fonte neutra sam serirfe - helvética
não confia no seu gosto, utilize fonte de sistema
ignore fontes com menos de 5 pesos
o motivo é que fontes com mais estilos tendem a ser melhor
elaboradas, no google é possível filtrar fontes atraves do estilo,
escolha fontes apartir de 10 para incluir italic
Otimizar para legibilidade
titulo
. As fontes destinadas a títulos geralmente têm espaçamento
entre letras mais apertado e letras minúsculas mais curtas (uma
altura x mais curta),
corpo
enquanto as fontes destinadas a tamanhos menores têm
espaçamento entre letras mais amplo e letras minúsculas mais
altas
Confie na sabedoria da multidão
se uma fonte é muito popular, realmente ela é boa
A maioria dos diretórios de fontes permite que você classifique por
popularidade, então essa pode ser uma ótima maneira de limitar
suas escolhas.
Roubar de pessoas que se importam
Inspecione alguns de seus sites favoritos e veja quais tipos de letra
eles estão usando.
Desenvolvendo sua intuição
Quando você começa a prestar mais atenção à tipografia em sites
bem projetados, não demora muito para que você se sinta à
vontade para rotular um tipo de letra como incrível ou terrível.
Mantenha o comprimento da linha sob controle
Ao estilizar parágrafos, é fácil cometer o erro de ajustar o texto ao seu
layout em vez de tentar criar a melhor experiência de leitura.
Para uma melhor experiência de leitura, faça seus parágrafos com
largura suficiente para caber entre 45 e 75 caracteres por linha
mantenha entre 45 a 75caracteres
Lidando com conteúdo mais amplo
Se estiver misturando texto de parágrafo com imagens ou outros
componentes grandes, você ainda deve limitar a largura do
parágrafo,
Linha de base, não central
quando vc tem na minha linha texto com um tamanho diferente e
outras menores, geralmente queremos centralizar no meio.
linhas distantes não aparecem tanto
 linhas pertos, ficam estranhas
alinhe seus conteúdos na linha base
Ao alinhar tamanhos de fonte mistos por sua linha de base, você
está aproveitando uma referência de alinhamento que seus olhos
já percebem
A altura da linha é proporcional
geralmente dizem que a altura de uma linha deve ser 1.5px acima
da leitura normal.
isso ocorre quando você lê a mesma linha 2 vezes, significa que a
altura da linha é menor ao ponto de você se confundir
Contabilização do comprimento da linha
o problema da legibilidade amplifica também quando o tamanho
do paragráfo é muito grande, você acaba se perdendo.
Esse problema é ampliado quando as linhas de texto são
longas. Quanto mais seus olhos tiverem que pular
horizontalmente para ler a próxima linha, mais fácil será perder
o seu lugar.
Isso significa que a altura da linha e a largura do parágrafo devem
ser proporcionais – o conteúdo estreito pode usar uma altura de
linha mais curta, como 1,5, mas o conteúdo amplo pode precisar
de uma altura de linha de até 2.
Contabilizando o tamanho da fonte
textos pequenos
Quando o texto é pequeno, o espaçamento extra entre linhas é
importante porque torna muito mais fácil para seus olhos
encontrar a próxima linha quando o texto é quebrado
titulos
um texto de título grande, você pode não precisar de
espaçamento de linha extra, e uma altura de linha de 1 é
perfeitamente adequada.
A altura da linha e o tamanho da fonte são inversamente
proporcionais - use uma altura de linha mais alta para texto
pequeno e uma altura de linha menor para texto grande.
Nem todo link precisa de uma cor
dentro de um bloco de texto é importante que esse link se parece
clicável
numa interface onde tudo é clicavel, não é legal mostrar essa
aparência
pensa em enfatizar com uma cor mais escuro ou um peso maior
Se você tiver links em sua interface que são realmente auxiliares e
não fazem parte do caminho principal que um usuário percorre pelo
aplicativo, considere adicionar um sublinhado ou alterar a cor
apenas ao passar o mouse.
Alinhar com legibilidade em mente
no geral dependendo da origem da lingua o alinhamento é na
esquerda
não centralize texto longo
centralize somente quando houver no máximo 2 linhas
maior que 2 linhas, centralize a esquerda
entre todos os itens houve somente um item maior que duas linhas,
 pense em reescrever esse item e diminuí-lo
Números alinhados à direita
sempre que houver um tabela, lista o numeral ficará a direita
Quando o decimal em uma lista de números está sempre no
mesmo lugar, é muito mais fácil compará-los rapidamente.
Texto justificado com hífen
texto justificado tem uma aparência bem legal, mas o ideal é que
sempre que utilizar o alinhamento justificado, habilite a hifenização
aqui é quando você quer imitar algum jornal ou revista, mas a
linhar a esquerda funciona também
texto justificado tem uma aparência bem legal, mas o ideal é que
sempre que utilizar o alinhamento justificado, habilite a hifenização
Melhorando a legibilidade em maiúsculas
Use o espaçamento entre letras de forma eficaz
Como regra geral, você deve confiar no designer do tipo de letra e
deixar o espaçamento entre letras em paz
Manchetes apertadas
Quando alguém projeta uma família de fontes, eles a projetam com
um propósito em mente.
fontes para textos
quando você tem uma fonte de texto e quer utiliza-la para títulos,
você pode diminuir o espaçamentos entre elas para deixa-las
condensadas (0.5)
fontes para titulos (evitar(
fazer essa alteração aumentando o espaçamento para títulos,
geralmente não funciona bem
Melhorando a legibilidade em caixa alta
geralmente as caixas altas com o espaçamento padrão, deixa a
legibilidade ruim. O ideal é criar um espaçamento (0,5) paa
Trabalhando com cores
Hexagonal de vala para HSL
RGB e Hexadecimais são os modelo de cor mais presentes no
mercad digital, mas não são os mais uteis
HSL ele é uma ferramenta mais próxima do que o olho humano vê ele
apresenta
Matiz
é a posição de uma cor na roda de cores - é o atributo de uma cor
que nos permite identificar duas cores como “azul” mesmo que
não sejam idênticas.
saturação
é o quão colorida ou vívida uma cor parece. 0% de saturação é
cinza (sem cor) e 100% de saturação é vibrante e intenso
Sem saturação, o matiz é irrelevante — girar o matiz quando a
saturação é 0% não altera a cor em nada.
leveza
A leveza é exatamente o que parece mede o quão perto uma cor
está do preto ou do branco
0% de leveza é preto puro
100% de leveza é branco puro
50% de leveza é uma cor pura no tom fornecido.
 não confundir com o HSB que utiliza o Brilho e não a leveza
HSB é mais comum que HSL em software de design, mas os
navegadores só entendem HSL, então se você está projetando
para a web, HSL deve ser sua arma de escolha.
Você precisa de mais cores do que pensa
esquemas de cores na internet e sedutor, mas é útil
O que você realmente precisa
cinza
Texto, planos de fundo, painéis, controles de formulário – quase
tudo em uma interface é cinza.
8 a 10 tons = O preto verdadeiro tende a parecer pouco natural,
então comece com um cinza bem escuro e vá até o branco em
incrementos constantes.
cores de ação primaria
5 a 10 tons = ações primárias, elementos de navegação ativos de
tons mais claros e mais escuros para escolhe
Tons ultra claros podem ser úteis como fundo colorido para
alertas, enquanto tons mais escuros funcionam muito bem para
texto.
Cores de destaque
destacar um novo recurso
Além das cores primárias, todo site precisa de algumas cores de
destaque para comunicar coisas diferentes ao usuário.
você também pode precisar de cores para enfatizar diferentes
estados semânticos
vermelho para confirmar uma ação destrutiva
amarelo para uma mensagem de aviso:
verde para destacar uma tendência positiva:
Se você estiver criando algo em que precisa usar cores para
distinguir ou categorizar elementos semelhantes (como linhas em
gráficos, eventos em um calendário ou tags em um projeto), talvez
precise de ainda mais cores de destaque
Defina seus tons na frente
Quando você precisa criar uma variação mais clara ou mais escura de
uma cor em sua paleta defina um conjunto fixo de tons na frente que
você pode escolher enquanto trabalha.
como montar uma paleta
Escolha a cor base primeiro
Comece escolhendo uma cor base para a escala que você deseja
criar – a cor no meio na qual seus tons mais claros e mai escuros
se baseiam
encontrando as bordas
O tom mais escuro de uma cor geralmente é reservado para o
texto
tom mais claro pode ser usado para tingir o plano de fundo de um
elemento.
Comece com uma cor que corresponda ao tom da sua cor base e
ajuste a saturação e a luminosidade até ficar satisfeito.
Preenchendo as lacunas
para mais detalhes de como construir utilizando as lacunas,
 verificar o livro
Não deixe a leveza matar sua saturação
a medida que você altera sua luminosidade de 0% a 100%, sua
leveza altera o tom e eles parecem desbotados
para que esse comportamento não aconteça, você pode ir a medida
que altera a leveza, aumentando a saturação para deixar as cores
mais intensas novamente
Use o brilho percebido a seu favor
cada matiz tem uma luminosidade diferente, isso ajuda a dar mais
brilho, as vezes utilzar a levez, pode deixar a cor branca e não um
tom mais claro da suas cores
para tirar o efeito de branco, você move sua matiz para um lado mais
escuro ou mais claro da cor, para que gere essa tonalidade diferente
sem ficar o aspecto de branco
Alterando o brilho girando a tonalidade
Como matizes diferentes têm um brilho percebido diferente, outra
maneira de alterar o brilho de uma cor é girando seu matiz.
cor clara
60, 180, 300
cor escura
0,120,240
Ao girar gradualmente o tom para mais laranja à medida que você
diminui a luminosidade, os tons mais escuros parecerão quentes e
ricos em vez de opacos e marrons:
É claro que você também pode combinar essas abordagens,
obtendo um pouco do brilho ajustando o matiz e outro ajustando a
luminosidade.
Cinzas não precisam ser cinzas
o cinza verdadeiro ele tem 0% de saturação, mas na pratica, ele
possuem muita saturação
a idea aqui é deixar uma saturação para dar um tom diferente, fica
com um aspecto muito bom
Temperatura de cor
Se você quiser que seus cinzas pareçam legais, sature-os com um
pouco de azul:
Para dar a seus cinzas uma sensação mais quente, sature-os com
um pouco de amarelo ou
Para manter uma temperatura consistente, não se esqueça de
aumentar a saturação para os tons mais claros e mais escuros
Acessível não precisa significar feio
cores escuras no fundo branco tudo bem.
simbolo ~ significa semelhança
simbolo : significa divisão
Invertendo o contraste
quando utilizado um fundo colorido com a fonte branca, não fica
muito claro
se alterar a cor de contraste do fundo para um mais escuro, ele
ganhará destaque na interface e isso é ruim
Em vez de usar texto claro em um fundo de cor escura, use texto
de cor escura em um fundo de cor clara
 Girando a tonalidade
Ainda mais difícil do que o texto branco em um fundo colorido é o
texto colorido em um fundo colorido.
Bem, como algumas cores são mais brilhantes que outras, uma
maneira de aumentar o contraste sem se aproximar do branco é
girar a tonalidade para uma cor mais brilhante, como ciano,
magenta ou amarelo.
Não confie apenas na cor
A cor pode ser uma maneira fantástica de aprimorar as informações
e torná-las mais fáceis de entender, mas tome cuidado para não
confiar nelas, ou usuários com daltonismo terão dificuldade em
interpretar sua interface do usuário
Uma solução fácil para isso é também comunicar essa informação
de alguma outra forma, como adicionar ícones para indicar se a
mudança é positiva ou negativa.
quando se tem muitas possibilidades para cor, uma das formas é
utilizar o contraste
Em situações como essa, tente confiar no contraste em vez de
usar cores completamente diferentes. É muito mais fácil para
alguém que é daltônico dizer ao
diferença entre claro e escuro do que é para eles dizer a diferença
entre duas cores distintas
Criando Profundidade
Emular uma fonte de luz
alguns sistemas operacionais possuem elementos que apresentam
um luz que possibilita um aspecto de luminosidade
luz vem de cima
verifique uma porta, ela recebe uma luz que vem de cima por isso o
elemento parece mais claro na parte superior
quando um elemento é fazendo fica evidente que o fundo nesse caso
é mais claro que o fundo
Simulando luz em uma interface de usuário
Se você quiser que um elemento apareça em relevo ou inserido,
primeiro descubra qual perfil você deseja que esse elemento tenha e,
em seguida, imite como uma fonte de luz interagiria com essa forma.
detalhes de como construir, verificar o livro
Use sombras para transmitir elevação
usando com inteligência, trarão uma sensação de profundidade
menor
para algo como um botão, onde você deseja que o usuário
perceba, mas não quer que ele domine a página
media
são úteis para coisas como listas suspensas; elementos que
precisam para ficar um pouco mais acima do resto da interface do
usuário
grande
são ótimas para diálogos modais, onde você realmente deseja
capturar a atenção do usuário:
Quanto mais próximo algo estiver do usuário, mais atrairá seu foco.
Estabelecendo um sistema de elevação
 Comece definindo sua menor sombra e sua maior sombra, depois
preencha o meio com sombras que aumentam de tamanho de forma
bastante linear
Combinando sombras com interação
eles são uma ótima maneira de fornecer dicas visuais ao usuário à
medida que ele interage com os elementos também
normal e onclick
no norma a sombra fica aparente apos o click ela se desfaz
As sombras podem ter duas partes
Já inspecionou uma sombra muito boa em um site e notou que eles
estavam usando duas sombras?
primeira sombra
A primeira sombra é maior e mais suave com o setting vertical
considerável e um grande raio de desfoque. Ele simula a sombra
projetada atrás de um objeto por uma fonte de luz direta.
segunda sombra
A segunda sombra é mais fechada e escura, com menos setting
vertical e um raio de desfoque menor. Ele simula a área
sombreada sob um objeto onde até mesmo a luz ambiente tem
dificuldade e alcança
Contabilização de elevação
se você for usar essa técnica de duas sombras em seus próprios
projetos, certifique-se de tornar essa sombra mais sutil para sombras
que representam uma elevação mais alta.
Mesmo designs planos podem ter profundidade (flat design)
projetar sem sombras, gradientes ou quaisquer outros elementos que
tentem imitar como a luz interage com as coisas do mundo real
mesmo assim os design flat possuem profundidades
Criando profundidade com cor
no geral, especialmente com tons da mesma cor, objetos mais
claros parecem mais próximo de nós e objetos mais escuros,
distantes
claros
objetos mais claros com o plano de fundo mais escuro fazem
parecer mais elevados
escuros
objetos mais escuros com plano de fundo mais escuros, fazem
parecer mais que estão em profundidade
Usando sombras sólidas
removendo o setting de desfoque e deixando ela mais dura
Sobreponha elementos para criar camadas
Uma das maneiras mais eficazes de criar profundidade é sobrepor
elementos diferentes para dar a impressão de que um design tem
várias camadas
como icones que transbordam de um cartão para que seja visto a
navegação, ou um elemento que fica entre a transição de cada seção
de uma pagina
Elementos sobrepostos também podem adicionar profundidade a
componentes menores, por exemplo, os controles neste carrossel:
Imagens sobrepostas
 você pode utilizar uma borda invisivel para separar as imagen
Um truque simples para evitar isso é dar às imagens uma “borda
invisível” – uma que corresponda à cor de fundo – para que sempre
haja um pouco de espaço entre as imagens:
cria um efeito de sobreposição
Trabalhando com Imagens
Use boas fotos
O texto precisa de contraste consistente
Adicionar uma sobreposição
Uma maneira de aumentar o contraste geral do texto é adicionar
uma sobreposição semitransparente à imagem de fundo.
Diminua o contraste da imagem
Um dos compromissos que você faz ao usar uma sobreposição é
que você está clareando ou escurecendo toda a imagem, não
apenas as áreas problemáticas.
Se você quiser mais controle, outra solução é diminuir o contraste
da própria imagem:
Diminuir o contraste mudará o quão clara ou escura a imagem
parece em geral, portanto, certifique-se de ajustar o brilho para
compensar.
Colorir a imagem
Outra maneira de ajudar o texto a se destacar em relação a uma
imagem é colorir a imagem com uma única cor.
Diminua o contraste da imagem, para equilibrar um pouco as coisas
Desaturar a imagem, para remover qualquer cor existente.
Adicione um preenchimento sólido, usando o modo de mesclagem
“multiplicar
Adicionar uma sombra de texto
Se você quiser preservar um pouco mais da dinâmica em uma
imagem de fundo, uma sombra de texto pode ser uma ótima
maneira de aumentar o contraste apenas onde você precisar.
Ainda é uma boa ideia reduzir o contraste geral da imagem, mas
combinar isso com uma sombra de texto significa que você pode
reduzi-lo um pouco menos.
Tudo tem um tamanho pretendido
Todo mundo sabe que dimensionar imagens de bitmap para maiores
do que o tamanho original é uma má ideia – elas imediatamente se
sentem “difusas” e perdem sua definição.
Não aumente os ícones
Eles carecem de detalhes e sempre se sentem
desproporcionalmente “volumosos”.
Se os ícones pequenos são tudo o que você tem, tente colocá-los
dentro de outra forma e dar à forma uma cor de fundo:
cria uma caixa e adicione o icone lá para dar esse aspecto de
grande que você necessita
Isso permite que você mantenha o ícone real mais próximo do
tamanho pretendido, enquanto ainda preenche o espaço maior.
Não reduza as capturas de tela
Se você fizer uma captura de tela em tamanho real e reduzi-la em
70% para ajustá-la, acabará com uma imagem que está tentando
 colocar muitos detalhes em muito pouco espaço
Se você quiser incluir uma captura de tela detalhada em seu design,
faça a captura de tela em um tamanho de tela menor (como talvez o
layout do seu tablet) e salve
Ou considere fazer apenas uma captura de tela parcial, para que
você possa exibi-la em menos espaço sem precisar reduzi-la:
Melhor ideia
Se você realmente precisar ajustar uma captura de tela de todo o
aplicativo em um espaço apertado, tente desenhar uma versão
simplificada da interface do usuário com detalhes removidos e
texto pequeno substituído por linhas simples, fica muito bom para
onboarding
Também não reduza os ícones
O exemplo mais extremo disso são os favicons, aqueles pequenos
ícones que você vê ao lado do título da página em uma guia do
navegador.
Uma abordagem melhor é redesenhar uma versão super
simplificada do logotipo no tamanho desejado, para que você
controle os compromissos em vez de deixar isso para o
Cuidado com o conteúdo enviado pelo usuário
Quando você depende de imagens enviadas pelo usuário, não tem
o luxo de ajustar o contraste, ajustar cuidadosamente as core ou
cortar a imagem perfeita quadro
Controle a forma e o tamanho
Em vez de permitir que os usuários causem estragos na estrutura
da sua página, centralize suas imagens dentro de contêineres
fixos, cortando qualquer coisa que não se encaixe.
Prevenir sangramento de fundo
Quando um usuário fornece uma imagem com uma cor de plano
de fundo semelhante ao plano de fundo em sua interface do
usuário, a imagem e o plano de fundo podem sangrar juntos,
fazendo com que a imagem perca sua forma.
Em vez de tentar resolver isso com uma borda, tente usar uma
caixa interna sutil sombra:
ou sombra insert que resolver muito bem com uma leve
transparência
Se você não gosta da leve aparência de “inserção” que você
obtém ao usar uma sombra de caixa, uma borda interna
semitransparente também funciona muito bem.
box-shadow, insert (0,0,0,1) canal alpha 10%
Toques finais
Sobrecarregue os padrões
Você nem sempre precisa adicionar novos elementos a um design
para adicionar brilho – há muitas maneiras de animar uma página
“sobrecarregando” o que já está lá.
marcadores
Por exemplo, se seu design inclui uma lista com marcadores, tente
substituir os marcadores por ícones:
você também pode usar algo mais específico para seu conteúdo,
como um ícone de cadeado para uma lista de recursos
 relacionados à segurança
citações
Da mesma forma, se você estiver trabalhando em um depoimento,
tente “promover” as citações em elementos visuais aumentando o
tamanho e alterando a cor
links
Você pode fazer algo tão simples quanto alterar a cor e o peso da
fonte, ou algo tão sofisticado quanto um sublinhado personalizado
grosso e colorido que se sobrepõe parcialmente ao texto
formulários
Se você estiver trabalhando em um formulário, usar caixas de
seleção e botões de opção personalizados é uma maneira fácil de
adicionar um pouco de cor ao design:
Apenas usar uma das cores da sua marca para os estados
selecionados em vez dos padrões do navegador geralmente é
suficiente para deixar algo chato para parecer polido e bem
projetado.
Adicione cor com bordas de destaque
Um truque simples que pode fazer uma grande diferença é
adicionar bordas de destaque coloridas a partes de sua interface
que, de outra forma, pareceriam um pouco sem graça.
para destacar itens de navegação ativos:
ou para destacar itens de navegação ativos:
ou como um pequeno acento abaixo de um título:
ou mesmo na parte superior de todo o seu layout
Decore seus fundos
Mesmo se você fizer um ótimo trabalho com hierarquia,
espaçamento e tipografia, às vezes um design ainda parecerá um
pouco simples.
Alterar a cor de fundo
Isso funciona muito bem para enfatizar um painel individual, bem
como para adicionar alguma distinção entre seções de página
inteiras.
Para um visual mais enérgico, você pode até usar um leve
gradiente:
Para melhores resultados, use dois tons que não estejam
separados por mais de 30°.
Use um padrão de repetição
Outra abordagem é adicionar um padrão repetível sutil,
Você também não precisa necessariamente repeti-lo em todo o
plano de fundo - um padrão projetado para repetir ao longo de
uma única borda também pode parecer ótimo.
Mantenha o contraste entre o fundo e o padrão bem baixo para
garantir a legibilidade
Adicione uma forma ou ilustração simples
Em vez de decorar um fundo inteiro, você também pode tentar
incluir um gráfico individual ou dois em posições específicas.
formas geométricas simples funcionam bem
Assim como com um padrão de fundo completo, é melhor
manter o contraste baixo para que nada interfira no conteúdo
Não negligencie estados vazios
Se você estiver projetando algo que depende de conteúdo
gerado pelo usuário, o estado vazio deve ser uma prioridade,
não uma reflexão tardia
Se você estiver trabalhando em algo que tenha várias interfaces
de usuário compatíveis, como guias ou filtros, considere ocultar
totalmente as informações. Não adianta apresentar um monte
de ações que não fazem nada até que o usuário tenha criado
algumas
apresente somente a tela vazia com informações e próximos
passos
Os estados vazios são a primeira interação de um usuário
com um novo produto ou recurso. Use-os como uma
oportunidade de ser interessante e excitante – não se
contente com coisas simples e chatas
Use menos bordas
Embora as bordas sejam uma ótima maneira de distinguir dois
elementos um do outro, elas não são a única maneira, e usar
muitas delas pode fazer com que seu design pareça ocupado e
confuso.
Use uma sombra de caixa
As sombras de caixa fazem um ótimo trabalho ao delinear um
elemento como uma borda faria, mas podem ser mais sutis e
atingir o mesmo objetivo sem ser tão perturbadores
Use duas cores de fundo diferentes
Dar aos elementos adjacentes cores de fundo ligeiramente
diferentes é geralmente tudo o que você precisa para criar
distinção entre eles.
Se você já estiver usando cores de fundo diferentes além de
uma borda, tente remover a borda; você pode não precisar
dele.
Adicionar espaçamento extra
Espaçar mais as coisas é uma ótima maneira de criar
distinção entre grupos de elementos sem introduzir nenhuma
nova interface do usuário
Pense fora da caixa
fomos condicionados a acreditar que há apenas uma maneira
de projetar um componente específico, não significa que seja
verdade
Mas quem disse que um dropdown precisa ser uma lista chata
de links? É apenas uma caixa flutuante na tela, você pode
fazer o que quiser com ela.
Quando você imagina uma tabela, provavelmente pensa em
colunas, cada uma contendo um dado específico
você pode criar tabelas utilizando informações de outras
colunas e reduzindo as informações além de ficar um
charme
No entanto, as tabelas não precisam funcionar dessa
maneira - se uma coluna não precisa ser classificável, não
há motivo para você não combiná-la com uma coluna
 relacionada e introduzir uma hierarquia interessante:
O conteúdo da tabela também não precisa ser texto simples.
Adicione imagens se fizer sentido ou introduza alguma cor
para enriquecer os dados existentes
se for radio button pense em utilizar cartões clicáveis
Se um conjunto de botões de opção for uma parte
importante da interface do usuário que você está projetando,
tente algo como cartões selecionáveis:
Não deixe que suas crenças existentes atrapalhem seus
projetos – as restrições são poderosas, mas às vezes um pouco
de liberdade é exatamente o que você precisa para levar uma
interface para o próximo nível.
subindo de nível
Procure por decisões que você não teria feito
Sempre que você se deparar com um design que realmente goste,
pergunte a si mesmo:
“O designer fez alguma coisa aqui que eu nunca teria pensado em
fazer?
Talvez seja a maneira como eles inverteram a cor de fundo em um
datepicker:
…ou a maneira como eles posicionaram um botão dentro de uma
entrada de texto em vez de no fora
Prestar atenção a esses tipos de decisões não intuitivas é uma ótima
maneira de descobrir novas ideias que você pode aplicar aos seus
próprios projetos.
Reconstrua suas interfaces favoritas
A melhor maneira de perceber os pequenos detalhes que fazem um
design parecer
realmente polido é recriar esse design do zero, sem espiar as
ferramentas do desenvolvedor.
UI COMMUNICATION
introdução
As tarefas devem ser projetadas para serem autoexplicativas e que focar no propósito
de cada etapa de uma tarefa é a melhor maneira de torná-las assim
steve jobs
por me ajudar a entender o lado humano da tecnologia
Don Normam (design do dia a dia)
por me ajudar a entender os princípios que tornam os designs intuitivos
Alan cooper (about face)
por me ajudar a entender o design centrado no usuário, direcionado a objetivos e
socialmente aceitável
“No momento em que um usuário vê sua interface do usuário, ela comunica onde eles
chegaram, o que podem fazer e como devem fazê-lo.... Descubra o que você quer que
seja essa mensagem e faça tudo o que puder para garantir que a mensagem que sua
interface do usuário envie seja o mais próximo possível da que você pretendia'
Para os usuários, a experiência do usuário é o produto
o sucesso do produto depende do bom design da interface do usuário
o processo tradicional de brainstorming, prototipagem, teste de usuário e
refinamento funciona muito bem, especialmente quando você não tem ideia do que
mais fazer
A UI É O CONCEITO DE COMUNICAÇÃO
A interface de usuário é essencialmente uma conversa entre usuários e um produto
para realizar tarefas que atingem os objetivos dos usuários
a interface do usuário difere da conversa por não possuir uma linguagem natural
 e sim uma linguagem de interface do usuário
a interface do usuário bem projetada precisa
comunicar de forma natural
ser profissional
ser amigável
facil de entender
ser eficiente
interface mal projetada
não é natural
tecnológica
e mecânica
exige que o usuário apliquem pensamento
experimentação
memorização
treinamento para traduzi-la em algo significativo
subjetiva
o design da interface do usuário não é uma arte visual subjetiva
sobre pixels e estética
Ao focar na comunicação– tornam-se muito mais objetivas.
as decisões de cor, icone e itens deixam de ser subjetivas
para ser objetivas
objetiva
o design da interface é uma habilidade de comunicação objetiva
baseada em princípios para explicar tarefas aos usuários
Beleza, estilo e moda são amplamente subjetivos, mas o que
constitui uma explicação de tarefa compreensível e intuitiva para
o usuário-alvo não é.
Cada elemento da interface do usuário pode ser avaliado pela
eficácia com que se comunica
se o usuário precisa traduzir sua UI em algo significativo, você
DEVE usar essa versão traduzida e significativa
se tiver elementos que não comunicam nada, devem remove-los
se sua interface for inapropriada, rude em pessoa, ela será em UI
icones confusos, rotulos, controles, fluxos confusos, precisam de
ajuda, são formas de problemas de comunicação
abordar a comunicação permite que você aproveite as habilidades de
comunicação interpessoais que praticou a vida toda
O resultado dessa abordagem é naturalmente centrado no usuário e
na meta do usuário.
Uma boa interface do usuário é projetada para se comunicar com
pessoas, não com robôs, por isso é humana comunicação
muitos problemas de interface para produtos bem concebidos é
falha na comunicação
confuso
difíceis de usar
e não intuitivos
um pergunta: Devo usar uma caixa de seleção ou usar botões de
opção?
O que você está tentando comunicar?” conduz a decisão
fornecendo uma opção que pode ser ativada ou desativada,
uma caixa de seleção
se você estiver fornecendo dois ou mais estados independentes
botões de opção
 Por outro lado, se você tomar essas decisões com base no design
por comitê, design por cópia, preferência pessoal ou intuição, é
provável que esteja fazendo errado
opniões pessoais e subjetivas
o que eu gosto versus o que você gosta
geralmente quem grita mais alto ou o chefe vence
APIs
interface de programação de aplicativos
PARA QUE TECNOLOGIAS DE UI É ESTE LIVRO?
Em termos de comunicação humana eficaz se aplica a todas as
interfaces de usuário, de aplicativos móveis a desktops, de sites a
sistemas embarcados. Ele se aplica até mesmo a interfaces de
usuário orientadas por voz
IU VS. UX, E POR QUE ESSA UX NÃO É COMO COMUNICAÇÃO?
UI
É o que os usuários veem e sentem diretamente ao usar um
produto. É o que conecta os usuários à tecnologia (de baixo dos
panos) de um produto
O design da interface do usuário aborda as ações que os usuários
devem fazer
um bom produto pode ter uma interface de usuário bem projetada
para sua configuração inicial
HABILIDADES DE UI
processo geral de design
diretrizes de design de princípios de design
propostas de valor,
cenários,
personas,
decisões orientadas por dados,
simplicidade,
prototipagem e cultura de equipe
DESIGN DE INTERAÇÃO
Programação de interface do usuário
planejamento de produtos
design gráfico,
arquitetura da informação,
pesquisa de usuários,
branding
assistência ao usuário
UX
Engloba toda a experiência que os usuários têm com um produto.
Essa experiência inclui a interface do usuário, mas também
transcende a interface do usuário para incluir
internos
Com os quais os usuários não interagem diretamente
externos
como o processo de compra
experiência inicial do produto
suporte técnico ao cliente
marca do produto etc
 o design da experiência do usuário também aborda ações que os
usuários não precisam fazer
a boa experiência de usuário pode tornar essa configuração inicial
desnecessária em primeiro lugar
Design de comunicação Principios
é uma conversa entre o produto e o usuário para executar uma tarefa
que atinge um objetivo do usuário
princípios básicos de um design intuitivo
interações individuais
tarefas inteiras
como fazer perguntas para o usuário
comportamento típico do usuário
erros comuns no momento de projetar
como projetar para si
considerar apenas uma solução
focar em tecnologia e recursos em vez de objetivos e tarefas do
usuário
Seus designs de página serão confusos, excessivamente
complicados e fora do padrão
a comunicação entre as pessoas tendem a ser:
seja natural
amigável
linguagem simples
seja orientado por objetivos
orientado por resultados
metas
muito objetivo;
explicamos cuidadosamente por que as pessoas precisam fazer as
coisas
Siga os modelos mentais da pessoa
os fluxos de trabalho naturais
como um programa funciona
como uma tarefa deve ser executada
seja simples, direto ao ponto
a comunicação através da tecnologia
não é natural
usando linguagem e tom técnicos
Seja tecnológico ou mecanicamente orientado
raramente se preocupando em explicar o porquê.
Acompanhe o funcionamento do código,
revelando as estruturas de dados brutos.
Seja excessivamente complicado
trabalhando em detalhes sem importância.
devemos utilizar essencialmente como conversamos para dentro da
interface, é um erro comum expor a tecnologia subjacente para o
usuário, achando que ele deve se comportar como escrevemos códigos
Um ótimo design de interface do usuário geralmente se resume à
comunicação com os usuários como fazemos pessoalmente: de uma
maneira simples, natural, amigável e focada nos objetivos do usuário
PRINCÍPIOS PRINCIPAIS DA UI É A COMUNICAÇÃO
 Princípio nº 1: UI é Comunicação
É uma conversa entre o usuário e o produto que tem como objetivo
executar uma tarefa do usuário
Comece o design entendendo o que você precisa comunicar o
usuário
deixe que a comunicação comunique o processo de design e
também o design da interface do usuário
Princípio nº 2: Explique as tarefas de forma clara e concisa, como
faria pessoalmente
A chave é entender que a interface do usuário não é um tipo de
comunicação completamente diferente
é a mesma comunicação usando uma linguagem ligeiramente
diferente.
Princípio nº 3: Cada elemento de interface do usuário pode ser
avaliado pelo que ele comunica e com que eficácia ele faz esse
trabalho.
A necessidade de comunicação eficaz se aplica a tudo da interface, 
seleção, icones, botões etc
Se sua interface do usuário tiver elementos que não comunicam
nada, você deve removê-los.
se os usuários precisarem traduzir sua interface do usuário em algo
significativo, você deve usar essa versão traduzida e significativa na
interface
Princípio 4: Seja educado, respeitoso e inteligente.
Devemos ter os mesmos padrões para a interação humano
computador que temos para a interação humana
A UI não deve receber passe livre por grosseria e desrespeito,
rude e inapropriada com as pessoas
como as pessoas as interfaces de usuário se comunicam por meio
de sua personalidade
tom
atitude.
Princípio nº 5: Se uma interface do usuário parece uma conversa
natural, profissional e amigável, provavelmente é um bom design.
Se alguém estiver explicando um design, compare a explicação com
o que está na tela.
Se você estiver revisando seu próprio design, pergunte a si mesmo:
eu realmente diria isso pessoalmente? De qualquer forma,
quaisquer discrepâncias revelam problemas.
comunicação eficaz, simples e intuitiva
focar nos usuários
focar nos objetivos
Isso ocorre porque a comunicação entre as pessoas tende a ser
naturalmente intuitiva e centrada no usuário
Se uma interface do usuário parece uma conversa natural,
profissional e amigável, provavelmente é um bom design.
Se você não diria algo pessoalmente, por que dizê-lo em seu
programa?
COMUNICAÇÃO EFETIVA
Esses atributos de comunicação eficaz se aplicam claramente ao
 texto, mas se aplicam a todos os outros elementos de interface do
usuário também
Uma interface do usuário se comunica efetivamente quando possui
a combinação apropriada desses atributos
Útil, relevante, necessário
a interface mostra informações uteis e relevantes para o
usuário, informações desnecessárias são removidas
Proposital
a interface ajuda o usuário a executar a tarefa, vinculando os
objetivos e as motivações do usuário
Claro e natural.
fala a lingua do usuário, evita jargões, abreviaturas e siglas e
utiliza linguagem simples e raramente jargões quando forem
necessárias
Fácil de entender
mesmo simples a interface não pode ser tão abstrata ao ponto
de não ter conhecimento especial, pensar muito,
experimentação e documentação para entender
Específico e explícito — não é subcomunicado.
o usuário receber informações necessária para que saibam o
que fazer
Conciso, eficiente — não se comunica em excesso
entrega informações para executar as tarefas prontamente, e a
opções de se aprofundar se o usuário assim desejar
Inspira confiança — não avisa demais
a interface encoraja e aumenta a confiança dos usuário
problemas menores devem ser apresentado como problemas
menores, não desastres
Os usuários nunca devem ser solicitados a abortar, matar ou
encerrar qualquer coisa
Oportuna
ela deve apresentar a informação no momento certo, nem antes
ao ao ponto de forçar o usuário saber do que se trata nem
depois achando que ele vai conseguir sem ela
se a informação é importante para a tarefa, ela deve ser
entregue no momento certo
Boa personalidade e tom
Estar alinhado com o tom e voz do aplicativo, ela precisa ser
simpática
Raramente interrompe
a interface raramente interrompe o usuário e nunca interrompe
com perguntas desnecessária
interrompe se houver um bom motivo
a interface só confirma ações do usuário se houver um bom
motivo para não prosseguir sem perguntar
IU INTUITIVA
o que é intuitiva
Para os usuários, descrever uma interface do usuário como intuitiva
está entre os maiores elogios que eles podem conceder
Uma interface do usuário é intuitiva quando os usuários-alvo
 entendem seu comportamento e efeito
sem o uso da razão,
memorização,
experimentação,
assistência ou treinamento
o que não é intuitiva
Se os usuários não conseguem entender como usar uma interface
do usuário por conta própria,
não conseguem descobrir com confiança na primeira tentativa, ou
os resultados não são surpreendentes ou não atendem às suas
expectativas,
não é intuitivo – por definição!
Não é necessário manual
qualquer tarefa, até mesmo a mais avançada pode ser
autoexplicativa que deixa qualquer ajuda como sendo redundante
texto de apoio de uma interface
ao revisar uma interface do usuário, e interessante revisar o manual
da interface, é a maneira mais rápida de verificar a interface
Usuários, a culpa não é sua!
Donald Norman
Em vez disso, o produto é mal projetado.
para cada design ou interação mal feita, atrai potencial melhoria
Para cada design de interface do usuário que requer
experimentação, assistência ou treinamento para ser entendido,
existe um design alternativo e autoexplicativo que não exige.
E é responsabilidade do designer de produto encontrá-los.
Atributos intuitivos
Uma interação começa com um objetivo
“Agora eu quero <alcançar algum objetivo>…”
A partir daí, o usuário deve:
1. Determine uma tarefa ou conjunto de tarefas que atingirão
esse objetivo
2. Encontre o ponto de partida para cada tarefa e inicie-a.
3. Para cada etapa da tarefa:
Decida o que fazer.
Determine como realizar a interação (dialogo)
Realize a interação (dialogo)
Revise os resultados quanto à aceitabilidade e corrija
quaisquer problemas
Determine o próximo passo
4. Revise os resultados gerais da tarefa
5. Se estiver satisfeito, passe para a próxima tarefa.
com base nas etapas, uma interface intuitiva possui:    Nem todos
os atributos listados aqui são obrigatórios para cada interação,
então a chave é determinar a combinação apropriada
Descoberta affordance
Os usuários podem encontrar facilmente o ponto de partida no
contexto - quando e onde eles precisam disso. O comando é
visível, obviamente um comando (e não outra coisa), e em um
local esperado.
 Compreensibilidade
Os usuários podem tomar uma decisão informada com rapidez
e confiança. Os usuários não precisam experimentar ou obter
assistência para fazer uma escolha. Muitas etapas da tarefa
se resumem à tomada de decisões
Acessibilidade
A interface do usuário tem propriedades visuais que indicam
como realizar uma interação. Os usuários não precisam
experimentar ou deduzir como realizar a interação
Previsibilidade
Funcionalmente, a interface do usuário oferece os resultados
esperados sem surpresas ou confusão. Possui mapeamento
natural. Os usuários não precisam experimentar ou deduzir o
resultado da interação
Eficiência
A interface do usuário permite que os usuários executem a
ação com um mínimo de esforço ou ajustes. Interações
ineficientes e complicadas não parecem intuitivas
Feedback responsivo
A interface do usuário fornece feedback claro e imediato para
indicar que o ação está acontecendo. Quando o usuário
termina, a interface do usuário deixa claro se a ação foi bem-
sucedida ou não, fornecendo detalhes específicos quando
necessário.
Perdão
Se os usuários cometerem um erro, a coisa certa acontece de
qualquer maneira ou eles podem corrigir ou desfazer a ação
com facilidade. Os usuários cometem pequenos erros o tempo
todo, portanto, as interfaces de usuário que punem esses
erros não parecem intuitivas
Explorabilidade
Os usuários podem explorar a interface do usuário sem medo
de fazer algo errado ou ficam perdidos
Não usar a palavra intuitivo em projetos já que ele é mal
compreendida, prefira utilizar os atributos específicos de uma
interface, por exeplo o botão esta com o affordance enganosa
CONSISTÊNCIA NECESSÁRIA (E DESNECESSÁRIA)
se você verificar as experiências anteriores, perceberá que alguns
itens são fortemente baseados em experiências anteriores de outros
sites
descoberta
affordance
disponibilidade
previsibilidade
Isso faz referências a lei de Jakob Nielsen
Os usuários passam a maior parte do tempo usando software
diferente do seu.
Se o seu produto for diferente de experiências que o usuário já
possuiu, então é o seu produto que não é intuitivo, já que o usuário
terá que reaprender como funciona o site.
o tempo todo designer estão    criando novas interações e o que
pode ocasionar mudanças onde o usuário não entende como
funciona a UI
comece com interações padrão e só mude quando começar a
entender que interação padrão não está funcionando
conhecer e aplicar diretrizes de design, é a melhor maneira de
começar
Em síntese, elas são um guia do que fazer e do que não fazer.
https://medium.com/vtex-lab/o-valor-de-diretrizes-para-
interfaces-2cf1b06195ec
https://docs.microsoft.com/sl-si/windows/apps/design/controls/
person-picture
https://www.lukew.com/ff/entry.asp?31
https://brasil.uxdesign.cc/os-princ%C3%ADpios-fundamentais-
da-intera%C3%A7%C3%A3o-bbb2237e47b0
Obter mais informações dentro do livro do Norman já que ele
fala sobre os princípios de interação
Affordances
visibilidade
nornan
Signifiers
Constraints
Mappings
nornan
Feedback
nornan
Conceptual Model
nornan
https://www.cs.kzoo.edu/cs105/resources/UserInterfaces.pdf
Todos querem que um produto seja fácil de usar, e isso só
acontece quando ele
sugere sua função de forma intuitiva (affordance)
e apresenta-se familiar
(familiarity)
diretrizes encontradas
Princípios de Interface Humana - Apple Computer
Primeiros Princípios - Bruce Tognazzini
Oito regras de ouro do design de interface" -Ben Shneiderman
Princípios do Bom Design -Donald Norman
Dez heurísticas de usabilidade -Jakob Nielsen
Diretrizes da interface do usuário - Tim Gasperak
Noções básicas de design - IBM
Princípios Comuns: Uma Cartilha de Design de Interface
Utilizável -Rick Oppedisano
Princípios do bom design de GUI - James Hobart
Princípios de design da interface do usuário - Guia de estilo do
motivo
Diretrizes ergonômicas para design de interface do usuário -
Universidade de Cornell
Padrões, Diretrizes e Padrões de Web Design - University of
 Minnesota
https://www.d.umn.edu/itss/training/online/webdesign/
consistência
a consistência na comunicação (interação) é QUASE sempre boa
ideia
a consistência visual muitas vezes é desnecessária e pode ser
prejudicial
Ferrari e Fusca possuem a consistência visual diferente, porém os
pedais são interações consistentes e previsíveis
IU ESTRATEGICAMENTE NÃO-INTUITIVA
é possível que nem todas as atributos sejam aplicadas na interações
e mesmo assim você achar que a interação é intuitiva
o que há é uma combinação apropriadas desses atributos e que
nem sempre são obrigatória
Se intuitivo é importante, porém tem esforços que não vale a pena.
Algumas interações podem deixar de ter algum atributo justamente
para PRIVILEGIAR a SIMPLICIDADE e EFICIÊNCIA
esforços de descoberta
Ter pontos de acesso visíveis para cada interação pode resultar
em páginas desordenadas
Para pontos de acessos avançados e menos importante, pode ser
melhor não ficarem visíveis
esforço affordance
Ter affordances estáticas para cada controle resulta em páginas
confusas e uma sensação pesada.
Pode ser melhor exibir affordances dinamicamente ou, às vezes,
até mesmo não exibir.
esforço previsibilidade
Às vezes, os usuários podem não conseguir prever com precisão
os resultados de uma interação,
isso pode ser aceitável com dedução trivial ou experimentação
rápida.
Você pode querer projetar comandos intuitivos para os usuários,
mas a alguma situações que não são necessárias    Trocar
estrategicamente a intuição por poder e simplicidade por recursos
avançados e pouco usados é uma ótima maneira de envolver
iniciantes e atrair especialistas - sem sobrecarregar nenhum dos
grupos.
Atalhos e gestos
atalhos e gestos não são intuitivos
interações simplificadas que requerem memorização
é não ser facilmente detectável ou ter qualquer possibilidade
que isso aconteça
Mas para comandos básicos, deve haver uma alternativa
intuitiva e menos eficiente.
Descoberta inevitável
Se a descoberta de uma interação for inevitável não precisa ser
visível
exemplo do video do youtube a qualquer momento que fizer
uma interação descobrirei que os controles aparecem no video
 isso é aceitável caso qualquer interação acontecer
exemplo é o espaço duplo em texto no ios e android, não são
visíveis, mas o usuário irá descobrir em qualquer momento
inevitavelmente
Comandos avançados e pouco frequentes.
existem comandos que não são tão utilizados que as vezes não
é necessário deixa-los visíveis ou gastar esforço tecnologico
para torna-lo intuitivos e pode causar confusão visual
Dado o seu uso, é aceitável que os usuários tenham que fazer
um experimento rápido para entendê-los
Encantadores
a casos onde interações não intuitivas são encantadores para
usuário avançados, que o caso de jogos
no boneco do google earth o usuário fica encantado quando
descobre que pode interagir com o boneco amarelo e verificar
a tela azul.
Como os Princípios de Design do Google afirmam: Envolva
iniciantes, atraia especialistas
Modos avançados
há modos avançados que não são intuitivos e também são bem
dificieis de executar para que não ocorra de forma acidental, é o
caso de controles avançados de edição do celulares, por
exemplo a area de programação
O iOS usa pressionar e segurar para entrar em um modo
especial para reorganizar aplicativos na tela inicial.
NÍVEIS DE INTUITIVIDADE
abordagem geral
tornar todos os comandos básicos intuitivos
quanto ao resto, fazer concessões estratégicas quando necessário
para atingir outros objetivos
exemplos
intuitivo
usuários não conhecem uma estrutura e não possuem modelo
mental sobre um determinado produto. E preciso que seja
totalmente intuito para que não ocorra nenhum problema
usavel
você esta projetando um recurso de valor mais pouco utilizado e
de alto custo de desenvolvimento para deixa-lo intuitivo. Nesse
caso o design pode ser aprendido ou adivinhado
menos sensatas
quando não fica claro como é executado um determinada ação e
ele vai falhar ao executar, por exemplo apertar e segurar um botão
para ocorrer uma ação
informações que podem ser adivinhadas e aprendidas, mas não
intuitivas ou mesmo sensatas.
A diferença: como essa tarefa não é intuitiva, a maioria dos
usuários falhará nas primeiras tentativas, até perceber que não
funciona
pergunta
a interface do usuário intuitiva muda com o tempo?
 Sim, porque as expectativas dos usuários quanto à descoberta,
acessibilidade e previsibilidade mudam com o tempo.
se eu estivesse projetando um quiosque baseado em toque, onde
o toque não seria esperado, a primeira tela diria “Toque para
continuar” em algum lugar
IU INDUTIVO
aquilo que induz, ou seja, a interface induz a um determinada ação
Que incita, instiga.
raciocinio por ser induzido assim
estimulo
encontre o controle certo, interaja com ele e a interação fará o que
você espera
Mas esses atributos são de nível muito baixo para tornar as tarefas
inteiras intuitivas
Apresentação ZEN
é um modelo de apresentação onde há apenas uma imagem e o
apresentador demonstra para que serve.
existe interfaces que não informam nenhum contexto para que
serve um componente e não fica claro o que fazer na tarefa.
quando você analisa a interface e tenta entender o que ela faz,
você esta utilizando a dedução
lógica de dedução
processo de eliminação
um pouco de experimentação
fluxos de tarefas dedutivos e não intuitivos são muito comuns
para projetar fluxos auto explicativos
Ui indutiva
descrever fluxos de tarefas autoexplicativos
eles conduzem os usuários pela tarefa
UIs indutivas tornam os fluxos de tarefas autoexplicativos.
com a Presentation Zen, é necessário um apresentador. Na
interface também precisa de um, e tem o nome de treinador
IU indutiva
ui facilmente explicável
ui facilmente compreensível
significa que se você não conseguir explicar as etapas a serem
executadas, que está projetando, dificilmente um usuário
conseguirá compreende-la facilmente    UIs indutivas explicam cada
etapa da tarefa com uma instrução principal clara e concisa que
responde à primeira pergunta que os usuários têm: O que devo
fazer aqui? Tudo na página reflete com precisão essa instrução
principal
como fazer?
dividir as tarefas de várias etapas em etapas individuais
descrever cada etapa com uma explicação clara e concisa
explicação = instrução
instrução principal
Uma boa instrução principal deve ser o que você
realmente diria aos usuários para explicar a página. So é
grande se for assim que você fala com o usuário, caso
 contrário, mantenha curta
deve ser objetiva
curta
simples
a instrução principal responde a primeira pergunta do
usuário. O que devo fazer aqui?
a pagina deve refletir com precisão sua principal
instrução
Fazendo isso, os elementos de design serão inseridos
apoiando o design de comunicação, descartando o mal
uso de componentes colocando eles só porque se
encaixam na interface como se ela fosse um jogo de
tetris
instrução comum
são instruções que possuem um segundo plano na
interface, que auxiliam numa pequena parte da tarefa (não
é a título da pagina)
Instruções principais eficazes (e, portanto, páginas bem projetadas!)
se você não conseguir explicar a instrução de forma clara e concisa,
então
ela não tem
foco
ponto para o qual converge alguma coisa.
coesão
unidade lógica, coerência de um pensamento, de uma obra.
integridade
estado ou característica daquilo que está inteiro
Crie paginas em torno de instruções e utilize verbos mais
específicos para essas instruções
se a pagina estiver conversando com o usuário é um erro não
pensar nas instruções no inicio do projeto
as instruções precisam soar com o que você realmente diria para os
usuários
sempre pense como você explicaria para o usuário uma
determinada função
Selecione suas fotos para compartilhar
A instrução explica o que os usuários precisam fazer
conceitualmente, explicando o propósito se util
Observe que uma instrução principal pode ser uma pergunta
Seu álbum de fotos
A instrução indica vagamente o que os usuários precisam
fazer:
Clique para selecionar as fotos
A instrução explica como realizar a etapa mecanicamente,
mas sem explicar objetivo
Seleção de fotos
A instrução dá o nome do passo, muitas vezes do ponto de
vista do código
Gerenciamento de fotos
A instrução fornece informações que não são úteis ou
 relevantes e podem significar nada
IU ESTRATEGICAMENTE DEDUTIVO
quando não fazer fazer instruções principais
Se pessoalmente um usuário perguntasse como fazer determinada
função e ela fosse tão obvia, você explicaria para ele?
Se não, a página é melhor sem ele. Nesses casos, a instrução
principal é tão óbvia ou a dedução necessária para usar a página
é tão trivial que dar a instrução é mais irritante do que útil.
Se você optar por não fornecer uma instrução principal, certifique-
se de que
seja devido à alta qualidade do design da página,
e não à baixa qualidade da instrução em si
quando fazer instruções principais
Tarefas Complexas
não tão obvias
Telas móveis não possuem instruções principais, por esse motivos:
aplicativos que fazem apenas uma tarefa
telas focadas especialmente em fazer uma única tarefa e os passos
são mostrados visualmente
Dado o contexto de execução de uma etapa específica em uma tela
focada em um aplicativo focado, o objetivo de uma tela geralmente
é óbvio no contexto por meio de uma inspeção rápida.
telas pequenas e a parte superior é bastante valiosa
No mobile, muitas vezes o objetivo é tão claro que os usuários podem
prever com precisão o que ele faz, porém muitas vezes é interessante
deixar uma instrução para deixar os usuários orientados
A natureza focada dos APLICATIVOS MÓVEIS torna as instruções
principais explícitas menos importantes. MESMO ASSIM ELAS
FUNCIONAM MELHORES COM INSTRUÇÕES PRINCIPAIS
Os aplicativos móveis se beneficiam do design de interface do
usuário indutivo, mesmo que a instrução principal não seja exibida
mesmo que não utilize instruções principais no SEU MOBILE é
possível mante-las intuitivas.
dividindo-os em etapas individuais,
descrevendo cada etapa com instruções comuns claras e
concisas
projetando as telas para refletir com precisão essas instruções
FAZENDO PERGUNTAS INTUITIVAS
Interfaces de usuário não intuitivas geralmente fazem perguntas ou
apresentam escolha desnecessárias ou mal apresentadas. Interfaces
de usuário bem projetadas fazem a pergunta certa uma vez, na hora e
no lugar certos, e fornecem informações suficientes para que os
usuários respondam com inteligência e confiança.
não faça perguntas
É muito comum nas interfaces fazer perguntas para os usuários
porém é muito comum ter perguntas desnecessárias ou mal
apresentadas
Não faça perguntas a menos que realmente precise. Há muitas
perguntas que você não precisa fazer — com um pouco de
reflexão, esforço e coragem.
 Não pergunte se você não precisa
muito comum os designer não saberem de algum informação
e fazerem a pergunta para o usuário, porém resulta numa
interface chata e desnecessária por exemplo meu localizador
indica que estou numa localização, porém ele me pergunta se
estou nela.
como evitar perguntas desnecessárias
não se importam se sempre escolhem o padrão
a pergunta não tem consequências
pensam de forma diferente como resultado
exemplo, salvar um e-mail vazio
Não pergunte se você já sabe a resposta
Muitas vezes você pode determinar a resposta com base
sobre
tarefa
contexto
melhores práticas
Muitas perguntas podem ser respondidas simplesmente
lembrando a entrada anterior do usuário.
Não pergunte se você provavelmente sabe a resposta.
Se houver 80% de chance de você saber a resposta, faça isso
sem perguntar
Aumente a nível significativamente se houver uma
consequência por estar errado.
Desça o nível significativamente para baixo se o esforço do
usuário necessário para responder à pergunta estiver no
mesmo nível do esforço para corrigir quaisquer erros
Não pergunte se os usuários não puderem responder de forma
inteligente
Se os usuários não podem tomar uma decisão informada, por
que perguntar — a menos que seu objetivo seja transferir a
responsabilidade?
Faça a pergunta real diretamente
Muitas perguntas são mal formuladas - muitas vezes dançando em
torno da pergunta em vez de perguntar diretamente e não fornecer
informações específicas. Quanto melhor for a formulação da
pergunta, melhor será a resposta que os usuários darão
Às vezes, perguntas (como “Qual é sua senha?”) são melhor
formuladas como instruções (como “Digite sua senha”)
Como sempre, a comunicação interpessoal fornece insights aqui:
geralmente damos instruções em vez de fazer perguntas
explícitas quando as perguntas seriam tediosas ou tagarelas.
Se você precisar fazer uma pergunta, faça-a uma vez
Às vezes, os programas fazem a mesma pergunta várias vezes
porque não se preocupam em lembrar de uma resposta anterior.
Às vezes eles fazem perguntas parciais em vez de uma completa
Os programas fazem várias perguntas porque diferentes camadas
na pilha de tecnologia não estão cientes de que a pergunta já foi
feita.
Forneça informações suficientes para responder de forma inteligente
Mesmo que a pergunta seja necessária e bem formulada, as
respostas podem ser confusas e mal apresentadas, tornando difícil
para os usuários tomar uma decisão inteligente e informada
Há informações suficientes para entender a resposta
Muitas vezes as respostas são listadas de forma sucinta, exigindo
ajuda para entender o que elas significam.
Em vez disso, apresente respostas que possam ser facilmente
compreendidas por conta própria e selecionadas com confiança.
Há informações suficientes para escolher a resposta com confiança
Não é suficiente entender o que as respostas significam
Os usuários também precisam de informações suficientes para
tomar uma decisão informada.
Mas também não há muita informação
Se houver muita informação, há uma boa chance de os usuários
não lerem as descrições
divulgação progressiva
Considere usar a divulgação progressiva se as opções
realmente precisarem de mais informações do que podem ser
lidas facilmente.
As respostas são apresentadas em ordem de probabilidade (mais
ou menos)
os usuários não otimizam, eles satisfazem
Em vez de ler toda a lista de opções
os usuários verificam até encontrarem uma opção que pareça
promissora
Apresentar as opções em ordem de probabilidade ajuda a
garantir que a opção promissora seja a correta
As respostas são apresentadas em uma ordem útil.
As listas curtas podem ser apresentadas em ordem lógica,
mas as listas mais longas devem ser em ordem alfabética.
As respostas recomendadas são claramente identificadas
Ter recomendações ajuda os usuários escolherem com
confiança
Essas opções são muito técnicas. Embora eu possa não
entendê-los, ter recomendações me ajuda a escolher com
confiança
Pergunte na hora certa e no lugar certo
Por fim, mesmo que uma pergunta e suas respostas sejam bem
apresentadas, uma pergunta intuitiva precisa ser feita no
momento certo e no lugar certo
Não pergunte muito cedo
Se você fizer uma pergunta muito cedo, os usuários não
estarão totalmente engajados ou ainda não vai saber
responder
Não pergunte tarde demais
Se você fizer uma pergunta importante tarde demais, os
usuários podem não ter certeza de que estão fazendo a
tarefa corretamente e podem abandoná-la antes de chegar
lá
Pergunte no contexto
 Ao fazer perguntas quando elas são relevantes, os usuários
podem fazer mais decisões informadas
As perguntas contextuais costumam ser muito mais fáceis
de responder com uma interface do usuário não modal
UM MODELO PARA USUÁRIOS
Você precisa entender seus usuários-alvo com detalhes suficientes
para poder tomar boas decisões de design em nome deles.
Todos os usuários-alvo são diferentes e têm diferentes
conhecimentos, necessidades e preferências. Mas, em vez de nos
concentrarmos em suas diferenças, vamos agora nos concentrar em
suas semelhanças.
Esses atributos de usuário são apostas bastante seguras. As características de
seus usuários-alvo podem ser diferentes do que descrevi aqui, mas, a menos que
sua pesquisa mostre o contrário, não aposte nisso
O que os usuários sabem
Os usuários conhecem seus objetivos, mas não sabem como
alcançá-los. Eles sabem o destino da tarefa, mas não o ponto
de partida ou os passos para chegar lá
Os usuários sabem o que escolher em alto nível, mas não
necessariamente os detalhes específicos. Suponha que eles
conheçam apenas os dados mais essenciais da memória e
precisem de ajuda com todo o resto
Sem conhecimento ou experiência prévia, os usuários não
sabem o que seu programa faz quais tarefas ele executa, como
funciona ou que eles podem confiar nele. Eles têm perguntas e
preocupações que você considera certas
Os usuários são inteligentes, mas podem estar focados em
outras coisas. “emburrecer” seu programa é desrespeitoso e
provavelmente não resolverá nenhum problema real
A menos que tenham sido treinados ou já saibam o que fazer
com base em experiências anteriores, os usuários sabem
apenas o que seu programa lhes diz. Se o seu programa não
comunicar informações importantes, os usuários terão que
descobrir as informações por meio de experimentação, pesquisa
ou treinamento.
A menos que você esteja projetando recursos claramente
direcionados a especialistas ou novatos, suponha que seus
usuários-alvo sejam iniciantes eficientes em termos de
experiência em computador, conhecimento de domínio e
vocabulário. Ou seja, eles sabem o básico e querem trabalhar
com eficiência, mas não têm muita experiência e têm muito
pouco memorizado.
A menos que usem seu produto com frequência, suponha que
seus usuários-alvo esquecerão rotineiramente seu nome de
usuário (a menos que seja seu endereço de e-mail), número de
conta e senha. Eles podem nem se lembrar se têm uma conta e
podem se inscrever para uma nova desnecessariamente.
Motivação do usuário
Os usuários são motivados pelo valor - onde o benefício de uma
tarefa excede claramente o tempo e esforço necessário. Se não
for esse o caso, nada mais importa, porque os usuários não
 estarão suficientemente motivados para realizar ou concluir a
tarefa
Diferentes usuários-alvo têm diferentes níveis de motivação
Se os usuários tiverem alta motivação, farão o que for preciso
para realizar a tarefa. Os usuários provavelmente estarão
altamente motivados se uma tarefa for necessária para seu
trabalho ou se houver incentivo financeiro para concluir a
tarefa.
Se os usuários tiverem baixa motivação, farão um esforço
modesto para realizar a tarefa, e abandoná-lo se eles não
podem descobrir facilmente ou não acreditam que vale a pena
continuar
A menos que você tenha dados de pesquisa em contrário,
suponha que seus usuários-alvo tenham baixa motivação para
a maioria das tarefas
Principais perguntas que os usuários têm ao analisar uma IU
O que essa interface do usuário faz? Será que estou mesmo no
lugar certo?
O que devo fazer aqui?
Isso vai fazer o que eu quero? Será que vai atender minhas
necessidades? Posso confiar?
Qual é a diferença entre essas opções? Qual devo selecionar?
Como os usuários descobrem as coisas
Os usuários assumirão que seu programa possui padrões de
design e interações que são padrão para o seu ambiente
Se os usuários estiverem familiarizados com uma tarefa
semelhante de outro recurso ou outro programa, os usuários
assumirá que o recurso atual tem uma interação semelhante
A menos que executem uma tarefa com frequência, os usuários
não lembrarão exatamente como realizá-la da memória e terão
que reaprender a cada vez. Se sua interface do usuário for bem
projetada, esse aprendizado será trivial e dificilmente
perceptível. Se a interface do usuário não for padrão ou
inconsistente, os usuários não se lembrarão da próxima vez e
terão que reaprendê-la
Se uma ação for detectável, parecer relevante e tiver uma
disponibilidade clara, os usuários a tentarão no mesmo instante
Se uma ação não tiver affordance, os usuários a tentarão
somente após eliminar todas as alternativas primeiro
Se uma ação não for detectável, os usuários iniciantes não a
encontrarão
Se os usuários descobrirem uma interação ou controle
incomum, eles formarão uma hipótese sobre como funciona e
faça uma experiência rápida para confirmar. Se sua hipótese
estiver correta, eles considerarão a interação intuitiva (e ficarão
encantados por terem descoberto). Caso contrário, eles
considerarão a interação pouco intuitiva e mal projetada
Apenas os usuários mais motivados se preocupam com a ajuda
online e só depois de esgotar todos outras possibilidades
primeiro
O que os usuários farão e não farão
Como Steve Krug aponta em Don't Make Me Think!, os usuários
não lêem, eles escaneiam. Ou seja, eles não leem UIs
completamente para compreensão; em vez disso, eles
escaneiam para encontrar o que estão procurando rapidamente
Os usuários não lêem grandes blocos de texto ou instruções
longas. Eles lêem rótulos de controle para clicar neles.
Os usuários não otimizam, eles satisfazem (novamente, do
Krug). Ou seja, com muitas opções, os usuários agem na
primeira opção promissora que encontram
Os usuários rolarão páginas longas, mas somente se tiverem
um motivo para isso. (As IUs móveis são um exceção porque os
usuários estão acostumados a rolá-los.) Os usuários não rolarão
para ver se há algo que valha a pena rolar — portanto, a
motivação para rolar precisa ser visível sem rolagem
Os usuários não memorizarão nada
Os usuários não aprendem como as coisas funcionam, eles se
atrapalham. (Outro de Krug.)
Os usuários não revelarão informações confidenciais sem um
bom motivo. Nem deveriam. É provável que abandonem uma
tarefa se forem necessárias informações confidenciais sem uma
justificativa clara.
Os usuários não se registrarão, criarão uma conta ou entrarão a
menos que sejam muito, muito motivados validado. Isso é
duplamente verdadeiro quando os usuários estão digitando em
um teclado de toque.
O que os usuários não gostam de fazer
Criação de contas, login e redigitação de CAPTCHAs
Espera ou outras formas de perda de tempo
Digitação desnecessária ou outra interação
Redigitando as informações inseridas anteriormente
Fornecer informações aparentemente desnecessárias,
especialmente se forem sensíveis
Repetição desnecessária.
Ter que recomeçar completamente
Cometer erros facilmente evitáveis
Como os usuários perdem a confiança
Os usuários precisam ganhar confiança ao realizar uma tarefa e
relutam em prosseguir com uma tarefa ou assumir
compromissos sem criar confiança suficiente. Sem confiança, os
usuários podem reiniciar uma tarefa ou procurar alternativas
Os usuários precisam saber onde estão em cada etapa de uma
tarefa. Eles precisam de pistas para confirmar que eles estão no
lugar certo.
Os usuários precisam saber como dar o próximo passo com
confiança. O próximo passo provável deve seja sempre óbvio
Os usuários perdem a confiança se:
Eles não conseguem encontrar o que estão procurando
Eles não entendem as instruções, opções ou outro texto da
interface do usuário
 Eles não estão claramente progredindo em direção a seus
objetivos
Os resultados não atendem às suas expectativas
Eles sentem que estão sendo aproveitados, como com
desentendimentos mal escolhidos falhas e opções de
exclusão, juntamente com custos não razoáveis (transporte e
manuseio ou taxas de “conveniência”)
Depois de realizar uma interação, os usuários precisam de
feedback claro de que a ação foi bem-sucedida cessiva ou mal
sucedida
Conclusão:
deixe claro o que seu programa faz, como fazer suas tarefas e
quais são as opções. Não presuma que os usuários tenham
memorizado algo além do essencial. Não subestime a confiança
dos usuários; mostrar que seu programa vai atingir seus
objetivos. Facilite o login dos usuários e recupere informações
de contas esquecidas
os usuários são motivados por valor, então sempre leve a
motivação do usuário em consideração conta. Faça com que o
uso de sua interface do usuário valha o tempo e o esforço
Projete suas interfaces de usuário para que os usuários possam
responder facilmente as perguntas de onde e como fazem as
tarefas com rapidez e confiança
Simples, padrão, intuitivo, autoexplicativo e consistente funciona
melhor. Uma boa ajuda não pode salvar uma interface de
usuário ruim
os usuários estão focados em seu trabalho, não em aprender
como usar sua interface do usuário. Eles estão com pressa e
não querem perder tempo para aprender, memorizar ou
executar etapas desnecessárias
o tempo e o esforço dos usuários são preciosos, portanto, não
os desperdice, especialmente em dispositivos móveis
os usuários não concluirão uma tarefa se não tiverem confiança.
Não subestime a confiança dos usuários; em vez disso,
certifique-se de que sua interface do usuário o crie
Use este modelo geral como ponto de partida para avaliar suas
suposições sobre seus usuários-alvo, sejam elas explícitas ou
implícitas. Qualquer discrepância sugere um problema
Design de interação
pausa para ler sobre protótipo pagina 80
protipação para designers
tecnicas
rabiscoframe
curso na udemy
tecnica para conteúdo greeking
o que significa?
primeiro passo de qualquer coisa, colocar a ideia que esta na cabeça
no papel pra outras pessoas poderem ver e que podem ser testada com
usuário e melhorada com o tempo
Tudo pode ser prototipado, e tudo é um protótipo
As 4 fases da protipação
Entender
(descoberta) a protipação não só serve para entender o problema
como tambem server para esclarecer problemas alternativos que não
foram vistos
soluções alternativas de um mesmo problema
você deve criar diversas soluções para o mesmo problema ao invés
de inteirar somente em 1
criar teste de tarefas ou a/b para achar a melhor solução
existem diversos componentes que podem atender uma
necessidade, a ideia com o protótipo é esclarecer qual a melhor
alternativa utilizando o modelo mental do usuário, que nunca será a
mesma que a sua
Se você não tem pesquisas sobre seus usuários, comece com um
mapa de empatia para se colocar no lugar deles.
Com base em suas pesquisas e entrevistas, você pode criar um
Mapa de jornada As-Is (como é) para determinar qual é o seu atual   
pontos de dor são
o que esta acontecendo
por que esta acontecendo?
como esta acontecendo
quando esta acontecendo
onde esta acontecendo
comunicar
ideal para comunicar nas reuniões e deixa-las mais curtas, assim
ajuda a ter mais foco e expor as ideias no papel já que as pessoas
criam modelos mentais diferentes quando você só fala da ideia
dependendo do contexto que você esta estudando a fidelidade pode
ser baixa ou alta, para baixa, apenas usabilidade, para criticas,
projetos em alta
Para testar e melhorar
hora de testar com o usuário
quando tiver alguma ideia, já tire da cabeça e coloque no papel,
comece a testar as suposições no começo.
maze? Talvez
defender
mostrar o racional das decisões que tomou ao invés de mostrar só a
tela bonita
chame o time para dar os pitacos no designer e na experiência
fidelidade do protótipo
mais protótipos no começo e menos no final do projeto
fidelidade
alta
usuário acreditaram que o design esta pronto e darão sugestões
somente polidos do visual
usuário acreditaram que o design esta pronto e darão sugestões
somente polidos do visual
Esses protótipos têm conteúdo real e a maioria dos caminhos
disponíveis para clicar ou interagir
possuem animações, elementos, textos final e um fluxo interativo
 completo
média
Os protótipos de média fidelidade começam a incorporar design
visual, interações, funcionalidade e o meio final
Um exemplo é que um usuário pode navegar por todo o fluxo de
usuário de uma tarefa específica
ideal para comunicar as partes interessadas steakholders
elementos clicaveis
baixa
os usuários podem não entender o que significa por conter apenas
ideias gerais
usado para pensar em muitas ideias e detectar problemas antes
que eles fiquem grandes demais para serem corrigidos.
arquitetura da informação
entregar cartões de paginas para que o usuário possa organizar a
ordem que faz mais sentindo para eles
cada indivíduo se organizará de maneira diferente, e minha
navegação precisa funcionar para todos esses modelos mentais
diferentes
cria um protótipo já com os cartões
ou cria um protótipo com uma solução alternativa baseado na
classificação
protótipos básicos e estruturais
testar as premissas organizacionais
perguntar se encontram determinados itens na pagina
quais as descobertas?
fluxos de usuários;
arquitetura da informação (rotulagem, layout de navegação e
organização básica)
modelos mentais dos usuários
os usuários se concentrarão somente na usabilidade e não no
layout
dimensões da fidelidade
refinamento visual
construir o prototipo com aspecto final do produto
testar acessibilidades
esteticas e materias
amplitude
não precisa ter toda a experiência para ter o protótipo, uma parte
pode ser mais útil
profundidade
o quanto detalhado um recurso do protótipo terá, talvez não precisa
ter todos os elementos clicáveis
descobrir navegação e descobrir como chegar em um
determinado lugar
o quanto detalhado um recurso do protótipo terá, talvez não precisa
ter todos os elementos clicáveis
interatividade
interatividade do protótipo indica como as partes interativas do
aplicativo ou produto são exibidas ao usuário
 modelo de dados
processo de protipagem
MVP
escolher a tarefa
entender
gerar ideias
priorizar
testar
a tarefa do usuário
escolher a fidelidade
fazer um prototipo ou apresentação
testar
apresentar
validar
escolher a fidelidade
comunicar ou defender
passo a passo descrito
1 conhecer bem o usuário e sua tarefa
verificar as hipóteses que quer testar
2 construir um user flow que resolva a tarefa que o usuário deseja
fazer
é a jornada que o usuário faz para completar seu objetivo
pode ser feita:
escrevendo frases
fazendo um diagrama
ou storyboard
Você não precisa começar a prototipando todas as interações,
comece sempre com o foco principal.
você isola partes menores e depois inclui na jornada
Se você não tiver um escopo óbvio em seu fluxo de usuários,
procure suposições que não sejam apoiadas por pesquisas (que
podem ser tudo) e priorize qual suposição é a mais crucial para
testar primeiro
utilizar a matriz de valor e esforço para construir o que
realmente importa no momento ( conhecer a matriz
https://brasil.uxdesign.cc/conectando-design-e-business-na-
pratica-e4b3916ad8b0
storie mapping
construir oportunidades e prioriza-las
comprando uma feature
tipo o votting, mas com dinheiro
matriz de impacto x esforço
Posicione as tarefas em uma matriz de esforço pelo valor para
o negócio. Aquelas nos quadrantes 1 e 2 devem ser
executadas enquanto as no vermelho tem poucas chances de
saírem do papel.
cocriação
Ideias são agrupadas por afinidade gerando grupos maiores e
menores. Quanto maior o grupo, maior sua importância (em
teoria)
 Em seguida é aplicada uma etapa de pontuação onde os
presentes indicam o grau de importância de cada
agrupamento. A priorização vem a partir daí.
3 faça o prototipo para usuário
pegue o diagrama, ou a jornada e desenhe o wireframe
comece com pouco e vi refinando e melhorando mais
4 testa, analisa e repita
depois de criar seu protótipo, crie seu plano de pesquisa e
escolhe qual a suposição quer desejar pesquisar e valide com
seus usuários
descobrir modelos mentais, utilizando os dados do usuário, isso
tudo com o protótipo, é possível achar melhorais do protótipo na
construção do aplicativo
exploração centrada
esse processo investe tempo em gerar ideias e menos em protótipos
etapas
1 gerar muitas ideias para solucionar uma problema do usuário
sozinho, colocando todas as possíveis ideias no papel
de repente o pré mortem
com a equipe a cocriação
2 - agrupe ideias semelhantes e categorias gerais
mapeamento de afinidades
cuidado para não perder ideias únicas nesse processo, separem
elas
lembre-se que são hipóteses que precisam ser testadas
3 decida a direção utilizando a priorização
matriz de priorização, mapa de jornada e assim vai
votting funciona bem para seguir em como solucionar o problema
do usuário precisam ser testadas
4 fase do protótipo
Centrado no público-alvo
mas começa com mapa de empatia e o problema bem definido a
famosa pergunta que queremos responder
pulei essa parte
user flow
o que é
Um usuário fluxo é como alguém se move usando seu software ou
aplicativo, navegando pelas diferentes telas para atingir seu objetivo
são apenas uma FERRAMENTA DE PRIORIZAÇÃO são uma ótima preparação
para a prototipagem.
saber rapidamente qual são as partes mais difíceis e priorizada na
construção do protótipo
como usar
você constrói o caminho feliz e verifica as possíveis mudanças para
melhorar o processo de tarefa do usuário
precisa ser testado com o usuário, pode ser que ele encontre uma
maneira mais fácil de fazer
maze
você constrói um fluxo inteiro para o usuário e escolher quais são
baseadas em hipóteses e dividi-las em pequenos pedaços e ir
 testando-as
funciona muito melhor dividindo em pedaços e testando
comece com os teste    da interação mais complexas para
identificar que estamos no caminho certo
procure a interação mais importante e construa o resto por ela
ele é um processo muito mais rápido
comece
comece como o usuário encontra o seu aplicativo e escreva até
terminar de usa-lo
storie mapping funciona bem
você pode reordena-los e pensar em diversas formas de finalizar o
seu processo
Crie vários fluxos de usuário para diferentes tipos de usuários
você terá um iniciante
um recorrente
compartilhe com os interessados para ter em mente como será o
processo de entrega
Arquitetura da informação
http://www.howtomakesenseofanymess.com/chapter/3/page/50/2-flow-
diagram/
ferramentas
sneakpeekit contem imagem de layout para construção de wireframe
dica
criar muitas ideias e não criar apenas uma e ir inteirando
escolher qual parte realmente que testar, escolher a suposição antes de
fazer protótipo
protótipos digitais visão arquitetura da informação e no refinamento
verifica estilos, cores e elementos específicos
com card sorting, construir o modelo mental sobre como os usuário
esperam que uma coisa funcione
No design, “intuitivo” é sinônimo de “combina com o modelo mental do
usuário”. Quanto mais próxima uma interface se adequar a essa
imagem, mais fácil será aprender, usar e navegar. Este é um conceito
com muito valor prátic
o design critique gera muitas suposições que podem ser guardadas
para uma nova rodada de investigação do protótipo. Bem interessante
esse dado.
usar mapa de afinidades e tambem arvores de decições ou matriz de
priorização para construir uma solução melhor e testar
fidelidade
baixa
verificar fluxo
verificar navegação
modelo mental do usuário
conceitos de alto nivel
terminologia
funcionalidade geral
alta
detalhes visuais
icones
 elementos visuais
concluíndo tarefas
navegação de alta fidelidade
conteúdo escrito
Google Analytics
Definindo o Web Analytics
A análise da Web é um processo de negócios usado para melhorar
continuamente seus negócios online.
O Google Analytics é uma ferramenta para medir quantitativamente o
que acontece em seu site.
Essa definição engloba três tarefas principais que toda empresa deve
enfrentar ao fazer análise da web:
Medindo dados quantitativos e qualitativos
O Web Analytics gera dados quantitativos ou de sequência de
cliques. Esses dados identificam de onde vem o tráfego do site e o
que ele faz no site. Diz mais ou menos o que aconteceu em um site.
O Processo de Melhoria Contínua
Todos os dados e análises devem conduzir um processo de
melhoria contínua. Esta é a parte mais crítica da análise da web.
Você deve agir sobre os dados. Esse é todo o propósito da análise
da web — melhorar com o tempo
Medindo resultados
Todo o objetivo do processo de análise da web é aumentar nossos
resultados de negócios desejados. Não estamos mais obcecados
em apenas medir quanto tráfego nosso negócio online gera.
Também queremos medir o seu desempenho em termos de
negócios.
O que o Google Analytics contribui
Google Analytics rastreia muitas métricas padrão do site (tráfego
básico)
visitas
visitantes únicos
visualizações de página
taxa de rejeição
taxa de abandono
Mas, mais importante, ele pode rastrear os resultados do negócio,
chamados de metas .
queremos ir além do rastreamento de tráfego básico para nossos
sites e começar a entender se nossos sites estão contribuindo para os
resultados de nossos negócios.
o Google Analytics faz um ótimo trabalho ao rastrear todos os diferentes
tipos de iniciativas de marketing.
AdWords
pesquisas pagas
marketing por e-mail
publicidade gráfica
mídia social
qualquer outro tipo de anúncio
O Google Analytics ajudará você a identificar o que está funcionando e
o que não está funcionando com o seu negócio online
 clickstream
Clickstream ou Sequência de Cliques é o registro da trajetória que
um usuário de computador percorre ao clicar em algo numa página
web ou aplicativo. Os dados são capturados por cookies e
registrados num cliente ou servidor web
Segmentação
A segmentação envolve mergulhar mais fundo nos dados para
entender como os buckets ou segmentos menores de tráfego se
comportam e, por fim, influenciam o desempenho geral do site.
Um exemplo simples de segmentação é visualizar o tráfego do site
com base na localização física dos visitantes
Grupos de público-alvo (buckets)
segmentação é analisar os dados
relatório GA
Dimensão/nome do dado
Uma dimensão
é um atributo de um visitante do site
o que vem dele, como idade, sexo, aparelho telefonico
ou das visitas que ele cria.
navegação que ele fez, lugares onde ele entrou etc.
São os rastros que o usuário deixa ao entrar no seu site
esses rastros são mostrados em cada linha em forma de métricas,
valores
lista completa de dimensões
https://ga-dev-tools.web.app/dimensions-metrics-explorer/
métricas/valores
As métricas da dimensão é visualizado em cada linha do relatório
Cada linha de dados é um valor diferente da dimensão do tráfego
tráfego
são as origens do seu usuários utilizando seu site ou app
Tráfego é como chamamos todo o alcance, visitas e visualizações
que você recebe em suas páginas, sites, redes sociais, blogs e
outros.
É uma métrica baseada nos acessos que o seu conteúdo recebe.
tipos de tráfegos
tráfego pago do Google Ads
é uma estratégia que exigem um pagamento para que você
consiga atingir seu público ideal.
anúncios no Google ou outros canais como Facebook Ads
para atrair visitantes
tráfego (direto) orgânico do Google
se você vinculou sua conta do Google Search Console
são aquelas que chegaram até suas páginas por meio de
pesquisa nos motores de busca, usando palavras-chave
relacionadas aos seus produtos e serviços.
Tráfego de referência
Tráfego de referência é quando um usuário clica em um link
disponível em um outro site e é redirecionado para o seu. É o
que acontece quando você trabalha com estratégias de link
building.
 tráfego de redes sociais
O tráfego social é aquele que é gerado a partir das redes
sociais. Acontece quando você insere o endereço de seu e-
commerce em seus posts nas mais diversas redes sociai.
Através desse recurso é muito mais fácil realizar vendas nas
redes sociais.
tráfego de tags de campanha personalizadas
aumentar o trafego
Marketing de conteúdo
As estratégias envolvendo a produção de conteúdo consiste
basicamente em criar conteúdo relevante em suas plataformas,
como blog ou redes sociais
Links Patrocinados
Links patrocinados, nos buscadores, são aqueles primeiros
resultados que aparecem ao pesquisar sobre determinado
assunto e, logo abaixo, são sinalizados como “patrocinados” ou
com a palavra “anúncio” ao lado do título.
E-mail marketing
Ele serve para divulgar a sua marca, atrair e converter mais
clientes.
Programa de Afiliados
Ele funciona basicamente assim: seu cliente ganha comissão ao
indicar uma pessoa para comprar ou contratar seus serviços
visitantes
podem ser novos
recorrentes
Conversão
Macro
tipicamente é uma transação de compra concluída.
Micro
é uma atividade concluída, como uma inscrição por e-mail, que
indica que o usuário está seguindo na direção de uma conversão
macro.
Segmentação Avançada
Criação de relatório
recurso que pode segmentar dados em tempo real com base em
atributos que você define.
Você pode fazer isso usando uma interface simples de arrastar e
soltar, mostrada n
dashboards
ferramenta de relatório personalizada que pode simplificar bastante
seus relatórios diários e até mesmo ajudar a simplificar segmentações
comuns.
é parecida com a Segmentação avançada, você pode soltar e arrastar
diferentes informações
construção
As linhas de dados em um relatório personalizado representam
diferentes dimensões de dados
As colunas em um relatório personalizado são as diferentes
métricas do Google Analytics:
 visitas
visualizações de página
conversões
receita
Os relatórios personalizados também fornecem a capacidade de
detalhar cada dimensão e visualizar subdimensões.
Você pode adicionar mais dimensões em sua dimensão principal.
https://metricasboss.com.br/artigos/o-dicionario-definitivo-do-google-
analytics
Google Analitycs (medir e conquistar)
introdução
O GA é uma ferramenta de analise WEB que nos ajuda a deixar nosso
site mais eficiente e melhorar o ROI
ROI
Retorno sobre investimento
Indicador gerencial que ajuda a identificar qual foi o retorno do
Investimento feito de alguma ação
Existe uma conta demo que podemos usar para estudar o GA
https://bit.ly/3PAwuOY
O que ele nos ajuda?
O Google Analytics nos permite
Melhorar a experiência do usuário e tomar decisões sobre o
conteúdo
Aumento das conversão, que são os objetivos que queremos que o
usuário faça no app ou no site
Medir a eficiências de palavras chaves e add-words, campanhas
online
E nos dá respostas para as perguntas mais difíceis:
como estão e de onde vem meus visitantes
como melhorar minhas campanhas on-line
Como usuários usam meu site
Quando e porque os usuários abandonam o objetivo da
compra/conversão
Como posso melhorar a interação do meu site?
Processo interno do google analytics para gerênciar trilhos de hits
Fase 1: Coleta de dados (Coleta)
O google analytics é alimentado de dados chamando    hits ou
interações, das diversas fontes, tais (web, e dispositivos móveis ou
qualquer ponde de internet)
O código de rastreamento ou trecho, (hits, interações), envia todas
as informações sobre a pagina ou tela que o usuários esteja
visualizando,
(versão, idioma, sistema operativo)
e fontes do trafego, de onde o visitante veio
ele é uma ferramenta segura que não transmite dados sensíveis
O Google Analytics não armazena nem relata nenhuma
informação pessoal.
A equipe do Google só pode acessar seus dados com sua
permissão.
Você pode escolher como as informações são compartilhadas
 com o Google e outros provedores.
Fase 2: Processamento de informações (Processamento)
aqui é onde ocorre o tratamento dos dados para informações uteis.
Ele reconhece as diversas fontes de origem de informações, da
busca, do Google Ads, das campanhas, Adsense e de qualquer
outra fonte como rede socias.
primeiro os hits são categorizados em seções e usuários, depois
combinadas das diversas fontes de origem.
Existem 2 maneiras de trazer os dados para o google analytcs
(importação de dados)
importação de dados personalizados
permite importar novas dimensões para nossos relatórios,
importando dando como upload ou usando a API do google
analytics
Importação de dados de custo
utilizado para informar o google analytics o dinheiro utilizados
em outras campanhas que não utilizam o Google Ads,
geralmente feito como um upload que inclua a origem da
campanha e a mídia
Fase 3: Configuração
é onde personalizamos nossos relatórios, exemplo: aplicando um
filtro que remova url do trafego feito em nossa empresa
por fim, as informações passam por um processo de agregação
onde são armazenadas no banco de dados para que possam ser
analisadas, esse processo serve para que possamos analisa-las
rapidamente
após esse processamento, os dados são guardadas em banco de
dados que não poderá ser modificada novamente. ESSE É O
MOTIVO PELO QUAL    O HISTORICO DOS DADOS DO
ANALYTICS NÃO SÃO PODEM SER ALTERADOS.
Fase 4: Geração de relatórios (Relatórios)
no final dos 3 passos, obtemos os relatórios no google analytics de
forma legivel e organizada por dimensões e métricas.
Podemos acessa-lo através do google analytics ou desenvolver
nosso próprio aplicativo usando a API Core Reporting que o Google
Analytics nos oferece.
quando usamos relatórios complexos, o google analytics nos
fornece uma amostragem, isso serve para que ele retornar as
informações solicitadas rapidamente.
Esse é o caminho que nos levará a informações quali e quanti do
nosso site e também    é o universo onde todas as perguntas e todas
as decisões são tomadas com base em uma verdade imutável: os
dados.
A INTERFACE DO GOOGLE ANALYTICS
Menus de navegação
header
Menu superior esquerdo para acessar as visualizações e suas
opções
No Header existem 2 partes importantes
A linha superior mostra a visão com a qual estamos
 trabalhando.
pertence à propriedade da web “Google Merchandise Store”.
Nele podemos percorrer todos as visualizações que temos
acessos e alternar entre eles
existe uma hierarquia
Contas > Propriedades e aplicativos > Visualizações
A parte inferior deste header é composta pelos 4 links
principais para a visualização em que estamos.
Página principal
permitir ver um resumo de tudo que temos
contas
propriedades
e vista a que temos acesso.
Relatórios
permite acessar os relatórios básicos da ferramenta para a
visualização que selecionamos.
Personalização
aqui fazemos os relatórios personalizados
Administrador
nos dá acesso à tela de administração
Menu superior direito com acesso a outras opções
Este menu de ícones nos permite acessar algumas opções
secundárias
Sino
mostra alguns alertas de erro na configuração ou em algum
momento no GA
grade
acessa outras ferramentas do GA google analytics 360 suite
Tag Manager
Data Studio
Optimize
3 pontinhos verticais
configuração do idioma, notificações e ajuda
perfil
encerrar a sessão
barra lateral
Menu esquerdo para acesso a relatórios e algumas ferramentas
ferramentas
Painéis.
Painéis com widgets personalizados.
Atalhos
Links para os relatórios mais usados.
Eventos de inteligência
Alertas para monitoramento de métricas.
relatório
dados fora do app
Relatórios em tempo real
Permite-nos conhecer o tráfego do site em tempo real
localizações
fontes de tráfego
 conteúdos
URLs das páginas que os visitante consultam e o
modo como interagem com o conteúdo.
Relatórios de audiência
Informações sobre os visitantes
como seu comportamento
localização
geográfica
dispositivos etc
Relatórios de aquisição
Informações de todos os canais de aquisição de tráfego
(adquirir usuários)
tudo relacionado a mecanismo de pesquisa (paga)
tudo relacionado a mecanismo de    pesquisa orgânica.
dado dentro do app
Relatórios de comportamento.
Toda a informação relacionada com a visualização das
páginas
Interação dos utilizadores com as paginas
pesquisa interna
o que é pesquisado no site??
eventos.
click
scroll
eventos são as interações que o usuário fez na página
Relatórios de conversão
Todas as informações relacionadas à conversão tanto do
e-commerce quanto dos objetivos configurados. (meta)
A tarefa concluída que é importante para o sucesso da sua
empresa
uma conversão de meta (micro)
é uma atividade concluída, como uma inscrição por e-
mail, que indica que o usuário está seguindo na
direção de uma conversão macro.
uma transação ou também chamada de e-commerce
(macro)
e uma compra
Uma conversão macro tipicamente é uma transação de
compra concluída
Período
calendário para contextualizar períodos eles nos permite fazer
alterações nele e até mesmo fazer comparações entre datas
podemos compara datas dentro do relatórios de períodos
anteriores, mesmo período de dias, anos ou de 2 períodos
específicos de forma personalizada
sempre quando fazemos um novo acesso, ele mostrar dados de um
mês contato do dia anterior. Ele pode até mostrar do dia, mas pode
ocorrer erros.
Navegando nos relatórios
Título, migalhas de navegação e acesso a opções
 nos relatórios existem
Topo
o título do relatório
migalhas de pão
aqui conseguimos identificar quão profundo estamos dentro na
navegação
barra de opções
Personalizar
permite criar relatórios a partir de onde estamos vendo
Correio eletrônico
podemos personalizar a entrega de relatórios por vários
formatos e também tem uma parte de agendamento para
isso
Exportar
podemos exportar o relatório em diversos formatos
Adicionar ao painel
Isso nos permite enviar dados do relatório em que estamos
para um widget em um painel.
Acesso direto
Envie um link para a aba Atalhos no menu esquerdo com as
configurações que temos no relatório.
Ajuste de amostragem
ele é um dos limites que encontramos no google analytics
quando fazemos um cruzamento com mais de 500 mil dados ele
faz
reduz a amostra de dados
e o resultado é extrapolado para o total
essa extrapolação será mais ou menos precisa
fica localizado do lado direito do relatório
segmentos(trafégo do usuário)
ele possibilidade segmentar o trafego de usuários, ou seja, você
consegue separar seu trafego por idade, pais, tecnologia.
parecido como filtro
também é possível criar um segmento que não existe no GA com
a ferramenta Construtor de segmentos
é um area que consigo separar meu trafego pelo contexto da
analise. todos os usuário ou aquelas que finalizaram uma
compra?
Menu de acesso aos grupos de métricas
fica logo abaixo dos segmento e essa aba explorador, nos permite
alterar os valores das métricas mudando o suas guias
Guias
dados resumidos
informações resumidas de cada guia
uso do site
métricas que mostram o envolvimento do usuário no site
metas
métricas sobre conversão do site
As metas avaliam como seu site ou app atende aos seus
objetivos. Uma meta representa uma atividade concluída,
 chamada de conversão, que contribui com o sucesso da sua
empresa.
e-commerce (caso estiver ativo)
métricas sobre desempenho da loja ($)
É possível ver informações sobre:
produtos e transações
o valor médio dos pedidos
a taxa de conversão de e-commerce,
o tempo até a compra
e outros dados.
Gráficos de várias linhas
graficos multilinhas
mostra a evolução de 1 ou mais métricas por padrão mostra
somente uma linha
cada ponto representa 1 valor e 1 determinado dia
no lado superior esquerdo, encontramos um menu suspenso
que exibe a 2 métrica
no lado esquerdo, temos informações sobre períodos e alguns
relatórios é possível ver horas também
existe também o gráfico em movimento, mas no livro não fala
muito sobre o que é
Anotações em gráficos
a uma area bem sútil, fica abaixo do gráfico onde você pode
adicionar uma informação um lembrete de algo que seja
importante, por exemplo. Implementação de um bug, algum erro
que aconteceu,
você pode ter anotações privadas ou públicas
Relatórios de tipo de tabela
cada gráfica terá uma tabela que representa suas métricas e
dimensões
por padrão são diversas métricas em uma única dimensão
devemos ter em mente que:
e possivel modificar a dimensão
é possível trazer uma segunda dimensão para exibir uma
combinação entre as duas, ou seja, uma terceira combinação
Outras dimensões e funcionalidades incluídas no gráfico
na parte superior esquerda
você pode adicionar uma segunda dimensão
ou trocar a dimensão vigente
dentro da tabela você tem as dimensões da tabela que são as
linhas
nas linhas da tabela, ou chamada de dimensões da tabela, vc
pode seleciona-las e incluir linhas dentro do gráfico para
visualização das dimensões da tabela no gráfico
Na tabela de dados, selecione as linhas cujos dados
queremos adicionar.
Clicamos no botão 'Incluir no gráfico'.
a ordem tabela sempre como padrão é decrescente, com base na
primeira métrica da tabela, mas podemos alterar clicando nas
diferentes métricas da tabela
 filtro de tabela
é a pesquisa e do lado dela que você pode utilizar o avançado
com o filtro avançado, podemos incluir ou excluir e deixar mais
refinado nossa pesquisa
podemos criar correspondência ou regex
Os filtros de tabela são úteis para mostrar apenas os valores que
nos interessam
Tipos de exibição de tabela
fica do lado do motor de busca e podemos variar a exibição dos
dados
Gráfico de pizza
visualização em porcetagem
Gráfico de barras
ele nos ajuda a exibir as métricas de cada dimensão da tabela
de forma melhor
Gráfico de barras comparativo.
ele compara as métricas de cada dimensão da tabela pela
média do site
Ele nos mostra o gráfico de barras no qual o desempenho da
métrica selecionada é entendido em relação à média do site.
conseguimos distinguir facilmente o que está acima e abaixo da
média
Termo nuvem
Muito útil para aqueles relatórios em que trabalhamos com
termos (não está disponível em todos os relatórios).
Tabela dinâmica
como essa tabela, podemos cruzar 2 dimensões ou mais, para
obter dados dessas união de dimensões
Ver mais linhas na tabela
padrão 10 linhas, mas podemos mostrar até 5000.
ajudas textuais
estão localizados em diversões pontos do painel
Coleta de dados no Google Analytics
O primeiro passo para medir um site ou aplicativo com o Google
Analytics é acessar analytics.google.com e registrar uma nova conta.
para usar o google precisa de uma conta e geralmente o pessoal utiliza
o gmail, mas pode ser qualquer conta. Mas podemos gerenciar com
cada conta, mais de 100 contas do google analytcs
precisamos definar depois em qual dispositivos vamos analisar, mas no
geral é a mesma coisa
trackind ID
depois de definir as configurações, desde do fuso e outros itens nos
receberemos o Código de rastreamento da propriedade web.
tem sempre o seguinte padrão (UA-XXXXXX-1)
Esse código representa a ligação entre
o nosso código
e a base de dados do google analytics
server para que cheguem os dados de forma correta para o google
analytics
faz com que os dados sejam processados e adicionados juntos
 independente do dominío que gere e de onde é enviado para ele
Isso significa que de qualquer ponto conectado à internet
podemos enviar informações para nossa propriedade do Analytics
desde que a identifiquemos com o ID correto
MONITORAMENTO DO SITE
atraves do trackind id é onde esses hits gerados são enviado e
identificado pelo GA gerando as métricas para cada dimensão
RASTREAMENTO DE APLICATIVOS
é a mesma coisa do que um site, a diferença é que foi usado o SDK
do android e IOS
ACOMPANHAMENTO DE APLICATIVOS NÃO JAVASCRIPT COM O
PROTOCOLO DE MEDIÇÃO
o Google Universal Analytics permite o envio de hits através do
chamadoProtocolo de medição(Protocolo de Medição).
Isso é especialmente útil quando você deseja enviar dados para o
Analytics de um software específico, um terminal de ponto de venda
(POS) ou qualquer coisa que não seja um site ou aplicativo móvel.
O protocolo de medição permite enviar dados para o Analytics de
qualquer dispositivo conectado à internet.
A forma de fazer isso é com uma chamada HTTP direta para uma
URL do Google Analytics na qual devemos passar todos os valores
necessários para que a ferramenta reconheça corretamente as
informações. Entre eles é essencial que seja indicado o identificador
de propriedade (UA)
COOKIES DO GOOGLE ANALYTICS
cookies são txt gravados na maquina do usuário que contém
informações sobre o visitante do nosso site
graças a ele é que o GA pode identificar de forma única e anônima
nossos visitantes e oferecer informações mais precisas possíveis
sobre eles
Para fazer isso, ele usa um cookie chamado por padrão "_ga".
todas as vezes que um usuário entra no nosso site, a lib do JS lê e
reescreve esse cookie para saber
se é usuário novo
se é um usuário recorrente
e para identifica-lo de forma anônima
o cookie analytic tem a validade de 2 anos e faz com nesse tempo
seja reconhecido como visitante recorrente
nele é inserido o client ID    de forma aleatória, cada vez que o
entra um novo visitante no nosso site
cada vez que o usuário entra, é reescrito o cookie para estender
sua duração de 2 anos
isso foi inserido no UA - Universal Analytics
Lei de Cookies
Em março de 2012, o Decreto Real 13/2012 modificou o artigo 22.2
da Lei da Sociedade de Serviços de Informação (LSSICE) para se
adaptar à diretiva europeia (Diretiva 2009/136/CE) que obriga os
sites que armazenam cookies nos computadores dos usuários a
solicitar expressamente seu consentimento fazer isso.
Foi isso que provocou desde aquele ano a proliferação de
 mensagens em sites solicitando a aceitação de cookies.
Lembre-se, portanto, que se você usar o Google Analytics em seu
site, você tem a obrigação de informar seus visitantes sobre o uso
de cookies e solicitar sua aceitação antes mesmo de instalar o
código de rastreamento.
E o que acontece se…?
Alguém exclui ou bloqueia cookies?
cada visita para o GA será um usuário novo e será impossível
identificar usuário recorrentes
O navegador bloqueia o código JavaScript?
os acessos serão bloqueados e não recebemos registro desse
usuário
Está acessando um site em cache?
não há problemas com o GA, a unica coisa que o usuário não
estará vendo o site atualizado
Há um erro de JavaScript ao carregar a página?
todas as solicitações JS darão erro e consequentemente perda de
dados
nenhuma ferramenta baseda em JS consegue capturar 100% de
dados, a analise web não estuda dados absolutas, mas tendências
GERENCIADOR DE ETIQUETAS DO GOOGLE (GOOGLE TAG
MANAGER )
tanto o GA como outas ferramentas de MKt precisam de inserção de
códigos (tags)para gerenciar
informações de rastreamento
conversões
remarketing
simplesmente tenham acesso a alguma parte da informação em
nossos sites.
Gerenciador de tags do Google
ele é um gerenciador desses código que oferece de forma agil e
simples
inserir e gerenciar todas as tags
atraves de uma interface web visual
sem necessidade de modificar o código do nosso app ou site
além de fazer essa alterações sem a necessidade de recompilar
os aplicativos ou republicar sites
facilita a implantação e o gerenciamento das tags
reduz erros
nos fornece uma camada de segurança que impede que uma tag
modifique ou altere o bom funcionamento do nosso site.
O funcionamento do Google Tag Manager é baseado na inserção de
um código chamado de container
com ele poderemos começar a fazer a ligação com os códigos de
cada uma das ferramentas de marketing que utilizamos (Google
Analytics, AdWords, Doubleclick, Clicktale...)
para "trabalhar com um gerenciador de tags" é uma decisão que
afeta apenas a forma como enviaremos os hits para o Google
Analytics
a maior vantagem de usar o gerenciador
 talvez a mais importante seja separar o departamento de
Marketing do departamento de desenvolvimento para inserir esses
códigos ou tags
Configurações do Google Analytics
GESTÃO DE CONTAS, PROPRIEDADES E VISTAS (nao entrei no
detalhe)
para quem é adminstrador
No painel de administração do Google Analytics podemos editar e
gerenciar todas as opções de contas, propriedades da web,
visualizações e usuários, além de configurar todos os aspectos da
ferramenta
Conta
sempre vai representar, uma empresa, um negócio na web
uma conta é um arquivo, o GA é composto por um conjunto de
armários e cada armário é um cliente
Caso não sejamos uma agência e apenas gerenciemos a análise
de nossos negócios, precisaremos gerenciar apenas uma única
conta.
Cada conta é identificada com um ID que compõe os primeiros
sete dígitos do código UA >> UA-XXXXXXX-Y.
propriedade da web
Dentro de cada conta existe pelo menos uma propriedade web
onde podemos criar diferentes visualizações, gerir os seus
utilizadores, etc
Cada propriedade da web herda seu ID de conta, mas adiciona
um número ao final (UA-XXXXXXX-1). A propriedade web nos
fornece o código de rastreamento para inserir em nosso site ou
aplicativo.
GERENCIAMENTO DE USUÁRIOS (nao entrei no detalhe)
Gerenciamento de usuários
Conceder privilégios para gestão usuários da conta (adicionar,
excluir e atribuir permissões)
Edição
Um usuário com permissões de edição poderá Funções
administrativas relacionados aos relatórios
Colaboração
Essa permissão permite que o usuário crie ativos pessoais e os
compartilhe.
Leitura e análise.
É o privilégio mais baixo. Com ele, só é possível consultar os dados
do relatório e fazer algumas operações com os dados da
visualização, como filtrar uma tabela, adicionar uma dimensão
secundária ou criar um segmento.
É muito importante ter em mente que aas permissões são
herdadaspor padrão (conta > propriedade > visualização)
FILTROS (nao entrei no detalhe)
Os filtros do Google Analytics fornecem uma maneira simples e muito
flexível de definir as informações que queremos mostrar nos relatórios
de nossas visualizações.
Os usos mais comuns dos filtros são:
 Exclua o tráfego interno de uma organização.
Restrinja o acesso a uma visualização ou usuário.
Dados do relatório de segmento.
Personalize relatórios adicionando ou modificando informações.
Como funciona um filtro?
Os filtros são aplicados às visualizações para modificar os dados
antes de serem armazenados no banco de dados.
uma vez aplicado já era
ele servem para filtrar dados que não queremos ter no GA por
exemplo, trafego interno da empresa
MEDIÇÃO ENTRE DOMÍNIOS E SUBDOMÍNIOS (nao entrei no
detalhe)
o que é dominio e subdominio
Um domínio é um nome (nome do host) que representa um
endereço IP. Seria algo semelhante a como usamos os nomes das
ruas em um GPS para que ele nos retorne algumas coordenadas de
localização
Subdomínios são domínios localizados dentro de um domínio de
nível superior.
diferenciar departamentos
grupos de páginas
produtos dentro de um mesmo site
Acompanhamento entre subdomínios
Para medir sites que não estão relacionados entre si e que não
precisamos analisar de forma agregada, o ideal é criar diferentes
propriedades da web. Desta forma, cada website terá o seu próprio
identificador UA
Caso os sites pertençam à mesma unidade de negócios, é
aconselhável medi-losdentro da mesma propriedade da web.
CONEXÃO COM OUTRAS FERRAMENTAS    (nao entrei no detalhes)
adwords
você poderá analisar a jornada que o cliente segue desde o primeiro
clique no anúncio até realizar uma conversão e melhorar as
campanhas publicitárias.
EXPRESSÕES REGULARES (não entrei no detalhe)
são expressões utilizados dentro de uma pesquisa para encontrar um
padrão de txt em diferentes intervalos
varias itens inclusives
Relatórios de audiência (Publico-alvo)
são conjuntos de métricas e dimensões relacionadas
todas as informações de hits são enviadas para GA e convertidas em
dimensões e métricas
dimensões
descrevem as características do
usuário
sessão
ação especifica da pagina
eventos
métricas
as métricas são valores quantitativas que nos permite analisar e
 ordenar as Dimensões
Combinações válidas de dimensões e métricas
Cada dimensão e métrica tem um determinado escopo (meta)
nível do usuário
Uma pessoa que interage com um aplicativo ou site cujas
atividades você avalia com o Google Analytics.
nível da sessão
definição
Sessão é um grupo de interações feitas no seu site pelo o
usuário que ocorre em um PERÍODO DE TEMPO NO SEU SITE
Em um única sessão, podem ocorrer varias
exibições de página,
eventos,
interações sociais
transações de comércio eletrônico
Você pode pensar em uma sessão como o contêiner das
ações realizadas por um usuário no seu site.
Há dois métodos para o encerramento de uma sessão
Vencimento por tempo
Depois de 30 minutos de inatividade
se o usuário entrar em sair do seu site, mas ainda no
intervalo dentro dos 30 minutos, ele não será contabilizado
como uma nova sessão.
você consegue modificar esse limite por alguns segundos ou
horas
se você estiver na landing page e navegar até o carrinho
conta com uma sessão e a landing page como a pagina
inicial, mas se vc sair para almoçar nesse período e passar
30 minutos e retorna, vc será contabilizado como uma nova
sessão e a pagina inicial será o carrinho
se você estiver na landing page e navegar até o carrinho
conta com uma sessão e a landing page como a pagina
inicial, mas se vc sair para almoçar nesse período e passar
30 minutos e retorna, vc será contabilizado como uma nova
sessão e a pagina inicial será o carrinho
a meia noite
virou o dia, nesse momento para o analytics independente
do minutos, ele zera e conta uma nova sessão. (o analytics
é sempre tendência e nunca valores absolutos)
Mudança de campanha
Se um usuário entra por uma campanha, sai e depois volta por
outra campanha.
uma nova sessão é aplicado por origem diferentes de
campanha, do mesmo usuário
a campanha é atualizada sempre que o usuário acessa seu
site por meio
um mecanismo de pesquisa
site de referência
URL codificado da campanha.
o tráfego direto nunca altera as campanhas
 Uma nova campanha é criada sempre que um usuário clica
em um link que o direciona de um site de referência para
seu site.
Sessões
é o número total de sessões
Páginas/sessão
é o número médio de páginas visualizadas por sessão.
nível do hit (interação)
é uma interação que resulta em um envio de dados para o google
analytics e geralmente é composto por esses exemplos
hits de acompanhamento de página
hits de acompanhamento de evento (engajamento)
usado para acompanhar as interações do usuário com o
conteúdo
e você configurar o acompanhamento de eventos para
acompanhar eventos como vídeos reproduzidos, cada
reprodução de vídeo resultará em um hit de engajamento
hits de acompanhamento de comércio eletrônico
hits de interação social
Na maioria dos casos, só é recomendado combinar dimensões e
métricas que compartilham o mesmo escopo.
Sessões é uma métrica com base em sessões. Sendo assim, ela só
pode ser usada com dimensões no nível da sessão, como Origem
ou Cidade.
Dimensões
Dimensão é um atributo descritivo ou característica de um objeto que
pode receber valores
Primária
As Dimensões primárias são listadas na parte superior do relatório e
estão na cor azul
para trocar de dimensão é só clicar em cada link
Secundária
são as dimensões que ficam na parte de baixo desses link, e
possuem uma setinha para exemplificar de onde são
Trafego
Origem
todas as referências a um website têm uma origem
as possíveis origem incluem
o nome de um mecanismo de pesquisa
"google"
os buscadores
o nome de um site de referência
"facebook.com"
o nome de um dos seus boletins informativos
"spring_newsletter"
usuário que digitaram a URL ou tem o link salvo em favoritos
"diretos"
Mídia
todas as referências a um website também têm uma mídia
As mídias possíveis incluem
 pesquisa não paga
"orgânica"
custo por clique, ou seja, pesquisa paga
"cpc"
referência
"referência"
o nome de uma mídia personalizada que você criou
e-mail
a mídia do tráfego direto é "nenhum"
nenhum
Palavra-chave:
quando a pesquisa SSL é empregada, as palavras-chave têm o
valor (não fornecido).
Campanha
é o nome da campanha de referência do Google Ads
campanha personalizada que você criou
Conteúdo
identifica um link ou item de conteúdo específico de uma
campanha personalizada
se você tiver dois links de call to action na mesma mensagem
de e-mail, poderá usar valores de conteúdo distintos para
diferenciá-los e determinar qual versão é a mais efetiva.
MÉTRICAS E DIMENSÕES DE AQUISIÇÃO (PUBLICO-ALVO)
esse relatório nos ajuda a entender como nossos visitantes são
as métricas ficam na parte superior do gráfico
as dimensões ficam na parte inferior
métricas
métricas de audiência (publico alvo)
sessão
todas as vezes que inicia um app ou entra na web inicia uma
sessão e compreende que sessão é toda interação que o
usuário faz no seu app ou web
quando você possui um site de referência que é o facebook, ou
um gateway de pagamento e você é colocado para fora e
retorna, ainda se mantém esses 30 minutos, isso é para evitar 2
problemas
quando esquecemos de colocar o código correto na pagina e
ele não faz o rastreamento
quando ele é levado para outro lugar para fazer o pagamento
e retorna para concluir a compra
é indicado que removemos eles das referências no ADMIN
Usuários
usuário é número de visitantes reais no nosso site independente
do número de vezes que ele acessou (sessões)
se ele acessar pela manhã uma pagina e a tarde ele acessar
novamente, teremos 1 usuário e 2 sessões (visitas)
a comum identificar que no relatório de trafego (relatório que
identifica a origem do trafego) o mesmo usuário pode ter
sessões em diferentes Dimensões da tabela "cada linha da
tabela é uma dimensão de tabela" (campanhas, pesquisa
 organica e afiliados) então a soma delas, dos usuários, será
maior que o total de visitas do período, já que o usuário
pode ter entrado por diversas rotas.
pirâmide
visitadores (usuarios)
visitas (Sessões)
pageview podem ver mais de uma pagina em cada visita
(paginas visualizadas) - Visualizações de Página
Duração média da sessão
A duração média da sessão é a duração total de todas as sessões
(em segundos) dividida pelo número de sessões.
Portanto, se o visitante acessar a web pela “página A” às 10h00,
for para a “página B” às 10h05 e depois para a “página C” às
10h10, a duração da Sessão será de 10 minutos.
hits de engajamento
com
ele vai calcular o última hit da ULTIMA pagina subtraindo o hit
da primeira pagina (hit o tempo quando isso aconteceu)
sem
ele vai calcular o primeiro hit que ocorrer na ULTIMA pagina,
subtraindo o primeiro hit que ocorreu na primeira pagina
se houver um hit no final, não será contabilizado já que ele
não foi configurado para hits de engajamento
Taxa de rejeição
É a porcentagem de sessões em que os usuários veem uma
primeira página do nosso site e, sem mais interação com ela, a
abandonam.
A taxa de rejeição é o número de rejeições dividido pelo número
de sessões.
rejeição é o usuário entrou na pagina e não fez nada e saiu
dela.
é calculado com o total de abandonos que a pagina teve sem
interação dividido pela quantidade de sessões (quantas vezes
ela foi visitada no site)
melhor definição
Uma rejeição é uma sessão (visita) de página única no seu site.
Você envia um hit de pageview e mais nenhuma para o servidor,
isso determinar uma rejeição
O cálculo da taxa de rejeição é feito com a divisão das sessões
de página única por todas as sessões que ela teve
e o total de sessões que a pagina teve (pagina única) dividido
pelo total de sessões que ela teve sem rejeição ou seja, que
houve algum tipo de hit
Por exemplo, se 200 usuários acessam seu site (sessões no
geral) e 5 deles saem sem acionar outra solicitação
(sessões de página única),a taxa de rejeição de seu site é
de 2,5%
serve muito bem para medir as paginas de landing pages ou
destinos
Existe uma métrica no GA como o nome de BOUNCE onde ele
 aplicar 1 para o primeiro evento da pagina e 0 para os demais,
exclusivo para identificar a ação do usuário e não aplicar taxa de
rejeição de forma incorreta
algumas recomendações para paginas única, é que devemos ter
hits de evento para que ele consiga identificar quando houve uma
ação e sabermos o tempo de rejeição de forma correta.
blogs geralmente de alta indicie de taxa de rejeição se não fizer
de forma correta algum tipo de evento, por exemplo scroll, já
que o usuário poderá ficar com a pagina parada lendo o seu
conteúdo
Pode ser devido ao avanço para um ponto de rolagem, devido
ao tempo gasto lendo ou visualizando a página ou devido a
outra ação que somos capazes de capturar. (isso ajuda a
identificar que uma pagina e lida e nao rejeitada)
Uma taxa de rejeição alta é ruim?
depende
Se o sucesso do seu site depende da visualização de mais de
uma página pelos usuários, a resposta é sim.
Por exemplo, se sua página inicial for a porta de entrada para
o restante do site
por exemplo, artigos de notícia, páginas de produtos, processo
de checkout) e uma alta porcentagem dos usuários visualizar
somente essa página, uma taxa de rejeição alta será
indesejável.
Por outro lado, uma taxa de rejeição alta é perfeitamente normal
se você tiver um site de página única, como um blog, ou
fornecer outros tipos de conteúdo para os quais as sessões de
página única sejam esperadas.
como reduzir a taxa de rejeicao?
https://support.google.com/analytics/answer/1009409?hl=pt-BR
Porcentagem de novas sessões
essa métrica esta associada a novos usuários
todas as vezes que um usuário entra no site o código de
acompanhamento JS verificará se é uma nova sessão ou não,
verificando o cookie
o valor de novas sessões será informada no próprio campo
Dimensões
Tipo de usuário
classifica se o acesso (sessão) do usuário é novo ou recorrente
não se pode dizer que um usuário é novo ou recorrente, mas
somente seu acesso pode ser dizer isso. O mesmo usuário
poderá ser recorrente ou novo ao longo de um período de tempo.
o correto é:
sessões quando o usuário se comporta como novo usuário
sessões quando o usuário se comporta como um usuário
recorrente
Isso nos permitirá comparar o comportamento dessas sessões
em quais os usuários têm o primeiro contato com nosso site
com suas visitas subsequentes.
Idade e Gênero.
 As dimensões
sexo
genero
interesses
categoria de afinidade
segmentos de mercado
não são coletadas por padrão com o código básico do google
analytics
precisamos que o usuário tenha vinculado a conta google e
concordar que o google informe os dados
para tráfego da Web
Os dados demográficos e de interesse vêm do cookie
DoubleClik de terceiros
para tráfego Android e ios
dentificadores anônimos para aplicativos móveis
os dados são informados somente quando temos um volume de
acessos grandes no nosso site, isso serve para evitar um erro no
momento que analisamos nosso usuário, e ajuda a ter uma
informação real do usuário que acessa ele
raramente temos 100% dos usuários nessa dimensão, justamente
por que nem todos os usuários passam essa informação.
Idioma
O idioma é obtido a partir do idioma que o visitante configurou em seu
navegador para sites ou do idioma do dispositivo em aplicativos móveis.
Localização geográfica
Graças ao IP com o qual nossos usuários se conectam à internet, o GA traz
diversas dimensões tais:
Cidade
Região
País
Continente
Subcontinente.
dimensões da tecnologia
essa dimensão só aparecem para sistemas via web, já que para o
dispositivos moveis ela será sempre nativa
Nas dimensões da tecnologia temos:
navegador
navegador que o usuário utilizada
sistema operativo
sistema operacional do computador ou do dispositivo
resolução de tela
resolução de tela utilizadas pelos monitores dos usuários
cores da tela
profundidade de cor do monitores dos usuário
versão flash
versões flash suportadas pelos navegadores dos usuários,
incluindo versão secundária
compatibilidade com java
diferenciadas entre usuários utilizam navegadores com java
sim ou não
provedor de serviço
nome dos provedores de serviços utilizados pelos usuário,
 aparece nos dispositivos móveis
nome do anfitrião
Nomes de host que os usuários usaram para acessar seu site.
Geralmente é a URL do site.
categoria dos dispositivos
uma dimensão que só aparece para web,
São divididos em 3 tipos, Desktop, tabelt e mobile
são informações de qual dispositivo o usuário acessou o site
no futuro próximo poderá conter informações de smart tv, e outros.
Dispositivo
esta dimensão está presentes nos dispositivos móveis, e esta
relacionadas por
informações do dispositivo móvel
nome da marca
marca ou modelo para identificar o dispositivo
marca do dispositivo
fabricante ou marca
apple
samsung
método de entrada
Método de gravação usado no dispositivo. Por exemplo, tela
sensível ao toque, joystick, roda de clique ou caneta.
RELATÓRIOS BÁSICOS DE AUDIÊNCIA
todas as métricas de audiencia são relevantes praticamente em todas
os relatórios do GA
Na Visão Geral do relatório do publico alvo que vemos dados globais
para período selecionado
Os relatórios básicos ficam na esquerda do painel, logo abaixo da
visão geral do relatório de audiência
RELATÓRIO ATIVOS
este relatório mostra o número de usuário que fizeram pelo menos
uma sessão entre os dias 1, 7, 14 e 30.
Permite analisar o número médio de usuários reais de um site
nesses períodos
ANALISE DE GRUPO (coorte)
um grupo são usuários que possuem a mesma característica
comum identificada no GA
Usuário que possuem a mesma data de aquisição, fazem parte de
um grupo
com isso podemos isolar e analisar esse grupo desde a data de
aquisição dos visitantes, como conseguimos retê-los e manter a sua
relação com o nosso site.
deve ser interessante ver como ele se modifica de um mudança
especifica de um botão e notar se trouxer um melhor resultado
VALOR DA VIDA ÚTIL DO CLIENTE (apenas aplicativos móveis)
podemos ver o valor de vida útil do usuário que veio por e-mail , ou
pesquisa paga e identificar onde alocamos nosso recurso financeiro
dessa forma conseguimos alocar recursos financeiros onde tragam
resultado melhores
VERSÃO DO APLICATIVO (somente APPs móveis)
 esse relatório nos permite conhecer qual o nivel de atualização dos
dispositivos e como eles    se comportam em cada uma
NAVEGADOR DO USUARIO
sem informação
DADOS DEMOGRAFICOS (idade e sexo)
e é um ótimo relatório para identificar nossos usuário
INTERESSES (categorias de afinidade, segmentos de mercado e
outras categorias)
são coletados da mesma forma que dados demográficos
INFORMAÇÕES DEMOGRAFICAS (idioma e localização)
no idioma ajusta a nos direcionar para o idioma que nosso site tem
mais cesso
nos ajuda a verificar as cidades e regiões que temos mais tráfego
COMPORTAMENTO (usuários novos x recorrentes, frequência e
visitas recentes e interação)
nesse relatório encontramos as dimensões
novos
recorrentes
ele nos ajuda a entender o comportamento do usuário no primeiro
contato com o nosso site ou quando conhecem e retornam a ele
`
Além disso em diferentes relatórios ele traz outros dados
importantes, como
dias decorridos entre as sessões
sessões entre diferentes intervalos de tempo
grau de fidelidade dos aplicativos móvel
TECNOLOGIA (navegador, SO e rede) (somente para web)
mostra que tipo de tecnologia os usuário utilizam para acessar
nossa pagina, é extremamente importante para antecipar problemas
de tecnologia para o usuário
A grande diversidade de navegadores, dispositivos, tipos de
resolução, etc., gera grandes dificuldades no desenvolvimento e
otimização de websites.
MÓVEL(dispositivos e rede nos APPs)
A partir daqui conseguimos ver os informações de diversos
dispositivos, possivelmente o tráfico será maior por conta dos dias
de hoje
VARIAVEIS PERSONALIZADAS, PERSONALIZADAS E DEFINIDAS
PELO USUARIO (somente para web)
As variáveis personalizadas eram usadas na versão clássica do
Google Analytics
COMPARACAO BASICA (somente para web)
Os benchmarks nos permitem comparar nossos dados com os
dados agregados de outras empresas do setor que compartilham
seus dados.
MÓVEL(dispositivos e rede nos APPs)
atomic design
desenhando sistemas
nosso passado paginado
as coisas como são nomeadas afetam muitos como são percebidas e
 utilizadas
a web teve essa questão de paginas (papiro) para facilitar o uso e
conceito para os usuários
influencia muito como as paginas são feitas
A realidade é que a web é um meio fluido, interativo e ligadas entre si.
Qual é o nível de esforço para construir uma pagina?
o nível de esforço de um projeto é muito melhor determinado pela
funcionalidade e pelos componentes contidos nessas páginas, em
vez da quantidade de páginas em si
Rasgando a página
O design modular, ou modularidade no design
é um princípio de design que subdivide um sistema em partes
menores chamadas módulos, que podem ser criados, modificados,
substituídos ou trocados de forma independente por outros módulos
ou entre sistemas diferentes
ele está sendo importante por conta de tantos tipos de dispositivos
que nasceram no mercado
e preciso garantir que a mesma experiência seja feita em diversos
tipos de dispositivos
precisamos dividir em pedaços menores e mais gerenciáveis
precisamos dividir em pedaços menores e mais gerenciáveis
modularidade conceito que se tem falado na web,
modularidade é um conceito trazido por Henry Ford que trouxe um
mecanismos de criação de carros mais seguros e confiáveis e
uniformes e fabricados em tempo recorde
Uma estratégia gerenciável
não é mais interessante construir um site todo, os usuários ficaram
perdidos e desanimados porque precisaram reaprender como ele
funciona. Isso acontece porque as pessoas adiam pequenas
atualizações
as empresas estão entendendo a necessidade de criar MVP para
subirem de forma rápida e entender as expectativas dos usuários
um processo interativo
Agile é uma metodologia especifica para desenvolvimento de software
e acompanhada pelo framework Lean e Scrum
mas o truque é encontrar o processo que funciona melhor para você,
suas restrições e oportunidades organizacionais.
mesmo que seja impossível é bom trabalhar com equipes
interdisciplinares, entrar no ambiente final mais rapidamente, enviar
com antecedência e com frequência e dividir tarefas maiores em
componentes menores.
Modularizando o conteúdo: estou no Team Chunk
. As organizações estão reconhecendo a necessidade de criar
conteúdo modularizado para melhor alcançar seu público onde quer
que ele esteja
Código elegante
sistemas de organização de código tipo o BEM OOCSS SMACSS
Reparado visualmente
A atmosfera do design, Será visto, ou sentido, em todos os
tamanhos de tela e em todos os dispositivos. Quaisquer que sejam
 as palavras que você escolher, a atmosfera de um design não
depende do layout. É independente de arranjo e posicionamento
visual.
http://styletil.es/
http://v3.danielmall.com/articles/rif-element-collages/
Ao dividir as explorações visuais em partes menores, os designers
economizam tempo e esforço, evitando apresentar layouts irreais e
prematuros aos clientes.
Design de interface do usuário sistemático
são os nossos sanduíches Subway que combinamos em milhões de
combinações deliciosas
são as nossas peças de Lego?
Frameworks de interface do usuário, na teoria e na prática
As estruturas são kits de ferramentas úteis para montar interfaces
rapidamente.
bootstrap por exemplo
Um dos aspectos mais atraentes desses frameworks é a velocidade
tirem ideias do papel rapidamente, criem protótipos rapidamente e
lancem sites mais cedo.
produtos mínimos viáveis podem ser lançados mais cedo, levando a
respostas mais rápidas sobre a viabilidade dos produtos.
São sistemas de design incrivelmente populares que fornecem
componentes bem testados, resultando em designs consistentes e
lançamentos mais rápidos.
Problemas no paraíso do quadro
Assim como no mundo real, as diversas necessidades, objetivos e
desejos dos projetos da web levam a uma infinidade de soluções
diferentes.
Quando todos usam os mesmos botões, grades, menus suspensos
e componentes, as coisas naturalmente começam a parecer iguais
não se trata necessariamente de usar o Bootstrap para todos os
clientes, mas sim criar “pequenos Bootstraps para todos os
clientes”.
Não se trata apenas de usar um sistema de design, trata-se de criar
seu sistema.
Sistemas de design salvam o dia
Os pilares de bons sistemas de design são os guias de estilo
que documentam e organizam materiais de design enquanto
fornecem diretrizes, uso e proteções.
Identidade da marca
As diretrizes de identidade da marca definem os ativos e materiais
que tornam uma empresa única. Logotipos, tipografia, paletas de
cores etc
Linguagem de design
Os guias de estilo de linguagem de design articulam uma direção
geral de design, filosofia e abordagem para projetos ou produtos
específicos.
Google desenvolveu uma linguagem de design chamada material
design
As diretrizes da linguagem de design não são tão rígidas quanto as
 diretrizes da marca.
Voz e tom
Quando uma marca deve se comunicar em tantos pontos de contato
variados, falar de maneira unificada e consistente torna-se
fundamental para o sucesso de uma marca.
Escrita
Os guias de estilo de redação fornecem a cada autor algumas
diretrizes e proteções para contribuir com conteúdo.
Os guias de estilo de escrita podem ser extremamente granulares,
definindo detalhes sobre pontuação e gramática, mas nem sempre
precisam ser tão detalhados.
Guias de estilo de código
Os guias de estilo de código fornecem convenções, padrões e
exemplos de como as equipes devem abordar seu código.
Bibliotecas de padrões
bibliotecas de componentes
guias de estilo front-end
bibliotecas de interface do usuário
Benefícios do guia de estilo
Os guias de estilo são ferramentas importantes que ajudam a prevenir
o caos, tanto do ponto de vista do design e desenvolvimento quanto
do ponto de vista organizacional.
promovem consistência e coesão em uma interface de usuário.
Consistentemente incrível
ajudam a eliminar inconsistências
incentivando a reutilização de elementos de interface
ajudam a eliminar inconsistências
Um vocabulário compartilhado
À medida que o número de pessoas trabalhando em um projeto
aumenta, fica muito fácil ocorrer falhas de comunicação
diferentes disciplinas tenham nomes diferentes para o mesmo
módulo, e que indivíduos se tornem desonestos e inventem suas
próprias convenções de nomenclatura.
Os guias de estilo estabelecem um vocabulário consistente e
compartilhado entre todos os envolvidos em um projeto
Educação
em que certos departamentos de uma organização pensam que têm
problemas únicos e, portanto, exigem soluções únicas.
Ao expor o sistema de design na forma de um guia de estilo, esses
flocos de neve especiais podem apreciar melhor a consistência e
entender por que seus pedidos de designs personalizados são
rejeitados.
Um fluxo de trabalho empático
Um bom guia de estilo ajuda a informar designers e
desenvolvedores sobre as ferramentas que eles têm em sua caixa
de ferramentas e fornece regras e práticas recomendadas sobre
como usá-las corretamente.
designers e desenvolvedores são forçados a pensar em como
suas decisões afetam o sistema de design mais amplo . Torna-se
mais difícil ser desonesto e mais fácil pensar no bem maior.
 Testando, testando, 1-2-3
Um guia de estilo permite que você visualize os padrões de
interface isoladamente, permitindo que os desenvolvedores se
concentrem no que está causando erros, inconsistências do
navegador ou problemas de desempenho
Velocidade
É verdade que conceber um sistema de design de interface e criar
uma biblioteca de padrões personalizados inicialmente leva muito
tempo, pensamento e esforço.
Mas uma vez que a biblioteca de padrões é estabelecida, o design e
o desenvolvimento subsequentes se tornam muito mais rápidos, o
que tende a deixar todos felizes.
Nele para o longo prazo
os guias de estilo aumentam de valor ao longo do tempo.
As lições aprendidas com análises devem ser incorporadas ao guia
de estilo, tornando-o um centro poderoso para a verdade, o
conhecimento e as melhores práticas.
testes de usuários
testes A/B e experiência
Um guia de estilo fornece uma base sólida para todo o trabalho
futuro, mesmo que esse trabalho futuro possa parecer totalmente
diferente.
Desafios do guia de estilo
Mas para alcançar o nirvana do guia de estilo, você deve primeiro
superar os muitos desafios traiçoeiros que acompanham o território.
A venda difícil
Para se beneficiar dos guias de estilo, as organizações devem
primeiro apropriar-se do tempo e do orçamento necessários para
fazê-los acontecer.
Uma questao de tempo
Talvez o maior e mais inevitável desafio seja que os guias de estilo
consomem muito tempo para criar arquivos .
Infelizmente, cronogramas agressivos e orçamentos finitos
diminuem o esforço necessário para fazer os guias de estilo
acontecerem, mesmo quando as equipes estão comprometidas com
a causa.
Projetos Auxiliares
Ao tratar as bibliotecas de padrões como algo separado do projeto
principal, elas tendem a cair na categoria agradável de ter e se
tornam as primeiras no bloco de corte quando as coisas ficam
difíceis
Bibliotecas de padrões, como acessibilidade, são boas ideias para
incorporar ao seu fluxo de trabalho, independentemente de o plano
do projeto as chamar explicitamente ou não.
Manutenção e governança
essas ferramentas valiosas geralmente morrem se não receberem o
foco necessário para atingir seu verdadeiro potencial
Uma estratégia de manutenção e governança é fundamental para o
sucesso dos guias de estilo.
Confusão do público
 Os guias de estilo podem ser mal interpretados como ferramentas
úteis apenas para designers ou desenvolvedores , o que leva a uma
falta de visibilidade que limita imediatamente sua eficácia
os guias de estilo podem parecer muito vagos ou muito técnicos, o
que pode intimidar outras disciplinas e levá-las a acreditar que
esses recursos não são para elas.
Estrutura do guia de estilo
Para que os guias de estilo sejam recursos úteis para todos em uma
organização, eles devem transmitir claramente o que são e por que
são importantes.
Os guias de estilo devem ser atraentes, convidativos, visíveis,
claros e fáceis de usar
Falta de contexto
Sem fornecer contexto, designers e desenvolvedores não sabem o
quão global é um padrão específico e, como resultado, não
saberiam quais páginas de seu aplicativo precisariam ser
revisitadas, submetidas a controle de qualidade e testadas se as
alterações fossem feitas.
Falta uma metodologia clara
falta de estrutura em muitas delas.
as bibliotecas de padrões são pouco mais do que sprays de
módulos organizados livremente. Acho que há espaço para
melhorias.
Em busca de uma metodologia de design de interface
devemos evoluir além da metáfora da página que está conosco
desde o nascimento da web
metodologia do Design Atomic
sistemas modulares inteligentes para fabricar objetos imensamente
complexos, como aviões, navios e arranha-céus.
tomando dicas de da química
os átomos se combinam para formar moléculas, que se combinam
ainda mais para formar organismos.
atomos
Os átomos são os blocos de construção básicos de toda a matéria
Cada elemento químico tem propriedades distintas e não podem
ser decompostos sem perder seu significado
eles podem ser descompostos por elétrons, prótons e neutros,
porém os átomos são a menor unidade funcional
Moléculas
são grupos de dois ou mais átomos mantidos juntos por ligações
químicas
as combinações de átomos, assumem propriedades únicas e
maiores e mais operacionais do que os átomos sozinhos
Organismos
são conjuntos de moléculas que funcionam juntas como uma
unidade.
A metodologia do projeto atômico
toda a matéria no universo pode ser dividida em um conjunto finito de
elementos atômicos
O design atômico é uma metodologia composta por cinco etapas
distintas que trabalham em conjunto para criar sistemas de design de
interface de maneira mais deliberada e hierárquica. Os cinco estágios
do projeto atômico são
átomos
Átomos são elementos de interface do usuário que não podem ser
mais detalhados e servem como blocos de construção
elementares de uma interface.
são blocos fundamentais que não podem ser divididos mais sem
deixar de serem funcionais
cada atomo tem suas propriedades exclusivas, e essas
propriedades influenciam como cada atomo deve ser aplicado na
interface
moléculas
Moléculas são coleções de átomos que formam componentes de
interface do usuário relativamente simples.
moléculas são grupos de átomos ligados entre si que assumem
novas propriedades distintas
O resultado é um componente simples, portátil e reutilizável que
pode ser colocado em qualquer lugar “faça uma coisa e faça
bem”. Sobrecarregar um único padrão com muita complexidade
torna o software pesado
organismos
Os organismos são componentes relativamente complexos que
formam seções discretas de uma interface.
Organismos são componentes de UI relativamente complexos
compostos por grupos de moléculas e/ou átomos e/ou outros
organismos
alguns organismos podem consistir em diferentes tipos de
moléculas, outros organismos podem consistir na mesma
molécula repetida várias vezes.
lista de itens
header de uma pagina contém moléculas e a união de atomos
modelos wireframe lo-fi (a partir daqui não há mais contexto de
atomos)
são o wireframe
Os modelos colocam componentes em um layout e demonstram a
estrutura de conteúdo e esqueleto do design.
Ao criar um sistema de design eficaz, é fundamental demonstrar
como os componentes se parecem e funcionam juntos no
contexto de um layout para provar que as partes somam um todo
que funciona bem.
Outra característica importante dos modelos é que eles se
concentram na estrutura de conteúdo por baixo da página em vez
do conteúdo final da página
paginas    wireframe hi-fi
paginas de alta fidelidade
As páginas aplicam conteúdo real aos modelos e articulam
variações para demonstrar a interface do usuário final e testar a
resiliência do sistema de design.
As páginas são instâncias específicas de modelos que mostram a
 aparência de uma interface do usuário com conteúdo
representativo real no local
Afinal, é isso que os usuários verão e interagirão quando visitarem
sua experiência. Isso é o que seus stakeholders vão assinar
É no estágio da página que podemos dar uma olhada em como
todos esses padrões se mantêm quando o conteúdo real é
aplicado ao sistema de design
podemos voltar e modificar nossas moléculas, organismos e
modelos para atender melhor às necessidades de nosso
conteúdo
são os mesmos, mas as interfaces do usuário mudam para
refletir a natureza dinâmica do conteúdo criar páginas que levem
em conta essas variações nos ajuda a criar sistemas de design
mais resilientes
O design atômico não é um processo linear , mas sim um modelo
mental para nos ajudar a pensar em nossas interfaces de usuário
como um todo coeso e uma coleção de partes ao mesmo tempo
Vantagens do design atômico
A parte e o todo
O design atômico nos fornece uma estrutura para navegar entre as
partes e o todo de nossas UIs, por isso é crucial reiterar que o
design atômico não é um processo linear
As partes de nossos projetos influenciam o todo, e o todo influencia
as partes. Os dois estão entrelaçados, e o design atômico abraça
esse fato.
Ele escrutina e escuta, escolhe o próximo traço a fazer, depois se
aproxima da tela para fazê-lo. Então, ele dá um passo para trás
novamente para ver o que ele fez em relação ao todo
Separação limpa entre estrutura e conteúdo
. Os padrões de interface que estabelecemos devem refletir com
precisão a natureza do texto, imagens e outros conteúdos que
vivem dentro deles. Da mesma forma, nosso conteúdo deve estar
ciente da forma como será apresentado
O design atômico nos dá uma linguagem para discutir a estrutura de
nossos padrões de interface do usuário e também o conteúdo que
está dentro desses padrões.
sendo uma separação clara entre o modelo e pagina, o design
atômico reconhece que os dois influenciam muito um ao outro
O conteúdo que colocamos em nossas interfaces de usuário no
estágio da página influenciará as características e os parâmetros
dos padrões de design do wireframe.
O que há em um nome?
Átomos, moléculas e organismos implicam uma hierarquia que
qualquer pessoa com um conhecimento básico de química pode
entender.
“Design atômico” como uma palavra da moda encapsula os
conceitos de design e desenvolvimento modular, o que se torna
uma abreviação útil para convencer as partes interessadas e
conversar com colegas
O design atômico é para interfaces de usuário
 é importante entender que o design atômico se aplica a todas as
interfaces de usuário, não apenas às baseadas na web.
o design atômico lida com a criação de sistemas de design de
interface do usuário, independentemente da tecnologia usada para
criá-los.
o design atômico não tem nada a ver com assuntos específicos da
web, como CSS ou arquitetura JavaScript
Design atômico na teoria e na prática
O design atômico é uma metodologia útil de design e
desenvolvimento, mas essencialmente é apenas um modelo mental
para construir uma interface do usuário
tools of the trade
Construindo sistemas de design atômico com o Pattern Lab
ferramentas úteis para a criação de bibliotecas de padrões
a pedra angular do design e desenvolvimento é a biblioteca de
padrões
ferramenta utilizada pelo livro
https://patternlab.io/
patternlab utiliza a mesma lógica dos atomos, moléculas, organismos,
modelos e paginas o que mantem as coisas com o DRY = don't repeat
yourself
isso significa que você faz uma alteração e ele é aplicado em todos
os outros lugares
Trabalhando com dados dinâmicos
utilizando a ferramenta de Pattern Lab, você pode utilizar Json para
adicionar informações de marcação para conteúdo real
Articulando variações de padrões com pseudopadrões
Para criar designs mais robustos e resilientes, precisamos considerar
simultaneamente as melhores e as piores situações – e tudo mais.
É preciso criar um design "E se" para identificar possíveis itens que
podem dar errado dentro de um sistema
Também dentro de um determinado componente pode haver diversas
variações de um mesmo item, esse item são os famosos pseud-
padrão. Ele deve existir para diferentes contextos
podemos estender esse item para diversos contexto e alterar toda a
interface
os padrões precisam ser agnosticos (independentes) e que possam
ser utilizados em diversos contexto sem precisar criar nada do zero
Desacoplar a estrutura do padrão e os dados nos permite manter
as coisas DRY (que, novamente, significa não se repetir) e fazer
alterações no conteúdo sem afetar a estrutura do padrão
Ferramentas de viewport para padrões flexíveis
queries
https://bit.ly/3yNsgfT
comente de uma ferramanta que ele desenvolveu que reduz as telas
ou amplia para ver os media queries funcionando
Um olhar sob o capô com visualização de código
lugar para adicionar o código pronto e copiar e colar no sistema
Em última análise, qualquer ferramenta de biblioteca de padrões que
você decidir usar deve ter alguma forma de visualização de código.
 Talvez mais importante, as bibliotecas de padrões que você cria
devem mostrar os tipos de código que permitem que você e sua
equipe de desenvolvimento sejam tão eficazes quanto possível.
Documentação viva e anotações
fala da ferramenta pattern lab para colocar descrição e anotações de
código
Fornecendo contexto com a linhagem de padrões
pegando a linhagem, é possivel utilizar em outros contexto, ou até
mesmo saber onde eles foram utilizados para servir em outros lugares
Digamos que queiramos fazer alterações em um padrão específico,
como dobrar o tamanho de uma imagem ou adicionar um elemento
adicional: saberíamos imediatamente quais padrões e modelos
precisariam ser testados novamente e passar por controle de
qualidade para garantir que nada quebrasse com as alterações .
Cada um com sua mania
http://styleguides.io/tools.html
The Atomic Workflow
É gente
se todos os envolvidos não estiverem realmente cooperando e se
comunicando uns com os outros, você não criará um ótimo trabalho .
É simples assim. Isso não quer dizer que você não possa criar um
bom trabalho, mas na maioria das vezes você criará um dos muitos
tons decepcionantes de um trabalho ruim.
Quando estabelecer um sistema de design
são frequemente criado em um novo projeto ou redesenho
Padrões de arremesso
explicar o pq o design system é importante, tem a ver com dinheiro
Mostre, não conte: o poder dos inventários de interface
mostrar um inventário de quantos padrões possuem é melhor do que
palavras
Um inventário de interface é uma coleção abrangente dos bits e
peças que compõem sua interface de usuário.
Um inventário de interface arredonda e categoriza todos os padrões
exclusivos que compõem uma interface.
Conduzindo uma auditoria de interface
criação de um inventário de interface requer captura de tela e
categorização vaga de todos os componentes exclusivos que
compõem suas interfaces de usuário.
Passo 1: Reúna as tropas
chame todo mundo que faz parte do desenvolvimento e faz com
que eles tirem os screenshots
Etapa 2: prepare-se para a captura de tela
você precisará de um software para capturar e exibir essas
capturas de tela.
link para colocar itens no inventário https://bit.ly/3Pd6KYR
Etapa 3: exercício de captura de tela
este exercício não significa capturar todas as instâncias de um
padrão de interface do usuário específico, mas sim capturar
uma instância de cada padrão de interface do usuário exclusivo.
Obviamente, é importante adicionar, subtrair ou modificar
 essas categorias para melhor atender às suas necessidades
organizacionais.
Quais padrões capturar
Elementos globais
Navegação
Tipos de imagem
Ícones
Formulários
Botões
Títulos
Blocos
Listas
Componentes interativos
Mídia
Componentes de terceiros
Publicidade
Mensagens
Cores
https://cssstats.com/
http://stylifyme.com/
Animação
Tempo é tudo
define um tempo para não ficar preso com isso o dia todo
Cavar fundo
Qualquer parte da interface do usuário que seja ou possa ser
gerenciada por sua organização deve ser documentada.
Etapa 4: apresentar as descobertas
Faça com que cada participante gaste cinco ou dez minutos
apresentando cada categoria de interface do usuário ao grupo.
O líder então combinará tudo em um über-document gigante,
que logo se tornará uma bola de demolição de verdade e justiça.
Passo 5: Reagrupar e estabelecer os próximos passos
Um dos benefícios mais poderosos dos inventários de interface
é que você pode mostrá-los a qualquer pessoa, incluindo não
designers e desenvolvedores, e eles entenderão por que
interfaces de usuário inconsistentes são problemáticas.
Benefícios de um inventário de interface
Captura todos os padrões e suas inconsistências
Obtém adesão organizacional
Estabelece um escopo de trabalho
Estabelece as bases para um sistema de design de interface
de som
Peça perdão, não permissão
faça de qualquer maneira
devemos criar sistemas de design por padrão
Você tem uma decisão a tomar
concentre-se apenas em criar o todo, ignorando as partes,
ou passe algum tempo organizando as partes para ajudá-lo
a criar o todo com mais eficiência
Em vez de mergulhar de cabeça na construção do trabalho
 final, você pode reservar um tempo para fazer um balanço
das peças disponíveis e organizá-las de forma que se
tornem mais úteis.
por isso a necessidade da construção da biblioteca de
padrões
faz e depois mostra o resultado
(Re)estabelecer expectativas
as vezes é importante sair do abraço familiar para um desencontro
para ter um design padronizado
Redefinindo o design
o design de impressão ainda lança uma longa sombra e continua
a influenciar como as coisas são feitas on-line .
O design no mundo da impressão se concentra fortemente na
estética visual
a natureza bidirecional e interativa da web adiciona muito mais
dimensões ao que constitui um bom design
https://adactio.com/journal/4443
Além de criar experiências visualmente bonitas e consistentes,
devemos:
Abrace a onipresença da web criando sistemas de design
acessíveis e resilientes.
Crie layouts e componentes flexíveis para que nossas interfaces
pareçam e funcionem perfeitamente
Trate o desempenho como um princípio de design essencial
Aprimore progressivamente nossas interfaces estabelecendo
experiências principais
Crie sistemas de design amigáveis para o futuro
Morte à cachoeira
O processo em cascata, em que as disciplinas repassam o
trabalho umas às outras em ordem sequencial, provavelmente
não resultará em um ótimo trabalho digital.
o mundo digital não é limitado pelas mesmas limitações que o
mundo físico. Pixels são baratos. As mudanças podem acontecer
em um instante, as hipóteses podem ser testadas rapidamente e
os designs e o código podem ser repetidos várias vezes.
Um fluxo de trabalho mais colaborativo envolve uma equipe
interdisciplinar trabalhando em conjunto durante todo o
processo.
Desenvolvimento é projeto
design de interface de usuário bem-sucedidos, é crucial tratar o
desenvolvimento de front-end como parte central do processo de
design .
As equipes podem demonstrar uma ideia de design esteticamente
focada como uma imagem estática e, simultaneamente,
demonstrar um protótipo funcional dessa mesma ideia no
navegador
Um processo iterativo iterativo iterativo iterativo
Um processo digital iterativo é semelhante à escultura em pedra
subtrativa, onde a fidelidade é construída ao longo de muitas
iterações.
 Um sistema de design de som não sai de uma linha de
montagem, mas é esculpido em loops iterativos, construindo
fidelidade à medida que o projeto avança.
Estabelecendo direção
É essencial concordar com uma direção geral de design e pintar
os traços amplos primeiro antes de passar para o design e
desenvolvimento de alta fidelidade
lo-fi
Estabelecendo padrões de conteúdo e exibição
UX são responsáveis por sintetizar todas essas informações
vitais e traduzi-las em uma interface de usuário que atenda aos
objetivos de negócios e do usuário do projeto.
Em vez de pular direto para esses documentos de alta
fidelidade, é melhor começar com esboços lo-fi
ele comenta no livro que pode ser feito também com planilha
excel, a idéia geral e utilizar o esboço para ter uma conversa de
como vai acontecer
https://www.lukew.com/ff/entry.asp?933
Estabelecendo direção visual
O trabalho de um designer visual é criar uma linguagem estética
e aplicá-la à interface do usuário de forma alinhada com os
objetivos do projeto.
O teste de intestino de 20 segundos
escolher 10 sites que depois os usuarios escolheram qual site
é o melhor e o pior (buscar no livro o restante)
Este exercício expõe as partes interessadas a uma variedade
de direções estéticas no início do processo
Blocos de estilo
Além disso, a criação de composições de alta fidelidade
geralmente faz grandes suposições sobre a viabilidade
técnica, o que leva a expectativas irreais e relacionamentos
antagônicos com desenvolvedores front-end
moodboards
http://styletil.es/
http://sparkbox.github.io/style-prototype/
Você pode ter conversas importantes sobre design estético
sem ter que criar composições completas.
Colagens de elementos
As colagens de elementos fornecem um playground para os
designers aplicarem uma atmosfera de design a elementos de
interface reais, mas ainda assim livres de layout e
apresentação altamente polida.
Assim como os azulejos de estilo, as colagens de elementos
visam facilitar a discussão sobre a direção estética do
projeto. Está muito claro que essas colagens não são um
site real, mas as partes interessadas ainda podem ter uma
ideia de como o site pode ser.
A conversa sobre essas colagens de elementos pode dar aos
designers visuais mais ideias e direção sobre onde levar o
design a seguir e, devido à sua natureza lo-fi, os designers
 podem rapidamente iterar e evoluir ideias.
Chef de preparação front-end
o dev já podem ir trabalhando sem mesmo ter uma tela, por
exemplo:
Você pode configurar a pesquisa no site, uma tabela de
carrinho de compras, uma página de detalhes do produto de
espaço reservado, a página inicial e as páginas de checkout
Com a marcação básica em vigor, os desenvolvedores
podem trabalhar com designers para ajudar a validar as
decisões de design de UX por meio de conversas e
protótipos funcionais.
Pare, colabore e ouça
Os designers de UX podem criar esboços lo-fi para
estabelecer a arquitetura básica de informações e alguns
padrões de interface do usuário antecipados.
Os designers visuais podem reunir os valores estéticos das
equipes realizando um exercício de teste de 20 segundos e,
em seguida, criar blocos de estilo e colagens de elementos
para explorar as direções iniciais do design.
Os desenvolvedores front -end podem configurar
dependências do projeto, criar modelos básicos e escrever
marcação estrutural para padrões que a equipe prevê usar no
projeto.
Arregaçando as mangas
Do conceito à conclusão
Transformar explorações em padrões acabados é um processo
embaçado e imperfeito.
O papel dos comps na era pós-PSD
criamos uma composição para o modelo de artigo somente
depois que o cliente estava se sentindo bem com nossas
explorações de colagem de elementos
Comps, como qualquer outro artefato de design, são usados
para facilitar uma conversa com as partes interessadas do
projeto
Iteração no navegador
As composições de design estático    devem ser tratadas apenas
como hipóteses, e não como especificações definitivas
Somente quando transferido para o navegador, qualquer
hipótese de projeto pode ser realmente confirmada ou rejeitada.
Trazê-lo em casa
O que começou como uma gigantesca laje de rocha agora é uma
escultura finamente polida, graças a muito trabalho duro,
colaboração genuína, comunicação constante e muita interação
Maintaining Design Systems
Um guia de estilo é um artefato do processo de design. Um sistema de
design é um produto vivo e financiado com um roteiro e uma lista de
pendências, servindo a um ecossistema.
Um sistema de design precisa de manutenção contínua, suporte e
carinho para que ele realmente prospere.
Mudando de ideia, mais uma vez
 O que estamos fazendo de novo?
precisamos remover da mente que só fazemos sites, precisamos
manter com carinho o sistema vivo do design system tornando ele
um documento de referência, caso o contrário ele se torna obsoleto
digamos que você descobre que um determinado molécula não
funciona bem em uma tela. Você notará que esse problema poderá
ocorrer também em outro lugar que ele esteja inserido, você
pesquisa e descobre que sim, então você poderá trocar em todo
lugar.
oportunidades para aprimorar a interface do usuário geralmente
serão percebidos no nível do aplicativo , mas essas alterações
geralmente devem ser implementadas no nível do sistema
Adicionar esse pouco de atrito amigável ao seu fluxo de trabalho
garante que as melhorias sejam compartilhadas em todo o
ecossistema e evita que o sistema seja corroído por uma série de
alterações pontuais.
Feito e feito
No digital um trabalho nunca termina, e no design system é a
mesma coisa, ele sempre precisará ser revistado e modificado.
Um sistema de design deve ser um compromisso de longo prazo
com o objetivo ambicioso de revolucionar a forma como sua
organização cria trabalho digital
Criando sistemas de design sustentáveis
Para configurar seu sistema de design para o sucesso a longo prazo,
você precisa:
Torná-lo oficial.
Faça uma coisa.
escolha um projeto para que seja o piloto
Mostre que é útil
mostre como ele foi útil na construção economia de tempo e
dinherio
torne oficial
Com a aprovação dos níveis mais altos, agora você pode colocar
em ação um plano que envolve
Estabelecendo uma equipe de sistema de design
Com a iniciativa do sistema de design aprovada, agora é hora
de colocar as pessoas e os processos certos para garantir que o
sistema prospere para sua organização.
Projete fabricantes e usuários de sistemas
Os criadores do sistema de design são aqueles que criam,
mantêm e governam o sistema e precisam trabalhar em
conjunto para garantir que o sistema seja inteligente, flexível,
escalável e atenda às necessidades dos usuários e negócios.
Os usuários do sistema de design são as equipes em toda a
organização que irão utilizar o sistema e empregar seus padrões
de interface para aplicativos específicos.
Ambas as perspectivas são críticas para o sucesso do sistema
de design, e é por isso que é tão importante que fabricantes e
usuários tenham um relacionamento saudável que envolva
comunicação e colaboração frequentes.
 Criadores de sistemas de design
a equipe dedicada é responsável por governar o sistema de
design e garantir que ele atenda às necessidades das equipes
internas de produto, bem como dos desenvolvedores externos
que constroem coisas na plataforma da empresa.
Em meu trabalho como consultor, trabalho com organizações
para estabelecer estratégias de manutenção de sistemas de
design de longo prazo e ajudar a colocar as pessoas e os
processos certos no lugar.
Usuários do sistema de design
Os usuários do sistema de design podem ser a mesma equipe
que cria o sistema de design, equipes de desenvolvimento
separadas dentro de sua organização, designers e
desenvolvedores de nível júnior, agências parceiras, lojas de
desenvolvimento externas ou outras equipes de terceiros.
quanto menor for sua empresa, mais próximo será os
criadores e os usuários do design system
Maquiagem da equipe do sistema de design
Uma equipe interdisciplinar deve ser estabelecida para
gerenciar, manter e estender adequadamente o sistema.
Torná-lo adaptável.
Se os usuários se sentirem algemados e limitados a usar padrões
que não resolvem seus problemas, eles perceberão o sistema de
design como uma ferramenta inútil e começarão a procurar em
outro lugar por algo que atenda melhor às suas necessidades.
Essas verificações regulares são especialmente úteis para manter
as partes interessadas atualizadas, uma vez que muitas vezes não
estão envolvidas no dia-a-dia das operações do sistema de design.
Fazendo alterações nos padrões
O resultado é uma linda árvore de decisão que mapeia
exatamente quais processos precisam acontecer para adicionar
um novo padrão ao sistema de design.
3 tipos de mudanças que podem ocorrer nos padrões
Modificando padrões
Os padrões de interface do usuário podem e devem ser
modificados por vários motivos: adições de recursos,
correções de bugs, ajustes sutis ou importantes de design
visual, melhorias de desempenho, aprimoramentos de
acessibilidade, refatoração de código, atualizações de práticas
recomendadas de UX e assim por diante.
Adicionando padrões
À medida que o sistema é aplicado a mais produtos,
inevitavelmente surgirão lacunas onde as necessidades do
aplicativo não forem resolvidas pelos padrões existentes.
Nesses casos, ficará claro que novos padrões precisarão ser
criados para atender a essas necessidades.
Removendo padrões
Ter um plano para depreciar padrões é uma ótima ideia. Mas
como você remove padrões do sistema de design sem puxar o
tapete das pessoas que confiam nesses padrões em seus
 aplicativos? Para resolver esse problema, a Salesforce criou
um utilitário interessante chamado Sass Deprecate , que
sinaliza padrões que estão indo para o bloco de corte em um
futuro próximo.
Torná-lo sustentável
Fazer atualizações nos padrões de interface do usuário,
documentação e aplicativos deve ser o mais simples possível ,
portanto, reduzir esse atrito deve se tornar uma alta prioridade para
a equipe do sistema de design.
Em busca do santo graal
O santo graal dos sistemas de design é um ambiente em que
fazer alterações em um padrão de interface do usuário atualiza a
biblioteca de padrões e os aplicativos de produção
simultaneamente.
Essa abordagem não é tarefa fácil, pois requer arquitetura
técnica sofisticada, pessoas inteligentes para configurar tudo e
uma cultura organizacional relativamente centralizada.
Eliminando obstáculos técnicos
Manter uma biblioteca de padrões em sincronia com os ambientes
de produção requer o compartilhamento de código de maneira
inteligente, escalável e sustentável.
O front-end das coisas
Preenchendo a lacuna de marcação com linguagens de
modelagem
Uma linguagem de modelagem como Mustache, Handlebars,
Underscore, Jade e outras pode servir como uma ponte que
permite que o código front-end seja compartilhado entre a
biblioteca de padrões e o aplicativo de produção.
A sua cultura é compatível com o Santo Graal?
aqui nesse capitulo ele fala das possibilidades de fazer o
santo graal comenta do EUA, mas diz que o processo não é
algo simples de ser feito, isso pq envolve união entre backend
front
Torná-lo interdisciplinar
Torne a biblioteca de padrões acessível a todas as disciplinas e
pense em como torná-la fácil e convidativa para que diferentes
disciplinas contribuam com a documentação.
Torná-lo acessível.
Uma grande parte de tornar um guia de estilo um recurso
interdisciplinar é garantir que o contêiner que abriga sua biblioteca
de padrões e outras documentações seja bonito, convidativo e fácil
de navegar.
Torne-o visível
A visibilidade é extremamente importante para a integridade
contínua do seu sistema de design.
Evangelismo do sistema de design
Estabelecer uma cultura de comunicação no início do processo
aumentará a probabilidade do sistema de design criar raízes.
Comunicação de mudança
A equipe de design de material publica um registro de alterações
 útil em seu guia de estilo para que os usuários possam aprender
facilmente sobre as atualizações e melhorias mais recentes do
sistema.
Treinamento e suporte
É essencial fornecer treinamento adequado e oferecer suporte
contínuo aos usuários do seu sistema de design para garantir
que eles comecem a trabalhar com sucesso com o kit de
ferramentas e continuem a criar um ótimo trabalho com ele
ser por completo facilitador para que as pessoas utilizem a
ferramenta, no livro da diversas dicas
Torná-lo público
Publicar seu guia de estilo para o mundo ver aumenta sua
visibilidade, aumenta a responsabilidade e serve como uma
ferramenta de recrutamento incrível.
Torná-lo maior
há uma grande oportunidade de estendê-lo para incluir outra
documentação útil, como voz e tom, marca, código, princípios de
design e diretrizes de escrita
Outra maneira de estender a funcionalidade da biblioteca de
padrões é incluir diretrizes para padrões de plataforma nativa
juntamente com padrões baseados na web
Torná-lo agnóstico (independente) de contexto
A maneira como seus padrões de interface do usuário são
nomeados, sem dúvida, moldará como eles são usados. Quanto
mais agnósticos forem os nomes dos padrões, mais versáteis e
reutilizáveis eles se tornarão.
Embora nomear coisas sempre seja um desafio, nomes de padrões
que são independentes de contexto e conteúdo serão mais
portáteis, reutilizáveis e versáteis.
Torne-o contextualizado
Apresentar padrões de interface do usuário em uma biblioteca de
padrões é muito bom, mas você precisa demonstrar o contexto para
que os usuários do sistema de design entendam como e onde usá-
los adequadamente
Faça durar
seu sistema de design deve ser como uma garrafa de vinho fino que
aumenta de valor ao longo do tempo.
Torne-o oficial alocando tempo real, dinheiro e recursos ao seu
sistema de design.
Torná-lo adaptável contando com a mudança e estabelecendo um
plano de governança claro.
Torne-o sustentável buscando o Santo Graal e facilitando a
implantação e comunicação de alterações no sistema de design
Torná-lo interdisciplinar , tornando sua biblioteca de padrões um
poço de água em que toda a organização pode se reunir.
Torne-o acessível criando um guia de estilo atraente e fácil de
usar, com documentação de acompanhamento útil.
Torne-o visível comunicando a mudança, evangelizando o sistema
de design e tornando-o público.
Aumente-o incluindo marca, voz e tom, código, princípios de
 design e diretrizes de redação.
Torne-o agnóstico nomeando padrões de acordo com sua
estrutura em vez de seu contexto ou conteúdo.
Torne-o contextual demonstrando quais padrões compõem um
padrão específico e mostrando onde cada padrão é usado.
Faça-o durar , estabelecendo uma base sólida com a qual
construir nos próximos anos.
Torne-o acessível criando um guia de estilo atraente e fácil de
usar, com documentação de acompanhamento útil.
dica
busque as pequenas peças já criadas dentro do biblioteca, e reutilize,
na verdade, são os warppers os containers que já estão prontos e sem
a minha necessidade de criar tudo o que já foi feito. Veja quais são os
pedaços que eu já posso me servir para usar os elementos
Engajado
introdução
formação de hábitos
Os psicólogos cognitivos definem hábitos como “comportamentos
automáticos desencadeados por pistas situacionais”: coisas que
fazemos com pouco ou nenhum pensamento consciente.
A formação de hábitos é imprescindível para a sobrevivência de
muitos produtos.
Acumular milhões de usuários não é mais suficiente.
Para conquistar a fidelidade de seus usuários e criar um produto
que seja usado regularmente, as empresas devem aprender não
apenas o que leva os usuários a clicar, mas também o que os
motiva.
O primeiro a mente venceu
as empresas anexam seus produtos a gatilhos internos . Como
resultado, os usuários aparecem sem nenhum aviso externo.
as empresas formadoras de hábitos vinculam seus serviços às rotinas
e emoções diárias dos usuários
Como os produtos criam hábitos? A resposta: eles os fabricam
comportamento são ganchos
Como me viciei
ele ficou interessado como as empresas fazem as lavagens cerebrais
e fez pesquisa sobre o que estava ocorrendo, ele administrou uma
aula com um colega chamdo Baba Shiv e desse material construiu o
Engajado ensinando as 4 fases desse processo.
Por meio de ciclos consecutivos de Hook, produtos de sucesso
atingem seu objetivo final de engajamento imediato do usuário,
trazendo os usuários de volta repetidamente, sem depender de
publicidade cara ou mensagens agressivas.
o Gancho é encontrado em qualquer experiência que penetrem em
nossa mente
gatilho
interno
externo
ação
recompensa variável
 investimento
proposta de valor
proposta de valor
ele é usado para?
gerenciar e renovar propostas de valor (MELHORAR)
Gerencie, meça, desafie, melhore e renove propostas de valor e
modelos de negócios existentes.
criar novas propostas de valores (INVENTAR)
Invente novas propostas de valor que as pessoas desejam com
modelos de negócios que funcionem.
Ele server para projetar e testar grandes propostas de valor em uma
busca iterativa do que os clientes desejam. O design da proposta de
valor é um processo interminável no qual você precisa evoluir sua(s)
proposta(s) de valor constantemente para mantê-la relevante para os
clientes.
Habilidades de quem usa a proposta de valor
conhecimento empreendedor
Você gosta de experimentar coisas novas
Habilidades de ferramentas
Você usa sistemática mente ferramentas e processos em sua busca
por grandes propostas de valor e modelos de negócios.
Habilidades de Design Thinking
Você explora várias alternativas antes de escolher e refinar uma
direção específica
Empatia do cliente
Você incansavelmente adota uma perspectiva do cliente
Habilidades de Experimentação
Você busca sistematicamente evidências que apoiem suas ideias e
testem sua visão
Os 2 lados da proposta de valor
perfil do cliente
você esclarece o entendimento do seu cliente.
(SEGMENTO) descreve um segmento de cliente específico em
seu modelo de negócios de forma mais estruturada e detalhada.
esta divida em:
tarefas
melhorar o app
tarefas que ele faz dentro do nosso aplicativo
inventar o app
o que os clientes estão tentando realizar em seu trabalho e
em suas vidas, conforme expresso em suas próprias
palavras.
Um trabalho do cliente pode ser as tarefas que eles estão
tentando realizar e concluir, os problemas que estão
tentando resolver ou as necessidades que estão tentando
satisfazer.
trabalhos funcionais
por exemplo, cortar a grama, comer de forma saudável
como consumidor, escrever um relatório ou ajudar os
clientes como profissional.
 trabalhos sociais
Esses trabalhos descrevem como os clientes querem ser
percebidos pelos outros, por exemplo, parecer na moda
como consumidor ou ser percebido como competente
como profissional.
trabalhos pessoais/emocianais
Quando seus clientes buscam um estado emocional
específico, como sentir-se bem ou seguro,
buscar tranqüilidade em relação aos seus
investimentos como consumidor ou alcançar a
sensação de segurança no emprego no local de
trabalho.
trabalhos de apoio
comprador de valor
como comparar ofertas, decidir quais produtos
comprar, ficar na fila do caixa, concluir uma compra ou
receber um produto ou serviço
cocriador de valor
postar avaliações e feedbacks de produtos ou até
mesmo participar do design de um produto ou serviço.
transferente de valor
cancelar uma assinatura, descartar um produto,
transferi-lo para terceiros ou revendê-lo.
as tarefas precisam ser medidas
importante
insignificante
dores
melhorar o app
dores que o usuário tem em utilizar o nosso app EX:
(abaixar um novo aplicativo, ter que aprender a utiliza-lo,
ter que colocar os nomes dos livros dentro do aplicativo)
inventar o app
resultados ruins, riscos e obstáculos relacionados aos
trabalhos/tarefas do cliente.
As dores descrevem qualquer coisa que aborreça seus
clientes antes, durante e depois de tentar fazer um trabalho
ou simplesmente os impeça de fazer um trabalho
funcionais
uma solução não funciona, não funciona bem ou tem
efeitos colaterais negativos
sociais
eu pareço mal fazendo isso
emocionais
eu me sinto mal toda vez que faço isso
auxiliar
É chato ir à loja para isso
Correr na academia é chato” ou “Esse design é feio”
é preciso perguntar para o cliente o que de fato dói
Quais erros comuns seus clientes cometem?
Eles estão usando uma solução da maneira errada?
 Quais são as principais dificuldades e desafios que seus
clientes encontram?
Eles entendem como as coisas funcionam, têm
dificuldades em fazer certas coisas ou resistem a trabalhos
específicos por razões específicas?
as tarefas podem ser medidas
insignificante
importante
ganhos
melhorar o app
o que ele espera ganhar com o nosso aplicativo. (melhoria
na vida dele como usuário do app ( receber
recomendações de receitas, ser informado de novas
atualizações, compartilhar arquivos, fazer novos amigos,
presentear amigos)
inventar o app
resultados que os clientes desejam alcançar ou os
benefícios concretos que estão buscando.
Os ganhos descrevem os resultados e benefícios que seus
clientes desejam. Alguns ganhos são exigidos, esperados ou
desejados pelos clientes, e alguns os surpreenderiam
ganhos necessários
São ganhos sem os quais uma solução não funcionaria
ganhos esperados
Esses são ganhos relativamente básicos que esperamos
de uma solução, mesmo que ela funcione sem eles
ganhos inesperados
São ganhos que vão além das expectativas e desejos
dos clientes. Eles nem sequer os inventariam se você os
perguntasse
Pergunte para o usuário
Como as propostas de valor atuais encantam seus
clientes?
Quais recursos específicos eles gostam?
Que desempenho e qualidade eles esperam?
O que facilitaria o trabalho ou a vida de seus clientes?
erros comuns na hora de preencher o perfil do cliente
Misturar vários segmentos de clientes em um único perfil.
Misturando trabalhos e resultados.
Concentrando-se apenas em trabalhos funcionais e
esquecendo trabalhos sociais e emocionais.
Listando trabalhos, dores e ganhos com sua proposta de valor
em mente.
Identificando poucos empregos, dores e ganhos.
Ser muito vago nas descrições de dores e ganhos.
Necessita de uma pesquisa para encontrar essas dores.
Observar clientes
O conjunto de características do cliente que você assume,
observa e verifica no mercado.
mapa de valor
você descreve como pretende criar valor para aquele cliente.
(PROPOSICÃO ) descreve as características de uma proposta de
valor ESPECIFICA em seu modelo de negócios de forma mais
estruturada e detalhada.
esta dividia em:
produtos e serviços
melhorar o app
quais produtos essências devem ter o nosso negócio ( é
um aplicativo web, é um site, um canal no whatsapp,
atendimento em rede sociais. Serviços que irão atender o
usuário
inventar app
São os recursos e/ou serviços, físicos e/ou digitais que a
empresa fornecerá para atender o usuário. (ter uma loja
física, ter um app azul, ter rede sociais ou canais de
atendimento)
Esta é simplesmente uma lista do que você oferece.Esse
pacote de produtos e serviços ajuda seus clientes a concluir
trabalhos funcionais, sociais ou emocionais ou os ajuda a
satisfazer necessidades básicas. Não cria apenas relação a
um segmento específico de cliente
a lista é composta
físico/tangível
bens de consumo, produtos em série
intangível
Produtos como direitos autorais ou serviços como
assistência pós-venda.
digital
Produtos como downloads de música ou serviços
como recomendações online.
financeiro
Produtos como fundos de investimento e seguros ou
serviços como o financiamento de uma compra.
a lista é composta
analgésicos
melhorar o app
quais sãos as funcionalidades que existem, existirão para
aliviar as dores do cliente
inventar o app
descrevem como seus produtos e serviços aliviam as
dores do cliente.
Eles descrevem clara/objetiva como você pretende eliminar
ou reduzir algumas das coisas que incomodam seus clientes
antes, durante ou depois de tentarem concluir um trabalho
ou que os impedem de fazê-lo.
Você não precisa encontrar um analgésico para cada dor
que identificou no perfil do cliente – nenhuma proposta de
valor pode fazer isso.    Grandes propostas de valor
geralmente se concentram apenas em algumas dores
Pergunte a si mesmo: seus produtos e serviços . . .
 corrigir soluções de baixo desempenho?
eliminar as consequências sociais negativas que seus
clientes encontram ou temem
eliminar os riscos que seus clientes temem?
pode ser medido, essencial, como poderia ter
Ganhos/beneficios/vitaminas para aumentar os ganhos do
usuário
melhorar app
intensificadores de ganhos do usuário
inventar app
descrevem como seus produtos e serviços irão gerar
ganhos para os clientes.
Eles descrevem explicitamente como você pretende produzir
resultados e benefícios que seu cliente espera, deseja ou
ficaria surpreso, incluindo utilidade funcional, ganhos sociais,
emoções positivas e economia de custos.
os criadores de ganhos não precisam abordar todos os
ganhos identificados no perfil do cliente. Concentre-se
naqueles que são relevantes para os clientes e onde seus
produtos e serviços podem fazer a diferença.
Pergunte a si mesmo: seus produtos e serviços . . .
superar as propostas de valor atuais e encantar seus
clientes?
produzir resultados que seus clientes esperam ou que
superam suas expectativas?
fazer algo específico que os clientes estão
procurando?
o serviços podem ser medidos por relevância
criar valor
O conjunto de benefícios da proposta de valor que você projeta
para atrair clientes.
A visão sobre o que o nosso produto traz de relevância
comparado com o nosso concorrentes
ou se estamos criando algo do zero que esteja incluíndo
funcionalidades qu atendem nosso usuários.
equilibrio entre eles
Você alcança o ajuste entre os dois quando um encontra um
relacionamento positivo entre o cliente e o que a empresa oferece
como acontece a união dos lados?
Você alcança o ajuste/equilibrio quando seu mapa de valor
atende ao perfil do seu cliente
quando seus produtos e serviços produzem
analgésicos
vitaminas
que correspondem a um ou mais dos trabalhos, dores e ganhos
que são importantes para seu cliente.
dores
ganhos
por isso a importância de classificação das dores e ganhos para
entender o que é mais importante para o usuário
definição da proposta de valor
Descreve os benefícios que os clientes podem esperar de seus
produtos e serviços.
Ajuste
abordar ganhos essenciais
abordar dores extremas
fazer uma analise e verificar se os analgésicos e ganhos se encaixam
em algum item do usuário
na tarefa
na dor
no ganho
se não houver ganhos ou analgésico que não se encaixa no usuário,
pode ser que não esteja ganhando valor
As 3 fases do ajustes
quando você identifica os trabalhos, as dores e ganhos do usuário
(essenciais) e sua proposta atende eles
no papel
ter evidências corretas dos usuários sobre certos trabalhos,
dores e ganhos.
desenvolver protótipos que atendem que aborda, trabalhos,
dores e ganhos
você cria protótipos que atendem mais de uma necessidade até
achar o ajuste correto. continuar analisando até achar a sintese
correta
quando o usuário reconhecem sua proposta de valor e o mercado
reage com ele
no mercado
ter evidências que o que foi construído está de acordo com a
visão do cliente. Encontrar esse segundo tipo de ajuste é um
processo longo e interativo; isso não acontece da noite para o
dia.
Durante esta segunda fase, você se esforça para validar ou
invalidar as premissas subjacentes à sua proposta de valor. As
ideias do primeiro item fazem sentindo.
no final vc consegue construir uma ferramenta viável e rentável
dinheiro
Descobrir se o que vc fez é escalável
um trabalho de ida e volta entre o design de uma proposta de
valor
que cria valor para os clientes
um modelo de negócios que cria valor para sua organização
varios ajustes
você pode unir varias proposta de valor numa só
proposta de valor para parceiros de negocios
criar proposta    para o parceiro
intermediario
quando você tem stakeholders evolvidos na decisão do
usuario exemplo, supermecado, cliente, caixa, fornecedor de
leite
plataforma
 quando vc é o tem o serviço exemplo aibnb, precisa de um
mapa de valor para o cara que quer alugar e o viajante
multifacetado
quando existem mais de dois
airbnb
dupla face
quando existem dois desses atores
criar proposta para o usuário final
x
proposta de valor para empresas
considerar criar uma proposta de valor para cada item
influenciadores
recomendadores
compradores econômicos
tomadores de decisão
usuários finais
sabotadores
proposta de valores para familia
considerar uma proposta de valor para cada item
influeciadores
recomendadores
compradores econômicos
tomadores de decisão
usuarios finais
sabotadores
Os Clientes
dependendo das tarefas do usuário você descobre diferentes
segmentos de cliente. É importante criar esse contexto para cobrir
todos os usuários possíveis.
cenários
tarde com as crianças
Quando?
tarde de quarta-feira
Onde?
saindo de casa
Com quem?
criança e talvez seu amigo
Restrições
depois da escola ou antes de dormir
encontro a noite
Quando?
Sábado à noite
Onde?
Saindo de casa
Com quem?
Parceiro
Restrições
Crianças cuidadas (se pais)
pesquisa pessoal
Quando?
 A qualquer momento
Onde?
Saindo de casa
Com quem?
Sozinho
Restrições
Precisa ser capaz de fazer anotações
soluções diferentes
é pra criar diversas proposta de valor para o mesmo clientes
(soluções)
vc tem diversas soluções para o mesmo cliente
como começar
nova ideia
No entanto, não é obrigatório começar com o conhecimento
preexistente do cliente
Você pode começar a explorar ideias esboçando um perfil com
base na aparência de seus clientes em potencial.
Se você estiver trabalhando em uma nova ideia, esboce o
segmento de clientes para o qual pretende criar valor.
Este é um excelente ponto de partida para preparar entrevistas e
testes com clientes sobre suas suposições sobre os trabalhos,
dores e ganhos do cliente
quando temos um perfil de cliente
entrevistas
O perfil do cliente esboçado à direita é informado por várias
entrevistas que realizamos
Interações que tivemos com os participantes do workshop.
nas entrevista perguntamos sobre as tarefas que os usuários estão
tentando fazer
classificação de ranking de trabalho, dores e ganhos
é essencial para projetar propostas de valor que abordem coisas
com as quais os clientes realmente se importam.
Não importa se você começar com uma classificação baseada no
que você acha
mas é preciso testar essa classificação inicial
fluxo de trabalho
comece com um discovery: objetivo: encontrar um restaurante
segmento do cliente 1
tarefas 1
dores 2
ganhos 3
as perguntas são sobre o usuário
proposta de valor 2
descreva os serviços e produtos 4
São os produtos não funcionalidades
Pergunte a si mesmo: seus produtos e serviços . . .
alivam as dores do cliente 5
DESCREVA exatamente como AS FUNCIONALIDADES dos
seus produtos e serviços ELIMINAM as dores do cliente
Não adicione produtos ou serviços aqui
 Use uma nota adesiva por analgésico.
geram valores ou aumenta 6
EXPLICA como exatamente AS FUNCIONALIDADES dos
seus produtos e serviços AJUDAM os clientes a obter
ganhos
Não adicione produtos ou serviços aqui.
Use uma nota adesiva por analgésico.
não deve tentar abordar todas as dores e ganhos do cliente.
Concentre-se naqueles que farão a diferença para o seu
cliente.
O principal objetivo dessas duas áreas é tornar explícita a
criação de valor para o cliente de seus produtos e serviços.
pode agregar várias proposta de valor em apenas 1
priorize em ordem de importância e relevância
trabalhos dores e ganhos
Você não decide quais trabalhos, dores e ganhos o cliente tem
Analgésicos e vitaminas
Você decide (ou seja, projeta) como pretende criar valor abordando
trabalhos, dores e ganhos específicos
lições aprendidas
perfil do cliente
Use o perfil do cliente para visualizar o que importa para os clientes.
mapa de valores
Use o mapa de valor para deixar explícito como você acredita que
seus produtos e serviços aliviarão as dores e gerarão ganhos.
ajuste
Ajuste de solução de problema: evidência de que os clientes se
preocupam com os trabalhos, dores e ganhos que você pretende
abordar com sua proposta de valor.
documente, apresente para os interessados o que você esta querendo
resolver para testa-lo
a proposta é uma ferramenta de analise que ajuda
projetar
O objetivo do Design de Proposta de Valor é testar ideias o mais
rápido possível para aprender, criar designs melhores e testar
novamente.
ad-lib
improvisao, criar algo iterando
testar
repetir
a proposta de valor é um complemento do psicodemográficos ou seja, a
persona.
só a persona não ajuda, saber o quais as tarefas, dores e ganhos
ajudará a criar produtos melhores.
Os perfis psicodemográficos tradicionais agrupam os consumidores em
categorias que possuem as mesmas características socioeconômicas.
protótipos
Explore rapidamente direções radicalmente diferentes para a mesma
ideia com as seguintes técnicas de prototipagem antes de refinar uma
em particular.
 adlibs
Nosso
produto e serviço
ajuda
segmentos de cliente
que querem
trabalhos a serem feitos
ao
verbo: por exemplo, reduzir, evitar, impedir
uma dor do usuário
e ao
aumentar, permitir, possibilitar
um benefício para o usuário
é uma frase que ajuda a identificar onde queremos chegar com a
proposta de valor e a expectativa do cliente, criando assim um ponte
de partida e chegada
faça muitos para identificar qual a melhor direção, é o primeiro
protótipo
utilizado para o sistema dupla face ou multifacetado
sugestões
crie mais de uma sugestão e compare qual é a melhor
Lembre-se constantemente de que a prototipagem é uma ferramenta
exploratória.
mapa stakeholders
a proposta de valor vai muito bem depois que mapear os possíveis
stakeholders e assim criar um proposta completa
criar ad-libs para cada ideia que surgir na proposta de valor e
identificar a melhor dor que iremos resolver
verbos que ajudam a construir a proposta de valor
TAREFAS o que faço e como faço
o que eu quero
satisfazer
concluir
resolver
realizar
como quero ser percebido
como quero me sentir
DORES o que sinto e como me sinto
não quero que aconteça / e o que acontece
medos
receios
preocupações
com o produto que vou usar
me sentir frustado
GANHOS o que poderia acontecer de positivo
o que eu espero que aconteça
funcione bem
seja leve
que pode ser facil usar
o que poderia ter
 o que quero que aconteça
me sentir bem
o que quero que aconteça
PRODUTOS E SERVIÇOS
lista de produtos que vai oferecer
ANALGESICOS e funcionalidades
são as funcionalidades que pretendem sanar as dores do cliente
dependendo do contexto e do usuário, os recursos de sua proposta
de valor serão diferentes dependendo de qual(is) contexto(s) você
está focando.
cenários
VITAMINAS
são os ganhos que as funcionalidades ofereceram para o cliente
usando seu produto