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.

1. <web>DESIGN</web>
UTFPR
DESIGN
GRÁFICO
conceitos gerais de
design de interação
para web
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

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

7. Suborno. Porta dos Fundos.

8. para
pensar
experiências da sua vida
o que te faz
lembrar de
algo?
o que te deixa
com raiva/
frustrado?

9. . Stephen P. Anderson.
http://poetpainter.com/
Alguns fundamentos
“

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

14. Human InterfaceMultitouch Barcelona

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

17. disciplinas

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 é?

19. metas

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

23. metodologia

26. atividades
de hoje
Apresentação dos temas
Discussão
Pesquisa inicial de web referências

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

41. webutfpr.tumblr.com
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.