SlideShare uma empresa Scribd logo
@richardrx
Protótipos
MOBILE
na prática
ref: Apple WWDC Keynote 2015
119É a média de aplicativos instalados em iPhones
Modelo IDEO
• Desenhe protótipos
• Teste com usuários
• Colha Feedback
• Melhore
• Teste novamente
David Kelley
“If a picture is worth a thousand words, then a
prototype is worth a thousand meetings"
David Kelley
Ph.D em IHC
Protótipo em papel Wireframe navegável Wireframes em Motion Protótipo HTML
Protótipo em papel
Rápidos e simples
Feedback rápido
Inclusivos
Pouco estéticos
Difíceis de compartilhar
Não são auto-explicativos
Wireframe navegável Wireframes em Motion Protótipo HTML
Protótipo em papel
Detalhados
Define conteúdo
Explica comportamentos
Difíceis para testes reais
Exigem cultura digital
Não é reaproveitado
Wireframe navegável Wireframes em Motion Protótipo HTML
Protótipo em papel
Emocionais
Feedback de qualidade
Comportamento dinâmico
Tempo de produção
Conhecimento em software
Necessita estágio avançado
Wireframe navegável Wireframes em Motion Protótipo HTML
Protótipo em papel
Testa interação
Perfeito para fluxos
Experiência quase real
Conhecimento específico
Tempo de desenvolvimento
Limita o processo de design
Wireframe navegável Wireframes em Motion Protótipo HTML
Se tornar obcecado por um dispositivo específico é
ruim, pois eles mudam muito frequentemente.
Fica lindo na telona. E na telinha?
Botões Acessíveis
A localização dos elementos deve ser
levada em conta na criação de soluções
onde o uso mobile seja foco da ação.
FÁCIL
DIFÍCIL
FÁCIL
DIFÍCIL
Movimentos Fáceis
Interfaces que utilizam gestos para
desencadear ações devem levar em conta a
usabilidade para o público em dispositivos
conhecidos.
+
Sketch MirrorSketch
+
Marvel AppSketch
Não metralhe com notificações
SPAM PROPAGANDA INFORMAÇÃO
menos contexto mais contexto
Contexto muda informação para SPAM
Bom exemplo
• É personalizável
• Tenta entender o usuário
• É explicativa
ref: http://emptystat.es
Desenhe para o vazio
Bom exemplo
• Não é uma rua sem saída
• Imprime personalidade da Marca
• Promove uma próxima ação
ref: http://emptystat.es
Conheça o guide de cada plataforma
Saber os guides ajuda
• Negociar com desenvolvedores
• Ganhar tempo em protótipos
• Argumentar com clientes
Sketch
+ =
zeplin.io Amor
+ =+
2
3G no Brasil é ruim :(
Qual a utilidade do
seu app sem rede?
Bom exemplo
• Avisa o usuário
• Salva a mensagem depois
• Permite ver o conteúdo
3 dicas para aumentar a velocidade
Carregamento progressivo
Lidando com a ansiedade do usuário
Conteúdo fictício
Lidando com a ansiedade do usuário
Share to
FOLLOWERS DIRECT
SHARE
Write a caption…
Tag People
Add to Photo Map
Name This Location
FILTERS NEXT
NORMAL AMARO MAYFAIR RISE
Instagram
User
O upload começa aqui A maioria começa aqui
Operando em segundo plano
O rápido carregamento do Instagram
Você já testou hoje?
“As soon as you’re involved in a development
project, you are atypical by definition.”
Jakob Nielsen
Ph.D em IHC
A percepção é a experiência.

Mais conteúdo relacionado

Mais procurados

as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
Arlindo Correia
 
Práticas e Processos de UX
Práticas e Processos de UXPráticas e Processos de UX
Práticas e Processos de UX
Bruno Polidoro
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
Priscilla Albuquerque
 
[Agile Testers Conf. 2017] Teste de Usabilidade
[Agile Testers Conf. 2017] Teste de Usabilidade[Agile Testers Conf. 2017] Teste de Usabilidade
[Agile Testers Conf. 2017] Teste de Usabilidade
Flavio Nazario
 
Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022
Renato Melo
 
Experiencia do usuario
Experiencia do usuarioExperiencia do usuario
Experiencia do usuario
Patricia Mesquita
 
[TDC'16] UX para Profissionais de Negócios
[TDC'16] UX para Profissionais de Negócios[TDC'16] UX para Profissionais de Negócios
[TDC'16] UX para Profissionais de Negócios
Flavio Nazario
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
Edu Agni
 
Ux para software
Ux para softwareUx para software
Ux para software
Viviane Delvequio
 
UX para Startups
UX para StartupsUX para Startups
UX para Startups
Tuia
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
Diego Moraes
 
Otimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User ExperienceOtimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User Experience
Tuia
 
Niveis maturidade UX
Niveis maturidade UXNiveis maturidade UX
Niveis maturidade UX
Suzi Sarmento
 
Launchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialLaunchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo material
Ana Paula Batista
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
Renato Melo
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
Ana Paula Batista
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
Gustavo Gobbi
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
Richard Jesus
 
IHC 2012 | Interação entre time de Design de Interfaces e time de Desenvolvim...
IHC 2012 | Interação entre time de Design de Interfaces e time de Desenvolvim...IHC 2012 | Interação entre time de Design de Interfaces e time de Desenvolvim...
IHC 2012 | Interação entre time de Design de Interfaces e time de Desenvolvim...
Viviane Delvequio
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
Edu Agni
 

Mais procurados (20)

as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
 
Práticas e Processos de UX
Práticas e Processos de UXPráticas e Processos de UX
Práticas e Processos de UX
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
 
[Agile Testers Conf. 2017] Teste de Usabilidade
[Agile Testers Conf. 2017] Teste de Usabilidade[Agile Testers Conf. 2017] Teste de Usabilidade
[Agile Testers Conf. 2017] Teste de Usabilidade
 
Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022
 
Experiencia do usuario
Experiencia do usuarioExperiencia do usuario
Experiencia do usuario
 
[TDC'16] UX para Profissionais de Negócios
[TDC'16] UX para Profissionais de Negócios[TDC'16] UX para Profissionais de Negócios
[TDC'16] UX para Profissionais de Negócios
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Ux para software
Ux para softwareUx para software
Ux para software
 
UX para Startups
UX para StartupsUX para Startups
UX para Startups
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
 
Otimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User ExperienceOtimizando os projetos de TI com User Experience
Otimizando os projetos de TI com User Experience
 
Niveis maturidade UX
Niveis maturidade UXNiveis maturidade UX
Niveis maturidade UX
 
Launchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo materialLaunchpad Build-BH - Migrando para um mundo material
Launchpad Build-BH - Migrando para um mundo material
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
 
IHC 2012 | Interação entre time de Design de Interfaces e time de Desenvolvim...
IHC 2012 | Interação entre time de Design de Interfaces e time de Desenvolvim...IHC 2012 | Interação entre time de Design de Interfaces e time de Desenvolvim...
IHC 2012 | Interação entre time de Design de Interfaces e time de Desenvolvim...
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
 

Semelhante a Protótipos mobile na prática

Protótipos Mobile na Prática
Protótipos Mobile na PráticaProtótipos Mobile na Prática
Protótipos Mobile na Prática
Mergo
 
Habilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dadosHabilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dados
Jeison Barros
 
Proposta para especificação de histórias de usuários alinhadas a IEEE 830
Proposta para especificação de histórias de usuários alinhadas a IEEE 830Proposta para especificação de histórias de usuários alinhadas a IEEE 830
Proposta para especificação de histórias de usuários alinhadas a IEEE 830
André Agostinho
 
Desenvolvimento de Software: Navegando em Águas Misteriosas
Desenvolvimento de Software: Navegando em Águas MisteriosasDesenvolvimento de Software: Navegando em Águas Misteriosas
Desenvolvimento de Software: Navegando em Águas Misteriosas
Nícolas Iensen
 
Projeto de API - TDC 2014 - Floripa - Trilha Arquitetura - 18/05/2014
Projeto de API - TDC 2014 - Floripa - Trilha Arquitetura - 18/05/2014Projeto de API - TDC 2014 - Floripa - Trilha Arquitetura - 18/05/2014
Projeto de API - TDC 2014 - Floripa - Trilha Arquitetura - 18/05/2014
Gilmar PSL
 
Projeto de API, por Gilmar P.S
Projeto de API, por Gilmar P.SProjeto de API, por Gilmar P.S
Projeto de API, por Gilmar P.S
Thoughtworks
 
Análise de sistemas oo 1
Análise de sistemas oo   1Análise de sistemas oo   1
Análise de sistemas oo 1
Maurício Linhares
 
Computação em nuvem e Windows Azure
Computação em nuvem e Windows AzureComputação em nuvem e Windows Azure
Computação em nuvem e Windows Azure
Ricardo Guerra Freitas
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheiras
Elton Minetto
 
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
iMasters
 
Carreira de Desenvolvimento
Carreira de DesenvolvimentoCarreira de Desenvolvimento
Carreira de Desenvolvimento
Alvaro Viebrantz
 
DevInCachu 2012: Desenvolvendo Aplicacoes RIA com ExtJS 4 e Sencha Touch 2
DevInCachu 2012: Desenvolvendo Aplicacoes RIA com ExtJS 4 e Sencha Touch 2DevInCachu 2012: Desenvolvendo Aplicacoes RIA com ExtJS 4 e Sencha Touch 2
DevInCachu 2012: Desenvolvendo Aplicacoes RIA com ExtJS 4 e Sencha Touch 2
Loiane Groner
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
Lógica Digital
 
Experiência do usuário em Portais Corporativos
Experiência do usuário em Portais CorporativosExperiência do usuário em Portais Corporativos
Experiência do usuário em Portais Corporativos
Neue Labs
 
Uma introdução ao Domain Driven Design
Uma introdução ao Domain Driven DesignUma introdução ao Domain Driven Design
Uma introdução ao Domain Driven Design
Lambda3
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o Usuário
Silvia Dotta
 
DDD - Step by Step
DDD - Step by StepDDD - Step by Step
DDD - Step by Step
Diego Dezembro
 
Técnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptxTécnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptx
franmafesoni
 
PHPZEIRO: Adote um framework
PHPZEIRO: Adote um frameworkPHPZEIRO: Adote um framework
PHPZEIRO: Adote um framework
Leonardo "Hackin" Freire
 

Semelhante a Protótipos mobile na prática (20)

Protótipos Mobile na Prática
Protótipos Mobile na PráticaProtótipos Mobile na Prática
Protótipos Mobile na Prática
 
Habilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dadosHabilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dados
 
Proposta para especificação de histórias de usuários alinhadas a IEEE 830
Proposta para especificação de histórias de usuários alinhadas a IEEE 830Proposta para especificação de histórias de usuários alinhadas a IEEE 830
Proposta para especificação de histórias de usuários alinhadas a IEEE 830
 
Desenvolvimento de Software: Navegando em Águas Misteriosas
Desenvolvimento de Software: Navegando em Águas MisteriosasDesenvolvimento de Software: Navegando em Águas Misteriosas
Desenvolvimento de Software: Navegando em Águas Misteriosas
 
Projeto de API - TDC 2014 - Floripa - Trilha Arquitetura - 18/05/2014
Projeto de API - TDC 2014 - Floripa - Trilha Arquitetura - 18/05/2014Projeto de API - TDC 2014 - Floripa - Trilha Arquitetura - 18/05/2014
Projeto de API - TDC 2014 - Floripa - Trilha Arquitetura - 18/05/2014
 
Projeto de API, por Gilmar P.S
Projeto de API, por Gilmar P.SProjeto de API, por Gilmar P.S
Projeto de API, por Gilmar P.S
 
Análise de sistemas oo 1
Análise de sistemas oo   1Análise de sistemas oo   1
Análise de sistemas oo 1
 
Computação em nuvem e Windows Azure
Computação em nuvem e Windows AzureComputação em nuvem e Windows Azure
Computação em nuvem e Windows Azure
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheiras
 
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
DevCommerce Conference 2016: React para aplicações web e mobile como platafor...
 
Carreira de Desenvolvimento
Carreira de DesenvolvimentoCarreira de Desenvolvimento
Carreira de Desenvolvimento
 
DevInCachu 2012: Desenvolvendo Aplicacoes RIA com ExtJS 4 e Sencha Touch 2
DevInCachu 2012: Desenvolvendo Aplicacoes RIA com ExtJS 4 e Sencha Touch 2DevInCachu 2012: Desenvolvendo Aplicacoes RIA com ExtJS 4 e Sencha Touch 2
DevInCachu 2012: Desenvolvendo Aplicacoes RIA com ExtJS 4 e Sencha Touch 2
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Experiência do usuário em Portais Corporativos
Experiência do usuário em Portais CorporativosExperiência do usuário em Portais Corporativos
Experiência do usuário em Portais Corporativos
 
Uma introdução ao Domain Driven Design
Uma introdução ao Domain Driven DesignUma introdução ao Domain Driven Design
Uma introdução ao Domain Driven Design
 
Aulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o UsuárioAulas 7. IHC – Projeto de Interface com o Usuário
Aulas 7. IHC – Projeto de Interface com o Usuário
 
DDD - Step by Step
DDD - Step by StepDDD - Step by Step
DDD - Step by Step
 
Técnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptxTécnicas de Análise e Design de Interfaces.pptx
Técnicas de Análise e Design de Interfaces.pptx
 
PHPZEIRO: Adote um framework
PHPZEIRO: Adote um frameworkPHPZEIRO: Adote um framework
PHPZEIRO: Adote um framework
 

Protótipos mobile na prática