O documento resume três tópicos principais sobre experiência do usuário: 1) Fluxo de usuário - descreve como modelar as ações que os usuários tomam para atingir seus objetivos; 2) Design de navegação - discute estilos de navegação e como guiar os usuários de forma intuitiva; 3) Design Thinking - apresenta uma abordagem colaborativa e centrada no usuário para resolver problemas de forma criativa.

1. User Experience
Parte 2

2. Tópicos
Design de navegação
Design Thinking
Quadro resumo
Fluxo de usuário1
2
3
4

3. Fluxo de
usuário1

4. O que é?
É uma série de ações que os usuários
executam até chegar em seu objetivo
Fluxo de
usuário

5. Perguntas essenciaisFluxo de
usuário 1. Quem é o usuário?
2. Qual seu objetivo?
3. Qual são os passos que o usuário
precisa precisa tomar para chegar em
seu objetivo?

6. É uma ferramenta de comunicação entre
o designer e o usuário
Fluxo de
usuário
Por que é importante?

7. Fluxo de
usuário
E como aparenta ser?

8. Quanto mais opções e caminhos
diferentes mais fluxos. Por isso a
resposta para a pergunta é:
Fluxo de
usuário
Quantos fluxos um app pode ter?
Depende do tamanho do app.

9. Fluxo de
usuário
Fluxo de tarefas (task flow)
Série de passos que levam o usuário até
o objetivo. Eles são apresentados de
maneira escrita
Usuário
digita
número
Usuário
escolhe
criar um
novo
contato
Usuário
preenche as
informações
do novo
contato

10. Fluxo de
usuário
Fluxo de tarefas (task flow)
Série de passos que levam o usuário até
o objetivo. Eles são apresentados de
maneira escrita
Dica:
Olhar apps similares para saber se as
tasks flows estão boas ou não

11. Fluxo de
usuário
Wireflow
Lembra o fluxo de tarefas, porém já
temos um rascunho da tela
número
Adicionar número Adicionar número
adicionar
cancelar
criar novo
Foto
Nome
Sobrenome

12. Fluxo de
usuário
Boas práticas
Quando for fazer um fluxo de tela
sempre dizer o que ele faz no titulo

13. Fluxo de
usuário
Boas práticas
número
Adicionar número Adicionar número
adicionar
cancelar
criar novo
Foto
Nome
Sobrenome
Criar novo contato a partir de número

14. Fluxo de
usuário
Boas práticas
Quando for fazer um fluxo de tela
sempre dizer o que ele faz no titulo
O fluxo deve seguir apenas um único
sentido, de preferência da esquerda para
a direita

15. Fluxo de
usuário
Boas práticas
número
Adicionar número Adicionar número
adicionar
cancelar
criar novo
Foto
Nome
Sobrenome
cancelar
Criar novo contato a partir de número
Cíclico e confuso

16. Fluxo de
usuário
Boas práticas
número
Adicionar número Adicionar número
adicionar
cancelar
criar novo
Foto
Nome
Sobrenome
cancelar
Criar novo contato a partir de número
Sentido único: Simples

17. Fluxo de
usuário
Boas práticas
Quando for fazer um fluxo de tela
sempre dizer o que ele faz no titulo
O fluxo deve seguir apenas um único
sentido, de preferência da esquerda para
a direita
Cada fluxo representa uma tarefa
completa

18. Fluxo de
usuário
Mais informações:
1
https://bit.ly/2WLCxpn

19. 2 Design de
navegaçã .

20. No fluxo de usuário vimos como projetar
o caminho do usuário
No design de navegação veremos como
definir a melhor maneira de navegar
Iremos utilizar o que está escrito no guia
de design da Apple
De novo??Design de
navegaçã

21. número
Adicionar número Adicionar número
adicionar
cancelar
criar novo
Foto
Nome
Sobrenome
cancelar
Criar novo contato a partir de número
Relembrando do fluxo do telefone
Exemplo:Design de
navegaçã

22. Relembrando do fluxo do telefone
Exemplo:Design de
navegaçã
Adicionar número
adicionar
cancelar
criar novo
Como essa
navegação será feita?

23. Relembrando do fluxo do telefone
Exemplo:Design de
navegaçã
OU ?

24. “ Seu trabalho é implementar a
navegação de uma maneira que suporte
a estrutura e o objetivo do seu aplicativo
sem chamar a atenção para si mesmo. ”
Por que?Design de
navegaçã
Apple Human Interface Guidelines —

25. Existem três:
- Hierárquico
- Plano
- Guiado pela experiência
Estilos de navegação no iOSDesign de
navegaçã

26. Uma escolha leva à uma tela. Para tentar
outro caminho você precisa “desfazer" a
interação anterior
Estilo HierárquicoDesign de
navegaçã

27. No iOS, encontramos esse estilo nas
barras de navegação
Estilo HierárquicoDesign de
navegaçã
A barra de navegação
possui controles como
botões de voltar, por
exemplo

28. Esse estilo é recomendado quando
temos telas que seguem uma sequência.
Porém cuidado com a quantidade de
telas em uma sequência, pois pode
ficar cansativo!!!
Estilo HierárquicoDesign de
navegaçã

29. É possível alternar entre telas de diferentes
conteúdos sem perder o estado da tela
Estilo Plano (Flat)Design de
navegaçã

30. No iOS, encontramos esse estilo na
barra de abas ou barra de guias
Design de
navegaçã
Uma barra de abas
permite rápida navegação
entre categorias diferentes
independente da
localização atual.
Estilo Plano (Flat)

31. Esse estilo é recomendado quando
temos várias categorias diferentes.
Lembre-se de que o usuário pode
mudar de categoria a qualquer hora.
Falaremos de um problema relacionado a
isso mais tarde!
Design de
navegaçã
Estilo Plano (Flat)

32. A navegação é determinada pelo
conteúdo ou é feita livremente
Guiado pela experiênciaDesign de
navegaçã

33. Esse estilo é muito utilizado em jogos mas
também pode aparecer em utilitários
Design de
navegaçã
Funciona quase como uma
navegação customizada,
por isso, exige extra
atenção !
Guiado pela experiência

34. Normalmente os estilos de navegação se
misturam entre si.
Estilos de navegação no iOSDesign de
navegaçã
Lembra que o usuário pode
mudar de aba sempre que ele
quiser?
E se você quiser evitar isso
quando adicionar um número
novo?

35. Auxiliam os estilos de navegação.
Alguns deles:
- Alertas
- Folha de ação
- Navegação modal
Navegação auxiliarDesign de
navegaçã

36. AlertasDesign de
navegaçã Alertas mostram
informações importantes
sobre o estado do
aplicativo.

37. Folhas de açãoDesign de
navegaçã Um estilo de alerta que
aparece em resposta a
uma ação do app. A
folha de ação possui
opções relacionadas ao
contexto.

38. Navegação modalDesign de
navegaçã Mostra um conteúdo de
modo temporário,
separado do contexto
atual e requer uma ação
explicita para retornar.

39. Mais informações:
2
https://apple.co/2Cf6RiE
Design de
navegaçã .

40. Design
Thinkin3

41. O que é?Design
Thinkin É uma maneira de resolver problemas de
maneira colaborativa, criativa e crítica
Soluções criativas focadas nas
necessidades reais do mercado e não
em pressuposições estatísticas.

42. Por que?Design
Thinkin Focar em necessidades do mercado
aumenta a chances de sucesso de um
produto pois busca soluções em
pontos de vistas inexplorados.

43. EtapasDesign
Thinkin
Imersão
Ideação
Prototipação
Desenvolvimento
As etapas podem
ir e voltar

44. ImersãoDesign
Thinkin Nessa etapa o objetivo é entender o
problema.
Para isso é necessário pesquisar sobre,
conversar com pessoas afetadas por ele,
observar como o problema está sendo
resolvido por outras empresas etc

45. IdeaçãoDesign
Thinkin Após entender o problema, é hora de
todo mundo sentar e conversar sobre
ideias e maneiras de solucionar o
problema.
Utilize as vantagens do Brainstorming

46. BrainstormingDesign
Thinkin Como ter mais clientes?
publicidade promoção
facilitar a entrega
produtos diferentes
facilitar o pagamento
Depois filtrar

47. PrototipaçãoDesign
Thinkin Agora que você tem ideia de como
resolver o problema, é necessário
verificar se as ideias são válidas
Para isso, produzimos um protótipo.
Em várias ocasiões, também usamos um
mvp (Minimum Viable Product)

48. DesenvolvimentoDesign
Thinkin Essa é a última parte, feito após todos
os passos. É aqui que o software será
desenvolvido…

49. Lembrem-seDesign
Thinkin Essa abordagem não segue uma
sequência linear.
Pode-se e deve-se ir e voltar os passos
para uma ou mais funcionalidades.

50. Mais informações:
3
https://bit.ly/2WNnfQZ
Design
Thinkin
https://bit.ly/2JTqoJE

51. Quadro Resumo
Design ThinkingFluxo de usuário Design de navegação
É uma série de
ações que os
usuários executam
até chegar em seu
objetivo
Estilos de navegação no iOS:
- Hierárquico
- Plano
- Guiado pela experiência
Navegação Auxiliar:
- Alertas
- Folha de ação
- Navegação modal
Passos:
- Imersão
- Ideação
- Prototipação
- Desenvolvimento

52. Fim ~
Boa prova ❤