1. O documento apresenta um diagnóstico dos problemas de usabilidade encontrados em um site de uma empresa aérea e propõe melhorias de design para resolvê-los. 2. Entre os problemas apontados estão links confusos, falta de continuidade visual, acesso à conta de usuário inconsistente e informações amontoadas. 3. A nova proposta sugere mudanças como incluir links ausentes no menu, organizar melhor os elementos visuais e rotular botões e imagens para melhor direcionar os usuários.

1. Rafael Yukio Kanaoka
Aerolineas.com
31/08/2014
Trabalho Final
Disciplina Design de Informação AIT9

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