Este documento discute três tópicos principais sobre interfaces digitais:
1. A tela ou interface do computador separa dois espaços distintos - o espaço digital e o espaço do usuário.
2. Metáforas visuais como ícones ajudam os usuários a navegarem interfaces de forma intuitiva, representando conceitos digitais de forma familiar.
3. A arquitetura da informação deve levar em conta as experiências e expectativas dos usuários para criar interfaces que facilitem a compreensão e uso de sistemas digita
4. 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.
5. 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”.
6. 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.
8. 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.
9.
10. Metamorfose
O hipertexto está em constante transformação
Desde a “cor” do link visitado até a
organização dos conteúdos.
11.
12. Potencialidade
o usuário tem a possibilidade de
recriar o hipertexto no momento de seu uso
13.
14. Cartografia
o hipertexto deve oferecer recursos
para a orientação flexível
entre os caminhos possíveis.
15.
16. (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
17. 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.
18. (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)
19. Hibridismo
A hipermídia mistura diferentes tipos de
linguagens
http://postvisual.com/theuninvited/en/
Características da hipermídia
20. Não-linearidade
o usuário não precisa seguir uma seqüência
pré-determinada
21. Interatividade
o usuário deve ter papel ativo
na fruição da hipermídia.
22. Navegabilidade
o usuário deve ter liberdade para ir aonde
quiser, encontrar seu rumo ou se perder
25. 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.
27. 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.
28. Como ver o princípio em ação
Sites que nasceram sob idéia de
publicação, visualização e compartilhamento:
31. Sites que funcionam como
organizadores de conteúdo que vem
de outros lugares
NetVibes (www.netvibes.com)
NetVibes da Agência Digital AG2
32. 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
35. 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?
36. 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.
37.
38. 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)
40. Internet Web Web 2.0
Banco de Dados Ambiente de
Mídia Relacionamento
41. 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
43. 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
44. 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
46. SEGUNDO MANOVITCH, A TELA OU
INTERFACE DO COMPUTADOR É
AQUELA QUE “SEPARA DOIS
ESPAÇOS
ABSOLUTAMENTE
DIFERENTES E QUE DE
ALGUMA MANEIRA
COEXISTEM”.
47. “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)
48. 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).
50. 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
52. 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”.
53. 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)
54.
55. 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)
56. 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.
57. Tipos de site
Dificuldade de criar as fronteiras entre
forma-conteúdo
(ver webby awards)
(ver Wikipédia)
58. Mais relevantes
Blog, portal, e-commerce, site de
rede social, media-sharing
[inserção-visualização-
compartilhamento], hotsite,
buscadores, wiki.
59.
60.
61.
62.
63.
64. 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
66. 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
Fonte: Luciana Cattony – plantabaixa.wordpress.com
67. 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.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
68. 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
Fonte: Luciana Cattony – plantabaixa.wordpress.com
72. 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.
73. 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
74. 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
75.
76.
77.
78. Pesquisas quantitativas / qualitativas
Focus Group
Entrevistas
com usuários
Personas
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Imagem personas: Adaptivepath
79. Mapa do site
Card Sorting
Estudo etnográfico
Testes de usabilidade
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Imagens: TRY – Consultoria e pesquisa
91. 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)