Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rafael Yukio Kanaoka 
Aerolineas.com 
31/08/2014 
Trabalho Final 
Disciplina Design de Informação AIT9
Diagnóstico do Problema 
1.O contato é uma página importante e a disposição do seu link está apagada no layout, a organiza...
3 
2 
6 
5 
1 
4 
1 
O contato é uma página importante e a disposição do seu link está apagada no layout, a organização fo...
Nova proposta Melhorias no layout atual 
Novo escopo – pontos principais da nova proposta. 
1.O link de referência para a ...
1 
2 
3 
5 
6 
4 
7 
8 
9 
1 
O link de referência para a página de contato da empresa foi inclusa ao menu de navegação pr...
Header com menu superior e acesso a conta do usuário 
Consulta de reservas 
TV para 7 destaques 
(notícias e serviços) 
TV...
Nova proposta Reestruturação do layout atual 
Novo escopo – pontos principais da nova proposta. 
1.O link de referência pa...
1 
O link de referência para a página de contato da empresa foi inclusa ao menu de navegação principal. 
2 
O botão para a...
Header com menu superior e acesso a conta do usuário 
Consulta de reservas 
TV para 7 destaques 
(notícias e serviços) 
TV...
Rafael Yukio Kanaoka 
Estudante de Arquitetura de Informação e UX na Faculdade de Impacta e Tecnologia; formado em Analise...
Upcoming SlideShare
Loading in …5
×

[Portfólio Acadêmico] [FIT] Design de Informação - Diagnóstico de Problemas do Site Aerolineas.com

376 views

Published on

Análise de problemas encontrados no site Aerolineas.com e proposta de soluções.
----------------------------------------------------------------
Trabalho final da disciplina de Design de Informação, do curso de Arquitetura de Informação e UX na FIT - Faculdade Impacta de Tecnologia.
----------------------------------------------------------------
Por Rafael Kanaoka
http://www.samuraiux.com.br

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

[Portfólio Acadêmico] [FIT] Design de Informação - Diagnóstico de Problemas do Site Aerolineas.com

  1. 1. Rafael Yukio Kanaoka Aerolineas.com 31/08/2014 Trabalho Final Disciplina Design de Informação AIT9
  2. 2. Diagnóstico do Problema 1.O contato é uma página importante e a disposição do seu link está apagada no layout, a organização formal do objeto não foi bem estruturada, sendo que não há uma facilidade de compreensão que o infira como um botão/link de referência para outra página. Esta peculiaridade se replica para os outros links dispostos pela página. 2.Falta de fechamento da informação, não há uma continuidade da forma de linha, impedindo a fluidez visual e deixando o vazio parecer que faltou algo. 3.O acesso à conta do usuário não está atrelado ao header junto ao menu, em algumas páginas, o botão de acesso à conta do usuário desaparece. 4.Os banners de produtos e serviços não possuem uma chamada para ação (Call to Action) indicando que são links para outras páginas com mais conteúdo sobre. 5.As duas últimas imagens são apenas ilustrativas e não possuem nenhum link para outra página, por proximidade e unificação, as outras imagens com links de referência são confundida como meramente ilustrativas 6.Por semelhança (Lei da semelhança em Gestalt) de cor e de forma, o terceiro menu é confundido com o texto e não é visto como uma forma de navegação. 7.Informações muito amontoadas, de difícil leitura e interpretação visual.
  3. 3. 3 2 6 5 1 4 1 O contato é uma página importante e a disposição do seu link está apagada no layout, a organização formal do objeto não foi bem estruturada, sendo que não há uma facilidade de compreensão que o infira como um botão/link de referência para outra página. Esta peculiaridade se replica para os outros links dispostos pela página. 2 Falta de fechamento da informação, não há uma continuidade da forma de linha, impedindo a fluidez visual e deixando o vazio parecer que faltou algo. 3 O acesso à conta do usuário não está atrelado ao header junto ao menu, em algumas páginas, o botão de acesso à conta do usuário desaparece. 4 Os banners de produtos e serviços não possuem uma chamada para ação (Call to Action) indicando que são links para outras páginas com mais conteúdo sobre. 5 As duas últimas imagens são apenas ilustrativas e não possuem nenhum link para outra página, por proximidade e unificação, as outras imagens com links de referência são confundida como meramente ilustrativas. 6 Por semelhança (Lei da semelhança em Gestalt) de cor e de forma, o terceiro menu é confundido com o texto e não é visto como uma forma de navegação.
  4. 4. Nova proposta Melhorias no layout atual Novo escopo – pontos principais da nova proposta. 1.O link de referência para a página de contato da empresa foi inclusa ao menu de navegação principal. 2.O botão para acesso à conta do usuário foi adicionado ao header, acima do menu de navegação principal, assim removemos a linha desnecessária com a quebra do layout que havia abaixo do menu principal. 3.O link de avaliação do site também foi incluído no header, com aproximação da imagem de selo de garantia da aerolineas.com, unificando os objetos com significados semelhantes. 4.Adicionado a rotulação dos campos referentes à data de ida, data de volta e tipo do pacote. 5.No canto inferior direito de cada banner, haverá um botão (Call to Action) rotulado como “Saiba mais”, que levará o usuário as respectivas páginas internas relacionados ao banner. Manter o padrão do botão para semelhança e pregnância da forma 6.Para dar continuidade através de uma organização perceptiva e dar fluidez visual para a informação, os botões foram projetados com a mesma forma e cor utilizado nos banners das promoções 7.Adicionado rótulo no imperativo para induzir a uma ação nos botões das redes sociais 8.Adicionado rótulo no imperativo para induzir a uma ação nas imagens subsequentes. Para inferir a separação dos objetos, adicionamos uma linha entre as imagens links e as imagens ilustrativas. 9.O terceiro menu de navegação inferior foi colocado acima do texto e alterado o tamanho e cor para segregar do texto abaixo.
  5. 5. 1 2 3 5 6 4 7 8 9 1 O link de referência para a página de contato da empresa foi inclusa ao menu de navegação principal. 2 O botão para acesso à conta do usuário foi adicionado ao header, acima do menu de navegação principal, assim removemos a linha desnecessária com a quebra do layout que havia abaixo do menu principal. 3 O link de avaliação do site também foi incluído no header, com aproximação da imagem de selo de garantia da aerolineas.com, unificando os objetos com significados semelhantes. 4 Adicionado a rotulação dos campos referentes à data de ida, data de volta e tipo do pacote. 5 No canto inferior direito de cada banner, haverá um botão (Call to Action) rotulado como “Saiba mais”, que levará o usuário as respectivas páginas internas relacionados ao banner. Manter o padrão do botão para semelhança e pregnância da forma. 6 Para dar continuidade através de uma organização perceptiva e dar fluidez visual para a informação, os botões foram projetados com a mesma forma e cor utilizado nos banners das promoções. 7 Adicionado rótulo no imperativo para induzir a uma ação nos botões das redes sociais. 8 Adicionado rótulo no imperativo para induzir a uma ação nas imagens subsequentes. Para inferir a separação dos objetos, adicionamos uma linha entre as imagens links e as imagens ilustrativas. 9 O terceiro menu de navegação inferior foi colocado acima do texto e alterado o tamanho e cor para segregar do texto abaixo.
  6. 6. Header com menu superior e acesso a conta do usuário Consulta de reservas TV para 7 destaques (notícias e serviços) TV para 4 destaques (promoções) Box com máximo de 06 destaques (produtos e serviços) Box lateral: máximo de 06 destaques (ofertas) Footer
  7. 7. Nova proposta Reestruturação do layout atual Novo escopo – pontos principais da nova proposta. 1.O link de referência para a página de contato da empresa foi inclusa ao menu de navegação principal. 2.O botão para acesso à conta do usuário foi adicionado ao header, acima do menu de navegação principal, assim removemos a linha desnecessária com a quebra do layout que havia abaixo do menu principal. 3.O link de avaliação do site também foi incluído no header, com aproximação da imagem de selo de garantia da aerolineas.com, unificando os objetos com significados semelhantes. 4.Adicionado a rotulação dos campos referentes à data de ida, data de volta e tipo do pacote. 5.No canto inferior direito de cada banner, haverá um botão (Call to Action) rotulado como “Saiba mais”, que levará o usuário as respectivas páginas internas relacionados ao banner. Manter o padrão do botão para semelhança e pregnância da forma 6.Para dar continuidade através de uma organização perceptiva e dar fluidez visual para a informação, os botões foram projetados com a mesma forma e cor utilizado nos banners das promoções 7.Adicionado rótulo no imperativo para induzir a uma ação nos botões das redes sociais 8.Adicionado rótulo no imperativo para induzir a uma ação nas imagens subsequentes. Para inferir a separação dos objetos, adicionamos uma linha entre as imagens links e as imagens ilustrativas. 9.O terceiro menu de navegação inferior foi colocado acima do texto e alterado o tamanho e cor para segregar do texto abaixo. A)Os banners + menu de produtos e serviços foram mais aproximados da TV de notícias e serviços, formando uma linha. Para efeito de leitura visual, esta linha estabelece um nível de segregação entre a informação que está acima com a que está abaixo. B)O box de ofertas dispõem os banners em duas colunas e está próximo da TV com destaques de promoções..
  8. 8. 1 O link de referência para a página de contato da empresa foi inclusa ao menu de navegação principal. 2 O botão para acesso à conta do usuário foi adicionado ao header, acima do menu de navegação principal, assim removemos a linha desnecessária com a quebra do layout que havia abaixo do menu principal. 3 O link de avaliação do site também foi incluído no header, com aproximação da imagem de selo de garantia da aerolineas.com, unificando os objetos com significados semelhantes. 4 Adicionado a rotulação dos campos referentes à data de ida, data de volta e tipo do pacote. 5 No canto inferior direito de cada banner, haverá um botão (Call to Action) rotulado como “Saiba mais”, que levará o usuário as respectivas páginas internas relacionados ao banner. Manter o padrão do botão para semelhança e pregnância da forma. 6 Para dar continuidade através de uma organização perceptiva e dar fluidez visual para a informação, os botões ‘Recibí ofertas y novedades’ e ‘Conocé más ofertas’ foram projetados com a mesma forma e cor utilizado nos banners das promoções. 7 Adicionado rótulo no imperativo para induzir a uma ação nos botões das redes sociais. 8 Adicionado rótulo no imperativo para induzir a uma ação nas imagens subsequentes. Para inferir a separação dos objetos, adicionamos uma linha entre as imagens links e as imagens ilustrativas. 9 O terceiro menu de navegação inferior foi colocado acima do texto e alterado o tamanho e cor para segregar do texto abaixo. 1 2 3 4 5 6 7 8 9 A Os banners + menu de produtos e serviços foram mais aproximados da TV de notícias e serviços, formando uma linha. Para efeito de leitura visual, esta linha estabelece um nível de segregação entre a informação que está acima com a que está abaixo. A B B O box de ofertas dispõem os banners em duas colunas e está próximo da TV com destaques de promoções.
  9. 9. Header com menu superior e acesso a conta do usuário Consulta de reservas TV para 7 destaques (notícias e serviços) TV para 4 destaques (promoções) Box com máximo de 04 destaques (produtos e serviços) Box lateral: máximo de 06 destaques (ofertas) Footer Produtos e Serviços Promoções e Ofertas
  10. 10. 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)

×