Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Navegação na Web

Pensando a experiência do usuário
by

Joana Franco

on 13 March 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Navegação na Web

Pensando a experiência do usuário Navegação na web O ciberespaço pode ser tornar um labirinto? Qual é a sensação que você teria
ao estar no meio de um labirinto
sem ter ideia de como sair? O Hipertexto tende a ser não-linear:
por meio dos nós de informação da rede podemos navegar por caminhos não determinados.

Navegar é explorar ambientes:
um projeto de navegação deve estar centrado em objetivos e ações dos usuários para proporcionar boas experiências.

Experiências frustrantes (tempo/esforço) fazem
com que usuários desistam da tarefa. Prejuízos da falta de projeto de navegação Nos 15 maiores sites comerciais, os usuários somente conseguiram encontrar informações em 42% dos casos;
62% dos compradores online desistiram do item que estavam procurando, sendo que 20% repetiram três vezes a desistência;
O site médio desconsidera 50% das diretrizes de usabilidade de webdesign.
(NIELSEN, 1998) Abordagens teóricas de autores que estudam a navegação Diferentes visões da navegação Lèvy Shneiderman Nielsen Fleming Rosenfeld e Morville Atitudes de navegação:
caçada (busca informação precisa)
pilhagem (interesse vago e derivação) Atitudes de navegação:
busca de informação específica (qual a data de início das aulas?)
busca de informações relacionadas (quais outras instituições oferecem esse curso?)
navegação com destino aberto (existem projetos ferroviários em algum Estado do Brasil?)
verificação de disponibilidade (quais informações sobre webdesign existem na biblioteca?) Atitudes de navegação:
onde estou? (localização em relação à web e ao próprio site)
de onde vim? (caminho percorrido)
para onde vou? (visibilidade de opções) Qualidades da navegação:
ser facilmente aprendida
ter consistência (repetição)
prover feedback (interação)
oferecer contextualização (visibilidade)
oferecer alternativas (apoiar comportamentos distintos de usuários)
prover economia de ações
prover mensagens visuais claras
selecionar títulos precisos (nomenclatura)
adequar aos objetivos (solução de navegação conforme cliente/usuário)
apoiar comportamento do usuário (suporte às tarefas - o que os usuários querem fazer) Sistemas de navegação (complementam-se):
Hierárquico (unidirecional)
Global (+ movimentos lateriais e verticais)
Local (+ área dentro de área [subsite])
Ad hoc (dentro de frases [editorial]) Afinal, o que isso significa? NAVEGABILIDADE Impressos X Eletrônicos
movimentos e recursos são diferentes
design é parte da experiência (função interativa - centrada em objetivos e ações) Conceituação
capacidade da navegação facilitar ao usuário chegar ao seu destino da maneira mais eficiente possível (sem obstáculos) e de forma segura. Representação da navegação e do comportamento do site Mapas de Fluxo LEMA: menos cliques e informações necessárias sempre à mão, numa sequência lógica. Função: apresentar as telas existentes, mostrando os caminhos entre elas.
PS: nem todo mapa de site é um mapa de fluxo. Mapa de fluxo eficiente deve ter:
a complexidade gerenciada (org.)
vocabulário visual padrão e legenda
navegação dos principais elementos Rascunhando o posicionamento e a importância
das informações na navegação das telas Wireframes Wireframes são rascunhos com marcações de peso e posicionamento do conteúdo de uma interface, incluindo-se aí agrupamento, ordem e hierarquia de conteúdo interligado à navegação. É um guia para o desenvolvimento do layout final do website, sistema ou aplicativo.

É um esqueleto que organiza os elementos na tela, mas sem a interferência do projeto visual em si (design estrutural).

O wireframe é uma etapa essencial para visualizar projetos, estruturar informações e desenvolver a interface gráfica, facilitando processos de aprovação e de produção. Podem ser usados na criação de protótipos de baixa fidelidade para testes de usabilidade (mesmo no papel)
Podem ter a fidelidade das informações aumentada gradativamente (programas vetoriais ou específicos)
Podem levantar diferentes soluções (baixo custo)
Podem auxiliar na consistência de interfaces do projeto (convenções de desenho da interface) Bibliografia Definindo e agrupando materiais Conteúdo Descobrindo o "jeitão" do site Conceito Criativo Criando a estrutura do layout GRIDS Como e porque fazer o wireframe Dicas e Toques Uma vez definido o público-alvo, deve-se definir o conteúdo a ser publicado no site e categorizar as áreas para separar esse conteúdo e microconteúdo. O conteúdo do site é primordial para a definição dos menus e da linha editorial que deve ser seguida (UX). Organizar e planejar o conteúdo por seções ajuda na hora da produção das páginas. E assim como existem convenções para o design da interface, existem padrões de formatação de conteúdo para agilizar o acesso à informação (nomenclatura dos links). Quanto mais corriqueira for a forma de chamar determinada página, maior será a certeza dos usuários em relação ao conteúdo que vão encontrar ao clicar no link (what you see is what you get). Padronizar a nomenclatura ajuda na realização de tarefas. Seja direto e familiar! o que conta é a experiência fluida Conteúdo é rei Jakob Nielsen e também Bill Gates afirmaram: "Conteúdo é rei!". Mas o que isso significa? O que faz com que você acesse? "O que importa é o que a pessoa fala e ouve de outra pessoa. Isso está diretamente relacionado não só ao conteúdo visto de uma forma mais abrangente, como também à interação entre seres humanos." MEMÓRIA, 2005, p.141) O conteúdo tem um sentido restrito, relacionado à informação, que é importante e sempre terá seu lugar. No entanto, esse lugar estará sempre subordinado às experiências pessoais, no sentido amplo de conteúdo.

O que interessa é a rede de socialização!
Interagir é mais importante que ver!!! separando e religando conteúdo Organização Inicialmente esqueça as estruturas e a navegação e organize os dados em conjuntos, baseados em seus temas principais. O ideal é formar três ou quatro grandes conjuntos, não mais do que isso. Esse processo ajuda a focar a mensagem e a estabelecer o que é fundamental comunicar. Com a organização em grandes grupos e a relação de conexões entre os conteúdos, já dá para se ter uma boa idéia de toda a informação disponível e como ela se comportaria se, em vez de um website, existisse uma pessoa explicando-a: quais são os assuntos mais referenciados, quais são os temas mais importantes, quais as principais dúvidas e como acontece o fluxo dessas informações (de onde se parte, para onde se vai). Hora de finalizar: conjuntos muito grandes podem ser divididos, pedaços de conjuntos podem ganhar autonomia e a relação entre os elementos deve ser revista. Veja quais elementos merecem destaque desde a tela inicial e o conteúdo está pronto para a próxima etapa (conceituação). Não se esqueça: o conjunto de documentos de hipertexto deve tentar imitar o pensamento. Por isso, tente integrar as páginas o máximo possível, nunca é demais. Deve se dar acesso a qualquer informação relevante e ligada à página que se estiver vendo em um ou dois cliques. Para o acesso a qualquer outra informação, três cliques é o máximo. O conceito criativo do site permeia a navegação e definitivamente determina sua interface.

A primeira coisa a se pensar é: Do que trata o site? Do que você está falando? É um produto tradicional, inovador, tecnológico, caro, popular… qual é a dele?

Depois disso: qual é a vantagem real que ele traz para quem o está consultando?

Por último: o que ele tem que os outros não têm? Se o conceito está claro, bem definido e transmite segurança, todos os outros elementos — conteúdo, arquitetura, interface, navegação — se integram mais facilmente. Senão o design fica inconsistente e a mensagem se perde. Seu design deve encaixar com o conceito, mantenha sempre a unidade das páginas, pois qualquer inovação que fuja da sua linha de design tem mais chances de ser fatal do que de apresentar alguma espécie de êxito. LEMBRE-SE:
Para proporcionar uma boa interação é preciso pensar a forma que o usuário irá navegar e realizar suas tarefas no ambiente que vamos criar. Para oferecer uma boa experiência não podemos dificultar a interação, devemos, ao contrário, facilitar sempre o acesso por meio da usabilidade.

USABILIDADE = Eficiência + Eficácia + Satisfação Um sistema de grade (grid system) é uma técnica há tempos adotada em layouts para se organizar o conteúdo de uma página impressa. Agora a técnica também pode ser adotada com sucesso em aplicações web. A idéia básica do sistema é fornecer uma grade na qual possamos organizar o conteúdo de forma consistente. O layout da sua aplicação web pode ser organizado em linhas e colunas de modo a garantir alinhamento e espaçamento entre os elementos. Exemplo do 960 Grid System (http://960.gs), criado por Nathan Smith. DE MORAES, Anamaria; SANTA ROSA, José Guilherme. Avaliação e projetos no design de interfaces. 1 ed. Rio de Janeiro: 2AB, 2008.

MEMÓRIA, Felipe. Design para a internet. Rio de Janeiro: Elsevier 2005.

RADFAHRER, Luli. Design/Web/Design: 2. Disponível em (http://www.luli.com.br/admin/wp-content/uploads/2008/04/dwd2.pdf) Nunca pule a etapa do wireframe
Essencial para o progresso do projeto, criar um esboço e pensar na navegação antes de ter um layout desenhado pode fazer com que se perceba algum erro de usabilidade ou algum bloco de conteúdo que não está sendo exibido com o devido destaque. 1 2 Papel e caneta
Não é porque a interface é digital que todo o processo deve acontecer dentro do computador. Pegue papel e caneta e rabisque muito. Você pode recortar pedaços de papel ou usar post-its para reposicionar os blocos de conteúdo com mais facilidade. 3 Teste seu wireframe
Questione cada interação do seu wireframe. Imagine um usuário específico tentando acessar aquela interface e peça opiniões de outras pessoas da equipe que não participaram diretamente da elaboração dos esboços (por que não incluir o cliente nessa também?). Essa discussão pode levantar pontos importantes que você deixou passar em um primeiro momento. Visite: Para inspirar-se com outros wireframes já feitos http://wireframes.tumblr.com/
Para trabalhar um navegador no papel
http://www.raincreativelab.com/paperbrowser/
Para criar wireframes em ferramentas digitais
http://fluidia.org/
http://dub.washington.edu:2007/denim/
http://mockapp.com/m/Home.html
http://www.gliffy.com/
http://iplotz.com/
http://cacoo.com/
Além disso, wireframes podem ser desenvolvidos utilizando ferramentas gráficas como o Illustrator e o Corel, por exemplo.
Full transcript