Aula 3 - Design de Sistemas Interativos

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Design de sistemas Interativos
Linguagem de Programação Visual
Prof. Thiago Meirelles Ventura
UFMT – IC – 2013/2
Introdução
A forma de interagir com os sistemas mudou
Introdução
A forma de interagir com os sistemas mudou
Introdução
A forma de interagir com os sistemas mudou
Introdução
A forma de interagir com os sistemas mudou
Introdução
A forma de interagir com os sistemas mudou
Introdução
A forma de interagir com os sistemas mudou
Logo, a forma de projetar e desenvolver sistemas também mudou.
Introdução
O design de sistema interativo tem como objetivo fazer com que o produto:
Seja fácil de usar
Realize o que deve ser feito
Acrescente valor ao usuário
Introdução
Temos sempre que ter em mente que há diferentes tipos de produtos:
sistemas tradicionais
sites
jogos
aplicativos diversos
...
Em diferentes tipos de plataformas:
computador
smartphone
projetores
...
Introdução
Independente do tipo do produto ou da plataforma, uma coisa sempre deve ser levado em consideração:
Foco nas pessoas
IHC
Interação humano-computador
11
IHC
Interface
São todas as partes do sistema com que as pessoas tem contato (física, perceptiva ou conceitualmente).
12
IHC
Interface
São todas as partes do sistema com que as pessoas tem contato (física, perceptiva ou conceitualmente).
Interação apertando botões, movimentando componentes, etc.
13
IHC
Interface
São todas as partes do sistema com que as pessoas tem contato (física, perceptiva ou conceitualmente).
O dispositivo exibe algo em uma tela ou emite sons.
14
IHC
Interface
São todas as partes do sistema com que as pessoas tem contato (física, perceptiva ou conceitualmente).
Fornece mensagens e outros indicadores para que o usuário perceba o que ele deve fazer e o que o sistema estava fazendo.
15
IHC
Interface
I N T E R F A C E
PROCESSAMENTO
sons
textos
imagens
vibrações
toque
movimento
teclado
mouse
16
IHC
O design de sistemas interativos não se trata apenas de interfaces.
A interação humano-computador também deve ser levado em consideração.
IHC
Foco nas pessoas
Pensar no que as pessoas querem fazer em vez do que a tecnologia pode fazer
Projetar novas maneiras de conectar pessoas
Envolver as pessoas no processo de design
Projetar para a diversidade
Projetar sistemas que favoreçam as pessoas e dos quais elas possam usufruir
Usabilidade
O bom design consiste em usabilidade
Usabilidade
Os sistemas devem ser:
Fáceis de usar
Fáceis de aprender
Flexíveis
Acessíveis
Usabilidade
Usabilidade
Tente fazer sistemas que sejam:
Eficientes: as pessoas fazem coisas com menos esforços
Eficazes: conterá funções e conteúdos adequados e organizados
Fáceis: rápido aprendizado
Seguros: funciona em diferentes contextos
Alto grau de utilidade: fará as coisas que as pessoas querem que sejam feitas.
Usabilidade
Princípios de design
Visibilidade
Consistência
Familiaridade
Clareza
Navegação
Controle
Feedback
Recuperação
Restrições
Flexibilidade
Estilo
Sociabilidade
Design
E como aplicar as teorias de IHC e usabilidade no design de um sistema?
Design
O software precisa ser 
concebido, especificado e prototipado.
Design
Especificação mínima de um sistema.
Conjunto de documentos de especificação.
Descrição abstrata do sistema.
Design Conceitual
Design Físico
Preocupa-se com as estruturas existente no sistema.
Como os componentes se comportarão.
Aparência dos artefatos.
Design
UML
Unified Modelling Language - Linguagem de Modelagem Unificada
Design
UML
Unified Modelling Language - Linguagem de Modelagem Unificada
Especificação de requisitos
I. Introdução
II. Descrição da Informação
III Descrição Funcional
IV. Descrição Comportamental
V. Critérios de Validação
Design
UML
Unified Modelling Language - Linguagem de Modelagem Unificada
Design
UML
Unified Modelling Language - Linguagem de Modelagem Unificada
Design
UML
Unified Modelling Language - Linguagem de Modelagem Unificada
Projeto de interface
Para que o usuário possa utilizar o sistema com sucesso ele deve saber quais as funções da aplicação são oferecidas pelo sistema e como ele pode interagir com cada uma delas.
Projeto de interface
Protótipo de projeto
Protótipo executável
Projeto de interface
Paradigmas de interação
Linguagens de comandos
Menus
Linguagem natural
Preenchimento de formulário
Manipulação direta
WIMP (Windows, Icons, Menus e Pointers)
Projeto de interface
Cuidados ao projetar uma interface
Familiaridade com o usuário
Consistência
Mínimo de surpresa
Facilidade de recuperação
Orientação para o usuário
Diversidade de usuário
Projeto de interface
Protótipos
Representação ou implementação parcial do design de um sistema
Servem para demonstrar ou testar um conceito
Projeto de interface
Protótipos
Baixa fidelidade
Focados nas ideias do design
Feitos para serem produzidos e descartados rapidamente
Alta fidelidade
Semelhante ao produto final (sem contar a funcionalidade)
Para avaliações detalhadas
Projeto de interface
Protótipos
Ferramentas
Nome
Plataforma
Lumzy
On-line
MockFlow
On-line
MockingBird
On-line
HotGloo
On-line
User Interface Design Framework
Illustrator
UXPin
On-line
Pixle
Lápis e papel
Sneakpeekit
Lápis e papel
Wireframe
On-line
muitas outras....
...
Projeto de interface
Exercício
Nome: recordação familiar
Plataforma: web
O usuário poderá:
Enviar fotos
Adicionar um link do youtube
Escrever um pequeno texto
O sistema deverá:
Mostrar uma linha do tempo com os principais acontecimentos
Permitir a navegação pela linha do tempo
Apresentar os conteúdos enviados