1.
CRP-5215
COMUNICAÇÃO DIGITAL
E ENSINO
À DISTÂNCIA.
Aula 09: Wireframes e painéis de controle.

2.
CRP-0420:
COMUNICAÇÃO
DIGITAL.
Aula 09: Wireframes e painéis de controle.

3.
PROGRAMA:
1. Contexto
2. Emergência
e redes
3. A coisa
4. Ideologias e
Tendências
5. Inteligência Artificial
6. Educação
7. Experiência
do usuário
8. Design
de interação
9. Interfaces
10.Design de interfaces
11. Design thinking
12. Código
13. Games
14.Planejamento
estratégico

4.
PARA CASA:
Definir o produto digital que definirá
seu trabalho final. Meia página.

5.
Tudo que puder ser conectado será
CONECTADO.
E tudo pode ser conectado.
O gênio saiu da garrafa.

6.
A nova barreira: entre o digital e o
FÍSICO.

7.
Novas interfaces
FÍSICAS
demandam novas expressões idiomáticas.

8.
Pessoas e coisas se transformam em
INTERFACES.
Qualquer hardware pode ter acesso à Internet.

9.
Objetos físicos se transformam em objetos de
DADOS.

10.
Objetos físicos agora tem
AVATARES DIGITAIS,
ou seja, tem personalidades.

11.
Como se determina a
EXPERIÊNCIA
do usuário em objetos físicos?

12.
Automação
CASEIRA
ajuda ou atrapalha?

13.
Divisão de
TAREFAS:
• O usuário realizará tarefas com maior facilidade
se dividir ações complexas em tarefas menores.
• Os desafios devem ser do tamanho apropriado
• Indicações de progresso são estimulantes
• Conquistas são motivadoras.

14.
um problema de
CONTINUIDADE.
Como dividir ações entre dispositivos
se mal conseguimos compartilhar
conteúdos entre eles?

15.
Como fazer para transpor o
ABISMO
entre dois equipamentos?

16.
Separação física vs. separação de
COMPORTAMENTOS

17.
Como mediar a conversa quando uma
MÁQUINA
fala com outra máquina?

18.
A transição deve ser
TRANSPARENTE
senão será exaustiva.

19.
Telas nos
LIMITAM
e se tornaram a maior parte do computador.

20.
O design deve ser feito para ser usado por
PESSOAS,
não telas.

21.
pergunta errada: como fazer o produto se
comportar como um
MOUSE?
Ou com os sistemas que já conhecemos?

22.
Software torna o hardware
ESCALÁVEL
se for potencializado por seu usuário.

23.
O maior desafio é de
IMAGINAÇÃO,
não de conhecimento.

24.
a melhor maneira de
INVENTAR
é brincar.
Os melhores brinquedos e jogos
são pouco familiares.

25.
Brinquedos são avatares da
IMAGINAÇÃO.
Eles precisam evoluir com seus donos

26.
Interação humano-computador ou
HCI:
• Estudo, planejamento e concepção de formas de
interação entre as pessoas e computadores.
• Intersecção de ciência da computação, ciências
do comportamento, design e estudos de mídia.
• Ao contrário de outras ferramentas com usos só
limitados (como um martelo), um computador
tem muitas variações (e tolerâncias) de uso, o
que cria um diálogo aberto e infinito.

27.
HCI: OBJETIVOS
• Tornar máquinas mais amigáveis. Usa:
• metodologias e processos de design de
interfaces e sua implementação
• técnicas para avaliar e comparar interfaces
• desenvolvimento de modelos e teorias de
interação descritivos e preditivos
• A meta de longo prazo da HCI é projetar
sistemas que minimizem a barreira entre o
modelo mental do usuário e a máquina.

28.
Avaliação de
INTERFACES:
• Clareza: evita ambiguidades
• Concisão: usa poucos elementos
• Familiaridade: tem pequena curva de aprendizado
• Feedback: oferece respostas adequadas
• Consistência: Identifica padrões de uso
• Estética: torna a experiência agradável
• Eficiência: acelera a realização de tarefas
• Tolerância: evita punir usuários por seus erros,
fornecer meios para saná-los.

29.
Tipos de
INTERFACES:
• Graphical user interfaces (GUI) e Web-based (WUI)
• Touchscreens e touchpads
• Command line interfaces (CLI)
• Gestuais, hápticas e tangíveis
• Interfaces de atenção
• Interfaces Mistas
• Interfaces de processos
• Agentes conversacionais
• Espaciais - saídas de lojas, museus
• Geolocalizadas
• Reconhecimento de voz e de linguagem natural

30.
GRAPHICAL USER
INTERFACES (GUI) E
WEB-BASED (WUI)
As mais populares, usadas em PCs, tablets e
smartphones. WUIs são geradas automaticamente,
como acontece com extratos bancários.

31.
TOUCHSCREENS E
TOUCHPADS
As comuns em tablets e smartphones. Touchpads
começam a substituir mouses por seu maior
conforto e precisão.

32.
COMMAND LINE
INTERFACES (CLI)
Linhas de comando, usadas para desenvolver código.

33.
GESTUAIS, HÁPTICAS E
TANGÍVEIS
Dependentes de gestos. Podem responder ao toque,
identificar movimentos ou responder a pressões.

34.
INTERFACES DE
ATENÇÃO
Chamam a sua atenção. Só devem ser usadas em
ocasiões importantes, senão serão irritantes.

35.
INTERFACES MISTAS
Comandos de diversos tipos,
usadas para operações complexas.

36.
INTERFACES DE
PROCESSOS
Pouco interativas. Avisam quando o processo acabou.

37.
AGENTES
CONVERSACIONAIS
De Clippy a Siri.

38.
ESPACIAIS
Determinam fronteiras. Usadas em museus e lojas.

39.
GEOLOCALIZADAS
Reorganizam suas coordenadas
de acordo com a posição do usuário.

40.
RECONHECIMENTO
DE VOZ E DE
LINGUAGEM NATURAL
Compreensão de comandos e frases comuns.

41.
FLUXOGRAMA:
• Representação esquemática de processos,
ilustrando de forma descomplicada sua
sequência operacional: o trabalho que está sendo
realizado, o tempo necessário para a realização, a
trajetória dos documentos, interações do usuário.

42.
PROTOTIPAÇÃO:
• Reduz interpretações equivocadas
• Proporciona experiências reais
• Gera novas experiências
• Comunica seus objetivos ao mostrar e contar
• Economiza tempo, esforço e dinheiro
• Facilita o feedback rápido
• Reduz o risco

43.
Finalidades mais comuns de
PROTÓTIPOS:
• Criar comunicação compartilhada
• Trabalhar com projetos comuns
• Vender ideias internamente e para clientes
• Testar interações e usabilidade
• Aferir de viabilidade técnica e valor

44.
Comece com uma grande
QUANTIDADE
de ideias. A qualidade vem com o tempo.

45.
Painéis de
CONTROLE:
• Apresentam as informações mais importantes,
necessárias para atingir os objetivos
• São gráficos não pela beleza, mas para facilitar
a compreensão, manipulação e contexto.
• Devem determinar prioridades, consolidar e
organizar a informação em uma única tela,
para que seja facilmente monitorada
• Nem todas as informações são quantificáveis

46.
Erros
COMUNS:
• Exceder os limites de uma tela (scroll)
• Falta de contexto
• Excesso de detalhes
• Mídias inadequadas
• Tela congestionada
• Decoração inútil
• Mau uso de cor
• Métricas ruins
• Dados desorganizados
• Codificação imprecisa
Só esses elementos
são técnicos.

47.
Planejamento estrutural:
WIREFRAMES
• Não são rascunhos do layout final.
• Como plantas baixas de arquitetura,
intermediários entre a técnica e a comunicação.
• Criam argumentos racionais para a discussão do
layout, aumentando a usabilidade e consistência.
• Começam simples, se tornam mais detalhados à
medida que aumenta sua funcionalidade.

48.
Construindo
WIREFRAMES:
1. Deixe o objetivo bem claro
2. Seja funcional, não bonito
3. Tenha o mínimo de elementos
4.Desenhe todas as ações
5. Organize-o por personas
6.Procure elementos repetitivos
7. Teste hierarquias e sentido

49.
FIM