O documento descreve um workshop sobre design de interface para dispositivos móveis. O workshop discute tópicos como entendimento do usuário, prototipagem, flat design, grids, e apresenta contatos de especialistas.
Workshop - Design de Interfaces para Dispositivos Móveis
1. workshop de design de
interação
Design de Interface para dispositivos móveis
2. Tema da atividade:
TUrismo durante a copa do mundo
Workshop:
Daniel Lugondi - Felipe Cumaru - Helio Souza - Jonathas Silva
3. Para ENTENDER o universo dos
dispositivos móveis é preciso entender
primeiro os USUÁRIOS
workshop de design de interação
Design de Interface para dispositivos móveis
4. ...e o que eles buscam
Facilidade?
Entretenimento?
Agilidade?
workshop de design de interação
Inovação?
Design de Interface para dispositivos móveis
5. workshop de design de interação
Design de Interface para dispositivos móveis
6. workshop de design de interação
Design de Interface para dispositivos móveis
7. você tem que ser o usuário!
workshop de design de interação
Design de Interface para dispositivos móveis
8. você tem que ser o usuário!
A day in the life
workshop de design de interação
Design de Interface para dispositivos móveis
9. você tem que ser o usuário!
como funciona?
pesado ou leve?
confortável?
ergonômico?
como acesso as
funções?
● quais botões ele
possui?
● quais aplicativos são
legais?
●
●
●
●
●
A day in the life
workshop de design de interação
Design de Interface para dispositivos móveis
10. Não é um computador tradicional!
workshop de design de interação
Design de Interface para dispositivos móveis
11. A interface tem que ser repensada
workshop de design de interação
Design de Interface para dispositivos móveis
12. somente os elementos
chave continuam!
workshop de design de interação
Design de Interface para dispositivos móveis
17. necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso diário? ocasional?
workshop de design de interação
Design de Interface para dispositivos móveis
18. necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso diário? ocasional?
workshop de design de interação
● consumir ou produzir
conteúdo?
● Serviços acoplados?
● resolver um problema
ou apenas
entretenimento?
Design de Interface para dispositivos móveis
19. necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso diário? ocasional?
● consumir ou produzir
conteúdo?
● Serviços acoplados?
● resolver um problema
ou apenas
entretenimento?
O que o usuário realmente quer?
workshop de design de interação
Design de Interface para dispositivos móveis
20. necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso diário? ocasional?
● consumir ou produzir
conteúdo?
● Serviços acoplados?
● resolver um problema
ou apenas
entretenimento?
O que o usuário realmente quer?
O que o usuário realmente precisa?
workshop de design de interação
Design de Interface para dispositivos móveis
21. design deve ser pensado como
diferencial
workshop de design de interação
Design de Interface para dispositivos móveis
22. workshop de design de interação
Design de Interface para dispositivos móveis
23. atividade
1. Utilizar o painel para composição das principais
necessidades (percebidas ou que se julgue verdadeiras)
dos usuários.
2. Utilizar uma coluna análoga para sugerir as
funcionalidade compatíveis para a resolução dos
problemas/necessidades elencados.
:)
workshop de design de interação
Design de Interface para dispositivos móveis
28. Fluxos - por onde começar?
De cima para baixo:
> Recomendado se quando
está no plano estratégico com
entendimento dos objetivos do
produto e necessidades dos
usuários.
De baixo para cima:
> Recomendado para análise
do conteúdo e requisitos
funcionais, começando com
material já existente, objetiva
refletir as necessidades dos
usuários.
FONTE: GARRET, Jesse James.The Elements of User Experience: User-Centered
Design for the Web and Beyond, Second Edition. NewRiders, 2011.
workshop de design de interação
Design de Interface para dispositivos móveis
29. Fluxos - recomendações de apresentação
workshop de design de interação
Design de Interface para dispositivos móveis
30. Fluxos, vamos fazer!
>> Com os requisitos é hora de começar o fluxo…
> Podemos ter algumas etapas:
REQUISITOS
LISTA
DE
CAMINHOS
workshop de design de interação
FLUXO
Design de Interface para dispositivos móveis
31. Prototipação
Teste rápido, erre rápido, e acerte rápido.
Para seguir este caminho, que é a chave do sucesso na
inovação, saber prototipar e modelar um projeto evita que se
gaste com ideias que talvez não estejam prontas para o
mercado.
workshop de design de interação
Design de Interface para dispositivos móveis
32. Prototipação em papel
Modelo básico, de baixo custo, que auxilia o teste de
usabilidade, validando fluxos e a interface de aplicações e
websites.
workshop de design de interação
Design de Interface para dispositivos móveis
38. MAS ASSIM, TÃO FÁCIL?
O protótipo é a melhor forma de testar se uma ideia funciona
ou não antes de investir em seu desenvolvimento. Mas dar
corpo a uma ideia e tirá-la do papel não é uma tarefa fácil.
workshop de design de interação
Design de Interface para dispositivos móveis
59. Skeumorphismo x Flat
●
●
●
●
●
Texturas
3D
Degradês
Sombras
Simula elementos reais
workshop de design de interação
●
●
●
●
●
●
●
Uniforme
2D
Preenchimento Sólido
Sombra chapada
Simplificação de elementos
Tipografia
Favorece a pregnância
Design de Interface para dispositivos móveis
60. onde o Flat começou?
Windows Phone???
workshop de design de interação
Windows 8???
Design de Interface para dispositivos móveis
61. O que é isso?
composição em vermelho, amarelo e azul
Piet Mondrian
workshop de design de interação
Design de Interface para dispositivos móveis
62. O estilo
o Neoplasticismo...
... defendia uma total limpeza
espacial para a pintura, reduzindo-a
a seus elementos mais puros e
buscando suas características mais
próprias.
●
●
●
Van Doesburg
Piet Mondrian
Gerrit Rietvield
A revista "De Stijl" foi uma publicação iniciada em 1917 por Theo van Doesburg e alguns
colegas que viriam a compor o movimento artístico conhecido por Neoplasticismo.
workshop de design de interação
Design de Interface para dispositivos móveis
63. Skeumorphismo x Flat
Piet Mondrian
workshop de design de interação
Design de Interface para dispositivos móveis
75. Referências e links
Referências:
>> UNGER, Russ & CHANDLER, Carolyn.O Guia para projetar UX: a experiência do
usuário (UX) para projetistas de conteúdo digital, aplicações e web sites. Rio de
Janeiro: Alta Com. Com. Ltda., 2009.
Links:
>> http://iainstitute.org/pt/translations/000332.html
>> Android DevSite: http://developer.android.com/design/index.html
>> I Phone DevSite: https://developer.apple.com/devcenter/ios/index.action
>> Windows Phone DevSite: http://developer.windowsphone.com/en-us
>> Alessandra Mess: http://www.behance.net/gallery/Processo-criativo-marcapessoal/6292423
Ferramentas:
Microsoft Visio - http://office.microsoft.com/visio
Axure RP Pro - http://www.axure.com
OmniGraffle - http://www.omnigroup.com/omniGraffle/
POP - https://popapp.in/
Fluid UI - https://fluidui.com/
workshop de design de interação
Design de Interface para dispositivos móveis
76. Contatos
Daniel Lugondi - UX e interação
>> me@daniellugondi.net
Jonathas Silva - UX e fluxos
>> jonathassilvabr@gmail.com
Felipe Cumaru - UI e wireframes
>> fcumaru@gmail.com
Hélio Souza - UI e ícones
>> helio2010br@gmail.com
workshop de design de interação
Design de Interface para dispositivos móveis