O documento discute interfaces digitais e como elas diferem de interfaces físicas. As interfaces digitais são dinâmicas e mutáveis, podem usar interatividade, multimídia e hipertextualidade. O documento também discute como os sensores em dispositivos móveis como smartphones podem ser usados, dividindo-os em quatro categorias: tátil, óptico, de nível e de localização. Por fim, pede aos alunos que projetem uma "interface digital" para um controle remoto de TV smart explorando funcionalidades em cada uma das categorias de

1. Aula 4
Interface digital

2. Interface

3. Interface
O que é interface?

4. Interface
SISTEMA

5. Interface
SISTEMA
UTILIZADOR
DO SISTEMA

6. Interface
SISTEMA
INTERFACE
UTILIZADOR
DO SISTEMA

7. Interface
SISTEMA
INTERFACE
UTILIZADOR
DO SISTEMA
ENTRADA
SAÍDA

8. Interface O automóvel
é um sistema!

9. Interface Interface do
automóvel

10. Interface
Esta aqui
é uma boa
interface?

11. Interface
E esta aqui,
é melhor?
Por quê?

12. Interface
x
A interface melhorou? Está mais eficiente?

13. Interface
Posso colocar esta interface mais
eficiente no meu sistema mais antigo?

14. Interface
Antes de desenhar
uma interface, é
preciso conhecer
as funcionalidades
do sistema!
x

15. ATIVIDADE!

16. ATIVIDADE
Desenvolver uma interface
para um controle remoto
de uma televisão Smart TV

17. ATIVIDADE
Funcionalidades do sistema:
> Liga / Desliga
> Volume
> Canal
> Configurações
> Fonte de Entrada (Antena / Cabo / HDMI / USB)
> Info (informações sobre o atual canal)
> Guia (mostra programação do canal)
> Modo Internet:
Escolher/Abrir aplicativo, Navegar na internet

18. Interface

19. Interface
Qual é o
melhor
controle
remoto?

20. Interface
Interface física
ANTES:

21. Interface
Interface física
ANTES:
Interface digital
AGORA:

22. Interface
digital

23. Interface digital
Observe as diferenças entre:
> Interface física
> Interface digital

24. Interface digital
Observe as diferenças entre:
> Interface física = é um hardware
> Interface digital = é um software

25. Interface digital
Interface física
> É um hardware
> Tem composição fixa, imutável

26. Interface digital
Interface digital
> É dinâmica, mutável, se atualiza

27. Interface digital
Interface digital
> É dinâmica, mutável, se atualiza
> Aproveita o processamento (CPU)

28. Interface digital
Interface digital
> É dinâmica, mutável, se atualiza
> Aproveita o processamento (CPU)
- pode usar interatividade
- pode usar multimidialidade
- pode usar hipertextualidade

29. Interface digital
Interface digital
> É dinâmica, mutável, se atualiza
> Aproveita o processamento (CPU)
- pode usar interatividade
- pode usar multimidialidade
- pode usar hipertextualidade
- (...) entre outras possibilidades
oferecidas pelo hardware

30. Hardware dos
dispositivos
móveis

31. Hardware
Hardware dos smartphones

32. Hardware
Hardware dos smartphones
> Poder de processamento (CPU)

33. Hardware
Hardware dos smartphones
> Poder de processamento (CPU)
> Saídas (tela, caixa de som...)

34. Hardware
Hardware dos smartphones
> Poder de processamento (CPU)
> Saídas (tela, caixa de som...)
> Entradas
- Microfone
- Câmera
- ... quais mais?

35. Hardware
Hardware dos smartphones
> Poder de processamento (CPU)
> Saídas (tela, caixa de som...)
> Entradas
- Microfone
- Câmera
- ... quais mais? --> SENSORES!

36. Hardware

37. Hardware
Como podemos usar
estes sensores?
Quais suas
funcionalidades?

38. Hardware
Quatro categorias de funcionalidades:
> Tactilidade
> Opticabilidade
> Nivelabilidade
> Localibilidade

39. Hardware
Tactilidade
Opticabilidade
Nivelabilidade
Localibilidade
Toques
Interação
Manejo de objetos
Uso da câmera
Realidade aumentada
QR Code
Acelerômetro
Sensor de posicionamento
Movimentos gravitacionais
GPS
Localização
Georreferenciação

40. ATIVIDADE!

41. ATIVIDADE
Voltando ao controle
remoto da TV...

42. ATIVIDADE
Voltando ao controle
remoto da TV...
O que vocês fariam
se pudessem trocar a
interface física por uma
interface digital?

43. ATIVIDADE
Agora, faça o esboço de um
“controle digital” para uma Smart TV,
mas explorando, ao menos,
uma funcionalidade de cada categoria

44. ATIVIDADE
Agora, faça o esboço de um
“controle digital” para uma Smart TV,
mas explorando, ao menos,
uma funcionalidade de cada categoria
OBSERVAÇÃO: a interface digital é mutável
e interativa, então... desenhe + de 1 tela!!
!

45. DICA
1º) Defina um público-alvo
2º) Liste as necessidades dos usuários
3º) Liste as funcionalidades necessárias
4º) Liste o que precisa ser mostrado 1º
5º) Faça o esboço da tela inicial
6º) Faça os esboços das outras telas
7º) Use a simbologia do wireframe