<web>DESIGN</web>
UTFPR
DESIGN
GRÁFICO
conceitos gerais de
design de interação
para web
MATERIAL DE APOIO da Profa. Claudi...
2
O que é experiência?
Design de Interação serve para?
Metodologia web UxD
teoria de hoje
definindo
A lenda dos monges cegos
Imagem: Wikimedia Commons.The Blind Monks and the Elephant. (1652–1724). MATERIAL DE APO...
definindo
"The Blind Men and the Elephant" de John Godfrey Saxe (1816–1887).. MATERIAL DE APOIO da Profa. Claudia Bordin Ro...
definindo
. MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
experiência
Ari...
. MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
É o contato perceptual, ...
Suborno. Porta dos Fundos.
para
pensar
experiências da sua vida
o que te faz
lembrar de
algo?
o que te deixa
com raiva/
frustrado?
. Stephen P. Anderson.
http://poetpainter.com/
Alguns fundamentos
“
"The Blind Men and the Elephant" de John Godfrey Saxe (1816–1887).. MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues S...
definindo
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
interação
Vygostk...
Human InterfaceMultitouch Barcelona
para
pensar
qual a sua melhor experiência
com uma página web ou
aplicativo/software?
o que te
surpreende?
o que te deixa
c...
Interfaces complexas e Interações complexas
O papel do Design (e do designer) como “guia”
Formas de organizar e apresentar...
disciplinas
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:
...
metas
O que acontece na mente?
Perceber
Pensar
Lembrar
Aprender
Entender os outros
Conversar com os outros
Manipular os outros
T...
Preece, Rogers e Sharp (2005, p.35)
“fator que assegura que os produtos sejam
fáceis de usar, eficientes e agradáveis — da...
Norman (2002b, 2004)
Efeitos emotivos positivo e negativo
e suas implicações no uso dos
objetos.
Usabilidade têm ligação a...
metodologia
atividades
de hoje
Apresentação dos temas
Discussão
Pesquisa inicial de web referências
glossário web
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
O que você precisa
saber para fazer
um website?
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja ...
.Do que um website é composto
.Como se planeja a estrutura
.Como se organizam as páginas e
quais as linguagens utilizadas
...
Um website é composto de múltiplos arquivos
também chamados de site assets.
Os arquivos mais comuns são:
Arquivos HTML; Ar...
HyperText Markup Language
HTML
É a linguagem base de marcação de páginas web,
construida por meio de tags (comandos ou ins...
Cascading Style Sheet
CSS
É um arquivo que contém informações que determinam a
aparência dos elementos de uma página web. ...
JavaScript
É uma linguagem de programação que permite controlar
o comportamento (behaviors) da página no navegador
(browse...
Imagens
São arquivos de informação binária, renderizadas
visualmente pelos navegadores. Os arquivos de uso
corrente são o ...
Adobe Flash Files
Flash
É um arquivo de informação binária que é carregado e
apresentado por um plugin chamado Adobe Flash...
Um website também e um elemento de
interface entre as pessoas e algum conteúdo de
informação.
Fazer um website envolve:
En...
Users, stakeholders, interagentes, interatores
Usuários
Para quem se orienta o projeto? Qual a target audience?
Quem faz p...
Planejamento das áreas foco de projeto
Interação
Uma das áreas proeminentes na atualidade que vai
discutir o planejamento ...
Componentes do projeto e funcionalidades
Funções
Serve como etapa de planejamento de áreas de
conteúdo, navegação, estrutu...
Escolha das especificações técnicas do projeto
Tecnologia
Descrição detalhada das específicações técnicas,
escolha das lin...
webutfpr.tumblr.com
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
Introdução a experiência e design de Interação
Introdução a experiência e design de Interação
Introdução a experiência e design de Interação
Introdução a experiência e design de Interação
Próximos SlideShares
Carregando em…5
×

Introdução a experiência e design de Interação

885 visualizações

Publicada em

Material de apoio para a disciplina de Webdesign, UTFPR.

Publicada em: Educação
1 comentário
0 gostaram
Estatísticas
Notas
  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
885
No SlideShare
0
A partir de incorporações
0
Número de incorporações
563
Ações
Compartilhamentos
0
Downloads
1
Comentários
1
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução a experiência e design de Interação

  1. 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. 2 O que é experiência? Design de Interação serve para? Metodologia web UxD teoria de hoje
  3. 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. 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. 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. 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. 7. Suborno. Porta dos Fundos.
  8. 8. para pensar experiências da sua vida o que te faz lembrar de algo? o que te deixa com raiva/ frustrado?
  9. 9. . Stephen P. Anderson. http://poetpainter.com/ Alguns fundamentos “
  10. 10. "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
  11. 11. 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
  12. 12. Human InterfaceMultitouch Barcelona
  13. 13. 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?
  14. 14. 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
  15. 15. disciplinas
  16. 16. 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 é?
  17. 17. metas
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. metodologia
  22. 22. atividades de hoje Apresentação dos temas Discussão Pesquisa inicial de web referências
  23. 23. glossário web MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
  24. 24. 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.
  25. 25. .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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. webutfpr.tumblr.com MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

×