Hipermídias_Design Gráfico_UNISINOS_aula2

ESCOLA DE DESIGN
UNISINOS
ESPECIALIZAÇÃO EM
DESIGN GRÁFICO
Hipermídia, Mídias Audiovisuais e Novas Mídias
[aula 2] – gustavo fischer

calculam e armazenam.
Computadores, contém dados.

através de
Softwares são organizáveis em redes.

Internet conecta redes de

Cultura da Interface
+ Cultura do software

 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 Lee
Lee 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
 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.

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

Cartografia

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

(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

Ainda...
 Assim, hipermídia estende a noção de texto
para outras linguagens, abarcando não apenas
imagens, mas também sons e audiovisuais.
Existe a possibilidade, portanto, de construirmos
um documento que dê um acesso não-linear –
promovido pelos links – entre conteúdos de
diferentes linguagens
(sonora, audiovisual, textual, visual), fazendo
com que um link que tem como âncora um texto
acione um vídeo, uma imagem carregue uma
trilha musical e assim por diante. No âmbito da
web, a hipermídia emerge como componente
importantíssimo.

(mais uma definição)
“o conjunto de meios que permite acesso simultâneo a

textos, imagens e
sons de modo interativo
e não linear, possibilitando fazer links entre
elementos de mídia, controlar a própria
navegação e, até, extrair textos,
imagens e sons cuja seqüência constituirá uma versão
pessoal desenvolvida pelo usuário”.

Vicente Gosciola (Roteiro para as Novas Mídias, 2003)

Hibridismo
 A hipermídia mistura diferentes tipos de
linguagens

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

Características da hipermídia

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

Exemplos de hipermídia “dentro e
fora” da Internet/web: Y-Dreams

(hiper) Texto -> Mídia

(remidiação)
-
Substituição, evolução, conviv
ência.

 web é o lado mídia
Se a

da Internet, o lado hiper
lembra que nossa “leitura” aciona
dados em rede e cria uma experiência
que não é só “estilo mídia” nem só
“estilo banco de dados” sob o
comando de softwares.

dados + software +
web(mídia) +______ =
Internet

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:

Mas tem muito mais:
 Go2web20.net

 Feed My App

Sites que funcionam como
organizadores de conteúdo que vem
de outros lugares

 NetVibes (www.netvibes.com)
 NetVibes da Agência Digital 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

Exemplos:
 Diaroogle (1 API)

 Skate Spotter

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 [banco de dados + software]
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.

Social Network Sites (SNS)

 Serviços baseados na web que permitem aos
indivíduos três possibilidades básicas:
 construção de um perfil público ou semi-público;
 articulação de uma lista de outros
usuários/membros do mesmo serviço com os quais
o indivíduo compartilha algum tipo de ligação e
visualização e visitação tanto da sua lista de
conexões com como das feitas por outros membros
pertencentes ao mesmo serviço. A natureza e
nomenclatura dessas conexões varia de site para
site. Boyd e Ellison (2007)

Internet é: Máquina + Mídia +
Ambiente de relacionamento

Internet Web Web 2.0

Banco de Dados Ambiente de
Mídia Relacionamento

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,
UX e arquitetura
de informação

User Experience Design
 A definição para User Experience por
exemplo, pode partir da idéia daquilo que
engloba todos aspectos que um usuário tem
por experiência direta em um produto digital,
seja um website, seja um software/aplicativo,
incluindo a forma, lógicas operativas
(comportamento) e conteúdo do produto

Ao acrescentar o termo Design à
expressão, tem-se uma abordagem
ampliada, uma vez que compreende
uma visão multidisciplinar e holística
para o design de interfaces de
usuários em produtos digitais.

Essa visão integra as áreas de
design de interação, design
industrial, arquitetura da
informação, design de interface
visual e design centrado no usuário
assegurando coerência e
consistência através de todas as

SEGUNDO MANOVITCH, A TELA OU
INTERFACE DO COMPUTADOR É
AQUELA QUE “SEPARA DOIS
ESPAÇOS
ABSOLUTAMENTE
DIFERENTES E QUE DE
ALGUMA MANEIRA
COEXISTEM”.

“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)

POSSIBILIDADE DE USO,
COM LINGUAGENS
DECODIFICÁVEIS A UM
OU MAIS INDIVÍDUOS
USUÁRIOS PODE SER
CONSIDERADO O
PRINCIPAL DESAFIO DE
A função da metáfora fica
UMA INTERFACE” bem clara conforme
(FREITAS, a conclusão de Steven Johnson,
que diz que ela ajuda a
P. 189) 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: vídeo players

 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

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, APRESENTA
M 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
continuidade do
visualize a
ambiente a cada tela para
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)

website
 um website – também entendido com site -
trata-se de um conjunto de webpages
(Jackson, 1997) que tenham um conceito que
as articule (uma marca comercial, uma
universidade, um evento, uma agremiação
esportiva, uma banda de rock, uma
associação, etc), que as reúna em uma
mesma arquitetura, na qual as diferentes
páginas web estão inseridas com alguma
hierarquia diante do usuário.

Tipos de site

 Dificuldade de criar as fronteiras entre
forma-conteúdo
 (ver webby awards)

 (ver Wikipédia)

Mais relevantes

Blog, portal, e-commerce, site de
rede social, media-sharing
[inserção-visualização-
compartilhamento], hotsite,
buscadores, wiki.

No início, havia 2 escolas de AI:

- Desenho de - Design estrutural da
wireframes e informação (vocabulários
mapas do site. controlados e taxonomias).

Fonte: Luciana Cattony – plantabaixa.wordpress.com

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.
Luciana Cattony. Arquiteta de Informação da W3Haus


Visão da disciplina

Mercado,
concorrentes,
necessidades
do negócio,
restrições
tecnológicas,
financeiras etc.

Quem são, O que o
suas site tem a
necessidades, oferecer, c
hábitos, omo será
maneiras criado o
de navegar, conteúdo
expectativas etc.
etc.


Arquitetura de Informação –
Objetivos

• 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


Entregáveis
Atividades e entregáveis

Fonte: que é arquitetura de informação?
O Luciana Cattony – plantabaixa.wordpress.com

Recebimento da demanda

Resgate e levantamento de informações

Benchmarking


Inventário / análise de conteúdo

Avaliação Heurística

Estatísticas


1.Visibilidade de Status do Sistema

Isso significa que você precisa se certificar de que a interface
sempre informe ao usuário o que está acontecendo, ou
seja, todas as ações precisam de feedback instantâneo para
orientá-lo.

2.Relacionamento entre a interface do sistema e o mundo real

Ou não usar palavras de sistema, que não fazem sentido pro
usuário. Toda a comunicação do sistema precisa ser
contextualizada ao usuário, e ser coerente com o chamado
modelo mental do usuário.

3. Liberdade e controlo do usuário

Facilite as “saídas de emergência” para o usuário, permitindo
desfazer ou refazer a ação no sistema e retornar ao ponto
anterior, quando estiver perdido ou em situações inesperadas.

4. Consistência

Fale a mesma língua o tempo todo, e nunca identifique uma
mesma ação com ícones ou palavras diferentes. Trate coisas
similares, da mesma maneira, facilitando a identificação do
usuário.

5. Prevenção de erros

Na tradução livre das palavras do próprio Nielsen “Ainda
melhor que uma boa mensagem de erro é um design
cuidadoso que possa prevenir esses erros”. Por
exemplo, ações definitivas, como deleções ou solicitações
podem vir acompanhadas de um checkbox ou uma
mensagem de confirmação.

6. Reconhecimento ao invés de lembrança

Evite acionar a memória do usuário o tempo inteiro, fazendo
com que cada ação precise ser revista mentalmente antes de
ser executada. Permita que a interface ofereça ajuda
contextual, e informações capazes de orientar as ações do

7. Flexibilidade e eficiência de uso

O sistema precisa ser fácil para usuários leigos, mas flexível o
bastante para se tornar ágil à usuários avançados. Essa flexibilidade
pode ser conseguida com a permissão de teclas de atalhos, por
exemplo. No caso de websites, uso de máscaras e navegação com
tab em formulários são outros exemplos.

8. Estética e design minimalista

Evite que os textos e o design fale mais do que o usuário necessita
saber. Os “diálogos” do sistema precisam ser simples, diretos e
naturais, presentes nos momentos em que são necessários.

9. Ajude os usuários a reconhecer, diagnosticar e sanar erros

As mensagens de erro do sistema devem possuir uma redação
simples e clara que ao invés de intimidar o usuário com o erro, indique
uma saída construtiva ou possível solução.

10. Ajuda e documentação
Um bom design deveria evitar ao máximo à necessidade de ajuda na
utilização do sistema. Ainda assim, um bom conjunto de
documentação e ajuda deve ser utilizado para orientar o usuário em

Pesquisas quantitativas / qualitativas

Focus Group

Entrevistas
com usuários
Personas

Imagem personas: Adaptivepath

Mapa do site

Card Sorting

Estudo etnográfico
Testes de usabilidade

Imagens: TRY – Consultoria e pesquisa

Eye-tracking

http://workvalue.net/wordpress/?p=197

http://issuu.com/duduloureiro/docs/entrevis
tawebdesign_eyetracking_jun2009

Protótipos em papel

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

Wireframes x Layouts


Acompanhamento do desenvolvimento


 Divida o espaço em
colunas e linhas –
elas ajudam a
estabelecer
proporção, regularid
ade, estrutura e
ritmo ao seu layout.
Não precisam ter
um tamanho
fixo, mas é bom
que sejam
proporcionais entre
si e com relação à
área útil total.
(Rahdfarer, DWD2)

FERRAMENTA ONLINE
PARA FAZER WIREFRAMES:
BALSAMIQ

ATIVIDADE PRÁTICA:
DESENVOLVIMENTO DE
SITEMAP + WIREFRAMES

Hipermídias_Design Gráfico_UNISINOS_aula2

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Hipermídias_Design Gráfico_UNISINOS_aula2

Mais de Gustavo Fischer

Hipermídias_Design Gráfico_UNISINOS_aula2