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çã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 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.

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.

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.

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

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..

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.

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

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)