DESIGN UX – PROVA I

• Sustentabilidade e a Responsabilidade Social

A sustentabilidade e a responsabilidade social empresarial é um tema

emergente, polêmico e dinâmico, que envolve desde a geração de lucro, em
visão bastante simplificada, até a implementação de uma política estratégica de
ações sociais imbricada no plano de negócios das organizações, em contexto
abrangente e complexo (TENÓRIO, 2006).
A prática da sustentabilidade e da RSE envolve: investimento no bem estar
dos colaboradores, preservação do meio ambiente, apoio ao desenvolvimento
da comunidade em que atua, satisfação de clientes e consumidores,
cumprimento da legislação vigente, retorno aos acionistas, busca de um
diferencial competitivo, comunicação transparente e ética.

• Tendências sociocultural do METADESIGN

Desde que a sustentabilidade passou a fundamentos de estudos

internacionais, tornou-se fundamental, se necessário reavaliar os fundamentos
do papel do design.
E necessário questionar a própria natureza do espaço que a gente vive.

O espaço urbano – Opressivo

A função dos objetos – Valores
A construção da Tecnologia – Acessibilidade
Os Produtos Digitais – Seus processos

• O que é METADESIGN?
Metadesign tem “n” definições diferentes. A geral é: O design do contexto em
que acontece o design, projetar o contexto de onde acontece o projeto. Então
você se afasta um pouco do produto final que quer gerar e pondera sobre o
caminho para gerar aquele produto. (Método)
Segundo a definição, metadesign é a técnica de criar métodos, uma
abordagem para criar métodos. Em si não é um método, mas um olhar sobre o
processo metodológico. Essa é uma definição.
 Outra definição é o projeto de coisas que se movem, que estão em
movimento, e não de coisas estáticas. Então, nos preocupamos mais com o
projeto de processos do que com projeto de objetos. Uma terceira definição é o
projeto de si mesmo, ou seja, onde estou no mundo, meu alcance, o que dá pra
eu fazer a partir da minha posição, a posição que eu ocupo no mundo. Ter
consciência de si mesmo, consciência do contexto que você está e de quais
ações estão ao seu alcance. Isso se estende ao conjunto social que você está.
Então, qual conjunto social estou? Qual é o alcance desse conjunto social? É
uma empresa? Uma comunidade? Uma família? É uma instituição? É uma
organização pública? Lucrativa? Não lucrativa? E por aí vai. Projetar esse
contexto é metadesign.

• Por que é interessante os profissionais terem conhecimento dessas

abordagens?
Eles permitem resultados mais eficazes, mais eficientes e que você faça mais
coisas com menos esforço. Você vai trabalhar menos — isso é fato — por incrível
que pareça, para realizar mais.
O metadesign te convida a dar um passo atrás e observar onde você — o
“eu” — está, o que quer, entender no que isso contribui para você, como isso
contribui para a sua empresa, para a organização na qual está, para a
comunidade a qual você se dedica.
E nessa posição de observação, de meta observação, você é capaz de agir
de maneira mais eficaz. Essa é uma dimensão.

• O processo de design de interação

4 atividades básicas:

• Estabelecer requisitos (funcionalidades) – é a atividade de entendimento,

ou seja, entender as pessoas envolvidas e o produto a ser desenvolvido.
Com o intuito de projetar algo para dar suporte às pessoas, devemos
saber quem são nossos usuários-alvo e em que tipo de suporte um
produto interativo poderia proporcionar utilidade.
• Criar alternativas de design - é sugerir ideias para satisfazer os requisitos,
e essa atividade pode ser dividida em duas subatividades: o design
conceitual e o design físico.
• Prototipar - é a atividade que permite desenvolver os protótipos, pois o
design de interação envolve o design de produtos interativos. A forma
mais sensível para os usuários avaliarem tais designs é interagindo com
eles, e isso pode ser alcançado por meio de protótipos.
 • Avaliar - Avaliar o design é a atividade que determina a usabilidade e
aceitabilidade do produto ou design, sendo medida por uma variedade de
critérios.

• Abordagem Projetual do Design

“A maioria das pessoas acredita que User Experience é somente encontrar a

melhor solução para os seus usuários — mas não é. UX trata sobre definir o
problema que precisa ser resolvido (o porquê), definir para quem esse
problema precisa ser resolvido (o quem), e definir o caminho que deve ser
percorrido para resolvê-lo (o como).”

– Whitney Hess

• Definir Problema, Público, Solução

Boa ou má, a Experiência do Usuário é condicionada por vários fatores:
• A emoção associada a ela
• O sentido que ela traz para vida do usuário
• O valor que ela agrega
• A utilidade daquele e produto ou serviço
• A satisfação que ela traz

• Projetar interfaces

• Considerar no que as pessoas são boas ou não;

• Considerar o que deve auxiliar as pessoas na sua atual maneira de fazer
as coisas;
• Pensar no que pode proporcionar experiências de usuário com qualidade;
• Ouvir o que as pessoas querem e envolvê-las no design;
• Utilizar técnicas baseadas no usuário, que tenham sido testadas e
aprovadas durante o processo de design.

• De onde surgiu a ideia de melhorar a interface para o usuário?

• Entretenimento
• Games
 • Uma breve história
WIMP (Windows, Icons, Menus, and Pointers)
Janelas, Ícones, Menus e Apontadores/Cursores, são adotados nos ambientes
baseados em janelas. Eles visam aproveitar os benefícios e contornar as
limitações de cada estilo de interação individual.
Outros estilos:
Com o avanço das tecnologias e pesquisas relacionadas a UX, têm surgido
outros estilos de interação tais como interação em 3D, com realidade virtual e
aumentada; e interação com caneta, toque, multitoque e gestos.
• interação em 3D, com realidade virtual e aumentada;
• Interação com gestos.
• Interação multitoque.

• Novas tecnologias

• Ambientes virtuais imersivos

• Telas sensíveis ao toque
• Gestos e fala

• Metas da experiência do usuário

Aspectos desejáveis:
• Satisfatório • Melhora a sociabilidade
• Agradável • Apoia a criatividade
• Atraente • Cognitivamente estimulante
• Prazeroso • Divertido
• Emocionante • Instigante
• Interessante • Surpreendente
• Prestativo • Recompensador
• Motivador • Emocionalmente gratificante
• Desafiador
 Aspectos indesejáveis:
• Tedioso • Condescendente
• Frustrante • Faz com que alguém se sinta
estúpido
• Faz com que alguém se sinta
culpado • Forçosamente bonito
• Irritante • Artificial/falso
• Infantil
• Desprazeroso

• Princípios de design
• Visibilidade: termo que trata do quão fácil ou difícil é a identificação visual
dos controles de uma interface;
• Feedback: refere-se ao retorno de informação a respeito de que ação foi
feita e do que foi realizado, permitindo à pessoa continuar a atividade;
• Restrições: refere-se a determinar formas de delimitar os tipos de
interação de usuário que podem ocorrer em um determinado momento;
• Consistência: refere-se a projetar interfaces de modo que tenham
operações semelhantes e utilizem elementos semelhantes para a
realização de tarefas similares;
• Affordance: termo usado para se referir a um atributo de um objeto que
permite que as pessoas saibam como utilizá-lo. Significa “dar uma pista”;

• Modelos conceituais e metáforas de interface

Um modelo conceitual apresenta de forma abstrata o que usuários podem

fazer em um sistema e quais conceitos são necessários dominar para interagir
com ele.

• Conceito de interação
A interação humano computador pode ser conceituada como tudo o que
ocorre quando uma pessoa e um sistema computacional se unem para
realizar tarefas, tendo em vista um objetivo.
 • Os quatro tipos principais de interação: instrução, conversação,
manipulação e exploração

• Instrução - Neste estilo os usuários emitem instruções para um sistema.

Existem diversas maneiras de enviar essas instruções: digitar comandos,
escolher opções disponíveis nos menus de algum ambiente baseados em
janelas, ícones, utilizar comando por voz, gestos, apertar botões ou
utilizar uma combinação de teclas de função.

• Conversação - Neste estilo o usuário pode ter um diálogo com o sistema.

O usuário pode falar através de uma interface ou digitar perguntas e ter
como resposta do sistema texto ou voz.

• Manipulação - Abrir, fechar, empurrar, puxar, segurar e colocar são alguns

dos tipos de manipulação que os usuários podem realizar com objetos em
espaços físicos e virtuais. Em meio a interação o usuário pode aperfeiçoar
seu conhecimento familiar ligado a como interagir com objetos.

• Exploração - O usuário pode se locomover em ambientes físicos ou

virtuais. Mundos 3D, sistemas com realidade expandida ou virtual são
exemplos de ambientes virtuais. Espaços físicos com tecnologias
baseadas em sensores compondo ambientes inteligentes, também
permitem que os usuários aperfeiçoem seu conhecimento familiar de
como se movimentar fisicamente.

• Design de interação
Projetar produtos interativos para apoiar o modo como as pessoas se
comunicam e interagem em seus cotidianos, seja em casa ou no trabalho.

• Qualidade de uso
Um sistema com boa usabilidade pode ser classificado como um sistema
eficaz, eficiente, fácil de aprender, seguro e útil. Enfim, um sistema com alto grau
de usabilidade apresenta as seguintes características:
• Eficiência: As ações que as pessoas realizam exige uma quantidade de
esforço adequada;
• Eficácia: O sistema realiza as funções que foi planejado para realizar
apresentando informações adequadas e organizadas apropriadamente;
• Fácil de aprender: O sistema possibilita aprender como realizar as ações
e lembrar como repeti-las depois de um certo período de tempo;
• Segurança: O sistema é seguro de operar na variedade de contextos a
que seu uso se destina;
 • Utilidade: O sistema realiza o que o usuário quer que seja feito;
Para obter um bom grau de usabilidade de forma prática, é necessário
ponderar entre quatro fatores de forma harmônica:
• Pessoa;
• Contexto onde a interação acontece;
• Atividades que as pessoas precisam realizar;
• Tecnologias de software e hardware;

• Experiência do usuário
O conceito de experiência do usuário envolve não só a qualidade de uso
relacionada a realização de uma tarefa de forma simples e com baixo esforço
cognitivo. Em diversos momentos essa qualidade relacionada com as emoções
e sentimentos do usuário.
• Acessibilidade: é um critério que pode ser traduzido como a retirada ou
eliminação dos obstáculos que impossibilitam mais usuários de serem
capazes de acessar a interface do sistema e interagirem com ele. O
projeto da interface deve ser inclusivo.
• Comunicabilidade: é um critério que atenta para a responsabilidade que
o designer/projetista tem de transmitir ao usuário suas intenções de
design e a lógica que governa o comportamento da interface.

• Tecnologias com foco em persuasão e mudança comportamental

Tecnologia persuasiva é aquela criada para mudar atitudes ou

comportamentos dos usuários, através de persuasão e influência, mas sem o
uso de coerção. Tecnologia persuasiva é um campo emergente de pesquisa
interdisciplinar, focando em design, desenvolvimento e avaliação de tecnologias.
O objetivo dessas tecnologias é criar consciência sobre comportamentos e
induzir mudanças de comportamentos.
A maioria da pesquisa em tecnologia persuasiva foca em tecnologias de
interação, incluindo computadores desktop, serviços na internet, vídeo games e
tecnologias móveis. (Exemplo: Pokémon Go).

• Requisitos de Projeto – Arquitetura de Informação e programação de

interface

Para que serve Arquitetura de Informação?

• Se você já tentou usar algo e pensamento, "Para onde devo ir a seguir?"
ou “isso não faz sentido”, você está encontrando um problema com uma
Arquitetura da Informação.
 Arquitetura da Informação, termo cunhado (1976) por Richard Saul
Wurman, é focado principalmente na navegação, rótulos, conteúdo,
agrupamento de informações relacionadas e os fluxos de informações em todo
o sistema.
A Information Architecture Institute (IAI) define Arquitetura de Informação
como: A prática de decidir como arrumar as partes de algo para serem
compreendidas. Ela está nos websites que usamos, nos apps e softwares que
baixamos, nos materiais impressos que encontramos e até mesmo nos lugares
físicos que passamos o tempo.
Arquitetura de Informação também pode ser definida como: Um novo campo
do webdesign que difere do design ou da programação visual pelo fato de
focalizar a estrutura do website, e não sua funcionalidade ou seu aspecto gráfico.
A arquitetura da informação é responsável por organizar todos os elementos
de uma página na internet, aplicativo e softwares, para privilegiar a experiência
do usuário e facilitar a sua navegação no conteúdo que deseja encontrar. Sem
esse design de interação, seria impossível estabelecer uma relação entre o
usuário e a página visitada.
AGNER (2007 e 2009) e diz que:
A arquitetura de informação tem surgido como uma importante metadisciplina,
preocupada com o projeto, a implementação e a manutenção de espaços
informacionais digitais para o acesso humano, a navegação e o uso.
O seu foco é o projeto de estruturas para fornecer aos usuários que procuram
informação os recursos necessários para transformar suas necessidades
informacionais em ações e atingir os objetivos com sucesso.

• Informação e conhecimento na era digital: origem da Arquitetura da

Informação
A Arquitetura da Informação tem sua origem no campo da Ciência da
Informação, o qual estuda a “ação mediadora entre a informação e o
conhecimento do indivíduo, assim como as transformações vindas do
aprendizado pessoal em um sentido que passa do mundo interno para externo
do indivíduo”.
(TEIXEIRA, 2014, p.33)
Por isso, para entendermos a Arquitetura de Informação precisamos
compreender antes o conceito de dado, informação e conhecimento.
Dados: Elemento, principio ou quantidade conhecida que serve de base
à solução de um problema. Podem ser descritos por formações formais e
estruturais.
(MICHAELIS ONLINE, 2016; TEIXEIRA, 2014.p.36)
 Informação: É o significado que um ser humano atribui a dados por meio
de convenções usadas em suas representações
(RABAÇA & BARBOSA, 1995)

Conhecimento: Mistura fluida de especializado que incorporar novas

experiência estruturada, valores, informação contextual e discernimento fornece
um parâmetro para avaliar e experiências em informação.
(TEIXEIRA, 2014, p.37)
Se informação é dado trabalhado, então conhecimento é informação
trabalhada (da Silva, 2007). Em outras palavras, a informação são os dados
processados sobre algo ou alguém, e o conhecimento é um conjunto de
informações úteis que foram adquiridas através de aprendizados e experiência.
 • O Papel do Arquiteto de Informação

• Design:
Projetar soluções que reconciliam as necessidades dos usuários, os objetivos do
negócio e as capacidades da tecnologia.
• Gestão:
Gerenciar as equipes multidisciplinares, que projetam e implementam as
soluções. Monitorar e avaliar equipes, definir tarefas do projeto, cronograma,
recursos humanos e financeiros.
• Pesquisa:
Realizar pesquisas com usuários, utilizando técnicas como entrevistas,
questionários, grupos de discussão, estudos etnográficos e testes de
usabilidade.
• Mediação:
Educar, advogar e traduzir os requisitos do projeto para as audiências internas.
Características fundamentais:
• Empatia para com os usuários;
• Pensamento organizado;
• Pesquisa do usuário;
Encontrabilidade: Precede a usabilidade, ou seja, os dados e informações
em que o usuário busca tem que ser de fácil acesso antes de ser usada em
sua necessidade.

• QUAIS AS QUESTÕES A PENSAR ANTES DE TUDO?

Quais são as tarefas que o usuário necessita completar?
✓ Como eles navegam facilmente entre os elementos?
✓ Como fornecer as informações corretas para os usuários nos locais
apropriados onde eles querem?
QUAL O RESULTADO?
✓ Informa a estratégia de conteúdo através da identificação de escolha de
palavras (taxonomia), bem como informando o design da interface do
usuário e o design de interação, desempenhando um papel nos
processos de briefing, sitemap, wireframing e prototipagem.
PORQUE É IMPORTANTE?
✓ O custo de não encontrar a informação é alto;
✓ A construção, manutenção e treinamento podem ser menos custosas;
 ✓ Aumenta o valor da marca;
✓ Aumenta o potencial de ganho financeiro e satisfação do cliente;

• AI com sistemas de informação

Lou Rosenfeld e Peter Morville em seu livro, Information Architecture for the
World Wide Web, falam dos principais sistemas do IA:
• Organização
• Rotulação
• Navegação
• Busca

• INFORMATION ECOLOGY
Para criar esses sistemas de informação, você precisa entender a natureza
dos usuários, conteúdo e contexto.
• Usuário: audiência, tarefas, necessidades, comportamento de busca de
informação, experiência;
• Contexto: Metas de negócios, financiamento, Política, cultura, tecnologia,
recursos, restrições;
• Conteúdo: objetivos de conteúdo, tipos de documentos e dados, volume,
estrutura existente, governança e propriedade;
USUÁRIOS CONTEXTO
Quem são eles, qual seu Compreende as políticas, cultura,
comportamento padrão de busca de objetivos de negócio, missão,
informação e quais são suas estratégia, processos e orçamento
necessidades. de uma organização;
- Pesquisas com usuários; - Definição dos requisitos do
- Definição das necessidades; negócio;
- Personas; - Definição do escopo;
- Etnografia; - Gerenciamento de projetos;
- Análise de tarefas; - Análise de negócios;
- Testes de usabilidade; - Definição de ROI;
- Documentação; - Expectativas do cliente;
- Definição das restrições;
CONTEÚDO
Inclui os documentos, imagens, mídias, gráficos, planilhas e metadatas que os
usuários utilizam rotineiramente ou precisam encontrar.
- Indexação e catalogação;
- Análise de XML e metadata;
- Mapeamento de sites;
- Gerenciamento de conteúdo;
- Análise de tarefas;
- Teste de usabilidade;
- Navegação e rotulação;
- Cardsorting;

• Psicologia Cognitiva

• CARGA COGNITIVA
É a quantidade de informação que uma pessoa pode processar a qualquer
momento. Ter em mente a carga cognitiva do usuário ajuda a impedir que os
arquitetos da informação sobrecarreguem inadvertidamente um usuário com
muita informação de uma só vez.
• MODELOS MENTAIS
São as suposições que as pessoas carregam em suas mentes antes de interagir
com um site ou aplicativo. A informação é mais fácil de descobrir quando está
em um lugar que corresponde ao modelo mental do usuário de onde deveria
estar.
• TOMADA DE DECISÃO
Pode não parecer psicologia, mas é! É um processo cognitivo que nos permite
fazer uma escolha ou selecionar uma opção. Os arquitetos de informação podem
nos ajudar a tomar decisões fornecendo certas informações em momentos
importantes.
• Sistemas de organização

• Formato • Material
• Tamanho • Tipo de uso
• Cor • Público
• Estampa
 Determina como é apresentada a organização e a categorização do
conteúdo. É dividido entre estruturas e esquemas.
Estruturas:
São o tipo de relação entre itens e grupos: podem ser taxonomias, bancos
de dados ou redes.
Taxonomia é definida como a categorização de relacionamentos
(agrupamentos) hierárquicos e equivalentes que são úteis não apenas para os
sistemas de buscas, mas também para hierarquias efetivas de navegação.
As taxonomias são definidas, em sua maioria, com base no modelo mental
de seu público-alvo. Eles podem, então, "marcar" o conteúdo com metadados*,
para que os usuários possam pesquisar conteúdo com base nas taxonomias
assumidas.
❖ O prefixo “Meta” vem do grego e significa “além de”. Assim Metadados
são informações que acrescem aos dados e que têm como objetivo
informar-nos sobre eles para tornar mais fácil a sua organização.
❖ Os metadados têm tradicionalmente sido vistos como separados do
núcleo duro da informação, ou seja, a que está relacionada com as
transações de negócio. O que não quer dizer que não sejam importantes.
Definições e regras de negócio, detalhes de segurança, informação de
domínios, tags XML são metadados.
Esquemas:
São regras para apresentação de itens específicos e podem ser classificados
em ambíguos e exatos.
Esquema Ambíguo: Esquema Exato:
Baseiam na ambiguidade da Dividem a informação entre
linguagem e na subjetividade. seções bem definidas e mutuamente
Podem ser ordenados por: excludentes, tornando óbvia a
localização dos itens. Podem ser:
- Temas
- Alfabético
- Tarefas
- Cronológico
- Público-alvo
- Geográfico
- Metáforas
- Sequencial
- Esquema Híbridos (misturas
dos demais elementos)

“A organização deve refletir sempre a necessidade do usuário, não a estrutura

organizacional da empresa.”
 • Sistema de Rotulação
Definem signos verbais (terminologia) e visuais para cada elemento
informativo e de suporte à navegação do usuário. São criados considerando-se
o conhecimento da empresa, as convenções do domínio, o espaço disponível e
a compreensão pelo usuário, entre outros fatores.
Todo rótulo traz um significado e deve ser claro o suficiente para que o
usuário saiba exatamente no que vai clicar ou acionar. Os significados mudam
de acordo com a(o):
• Cultura;
• Função;
• Tempo;
• Variação Gramatical;
DICA:
• Procure cobrir todo o conceito do conteúdo;
• Mantenha a sintaxe;
• Manter padrão Visual;
• Manter o tom de voz;
• Evite Siglas;
• Ícones são bem vindos, mas cuidado ao usá-lo isolado;

• Sistema de Navegação
Especificam formas de se mover através do espaço informacional. A função
da navegação é mostrar claramente por onde o usuário caminhará na Arquitetura
de Informação.
Principais Elementos:
• Logotipo; • Passo a Passo;
• Menu de navegação global • Cruzada (sugestão de
(1º. nível); conteúdo relacionado);
• Menu de navegação local (2o. • Mapa do site (sistema);
nível); • Índice;
• Bread crumb;

Existem 3 tipos principais de navegação: global, local e contextual.

É muito importante sempre garantir que o usuário saiba:
De onde vim?, Onde estou ?, Qual meu ponto de referência? Para onde posso
(devo) ir?

• Sistema de Busca
É a ferramenta que cria um atalho entre o conteúdo do sistema.
IMPORTANTE:
O sistema tem conteúdo ou tarefas suficientes para que seja necessário a
implementação?
Principais Elementos:
Interface inicial:
• Que tipo de busca deve ser procurado? E onde ele busca? Botão de
Busca sempre presente.
Interface do resultado de Busca:
• Qual informação vai exibir? Como exibir? Quais as informações são
necessårias?
Interface de busca sem resultados:

• Sugerir outros resultados é interessante;

• Ofereça ajuda.
DICAS:
• Mantenha o campo em todas • Destaque os termos que
as páginas; foram buscados;
• Indique o que ele pode • Apresente o número de
buscar; resultados encontrados;
• Sugira correções na busca; • Agrupe resultados;
• Faça sugestões de busca; • Ofereça filtros e opções de
• Repita os termos buscados; ordenação;

• Artefatos da Arquitetura da informação

Sitemap:
• Mostram as relações entre páginas e seus conteúdos:
[Link]
• Sitemaps oferecem um esquema de navegação que parte de um
conteúdo principal e já mostra a grandiosidade do projeto, o arquiteto de
 informação através de um sitemap já consegue rotular seções e
consequentemente agrupar o conteúdo de maneira lógica e funcional;
• Existem softwares como o Visio® e o OmniGraffle® que servem para
desenhar fluxogramas e são ótimos para arquitetar sitemaps;
Ferramenta de criação:
Se você é do time que prefere usar uma ferramenta para fazer o seu sitemap,
algumas opções são:
• Google XML Sitemaps: um plugin gratuito para WordPress que gera o
sitemap para você.
• Yoast SEO: plugin para WordPress voltado principalmente para
otimizações de SEO, mas também tem a opção de gerar sitemap.
• XML-Sitemaps: uma ferramenta online que gera o sitemap em texto, html
ou xml de forma simples e rápida. Basta você colar o link do seu site e
apertar start.
• GSiteCrawler: é um simulador de rastreador que analisa o site e com
base nisso cria um sitemap.
O iceberg da arquitetura de informação poderia ser resumido no esquema a
seguir: