Hipermídias_Design Gráfico_UNISINOS_aula2

ESCOLA DE DESIGN UNISINOSESPECIALIZAÇÃO EM DESIGN GRÁFICOHipermídia, Mídias Audiovisuais e Novas Mídias

[aula 2] – gustavo fischer

calculam e armazenam.

contém dados.

Internet conecta redes de

são organizáveis em redes.

Computadores,através deSoftwares

Cultura da Interface+ Cultura do software

Interface

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.

World Wide Web

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.

Princípios do Hipertexto

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.

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

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 de elementos não-lineares.

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

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

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

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.

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

(mais uma definição)

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

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

http://www.youtube.com/ydreams#p/u/6/M49OZBnvuec



(hiper) Texto -> Mídia

(remidiação) - Substituição, evolução,

convivência.

Se a web é o lado mídia 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

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

Exemplos:

Diaroogle (1 API)

Skate Spotter

http://www.diaroogle.com/

http://skatespotter.com/search/US/NY/New-York/40.7143528/-74.0059731/results.html

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

Uma caracterização da Internet

Banco de Dados Mídia Ambiente 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, 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 dimensões do design.

Vamos voltar às interfaces.

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)

“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: vídeo players

http://www.smileycat.com/design_elements/flash_video_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

Oops

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

http://www.webbyawards.com/

http://en.wikipedia.org/wiki/Website#Types_of_websites

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 wireframes e mapas do site.

- Design estrutural da informação (vocabulários controlados e taxonomias).

´

Fonte: Luciana Cattony – plantabaixa.wordpress.com


Luciana Cattony. Arquiteta de Informação da W3Haus

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 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 usuário - ou seja - que o sistema dialogue com o usuário.

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 caso de dúvida. Deve ser visível, facilmente acessada, e com oferecer uma ferramenta de busca na ajuda.

Pesquisas quantitativas / qualitativas

Entrevistas com usuários

Personas

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


Eye-tracking

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

http://issuu.com/duduloureiro/docs/entrevistawebdesign_eyetracking_jun2009

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



http://youtu.be/OffinPszVO4

HEATMAPS

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

Wireframes x Layouts


Wireframes x Layouts


Acompanhamento do desenvolvimento


Divida o espaço em colunas e linhas – elas ajudam a estabelecer proporção, regularidade, 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)

http://www.thefwa.com/

FERRAMENTA ONLINE PARA FAZER WIREFRAMES: BALSAMIQ

ATIVIDADE PRÁTICA: DESENVOLVIMENTO DE SITEMAP + WIREFRAMES