conceitos de internet, web, hipermídia e ai - especialização design grafico

Escola de Design UnisinosEspecialização em Design GráficoDesign de Hipermídia

O QUE ACONTECEU PARA ESTARMOS TRATANDO DE DESIGN DE HIPERMÍDIA?

Hipermídia e interfaces

Web e softwares que usam a internet para “trabalhar”

Processos de projeto

Tendências

Computadores calculam e armazenam.

Computadores contém dados.

Internet conecta redes de

computadores.

Computadores são organizáveis

em redes.

Digitalização

Dos meios de produção (“criamos

conteúdo através de”): word, powerpoint,

excel, photoshop, web)

Dos suportes (“lugares onde guardamos

o conteúdo produzido”): pendrives,

DVDs, HDs, CDs, discos virtuais,

disquetes...

Dos processos: (“executamos tarefas

com o auxílio de”): cartões eletrônicos,

home-banking, celular, microondas, etc.

Comunicação Mediada por

Computadores (CMC)

Tecnologias da Informação e da

Comunicação (TICs)

A evolução da

computação está

ligada ao cálculo e

armazenamento.

O computador realiza operações. Essa

faceta de máquina de processar, calcular,

buscar resultados é fundamental para

pensarmos a Internet.

2001

2008

Professor at the Visual Arts Department, University of California - San Diego (UCSD).

Examinando a interface, começando pela idéia de “tela”.

A tela é uma tecnologia muito

anterior às possibilidades recentes

(VR) que tomamos contato hoje, da Renascença ao cinema do século XX.

As soluções de Virtual Reality eram muito comentadas à época.

Como o computador apresenta

continuidades e desafios em

relação à tradição da tela?

McLuhan e Remidiation.

Genealogia da tela.

Classical Screen

A cultura visual do período moderno é caracterizada por um intrigante fenômeno – a existência de um outro espaço virtual, um outro mundo tridimensional fechado por uma moldura e situado dentro do nosso espaço normal.

A moldura (frame) separa dois espaços absolutamente diferentes que de alguma forma coexistem.

Herança da pintura: pensar nas proporções e nas nomenclaturas portrait e landscape usadas hoje.

Dynamic screen

A tela que disponibiliza uma imagem que muda no tempo. A tela do cinema, tv, vídeo.

Impõe uma outro protoloco de visulização (viewing regime) entre a imagem e o espectador.

Já aparecia na tela clássica, mas agora

aumenta a noção de “preenchimento completo da tela pela imagem”, descarte do espaço “ao redor” da tela pelo foco que a

mesma requisita. Imersão.

A tela é agressiva.

Ela filtra o entorno.

Esta relação-protocolo de visualização (tela

quer sua atenção total) é desafiada com a chegada da tela do computador.

A tela do cinema resulta de uma evolução de dispositivos do século 18 e 19.

A tela do computador tem origem no radar.

Inovação ligada a tecnologias de controle, espionagem, mapeamento, segurança (militares): monitor de vídeo, tela de computador, controles.

radar

Ao contrário da fotografia e do cinema (imagens estáticas, ou imagens estáticas em seqüência), vemos pela 1ª vez uma tela cuja imagem pode mudar em tempo real, mostrando mudanças no referente (posição de objeto, live vídeo ou mudança nos dados do computador).

A tela de tempo real é o terceiro tipo de tela, inaugurada pelo radar.

Janelas coexistentes no lugar de uma única imagem, princípio da Graphical User Interface (GUI).

A concentração da visualização deixa de ser em apenas uma imagem. Blocos de dados de texto, imagem, vídeo sugerem que a tela do computador tem mais a ver com design gráfico e janelas.

Tela interativa

A informação processada passa a ser representada na tela de tempo real: lugar de inserir e retirar informação de um computador.

Ao mudar algo na tela, mudamos algo na memória do computador

Clássica

Dinâmica

– Real time –

Interativa

A tela e o corpo

A tela representa uma relação entre o espaço do espectador e o espaço da representação.

Com isso, o sujeito estaria existindo nesses dois espaços simultaneamente, princípio que nasce do “corte” promovido pela tela.

As formas de representação ocidental pedem que o sujeito fique parado.

Um ponto de vista, “descolado” do corpo.

A invenção da perspectiva radicaliza ainda mais essa relação: o ponto de vista está pronto.

A tela funcionaria como um cofre em uma parede, no qual o “visível” foi depositado.

Os aparatos que lidam com a luz e projeção conduziriam depois ao cinema requisita que o espectador se “aprisione” para - imóvel -assistir à imagens.

Nesse sentido, também passamos de um mundo estável e estático (fotografias iniciais) para a “aventura da viagem”com a imagem em movimento, ainda que aprisionados.

Salas de cinema: prisões, caverna de Platão. Representação confundida com perpcepção.

A realidade virtual leva a câmera para a cabeça do usuário. Para olhar no espaço virtual é preciso olhar no espaço físico. O usuário precisa “trabalhar” (jogar?) para ver (lembrando o funcionário de Flusser).

Continuamos grudados à máquina, mas agora precisamos nos mexer.

A VR continuaria a tradição da simulação. Teríamos na tela a mudança da representação para a simulação.

Pinturas de mosaicos, afrescos, nas paredes fundiam-se com a arquitetura e o “real” enquanto as telas da pintura em diante reforçavam a representação (e pediam a mobilidade do espectador). A tradição da simulação, portanto, é anterior às telas digitais (museus de cera, naturalismo, realismo, etc).

O próximo passo (então) é carregar as telas que nos aprisionam conosco: a retina e tela vão se fundir. Mas ainda vivemos na sociedade da tela achatada, retangular que participa do nosso espaço como uma janela para outro lugar, a sociedade da tela.

REMIDIAÇÃO

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.

http://en.wikipedia.org/wiki/August_17

http://en.wikipedia.org/wiki/1951

http://en.wikipedia.org/wiki/Professor

http://en.wikipedia.org/wiki/Georgia_Institute_of_Technology

http://en.wikipedia.org/wiki/Georgia_Institute_of_Technology

Richard Grusin

Richard Grusin is a Professor of English at Wayne State University, where he teaches courses in film and media studies, new media theory, and American Studies.

http://premediation.blogspot.com/

Conceitos associados

Mídia

Mediação

Interface

Experiência

Premissa básica>

Haveria o seguinte contraditório (paradoxo): nossa cultura teria um simultâneo desejo por imedação e hipermediação, a dupla lógica da remidiação.

Ou seja>

Nossa cultura desejaria simultaneamente multiplicar seus mídias e apagar todos os traços de mídia. O ato de multiplicar visaria o apagamento, idealmente.

Imediação:

o meio desapareceria para nos deixarmos na presença da “coisa representada”. Mas a imediação dependeria da hipermediação (além de coexistir).

Imediação:

A experiência da imediação é hipermediada pela INTERFACE (simuladores).

Imediação>

A origem aponta para a trajetória da representação visual ocidental: a busca permanente por atingir a imediação implicaria em colocar o espectador no mesmo lugar dos objetos visualizados.

A hipermediação tem ligação histórica com a fascinação pela “presença do meio”. Ícones e letras integram-se desde os manuscritos medievais.

As mídias visuais digitais podem ser melhor compreendidas pelas formas pelas quais

homenageiam, rivalizam e revisam a

pintura em perspectiva, fotografia, filme, televisão e impresso. O que é novo sobre as “novas mídias” seria a forma particular com que estes aspectos são tratados entre as mídias novas e antigas.

Opacidade e transparência

As novas mídias sempre andariam entre a opacidade e a transparência na remidiação que fazem das mídias anteriores.

Ao ver as formas de representação do passado, destaca-se as preocupações de transparecer-se para chegar ao real e o encantamento com a opacidade do próprio meio.

Discutindo mídia>

As tecnologias da mídia envolvem relações que podem ser expressas em termos físicos, sociais, estéticos e econômicos.

Software + Usos + remodelagem = mídia

Imediação>

O valor estético da “transparência” visando a imediação foi trabalhado pelas mídias antigas

nas técnicas de perspectiva, apagamento e automaticidade.

Imediação>

Perspectiva: ver através, matematizar o espaço.

Imediação>

Apagamento: trabalhar a superfície para apagar as pinceladas.

Tromp L´oeil: exemplo de buscar “enganar” o olho que acaba reforçando a qualidade do artista que aparece pelo apuro técnico.

Imediação>

Automaticidade: tecnologias fotográficas, cinema e depois televisão. A fotografia se tornou o aperfeiçoamento da perspectiva linear. A remoção do artista que ficava entre o espectador e a realidade da imagem.

Imediação>

Mais tarde, a computação gráfica herda o cartesianismo e a matematização do espaço convocado pela perspectiva. Aí, é o programador que é “apagado” da experiência do software, ele não

“transparece” através da interface (todos os software são “iguais”).

Mediação da mediação

Não se media a experiência externa ,mas sim outros mídias. Toda nova tecnologia se define em relação com formas anteriores de representação.

(isso eles aprenderam com McLuhan)

Horizonte da imediação>

Imediação: o autor se retira mais e o leitor seria mais envolvido.

Porém...

A imediação proposta pelos meios seduz as percepções, mas de fato está amparada em atos de mediação contínuos (hipermediação).

Hipermediação

Hipermediação: fascinação pelos mídias (meios).

Processo e performance são maiores que o resultado. Espaço heterogêno, janelizado, múltiplos atos de representação.

Hipermediação

Hipermídia: múltiplas mídias + acesso randômico.

A interface do desktop não se apaga. Mídia (conteúdo) e software inclusive conversam.

Hipermediação

A hipermediação já se apresentava em portas e cabines dos séculos XVI e XVII.

Hipermediação

Tecnologias mecânicas de reprodução que também traziam a hipermediação:

Diorama, phenakistoscope, stereoscope: internalizavam a transparência da “imagem em movimento” dentro da estrutura hipermediada. Mas a vitória foi da maior transparência (ou ilusão de) dada pela fotografia.

Diorama

phenakistoscope

Stereoscope

Hipermediação>

A fotomontagem teria rompido com esse entendimento.

Colagem, mash-up, DJ.

Hipermediação

Quando a tecnologia se torna uma segunda natureza, a experiência hipermediada torna-se igualmente autêntica.

Hipermediação>

A lógica da hipermediação expressa a tensão entre o espaço visual como mediado e como um espaço “real” que fica “além” da mediação.

Olhar para uma coisa, olhar através da coisa.

Imediaçao/Hipermediação

A arte explora o sentido da interface, faz com que ela surja aos olhos do usuário, enquanto a “engenharia” aperfeiçoa a tecnologia para que ela desapareça.

Imediação / Hipermediação>>>> Remidiação

a representação de um meio em outro. Característica definidora das novas mídias.

Remidiação>

Atos de remidiação:

empréstimo, arquivamento, remodelagem, absorção.

Dependência, contexto, reforma

Imediação e hipermediação nas interfaces

Sistema que faz a mediação de um

usuário solicitante com um sistema pré-

programado 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 gráficas digitais.

Criada em 1991 por Tim-Berners LeeLee propôs a criação de um espaço hipertextual

global e aberto, no qual qualquer informação pudesse ser acessada através de um único Universal Document Identifier (Identificador

Universal de Documentos).

Nem tudo que é Internet, é web.

A web fez pela Internet o que o Windows fez pelo computador, tornou a interface “amigável”.

Os softwares chamados

navegadores, permitem que se

acesse os documentos HTML

que universalizam a forma de

“recepção” do conteúdo que se

desejasse fazer circular pela

Internet. Textos, imagens,

sons, vídeos começam

a aparecer nas

interfaces gráficas

digitais da web.

O usuário ao requisitar uma

página, faz um “pedido” ao

servidor que a disponibilize.

Heterogeneidade

Metamorfose

Potencialidade

Complexidade

Conectividade

Cartografia

Heterogeneidade

o hipertexto é composto de diferentes nós que podem ser acessados por diferentes caminhos.

Todos os caminhos podem levar à sua marca. OU talvez não necessariamente no lugar que você queria que as pessoas chegassem ao pensar na sua marca.

http://twitter.com/BBerrryQueen/statuses/1308797714



Metamorfose

O hipertexto está em constante transformação

Desde a “cor” do link visitado até a organização dos conteúdos.

potencialidade

o usuário tem a possibilidade de recriar o hipertexto no momento de seu uso

Complexidade

as conexões relacionam diferentes aspectos do hipertexto, mesmo que contraditórios.

cartografia

o hipertexto deve oferecer recursos para a orientação flexível entre os caminhos possíveis.

Características da hipermídia

A hipermídia mistura diferentes tipos de linguagens

http://postvisual.com/theuninvited/en/

Hibridismo

não-linearidade

o usuário não precisa seguir uma seqüência pré-determinada

Interatividade

o usuário deve ter papel ativo na fruição da hipermídia.

Navegabilidade

o usuário deve ter liberdade para ir aonde quiser, encontrar seu rumo ou se perder

(hiper) Texto -> Mídia

Substituição ou evolução?

(hiper) –texto> (mídia)

Hipermídia une os conceitos de não-linearidade (não-linear), hipertexto, interface e multimídia numa só linguagem. Traduzida erroneamente como mero suporte, hipermídia não se configura só como meio de transmissão de mensagens, e sim como uma linguagem com características próprias, com sua própria gramática. Hipermídia, diferentemente de multimídia, não é a mera reunião dos meios existentes, e sim a fusão desses meios a partir de elementos não-lineares.

http://pt.wikipedia.org/wiki/N%C3%A3o-linear



http://www.ericdigests.org/pre-9212/hype.htm

Mas a “máquina” continua operandonos “bastidores.”

Web

Diversos grupos de mídia passam a

produzir suas “versões online” quando a

Web torna-se, o lado mídia da

Internet.

Blogs“diários”

Gerenciador

de conteúdo

Website

Portal

Hotsite

Blog

http://www.globo.com/

http://www.nike.com/nikeskateboarding/v3/

http://www.carolinasebben.blogspot.com/ (w3haus)

http://www.carolinasebben.blogspot.com/

Web 2.0

Ao usar a máquina, ela nos usa.

É um processo, não uma nova versão.

Estrutura integrada de funcionalidades e conteúdo, criando serviços.

Publicação (inserção), visualização (representação), compartilhamento (indexação) das informações.

Como ver o princípio em ação

Sites que nasceram sob idéia de publicação, visualização e compartilhamento: YouTube, Flickr, Slideshare, Delicious, etc.

Tags (folskonomia)

Mas tem muito mais:

Go2web20.net

Feed My App

http://www.go2web20.net/

http://www.feedmyapp.comq/

Sites que funcionam como organizadores de conteúdo que vem de outros lugares NetVibes (www.netvibes.com)

NetVibes da Agência Digital AG2

http://www.netvibes.com/

http://www.netvibes.com/ag2

Mash-Ups> A + B = C

Sites que organizam conteúdo possuem uma espécie de DNA (API)

a) Usa-se um DNA a favor de um objetivo específico: ver Mashup awards

b) Ao reunir dois DNAs diferentes, forma-se um terceiro “SER”: Wonderwall e Boulevard of Broken Dreams

http://mashupawards.com/winners/

Exemplos:

Diaroogle (1 API)

Visual Headlines (Flickr + CNN)

http://www.diaroogle.com/

http://www.visualheadlines.com/

Algumas conclusões:

1. Decisões estratégicas reúnem dados+mídia

2. Mutação permanente. Interfaces previstas, mas não previsíveis.

3. Informação embutível/distribuível para muitos lugares (igual e diferente ao mesmo tempo).

4. Vida pessoal e vida das marcas cada vez mais diluídas uma na outra?

O sujeito deixa marcas.

O lado máquina nos mede, mensura, percebe nossos passos e comportamentos.

O lado mídia nos oferece ambientes para nos inserirmos em processos gregários, desenvolvermos estratégias identitárias, CONSTRUÍRMOS RELACIONAMENTO.

Muito seguida, mas segue

somente

“a si mesma” através de

suas variações de profile.

Comportamento “HUB”

Segue mais do que é seguida.

Cerca da metade dos updates

são de retorno ao cliente.

Comportamento Pró-Ativo/Atendimento

Mais seguida do que segue. 2 followers

novos em media por dia.

O uso foi específico da ação NikePlus.

No entanto, são 8600 Citações para @nike

vs. 795 citações para @nikeplus.

A Nikeplus não envia nenhum tweet

desde o dia 13 de agosto de 2008.

Enquanto isso, vários usuários

que estão seguindo a marca

ainda mandam tweets relacionados,

tanto a marca como a suas campanhas.

Comportamento Sazonal

+ “Efeito” Morto-Vivo

Não segue

ninguém e

é seguida por

mais de

9 mil users.

Há pouca transparência

da marca no seu

Twitter,

pois tudo o que é

postado

lá são notícias sobre

a empresa que

já são de

conhecimento geral

781 seguidores, segue 14.

Praticamente não dá @,

à exceção do Twisney,

que parece ser

outro user oficial da Disney.

Este sim interage com

usuários do twitter em replies.

(...) eles sempre tiram as dúvidas

dos clientes e são educados nas respostas,

o que a torna simpática.

Eles pedem desculpas

quando não podem responder

as dúvidas 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 páginas do MicrosoftVista

não foi possível encontrar nenhuma URL.

Grande parte do conteúdo dos tweets

são notícias 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 usuários.

Equilíbrio entre número de

seguidores e número que segue.

Ainda que busque alguma

conversação com o usuário,

“fala muito de si mesma”.

Crescimento de 5 seguidores por dia.

Uma pessoa “real”

Identificada no

profile

O uso de redes sociais (orkut, myspace, etc)

não pára de crescer no Brasil.

Tá todo

mundo

conversando:

além de

crescer, o

Brasil é líder

mundial

de uso de

instant

messengers

(MSN, etc)

Isso nos faz olhar com mais atenção para entender que:

WIKI não é apenas uma enciclopédia

Blogs não são só diários abertos

YouTube não é TV na Internet

Conceitos ligados a isso: emergência

(sistema organizado e desorganizado

simultaneamente), Folksonomia

Internet é: Máquina + Mídia +

Ambiente de relacionamento

Banco de Dados MídiaAmbiente de

Relacionamento

Internet Web Web 2.0

Resumão:

Para projetar experiências com a web, precisamos considerar:

Suas três facetas (dados, mídia, relacionamento)

Aceitar e usar as características do hipertexto e da hipermídia

Pensar em combinar os “DNAs” disponíveis

Interfaces, telas e

arquitetura de

informação

relacionamento

<proposon>mútuo vivo

CANVAS

REPRESENTAÇÃO

mídias

Tv

Rádio

Jornal

Revista

WebTv

Rádio

Jornal

Revista

Web

INFORMAÇÕES

SEGUNDO MANOVITCH, A TELA OU

INTERFACE DO COMPUTADOR É AQUELA

QUE “SEPARA DOIS ESPAÇOS

ABSOLUTAMENTE DIFERENTES E

QUE DE ALGUMA MANEIRA

COEXISTEM”.

Quem ou o que são esses espaços?

“INTERFACEAR OU ATENDER SIMULTANEAMENTE A DOIS OU MAIS PÓLOS DE UM SISTEMA DE INFORMAÇÕES IMPLICA EM, DE UM LADO, CUMPRIR COM OS PROCEDIMENTOS CONTIDOS NO PÓLO INANIMADO, MAS PLANEJADO E PRÉ-DEFINIDO DO SISTEMA, E DE OUTRO LADO, ATENDER A DEMANDA DE EXPECTATIVAS PREVISÍVEIS POR PARTE DO INDIVÍDUO USUÁRIO E SOLICITANTE.” (FREITAS, P. 188)

“OFERECER POSSIBILIDADE DE USO, COM LINGUAGENS DECODIFICÁVEIS A UM OU MAIS INDIVÍDUOS USUÁRIOS PODE SER CONSIDERADO O PRINCIPAL DESAFIO DE UMA INTERFACE”(FREITAS,P. 189)

A função da metáfora fica

bem clara conforme

a conclusão de Steven Johnson,

que diz que ela ajuda a

imaginar o que é informado,

propiciando a visão do todo

em uma única tela (Gosciola, 2003, 92).

Outros exemplos de

metáforas nos ícones e

Remidiação: video players

http://www.smileycat.com/design_elements/flash_video_players/

TELAS-INTERFACES-MÍDIAS

Com a hipermídia, a discussão passaria a ser o surgimento, desenvolvimento e

transformação das interfaces que permitem comunicação e uso por imersão. (Freitas, p. 195)

Telas-interfaces-mídias

NUMA ANALOGIA ENTRE O DESIGN NA RELAÇÃO HUMANA NO CAMPO DO “REAL”, EM TERMOS DE PASSAGENS ENTRE AMBIENTES, O AUTOR AFIRMA QUE NO CIBERESPAÇO, “[O]S ELEMENTOS ALI PRESENTES, QUANDO PERMITEM A MOVIMENTAÇÃO DE SUA ESTRUTURA, APRESENTAM UM QUADRO HIERÁRQUICO DE MOVIMENTAÇÃO COM DIFERENTES GRAUS DE PERMISSIVIDADE”.

A idéia de ambientação como repetição de elementos de cenário ou de sonoridade nas telas que não devem se restringir ao seu próprio espaço. Devem sim, dar indicações que cada uma é uma continuidade física, em representação, da outra, permitindo que se visualize a continuidade do ambiente a cada telapara promover maior empatia do usuário. (idem, p.98)

PARA O PLANEJAMENTO DE UMA INTERFACE, “DEVE-SE LEVAR EM CONSIDERAÇÃO O HISTÓRICO DAS EXPERIÊNCIAS”VIVENCIADAS DO INDIVÍDUO QUE SE PRETENDE SENSIBILIZAR, PODENDO-SE, ENTÃO, PROJETAR UM CONJUNTO DE ELEMENTOS ESTIMULANTES EM UM SISTEMA ESPECÍFICO DE INFORMAÇÕES, OBJETIVANDO-SE SUA INTERPRETAÇÃO UNÍVOCA E PREVIAMENTE DETERMINADA” (P. 191)

No início, havia 2 escolas de AI:

- Desenho de

wireframes e

mapas do site.

- Design estrutural da

informação (vocabulários

controlados e taxonomias).

´

Fonte: Luciana Cattony – plantabaixa.wordpress.com

1. O design estrutural de ambientes de informação

compartilhados

2. A arte e a ciência da organização e categorização de

sites, intranets, comunidades online e softwares para

proporcionar usabilidade e “encontrabilidade”

3. Uma comunidade de prática emergente focada em levar

princípios de design e arquitetura ao ambiente digital

Segundo o Instituto de Arquitetura de Informação:


Luciana Cattony. Arquiteta de Informação da Gerdau.

Para mim arquitetura de informação é fazer o complexo se tornar algo

simples. É entender as necessidades do cliente, do seu negócio e

traduzí-las em ambientes amigáveis e intuitivos para o usuário.

Costumo dizer que o arquiteto de informação é como se fosse um

intérprete entre o cliente e o usuário, já que ele contribui

significativamente para que a comunicação e o intercâmbio /

compartilhamento de informações e experiências entre esses dois

lados sejam feitos de maneira eficaz.


Visão da disciplina

Mercado,

concorrentes,

necessidades

do negócio,

restrições

tecnológicas,

financeiras etc.

Quem são,

suas

necessidades,

hábitos,

maneiras

de navegar,

expectativas

etc.

O que o

site tem a

oferecer,

como será

criado o

conteúdo

etc.


• Encurtar o tempo de construção

• Tornar a manutenção mais simples

• Tornar a busca por informações mais

rápida

• Simplificar tarefas e processos

• Diminuir a necessidade de

treinamentos

• Agregar valor às marcas

• Criar experiências de uso memoráveis

Arquitetura de Informação –

Objetivos


Entregáveis

O que é arquitetura de informação?

Atividades e entregáveis


Resgate e levantamento de informações

Recebimento da demanda

Benchmarking


http://www.gettyimages.com/detail/85324580/Iconica

Inventário / análise de conteúdo

Avaliação de maturidade

Avaliação Heurística

EstatísticasFonte: Luciana Cattony – plantabaixa.wordpress.com

Pesquisas quantitativas / qualitativas

Entrevistas

com usuáriosPersonas

Imagem personas: Adaptivepath

Focus Group


http://images.google.com.br/imgres?imgurl=http://www.scielo.br/img/revistas/rbem/v30n1/a04q01.gif&imgrefurl=http://www.scielo.br/scielo.php?pid=S0100-55022006000100004&script=sci_arttext&usg=__-N7CYraPNyJwt3x-nigbkS0puoU=&h=1071&w=880&sz=47&hl=pt-BR&start=1&sig2=3caDZSAtBMQIDbrAgUQgOQ&tbnid=2v0b_AeCpA9jjM:&tbnh=150&tbnw=123&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQ

http://images.google.com.br/imgres?imgurl=http://br.geocities.com/nitrixbr/images/umbandareligioesbrasil.jpg&imgrefurl=http://br.geocities.com/nitrixbr/ensaio04.htm&usg=__jeuoaCiHByTguVJ7JurRiinlfTE=&h=363&w=338&sz=41&hl=pt-BR&start=6&sig2=qd6Pu7x7kKXnIy23GUw71Q&tbnid=54HyJN9natuhGM:&tbnh=121&tbnw=113&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQ

http://images.google.com.br/imgres?imgurl=http://cnaturais7.files.wordpress.com/2008/02/grafico3.gif&imgrefurl=http://cnaturais7.wordpress.com/2008/02/17/novidades-3/&usg=__khTWOCQpxxzWWWYedZWX7N4TcqI=&h=461&w=451&sz=17&hl=pt-BR&start=5&sig2=hSm9lQPdr_5er-z7RVFRug&tbnid=8-T-M770kXUjVM:&tbnh=128&tbnw=125&prev=/images?q=questionarios&gbv=2&hl=pt-BR&ei=Jm3SSb-1OtPnlAft7cyyBQ

Testes de usabilidade

Card Sorting

Imagens: TRY – Consultoria e pesquisa

Estudo etnográfico

Mapa do site


Protótipos em papel

http://www.nngroup.com/reports/prototyping/video_stills.html


http://www.youtube.com/watch?v=c4-A-9hGn0U&eurl=http://plantabaixa.wordpress.com/page/5/&feature=player_embedded

Desenvolvimento de wireframes


Wireframes x Layouts


Acompanhamento do desenvolvimento


• Hierarquia da informação

As informações devem ter pesos diferentes. Foque naquilo que é mais

importante e respeite uma hierarquia de informação.


• Apresentação da informação

Existem maneiras visuais e mais amigáveis para se transmitir uma informação.


http://professionalontheweb.com/

http://www.webdesignerwall.com/

• Apresentação da informação

Existem maneiras visuais e mais amigáveis para se transmitir uma informação.Fonte: Luciana Cattony – plantabaixa.wordpress.com


http://www.americanas.com.br/