MB WAY: um caso de estudo em usabilidade

Apesar de ter funcionalidades muito úteis, a app MB WAY tem graves problemas de usabilidade.

A rede Multibanco, operada pela SIBS, é algo de que me orgulho como português. Tendo visitado e vivido noutros países, já senti mais do que uma vez a falta das inúmeras funcionalidades que disponibiliza e da facilidade com que é possível usá-las. Este é de longe o melhor sistema de caixas automáticas que alguma vez utilizei.

Há alguns anos, a SIBS criou uma aplicação para dispositivos móveis a que chamou MB WAY. E este é o tema do artigo de hoje.

Na aplicação MB WAY é possível realizarmos tarefas que já podíamos fazer de outras maneiras (como criar cartões de crédito virtuais temporários) e algumas funcionalidades novas como pagamentos por telemóvel. Era e continua a ser uma app inovadora em Portugal, um país ao qual ainda não chegaram sistemas de pagamento internacionais como os da Apple e da Google.

Contudo, a usabilidade da app fica aquém daquilo a que a SIBS nos habituou. Quando novas funcionalidades são adicionadas à app, são acrescentadas à interface sem grandes cuidados. Isto não é característico da SIBS e pode deteriorar a relação dos utilizadores com a app.

Eu sistematizei aqueles que considero serem os maiores problemas da versão Android da app e realizei pequenos testes de usabilidade com duas pessoas que já utilizavam a aplicação. Durante a minha investigação percebi que a versão iOS da app é muito diferente da versão Android (o que é, na minha opinião, um problema a nível de identidade corporativa), mas por uma questão de simplicidade e porque eu tenho um telemóvel Android, decidi focar-me apenas nesta versão.

O que é que podemos fazer com a MB WAY?

Para usar a app é necessário associar pelo menos um cartão de débito ou crédito. Depois disso, podemos:

• Fazer pagamentos com NFC;
• Fazer pagamentos lendo um código QR;
• Fazer pagamentos dando o nosso número de telemóvel;
• Consultar os nossos últimos movimentos na app;
• Criar e gerir cartões de crédito virtuais temporários;
• Obter um código que permite levantar dinheiro numa caixa Multibanco sem cartão;
• Transferir dinheiro para um amigo através do seu número de telemóvel;
• Participar no “MB WAY Challenge”, um passatempo que premeia mensalmente as pessoas que mais usam a app e a partilham com amigos;
• Obter informação sobre descontos exclusivos, lojas aderentes e Multibancos próximos.

Os problemas da aplicação MB WAY

A aplicação possui funcionalidades muito úteis escondidas atrás de uma interface pouco intuitiva. Vou começar por analisar duas interfaces que, na minha opinião, são particularmente problemáticas: a página principal e o menu.

A página principal da app tem elementos com tamanhos desproporcionais à sua importância; tem um botão para atualizar a página quando o único elemento que pode ser atualizado é a data do último acesso (que não faz sentido querermos atualizar depois de entrar na app); e apesar de ter um menu estilo “hambúrguer” (que por si só já pode ser considerado problemático) existem opções perdidas fora desse menu.

O menu, depois de aberto, é gigante. Isso seria aceitável se houvesse algum motivo que o justificasse, mas infelizmente não existe motivo algum para as definições estarem espalhadas por várias páginas. Suspeito que, à medida que novas funcionalidades foram sendo acrescentadas à app, não houve interesse em reestruturar essas páginas e, por isso, cada definição ficou numa página à parte. Esta escolha traz desvantagens para o utilizador por tornar a interface mais caótica e dificultar o acesso às definições.

Estes foram os problemas mais graves que encontrei, mas existem outros. Como é que podemos resolver uma situação destas?

Como abordar o problema

Eu decidi criar alguns mockups para mostrar como é que a aplicação poderia ser se fosse dada mais ênfase à usabilidade. Comecei por listar todos os problemas de usabilidade que podiam ser melhorados, alguns dos quais já mencionei. Também registei as opiniões de dois amigos que utilizam frequentemente a aplicação. Depois desenhei interfaces alternativas.

Para isso analisei os elementos visuais que deveria manter, e decidi que o aspeto da aplicação era demasiado único e particular para ignorar. Por isso, escolhi manter o esquema de cores simples e assertivo (baseado no vermelho #d52027, cinzento #d1d2d4 e branco), o tipo de letra distinto (o mais próximo que encontrei disponível gratuitamente foi Sofia Pro Light), e o uso extensivo de ícones.

Depois de desenvolver uma versão inicial dos mockups voltei aos meus “consultores” para receber o seu feedback, o que significa que as interfaces passaram por várias iterações antes da versão final.

MB WAY 2.0: uma interface renovada para uma melhor usabilidade

Abaixo estão as várias interfaces alternativas que criei para cada página. Algumas decisões que tomei basearam-se em suposições que fiz de acordo com a minha experiência de utilização e a dos meus amigos. Recomendo que a SIBS, tendo mais recursos do que eu, valide todas essas suposições com utilizadores reais para perceber melhor os seus hábitos e a adequação destas soluções.

Página principal

Esta é uma aplicação para pagamentos e, por isso, penso que os principais elementos que deveriam ser apresentados ao abrir a app deveriam ser os vários tipos de pagamentos. Afinal, são essas as opções que os utilizadores vão ter mais urgência em utilizar; se se adicionarem a esta página demasiadas opções secundárias, a facilidade e rapidez de utilização desses métodos de pagamento fica afetada. Relativamente ao menu, consegui condensá-lo numa barra com apenas 5 separadores.

Transações recentes

Aqui optei por dar mais importância às transações em si do que ao cartão com que foram efetuadas.

Gestão de cartões virtuais

Na versão atual da aplicação esta página não permite criar cartões virtuais, o que não é intuitivo. Eu adicionei essa opção, e decidi também diferenciar esta página da das transações recentes através dos cartões cinzentos, que acrescentam alguma personalidade.

Página de perfil

A aplicação não tem de momento uma página de perfil, mas tem uma página bastante semelhante: a página do “MB WAY Challenge”, o concurso mensal que premeia os utilizadores mais ativos. Na minha opinião, esta implementação reflete uma falta de visão para o futuro: o que acontecerá caso seja adicionado outro concurso, por exemplo?

As interfaces devem ser sempre desenvolvidas com a mentalidade de que (quase) tudo pode mudar e, assim devem ser adaptáveis a vários cenários que possam ainda não existir. A chave para isso é a modularidade, que é algo que uma página de perfil acrescentaria a esta solução.

Página de definições

O problema das definições é semelhante ao da página de perfil: a falta de visão para o futuro fez com que cada uma ficasse numa página separada, o que pode ser mais fácil de implementar, mas não faz sentido para os utilizadores.

Conclusão

Estas são as minhas principais sugestões para a MB WAY. Há detalhes que não referi, como o primeiro separador do menu (que, na minha opinião, poderia ser mantido como está, mostrando descontos e lojas aderentes), bem como janelas pop-up e outras interfaces menos importantes. Não mencionei esses aspetos por serem menos relevantes para a experiência dos utilizadores; no entanto, se a SIBS quiser reestruturar a app terá de analisar cuidadosamente cada aspeto da interface.

Espero que este caso de estudo inspire a SIBS a repensar a atual implementação da MB WAY e incentive outras empresas a terem mais atenção à usabilidade dos seus produtos.

| Artigo originalmente publicado no Medium em inglês, traduzido para esta publicação pelo autor João Monteiro, engenheiro informático criativo.