UX no dia a dia
Sergio Naiki
SERGIO NAIKI
Designer, 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
local
Radio 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
Imprimir
Entrar 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)
Molho
Caesar, Italiano Light,
Spoleto, Mel e Mostarda,
Rosé, Mel e Mostarda
Light
Refogar
Azeite
Manteiga
Farfalle, Fettuccine, Fusilli Integrale,
Penne, Spaghetti
Tamanho
Bambini
Normal
Mamma
Molho Tradicional
Tomate
Bolognesa
Quatro Queijos
Branco
Funghi
Rosé
Molho Especial
Especial
Bolognesa Clássico
Camarão ao Vinho Branco
Pomodoro
Ingredientes
Abobrinha
Alcaparras
Alho
Alho Poró
Azeitona Preta
Bacon
Brócolis
Camarão
Carne de Sol*
Cebola
Cenoura
Champignon
Ervilha
Frango
Gorgonzola
Linguiça Calabresa
Milho
Mussarela
Ovo de Codorna
Palmito
Passas
Peito de Peru Cozido
Presunto
Queijo Coalho*
Queijo Minas
Salmão
Tomate
Tomate Seco
+ 4 ingredientes
adicionais
* Ingredientes disponíveis
somente no Nordeste
Refogar
Azeite
Manteiga
Gnocchi Tamanho
Bambini
Normal
Opcionais
• Carnes
(Frango
Fidalgo,
Frango
Dourado,
Almondega,
Polpettone de
Carne,
Polpettone de
Frango)
• Gratinar
Tamanho
Normal
8 Ingredientes
8 Ingredientes
Tamanhos
Bambini - 4 ingredientes
Normal - 8 ingredientes
Mamma - 10 ingredientes
Saladas
Pequena - 4 ingredientes
Grande - 8 ingredientes
Massa - 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)
Molho
Caesar, Italiano Light,
Spoleto, Mel e Mostarda,
Rosé, Mel e Mostarda
Light
Refogar
Azeite
Manteiga
Farfalle, Fettuccine, Fusilli Integrale,
Penne, Spaghetti
Tamanho
Bambini
Normal
Mamma
Molho Tradicional
Tomate
Bolognesa
Quatro Queijos
Branco
Funghi
Rosé
Molho Especial
Especial
Bolognesa Clássico
Camarão ao Vinho Branco
Pomodoro
Ingredientes
Abobrinha
Alcaparras
Alho
Alho Poró
Azeitona Preta
Bacon
Brócolis
Camarão
Carne de Sol*
Cebola
Cenoura
Champignon
Ervilha
Frango
Gorgonzola
Linguiça Calabresa
Milho
Mussarela
Ovo de Codorna
Palmito
Passas
Peito de Peru Cozido
Presunto
Queijo Coalho*
Queijo Minas
Salmão
Tomate
Tomate Seco
+ 4 ingredientes
adicionais
* Ingredientes disponíveis
somente no Nordeste
Refogar
Azeite
Manteiga
Gnocchi Tamanho
Bambini
Normal
Opcionais
• Carnes
(Frango
Fidalgo,
Frango
Dourado,
Almondega,
Polpettone de
Carne,
Polpettone de
Frango)
• Gratinar
Tamanho
Normal
8 Ingredientes
8 Ingredientes
Tamanhos
Bambini - 4 ingredientes
Normal - 8 ingredientes
Mamma - 10 ingredientes
Saladas
Pequena - 4 ingredientes
Grande - 8 ingredientes
Massa - 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
Big
Medium
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
Protótipos em papel
"wireframe smartphone template"
www.uxdegraca.com.br www.doctorwebbrasil.com
Arigatou
Sergio Naiki
sergionaiki@gmail.com
Usabilidade do papel higiênico
tinyurl.com/43dbxx
Current Configuration
Usabilidade do papel higiênico
Usabilidade do papel higiênico
Usabilidade do papel higiênico
tinyurl.com/43dbxx
Resultado
Current Configuration
Arigatou
Sergio Naiki
sergionaiki@gmail.com

UX no Dia-a-Dia