Metodologia para Projeto Interface Gráfica
-
Upload
wagner-bandeira -
Category
Design
-
view
54 -
download
0
Transcript of 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
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
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
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
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
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
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
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