Itaú Cinemas _mobile
primeiro experimento de site em UX mobile
Após um primeiro contato com um processo de UX, era hora de escolher um projeto maior para treinar mobile first, e em um próximo post, desktop.
Vou ao cinema com frequência e sempre senti falta de um site de estabelecimento de cinema (de São Paulo, no caso) bom. Pensando nisso escolhi redesenhar o site do Itaú Cinemas para ver o que eu conseguia melhorar.
Eu não trabalho nem estou envolvida em nenhum projeto com o Itaú Cinemas, esta análise é apenas um projeto fictício para treinar as minhas habilidades, pois ainda não tenho experiência profissional.
Sempre trabalhei com projetos e entendo que os resultados finais nem sempre refletem as intenções iniciais dos designers, por isso esse estudo sai com a vantagem de não passar pelos vai e vens com o cliente.
A análise foi feita em abril/julho de 2017.
O Espaço Itaú de Cinemas inaugurou sua primeira sala em meados da década de 90, na Rua Augusta (São Paulo). Hoje conta com 57 salas de exibição em seis cidades do Brasil.
Sua programação é bem diversa, conta tanto com blockbusters comerciais quanto com filmes do circuito alternativo.
Análise inicial
Página Inicial
Antes de partir para um análise mais complexa, separei apenas a página inicial do site para um levantamento prévio.
A primeira informação na página inicial são os atalhos para as redes sociais. Eles se repetem no footer do site.
O destaque inicial é um carrossel com imagens de alguns filmes em cartaz, algumas imagens contém informações adicionais, outras não.
Logo depois há uma longa lista de links para anúncios internos do cinema.
Alguns dos filmes em cartaz estão no final da página, alguns também apareceram no carrossel e outros não.
Por último há uma seção de notícias.
O menu da localização (topo, lado esquerdo) apresenta as cidades em que há filiais do cinema, a ordem das cidades muda dependendo da cidade que se escolhe.
O menu hambúrguer (topo, lado direito) apresenta todos os menus do site: filmes; notícias; sessões especiais; espaço dos cinéfilos; unidades; produtos; promoções; institucional e busca.
Análise competitiva
É interessante ter um panorama geral de como é a competição, para isso repeti a análise da página inicial em outros cinemas da cidade de SP, listando também a dimensão de cada um em pixel:
Redes maiores de cinema tendem a deixar os detalhes de horários e sinopses para outras páginas, pela pluralidade de opções. Os cinemas de rua costumam colocar todas as informações logo de início, porém às vezes isso resulta em scrolls demasiado longos, como é o caso do Caixa Belas Artes.
Durante o processo de busca achei interessante também levantar os resultados da busca do Google:
Informações bem organizadas, simples e direto ao ponto.
Mapa do site mobile atual do Itaú Cinemas
O processo de mapeamento do site foi um tanto complexo. O site tem bastante conteúdo e as informações principais, como filmes em cartaz, não estão colocadas de forma direta.
Há um excesso de páginas de submenus, e a navegação entre eles é por vezes confusa e redundante. Um exemplo são os submenus de sessões especiais:
Além das páginas iniciais de cada submenu (sexta mais que básica, clube do professor, sessão popular, itaú viver mais e cinematerna), há em cada um desses submenus um link para outro submenu, ilustrado pelas setas rosas. Pelo esquema na imagem menu sessões especiais nota-se que a distribuição desses links é irregular e incompleta, gerando uma confusão na navegação. Essa deficiência se repete também no submenu de promoções.
Esta relação está demonstrada no vídeo abaixo:
Pesquisa de uso
Desenvolvi um questionário de frequência geral de ida ao cinema. Foi notificado um bug no fluxo das perguntas enquanto o formulário estava aberto para respostas. Como não foi possível corrigi-lo, acabei encerrando a pesquisa com apenas dois dias dela no ar. A amostragem de respostas foi pequena (cerca de 30 pessoas) e restrita ao meu círculo social, mas já consigo usar como base para uma análise.
Primeiro bloco de perguntas
- Com qual frequência você vai ao cinema? Para minha surpresa a maioria dos respondentes vai ao cinema menos de uma vez por mês. Um número consistente frequenta uma vez por mês, e o restante vai ao menos duas vezes ao mês. Tive zero respostas para uma vez por semana ou mais.
- Você costuma comprar os ingressos com antecedência? A maioria adquire ingressos pela internet, como esperado. Como o foco do projeto é em plataformas web, o formulário para as pessoas que compram ingressos diretamente na bilheteria acabou nessa pergunta. (Enquanto escrevia esse post percebi que teria sido interessante continuar o formulário para as pessoas que compram na bilheteria também, para entender suas motivações)
- Que meio você mais usa para realizar a compra? 3/4 dos respondentes faz a compra pelo desktop, e o 1/4 restante pelo smartphone.
Em seguida o formulário foi dividido em dois. Para os que fazem a compra pelo desktop e para os que compram pelo smartphone. As perguntas foras as mesmas, mas dessa maneira era possível distinguir diferenças de uso entre os dois tipos de usuário.
Segundo bloco de perguntas — Desktop
Essa parte da pesquisa de desktop seria guardada para o outro post dedicado à versão do desktop, mas devido ao resultado da pergunta aberta achei pertinente colocar aqui também.
Foi feita a pergunta aberta "Por que você prefere comprar ingressos antecipados pelo desktop?".
Surgiram 4 grupos de respostas distintas:
- por motivos de segurança — 10%
- pela praticidade. A pessoa já está usando o desktop no momento da compra — 16%
- para evitar filas/garantir ingressos — 22%
- pois a versão mobile é ruim/o desktop é mais navegável — 54%
Ou seja, mais da metade dos respondentes deixa de usar a versão mobile pela falta de qualidade/navegabilidade do site.
Em seguida fiz mais perguntas sobre que tipo de informação se busca:
A maioria guia sua escolha pelo filme, e não pelo cinema (localização). Não são expectadores de impulso, a ação de ir ao cinema é uma escolha planejada. A maioria também usa primariamente o site do cinema. (Um outro adendo aqui é que as perguntas pularam algumas etapas na jornada do usuário. Entre a primeira e a segunda pergunta provavelmente houve um processo de busca do filme, e consequentemente escolha de um local de exibição.)
Para o filme a sinopse é o item principal que os respondentes buscavam. Para os cinemas, localização e grade horária.
Terceiro bloco de perguntas — Smartphone
Foi feita a mesma pergunta aberta “Por que você prefere comprar ingressos antecipados pelo smartphone?”.
Surgiram 3 grupos de respostas distintas:
- para evitar filas/garantir ingressos — 17,5%
- para usar o aplicativo do ingresso.com — 17,5%
- pela praticidade — 65%
Em seguida se seguiram as perguntas sobre que tipo de informação se busca:
A maioria de respondentes usuários de smartphone também guia sua escolha pelo filme. Na hora de comprar o ingresso porém, a situação se inverte, e a maioria vai direto ao site terceiro só de venda de ingressos. Talvez pela familiaridade com o processo, caracterizando usuários assíduos.
A principal informação procurada de um filme é a sinopse, seguido de sua duração. Para os cinemas, localização e grade horária. Mas também marcam presença preço, lugares marcados e tipo de sala.
No fim acho que compreendi melhor este artigo que fala sobre o perigo das pesquisas, do perigo de ser simplista na análise dos resultados, e de fazer as perguntas erradas, ou incompletas. Há também questões sobre métodos, que ainda não explorei a fundo. Ainda assim resolvi publicar afinal estou numa fase de experimentação.
Personas
Tentando entender melhor as personas e seus diferentes usos me deparei com um interessante questionamento quanto à relevância de se levantar dados demográficos como local, idade, etnia e sexo. Dados demográficos não revelam comportamentos e abrem espaço para suposições, segundo Indi Young (autora do segundo artigo linkado acima).
Dessa forma resolvi desenvolver personas sem definir as características demográficas. Para facilitar a identificação delas usei somente nomes neutros de gênero (tive que pegar algumas referências do inglês). Me baseei também no questionário de pesquisa de uso e na observação de interações em redes sociais do Itaú Cinemas.
Matriz das personas
A matriz ajuda a visualizar o aspecto em que cada persona se encaixa, guiando a jornada do usuário.
Jornada do Usuário
Para entender melhor o contexto de uso das personas criei uma jornada do usuário para cada uma delas, baseada na pesquisa de uso:
- Meios: desktop + bilheteria física
- Dificuldade principal: Desconfiança no uso de cartão de crédito em compras online
- Consequências: Comprou os ingressos na bilheteria física pouco antes do filme começar, porém os bons lugares estavam esgotados
- Meios: smartphone + desktop
- Dificuldade principal: concluir a compra com assentos marcados pelo celular
- Consequências: como agora está ciente das dificuldades nem tenta mais comprar ingressos pelo celular
- Meios: desktop + smartphone + bilheteria física
- Dificuldade principal: nenhuma relacionada aos meios de compra
- Meios: smartphone
- Dificuldade principal: nenhuma
Objetivos
Com base na pesquisa e nas jornadas, defini como objetivo para esse projeto criar experiências diferentes para o acesso do site no smartphone e no desktop. O smartphone traz fatores como mobilidade, limitação de espaço e contexto de uso, não dá pra simplesmente assumir que os objetivos dos dois usuários serão os mesmos.
- Mobile: o objetivo é criar uma experiência ágil para quem acessa o site no smartphone, e o foco será nas informações dos filmes em cartaz e na eventual compra de ingressos.
- Desktop: o objetivo aqui é somar, pois além da possibilidade de ver informações sobre filmes em cartaz e compra de ingressos, você também recebe a parte de notícias, ingressos promocionais e informações institucionais.
Nova proposta
Antes de partir para o wireframe, fiz um mapa do site novo de acordo com a minha proposta. Mas só para recapitular segue abaixo mapa do site atual apresentado anteriormente para comparação:
Mapa do site proposto
A ideia foi simplificar e focar. Foram eliminadas páginas individuais dos submenus, havia um número exagerado de páginas e caminhos para pouco conteúdo. A home agora é focada nos filmes em cartaz. Ainda aparecem chamadas para promoções e sessões especiais. O conteúdo completo continua lá, mas a home fica mais enxuta, considerando os objetivos setados no início do projeto.
Estudos
Com o novo mapa do site em mente esbocei como seria a home e as outras páginas principais.
A mudança principal foi no fluxo dos filmes em cartaz. Aspectos mais gerais como adição do botão de voltar, e eliminação de links redundantes também foram considerados.Outras mudanças foram decididas no meio do caminho, ao fazer o wireframe e usar o preview navegável você percebe algumas coisas que não eram tão claras na hora do esboço no papel. Cada seção está explicada com mais detalhes mais pra frente.
Wireframe/protótipo
O vídeo abaixo mostra todas as possibilidades de navegação do protótipo:
Soluções
Home
O principal destaque da home no site atual é o carrossel. Nele aparecem fotos de alguns filmes em destaque, porém muitas vezes essas fotos aparecem sem legenda, ou sequer o nome do filme. A informação fica incompleta. Seguindo no scroll da home atual, temos vários links/banners para diversas outras sessões e quase no final do scroll temos mais filmes. Aqui os filmes são listados com pôster, nome e outras informações relevantes, mas também é apenas uma seleção de alguns dos filmes em cartaz. Para ver todos os filmes em cartaz, é necessário acessar a página dos filmes no menu hamburger do header. Nessa página constam os resumos de todos os filmes em cartaz. Para mais informações, cada filme tem sua página própria.
Seguindo o objetivo do projeto, de focar nos filmes, a solução se propõe a mostrar todos os filmes logo de cara. Mantive o carrossel, mas expandido em quase toda a página, sendo possível mostrar 4 pôsteres de filme por vez. Todos os filmes em cartaz ficam nesse carrossel e não há mais uma página específica de filmes. Os filmes estão todos na home. Ao clicar em um dos pôsteres, um lightbox abre na página com todas as informações do filme, e um link fixo para a compra dos ingressos.
Header
Propus algumas mudanças pequenas no header. O menu de locais do site atual muda a ordem das cidades dependendo da sua localização. Na nova proposta, a ordem segue a mesma, e a cidade em questão fica em destaque. O menu hamburger é o mesmo independente da página que você está. A mudança que fiz foi deixar em realce a área em o usuário se encontra, assim ele se localiza nas opções do menu com mais facilidade.
Promoções e Sessões especiais
Para ambas as seções utilizei a mesma solução, exemplificada abaixo com Sessões Especiais:
Hoje temos uma página com a listagem das sessões especiais, e cada sessão tem sua própria página, cujo conteúdo é bem enxuto em cada uma delas. A solução em links de âncora foi adotada para Sessões Especiais e Promoções. Você fica com todo o conteúdo exposto para quem quer conhecer todas as oportunidades, mas ao mesmo tempo no início da página você tem uma visão geral.
Produtos
A página de Produtos segue a mesma regra geral das páginas de Promoções e Sessões Especiais, muitas páginas individuais para pouco conteúdo. A diferença é que para quase todos os submenus de produtos (4 de 5), existe a possibilidade de se preencher um formulário para entrar em contato com o cinema. No fim ficamos com 4 formulários em páginas distintas. Como eles coletam informações mais gerais a diferença entre eles é pequena, então unifiquei o formulário para a proposta nova. Agora existe apenas um formulário no fim da página com um link de âncora. Se você precisa entrar em contato com o cinema a respeito de algum produto, há o mesmo formulário, independentemente do seu interesse.
Notícias
Atualmente há cinco categorias de notícias. Há notícias repetidas em mais de uma categoria, e notícias que não estão em nenhuma categoria, apenas na home das notícias. As categorias funcionam mais como tags, e criar a partir disso páginas separadas para cada categoria gera confusão (por exemplo, entrar em duas categorias diferentes e ver a mesma primeira notícia) e desmembramento desnecessário de uma seção, já que notícias não são o foco principal do site.
A sugestão é limitar o conteúdo visível para notícias apenas de filmes em cartaz e lançamentos. O acervo das notícias fica acessível pela busca. Não há porque deixar acessível 101 páginas de conteúdo desde 2013.
Unidades
Seguindo a lógica das outras sessões, o menu de Unidades também conta com uma página para cada assunto. Para a solução proposta os conteúdos foram reunidos na mesma página, usando acordeon para mostrar o conteúdo de cada cidade. Como o usuário provavelmente vai nessa página em busca de uma informação pontual, não vi a necessidade de deixar todo o conteúdo exposto de uma vez.
Institucional
A área do Serviço de Atendimento ao Cinéfilo da sessão Institucional foi transferida para o footer. Por ser na verdade uma sessão de dúvidas e ajuda fazia mais sentido ficar como link fixo em todas as páginas. O conteúdo dos dois links restantes foram realocados para a própria página institucional, por ser um conteúdo relativamente pequeno. A sessão de Sobre o Espaço Itaú ficou no acordeon, assim quando o visitante entra na página institucional já vê todo o conteúdo de cara. Se quiser saber mais sobre a história, é só clicar no acordeon.
Conclusões
Logo no começo o projeto se mostrou muito mais complexo do que o esperado, pois em um site com essa finalidade aparecem instâncias de conteúdo interno que não consegui mensurar num primeiro momento.
Demorei um pouco para terminar o projeto e nesse meio tempo o site mudou. Notei mudanças pequenas nos menus. O fluxo de compra de ingressos também mudou. Antes o usuário era levado para um site externo, mas agora a compra é feita no próprio site do Espaço Itaú. Esse fluxo de compras foi um ponto relevante da pesquisa, mas com essa mudança no meio do processo, resolvi deixar a análise para um próximo post próprio. Para não ficar confuso, resolvi finalizar o estudo com base do site da versão de abril/2017, de quando comecei.
Foi interessante perceber que mesmo após ter definido as telas nos estudos à mão, muita coisa mudou no processo de fazer o wireframe no Axure. À medida que você vai criando as interações a percepção da experiência de uso acaba mudando.
Obrigada pela leitura! Fiquem à vontade para deixar comentários, sugestões ou indicações de leitura :)
