O documento discute princípios de usabilidade e como aplicá-los no design de produtos digitais para melhorar a experiência do usuário. Ele apresenta exemplos de como prototipar soluções, testá-las com usuários e iterar o design com base nos resultados dos testes.

1. UX no dia a dia
Sergio Naiki

2. SERGIO NAIKI
Designer, surfista, querendo um
mundo melhor.

3. DESIGN DIGITAL

5. 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

6. Teste

8. Pergunta

10. S5 iPhone 6 iPhone 5c Moto X 2014 Moto G 2014Xperia Z3 Xperia Z2

12. Acerto Tempovs

13. “Pô japonês, você que fica aí analisando
as coisas, qual roda é melhor?"

14. "Você quer andar com ela
ou deixar parada?"

15. Objetivo

16. Objetivo Utilidade

17. Necessidades
do usuário
Lucro para a
existência do
projeto+
Foco de UX

19. UsuáriosPedido Protótipos Resultado

20. Pedido

21. Dificuldade na logostica dos CDs
Problema
Problema

22. Elaborar um player de músicas para lojistas / PDVs.
Pedido
Pedido

23. Sistema
Player
local
Radio Ibiza
Seleciona músicas Distribui playlists
Status de players Confirma conexão
Fluxograma do servidor

24. Login Player
Controlador
Vinhetas
Notificação de
automóvel
Configurações
Sincronizador
Pré-programadas
Programadas
Playlists
Placa de áudio
Fluxograma do player no PDV

25. 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?

26. Usuários

27. Tipos de usuários e cenários
Lojas Hotéis Restaurantes
Lojistas Recepcionistas
Gerentes
Administrativos
Vendedores

28. 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

29. Jornada de usuário na loja
Computador
multi-funcional
Evitar cliques
acidentais
Horário para
sincronizar
! ! ?

30. Jornada de usuário na loja
Início
do dia
Durante
do dia
Final
do dia

31. Exemplo aplicação de widgets
Cenários de widget

32. Exemplo aplicação de widgets
Cenários de widget

33. Exemplo aplicação de widgets
Cenários de widget

34. Protótipos

35. Timeline da música
250 px
200 px
Área clicável
Wireframe do player

36. 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 +-

37. Ativar / desativar playlists
Wireframe do player

38. Área maior para exibição de listas
Paginação para evitar bugs em computadores
menos potentes.
Wireframe do player

39. Limitação de área para atender
aos monitores menores
800x600
1024x768
1280x960
Wireframe do player

40. Resultado

41. Resultado visual do player

42. Resultado visual do player

43. Resultado visual do player

45. UsuáriosPedido Protótipos Resultado

46. Pedido

47. Dificuldade dos clientes em escolher os itens do prato
Problema
Problema

48. Elaborar um montador digital de pratos do Spoleto
Pedido
Pedido

49. Montar o
prato
Imprimir
Entrar no
site
Fluxo de funcionamento

50. Usuários

51. 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

52. 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

53. Protótipos

54. Wireframes

55. Wireframes

56. Wireframes

57. Wireframes

58. Wireframes

59. Wireframes

60. Wireframes

61. Wireframes

62. Wireframes

63. Wireframes

64. Wireframes

65. Construção do HTML

66. Construção do HTML
Massa / Salada
Molho(s)
Ingredientes
Opcionais
Z-index
Louça

67. Construção do HTML

68. Construção do HTML

69. Construção do HTML

70. Construção do HTML

71. Construção do HTML

72. Construção do HTML

73. Resultado

74. Fluxo da vida real

75. Fluxo da vida real

76. Fluxo da vida real

77. Fluxo da vida real

78. Fluxo da vida real

79. Fluxo da vida real

80. Fluxo da vida real

81. Fluxo da vida real

85. Cozinha Lavagem
Refeitório

86. Problemas :(
Pratos sujos
quebrando
Muito tempo
perdido no
horário de rush
Mal equilibrados
ou organizados
Separar pratos
para lavar

88. Problema específico

89. Solução
Organizar os pratos na
bancada de entrega

90. Bancada
Limpo
MáquinaSujo

91. Protótipos / Testes

92. Jogar fora o
excedente
Ir até a
bancada
Deixar os
pratos na
bancada
Agradecer
Jornada de usuário

93. Jogar fora o
excedente
Ir até a
bancada
Deixar os
pratos na
bancada
Agradecer
Jornada de usuário

94. Hello, can you
please…
1

95. Hello, can you
please…
Thank you man!
Bye!
:(
1

97. 2
G M P pp

99. Big
Medium
Small Tiny
3
G M P pp

101. 4
G M P pp

102. 4

103. 4

104. 4
Bancada
Limpo
MáquinaSujo
Bancada
Limpo
MáquinaSujo

105. SoluçãoProblema Protótipos Resultado

106. 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

108. POP
Prototype On Paper
Axure UXPin
AppSeed Silverback CrazyEgg

109. Protótipos em papel
"wireframe smartphone template"

110. www.uxdegraca.com.br www.doctorwebbrasil.com

111. Arigatou
Sergio Naiki
sergionaiki@gmail.com

112. Usabilidade do papel higiênico
tinyurl.com/43dbxx
Current Configuration

113. Usabilidade do papel higiênico

114. Usabilidade do papel higiênico

115. Usabilidade do papel higiênico

116. tinyurl.com/43dbxx
Resultado
Current Configuration

117. Arigatou
Sergio Naiki
sergionaiki@gmail.com