Metodologia para Projeto Interface Gráfica

PROJETO DE PUBLICAÇÃO DIGITALProposta Metodológica

ETAPAS DA EXPERIÊNCIA DO USUÁRIO JESSE J. GARRETT

• Estratégia

• Escopo

• Estrutura

• Esqueleto

• Superfície

ESTRATÉGIA• Objetivos do Produto

• Metas do produto - o que ele quer atingir?

• Identidade da Marca - quais os valores da marca?

• Métricas de Sucesso - como medir as metas?

• Necessidades do Usuário

• Perfil de usuário - Criação de três personas

• Equipe de desenvolvimento

• Quem participa do projeto

PERSONAS HTTPS://BLOG.BUFFERAPP.COM/MARKETING-PERSONAS-BEGINNERS-GUIDE

• Nome e foto• Aspectos demográficos

• Idade• Gênero• Onde mora• Formação• Estado civil

• Ocupação• Sobre o local de trabalho (tipo, tamanho, localização). Qual seu cargo e atividades.• Metas e desafios em relação à natureza do produto

• Como você pode ajudar a superar essas metas e desafios?• Valores e temores em relação ao tipo de produto• Passatempos• Letramento digital• Produtos similares que usa

ESCOPO

• Especificações Funcionais

• Descrever as funcionalidades do produto de forma positiva, específica e objetiva

• Requisitos de Conteúdo

• Inventário de conteúdo

ESTRUTURA

• Design de Interação

• Fluxograma de interação

• Arquitetura de informação

• Fluxograma de navegação

DESIGN DE INTERAÇÃO

Descreve os possíveis comportamentos do usuário e define como o sistema irá se ajustar e responder a esse comportamento.

• Fluxograma de interação

• Modelos mentais

• Gestão de erros

MODELO MENTAL PARA COMPRA DE UM PRODUTO

• Metas - comprar o produto

• Desafios - pagar mais barato

• Valores - manter a boa qualidade

• Temores - parecer não ter dinheiro

MODELO MENTAL PARA COMPRA DE UM PRODUTO(M). comprar o produto - (D). pagar mais barato(V).manter a boa qualidade (T). parecer não ter dinheiro

Etapas

•O que vou comprar

•Como vou comprar

•Como vou pagar

MODELO MENTAL PARA COMPRA DE UM PRODUTO(M). comprar o produto - (D). pagar mais barato - (V).manter a boa qualidade (T). parecer não ter dinheiro

O que vou

Procurar opçõesM - encontrar opções que atendam ao desejoD - loja com mais opções/flexibilidade para negociarV - conhecer a qualidade dos produtosT - procurar opções caras e baratas

M - verificar as características que atendem a o desejoD - verificar quais produtos podem ser negociáveis V - verificar as relações custo-benefícioT - verificar a possibilidade de escolher o mais caro

M - decidir pelos produtos que atendem ao desejoD - descartar os produtos que não parecem ser negociáveisV - excluir produtos muito ruinsT - descobrir os valores de mercado dos produtos separados

Estudar opções

Separar opções

VitrineDisplay internoMostruárioCatálogo


O que vou

Procurar opçõesM - encontrar opções que atendam ao desejoD - loja com mais opções/flexibilidade para negociarV - conhecer a qualidade dos produtosT - procurar opções caras e baratas

M - verificar as características que atendem a o desejoD - verificar quais produtos podem ser negociáveis V - verificar as relações custo-benefícioT - verificar a possibilidade de escolher o mais caro

M - decidir pelos produtos que atendem ao desejoD - descartar os produtos que não parecem ser negociáveisV - excluir produtos muito ruinsT - descobrir os valores de mercado dos produtos separados

Estudar opções

Separar opções

VitrineDisplay internoMostruárioCatálogo


Como vou

Procurar vendedorM - o que estiver mais disponívelD - vendedor simpático/mais abertoV - conhecedor dos produtos que vendeT - vendedor com aparência mais simples

M - perguntar pela disponibilidadeD - pedir pelo preçoV - não aceitar sugestões ruinsT - incluir um produto mais caro

M - demonstrar interesse/reservar o produtoD - pedir descontoV - perguntar sobre garantias, trocas etc.T - não barganhar demais e fazer propostas reais

Pedir opções

Negociar opções

Espaço dos vendedoresEspaço para testar/experimentarEspaço para negociar


Como vou pagar

SepararM - decidir o produto a ser levadoD - discutir formas de pagamentoV - pedir produto novoT - conhecer as próprias condições

M - pagarD - verificar os valores pagos V - conferir o produtoT - pagar

M - conferir o produtoD - -V - testar/verificar o produtoT - sair sem pressa

Pagar

Levar

CaixaConferência/TestesPacote


Separar

Pagar

Levar

Procurar opções

Estudar opções

Separar opções Procurar vendedor

Pedir opções

Negociar opções

ARQUITETURA DE INFORMAÇÃO

Define-se pela criação de esquemas organizacionais e de navegação que permite aos usuários mover-se pelos conteúdos da interface de modo eficiente e eficaz.

Fluxograma de navegação

• Categorização de conteúdos

• Hierarquização

ARQUITETURA PARA A COMPRA DE UM PRODUTO

Etapas

•O que vou comprar - entrada

•Como vou comprar - interior

•Como vou pagar - fundo/saída

ARQUITETURA PARA A COMPRA DE UM PRODUTO

Painéis

Display interno

Área de vendedores

Espaço para testar/experimentar Espaço para negociar

Caixa

Área de conferência/teste Pacotes

Mostruário Catálogo

Vitrine

ENTRADA

INTERIOR

SAÍDA

ARQUITETURA PARA COMPRA DE UM PRODUTOGestão de erros

Painéis

Display interno

Área de vendedores

Espaço para testar/experimentar Espaço para negociar

Caixa

Área de conferência/teste Pacotes

Mostruário Catálogo

Vitrine

preços e produtos corretos e legíveis

repetir o pedido do cliente

evidenciar todas as características do produto

anotar condições de venda

conferir valores

fazer checklist das características desejadasconferir a notaconferir o produto com o cliente

ESQUELETO• Design de interface

• Corresponde à seleção dos elementos de interface corretos para a tarefa que o usuário está tentando realizar

• Design de navegação

• Corresponde à definição de elementos que orientam o usuário durante o uso do produto

• Design de Informação

• Como apresentar informações de modo que o usuário possa compreender mais facilmente

DESIGN DE INTERFACE• Corresponde à seleção dos elementos de interface

corretos para a tarefa que o usuário está tentando realizar

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 4

Menu item 1 Menu item 2 Menu item 3 Menu item 4Dropdown

Item 1

Item 2

Item 3

Dropdown (active)

Submit

Notification

CancelOK Prev Next

buy 238

Save

0:04 / 0:45

DESIGN DE NAVEGAÇÃO

DESIGN DE INFORMAÇÃO

HOME

VOLTA PARA O INÍCIO

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 4

Menu item 1 Menu item 2 Menu item 3 Menu item 4

SUPERFÍCIE• Design para os sentidos

• Elementos de design gráfico

• Cor

• Tipografia

• Imagens

• Elementos de Identidade Visual

• Marcas

• Grafismos

DESIGN PARA OS SENTIDOS• Composição visual

• Design responsivo

• Contraste/tamanho

• Elementos sonoros

• Respostas sonoras

• Músicas

• Texto e videodescrição

• Elementos hápticos

• Respostas vibratórias

• Acionamentos por pressão

DESIGN RESPONSIVO

• Design líquido

• O conteúdo é ajustado de acordo com a largura da tela

• Design Adaptativo

• O conteúdo possui layouts determinados para algumas condições

DESIGN RESPONSIVO• Design líquido (fluido)

DESIGN RESPONSIVO• Design Adaptativo

CONTRASTE/TAMANHO• Design acessível

ELEMENTOS DO DESIGN GRÁFICO• COR

• Harmonizações cromáticas

• TIPOGRAFIA

• Características

• Alinhamentos

• Tipografia cinética

• IMAGENS

• Descrição de imagens

• Ampliação

COR• CODIFICAÇÕES

• CMYK/PANTONE - impresso

• RGB/HEXADECIMAL - digital

C78 M51 Y0 K0 P 2130 CR85 G118 B209 HEX #5576D1

TIPOGRAFIA

• CARACTERÍSTICAS

• legibilidade - as fontes são distintas entre si

• leiturabilidade - a composição ajuda a leitura

• flexibilidade - funciona bem em diferentes tamanhos e pesos

• adaptabilidade - funciona bem na tela

• personalidade - possui boa relação semântica com o conteúdo

TIPOGRAFIA

• ALINHAMENTOS

• Textos justificados à esquerda privilegiam a responsividade;

• Textos justificados por ambos os lados exige hifenização automática; dificulta a responsividade;

• Textos centralizados são bons para títulos e tabelas

IMAGENS

• CORES

• Verificar a origem CMYK ou RGB

• Resolução de imagem

• Vídeos

ELEMENTOS DE IDENTIDADE VISUAL

• MARCAS

• Reforço das marcas - identidade

• GRAFISMOS

• Elementos de integração entre os recursos