1) O documento discute conceitos de interface para dispositivos móveis, incluindo os sete mandamentos fundamentais para criação de interfaces e arquitetura de informação. 2) É descrito o fluxo de trabalho para desenvolvimento de um aplicativo, incluindo briefing, wireframes, protótipos e fluxos. 3) As etapas de design visual e padrões de criação para interfaces gráficas dinâmicas são explicadas.

1. Criação para
dispositivos móveis

2. Conceito de
interface
Interfaces para dispositivos móveis.

3. Interface nada mais é do que a
Ligação/conexão/transferência
de informação entre dois
meios distintos.

4. #A função de um aplicativo, por exemplo, é
trazer ao usuário maneiras de realizar tarefas
que lhe sejam úteis

5. Os 7 mandamentos
fundamentais

6. #1º
Tenha poucas funções no mesmo
ambiente. Mantenha o foco!

7. #2º
“Tudo é essencial” não é uma opção.

8. #3º
Use botões grandes. Lembre-se do
toque para um dedo e não para um
cursor do mouse.

9. #4º
Pouca digitação. É difícil, demorado e
chato ao usuário. Formulários
pequenos, muitos atalhos e connects.

10. #5º
A forma deve refletir a função, que
é mais importante que a beleza
aparente.

11. #6º
Existem padrões de interface para
cada plataforma (iOS, Android, etc).
Conheça os guides de cada uma.

12. #7º
NUNCA fazer uma interface com
características evidentes de uma
plataforma para ser usada em
outras. NUNCA!

13. Arquitetura de
informação

14. #O que é AI?
Resumidamente é o
planejamento da planta baixa de
uma solução/aplicativo.

15. #A função básica é
criar uma boa
experiência.

16. #Antes de começar
Faça perguntas:
Quem utilizará o app?
Em que contexto?
Qual o objetivo?
De onde vem as informações?

17. #Wireframe
#Esboços
#Protótipos
#Fluxos
O aplicativo tomará
forma nessa etapa.

18. #A navegação de um
aplicativo depende
das funcionalidades e
conteúdo que possui.

19. Arquitetos não
são videntes!

20. Design
Visual

21. É o que permite tornar
compreensível, atraente e
utilizável uma interface gráfica.

22. Componentes padrão são
sempre muito utéis.

23. #FiqueAtento
Uma interface gráfica é
dinâmica.

24. #Sua interface
gráfica não é um
poster!

25. Padrões de
criação

26. #Objetivo claro.

27. #Utilize os recursos necessários

28. #Surpreenda 80% dos usuários.

29. #Navegação em várias telas.

30. #Listas, grids, galerias de imagens.

31. #Barras de ferramentas.

32. #Action buttons

33. Primeiro nível:
uma lista/navegação algumas
informações relevantes.

34. Níveis
inferiores:
aprofundar esse
detalhamento se necessário.

35. Fluxo
de trabalho

36. #Processo
Deixa claro que existem
etapas. Não atropele
nenhuma delas.

37. #Processo
Briefing

38. #Briefing

39. #Processo
Briefing WF

40. #Processo
WF

41. O aplicativo é aberto pela primeira vez na aba “Meu
time”, onde o usuário poderá selecionar o seu time
Quando o usuário seleciona um time como favorito, a
área “Meu Time” apresenta um resumo das principais
#WF
Após selecionar o time, o usuário é avisado sobre a informações com relação ao time. Serão
preferido. Assim, o aplicativo será personalizado de
possibilidade de receber alertas para determinados apresentados dados históricos do time, posição no
acordo com essa preferência. Os times estão separados
eventos do seu time favorito. Ele sempre poderá campeonato, e os jogos daquele time. O usuário
por série, e dentro dela, organizados em ordem
alterar as configurações dentro da área respectiva no pode selecionar qualquer jogo da tabela para ser
alfabética. O usuário também pode decidir por navegar
aplicativo. levado para a tela de detalhes daquele jogo.
pelo aplicativo sem selecionar nenhum time.
G3 11:10 G3 11:10 G3 11:10 G3 11:10
G3 11:10
Meu Time Meu Time Meu Time Meu Time
ESCOLHA SEU TIME
ico Nome do time Classificação
(Status)
ico Nome do time Classificação
(Status)
ico Nome do time Classificação
(Status)
Selecione abaixo o seu time, para personalizar o
aplicativo. Jogos do seu time serão destacados. Você
Alertas
Fundação: 1900
do time no
campeonato Fundação: 1900
do time no
campeonato Fundação: 1900
do time no
campeonato
Estádio: Nome do estádio Estádio: Nome do estádio Estádio: Nome do estádio
Capacidade: 00.000 alertas para
Deseja receber
poderá trocar de time depois, se desejar, em
Configurações. Capacidade: 00.000 Capacidade: 00.000
início/fim dos jogos e gols
SPLASH
11/03/2011 - Rodada do seu time
das partidas 11/03/2011 - Rodada 11/03/2011 - Rodada
Série A favorito? Você poderá alterar
Horário / Status Horário / Status Horário / Status
ico as preferências mais tarde ico ico ico ico ico
0x0 0x0 0x0
ico Time 1
na área de Configurações do
ico Time 2 Time aplicativo. Time Time Time Time Time
Estádio Estádio Estádio
ico Time 3 18/03/2011 - Rodada 18/03/2011 - Rodada 18/03/2011 - Rodada
ico Time 4 Não Sim
Horário / Status Horário / Status Horário / Status
ico ico ico ico ico ico
ico Time 5
Time 6
Time 0x0Estádio
Time Time 0x0Estádio
Time Time 0x0Estádio
Time
ico
ico Time 7
25/03/2011 - Rodada 25/03/2011 - Rodada 25/03/2011 - Rodada
Horário / Status Horário / Status Horário / Status
ico Time 8 ico ico ico ico ico ico
rich mobile solutions
ico
Meu Time
ico
Jogos
ico
Classificação
ico
Petrobras Mais
ico
Meu Time Jogos
Time
ico
0x0 ico
Classificação
ico
TimeMais
Petrobras
ico
Meu Time Jogos
Time
ico
0x0 ico
Classificação
ico
TimeMais
Petrobras
ico ico
Meu Time Jogos
Time
0x0 ico
Classificação
ico
TimeMais
Petrobras
!
Caso o aplicativo tenha sido usado
anteriormente, deve-se retornar à aba
em que o usuário estava quando
fechou o aplicativo, ignorando a
navegação dentro desta aba.
Ex:
“Meu time”. O aplicativo abre na aba, e
não no último jogo acessado.
“Jogos”: o aplicativo abre em “Hoje”ou
na rodada atual.
“Classificação”: Abre na lista de times, e
nao em algum jogo ou time.

42. #Processo
WF LLO
Aprovação

43. #LLO

44. #Processo
WF LLO LL
Aprovação Aprovação

45. Principais
tendências

46. Dashboard is dead, long live to side
navigation!

47. #Dashboard
Dashboard utiliza ícones e Label.
Problemas:
Falta de clareza no tipo de conteúdo que cada ícone apresenta.
Primeiro contato do usuário com o app não traz nenhum
conteúdo relevante.

48. #Dashboard

49. #SideNavigation
Características de side navigation:
Espera-se que seja menos usada, dando enfoque ao conteúdo
do aplicativo
Demais áreas do aplicativo não são tão importantes quanto à
inicial.

50. #SideNavigation

51. Abuse de thumbnails grandes!

52. Conteúdo sempre em primeiro
lugar.

53. Integração entre diferentes tipos de
serviços e conteúdos.

54. Aplicação da
MARCA

55. Marca Vs Conteúdo
Sua marca pode causar efeitos
indesejados na experiência do usuário?

56. #SplahScreen
Splashscreens são
usadas para
simular
velocidade, não
são outdoors.

57. #SoluçõesEfetivas
A simplicidade é a melhor saída!
Logo com segurança:
Na Home
Dashboard
Áreas cujo conteúdo esteja extremamente
relacionado à marca.

58. #ElementosGráficos
A linguagem visual de sua marca
pode ser reproduzida em
elementos de interface do
aplicativo

59. #BoasAplicações

60. #BoasAplicações

61. #BoasAplicações

62. #BoasAplicações

63. #BoasAplicações

64. Cases

65. Bons exemplos

66. #Path

67. #Flipboard

68. #Evernote

69. #CaixaemLondres

70. #Fail

71. #Instagram
Android

72. Dicas e
considerações

73. #Projetos precisam ser
planejados, construídos, testados,
enviados e aprovados.

74. #Nunca planeje/encomende/
desenvolva algo “Urgente”.

75. #Um usuário instala somente o
que quer.

76. #Pensar menos em publicidade e
mais em funcionalidade.

77. #Mais uma vez: a interface gráfica
do seu projeto não é um poster.

78. Por fim...
Interface mal executada =
usuário insatisfeito =
publicidade ruim para a
marca.

79. Por fim...
Interface mal executada =
usuário insatisfeito =
publicidade ruim para a
marca.

80. Por fim...
Não há o por que de uma
interface, se não houver
aplicativo. Não há
aplicativo sem funções
recursos definidos.

81. Por fim...
Não há um bom projeto
sem uma ligação lógica
entre ambos.

82. Obrigado :)
@AlexIvonika / facebook.com/alexivonika