Escolar Documentos
Profissional Documentos
Cultura Documentos
Hipermdia e interfaces
Processos de projeto
Tendncias
Digitalizao
Dos meios de produo (criamos contedo atravs de): word, powerpoint,
excel, photoshop, web) Dos suportes (lugares onde guardamos o contedo produzido): pendrives, DVDs, HDs, CDs, discos virtuais, disquetes... Dos processos: (executamos tarefas com o auxlio de): cartes eletrnicos, home-banking, celular, microondas, etc.
Computadores (CMC)
Tecnologias da Informao e da
Comunicao (TICs)
O computador realiza operaes. Essa faceta de mquina de processar, calcular, buscar resultados fundamental para pensarmos a Internet.
Professor at the Visual Arts Department, University of California - San Diego (UCSD).
2008
2001
idia de tela.
continuidades e desafios em
relao tradio da tela? McLuhan e Remidiation.
Genealogia da tela.
Classical Screen A cultura visual do perodo moderno
caracterizada por um intrigante fenmeno a existncia de um outro espao virtual, um outro mundo tridimensional fechado por uma moldura e situado dentro do nosso espao normal.
completo da tela pela imagem, descarte do espao ao redor da tela pelo foco que a
mesma requisita. Imerso.
no radar.
Inovao ligada a tecnologias de controle, espionagem, mapeamento, segurana (militares): monitor de vdeo, tela de computador, controles.
radar
Ao contrrio da fotografia
e do cinema (imagens estticas, ou imagens estticas em seqncia), vemos pela 1 vez uma tela cuja imagem pode mudar em tempo real, mostrando mudanas no referente (posio de objeto, live vdeo ou mudana nos dados do computador).
em apenas uma imagem. Blocos de dados de texto, imagem, vdeo sugerem que a tela do computador tem mais a ver com design grfico e janelas.
Tela interativa
A informao processada passa a ser representada na tela de tempo real: lugar de inserir e retirar informao de um computador.
Ao mudar algo
Clssica
Dinmica
A tela e o corpo
A tela representa uma relao entre o espao
A tela funcionaria como um cofre em uma parede, no qual o visvel foi depositado.
conduziriam depois ao cinema requisita que o espectador se aprisione para - imvel assistir imagens.
mundo estvel e esttico (fotografias iniciais) para a aventura da viagemcom a imagem em movimento, ainda que aprisionados.
cabea do usurio. Para olhar no espao virtual preciso olhar no espao fsico. O usurio precisa trabalhar (jogar?) para ver (lembrando o funcionrio de Flusser).
fundiam-se com a arquitetura e o real enquanto as telas da pintura em diante reforavam a representao (e pediam a mobilidade do espectador). A tradio da simulao, portanto, anterior s telas digitais (museus de cera, naturalismo, realismo, etc).
que nos aprisionam conosco: a retina e tela vo se fundir. Mas ainda vivemos na sociedade da tela achatada, retangular que participa do nosso espao como uma janela para outro lugar, a sociedade da tela.
REMIDIAO
Jay Bolter
Jay David Bolter (born
August 17, 1951) is the Wesley Chair of New Media and a professor in the School of Literature, Communication and Culture at the Georgia Institute of Technology.
Richard Grusin
Richard Grusin is a
http://premediation.blogspot.com/
Professor of English at Wayne State University, where he teaches courses in film and media studies, new media theory, and American Studies.
Conceitos associados
Mdia Mediao
Interface
Experincia
Premissa bsica>
Haveria o seguinte contraditrio (paradoxo):
nossa cultura teria um simultneo desejo por imedao e hipermediao, a dupla lgica da remidiao.
Ou seja>
Nossa cultura desejaria simultaneamente
multiplicar seus mdias e apagar todos os traos de mdia. O ato de multiplicar visaria o apagamento, idealmente.
Imediao:
o meio desapareceria para nos deixarmos na
Imediao:
A experincia da imediao hipermediada
Imediao>
A origem aponta para a trajetria da
representao visual ocidental: a busca permanente por atingir a imediao implicaria em colocar o espectador no mesmo lugar dos objetos visualizados.
A hipermediao tem ligao histrica com a fascinao pela presena do meio. cones e letras integram-se desde os manuscritos medievais.
Opacidade e transparncia
As novas mdias sempre andariam entre a
opacidade e a transparncia na remidiao que fazem das mdias anteriores. Ao ver as formas de representao do passado, destaca-se as preocupaes de transparecer-se para chegar ao real e o encantamento com a opacidade do prprio meio.
Discutindo mdia>
As tecnologias da mdia envolvem relaes
que podem ser expressas em termos fsicos, sociais, estticos e econmicos. Software + Usos + remodelagem = mdia
Imediao>
O valor esttico da transparncia visando a
Imediao>
Perspectiva: ver atravs, matematizar o
espao.
Imediao>
Apagamento: trabalhar a superfcie para
apagar as pinceladas. Tromp Loeil: exemplo de buscar enganar o olho que acaba reforando a qualidade do artista que aparece pelo apuro tcnico.
Imediao>
Automaticidade: tecnologias fotogrficas,
cinema e depois televiso. A fotografia se tornou o aperfeioamento da perspectiva linear. A remoo do artista que ficava entre o espectador e a realidade da imagem.
Imediao>
Mais tarde, a computao grfica herda o
cartesianismo e a matematizao do espao convocado pela perspectiva. A, o programador que apagado da experincia do software, ele no
os software so iguais).
Mediao da mediao
No se media a experincia externa ,mas sim
outros mdias. Toda nova tecnologia se define em relao com formas anteriores de representao. (isso eles aprenderam com McLuhan)
Horizonte da imediao>
Porm...
A imediao proposta pelos meios seduz as
Hipermediao
Hipermediao: fascinao pelos mdias
(meios). Processo e performance so maiores que o resultado. Espao heterogno, janelizado, mltiplos atos de representao.
Hipermediao
Hipermdia: mltiplas mdias + acesso
Hipermediao
A hipermediao j se apresentava em portas
Hipermediao
Tecnologias mecnicas de reproduo que
tambm traziam a hipermediao: Diorama, phenakistoscope, stereoscope: internalizavam a transparncia da imagem em movimento dentro da estrutura hipermediada. Mas a vitria foi da maior transparncia (ou iluso de) dada pela fotografia.
Diorama
phenakistoscope
Stereoscope
Hipermediao>
A fotomontagem teria rompido com esse
entendimento.
Hipermediao
Quando a tecnologia se torna uma segunda
Hipermediao>
A lgica da hipermediao expressa a tenso
entre o espao visual como mediado e como um espao real que fica alm da mediao. Olhar para uma coisa, olhar atravs da coisa.
Imediaao/Hipermediao
A arte explora o sentido da interface, faz com
que ela surja aos olhos do usurio, enquanto a engenharia aperfeioa a tecnologia para que ela desaparea.
Remidiao>
Atos de remidiao: emprstimo, arquivamento, remodelagem,
absoro.
Sistema que faz a mediao de um usurio solicitante com um sistema prprogramado que busca atendar as
demandas do primeiro. Duas reas gostam de lidar muito com a interface: Design + estudos de HCI (Human-computer Interface) Quando temos o Windows e cia, falamos de interfaces grficas digitais.
Nem tudo que Internet, web. A web fez pela Internet o que o Windows fez pelo computador, tornou a interface amigvel.
Os softwares chamados navegadores, permitem que se acesse os documentos HTML que universalizam a forma de recepo do contedo que se desejasse fazer circular pela Internet. Textos,
imagens, sons, vdeos comeam a aparecer nas interfaces grficas digitais da web.
Heterogeneidade Metamorfose
Potencialidade
Complexidade
Conectividade
Cartografia
Heterogeneidade
o hipertexto composto de diferentes ns que podem ser acessados por diferentes caminhos.
Todos os caminhos podem levar sua marca. OU talvez no necessariamente no lugar que voc queria que as pessoas chegassem ao pensar na sua marca.
Metamorfose
O hipertexto est em constante transformao
Desde a cor do link visitado at a organizao
dos contedos.
potencialidade
o usurio tem a possibilidade de recriar o
Complexidade
as conexes relacionam diferentes aspectos
cartografia
o hipertexto deve oferecer recursos para a
Caractersticas da hipermdia
Hibridismo
A hipermdia mistura diferentes tipos de
linguagens
http://postvisual.com/theuninvited/en/
no-linearidade
o usurio no precisa seguir uma seqncia prdeterminada
Interatividade
o usurio deve ter papel ativo na fruio da
hipermdia.
Navegabilidade
o usurio deve ter liberdade para ir aonde
Substituio ou evoluo?
numa s linguagem. Traduzida erroneamente como mero suporte, hipermdia no se configura s como meio de transmisso de mensagens, e sim como uma linguagem com caractersticas prprias, com sua prpria gramtica. Hipermdia, diferentemente de multimdia, no a mera reunio dos meios existentes, e sim a fuso desses meios a partir de elementos no-lineares.
Web
Diversos grupos de mdia passam a
Internet.
Blogs
dirios
Gerenciador de contedo
Website
Blog Portal
Hotsite
http://www.carolinasebben.blogspot.com/ (w3haus)
Web 2.0
Ao usar a mquina, ela nos usa. um processo, no uma nova verso.
Tags (folskonomia)
Feed My App
Sites que funcionam como organizadores de contedo que vem de outros lugares
NetVibes (www.netvibes.com)
NetVibes da Agncia Digital AG2
Mash-Ups> A + B = C
especfico: ver Mashup awards b) Ao reunir dois DNAs diferentes, forma-se um terceiro SER: Wonderwall e Boulevard of Broken Dreams
Exemplos:
Diaroogle (1 API)
Algumas concluses:
1. 2.
nossos passos e comportamentos. O lado mdia nos oferece ambientes para nos inserirmos em processos gregrios, desenvolvermos estratgias identitrias, CONSTRURMOS RELACIONAMENTO.
Muito seguida, mas segue somente a si mesma atravs de suas variaes de profile. Comportamento HUB
Segue mais do que seguida. Cerca da metade dos updates so de retorno ao cliente. Comportamento Pr-Ativo/Atendimento
Mais seguida do que segue. 2 followers novos em media por dia. O uso foi especfico da ao NikePlus. No entanto, so 8600 Citaes para @nike vs. 795 citaes para @nikeplus.
A Nikeplus no envia nenhum tweet desde o dia 13 de agosto de 2008. Enquanto isso, vrios usurios que esto seguindo a marca ainda mandam tweets relacionados, tanto a marca como a suas campanhas.
H pouca transparncia da marca no seu Twitter, pois tudo o que postado l so notcias sobre a empresa que j so de conhecimento geral
781 seguidores, segue 14. Praticamente no d @, exceo do Twisney, que parece ser outro user oficial da Disney. Este sim interage com usurios do twitter em replies.
(...) eles sempre tiram as dvidas dos clientes e so educados nas respostas, o que a torna simptica. Eles pedem desculpas quando no podem responder as dvidas com rapidez, anunciam seu profile em outras redes sociais e aspectos humanos como um artigo sobre sua responsabilidade global.
No entanto, navegando por grande parte das pginas do MicrosoftVista no foi possvel encontrar nenhuma URL. Grande parte do contedo dos tweets so notcias relacionadas ao Vista e Microsoft, e at mesmo ao seu antecessor, o XP. A outra parcela dos tweets, mais informal, fica pelas respostas e conversas que acabam sendo criadas pelos usurios.
Equilbrio entre nmero de seguidores e nmero que segue. Ainda que busque alguma conversao com o usurio, fala muito de si mesma. Crescimento de 5 seguidores por dia.
T todo mundo conversando: alm de crescer, o Brasil lder mundial de uso de instant messengers (MSN, etc)
Isso nos faz olhar com mais ateno para entender que:
WIKI no apenas uma enciclopdia
Internet
Banco de Dados
Web
Mdia
Resumo:
Para projetar experincias com a web, precisamos considerar: Suas trs facetas (dados, mdia, relacionamento) Aceitar e usar as caractersticas do hipertexto e da hipermdia Pensar em combinar os DNAs disponveis
relacionamento
<proposon>
mtuo vivo
CANVAS REPRESENTAO
TELAS
mdias
INFORMAES
SEGUNDO MANOVITCH, A TELA OU INTERFACE DO COMPUTADOR AQUELA QUE SEPARA DOIS ESPAOS
INTERFACEAR OU ATENDER SIMULTANEAMENTE A DOIS OU MAIS PLOS DE UM SISTEMA DE INFORMAES IMPLICA EM, DE UM LADO, CUMPRIR COM OS PROCEDIMENTOS CONTIDOS NO PLO INANIMADO, MAS PLANEJADO E PR-DEFINIDO DO SISTEMA, E DE OUTRO LADO, ATENDER A DEMANDA DE EXPECTATIVAS PREVISVEIS POR PARTE DO INDIVDUO USURIO E SOLICITANTE. (FREITAS, P. 188)
OFERECER POSSIBILIDADE DE USO, COM LINGUAGENS DECODIFICVEIS A UM OU MAIS INDIVDUOS USURIOS PODE SER CONSIDERADO O PRINCIPAL DESAFIO DE UMA INTERFACE (FREITAS, P. 189)
A funo da metfora fica bem clara conforme a concluso de Steven Johnson, que diz que ela ajuda a imaginar o que informado, propiciando a viso do todo em uma nica tela (Gosciola, 2003, 92).
TELAS-INTERFACESMDIAS
o surgimento, desenvolvimento e
Telas-interfaces-mdias
Oops
NUMA ANALOGIA ENTRE O DESIGN NA RELAO HUMANA NO CAMPO DO REAL, EM TERMOS DE PASSAGENS ENTRE AMBIENTES, O AUTOR AFIRMA QUE NO CIBERESPAO, [O]S ELEMENTOS ALI PRESENTES, QUANDO PERMITEM A MOVIMENTAO DE SUA ESTRUTURA, APRESENTAM UM QUADRO HIERRQUICO DE MOVIMENTAO COM DIFERENTES GRAUS DE PERMISSIVIDADE.
A idia de ambientao como repetio de elementos de cenrio ou de sonoridade nas telas que no devem se restringir ao seu prprio espao. Devem sim, dar indicaes que cada uma uma continuidade fsica, em representao, da outra, permitindo que se visualize a continuidade do ambiente a cada tela para promover maior empatia do usurio. (idem, p.98)
PARA O PLANEJAMENTO DE UMA INTERFACE, DEVE-SE LEVAR EM CONSIDERAO O HISTRICO DAS EXPERINCIAS VIVENCIADAS DO INDIVDUO QUE SE PRETENDE SENSIBILIZAR, PODENDO-SE, ENTO, PROJETAR UM CONJUNTO DE ELEMENTOS ESTIMULANTES EM UM SISTEMA ESPECFICO DE INFORMAES, OBJETIVANDO-SE SUA INTERPRETAO UNVOCA E PREVIAMENTE DETERMINADA (P. 191)
Segundo o Instituto de Arquitetura de Informao: 1. O design estrutural de ambientes de informao compartilhados 2. A arte e a cincia da organizao e categorizao de sites, intranets, comunidades online e softwares para proporcionar usabilidade e encontrabilidade 3. Uma comunidade de prtica emergente focada em levar princpios de design e arquitetura ao ambiente digital
Para mim arquitetura de informao fazer o complexo se tornar algo simples. entender as necessidades do cliente, do seu negcio e traduz-las em ambientes amigveis e intuitivos para o usurio. Costumo dizer que o arquiteto de informao como se fosse um intrprete entre o cliente e o usurio, j que ele contribui significativamente para que a comunicao e o intercmbio / compartilhamento de informaes e experincias entre esses dois lados sejam feitos de maneira eficaz.
Luciana Cattony. Arquiteta de Informao da Gerdau.
Viso da disciplina
Mercado, concorrentes, necessidades do negcio, restries tecnolgicas, financeiras etc.
Encurtar o tempo de construo Tornar a manuteno mais simples Tornar a busca por informaes mais rpida Simplificar tarefas e processos Diminuir a necessidade de treinamentos
Recebimento da demanda
Benchmarking
Avaliao Heurstica
Avaliao de maturidade
Estatsticas
Focus Group
Personas
Mapa do site
Card Sorting
Estudo etnogrfico
Testes de usabilidade
Prottipos em papel
Desenvolvimento de wireframes
Wireframes x Layouts
Wireframes x Layouts
Acompanhamento do desenvolvimento
Hierarquia da informao As informaes devem ter pesos diferentes. Foque naquilo que mais importante e respeite uma hierarquia de informao.
Apresentao da informao Existem maneiras visuais e mais amigveis para se transmitir uma informao.
Apresentao da informao Existem maneiras visuais e mais amigveis para se transmitir uma informao. Fonte: Luciana Cattony plantabaixa.wordpress.com