SlideShare uma empresa Scribd logo
1 de 9
Baixar para ler offline
Rafael Yukio Kanaoka 
Análise Home UX Magazine 
(uxmag.com) 
09/09/2014 
Trabalho Individual 
Padrões de Interação AIT9
Padrões de Interação encontrados na Home da página uxmag.com: 
Menu de navegação principal 
1 
Slideshow 
2 
Caixa de notícias 
4 
Lista compilada 
3 
Mapa do site em rodapé 
5 
Redes sociais 
6 
1 
2 
4 
3 
5 
6
Problema 
Usuário precisa navegar pelo site e encontrar o que está buscando. 
Solução 
Posicionar sempre um menu visível e em uma posição fixa na página, suportando este menu principal com ferramentas adicionais de navegação. 
Quando 
Todos os sites precisam oferecer alguma forma de navegação principal ao usuário. 
Como 
Menu horizontal com submenus (drop down) ao passar o mouse, que se baseia em uma barra horizontal com uma série de itens clicáveis localizado no topo da página. A navegação se mantém consistente durante toda a busca pelo site e o menu fica presente em todas as páginas. 
Por que 
Tornar a informação do site acessível para os usuários. 
Menu de navegação principal 
1
Problema 
Usuário deseja ver uma série de histórias sem rolar a página ou qualquer outro movimento desnecessário do mouse. 
Solução 
Apresentar em slides uma história por vez, com imagens e texto, por um intervalo especifico de tempo. 
Quando 
Utilizado tipicamente para destacar histórias com o apelo visual de uma imagem 
Como 
Colocar de 4 a 7 histórias com imagens em destaques e um pequeno texto, apresentando-os automaticamente de forma sequencial. Manter um controle manual de avançar e voltar, no lado inferior esquerdo, com bolinhas representando a sequencia das histórias. 
Por que 
Faz a informação ser direcionada e chegar mais fácil ao usuário, sem muito esforço, comparando-se com a funcionalidade de uma TV. 
Slideshow 
2
Problema 
Os usuários precisam de artigos pré- selecionados de uma extensa lista. 
Solução 
Disponibilizar uma seleção com os artigos mais populares do site. 
Quando 
Existe uma extensa lista de artigos disponíveis e o usuário não tem nenhuma preferência em particular. Tipicamente o site é utilizado por vários usuários com gostos parecidos, o que torna a popularidade uma propriedade interessante do artigo. 
Como 
Apresentar uma pequena lista de 5 a 10 itens com os itens mais populares do site, ordenando do maior ao topo aos menores abaixo. Colocar um botão ao final da lista para visualizar mais artigos ordenados por popularidade. 
Por que 
Possibilita que o usuário veja quais são os artigos mais populares do site, sem nenhum esforço, desde que o número de itens apresentado seja pequeno e compreensível. 
Lista compilada 
3
Problema 
Os usuários querem saber sobre novidades no conteúdo do site 
Solução 
Adicionar uma seção que contenha o cabeçalho das notícias ordenadas por data de publicações mais recentes 
Quando 
Utilizar em sites que são regularmente atualizados, como por exemplo, em blogs e sites de notícias 
Como 
Alocar uma área separada para notícias recentes, apresentando-as em pequenas descrições com título e imagem. Possui um número limitado de itens por página, mas pode-se adicionar uma navegação paginada para a continuação da listagem 
Por que 
Quando as notícias são apresentadas na página home, e o usuário apenas precisa ir para uma notícia específica. 
Caixa de notícias 
4
Problema 
Os usuários precisam encontrar uma determinada página 
Solução 
Disponibilizar uma seleção de links categorizados no rodapé de todas as páginas 
Quando 
Em qualquer site com pelo menos 2 níveis de navegação. Em particular quando sites de médio porte e que hajam páginas que usuários frequentemente buscam 
Como 
Adiciona uma versão reduzida do mapa do site na barra do rodapé, não precisa ser necessariamente o mapa do site, pode ser uma organização diferente na estrutura principal. 
Por que 
O rodapé do site não é uma área do site muito utilizada, adicionando links úteis nele, as pessoas que desceram a página até o final podem rapidamente se mover para onde ela precisa ir. 
Mapa do site em rodapé 
3
Problema 
Os usuários desejam encontrar meios de se comunicar com a marca 
Solução 
Disponibilizar os links das redes sociais e mídias digitais que utilizam para interagir com o usuário 
Quando 
Em qualquer site que utiliza redes sociais e outras mídias digitais para se comunicar com o usuário 
Como 
Disponibilizar em uma linha, os ícones representando cada rede social ou mídia digital utilizada, cada ícone é um link externo redirecionando para a respectiva mídia. 
Por que 
Facilitar o atendimento ao usuário 
Redes sociais 
6
Rafael Yukio Kanaoka 
Estudante de Arquitetura de Informação e UX na Faculdade de Impacta e Tecnologia; formado em Analise e Desenvolvimento de Sistemas na IFSP, Analista de Sistemas na Amdocs, Fundador do projeto SamuraiUX (samuraiux.com.br)

Mais conteúdo relacionado

Mais de Rafael Kanaoka

[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
Rafael Kanaoka
 

Mais de Rafael Kanaoka (12)

[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens a...
[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens a...[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens a...
[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens a...
 
[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens a...
[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens a...[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens a...
[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens a...
 
[Portfólio Livre] Usabilidade - Fluxo de compras de passagens aéreas - GOL e TAM
[Portfólio Livre] Usabilidade - Fluxo de compras de passagens aéreas - GOL e TAM[Portfólio Livre] Usabilidade - Fluxo de compras de passagens aéreas - GOL e TAM
[Portfólio Livre] Usabilidade - Fluxo de compras de passagens aéreas - GOL e TAM
 
[Portfólio Livre] UX - Análise USATODAY.com
[Portfólio Livre] UX - Análise USATODAY.com[Portfólio Livre] UX - Análise USATODAY.com
[Portfólio Livre] UX - Análise USATODAY.com
 
[Portfólio Livre] Design de Interface - Análise TV a cabo NET
[Portfólio Livre] Design de Interface - Análise TV a cabo NET[Portfólio Livre] Design de Interface - Análise TV a cabo NET
[Portfólio Livre] Design de Interface - Análise TV a cabo NET
 
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
 
[Portfólio Acadêmico] [FIT] Etnografia - ATV-G
[Portfólio Acadêmico] [FIT] Etnografia - ATV-G[Portfólio Acadêmico] [FIT] Etnografia - ATV-G
[Portfólio Acadêmico] [FIT] Etnografia - ATV-G
 
[Portfólio Acadêmico] [FIT] Padrões de Interação - ATV-G
[Portfólio Acadêmico] [FIT] Padrões de Interação - ATV-G[Portfólio Acadêmico] [FIT] Padrões de Interação - ATV-G
[Portfólio Acadêmico] [FIT] Padrões de Interação - ATV-G
 
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
 
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
[Portfólio Acadêmico] [FIT] Mapas de navegação, lista de tarefas e fluxograma...
 
Entenda o que é SamuraiUX
Entenda o que é SamuraiUXEntenda o que é SamuraiUX
Entenda o que é SamuraiUX
 
[Portfólio Acadêmico] [FIT] Design de Informação - Diagnóstico de Problemas ...
[Portfólio Acadêmico] [FIT]  Design de Informação - Diagnóstico de Problemas ...[Portfólio Acadêmico] [FIT]  Design de Informação - Diagnóstico de Problemas ...
[Portfólio Acadêmico] [FIT] Design de Informação - Diagnóstico de Problemas ...
 

Último

Aula 03 - Filogenia14+4134684516498481.pptx
Aula 03 - Filogenia14+4134684516498481.pptxAula 03 - Filogenia14+4134684516498481.pptx
Aula 03 - Filogenia14+4134684516498481.pptx
andrenespoli3
 
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
AntonioVieira539017
 
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffffSSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
NarlaAquino
 
matematica aula didatica prática e tecni
matematica aula didatica prática e tecnimatematica aula didatica prática e tecni
matematica aula didatica prática e tecni
CleidianeCarvalhoPer
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
HELENO FAVACHO
 
8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito
tatianehilda
 

Último (20)

Aula 03 - Filogenia14+4134684516498481.pptx
Aula 03 - Filogenia14+4134684516498481.pptxAula 03 - Filogenia14+4134684516498481.pptx
Aula 03 - Filogenia14+4134684516498481.pptx
 
Projeto de Extensão - DESENVOLVIMENTO BACK-END.pdf
Projeto de Extensão - DESENVOLVIMENTO BACK-END.pdfProjeto de Extensão - DESENVOLVIMENTO BACK-END.pdf
Projeto de Extensão - DESENVOLVIMENTO BACK-END.pdf
 
Jogo de Rimas - Para impressão em pdf a ser usado para crianças
Jogo de Rimas - Para impressão em pdf a ser usado para criançasJogo de Rimas - Para impressão em pdf a ser usado para crianças
Jogo de Rimas - Para impressão em pdf a ser usado para crianças
 
Araribá slides 9ano.pdf para os alunos do medio
Araribá slides 9ano.pdf para os alunos do medioAraribá slides 9ano.pdf para os alunos do medio
Araribá slides 9ano.pdf para os alunos do medio
 
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxSlides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
 
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptxSlides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
Slides Lição 6, Betel, Ordenança para uma vida de obediência e submissão.pptx
 
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdfTCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
 
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdf
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdfProjeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdf
Projeto_de_Extensão_Agronomia_adquira_ja_(91)_98764-0830.pdf
 
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfPROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
 
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptxPlano de aula Nova Escola períodos simples e composto parte 1.pptx
Plano de aula Nova Escola períodos simples e composto parte 1.pptx
 
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptxResponde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
Responde ou passa na HISTÓRIA - REVOLUÇÃO INDUSTRIAL - 8º ANO.pptx
 
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffffSSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
SSE_BQ_Matematica_4A_SR.pdfffffffffffffffffffffffffffffffffff
 
migração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenosmigração e trabalho 2º ano.pptx fenomenos
migração e trabalho 2º ano.pptx fenomenos
 
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdfProjeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
Projeto de Extensão - ENGENHARIA DE SOFTWARE - BACHARELADO.pdf
 
Aula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIXAula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIX
 
matematica aula didatica prática e tecni
matematica aula didatica prática e tecnimatematica aula didatica prática e tecni
matematica aula didatica prática e tecni
 
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
PROJETO DE EXTENSÃO I - TECNOLOGIA DA INFORMAÇÃO Relatório Final de Atividade...
 
8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito8 Aula de predicado verbal e nominal - Predicativo do sujeito
8 Aula de predicado verbal e nominal - Predicativo do sujeito
 
Cartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxCartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptx
 
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEMPRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
PRÁTICAS PEDAGÓGICAS GESTÃO DA APRENDIZAGEM
 

[Portfólio Acadêmico] [FIT] Padrões de Interação - ATV-I

  • 1. Rafael Yukio Kanaoka Análise Home UX Magazine (uxmag.com) 09/09/2014 Trabalho Individual Padrões de Interação AIT9
  • 2. Padrões de Interação encontrados na Home da página uxmag.com: Menu de navegação principal 1 Slideshow 2 Caixa de notícias 4 Lista compilada 3 Mapa do site em rodapé 5 Redes sociais 6 1 2 4 3 5 6
  • 3. Problema Usuário precisa navegar pelo site e encontrar o que está buscando. Solução Posicionar sempre um menu visível e em uma posição fixa na página, suportando este menu principal com ferramentas adicionais de navegação. Quando Todos os sites precisam oferecer alguma forma de navegação principal ao usuário. Como Menu horizontal com submenus (drop down) ao passar o mouse, que se baseia em uma barra horizontal com uma série de itens clicáveis localizado no topo da página. A navegação se mantém consistente durante toda a busca pelo site e o menu fica presente em todas as páginas. Por que Tornar a informação do site acessível para os usuários. Menu de navegação principal 1
  • 4. Problema Usuário deseja ver uma série de histórias sem rolar a página ou qualquer outro movimento desnecessário do mouse. Solução Apresentar em slides uma história por vez, com imagens e texto, por um intervalo especifico de tempo. Quando Utilizado tipicamente para destacar histórias com o apelo visual de uma imagem Como Colocar de 4 a 7 histórias com imagens em destaques e um pequeno texto, apresentando-os automaticamente de forma sequencial. Manter um controle manual de avançar e voltar, no lado inferior esquerdo, com bolinhas representando a sequencia das histórias. Por que Faz a informação ser direcionada e chegar mais fácil ao usuário, sem muito esforço, comparando-se com a funcionalidade de uma TV. Slideshow 2
  • 5. Problema Os usuários precisam de artigos pré- selecionados de uma extensa lista. Solução Disponibilizar uma seleção com os artigos mais populares do site. Quando Existe uma extensa lista de artigos disponíveis e o usuário não tem nenhuma preferência em particular. Tipicamente o site é utilizado por vários usuários com gostos parecidos, o que torna a popularidade uma propriedade interessante do artigo. Como Apresentar uma pequena lista de 5 a 10 itens com os itens mais populares do site, ordenando do maior ao topo aos menores abaixo. Colocar um botão ao final da lista para visualizar mais artigos ordenados por popularidade. Por que Possibilita que o usuário veja quais são os artigos mais populares do site, sem nenhum esforço, desde que o número de itens apresentado seja pequeno e compreensível. Lista compilada 3
  • 6. Problema Os usuários querem saber sobre novidades no conteúdo do site Solução Adicionar uma seção que contenha o cabeçalho das notícias ordenadas por data de publicações mais recentes Quando Utilizar em sites que são regularmente atualizados, como por exemplo, em blogs e sites de notícias Como Alocar uma área separada para notícias recentes, apresentando-as em pequenas descrições com título e imagem. Possui um número limitado de itens por página, mas pode-se adicionar uma navegação paginada para a continuação da listagem Por que Quando as notícias são apresentadas na página home, e o usuário apenas precisa ir para uma notícia específica. Caixa de notícias 4
  • 7. Problema Os usuários precisam encontrar uma determinada página Solução Disponibilizar uma seleção de links categorizados no rodapé de todas as páginas Quando Em qualquer site com pelo menos 2 níveis de navegação. Em particular quando sites de médio porte e que hajam páginas que usuários frequentemente buscam Como Adiciona uma versão reduzida do mapa do site na barra do rodapé, não precisa ser necessariamente o mapa do site, pode ser uma organização diferente na estrutura principal. Por que O rodapé do site não é uma área do site muito utilizada, adicionando links úteis nele, as pessoas que desceram a página até o final podem rapidamente se mover para onde ela precisa ir. Mapa do site em rodapé 3
  • 8. Problema Os usuários desejam encontrar meios de se comunicar com a marca Solução Disponibilizar os links das redes sociais e mídias digitais que utilizam para interagir com o usuário Quando Em qualquer site que utiliza redes sociais e outras mídias digitais para se comunicar com o usuário Como Disponibilizar em uma linha, os ícones representando cada rede social ou mídia digital utilizada, cada ícone é um link externo redirecionando para a respectiva mídia. Por que Facilitar o atendimento ao usuário Redes sociais 6
  • 9. Rafael Yukio Kanaoka Estudante de Arquitetura de Informação e UX na Faculdade de Impacta e Tecnologia; formado em Analise e Desenvolvimento de Sistemas na IFSP, Analista de Sistemas na Amdocs, Fundador do projeto SamuraiUX (samuraiux.com.br)