COMUNICAÇÃO DIGITAL E ENSINO

À DISTÂNCIA.

CRP-5215

Aula 09: Wireframes e painéis de controle.

COMUNICAÇÃO DIGITAL.

CRP-0420:

Aula 09: Wireframes e painéis de controle.

PROGRAMA:1. Contexto

2. Emergênciae redes

3. A coisa

4. Ideologias e

Tendências

5. Inteligência Artificial

6. Educação

7. Experiênciado usuário

8. Designde interação

9. Interfaces

10.Design de interfaces

11. Design thinking

12. Código

13. Games

14.Planejamento

estratégico

PARA CASA:Definir o produto digital que definirá

seu trabalho final. Meia página.

CONECTADO. Tudo que puder ser conectado será

E tudo pode ser conectado.

O gênio saiu da garrafa.

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

FÍSICASNovas interfaces

demandam novas expressões idiomáticas.

INTERFACES.Pessoas e coisas se transformam em

Qualquer hardware pode ter acesso à Internet.

DADOS.Objetos físicos se transformam em objetos de

AVATARES DIGITAIS,Objetos físicos agora tem

ou seja, tem personalidades.

EXPERIÊNCIAComo se determina a

do usuário em objetos físicos?

CASEIRAAutomação

ajuda ou atrapalha?

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.

CONTINUIDADE.um problema de

Como dividir ações entre dispositivos se mal conseguimos compartilhar

conteúdos entre eles?

ABISMOComo fazer para transpor o

entre dois equipamentos?

COMPORTAMENTOSSeparação física vs. separação de

MÁQUINAComo mediar a conversa quando uma

fala com outra máquina?

TRANSPARENTEA transição deve ser

senão será exaustiva.

LIMITAMTelas nos

e se tornaram a maior parte do computador.

PESSOAS,O design deve ser feito para ser usado por

não telas.

MOUSE?

pergunta errada: como fazer o produto se

comportar como um

Ou com os sistemas que já conhecemos?

ESCALÁVELSoftware torna o hardware

se for potencializado por seu usuário.

IMAGINAÇÃO,O maior desafio é de

não de conhecimento.

INVENTARa melhor maneira de

é brincar.

Os melhores brinquedos e jogos são pouco familiares.

IMAGINAÇÃO.Brinquedos são avatares da

Eles precisam evoluir com seus donos

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.

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.

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.

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

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.

TOUCHSCREENS E TOUCHPADS

As comuns em tablets e smartphones. Touchpads

começam a substituir mouses por seu maiorconforto e precisão.

COMMAND LINE INTERFACES (CLI)

Linhas de comando, usadas para desenvolver código.

GESTUAIS, HÁPTICAS E TANGÍVEIS

Dependentes de gestos. Podem responder ao toque,

identificar movimentos ou responder a pressões.

INTERFACES DE ATENÇÃO

Chamam a sua atenção. Só devem ser usadas em

ocasiões importantes, senão serão irritantes.

INTERFACES MISTAS Comandos de diversos tipos,

usadas para operações complexas.

INTERFACES DE PROCESSOS

Pouco interativas. Avisam quando o processo acabou.

AGENTES CONVERSACIONAIS

De Clippy a Siri.

ESPACIAIS

Determinam fronteiras. Usadas em museus e lojas.

GEOLOCALIZADASReorganizam suas coordenadas

de acordo com a posição do usuário.

RECONHECIMENTODE VOZ E DE

LINGUAGEM NATURAL

Compreensão de comandos e frases comuns.

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.

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

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

QUANTIDADEComece com uma grande

de ideias. A qualidade vem com o tempo.

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

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.

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.

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

FIM