SlideShare uma empresa Scribd logo
Profa. Andrea Dalforno
Introdução
 O foco no design de interface é na experiência do
  usuário e interação.

 Um bom design de interface é funcional e facilita a
  conclusão das tarefas pelo usuário.

 O processo de design deve equilibrar funcionalidade
  técnica e elementos visuais para criar um sistema
  que não é apenas operacional, mas também útil e
  adaptável para alterar as necessidades do usuário.
Introdução
 Como todo trabalho de design, ele é um projeto, e
  necessita uma análise informacional, a partir de um
  briefing. Detectar corretamente o objetivo do projeto é
  essencial para um bom planejamento, de modo que as
  ações sejam tomadas de forma correta.

 É sempre necessário definir o público alvo do site, o
  objetivo, os serviços oferecidos, o diferencial para o
  público. A partir dessas e de outras informações
  relevantes ao projeto e do conteúdo, será definida a
  arquitetura da informação, a estrutura de navegação e o
  layout.
Introdução
 Uma vez que esteja claramente definida a arquitetura da
  informação, a estrutura de navegação e o layout, você
  pode então começar a organizar o seu futuro site em
  páginas de conteúdo com foco na funcionalidade e
  usabilidade para facilitar a interação e a comunicação.

 Então, o processo de design segue utilizando os
  softwares gráficos para definir a diagramação da tela,
  definindo o layout em subáreas e a disposição dos
  elementos visuais verbais (tipografia) e não verbais
  (imagens).
DESIGN DE INTERFACE
Arquitetura da Informação
 A Arquitetura da Informação consiste no design de
  ambientes informacionais compartilhados e é a base para um
  excelente Web Design. É a planta de um site, sobre a qual
  todos os outros aspectos são construídos - função, metáfora,
  navegação, layout, interação e comunicação visual.

 O termo arquitetura da informação descreve um conjunto de
  habilidades especializadas que se relaciona à interpretação
  da informação e expressão de distinções entre signos e
  sistemas de signos. Há algum grau de origem na
  biblioteconomia. Muitas escolas com biblioteca e
  departamentos de ciência da informação ensinam
  arquitetura da informação.
Arquitetura da Informação
 A arquitetura da informação é a categorização da informação
  em uma estrutura coerente, preferencialmente aquela que a
  maioria das pessoas possa compreender rapidamente.
  Geralmente é hierárquica, mas pode ter outras estruturas,
  como concêntrica ou até mesmo caótica. Ela está totalmente
  relacionada com a filosofia e a semiótica.

 No contexto do projeto de sistemas de informação, a
  arquitetura da informação refere-se à análise e ao design dos
  dados armazenados pelos mesmos, concentrando sobre as
  entidades seus atributos e relacionamentos.
Arquitetura de Informação
Segundo Peter Morville e Louis Rosenfeld ,


     “a arquitetura da informação é a arte e a ciência de
     organizar a informação para ajudar as pessoas a
     satisfazer suas necessidades de informação de
     forma efetiva (…) o que implica organizar, navegar,
     marcar e buscar mecanismos nos sistemas de
     informação.”

Ou seja, a usabilidade começa com aqui! A usabilidade é,
praticamente, garantida se a arquitetura da informação for bem
planejada.
Arquitetura de Informação
A arquitetura da informação tem como objetivos
(Garret, 2003):
 Prover as condições para o usuário chegar de um
  ponto a outro, levando em conta diferentes modos
  de chegar às informações.
 Comunicar as relações entre os elementos, levando
  em conta desde o contexto geral de informações
  quanto as suas unidades.
 Comunicar as relações entre o conteúdo geral e a
  página que o usuário está vendo.
Arquitetura de Informação
A concepção de caminhos para o usuário chegar a informações específicas se
baseia em modelos conceituais como:
 A aderência das informações e do conteúdo aos objetivos do site.
 A aderência ao enfoque conceitual e editorial, que inclui o planejamento
  da experiência do usuário e do modo como as informações estabelecem
  processos de comunicação/ interlocução/ reação.
 A antecipação dos modelos mentais do usuário, padrões de conduta em
  relação às informações, dispositivos, recursos tecnológicos, circunstâncias
  de acesso (na rua, no escritório em casa em viagem).
 Relação adequada entre a extensão e a profundidade das áreas de
  informação.
 Modo como as informações fluem de dentro de uma organização para o
  público externo, de modo a valorizar mais ou menos as informações
  internas.
Arquitetura de Informação
A organização do conteúdo e dos dados online deve prevê aspectos como:
 O modo como as informações fluem do público externo para uma
  organização.
 O modo como as informações fluem dentro de uma organização para o
  público interno (especialmente no caso das intranets).
 O modo como as informações fluem independentemente da organização
  (na sociedade em geral ou em grupos, comunidades, culturas geográficas
  específicas).
Como planejar tudo
  isso na prática?
Defina os objetivos do site
    O primeiro passo o planejamento da arquitetura da informação é definir
     os objetivos do site.

    Não basta ter um site porque todo mundo tem um, pois, ao invés de
     contribuir para melhorar a imagem de uma empresa ou pessoa, o
     resultado pode ser contrário e devastador.

    Então, se você não sabe o que está tentando alcançar, por que
             se arriscar ou se ocupar construindo um site?

    Definir os objetivos de um site estabelece uma ideia clara e bem
     documentada do que você irá fazer, e assegura o sucesso e retorno
     esperado. Importante! O consenso do grupo que está desenvolvendo o
     site pode fazer o projeto acontecer ou parar. Por isso, trabalhar com
     metodologias é fundamental!
Defina o papel de cada pessoa do grupo
 Determinar as pessoas que estarão envolvidas no
  projeto, bem como a função de cada uma delas é
  fundamental.

 É importante que estas pessoas estejam se
  comunicando umas com as outras. É importante,
  também, que uma pessoa seja responsável pelo
  gerenciamento do projeto, mas sem atitudes de
  “controle absoluto” do processo. É necessário saber
  liderar, de forma que o trabalho seja executado de
  forma organizada e respeitando o cronograma definido.
Faça perguntas
Quando estiver reunido com o cliente para definição do
briefing, ou na fase de levantamento de dados, quatro
questões são de extrema importância para o projeto:

 Qual é a missão e o propósito da organização?

 Quais são os objetivos de curto a longo prazo do site?

 Qual é o público-alvo?

 Por que as pessoas irão visitar o site?
Transforme as respostas em metas
Nesta etapa você deve ter vários dados que precisam ser
filtrados e organizados para transformar em metas (e mini
metas). Desta forma, é importante que:

 agrupe suas metas em categorias;
 classifique a ordem de importância
 certifique-se de que seu cliente concorda e assina
  embaixo os objetivos/metas do site.
Defina o público-alvo
Algumas pessoas pensam que o público-alvo é definido
pela tecnologia que usam para acessar o site. Porém, este é
apenas um quesito para definição do público-alvo. Para
definir o público-alvo você precisa de informações como:
faixa etária, gênero, nível educacional, tamanho da família,
renda e localização geográfica.

Atenção! Se o objetivo é atingir/atrair outras empresas
você precisa detalhar o tipo de empresa, tamanho, cargos,
funções, estimativa de receita, áreas geográficas de
atuação, etc.
Defina a experiência do usuário
 Definir de antemão a experiência que você quer que o
  usuário tenha facilita a definição da estrutura de
  navegação, maximiza o alcance aos objetivos/metas, e
  garante uma boa usabilidade da interface.

 Criar cenários, ou histórias, facilitam a previsão e
  visualização do site e da experiência do usuário.
Crie cenários e histórias
 Selecione um conjunto de usuários que represente a
  maioria dos visitantes.

 Para cada usuário, crie um personagem, um cenário, e
  defina uma tarefa a ser realizada no site (use uma tarefa
  da sua lista de necessidades e metas).

 Então tente escrever uma história sobre como o
  personagem utiliza o site para completar a tarefa
  escolhida.
Analise os similares
   Conhecer a concorrência ajuda a enxergar o projeto que será
    desenvolvido.
   Faça uma pesquisa de empresas/sites com produtos/serviços/conteúdos
    similares.
   Defina características e critérios a serem avaliados. Organizar as
    informações em uma planilha ajuda a visualizar e avaliar os pontos
    positivos e negativos dos similares.
Identifique o conteúdo e os requisitos funcionais
   Use a lista de objetivos, as necessidades do público, e sua análise
    competitiva e crie outras duas listas: uma de componentes de conteúdo e
    outra de requisitos funcionais para o site.
   Defina um “inventário de conteúdo” classificando as
    informações/recursos por tipo de conteúdo : estático, dinâmico,
    funcional e transacional.
         exemplos de conteúdo estático: copyright, política de privacidade,
           e regras de participação.
         exemplos de conteúdo dinâmico: hiperlinks, tags, rss.
         exemplos de conteúdo funcional: menus, botões (entrar, limpar,
           cancelar, etc).
         exemplos de conteúdo transacional: login de membros,
           formulários, downloads, uploads, compras.
Agrupe e Rotule o Conteúdo

 Organize o conteúdo. Comece criando um índice, escrevendo
  cada componente do inventário. Agrupe os componentes por
  assuntos/funções e defina um nome para cada grupo.

 Com base nos grupos, defina as seções do site, e defina a
  base para a estrutura de navegação.
DESIGN DE INTERFACE
Estrutura de Navegação
Na Web as pessoas ficam totalmente perdidas porque
não há senso de direção, de proporção e de
localização. Por isso, a hierarquia do site é tão
importante. A navegação precisa ajudar o usuário a
encontrar o que procura e dizer-lhe onde está. Além
disso, ela diz o que o site contém, como usá-lo e faz
com que os visitantes confiem nas pessoas que o
construíram.
Estrutura de Navegação
A estrutura de navegação de um web site é organizada
para que cada visitante possa compreendê-la com
rapidez e se desloque facilmente entre páginas e
seções. Quanto mais rapidamente o visitante construir
um modelo mental de resposta a esta estrutura, mais
fácil será o seu deslocamento.
Estrutura de Navegação
1.   Que site é este? (identificação do site)
2.   Em que página estou? (nome da página)
3.   Quais são as seções principais deste site? (seções)
4.   Quais são minhas opções neste nível? (navegação local)
5.   Onde estou no esquema das coisas? (indicadores “Você está
     aqui”)
6.   Como posso procurar?
                                                  (KRUG, 2001:87)
Home page ou Página principal
É recomendável que a página principal tenha um layout diferente das demais
páginas, bem estruturado e com caminhos para as informações mais
relevantes do site. Desta forma, a página principal deve:
 identificar claramente a localização do usuário e a atividade/conteúdo
  mais importante do site e o que este pode oferecer;
 oferecer suporte aos usuários para encontrar o que procuram;
 ser permanentemente atualizada e identificar o conteúdo renovado;
 Marcar a localização do usuário;
 ter mais área para a navegação do que para conteúdo;
 Informar os assuntos de maneira concisa e direta;
 ser dividida em diferentes seções de acordo com os objetivos estratégicos
  da marca e com a estrutura de informações;
 uma seção ou menu com links para as áreas mais acessadas pelos
  usuários.
Páginas internas
Para facilitar a navegação e a realização de tarefas nas páginas internas é
recomendável:
 apresentar em destaque o nome da página Principal, de preferência no
  canto superior esquerdo;
 mostrar a marca da empresa ou organização em local bem visível, ligado à
  página principal;
 manter o mesmo estilo e identidade visual em todas as páginas;
 manter o foco em aspectos mais específicos;
 localizar o usuário em relação ao resto do site;
 manter as informações estruturais de navegação, sempre em locais de
  fácil acesso e visualização.
Links
Os links permitem que o usuário se desloque de uma página para outra
localizada em diferente URL (Uniform Resource Locator), que pode ser
relativo ao mesmo ou a outro site, através de uma estrutura hipertextual de
informações. Links devem ser sinalizados claramente e sua funcionalidade
ficar aparente na página, e para tanto:
 normalmente são associados a textos sublinhados;
 devem ter cores ligeiramente diferentes dos demais textos;
Tipos de links:
 Links incluídos num texto (ex: hiperlinks)
 Links estruturais (ex: menus, barra de navegação)
 Links tipo “saiba mais“
 Links de suporte à navegação (ex: voltar, avançar)
 Links em mapas de imagens
Componentes da interface web
 Área de conteúdo                      Ferramentas de busca (interna)
 Área restrita                         Formulários
 Atalhos                               Links (internos e externos)
 Banners                               Mapa do site
 Barra de localização (breadcrumbs)    Marca
 Barra de navegação                    Menus
 Barra de rolagem                      Tags
 Calendário                            Título da página
Tipos de estrutura de navegação
Linear ou sequencial
Hierárquica ou arborescente
Matricial ou em grade
Híbrida
Personalizada
Participativa
"Caótica" ou em teia
Cross-media (mídias cruzadas)
Cross-channel (ou transchannel, canais cruzados)
Multi-channel (multi-canais)
Linear ou sequencial
Define o deslocamento de página a página com botões tipo
"Próxima página" e "Página anterior". O processo de compras
em um site de comércio, por exemplo, segue uma ordem que
vai desde a identificação do usuário e dos produtos que quer
comprar até a confirmação da compra. O início e o final são
previsíveis dentro da lógica que os encadeia.
Hierárquica ou arborescente
Liga tópicos genéricos a tópicos mais específicos, com base na
construção de uma taxonomia. As informações podem se
estruturar de alto para baixo como os ramos de uma árvore ou
de baixo para cima, segundo a estrutura de um banco de dados
hospedado num servidor, que atende às solicitações dos
usuários.
A estrutura hierárquica pode apresentar diversas estruturas
dominantes, com subordinações para cada uma delas e neste
caso se configurar como uma estrutura Poli-hierárquica.
Matricial ou em grade
Neste caso, a estrutura não é hierarquizada e segue um modelo
horizontal, porém o deslocamento entre páginas não é
necessariamente linear.
Os "Links relacionados" (ou "Veja também") que unem diversas
páginas de um mesmo site segundo algumas afinidades
temáticas entre informações podem estabelecer uma estrutura
matricial.
Híbrida
Tópicos genéricos se ligam a tópicos mais específicos, ou vice-
versa, de acordo com conteúdo gerado dinamicamente pelo
usuário.
Diversos critérios de organização, entre horizontais e verticais,
se combinam para criar uma experiência de uso integrada.
Personalizada
O usuário define as informações que quer receber ou as
ferramentas do próprio site rastreiam o percurso que o usuário
percorreu durante uma visita e selecionam o conteúdo de sua
preferência (normalmente o mais acessado).
Participativa
Estruturada em torno das ações dos usuários e dos objetos
sociais criados ou modificados durante estas ações.
"Caótica" ou em teia
Não apresenta uma ordem aparente, é uma estrutura de certa
forma randômica. Os percursos são definidos pelos usuários que
se deslocam de acordo com os seus interesses, seguindo
hiperlinks que encontram nas páginas, ou ordenações baseadas
nas características das próprias informações. É a forma de
estrutura que oferece mais risco de desorientação, no entanto
permite o cruzamento total e irrestrito de informações, pois não
está condicionada a nenhum modelo pré-definido.
Cross-media (mídias cruzadas)
Segue os encadeamentos de um ambiente amplo de
informações, composto por um conjunto de ambientes mais
restritos, mídias e canais interligados, que se complementam e
dependem um do outro para compor uma experiência de uso ou
completar uma ideia ou tarefa. Considera a experiência de
acesso e uso fragmentada ou parcial em cada um, sendo que
nenhum produto em si provê a experiência completa.
O cadastro de um email para receber uma mala direta é uma
experiência cross-mídia quando há o envio de mensagem para a
caixa postal do assinante e este precisa clicar num link para
confirmar o cadastro. O cadastro não é finalizado caso não haja
confirmação.
Cross-channel / transchannel /canais cruzados)
Considera uma estrutura de informações de canais cruzados,
composta por elementos dispersos de maneira estruturada
(criação, publicação, ação, relacionamento, recriação). O
conjunto dos elementos individuais, cada um contribuindo à sua
maneira, compõe uma experiência integrada, entre canais.
Um único canal pode ou não prover uma porta de entrada ao
ambiente, e a maioria dos usuários não percorre todos os seus
pontos de contato do início ao fim. Alguns canais permitem que
os usuários completem a sua experiência sem precisar de
outros.
Multi-channel (multi-canais)
Oferta de serviços ou experiências da mesma natureza que
podem ser acessados ou usados a partir de inúmeros canais. Os
usuários acessam um ou outro e podem realizar a mesma tarefa
ou acessar a mesma informação completa.
Ou seja, um correntista de um banco acessa a sua conta através
do web site e obtém o seu extrato, mas pode fazê-lo também
num caixa eletrônico, pelo seu celular, ou pelo caixa do banco. A
realização destas tarefas inteiras independe do acesso a outros
canais complementares, como o recebimento de mala direta
postal ou o recebimento de mensagens telefônicas.
DESIGN DE INTERFACE
Layout
O layout precisa transmitir a informação desejada com
eficiência. É preciso que o layout seja um elo de
comunicação com o usuário, que sua linguagem seja
condizente com o objetivo do site.

Cada elemento inserido em um website deve ter um
objetivo, a perfeição de um website se atinge quando
não há nada a ser retirado e não quando não há nada
mais a ser inserido.
Layout
Será necessário definir blocos de
espaço para a navegação global e
local, e integrar os demais elementos
do site que podem não fazer parte da
estrutura de navegação. Publicidade e
chamadas de patrocínio devem ser
incorporadas ao design.


Primeiro deve ser definido o layout da
página principal, e, com base neste,
deve ser definido o layout padrão das
páginas internas. Dependendo do
projeto, será necessário criar layouts
específicos para algumas páginas.
Design do layout
 Utilizando um programa gráfico, crie um arquivo
  com as dimensões do seu site.
 Crie um retângulo representando a página, e
  delineie blocos para os elementos visuais e
  conteúdos do seu design.
 Outros elementos precisam ser considerados:
  branding (marca, logotipo, slogan), publicidade e
  patrocínio, navegação, títulos da página, gráficos do
  cabeçalho, e rodapés (incluindo copyright).
 Experimente dois ou três layouts com estilos
  diferentes
Esboços/modelos do site
 Esboços/modelos são usados para estabelecer o
  visual e o estilo do site.

 É necessário saber o tamanho dos arquivos gráficos,
  bem como quaisquer outras restrições técnicas, e
  representar o site de fato.

 Os modelos precisam ser o mais parecidos possível
  com as páginas reais do site. Use seu programa
  gráfico favorito para manipular os esboços.
DESIGN DE INTERFACE
Introdução
Usabilidade é o conceito utilizado para       A usabilidade é relacionada à eficácia e
descrever a qualidade da interação de uma     eficiência da interface diante do usuário e
interface diante de seus usuários, e está     pela reação do usuário diante da interface.
relacionada aos estudos de Ergonomia e de
Interação Humano-Computador (IHC).
                                              Segundo os standards ISO
Esta qualidade está associada de acordo com   9241-11 (Guidance on Usability,
os seguintes princípios:                      1998), usabilidade é a
 facilidade de aprendizado;                  amplitude de uso de
 facilidade de memorização de tarefas no     determinado produto por seus
  caso de uso intermitente;
                                              usuários, de modo que possam
 produtividade dos usuários na execução de
  tarefas;                                    realizar tarefas de maneira
 prevenção, visando a redução de erros por   efetiva, eficiente e satisfatória
  parte do usuário;                           num contexto definido.
 satisfação subjetiva do usuário.
Antecipação da experiência
Deve-se considerar alguns fatores para facilitar a antecipação da experiência
de uso:
 Prover baixo tempo de download para a interface e imediata percepção de
  valor aos usuários;
 Oferecer suporte à navegação e ao uso, por meio de mensagens claras e
  objetivas;
 Facilitar o aprendizado de uso, de modo que o usuário possa usar o site
  sem precisar de aprendizado formal;
 Informar o usuário as tarefas a realizar;
 Permitir a reversibilidade das ações, para que o usuário possa explorar o
  site e, caso "erre o caminho" ou desista de uma tarefa, volte à etapa inicial;
 Incluir pequenos resumos próximos aos links;
 Incluir "Links relacionados“.
Importante!
 Autonomia orientada – para que o usuário tenha controle sobre sua ação
 num site ou plataforma online, um ambiente adequado de uso facilita a
 navegação e a realização de tarefas sem necessidade de apoio ou suporte.


 Antecipação da experiência – quando o usuário aprende facilmente a
 estrutura de informações e as funcionalidades disponíveis, sabe o que vai
 encontrar antes de selecionar o conteúdo de um site, bem como antes de
 usar uma ferramenta.


 Consistência funcional e de produtividade – os usuários memorizam
 facilmente os modelos aplicados e os aplicativos respondem à mesma ação
 aprendida pelos usuários com os mesmos resultados, em qualquer
 momento, em qualquer tela, com poucos erros e mal-entendidos.
Benefícios para o usuário
 Autonomia do usuário, que se sente no controle das
 suas ações e das suas impressões subjetivas.

 Satisfação do usuário com a experiência de uso e com
  o veículo de modo geral, em decorrência do controle e
  da percepção crítica das ações.
Consistência funcional e de produtividade
Consistência em interfaces web se refere à homogeneidade e à coerência de
situações que devem ser tratadas, apresentadas ou acionadas de maneira
semelhante. Antecipando as respostas do sistema, interfaces consistentes
facilitam o aprendizado e aumentam a produtividade dos usuários, que
cometem menos erros e controlam melhor suas ações.
 Coordenação entre a funcionalidade da interface e o comportamento do
 usuário;
 Provimento de respostas claras e imediatas;
 Invisibilidade do conceito aplicado na estrutura de navegação;
 Visibilidade informativa;
 Layout e funcionalidades do programa previsíveis de acordo com modelos
 pré-definidos;
 Posicionamento dos elementos de acordo com convenções já aceitas pelo
 senso comum;
 Consistência terminológica.
Fatores a considerar
 Quando o uso é sujeito a erros frequentes, colocar condicionantes que forcem a
  adaptação dos usuários para que a tarefa seja realizada corretamente.
 Grau de familiaridade do usuário médio do site com o uso da internet e suas
  ferramentas.
 Adaptação da interface às condições físicas ou de acesso do usuário.
 Uso de convenções já aceitas em grandes sites e portais, que facilita a localização de
  informações.
 Clareza da localização das páginas de abertura das seções principais em relação à
  página Principal.
 Orientação visual dos percursos a seguir, dos caminhos percorridos e pontos de
  chegada.
 Sinalização visual dos pontos onde os usuários devem permanecer mais tempo.
 Sinalização do status de uma tarefa durante a sua realização.
 Manutenção da continuidade da ação entre etapas.
 Possibilidade de opção sobre a instalação de plug-ins e programas no computador
  ou no browser do usuário para a visualização de imagens e animações.

Mais conteúdo relacionado

Mais procurados

Apresentação de Design Thinking
Apresentação de Design ThinkingApresentação de Design Thinking
Apresentação de Design Thinking
baufaker
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
Robson Santos
 
Usabilidade - Metas, Principios e Heuristicas
Usabilidade -  Metas, Principios e HeuristicasUsabilidade -  Metas, Principios e Heuristicas
Usabilidade - Metas, Principios e Heuristicas
Lidiane Dos Santos Carvalho
 
Design Thinking - Metodologia para Inovação
Design Thinking - Metodologia para InovaçãoDesign Thinking - Metodologia para Inovação
Design Thinking - Metodologia para Inovação
Paulo Oliveira
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
Tersis Zonato
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
Felipe Dal Molin
 
Personas e Cenários
Personas e CenáriosPersonas e Cenários
Personas e Cenários
Luiz Agner
 
Introdução ao Design Thinking
Introdução ao Design Thinking   Introdução ao Design Thinking
Introdução ao Design Thinking
Priscila Machado
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 Introdução
Alan Vasconcelos
 
Aula - Metodologias Ágeis
Aula - Metodologias ÁgeisAula - Metodologias Ágeis
Aula - Metodologias Ágeis
Mauricio Cesar Santos da Purificação
 
Internet das Coisas
Internet das CoisasInternet das Coisas
Internet das Coisas
Elizabeth Fantauzzi
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
André Constantino da Silva
 
Oficina Design Thinking para Educadores - por Davi Moreno
Oficina Design Thinking para Educadores - por Davi MorenoOficina Design Thinking para Educadores - por Davi Moreno
Oficina Design Thinking para Educadores - por Davi Moreno
Davi Moreno
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
Guilherme Marques
 
Aula 6 - Qualidade de Software
Aula 6 - Qualidade de SoftwareAula 6 - Qualidade de Software
Aula 6 - Qualidade de Software
Leinylson Fontinele
 
UX Research
UX ResearchUX Research
UX Research
Daniel Coscarelli
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
iMasters
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
Instituto Faber-Ludens
 
Scrum - Fundamentos, teorias e práticas!
Scrum - Fundamentos, teorias e práticas!Scrum - Fundamentos, teorias e práticas!
Scrum - Fundamentos, teorias e práticas!
Annelise Gripp
 
Brainstorming
BrainstormingBrainstorming
Brainstorming
Bruna M
 

Mais procurados (20)

Apresentação de Design Thinking
Apresentação de Design ThinkingApresentação de Design Thinking
Apresentação de Design Thinking
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
 
Usabilidade - Metas, Principios e Heuristicas
Usabilidade -  Metas, Principios e HeuristicasUsabilidade -  Metas, Principios e Heuristicas
Usabilidade - Metas, Principios e Heuristicas
 
Design Thinking - Metodologia para Inovação
Design Thinking - Metodologia para InovaçãoDesign Thinking - Metodologia para Inovação
Design Thinking - Metodologia para Inovação
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
 
Personas e Cenários
Personas e CenáriosPersonas e Cenários
Personas e Cenários
 
Introdução ao Design Thinking
Introdução ao Design Thinking   Introdução ao Design Thinking
Introdução ao Design Thinking
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 Introdução
 
Aula - Metodologias Ágeis
Aula - Metodologias ÁgeisAula - Metodologias Ágeis
Aula - Metodologias Ágeis
 
Internet das Coisas
Internet das CoisasInternet das Coisas
Internet das Coisas
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 
Oficina Design Thinking para Educadores - por Davi Moreno
Oficina Design Thinking para Educadores - por Davi MorenoOficina Design Thinking para Educadores - por Davi Moreno
Oficina Design Thinking para Educadores - por Davi Moreno
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Aula 6 - Qualidade de Software
Aula 6 - Qualidade de SoftwareAula 6 - Qualidade de Software
Aula 6 - Qualidade de Software
 
UX Research
UX ResearchUX Research
UX Research
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Scrum - Fundamentos, teorias e práticas!
Scrum - Fundamentos, teorias e práticas!Scrum - Fundamentos, teorias e práticas!
Scrum - Fundamentos, teorias e práticas!
 
Brainstorming
BrainstormingBrainstorming
Brainstorming
 

Destaque

Webdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criaçãoWebdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criação
Odair Cavichioli
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
fevooduck
 
Aula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo AranhaAula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo Aranha
fevooduck
 
Fundamentosdowebdesign
FundamentosdowebdesignFundamentosdowebdesign
Fundamentosdowebdesign
Jaqueline Franco
 
Design e Planejamento
Design e PlanejamentoDesign e Planejamento
Design e Planejamento
Beto Lima Branding
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
Juliana Padron
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sites
Celina Uemura
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
André Constantino da Silva
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
Cristiano Pires Martins
 
Técnicas visuais
Técnicas visuaisTécnicas visuais
Interface Homem Computador - Aula04 - Principios da Gestalt
Interface Homem Computador - Aula04 - Principios da GestaltInterface Homem Computador - Aula04 - Principios da Gestalt
Interface Homem Computador - Aula04 - Principios da Gestalt
CEULJI/ULBRA Centro Universitário Luterano de Ji-Paraná
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
Cristiano Pires Martins
 
Design Digital Técnicas Visuais
Design Digital Técnicas VisuaisDesign Digital Técnicas Visuais
Design Digital Técnicas Visuais
DESIGN DIGITAL UNIARA 2012
 
Design Thinking & Innovation Games : Presented by Cedric Mainguy
Design Thinking & Innovation Games : Presented by Cedric MainguyDesign Thinking & Innovation Games : Presented by Cedric Mainguy
Design Thinking & Innovation Games : Presented by Cedric Mainguy
oGuild .
 

Destaque (14)

Webdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criaçãoWebdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criação
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
 
Aula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo AranhaAula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo Aranha
 
Fundamentosdowebdesign
FundamentosdowebdesignFundamentosdowebdesign
Fundamentosdowebdesign
 
Design e Planejamento
Design e PlanejamentoDesign e Planejamento
Design e Planejamento
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sites
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
 
Aula 05 layout e composição do site
Aula 05   layout e composição do siteAula 05   layout e composição do site
Aula 05 layout e composição do site
 
Técnicas visuais
Técnicas visuaisTécnicas visuais
Técnicas visuais
 
Interface Homem Computador - Aula04 - Principios da Gestalt
Interface Homem Computador - Aula04 - Principios da GestaltInterface Homem Computador - Aula04 - Principios da Gestalt
Interface Homem Computador - Aula04 - Principios da Gestalt
 
Aula 04 layout e composição do site
Aula 04   layout e composição do siteAula 04   layout e composição do site
Aula 04 layout e composição do site
 
Design Digital Técnicas Visuais
Design Digital Técnicas VisuaisDesign Digital Técnicas Visuais
Design Digital Técnicas Visuais
 
Design Thinking & Innovation Games : Presented by Cedric Mainguy
Design Thinking & Innovation Games : Presented by Cedric MainguyDesign Thinking & Innovation Games : Presented by Cedric Mainguy
Design Thinking & Innovation Games : Presented by Cedric Mainguy
 

Semelhante a DESIGN DE INTERFACE

Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10
Rafael Marinho
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
Rio Info
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
duradez
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e Usabilidade
Scriptutex
 
Apresentacao arquitetura-de-informaçaõ
Apresentacao arquitetura-de-informaçaõApresentacao arquitetura-de-informaçaõ
Apresentacao arquitetura-de-informaçaõ
Rafael Henrique
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
wudrs
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
wudrs
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
Marcello Cardoso
 
Aula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de InformaçãoAula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de Informação
pedrinabrasil071
 
O Arquiteto da Informação
O Arquiteto da InformaçãoO Arquiteto da Informação
O Arquiteto da Informação
Claudio Diniz - Designer Gráfico
 
Arquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e DesenvolvimentoArquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e Desenvolvimento
Claudio Diniz - Designer Gráfico
 
Usabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoUsabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informação
Alan Vasconcelos
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de Informação
Ltia Unesp
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
pospipoca
 
O arquiteto de informacao bibliotecario
O arquiteto de informacao bibliotecarioO arquiteto de informacao bibliotecario
O arquiteto de informacao bibliotecario
Rick Santos
 
Planejamento e gestão de Portais Corporativos
Planejamento e gestão de Portais CorporativosPlanejamento e gestão de Portais Corporativos
Planejamento e gestão de Portais Corporativos
Suzana Ribeiro
 
Arquitetura da-informacao-tutorial
Arquitetura da-informacao-tutorialArquitetura da-informacao-tutorial
Arquitetura da-informacao-tutorial
Marcvs Villie
 

Semelhante a DESIGN DE INTERFACE (20)

Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e Usabilidade
 
Apresentacao arquitetura-de-informaçaõ
Apresentacao arquitetura-de-informaçaõApresentacao arquitetura-de-informaçaõ
Apresentacao arquitetura-de-informaçaõ
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2Cenário da Profissão - Núcleo de Projeto de Interface da AG2
Cenário da Profissão - Núcleo de Projeto de Interface da AG2
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Aula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de InformaçãoAula Design Web Arquitetura de Informação
Aula Design Web Arquitetura de Informação
 
O Arquiteto da Informação
O Arquiteto da InformaçãoO Arquiteto da Informação
O Arquiteto da Informação
 
Arquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e DesenvolvimentoArquitetura da Informação - Origem e Desenvolvimento
Arquitetura da Informação - Origem e Desenvolvimento
 
Usabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informaçãoUsabilidade aula-03. Processos: Arquitetura de informação
Usabilidade aula-03. Processos: Arquitetura de informação
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de Informação
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
O arquiteto de informacao bibliotecario
O arquiteto de informacao bibliotecarioO arquiteto de informacao bibliotecario
O arquiteto de informacao bibliotecario
 
Planejamento e gestão de Portais Corporativos
Planejamento e gestão de Portais CorporativosPlanejamento e gestão de Portais Corporativos
Planejamento e gestão de Portais Corporativos
 
Arquitetura da-informacao-tutorial
Arquitetura da-informacao-tutorialArquitetura da-informacao-tutorial
Arquitetura da-informacao-tutorial
 

Mais de Andrea Dalforno

MOODLE: uso pedagógico das principais ferramentas
MOODLE: uso pedagógico das principais ferramentasMOODLE: uso pedagógico das principais ferramentas
MOODLE: uso pedagógico das principais ferramentas
Andrea Dalforno
 
Mapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLSMapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLS
Andrea Dalforno
 
Gráfico de Gantt
Gráfico de GanttGráfico de Gantt
Gráfico de Gantt
Andrea Dalforno
 
Como elaborar um relatório técnico
Como elaborar um relatório técnicoComo elaborar um relatório técnico
Como elaborar um relatório técnico
Andrea Dalforno
 
Trabalho em Equipe
Trabalho em EquipeTrabalho em Equipe
Trabalho em Equipe
Andrea Dalforno
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
Andrea Dalforno
 
W3C Web Standards HTML
W3C Web Standards HTMLW3C Web Standards HTML
W3C Web Standards HTML
Andrea Dalforno
 
MÉTODOS DE AVALIAÇÃO DA USABILIDADE
MÉTODOS DE AVALIAÇÃO DA USABILIDADEMÉTODOS DE AVALIAÇÃO DA USABILIDADE
MÉTODOS DE AVALIAÇÃO DA USABILIDADE
Andrea Dalforno
 
USABILIDADE
USABILIDADEUSABILIDADE
USABILIDADE
Andrea Dalforno
 
TIPOGRAFIA
TIPOGRAFIATIPOGRAFIA
TIPOGRAFIA
Andrea Dalforno
 
METODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGMETODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFING
Andrea Dalforno
 
METODOLOGIA DE DESIGN
METODOLOGIA DE DESIGNMETODOLOGIA DE DESIGN
METODOLOGIA DE DESIGN
Andrea Dalforno
 
SEMIÓTICA | CONCEITOS DE SIGNO
SEMIÓTICA | CONCEITOS DE SIGNOSEMIÓTICA | CONCEITOS DE SIGNO
SEMIÓTICA | CONCEITOS DE SIGNO
Andrea Dalforno
 
PERCEPÇÃO VISUAL
PERCEPÇÃO VISUALPERCEPÇÃO VISUAL
PERCEPÇÃO VISUAL
Andrea Dalforno
 
LINGUAGEM VISUAL | ESTILO VISUAL
LINGUAGEM VISUAL | ESTILO VISUALLINGUAGEM VISUAL | ESTILO VISUAL
LINGUAGEM VISUAL | ESTILO VISUAL
Andrea Dalforno
 
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUALLINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
Andrea Dalforno
 
LINGUAGEM VISUAL | MENSAGEM VISUAL
LINGUAGEM VISUAL | MENSAGEM VISUALLINGUAGEM VISUAL | MENSAGEM VISUAL
LINGUAGEM VISUAL | MENSAGEM VISUAL
Andrea Dalforno
 
LINGUAGEM VISUAL | CONTRASTE
LINGUAGEM VISUAL | CONTRASTELINGUAGEM VISUAL | CONTRASTE
LINGUAGEM VISUAL | CONTRASTE
Andrea Dalforno
 
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUALLINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
Andrea Dalforno
 

Mais de Andrea Dalforno (20)

MOODLE: uso pedagógico das principais ferramentas
MOODLE: uso pedagógico das principais ferramentasMOODLE: uso pedagógico das principais ferramentas
MOODLE: uso pedagógico das principais ferramentas
 
Mapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLSMapa Conceitual e CMAP TOOLS
Mapa Conceitual e CMAP TOOLS
 
Gráfico de Gantt
Gráfico de GanttGráfico de Gantt
Gráfico de Gantt
 
Como elaborar um relatório técnico
Como elaborar um relatório técnicoComo elaborar um relatório técnico
Como elaborar um relatório técnico
 
Trabalho em Equipe
Trabalho em EquipeTrabalho em Equipe
Trabalho em Equipe
 
Gestão do Tempo
Gestão do TempoGestão do Tempo
Gestão do Tempo
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
W3C Web Standards HTML
W3C Web Standards HTMLW3C Web Standards HTML
W3C Web Standards HTML
 
MÉTODOS DE AVALIAÇÃO DA USABILIDADE
MÉTODOS DE AVALIAÇÃO DA USABILIDADEMÉTODOS DE AVALIAÇÃO DA USABILIDADE
MÉTODOS DE AVALIAÇÃO DA USABILIDADE
 
USABILIDADE
USABILIDADEUSABILIDADE
USABILIDADE
 
TIPOGRAFIA
TIPOGRAFIATIPOGRAFIA
TIPOGRAFIA
 
METODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFINGMETODOLOGIA DE DESIGN | BRIEFING
METODOLOGIA DE DESIGN | BRIEFING
 
METODOLOGIA DE DESIGN
METODOLOGIA DE DESIGNMETODOLOGIA DE DESIGN
METODOLOGIA DE DESIGN
 
SEMIÓTICA | CONCEITOS DE SIGNO
SEMIÓTICA | CONCEITOS DE SIGNOSEMIÓTICA | CONCEITOS DE SIGNO
SEMIÓTICA | CONCEITOS DE SIGNO
 
PERCEPÇÃO VISUAL
PERCEPÇÃO VISUALPERCEPÇÃO VISUAL
PERCEPÇÃO VISUAL
 
LINGUAGEM VISUAL | ESTILO VISUAL
LINGUAGEM VISUAL | ESTILO VISUALLINGUAGEM VISUAL | ESTILO VISUAL
LINGUAGEM VISUAL | ESTILO VISUAL
 
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUALLINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ESTRATÉGIAS DE COMUNICAÇÃO VISUAL
 
LINGUAGEM VISUAL | MENSAGEM VISUAL
LINGUAGEM VISUAL | MENSAGEM VISUALLINGUAGEM VISUAL | MENSAGEM VISUAL
LINGUAGEM VISUAL | MENSAGEM VISUAL
 
LINGUAGEM VISUAL | CONTRASTE
LINGUAGEM VISUAL | CONTRASTELINGUAGEM VISUAL | CONTRASTE
LINGUAGEM VISUAL | CONTRASTE
 
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUALLINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
LINGUAGEM VISUAL | ELEMENTOS BÁSICOS DA COMUNICAÇÃO VISUAL
 

DESIGN DE INTERFACE

  • 2. Introdução  O foco no design de interface é na experiência do usuário e interação.  Um bom design de interface é funcional e facilita a conclusão das tarefas pelo usuário.  O processo de design deve equilibrar funcionalidade técnica e elementos visuais para criar um sistema que não é apenas operacional, mas também útil e adaptável para alterar as necessidades do usuário.
  • 3. Introdução  Como todo trabalho de design, ele é um projeto, e necessita uma análise informacional, a partir de um briefing. Detectar corretamente o objetivo do projeto é essencial para um bom planejamento, de modo que as ações sejam tomadas de forma correta.  É sempre necessário definir o público alvo do site, o objetivo, os serviços oferecidos, o diferencial para o público. A partir dessas e de outras informações relevantes ao projeto e do conteúdo, será definida a arquitetura da informação, a estrutura de navegação e o layout.
  • 4. Introdução  Uma vez que esteja claramente definida a arquitetura da informação, a estrutura de navegação e o layout, você pode então começar a organizar o seu futuro site em páginas de conteúdo com foco na funcionalidade e usabilidade para facilitar a interação e a comunicação.  Então, o processo de design segue utilizando os softwares gráficos para definir a diagramação da tela, definindo o layout em subáreas e a disposição dos elementos visuais verbais (tipografia) e não verbais (imagens).
  • 6. Arquitetura da Informação  A Arquitetura da Informação consiste no design de ambientes informacionais compartilhados e é a base para um excelente Web Design. É a planta de um site, sobre a qual todos os outros aspectos são construídos - função, metáfora, navegação, layout, interação e comunicação visual.  O termo arquitetura da informação descreve um conjunto de habilidades especializadas que se relaciona à interpretação da informação e expressão de distinções entre signos e sistemas de signos. Há algum grau de origem na biblioteconomia. Muitas escolas com biblioteca e departamentos de ciência da informação ensinam arquitetura da informação.
  • 7. Arquitetura da Informação  A arquitetura da informação é a categorização da informação em uma estrutura coerente, preferencialmente aquela que a maioria das pessoas possa compreender rapidamente. Geralmente é hierárquica, mas pode ter outras estruturas, como concêntrica ou até mesmo caótica. Ela está totalmente relacionada com a filosofia e a semiótica.  No contexto do projeto de sistemas de informação, a arquitetura da informação refere-se à análise e ao design dos dados armazenados pelos mesmos, concentrando sobre as entidades seus atributos e relacionamentos.
  • 8. Arquitetura de Informação Segundo Peter Morville e Louis Rosenfeld , “a arquitetura da informação é a arte e a ciência de organizar a informação para ajudar as pessoas a satisfazer suas necessidades de informação de forma efetiva (…) o que implica organizar, navegar, marcar e buscar mecanismos nos sistemas de informação.” Ou seja, a usabilidade começa com aqui! A usabilidade é, praticamente, garantida se a arquitetura da informação for bem planejada.
  • 9. Arquitetura de Informação A arquitetura da informação tem como objetivos (Garret, 2003):  Prover as condições para o usuário chegar de um ponto a outro, levando em conta diferentes modos de chegar às informações.  Comunicar as relações entre os elementos, levando em conta desde o contexto geral de informações quanto as suas unidades.  Comunicar as relações entre o conteúdo geral e a página que o usuário está vendo.
  • 10. Arquitetura de Informação A concepção de caminhos para o usuário chegar a informações específicas se baseia em modelos conceituais como:  A aderência das informações e do conteúdo aos objetivos do site.  A aderência ao enfoque conceitual e editorial, que inclui o planejamento da experiência do usuário e do modo como as informações estabelecem processos de comunicação/ interlocução/ reação.  A antecipação dos modelos mentais do usuário, padrões de conduta em relação às informações, dispositivos, recursos tecnológicos, circunstâncias de acesso (na rua, no escritório em casa em viagem).  Relação adequada entre a extensão e a profundidade das áreas de informação.  Modo como as informações fluem de dentro de uma organização para o público externo, de modo a valorizar mais ou menos as informações internas.
  • 11. Arquitetura de Informação A organização do conteúdo e dos dados online deve prevê aspectos como:  O modo como as informações fluem do público externo para uma organização.  O modo como as informações fluem dentro de uma organização para o público interno (especialmente no caso das intranets).  O modo como as informações fluem independentemente da organização (na sociedade em geral ou em grupos, comunidades, culturas geográficas específicas).
  • 12. Como planejar tudo isso na prática?
  • 13. Defina os objetivos do site  O primeiro passo o planejamento da arquitetura da informação é definir os objetivos do site.  Não basta ter um site porque todo mundo tem um, pois, ao invés de contribuir para melhorar a imagem de uma empresa ou pessoa, o resultado pode ser contrário e devastador. Então, se você não sabe o que está tentando alcançar, por que se arriscar ou se ocupar construindo um site?  Definir os objetivos de um site estabelece uma ideia clara e bem documentada do que você irá fazer, e assegura o sucesso e retorno esperado. Importante! O consenso do grupo que está desenvolvendo o site pode fazer o projeto acontecer ou parar. Por isso, trabalhar com metodologias é fundamental!
  • 14. Defina o papel de cada pessoa do grupo  Determinar as pessoas que estarão envolvidas no projeto, bem como a função de cada uma delas é fundamental.  É importante que estas pessoas estejam se comunicando umas com as outras. É importante, também, que uma pessoa seja responsável pelo gerenciamento do projeto, mas sem atitudes de “controle absoluto” do processo. É necessário saber liderar, de forma que o trabalho seja executado de forma organizada e respeitando o cronograma definido.
  • 15. Faça perguntas Quando estiver reunido com o cliente para definição do briefing, ou na fase de levantamento de dados, quatro questões são de extrema importância para o projeto:  Qual é a missão e o propósito da organização?  Quais são os objetivos de curto a longo prazo do site?  Qual é o público-alvo?  Por que as pessoas irão visitar o site?
  • 16. Transforme as respostas em metas Nesta etapa você deve ter vários dados que precisam ser filtrados e organizados para transformar em metas (e mini metas). Desta forma, é importante que:  agrupe suas metas em categorias;  classifique a ordem de importância  certifique-se de que seu cliente concorda e assina embaixo os objetivos/metas do site.
  • 17. Defina o público-alvo Algumas pessoas pensam que o público-alvo é definido pela tecnologia que usam para acessar o site. Porém, este é apenas um quesito para definição do público-alvo. Para definir o público-alvo você precisa de informações como: faixa etária, gênero, nível educacional, tamanho da família, renda e localização geográfica. Atenção! Se o objetivo é atingir/atrair outras empresas você precisa detalhar o tipo de empresa, tamanho, cargos, funções, estimativa de receita, áreas geográficas de atuação, etc.
  • 18. Defina a experiência do usuário  Definir de antemão a experiência que você quer que o usuário tenha facilita a definição da estrutura de navegação, maximiza o alcance aos objetivos/metas, e garante uma boa usabilidade da interface.  Criar cenários, ou histórias, facilitam a previsão e visualização do site e da experiência do usuário.
  • 19. Crie cenários e histórias  Selecione um conjunto de usuários que represente a maioria dos visitantes.  Para cada usuário, crie um personagem, um cenário, e defina uma tarefa a ser realizada no site (use uma tarefa da sua lista de necessidades e metas).  Então tente escrever uma história sobre como o personagem utiliza o site para completar a tarefa escolhida.
  • 20. Analise os similares  Conhecer a concorrência ajuda a enxergar o projeto que será desenvolvido.  Faça uma pesquisa de empresas/sites com produtos/serviços/conteúdos similares.  Defina características e critérios a serem avaliados. Organizar as informações em uma planilha ajuda a visualizar e avaliar os pontos positivos e negativos dos similares.
  • 21. Identifique o conteúdo e os requisitos funcionais  Use a lista de objetivos, as necessidades do público, e sua análise competitiva e crie outras duas listas: uma de componentes de conteúdo e outra de requisitos funcionais para o site.  Defina um “inventário de conteúdo” classificando as informações/recursos por tipo de conteúdo : estático, dinâmico, funcional e transacional.  exemplos de conteúdo estático: copyright, política de privacidade, e regras de participação.  exemplos de conteúdo dinâmico: hiperlinks, tags, rss.  exemplos de conteúdo funcional: menus, botões (entrar, limpar, cancelar, etc).  exemplos de conteúdo transacional: login de membros, formulários, downloads, uploads, compras.
  • 22. Agrupe e Rotule o Conteúdo  Organize o conteúdo. Comece criando um índice, escrevendo cada componente do inventário. Agrupe os componentes por assuntos/funções e defina um nome para cada grupo.  Com base nos grupos, defina as seções do site, e defina a base para a estrutura de navegação.
  • 24. Estrutura de Navegação Na Web as pessoas ficam totalmente perdidas porque não há senso de direção, de proporção e de localização. Por isso, a hierarquia do site é tão importante. A navegação precisa ajudar o usuário a encontrar o que procura e dizer-lhe onde está. Além disso, ela diz o que o site contém, como usá-lo e faz com que os visitantes confiem nas pessoas que o construíram.
  • 25. Estrutura de Navegação A estrutura de navegação de um web site é organizada para que cada visitante possa compreendê-la com rapidez e se desloque facilmente entre páginas e seções. Quanto mais rapidamente o visitante construir um modelo mental de resposta a esta estrutura, mais fácil será o seu deslocamento.
  • 26. Estrutura de Navegação 1. Que site é este? (identificação do site) 2. Em que página estou? (nome da página) 3. Quais são as seções principais deste site? (seções) 4. Quais são minhas opções neste nível? (navegação local) 5. Onde estou no esquema das coisas? (indicadores “Você está aqui”) 6. Como posso procurar? (KRUG, 2001:87)
  • 27. Home page ou Página principal É recomendável que a página principal tenha um layout diferente das demais páginas, bem estruturado e com caminhos para as informações mais relevantes do site. Desta forma, a página principal deve:  identificar claramente a localização do usuário e a atividade/conteúdo mais importante do site e o que este pode oferecer;  oferecer suporte aos usuários para encontrar o que procuram;  ser permanentemente atualizada e identificar o conteúdo renovado;  Marcar a localização do usuário;  ter mais área para a navegação do que para conteúdo;  Informar os assuntos de maneira concisa e direta;  ser dividida em diferentes seções de acordo com os objetivos estratégicos da marca e com a estrutura de informações;  uma seção ou menu com links para as áreas mais acessadas pelos usuários.
  • 28. Páginas internas Para facilitar a navegação e a realização de tarefas nas páginas internas é recomendável:  apresentar em destaque o nome da página Principal, de preferência no canto superior esquerdo;  mostrar a marca da empresa ou organização em local bem visível, ligado à página principal;  manter o mesmo estilo e identidade visual em todas as páginas;  manter o foco em aspectos mais específicos;  localizar o usuário em relação ao resto do site;  manter as informações estruturais de navegação, sempre em locais de fácil acesso e visualização.
  • 29. Links Os links permitem que o usuário se desloque de uma página para outra localizada em diferente URL (Uniform Resource Locator), que pode ser relativo ao mesmo ou a outro site, através de uma estrutura hipertextual de informações. Links devem ser sinalizados claramente e sua funcionalidade ficar aparente na página, e para tanto:  normalmente são associados a textos sublinhados;  devem ter cores ligeiramente diferentes dos demais textos; Tipos de links:  Links incluídos num texto (ex: hiperlinks)  Links estruturais (ex: menus, barra de navegação)  Links tipo “saiba mais“  Links de suporte à navegação (ex: voltar, avançar)  Links em mapas de imagens
  • 30. Componentes da interface web  Área de conteúdo  Ferramentas de busca (interna)  Área restrita  Formulários  Atalhos  Links (internos e externos)  Banners  Mapa do site  Barra de localização (breadcrumbs)  Marca  Barra de navegação  Menus  Barra de rolagem  Tags  Calendário  Título da página
  • 31. Tipos de estrutura de navegação Linear ou sequencial Hierárquica ou arborescente Matricial ou em grade Híbrida Personalizada Participativa "Caótica" ou em teia Cross-media (mídias cruzadas) Cross-channel (ou transchannel, canais cruzados) Multi-channel (multi-canais)
  • 32. Linear ou sequencial Define o deslocamento de página a página com botões tipo "Próxima página" e "Página anterior". O processo de compras em um site de comércio, por exemplo, segue uma ordem que vai desde a identificação do usuário e dos produtos que quer comprar até a confirmação da compra. O início e o final são previsíveis dentro da lógica que os encadeia.
  • 33. Hierárquica ou arborescente Liga tópicos genéricos a tópicos mais específicos, com base na construção de uma taxonomia. As informações podem se estruturar de alto para baixo como os ramos de uma árvore ou de baixo para cima, segundo a estrutura de um banco de dados hospedado num servidor, que atende às solicitações dos usuários. A estrutura hierárquica pode apresentar diversas estruturas dominantes, com subordinações para cada uma delas e neste caso se configurar como uma estrutura Poli-hierárquica.
  • 34. Matricial ou em grade Neste caso, a estrutura não é hierarquizada e segue um modelo horizontal, porém o deslocamento entre páginas não é necessariamente linear. Os "Links relacionados" (ou "Veja também") que unem diversas páginas de um mesmo site segundo algumas afinidades temáticas entre informações podem estabelecer uma estrutura matricial.
  • 35. Híbrida Tópicos genéricos se ligam a tópicos mais específicos, ou vice- versa, de acordo com conteúdo gerado dinamicamente pelo usuário. Diversos critérios de organização, entre horizontais e verticais, se combinam para criar uma experiência de uso integrada.
  • 36. Personalizada O usuário define as informações que quer receber ou as ferramentas do próprio site rastreiam o percurso que o usuário percorreu durante uma visita e selecionam o conteúdo de sua preferência (normalmente o mais acessado).
  • 37. Participativa Estruturada em torno das ações dos usuários e dos objetos sociais criados ou modificados durante estas ações.
  • 38. "Caótica" ou em teia Não apresenta uma ordem aparente, é uma estrutura de certa forma randômica. Os percursos são definidos pelos usuários que se deslocam de acordo com os seus interesses, seguindo hiperlinks que encontram nas páginas, ou ordenações baseadas nas características das próprias informações. É a forma de estrutura que oferece mais risco de desorientação, no entanto permite o cruzamento total e irrestrito de informações, pois não está condicionada a nenhum modelo pré-definido.
  • 39. Cross-media (mídias cruzadas) Segue os encadeamentos de um ambiente amplo de informações, composto por um conjunto de ambientes mais restritos, mídias e canais interligados, que se complementam e dependem um do outro para compor uma experiência de uso ou completar uma ideia ou tarefa. Considera a experiência de acesso e uso fragmentada ou parcial em cada um, sendo que nenhum produto em si provê a experiência completa. O cadastro de um email para receber uma mala direta é uma experiência cross-mídia quando há o envio de mensagem para a caixa postal do assinante e este precisa clicar num link para confirmar o cadastro. O cadastro não é finalizado caso não haja confirmação.
  • 40. Cross-channel / transchannel /canais cruzados) Considera uma estrutura de informações de canais cruzados, composta por elementos dispersos de maneira estruturada (criação, publicação, ação, relacionamento, recriação). O conjunto dos elementos individuais, cada um contribuindo à sua maneira, compõe uma experiência integrada, entre canais. Um único canal pode ou não prover uma porta de entrada ao ambiente, e a maioria dos usuários não percorre todos os seus pontos de contato do início ao fim. Alguns canais permitem que os usuários completem a sua experiência sem precisar de outros.
  • 41. Multi-channel (multi-canais) Oferta de serviços ou experiências da mesma natureza que podem ser acessados ou usados a partir de inúmeros canais. Os usuários acessam um ou outro e podem realizar a mesma tarefa ou acessar a mesma informação completa. Ou seja, um correntista de um banco acessa a sua conta através do web site e obtém o seu extrato, mas pode fazê-lo também num caixa eletrônico, pelo seu celular, ou pelo caixa do banco. A realização destas tarefas inteiras independe do acesso a outros canais complementares, como o recebimento de mala direta postal ou o recebimento de mensagens telefônicas.
  • 43. Layout O layout precisa transmitir a informação desejada com eficiência. É preciso que o layout seja um elo de comunicação com o usuário, que sua linguagem seja condizente com o objetivo do site. Cada elemento inserido em um website deve ter um objetivo, a perfeição de um website se atinge quando não há nada a ser retirado e não quando não há nada mais a ser inserido.
  • 44. Layout Será necessário definir blocos de espaço para a navegação global e local, e integrar os demais elementos do site que podem não fazer parte da estrutura de navegação. Publicidade e chamadas de patrocínio devem ser incorporadas ao design. Primeiro deve ser definido o layout da página principal, e, com base neste, deve ser definido o layout padrão das páginas internas. Dependendo do projeto, será necessário criar layouts específicos para algumas páginas.
  • 45. Design do layout  Utilizando um programa gráfico, crie um arquivo com as dimensões do seu site.  Crie um retângulo representando a página, e delineie blocos para os elementos visuais e conteúdos do seu design.  Outros elementos precisam ser considerados: branding (marca, logotipo, slogan), publicidade e patrocínio, navegação, títulos da página, gráficos do cabeçalho, e rodapés (incluindo copyright).  Experimente dois ou três layouts com estilos diferentes
  • 46. Esboços/modelos do site  Esboços/modelos são usados para estabelecer o visual e o estilo do site.  É necessário saber o tamanho dos arquivos gráficos, bem como quaisquer outras restrições técnicas, e representar o site de fato.  Os modelos precisam ser o mais parecidos possível com as páginas reais do site. Use seu programa gráfico favorito para manipular os esboços.
  • 48. Introdução Usabilidade é o conceito utilizado para A usabilidade é relacionada à eficácia e descrever a qualidade da interação de uma eficiência da interface diante do usuário e interface diante de seus usuários, e está pela reação do usuário diante da interface. relacionada aos estudos de Ergonomia e de Interação Humano-Computador (IHC). Segundo os standards ISO Esta qualidade está associada de acordo com 9241-11 (Guidance on Usability, os seguintes princípios: 1998), usabilidade é a  facilidade de aprendizado; amplitude de uso de  facilidade de memorização de tarefas no determinado produto por seus caso de uso intermitente; usuários, de modo que possam  produtividade dos usuários na execução de tarefas; realizar tarefas de maneira  prevenção, visando a redução de erros por efetiva, eficiente e satisfatória parte do usuário; num contexto definido.  satisfação subjetiva do usuário.
  • 49. Antecipação da experiência Deve-se considerar alguns fatores para facilitar a antecipação da experiência de uso:  Prover baixo tempo de download para a interface e imediata percepção de valor aos usuários;  Oferecer suporte à navegação e ao uso, por meio de mensagens claras e objetivas;  Facilitar o aprendizado de uso, de modo que o usuário possa usar o site sem precisar de aprendizado formal;  Informar o usuário as tarefas a realizar;  Permitir a reversibilidade das ações, para que o usuário possa explorar o site e, caso "erre o caminho" ou desista de uma tarefa, volte à etapa inicial;  Incluir pequenos resumos próximos aos links;  Incluir "Links relacionados“.
  • 50. Importante!  Autonomia orientada – para que o usuário tenha controle sobre sua ação num site ou plataforma online, um ambiente adequado de uso facilita a navegação e a realização de tarefas sem necessidade de apoio ou suporte.  Antecipação da experiência – quando o usuário aprende facilmente a estrutura de informações e as funcionalidades disponíveis, sabe o que vai encontrar antes de selecionar o conteúdo de um site, bem como antes de usar uma ferramenta.  Consistência funcional e de produtividade – os usuários memorizam facilmente os modelos aplicados e os aplicativos respondem à mesma ação aprendida pelos usuários com os mesmos resultados, em qualquer momento, em qualquer tela, com poucos erros e mal-entendidos.
  • 51. Benefícios para o usuário  Autonomia do usuário, que se sente no controle das suas ações e das suas impressões subjetivas.  Satisfação do usuário com a experiência de uso e com o veículo de modo geral, em decorrência do controle e da percepção crítica das ações.
  • 52. Consistência funcional e de produtividade Consistência em interfaces web se refere à homogeneidade e à coerência de situações que devem ser tratadas, apresentadas ou acionadas de maneira semelhante. Antecipando as respostas do sistema, interfaces consistentes facilitam o aprendizado e aumentam a produtividade dos usuários, que cometem menos erros e controlam melhor suas ações.  Coordenação entre a funcionalidade da interface e o comportamento do usuário;  Provimento de respostas claras e imediatas;  Invisibilidade do conceito aplicado na estrutura de navegação;  Visibilidade informativa;  Layout e funcionalidades do programa previsíveis de acordo com modelos pré-definidos;  Posicionamento dos elementos de acordo com convenções já aceitas pelo senso comum;  Consistência terminológica.
  • 53. Fatores a considerar  Quando o uso é sujeito a erros frequentes, colocar condicionantes que forcem a adaptação dos usuários para que a tarefa seja realizada corretamente.  Grau de familiaridade do usuário médio do site com o uso da internet e suas ferramentas.  Adaptação da interface às condições físicas ou de acesso do usuário.  Uso de convenções já aceitas em grandes sites e portais, que facilita a localização de informações.  Clareza da localização das páginas de abertura das seções principais em relação à página Principal.  Orientação visual dos percursos a seguir, dos caminhos percorridos e pontos de chegada.  Sinalização visual dos pontos onde os usuários devem permanecer mais tempo.  Sinalização do status de uma tarefa durante a sua realização.  Manutenção da continuidade da ação entre etapas.  Possibilidade de opção sobre a instalação de plug-ins e programas no computador ou no browser do usuário para a visualização de imagens e animações.