O documento discute conceitos gerais de design de interação para web. Aborda temas como experiência do usuário, definição de interação, objetivos e metodologias de design de interação, além de atividades propostas como discussão e pesquisa inicial de referências na web.
2. 2
O que é experiência?
Design de Interação serve para?
Metodologia web UxD
teoria de hoje
3. definindo
A lenda dos monges cegos
Imagem: Wikimedia Commons.The Blind Monks and the Elephant. (1652–1724). MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
experiência
“
“
4. definindo
"The Blind Men and the Elephant" de John Godfrey Saxe (1816–1887).. MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
experiência
And so these men of Hindustan
Disputed loud and long,
Each in his own opinion
Exceeding stiff and strong,
Though each was partly in the right
And all were in the wrong.
“
Será?
A lenda dos monges cegos
“
5. definindo
. MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
experiência
Aristóteles sustenta que o que está além de
nossa experiência não pode ser nada para nós.
Encontramos a verdade a
partir das evidências
no mundo a nossa volta
Aristóteles
“
“
Perceptível pelos sentidos
6. . MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
É o contato perceptual, direto e característico com
aquilo que se apresenta a uma fonte cognitiva de
informações.
Epistemologia
“
memória, aprendizado,
imaginação
Não tem relação direta com o conteúdo da experiência.
Evoca repertórios, tradição e subjetividade.
nem é produto dele
dimensões culturais da experiência
9. . Stephen P. Anderson.
http://poetpainter.com/
Alguns fundamentos
“
10.
11.
12. "The Blind Men and the Elephant" de John Godfrey Saxe (1816–1887).. MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
Não é possível controlar a
pois ela depende de sujeitos, contexto e suas
atividades
“
Considerações
“
experiência
Mas...
Objetos, espaços, estímulos (táteis,
visuais, sonoros,...), símbolos, linguagem
(cultura) são elementos de
mediação
13. definindo
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
interação
Vygostky
“
instrumental simbólica
Objetos,
instrumentos,
coisa físicas
Representação,
linguagem e
sentido
artefatos
15. para
pensar
qual a sua melhor experiência
com uma página web ou
aplicativo/software?
o que te
surpreende?
o que te deixa
com raiva/
frustrado?
16. Interfaces complexas e Interações complexas
O papel do Design (e do designer) como “guia”
Formas de organizar e apresentar a 'funcionalidade' do produto
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
o que
faz o Design
18. Preece, Rogers e Sharp (2005, p.26)
Os tipos de usuários, os tipos de atividade e o
contexto de uso.
Design de Interação:
É o design de produtos interativos que
dê suporte as atividades cotidianas
das pessoas, em suas atividades
domésticas e de trabalho.
Sharp, Rogers and Preece (2002)
O design de ‘meios’ para a
comunicação e interação humanas.
Winograd (1997)
o que é?
20. O que acontece na mente?
Perceber
Pensar
Lembrar
Aprender
Entender os outros
Conversar com os outros
Manipular os outros
Tomar decisões
Resolver problemas
Fantasiar
Planejar uma viagem
Imaginar uma viagem
Pintar
Escrever
Compor
cognição
21. Preece, Rogers e Sharp (2005, p.35)
“fator que assegura que os produtos sejam
fáceis de usar, eficientes e agradáveis — da
perspectiva do usuário”
facilidade de aprendizado, eficiência de uso,
facilidade de memorização, segurança e
satisfação subjetiva
(NIELSEN, 1994, p.26).
uso
22. Norman (2002b, 2004)
Efeitos emotivos positivo e negativo
e suas implicações no uso dos
objetos.
Usabilidade têm ligação aos estados de
conforto e deleite estético no uso.
http://www.designemartigos.com.br/resenha/o-design-do-futuro-
donald-a-norman/
uso
27. glossário web
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
28. O que você precisa
saber para fazer
um website?
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
29. .Do que um website é composto
.Como se planeja a estrutura
.Como se organizam as páginas e
quais as linguagens utilizadas
.Como funciona a Internet
30. Um website é composto de múltiplos arquivos
também chamados de site assets.
Os arquivos mais comuns são:
Arquivos HTML; Arquivos CSS; Arquivos
JavaScript; Imagens e Arquivos Flash
1.
glossário web
31. HyperText Markup Language
HTML
É a linguagem base de marcação de páginas web,
construida por meio de tags (comandos ou instruções).
O html estático geralmente tem extensão de arquivo .htm
ou .html, mas pode ser gerado automaticamente por uma
aplicação do tipo PHP (que neste caso, gera um arquivo
de extensão .php)
glossário web
32. Cascading Style Sheet
CSS
É um arquivo que contém informações que determinam a
aparência dos elementos de uma página web. A extensão
do arquivo é .css.
glossário web
33. JavaScript
É uma linguagem de programação que permite controlar
o comportamento (behaviors) da página no navegador
(browser), criando comunicação dinâmica para o website.
Um código Javascript pode estar dentro de um arquivo
de extensão .html ou fora dele, com extensão .js.
glossário web
34. Imagens
São arquivos de informação binária, renderizadas
visualmente pelos navegadores. Os arquivos de uso
corrente são o JPG (utilizado para informação
fotorrealística – fotografia com muitas cores), GIF (para
imagens de tons contínuos) e PNG (para ambos os tipos
de imagens).
GIF e PNG suportam fundo transparente, JPG não.
glossário web
35. Adobe Flash Files
Flash
É um arquivo de informação binária que é carregado e
apresentado por um plugin chamado Adobe Flash Player.
Os arquivos flash suportam animações de alta qualidade,
som, vídeos, objetos 3D e outras possibilidades que vão
além das capacidades de um navegador web.
glossário web
36. Um website também e um elemento de
interface entre as pessoas e algum conteúdo de
informação.
Fazer um website envolve:
Entender os usuários; descrever as funções do
site; descrever especificações técnicas;
explorar o design; executar o projeto; testar e
implementar
2.
glossário web
37. Users, stakeholders, interagentes, interatores
Usuários
Para quem se orienta o projeto? Qual a target audience?
Quem faz parte das decisões de projeto?
Geralmente esta etapa envolve:
O dono ou responsável pela empresa/serviço; o
responsável pela área de tecnologia da informação; o
designer gráfico e webmaster (as vezes na mesma
pessoa, outras não); o programador para banco de
dados/implementação.
glossário web
38. Planejamento das áreas foco de projeto
Interação
Uma das áreas proeminentes na atualidade que vai
discutir o planejamento da interação de um website é o :
Design de Interação
cujo objetivo é dar suporte as atividades dos usuários por
meio de experiências de uso que considerem o indivíduo
de modo global (sua cultura, fisiologia e biologia,
sociedade...)
glossário web
39. Componentes do projeto e funcionalidades
Funções
Serve como etapa de planejamento de áreas de
conteúdo, navegação, estrutura de páginas e interações.
Essa etapa as vezes é chamada de arquitetura* da
informação e é feita por vários meios de representação,
tais como: mapeamentos, esquemas, árvores
hierárquicas, organogramas, storyboards de interação,
diagramas, etc..
glossário web
40. Escolha das especificações técnicas do projeto
Tecnologia
Descrição detalhada das específicações técnicas,
escolha das linguagem e suportes utilizados (banco de
dados, aplicativos webserver, infraestrutura servidor,
hospedagem), compatibilidade com navegadores, etc...
glossário web