palestra ux e ui

104
BEM VINDOS!

Upload: ivan-pauletti

Post on 21-Jun-2015

424 views

Category:

Documents


9 download

TRANSCRIPT

Page 1: Palestra ux e ui

BEM VINDOS!

Page 2: Palestra ux e ui

A importância do

e da

no desenvolvimento.

Design (UI)

Usabilidade

Page 3: Palestra ux e ui

Sobre

UI e UXMercado Dicas

você está aqui!

Page 4: Palestra ux e ui

Sobre o Ivan

Ivan Pauletti24 anos

Desenvolvedor Front End e Arquiteto de Software

/ IVANPAULETTI

@IVANHTP

[email protected]

Page 5: Palestra ux e ui

Por onde passou?

Claretiano Totvs Interior Paulista

Agência Brandish Ad B2Blue.com

Page 6: Palestra ux e ui

Por onde passou?

Danone Bonafont

Whisky Grant’s Netshoes

Bacardi

Embratur Palmirinha

Page 7: Palestra ux e ui

Por onde passou?

Décima Arte

Page 8: Palestra ux e ui

O mercado

UI e UXMercado Dicas

você está aqui!

Page 9: Palestra ux e ui

De onde veio isso?

Apple Google MicrosoftMac Os X

iOSAndroid

Google Apps

Zune XBox

Windows Windows

Phone

Page 10: Palestra ux e ui

De onde veio isso?

Apple

Jony Ive

Mac Power 1995

Page 11: Palestra ux e ui

De onde veio isso?

Apple

Jony Ive

iMac G3 1996

Page 12: Palestra ux e ui

De onde veio isso?

Apple

Jony IveMac OS 9.2

1999

Page 13: Palestra ux e ui

De onde veio isso?

Apple

Jony IveMac OS X

2000

Page 14: Palestra ux e ui

De onde veio isso?

Apple

Jony Ive

Sony Discman

Page 15: Palestra ux e ui

De onde veio isso?

Apple

Jony Ive

Apple iPod Classic

Page 16: Palestra ux e ui

De onde veio isso?

Apple Google MicrosoftMac Os X

iOSAndroid

Google Apps

Zune XBox

Windows Windows

Phone

Page 17: Palestra ux e ui

De onde veio isso?

Google

Matias DuarteT-Mobile Android G1

Android 1.0

Page 18: Palestra ux e ui

De onde veio isso?

Google

Matias DuarteNexus 4

Android 4.3

Page 19: Palestra ux e ui

De onde veio isso?

Google

Matias DuarteGoogle Maps

2007

Page 20: Palestra ux e ui

De onde veio isso?

Google

Matias DuarteGoogle Maps

2013

Page 21: Palestra ux e ui

De onde veio isso?

Apple Google MicrosoftMac Os X

iOSAndroid

Google Apps

Zune XBox

Windows Windows

Phone

Page 22: Palestra ux e ui

De onde veio isso?Microsoft Re-desenha a caixa do iPod

Page 23: Palestra ux e ui

De onde veio isso?

Microsoft

Bill FloraMicrosoft Zune

2007

Page 24: Palestra ux e ui

De onde veio isso?

Microsoft

Bill FloraMicrosoft Zune HD

2011

Page 25: Palestra ux e ui

De onde veio isso?

Microsoft

Bill FloraXbox 360 Dashboard

2008

Page 26: Palestra ux e ui

De onde veio isso?

Microsoft

Bill Flora

Nokia Lumia 2011

Page 27: Palestra ux e ui

De onde veio isso?

Microsoft

Bill FloraWindows 8

2012

Page 28: Palestra ux e ui

O que eles têm em comum?

Apple Google MicrosoftJony Ive Matias Duarte Bill Flora

Page 29: Palestra ux e ui

O que eles têm em comum?

ELES MUDARAM O JOGO

CXO Chief Experience Officer

Page 30: Palestra ux e ui

O que eles têm em comum?

Apple Microsoft Google

Fonte: WolframAlpha

Valor de mercado (USD)

Page 31: Palestra ux e ui

O que eles têm em comum?

SUCESSO PRODUTO

qualidade

facilidade de

beleza

Page 32: Palestra ux e ui

O que eles têm em comum?

SUCESSO PRODUTO

qualidade

usabilidade

interface (UI)

Page 33: Palestra ux e ui

UI e UXMercado Dicas

você está aqui!

UI & UX

Page 34: Palestra ux e ui

O que é UI e UX?

Carro

Visual Muda

Funcionalidades não

Page 35: Palestra ux e ui

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.

Page 36: Palestra ux e ui

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.

Page 37: Palestra ux e ui

O que é UI e UX?

Temas Menu Iniciar

Windows

Page 38: Palestra ux e ui

O que é UI e UX?

Temas Menu Iniciar

Windows

Page 39: Palestra ux e ui

O que é UI e UX?

Temas Menu Iniciar

Windows

Page 40: Palestra ux e ui

User Interface

FLAT Clean

Minimalista

Simples

Intuitivo Interativo

Animado

Bonito

Ajax

Page 41: Palestra ux e ui

User Interface

Como começou?

Page 42: Palestra ux e ui

User Interface

Como começou?

SKEUMORFISMO!

Page 43: Palestra ux e ui

User Interface

SKEUMORFISMO! Similaridade com objetos físicos.

Page 44: Palestra ux e ui

User Interface

Já aprendemos. E agora?

FLAT DESIGN!

Page 45: Palestra ux e ui

User Interface

FLAT DESIGN!Objetividade, clareza e simplicidade.

Page 46: Palestra ux e ui

User Interface

SKEUOMORPHISM FLAT

Page 47: Palestra ux e ui

User Interface

SKEUOMORPHISM FLAT

Page 48: Palestra ux e ui

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

Page 49: Palestra ux e ui

User Interface

FLAT É MAIS BONITO. VOU USAR SEMPRE!

Page 50: Palestra ux e ui
Page 51: Palestra ux e ui

User Interface

•Tipo de dispositivo

•Público alvo

•Escopo do projeto

•Bom senso

•Tempo de criação

Page 52: Palestra ux e ui

User Interface / Flat / Cores

http://flatuicolors.com/

Cores claras e tons pastéis

Page 53: Palestra ux e ui

User Interface / Flat / Cores

http://kuler.adobe.com

Kuler

Apple

Facebook

Google

Page 54: Palestra ux e ui

User Interface

Ícones

•Monocromáticos

•Objetivos

•Leves

•Sem chamar a atenção

Page 55: Palestra ux e ui

User Interface / Flat / Cores

http://graphicburger.com/wp-content/uploads/2013/06/Flat-Design-UI-Components-Full.png

Page 56: Palestra ux e ui

User Interface / Flat / FontesFontes serifadas (serif)

An Times New RomanGaramondCourrier New

exemplos:

Page 57: Palestra ux e ui

User Interface / Flat / FontesFontes sem serifa (sans-serif)

An HelveticaUbuntuLatoFutura

exemplos:

Page 58: Palestra ux e ui

User Interface / Flat / Fontes

http://kuler.adobe.com

SEM SERIFA SERIFADA

HelveticaUbuntuLatoFuturaProxima

RockwellMuseo

Page 59: Palestra ux e ui

User Interface

http://www.bienvillecapital.com/

Page 60: Palestra ux e ui

User Interface

http://code42.com

Page 61: Palestra ux e ui

User Interface

http://designerfund.com/bridge/

Page 62: Palestra ux e ui

User Interface

http://www.frankdigital.com.au/portfolio/

Page 63: Palestra ux e ui

User Interface

http://www.sketchin.ch/en/

Page 64: Palestra ux e ui

User Interface

Último ponto!

OBJETIVIDADE

Page 65: Palestra ux e ui

User Interface

O QUE MINHA EMPRESA / PRODUTO

FAZ?

Page 66: Palestra ux e ui

User Interface

http://www.bienvillecapital.com/

Page 67: Palestra ux e ui

User Interface

http://code42.com

Page 68: Palestra ux e ui

User Interface

http://designerfund.com/bridge/

Page 69: Palestra ux e ui

User Interface

http://www.frankdigital.com.au/portfolio/

Page 70: Palestra ux e ui

User Interface

http://www.sketchin.ch/en/

Page 71: Palestra ux e ui

User Experience

USER EXPERIENCE

Page 72: Palestra ux e ui

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)

Page 73: Palestra ux e ui

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)

Page 74: Palestra ux e ui

Como aprender?

FEEDBACK

User Experience

Page 75: Palestra ux e ui

User Experience

Heatmap + analytics

Page 76: Palestra ux e ui

User Experience

Protótipo (!!!) + Wireframes

Page 77: Palestra ux e ui

User Experience

Protótipo (!!!) + Wireframes

Page 78: Palestra ux e ui

User Experience

Preocupe - se com o dispositivo

Page 79: Palestra ux e ui

User Experience Acessibilidade e responsividade

UIWindow 768 x 1024

Page 80: Palestra ux e ui

Como aplicar?Paradoxo dos pais

DESIGNERS

User Experience

Page 81: Palestra ux e ui

Como começar?

User Experience

Page 82: Palestra ux e ui

OK. Menos é mais...

User Experience

porém....

Page 83: Palestra ux e ui

User Experience

Eu consigo acessar TODAS as funções da TV

com essas teclas?

Page 84: Palestra ux e ui

User Experience

Page 85: Palestra ux e ui

User Experience

Page 86: Palestra ux e ui

User Experience

Page 87: Palestra ux e ui

User Experience

Como começar

mobile fist

Page 88: Palestra ux e ui

User Experience

Page 89: Palestra ux e ui

User Experience

Page 90: Palestra ux e ui

User Experience

Page 91: Palestra ux e ui

De novo...

User Experience

wire frames

Page 92: Palestra ux e ui

A pergunta não é...

User Experience

Como?

Page 93: Palestra ux e ui

Mas sim...

User Experience

Por que?

Page 94: Palestra ux e ui

UI e UXMercado Dicas

você está aqui!

Dicas

Page 95: Palestra ux e ui

Estatísticas

97% dos sites falham na

execução da UX !

Page 96: Palestra ux e ui

Estatísticas

68% dos usuários desistem ao sentirem que o site não

foi feito pra eles. !

Page 97: Palestra ux e ui

Estatísticas

50% do tempo de

desenvolvimento é gasto resolvendo problemas.

!

Page 98: Palestra ux e ui

Estatísticas

5 USUÁRIOS TESTANDO são suficientes para

encontrar 85% dos erros de usabilidade.

!

Page 99: Palestra ux e ui

Ferramentas

Prototipação e wireframe

Axure Omnigrafflewindows e mac mac e ios

Page 100: Palestra ux e ui

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

Page 101: Palestra ux e ui

Ferramentas

Feedback

Analytics Heatmapweb mac e ios

Page 102: Palestra ux e ui

É isso aí!

UI e UXMercado Dicas

Page 103: Palestra ux e ui

Baixem ae!!!https://www.slideshare.net/ivan_htp

Page 104: Palestra ux e ui

OBRIGADO!!

/ IVANPAULETTI

@IVANHTP

[email protected]

Adiciona aí!