SlideShare uma empresa Scribd logo
UX for developers 
Build better products
“Digite uma citação aqui.” 
–Jaime Silveira 
Who I am? 
Pedro Marques 
UI/UX Designer @ CI&T
tA 
Altamente Ácido
tA
tA O que é UX?
Digital 
“Nossa é difícil usar isso” 
E aí, o que é ux? 
“Que app lento” 
“Má quê esso?”
Quem Sou eu? 
Usuário não é burro 
Mas o que para você é obvio 
para ele pode ser complexo 
Pedro Marques 
UI/UX Designer @ CI&T
Ux for Developers - Build Better Products
Quem Sou eu? 
O QUE É UX? 
“Nossa é difícil usar isso” 
“Que app lento” 
“Má quê esso?” 
PERFORMANCE 
Pedro Marques 
UI/UX Designer @ CI&T
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS
‣ Seu código guia a experiência 
‣ UI != UX 
‣ Bom UX gera momentos agradáveis 
‣ Você dá vida ao Design
‣ Seu código guia a experiência 
‣ UI != UX 
‣ Bom UX gera momentos agradáveis 
‣ Você dá vida ao Design
‣ Seu código guia a experiência 
‣ UI != UX 
‣ Bom UX gera momentos agradáveis 
‣ Você dá vida ao Design
‣ Seu código guia a experiência 
‣ UI != UX 
‣ Bom UX gera momentos agradáveis 
‣ Você dá vida ao Design
Tá, mas e aí?
Usuário 
X 
Cliente
Usuário
Cliente
Qualidade
20.000 
POR DIA
:) ou ;(
Enchant me. 
Simplify my life. 
Make me amazing. 
Android Team
Como é feito na prática?
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Eu quero um carro!
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Luxo
Mãe
Alegórioco
De mão
Hot dog
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Pra quem?
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Biscoito X Bolacha
50% 
É a média do tempo gasto em refação nos 
projetos de TI 
http://spectrum.ieee.org/computing/software/why-software-fails/
83% 
É a média de melhoria se 10% dos tempo do 
projeto for gasto com pesquisa e testes 
http://spectrum.ieee.org/computing/software/why-software-fails/
Ux for Developers - Build Better Products
Erico Fileno/Horacio Soares
Device Pixel Ratio 
0.75 
1 
1.33 
1.5 
2 
3 
Low dpi 
normal, mdpi 
tvtdpi 
hdpi 
retina, xhdpi 
xxhdpi 
Data Driven Design
‣ Seu código guia a experiência 
‣ UI != UX 
‣ Bom UX gera momentos agradáveis 
‣ Você dá vida ao Design
Ux for Developers - Build Better Products
Boas Práticas
Boas Práticas 
‣ Melhoria continua 
‣ Feedback de erro/confirmação 
‣ Animações 
‣ Considere a conexão 
‣ Carregamento em fila
Clicar > Digitar > 
Pressionar Enter
Ux for Developers - Build Better Products
Clicar > Digitar > 
Pressionar Enter
Ux for Developers - Build Better Products
Boas Práticas 
‣ Melhoria continua 
‣ Feedback de erro/confirmação 
‣ Animações 
‣ Considere a conexão 
‣ Carregamento em fila
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Boas Práticas 
‣ Melhoria continua 
‣ Feedback de erro/confirmação 
‣ Animações 
‣ Considere a conexão 
‣ Carregamento em fila
Boas Práticas 
‣ Consistência 
‣ Sempre informe cada passo do usuário 
‣ Deixe o usuário no controle 
‣ Navegue em seu próprio site 
‣ Não confie no seu código.
PERFORMANCE 
FRONT-END
PERFORMANCE 
FRONT-END 
VELOCIDADE É DESIGN
“Any sufficiently advanced 
technology is indistinguishable 
from magic.” 
Arthur C. Clarke
Performance Front End 
‣ Reduzir o numero de requests HTTP 
‣ Otimizar Imagens 
‣ Cache 
‣ Minimizar o HTML, CSS e JavaScript 
‣ Otimize sua Home
Performance Front End 
‣ Reduzir o numero de requests HTTP 
‣ Gerenciamento de Plugins 
‣ Cache 
‣ Minimizar o HTML, CSS e JavaScript 
‣ Otimize sua Home 
sennajs.com
Bookmarkability & SEO 
! 
History Navigation 
! 
UI Feedback & Transitions 
! 
Cacheable Screens
Foco
Ux for Developers - Build Better Products
Cases 
Eu vi e vivi.
Cases Eu vi e vivi. 
OTC 2013 
Petrobras 
Páginas internas com cliques em pontos específicos para rolar o conteúdo pois 
o projeto era responsivo e seria exibido em painéis touch no evento. 
! 
Animações de infográficos que ajudam também no tempo de carregamento da 
página
Cases Eu vi e vivi. 
OTC 2013 
Petrobras 
Páginas internas com cliques em pontos específicos para rolar o conteúdo pois 
o projeto era responsivo e seria exibido em painéis touch no evento. 
! 
Animações de infográficos que ajudam também no tempo de carregamento da 
página
5 segundos
Cases Eu vi e vivi. 
OTC 2013 
Petrobras 
Páginas internas com cliques em pontos específicos para rolar o conteúdo pois 
o projeto era responsivo e seria exibido em painéis touch no evento. 
! 
Animações de infográficos que ajudam também no tempo de carregamento da 
página
Crie experiências 
Não importa a tela
Crie experiências 
Não importa a tela Q&A
Valeu Cariocax 
“Digite uma citação aqui.” 
https://twitter.com/pedro_designer 
pedro@marksdesign.–Jaime Silveira 
com.br 
marksdesign.com.br

Mais conteúdo relacionado

Destaque

Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
Seattle Interactive Conference
 
A/B Testing - In data we trust
A/B Testing - In data we trustA/B Testing - In data we trust
A/B Testing - In data we trust
Pedro Marques
 
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
Seattle Interactive Conference
 
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
Seattle Interactive Conference
 
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
Seattle Interactive Conference
 
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Pedro Marques
 
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
Seattle Interactive Conference
 
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
Seattle Interactive Conference
 
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
Seattle Interactive Conference
 
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
Seattle Interactive Conference
 
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
Seattle Interactive Conference
 
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
Seattle Interactive Conference
 
Michael Huang - Brand New Old Skool - Seattle Interactive 2016
Michael Huang - Brand New Old Skool - Seattle Interactive 2016Michael Huang - Brand New Old Skool - Seattle Interactive 2016
Michael Huang - Brand New Old Skool - Seattle Interactive 2016
Seattle Interactive Conference
 
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
Seattle Interactive Conference
 
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
Seattle Interactive Conference
 
Andrew Smith - Cord Cutting: Creating Media Experiences That Matter in an Age...
Andrew Smith - Cord Cutting: Creating Media Experiences That Matter in an Age...Andrew Smith - Cord Cutting: Creating Media Experiences That Matter in an Age...
Andrew Smith - Cord Cutting: Creating Media Experiences That Matter in an Age...
Seattle Interactive Conference
 
Paul Campbell - Cannabis - The Next Disruption - Seattle Interactive 2016
Paul Campbell - Cannabis - The Next Disruption - Seattle Interactive 2016Paul Campbell - Cannabis - The Next Disruption - Seattle Interactive 2016
Paul Campbell - Cannabis - The Next Disruption - Seattle Interactive 2016
Seattle Interactive Conference
 
Joanna Lord: Habits of High Growth Companies and Other Unicorn Adventures - S...
Joanna Lord: Habits of High Growth Companies and Other Unicorn Adventures - S...Joanna Lord: Habits of High Growth Companies and Other Unicorn Adventures - S...
Joanna Lord: Habits of High Growth Companies and Other Unicorn Adventures - S...
Seattle Interactive Conference
 
Kevin Getch - Visualize a customer centric digital marketing strategy - Seatt...
Kevin Getch - Visualize a customer centric digital marketing strategy - Seatt...Kevin Getch - Visualize a customer centric digital marketing strategy - Seatt...
Kevin Getch - Visualize a customer centric digital marketing strategy - Seatt...
Seattle Interactive Conference
 
Cliff Mass: Big Data and Weather Prediction - Seattle Interactive 2015
Cliff Mass: Big Data and Weather Prediction - Seattle Interactive 2015Cliff Mass: Big Data and Weather Prediction - Seattle Interactive 2015
Cliff Mass: Big Data and Weather Prediction - Seattle Interactive 2015
Seattle Interactive Conference
 

Destaque (20)

Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
Dr. Augustine Fou - The Lowdown on Ad Fraud for Advertisers - Seattle Interac...
 
A/B Testing - In data we trust
A/B Testing - In data we trustA/B Testing - In data we trust
A/B Testing - In data we trust
 
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
Jane Mauser, Ross Reynolds, Jesse Schubert, Brian Gower - Changing the World ...
 
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
George Scaff: Revolutionizing Consumer Engagement in the Digital World - Seat...
 
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
Carey Jenkins: Building the Team that Builds the Product - Seattle Interactiv...
 
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
 
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
Scilla Andreen - To Hurt, to Triumph and to Be Human: Expressing Our Humanity...
 
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
Chris Dancy - Designing for Wisdom: Designing Contemplative Systems for Extra...
 
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
Michael Ellsworth - Death, Drugs and Disasters - Seattle Interactive 2016
 
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
Benjamin Shown - Rich Content, Malleable Mediums, and Wicked Problems - Seatt...
 
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
Mary Rauzi + Kate Matsudaira - Responsive Branding: Making Your Brand Interac...
 
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
Branden Miller - Fifty First Dates: How to Choose Strategic Partners - Seattl...
 
Michael Huang - Brand New Old Skool - Seattle Interactive 2016
Michael Huang - Brand New Old Skool - Seattle Interactive 2016Michael Huang - Brand New Old Skool - Seattle Interactive 2016
Michael Huang - Brand New Old Skool - Seattle Interactive 2016
 
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
Ashley Faus - How to Add Live-streaming to Your Marketing Mix - Seattle Inter...
 
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
Dave Curry + Jonathan Faunce - Virtual, Augmented, and Mixed: The “Reality” O...
 
Andrew Smith - Cord Cutting: Creating Media Experiences That Matter in an Age...
Andrew Smith - Cord Cutting: Creating Media Experiences That Matter in an Age...Andrew Smith - Cord Cutting: Creating Media Experiences That Matter in an Age...
Andrew Smith - Cord Cutting: Creating Media Experiences That Matter in an Age...
 
Paul Campbell - Cannabis - The Next Disruption - Seattle Interactive 2016
Paul Campbell - Cannabis - The Next Disruption - Seattle Interactive 2016Paul Campbell - Cannabis - The Next Disruption - Seattle Interactive 2016
Paul Campbell - Cannabis - The Next Disruption - Seattle Interactive 2016
 
Joanna Lord: Habits of High Growth Companies and Other Unicorn Adventures - S...
Joanna Lord: Habits of High Growth Companies and Other Unicorn Adventures - S...Joanna Lord: Habits of High Growth Companies and Other Unicorn Adventures - S...
Joanna Lord: Habits of High Growth Companies and Other Unicorn Adventures - S...
 
Kevin Getch - Visualize a customer centric digital marketing strategy - Seatt...
Kevin Getch - Visualize a customer centric digital marketing strategy - Seatt...Kevin Getch - Visualize a customer centric digital marketing strategy - Seatt...
Kevin Getch - Visualize a customer centric digital marketing strategy - Seatt...
 
Cliff Mass: Big Data and Weather Prediction - Seattle Interactive 2015
Cliff Mass: Big Data and Weather Prediction - Seattle Interactive 2015Cliff Mass: Big Data and Weather Prediction - Seattle Interactive 2015
Cliff Mass: Big Data and Weather Prediction - Seattle Interactive 2015
 

Semelhante a Ux for Developers - Build Better Products

[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
iMasters
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Produtividade
ProdutividadeProdutividade
Produtividade
Elcio Ferreira
 
Divida tecnica
Divida tecnicaDivida tecnica
Divida tecnica
alexandre freire
 
Do código à produção com Gitlab (mundo python)
Do código à produção com Gitlab (mundo python)Do código à produção com Gitlab (mundo python)
Do código à produção com Gitlab (mundo python)
Better Developer
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
Horácio Soares
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
João Vitor Paes de Barros do Ca
 
Trabalhando com ALM na nuvem
Trabalhando com ALM na nuvemTrabalhando com ALM na nuvem
Trabalhando com ALM na nuvem
Adriano Bertucci
 
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Marcus Garcia
 
Live DIO - CI / CD
Live DIO - CI / CDLive DIO - CI / CD
Live DIO - CI / CD
Felipe Campos
 
5 Dicas para economizar no desenvolvimento do seu aplicativo
5 Dicas para economizar no desenvolvimento do seu aplicativo5 Dicas para economizar no desenvolvimento do seu aplicativo
5 Dicas para economizar no desenvolvimento do seu aplicativo
Kleber Carvalho
 
Encontro Locaweb
Encontro  LocawebEncontro  Locaweb
Encontro Locaweb
Fabio Akita
 
Encontro Locaweb Curitiba
Encontro  Locaweb CuritibaEncontro  Locaweb Curitiba
Encontro Locaweb Curitiba
Fabio Akita
 
MVPConf - Azure Functions
MVPConf - Azure FunctionsMVPConf - Azure Functions
MVPConf - Azure Functions
CDS
 
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
iMasters
 
Segredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App ManifestSegredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App Manifest
Eduardo Matos
 
O que há de incrível sobre o Flutter
O que há de incrível sobre o FlutterO que há de incrível sobre o Flutter
O que há de incrível sobre o Flutter
Wiliam Buzatto
 
Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis   Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis
Agile Trends
 
Não deixe seu projeto só nas mãos do framework
Não deixe seu projeto só nas mãos do frameworkNão deixe seu projeto só nas mãos do framework
Não deixe seu projeto só nas mãos do framework
Giuseppe Lopes
 
Scrum na sua Empresa
Scrum na sua EmpresaScrum na sua Empresa
Scrum na sua Empresa
Fabiano Milani
 

Semelhante a Ux for Developers - Build Better Products (20)

[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Produtividade
ProdutividadeProdutividade
Produtividade
 
Divida tecnica
Divida tecnicaDivida tecnica
Divida tecnica
 
Do código à produção com Gitlab (mundo python)
Do código à produção com Gitlab (mundo python)Do código à produção com Gitlab (mundo python)
Do código à produção com Gitlab (mundo python)
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
Trabalhando com ALM na nuvem
Trabalhando com ALM na nuvemTrabalhando com ALM na nuvem
Trabalhando com ALM na nuvem
 
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
Trabalhando com TFS na nuvem (Microsoft Azure). Quais vantagens de migrar o A...
 
Live DIO - CI / CD
Live DIO - CI / CDLive DIO - CI / CD
Live DIO - CI / CD
 
5 Dicas para economizar no desenvolvimento do seu aplicativo
5 Dicas para economizar no desenvolvimento do seu aplicativo5 Dicas para economizar no desenvolvimento do seu aplicativo
5 Dicas para economizar no desenvolvimento do seu aplicativo
 
Encontro Locaweb
Encontro  LocawebEncontro  Locaweb
Encontro Locaweb
 
Encontro Locaweb Curitiba
Encontro  Locaweb CuritibaEncontro  Locaweb Curitiba
Encontro Locaweb Curitiba
 
MVPConf - Azure Functions
MVPConf - Azure FunctionsMVPConf - Azure Functions
MVPConf - Azure Functions
 
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
InterCon 2017 - Segredos não ditos de PWA - muito além do Web App Manifest - ...
 
Segredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App ManifestSegredos não ditos de PWA - muito além do Web App Manifest
Segredos não ditos de PWA - muito além do Web App Manifest
 
O que há de incrível sobre o Flutter
O que há de incrível sobre o FlutterO que há de incrível sobre o Flutter
O que há de incrível sobre o Flutter
 
Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis   Eduardo Rocha - Criando produtos invisíveis
Eduardo Rocha - Criando produtos invisíveis
 
Não deixe seu projeto só nas mãos do framework
Não deixe seu projeto só nas mãos do frameworkNão deixe seu projeto só nas mãos do framework
Não deixe seu projeto só nas mãos do framework
 
Scrum na sua Empresa
Scrum na sua EmpresaScrum na sua Empresa
Scrum na sua Empresa
 

Ux for Developers - Build Better Products

  • 1. UX for developers Build better products
  • 2. “Digite uma citação aqui.” –Jaime Silveira Who I am? Pedro Marques UI/UX Designer @ CI&T
  • 4. tA
  • 5. tA O que é UX?
  • 6. Digital “Nossa é difícil usar isso” E aí, o que é ux? “Que app lento” “Má quê esso?”
  • 7. Quem Sou eu? Usuário não é burro Mas o que para você é obvio para ele pode ser complexo Pedro Marques UI/UX Designer @ CI&T
  • 9. Quem Sou eu? O QUE É UX? “Nossa é difícil usar isso” “Que app lento” “Má quê esso?” PERFORMANCE Pedro Marques UI/UX Designer @ CI&T
  • 10. DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS
  • 11. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  • 12. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  • 13. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  • 14. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  • 15. Tá, mas e aí?
  • 22. Enchant me. Simplify my life. Make me amazing. Android Team
  • 23. Como é feito na prática?
  • 24. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Eu quero um carro!
  • 25. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Luxo
  • 26. Mãe
  • 30. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Pra quem?
  • 31. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Biscoito X Bolacha
  • 32. 50% É a média do tempo gasto em refação nos projetos de TI http://spectrum.ieee.org/computing/software/why-software-fails/
  • 33. 83% É a média de melhoria se 10% dos tempo do projeto for gasto com pesquisa e testes http://spectrum.ieee.org/computing/software/why-software-fails/
  • 36. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Data Driven Design
  • 37. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  • 40. Boas Práticas ‣ Melhoria continua ‣ Feedback de erro/confirmação ‣ Animações ‣ Considere a conexão ‣ Carregamento em fila
  • 41. Clicar > Digitar > Pressionar Enter
  • 43. Clicar > Digitar > Pressionar Enter
  • 45. Boas Práticas ‣ Melhoria continua ‣ Feedback de erro/confirmação ‣ Animações ‣ Considere a conexão ‣ Carregamento em fila
  • 50. Boas Práticas ‣ Melhoria continua ‣ Feedback de erro/confirmação ‣ Animações ‣ Considere a conexão ‣ Carregamento em fila
  • 51. Boas Práticas ‣ Consistência ‣ Sempre informe cada passo do usuário ‣ Deixe o usuário no controle ‣ Navegue em seu próprio site ‣ Não confie no seu código.
  • 54. “Any sufficiently advanced technology is indistinguishable from magic.” Arthur C. Clarke
  • 55. Performance Front End ‣ Reduzir o numero de requests HTTP ‣ Otimizar Imagens ‣ Cache ‣ Minimizar o HTML, CSS e JavaScript ‣ Otimize sua Home
  • 56. Performance Front End ‣ Reduzir o numero de requests HTTP ‣ Gerenciamento de Plugins ‣ Cache ‣ Minimizar o HTML, CSS e JavaScript ‣ Otimize sua Home sennajs.com
  • 57. Bookmarkability & SEO ! History Navigation ! UI Feedback & Transitions ! Cacheable Screens
  • 58. Foco
  • 60. Cases Eu vi e vivi.
  • 61. Cases Eu vi e vivi. OTC 2013 Petrobras Páginas internas com cliques em pontos específicos para rolar o conteúdo pois o projeto era responsivo e seria exibido em painéis touch no evento. ! Animações de infográficos que ajudam também no tempo de carregamento da página
  • 62. Cases Eu vi e vivi. OTC 2013 Petrobras Páginas internas com cliques em pontos específicos para rolar o conteúdo pois o projeto era responsivo e seria exibido em painéis touch no evento. ! Animações de infográficos que ajudam também no tempo de carregamento da página
  • 64. Cases Eu vi e vivi. OTC 2013 Petrobras Páginas internas com cliques em pontos específicos para rolar o conteúdo pois o projeto era responsivo e seria exibido em painéis touch no evento. ! Animações de infográficos que ajudam também no tempo de carregamento da página
  • 65. Crie experiências Não importa a tela
  • 66. Crie experiências Não importa a tela Q&A
  • 67. Valeu Cariocax “Digite uma citação aqui.” https://twitter.com/pedro_designer pedro@marksdesign.–Jaime Silveira com.br marksdesign.com.br