Palestra waw

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

Arigatou

Sergio Naiki [email protected]

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

Arigatou

Sergio Naiki [email protected]