palestra ux e ui
Post on 21-Jun-2015
426 Views
Preview:
TRANSCRIPT
BEM VINDOS!
A importância do
e da
no desenvolvimento.
Design (UI)
Usabilidade
Sobre
UI e UXMercado Dicas
você está aqui!
Sobre o Ivan
Ivan Pauletti24 anos
Desenvolvedor Front End e Arquiteto de Software
/ IVANPAULETTI
@IVANHTP
IVANPAULETTI@GMAIL.COM
Por onde passou?
Claretiano Totvs Interior Paulista
Agência Brandish Ad B2Blue.com
Por onde passou?
Danone Bonafont
Whisky Grant’s Netshoes
Bacardi
Embratur Palmirinha
Por onde passou?
Décima Arte
O mercado
UI e UXMercado Dicas
você está aqui!
De onde veio isso?
Apple Google MicrosoftMac Os X
iOSAndroid
Google Apps
Zune XBox
Windows Windows
Phone
De onde veio isso?
Apple
Jony Ive
Mac Power 1995
De onde veio isso?
Apple
Jony Ive
iMac G3 1996
De onde veio isso?
Apple
Jony IveMac OS 9.2
1999
De onde veio isso?
Apple
Jony IveMac OS X
2000
De onde veio isso?
Apple
Jony Ive
Sony Discman
De onde veio isso?
Apple
Jony Ive
Apple iPod Classic
De onde veio isso?
Apple Google MicrosoftMac Os X
iOSAndroid
Google Apps
Zune XBox
Windows Windows
Phone
De onde veio isso?
Matias DuarteT-Mobile Android G1
Android 1.0
De onde veio isso?
Matias DuarteNexus 4
Android 4.3
De onde veio isso?
Matias DuarteGoogle Maps
2007
De onde veio isso?
Matias DuarteGoogle Maps
2013
De onde veio isso?
Apple Google MicrosoftMac Os X
iOSAndroid
Google Apps
Zune XBox
Windows Windows
Phone
De onde veio isso?Microsoft Re-desenha a caixa do iPod
De onde veio isso?
Microsoft
Bill FloraMicrosoft Zune
2007
De onde veio isso?
Microsoft
Bill FloraMicrosoft Zune HD
2011
De onde veio isso?
Microsoft
Bill FloraXbox 360 Dashboard
2008
De onde veio isso?
Microsoft
Bill Flora
Nokia Lumia 2011
De onde veio isso?
Microsoft
Bill FloraWindows 8
2012
O que eles têm em comum?
Apple Google MicrosoftJony Ive Matias Duarte Bill Flora
O que eles têm em comum?
ELES MUDARAM O JOGO
CXO Chief Experience Officer
O que eles têm em comum?
Apple Microsoft Google
Fonte: WolframAlpha
Valor de mercado (USD)
O que eles têm em comum?
SUCESSO PRODUTO
qualidade
facilidade de
beleza
O que eles têm em comum?
SUCESSO PRODUTO
qualidade
usabilidade
interface (UI)
UI e UXMercado Dicas
você está aqui!
UI & UX
O que é UI e UX?
Carro
Visual Muda
Funcionalidades não
O que é UI e UX?
UI - Interface UX - Visual Muda Funcionalidades não
Dita tendência mas não é regra.
Após criados, se mantêm.
O que é UI e UX?
UI - Interface UX -
É físico ou Nem sempre tangível mas sempre
Um botão para descer o vidro do carro.
!Um volante esportivo.
!!
Um câmbio automático.
A facilidade de abrir os vidros sem esforço.
!Suavidade de um carro
nas curvas. !
Não precisar mudar marchas.
O que é UI e UX?
Temas Menu Iniciar
Windows
O que é UI e UX?
Temas Menu Iniciar
Windows
O que é UI e UX?
Temas Menu Iniciar
Windows
User Interface
FLAT Clean
Minimalista
Simples
Intuitivo Interativo
Animado
Bonito
Ajax
User Interface
Como começou?
User Interface
Como começou?
SKEUMORFISMO!
User Interface
SKEUMORFISMO! Similaridade com objetos físicos.
User Interface
Já aprendemos. E agora?
FLAT DESIGN!
User Interface
FLAT DESIGN!Objetividade, clareza e simplicidade.
User Interface
SKEUOMORPHISM FLAT
User Interface
SKEUOMORPHISM FLAT
User Interface
SKEUOMORPHISM FLATBotão
23
24
25
26
27
January
February
March
April
May
2008
2009
2010
2011
2012
ON
Botão
18Setembro
2013
User Interface
FLAT É MAIS BONITO. VOU USAR SEMPRE!
User Interface
•Tipo de dispositivo
•Público alvo
•Escopo do projeto
•Bom senso
•Tempo de criação
User Interface / Flat / Cores
http://flatuicolors.com/
Cores claras e tons pastéis
User Interface / Flat / Cores
http://kuler.adobe.com
Kuler
Apple
User Interface
Ícones
•Monocromáticos
•Objetivos
•Leves
•Sem chamar a atenção
User Interface / Flat / Cores
http://graphicburger.com/wp-content/uploads/2013/06/Flat-Design-UI-Components-Full.png
User Interface / Flat / FontesFontes serifadas (serif)
An Times New RomanGaramondCourrier New
exemplos:
User Interface / Flat / FontesFontes sem serifa (sans-serif)
An HelveticaUbuntuLatoFutura
exemplos:
User Interface / Flat / Fontes
http://kuler.adobe.com
SEM SERIFA SERIFADA
HelveticaUbuntuLatoFuturaProxima
RockwellMuseo
User Interface
Último ponto!
OBJETIVIDADE
User Interface
O QUE MINHA EMPRESA / PRODUTO
FAZ?
User Experience
USER EXPERIENCE
User Experience
USER EXPERIENCEa person's perceptions and responses that result from the use or anticipated use of a product, system or service"“
ISO 9241 - Human centered design processes for interativce systems (1999)
User Experience
USER EXPERIENCEpercepções e respostas sensíveis que vêm da utilização prevista de um produto, serviço ou sistema .
“ISO 9241 - Human centered design
processes for interativce systems (1999)
Como aprender?
FEEDBACK
User Experience
User Experience
Heatmap + analytics
User Experience
Protótipo (!!!) + Wireframes
User Experience
Protótipo (!!!) + Wireframes
User Experience
Preocupe - se com o dispositivo
User Experience Acessibilidade e responsividade
UIWindow 768 x 1024
Como aplicar?Paradoxo dos pais
DESIGNERS
User Experience
Como começar?
User Experience
OK. Menos é mais...
User Experience
porém....
User Experience
Eu consigo acessar TODAS as funções da TV
com essas teclas?
User Experience
User Experience
User Experience
User Experience
Como começar
mobile fist
User Experience
User Experience
User Experience
De novo...
User Experience
wire frames
A pergunta não é...
User Experience
Como?
Mas sim...
User Experience
Por que?
UI e UXMercado Dicas
você está aqui!
Dicas
Estatísticas
97% dos sites falham na
execução da UX !
Estatísticas
68% dos usuários desistem ao sentirem que o site não
foi feito pra eles. !
Estatísticas
50% do tempo de
desenvolvimento é gasto resolvendo problemas.
!
Estatísticas
5 USUÁRIOS TESTANDO são suficientes para
encontrar 85% dos erros de usabilidade.
!
Ferramentas
Prototipação e wireframe
Axure Omnigrafflewindows e mac mac e ios
Ferramentas
StencilsAndroid Design StencilsA shimmering global phenomenonSurfing invisible currents of informationDesign the soul of an intelligent machine
TYPOGRAPHY Roboto, text size micro - 12sp
Roboto, text size small - 14sp
Roboto, text size medium - 18sp
Roboto, text size large - 22sp
COLORStandard Accent
51,181,229 170,102,204 153,204,0 255,187,51 255,68,68
0,153,204 153,51,204 102,153,0 255,136,0 204,0,0
ACTION BAR
Ungroup to resize Ungroup to resize
Use Menus
Sparingly, and only
For low usage
Commands
Use Menus
Sparingly, and only
For low usage
Commands
Ungroup to resize Ungroup to resize
Ungroup to resize
Ungroup to resize
CONTEXTUALACTION BAR
Ungroup to resize
Ungroup to resize
TABLET (56dp)Ungroup to resize
LANDSCAPE (40dp)Ungroup to resize
TABS
TAB ONE TAB TWO TAB THREE
TAB ONE TAB TWO TAB THREE
TAB ONE TAB TWO TAB THREE
TAB ONE TAB TWO TAB THREE
Ferramentas
Feedback
Analytics Heatmapweb mac e ios
É isso aí!
UI e UXMercado Dicas
Baixem ae!!!https://www.slideshare.net/ivan_htp
OBRIGADO!!
/ IVANPAULETTI
@IVANHTP
IVANPAULETTI@GMAIL.COM
Adiciona aí!
top related