palestra waw
TRANSCRIPT
UX no dia a diaSergio Naiki
SERGIO NAIKIDesigner, surfista, querendo um
mundo melhor.
DESIGN DIGITAL
USABILIDADEé um termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta
ou objeto a fim de realizar uma tarefa específica e importante. A usabilidade pode também se referir aos métodos de mensuração da usabilidade e ao estudo dos princípios por trás da eficiência
percebida de um objeto. - wikipedia.org 2015
Teste
Pergunta
S5 iPhone 6 iPhone 5c Moto X 2014 Moto G 2014Xperia Z3 Xperia Z2
Acerto Tempovs
“Pô japonês, você que fica aí analisando as coisas, qual roda é melhor?"
"Você quer andar com ela ou deixar parada?"
Objetivo
Objetivo Utilidade
Necessidades do usuário
Lucro para a existência do
projeto+
Foco de UX
UsuáriosPedido Protótipos Resultado
Pedido
Dificuldade na logostica dos CDs
Problema
Problema
Elaborar um player de músicas para lojistas / PDVs.
Pedido
Pedido
Sistema Player localRadio Ibiza
Seleciona músicas Distribui playlists
Status de players Confirma conexão
Fluxograma do servidor
Login Player
Controlador
Vinhetas
Notificação de automóvel
Configurações
Sincronizador
Pré-programadas
Programadas
Playlists
Placa de áudio
Fluxograma do player no PDV
Perguntas
1. O computador do player tem mais de uma função? Ou será apenas para controlar o player?
2. Qual o número de vinhetas em média? Quantas programadas e quantas pré-programadas?
3. Input de vinhetas serão feitas remotamente (admin) ou local (lojistas)?
4. Quantas vezes ao dia as notificações de automóveis serão ativadas? Algo a declarar aqui?
5. Sobre as playlists, tem algum fator especial / diferencial?
6. Qual a frequencia de troca de playlists? Quantas playlists tem por cliente?
7. Configurações, será apenas a placa de som? Algo mais?
8. Qual a frequencia de utilização do Sincronizador?
9. Exemplo de cliente grande e de cliente pequeno?
10.As músicas tem nome?
11.Resolução de tela?
12.Configuração padrão dos computadores?
Usuários
Tipos de usuários e cenários
Lojas Hotéis Restaurantes
Lojistas Recepcionistas Gerentes
Administrativos Vendedores
Jornada de usuário na loja
Início do dia
Durante do dia
Final do dia
Atendente ocupado acessando o computador do player com função de caixa.
Preparativos para encerramento de
expediente.
Preparativos para iniciar os trabalhos
Jornada de usuário na loja
Computador multi-funcional
Evitar cliques acidentais
Horário para sincronizar
! ! ?
Jornada de usuário na loja
Início do dia
Durante do dia
Final do dia
Exemplo aplicação de widgets
Cenários de widget
Exemplo aplicação de widgets
Cenários de widget
Exemplo aplicação de widgets
Cenários de widget
Protótipos
Timeline da música
250 px
200 px
Área clicável
Wireframe do player
Wireframe do player
Botão de “pause” numa tela segundária para evitar cliques acidentais
Botão para expandir o menu secundário
Botão fechar
Controles de volume +-
Ativar / desativar playlists
Wireframe do player
Área maior para exibição de listas
Paginação para evitar bugs em computadores menos potentes.
Wireframe do player
Limitação de área para atender aos monitores menores
800x600
1024x768
1280x960
Wireframe do player
Resultado
Resultado visual do player
Resultado visual do player
Resultado visual do player
UsuáriosPedido Protótipos Resultado
Pedido
Dificuldade dos clientes em escolher os itens do prato
Problema
Problema
Elaborar um montador digital de pratos do Spoleto
Pedido
Pedido
Montar o prato ImprimirEntrar no
site
Fluxo de funcionamento
Usuários
Fluxo do pedido de pratos
Massa
Lasagna
Risotto
Cappelletti de Carne, Cappelletti de Frango, Ravioli de Ricota, Ravioli de Tomate Seco, Ravioli de Queijo com Presunto e Ricota, Ravioli de Picanha, Ravioli de Gorgonzola
Bolognesa, Queijo com Presunto
Salada Pequena, Grande, Massa (Farfalle, Penne ou Fusilli Integrale)
MolhoCaesar, Italiano Light,
Spoleto, Mel e Mostarda, Rosé, Mel e Mostarda
Light
RefogarAzeite
ManteigaFarfalle, Fettuccine, Fusilli Integrale,Penne, Spaghetti
TamanhoBambiniNormalMamma
Molho TradicionalTomate
BolognesaQuatro Queijos
BrancoFunghiRosé
Molho EspecialEspecial
Bolognesa ClássicoCamarão ao Vinho Branco
Pomodoro
Ingredientes
AbobrinhaAlcaparrasAlhoAlho PoróAzeitona PretaBaconBrócolisCamarãoCarne de Sol*CebolaCenouraChampignonErvilhaFrangoGorgonzolaLinguiça CalabresaMilhoMussarelaOvo de CodornaPalmitoPassasPeito de Peru CozidoPresuntoQueijo Coalho*Queijo MinasSalmãoTomateTomate Seco
+ 4 ingredientes adicionais
* Ingredientes disponíveis somente no Nordeste
RefogarAzeite
Manteiga
Gnocchi TamanhoBambiniNormal
Opcionais
• Carnes (Frango Fidalgo, Frango
Dourado, Almondega,
Polpettone de Carne,
Polpettone de Frango)
• Gratinar
TamanhoNormal
8 Ingredientes
8 Ingredientes
TamanhosBambini - 4 ingredientesNormal - 8 ingredientesMamma - 10 ingredientes
SaladasPequena - 4 ingredientesGrande - 8 ingredientesMassa - 8 ingredientes
“Gratinar”Evidenciar na versão print para ser vista pelo cozinheiro do Spoleto
4 ou 8 Ingredientes
Fluxo do pedido de pratos
Massa
Lasagna
Risotto
Cappelletti de Carne, Cappelletti de Frango, Ravioli de Ricota, Ravioli de Tomate Seco, Ravioli de Queijo com Presunto e Ricota, Ravioli de Picanha, Ravioli de Gorgonzola
Bolognesa, Queijo com Presunto
Salada Pequena, Grande, Massa (Farfalle, Penne ou Fusilli Integrale)
MolhoCaesar, Italiano Light,
Spoleto, Mel e Mostarda, Rosé, Mel e Mostarda
Light
RefogarAzeite
ManteigaFarfalle, Fettuccine, Fusilli Integrale,Penne, Spaghetti
TamanhoBambiniNormalMamma
Molho TradicionalTomate
BolognesaQuatro Queijos
BrancoFunghiRosé
Molho EspecialEspecial
Bolognesa ClássicoCamarão ao Vinho Branco
Pomodoro
Ingredientes
AbobrinhaAlcaparrasAlhoAlho PoróAzeitona PretaBaconBrócolisCamarãoCarne de Sol*CebolaCenouraChampignonErvilhaFrangoGorgonzolaLinguiça CalabresaMilhoMussarelaOvo de CodornaPalmitoPassasPeito de Peru CozidoPresuntoQueijo Coalho*Queijo MinasSalmãoTomateTomate Seco
+ 4 ingredientes adicionais
* Ingredientes disponíveis somente no Nordeste
RefogarAzeite
Manteiga
Gnocchi TamanhoBambiniNormal
Opcionais
• Carnes (Frango Fidalgo, Frango
Dourado, Almondega,
Polpettone de Carne,
Polpettone de Frango)
• Gratinar
TamanhoNormal
8 Ingredientes
8 Ingredientes
TamanhosBambini - 4 ingredientesNormal - 8 ingredientesMamma - 10 ingredientes
SaladasPequena - 4 ingredientesGrande - 8 ingredientesMassa - 8 ingredientes
“Gratinar”Evidenciar na versão print para ser vista pelo cozinheiro do Spoleto
4 ou 8 Ingredientes
1 2 3 4 5
Protótipos
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Wireframes
Construção do HTML
Construção do HTML
Massa / Salada
Molho(s)Ingredientes
Opcionais
Z-index
Louça
Construção do HTML
Construção do HTML
Construção do HTML
Construção do HTML
Construção do HTML
Construção do HTML
Resultado
Fluxo da vida real
Fluxo da vida real
Fluxo da vida real
Fluxo da vida real
Fluxo da vida real
Fluxo da vida real
Fluxo da vida real
Fluxo da vida real
Cozinha Lavagem
Refeitório
Problemas :(
Pratos sujos quebrando
Muito tempo perdido no
horário de rush
Mal equilibrados ou organizados
Separar pratos para lavar
Problema específico
Solução
Organizar os pratos na bancada de entrega
Bancada
Limpo
MáquinaSujo
Protótipos / Testes
Jogar fora o excedente
Ir até a bancada
Deixar os pratos na bancada
Agradecer
Jornada de usuário
Jogar fora o excedente
Ir até a bancada
Deixar os pratos na bancada
Agradecer
Jornada de usuário
Hello, can you please…
1
Hello, can you please…
Thank you man! Bye!
:(
1
2
G M P pp
BigMedium
Small Tiny
3
G M P pp
4
G M P pp
4
4
4
Bancada
Limpo
MáquinaSujo
Bancada
Limpo
MáquinaSujo
SoluçãoProblema Protótipos Resultado
Sitemap Fluxograma Jornada de usuário
Teste de usabilidade
Categorização de tipos e tamanhos de
pratos
Onde eu poderia mudar para melhorar
a performance de lavagem dos pratos
Qual é a ordem de ações do usuário ao depositar os pratos
para lavagem
Para conseguir testar se o meu protótipo estava dando certo
ou não
POP Prototype On Paper
Axure UXPin
AppSeed Silverback CrazyEgg
www.generatedpaper.com/en
Protótipos em papel
"wireframe smartphone template"
www.uxdegraca.com.br www.doctorwebbrasil.com
Usabilidade do papel higiênico
tinyurl.com/43dbxxCurrent Configuration
Usabilidade do papel higiênico
Usabilidade do papel higiênico
Usabilidade do papel higiênico
tinyurl.com/43dbxx
Resultado
Current Configuration
