[Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

18
Análise do processo de compra de passagens na TAM e na GOL Rafael Yukio Kanaoka Questão Usabilidade

Transcript of [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Page 1: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Análise do processo de compra de passagens na TAM e na GOL

Rafael Yukio Kanaoka

Questão Usabilidade

Page 2: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Diretrizes da resolução da questão

• Diagnóstico de problemas encontrado no site da GOL

• Proposta de solução para problemas encontrados na GOL

• Diagnóstico de problemas encontrado no site da TAM

• Proposta de solução para problemas encontrados na TAM

• Comparação entre os dois processos

Page 3: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

ANÁLISE

SITE DA GOL

* Fiz um teste colocando uma usuária para realizar a compra no site da GOL, pode ser visualizado o relatório no documento: “Anexo_-_Relatório_de_teste_de_usabilidade_no_site_da_GOL_.pdf”

Page 4: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Tela de busca por passagens:

O campo de código promocional não é indicado se é um campo obrigatório ou não, como é semelhante e próximo aos outros campos do formulário, não é diferenciado A ação rotulada no botão “compre aqui” não corresponde a ação realizada

O link da logotipo da gol redireciona para lugares diferentes em cada página, o redirecionamento não é sempre para a página inicial, o que já é uma ação esperada pelo usuário ao clicar no logotipo

1

2

3

1 2

3

Page 5: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

4

Em algumas partes do processo ocorrem erros com avisos pouco explicativos 4

Tela de erro ao tentar buscar voos:

Page 6: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Tela de escolha do voo

Ao selecionar o voo e clicar no voo desejado, a tabela é atualizada bruscamente, levando um tempo para o usuário entender o que aconteceu

Conteúdo mal posicionado no final da seleção do(s) voo(s), a informação está fora do contexto e é pouco relevante para o momento da seleção do voo

1

2

1

2

Falta de fechamento para a formação de unidade e continuidade da forma, visualmente não se transmite a função do elemento botão

3

3

Page 7: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Tela de cadastro do passageiro

Ao clicar sair durante o cadastro do passageiro, ele abandona o processo de compra e volta para a página inicial perdendo todos os dados

Difícil de inserir a data no campo de datas do formulário de cadastro do passageiro

2

3

3 Não há como voltar utilizando os breadcrumbs e também não existe o botão voltar em nenhuma das telas

4

4

4

2

Page 8: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

1

Na falta de preenchimento de um campo obrigatório no cadastro do passageiro, a tela é atualizada totalmente, dando impressão que é uma nova tela de cadastro (próximo slide)

1

Tela de cadastro do passageiro

Page 9: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Tela de seleção do assento

A legenda da seleção de assentos do voo é mostrada apenas depois da imagem, dificultando ao usuário deduzir o que deve ser feito, e quais as ações esperadas

Ao selecionar um assento disponível, a animação movimenta a imagem e posiciona o foco para outros assentos especiais, oferecendo assentos mais confortáveis por um preço adicional. Ao recusar, a imagem é atualizada e dá a impressão que a operação não foi completada.

1

2

1

2

Page 10: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Extras Os breadcrumbs utilizados não são clicáveis, e não possibilitam que o usuário navegue por eles

Não há botão de voltar durante todo o processo de compra da passagem

Ao voltar a página utilizando o botão do navegador, as informações não ficam são salvas e o usuário precisa preencher tudo novamente

1

2

3

2

1

3

Page 11: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Proposta de soluções dos problemas encontrado no site da GOL

Tela de busca por passagens: • O campo de código promocional poderia ser ocultado, adicionando no lugar do campo de texto, um

link com a ação de “inserir o código promocional”, ao ser clicado o campo de texto é disponibilizado • A ação rotulada no botão “compre aqui” poderia ser alterada para a ação realizada, que seria

“buscar voos” • Fixar o link do logotipo da gol para redirecionar sempre para a página inicial, o que já é uma ação

esperada pelo usuário ao clicar na logomarca • Ao ocorrer erros durante o processo, sempre explicar o motivo do que houve e qual o

procedimento que o usuário deve tomar

Tela de escolha do voo • Ao selecionar o voo e clicar no voo desejado, a tabela deve ser atualizada de forma que fique claro

a ação para o usuário, pode-se utilizar de uma animação de encolhimento da tabela • Retirar o conteúdo mal posicionado no final da seleção do(s) voo(s), deixar a página menos

carregada e apenas com a informação relevante

Tela de cadastro do passageiro • Na falta de preenchimento de um campo obrigatório no cadastro do passageiro, a invés de a tela

deve ser atualizada totalmente, pode-se focar a página para o campo remanescente e indicar que ele está faltando

• Ao clicar “Sair” durante o cadastro do passageiro, manter a página no processo de compra • Utilizar o seletor de datas para o preenchimento de datas

Continua no próximo slide

Page 12: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Proposta de soluções dos problemas encontrado no site da GOL

Tela de seleção do assento • A legenda da seleção de assentos do voo pode ser mostrada antes da

imagem de seleção de assento, instruindo o usuário a tomar as ações esperadas

• Ao selecionar um assento disponível, deve-se avisar que a operação foi realizada com sucesso, e indicar qual é a próxima ação a ser feita

Extras • Permitir a navegação pelos breadcrumbs, permitindo que o usuário altere

os dados de outras páginas passadas • Inserir o botão “Voltar” em todas as páginas de todo o processo de

compra da passagem • Ao voltar a página utilizando o botão do navegador, as informações devem

ficar salvas e editáveis para o usuário

Page 13: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

ANÁLISE

SITE DA TAM

Page 14: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Análise e diagnóstico de problemas encontrado no site da TAM

• Fonte muito pequena, dificultando a leitura do conteúdo • Tabela é dividida com informações adicionadas sobre os pacotes na opção

que está selecionada, dificultando o entendimento. Dá-se a impressão de que os próximos itens da tabela estão perdidos e não estão unidos, os itens restantes parecem formar uma outra tabela diferente.

• Não há contraste na opção que vai ser alterada o pacote • A opção minimizar para as informações adicionais do pacote não funciona,

o link não executa nenhuma ação • O botão de “comprar” e “prosseguir” nas telas aparecem sempre

duplicados, provocando confusão de qual botão deve ser utilizado • Na tela de seleção dos assentos, parece que a aba é para ser clicada, mas

na verdade ela nem é utilizada • Há um enorme vazio na página de seleção dos assentos, dá a impressão

que faltou ser carregada alguma coisa e/ou que a página está com algum problema

Page 15: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Proposta de soluções dos problemas encontrado no site da TAM

• Aumentar a fonte para facilitar a leitura do conteúdo • Manter as informações adicionais sobre os pacotes minimizadas e

apenas apresentá-los quando o usuário decidir que deseja visualizar e expandir.

• Nas informações adicionais sobre os pacotes, definir um contraste na opção permita o usuário deduzir o que vai ser alterada no pacote, se ele pressionar o botão “Alterar”

• Consertar o botão de “minimizar” das informações adicionais do pacote

• O botão de “comprar” e “prosseguir” nas telas aparecem sempre duplicados, retirar a duplicação, mantendo apenas o do principal

• Na tela de seleção dos assentos, diferenciar a aba, segregando ela do painel, indicando que não é um item para ser clicada

• Centralizar a legenda e o mapa de assentos, distribuindo os pelo espaço vazio na página de seleção dos assentos

Page 16: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Comparação entre os dois processos GOL X TAM

X

Page 17: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

Comparação entre os dois processos GOL X TAM

• A navegação na TAM é organizada e na GOL não existe a navegação no processo de compra das passagens

• O contraste do conteúdo é visualmente mais confortável no site da GOL, a leitura do texto é mais fácil, a fonte utilizada é mais adequada e a animação da seleção de assentos ajuda na visualização do posicionamento dos assentos

• A TAM possui menos desafios, o processo é melhor estruturado e garante uma melhor experiência do usuário.

Page 18: [Portfólio Livre] Arquitetura de Informação - Fluxo de compras de passagens aéreas - GOL e TAM

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)