Um exemplo do porquê Design é diferente entre plataformas
Em lógica de programação sempre é necessário separar o seu problema em diversas etapas e elaborar diversos pequenos passos para atacar esse problema e chegar em uma solução. Na área de design de apps, esta situação se repete muito mais vezes do que se imagina, porque se leva em consideração muitos fatores lógicos para criar um bom design do que só deixar esteticamente atraente.
Muitas pessoas acham que um bom design tem que ser apenas algo bonito com um bom uso de cores, mas falham em ver a enorme parte lógica e rigorosamente pensada. Um design bem elaborado também leva em conta como posicionar os elementos para guiar a visão do usuário, como utilizar as cores para elevar a concentração ou como o fluxo de navegação entre telas deve ser feito. Ou em outras palavras, deve-se levar em conta a experiência do usuário com o app, ou a UX.
Como Ken Norton, ex-gerente de produtos da Google diz “Sempre comece com o problema que queremos resolver. UX Design é focado em tudo que afeta a jornada do usuário para resolver o problema.”
Para mostrar como é importante pensar e refletir na lógica de como se elaborar um bom UX Design, vamos passar por um aplicativo de uma grande companhia: A Steam da Valve.
Já digo que, como sou um grande jogador de jogos eletrônicos de computador, sou um enorme fã da Valve e da Steam. Revolucionaram de forma incrível o mercado de jogos eletrônicos com a introdução da Steam como um mercado para venda de cópias digitais de jogos (foram um dos pioneiros a abandonar CDs/DVDs), além de fazer jogos que são destaques no Game Design.
Ou seja, eles sabem muito bem o que estão fazendo, e com certeza sabem fazer um bom Design, tanto para a parte de aplicativos e jogos quanto hardware até. Basta apenas olhar para a Steam de Desktop para ver a potência da Valve.
Entretanto, quando eles quiseram trazer a Steam para os celulares, eles quiseram trazer a mesma Steam do computador para o mobile. Como o aplicativo já estava consagrado pelo seu design e ar revolucionário, não tinha porque não fazer algo igual a versão de computador.
Esta decisão foi um tiro no pé. O problema é que quando vamos para um celular, não se possui as mesmas ferramentas de input, nem se quer o mesmo espaço para organizar seus elementos de UI. Ou seja, não tem como fazer algo para celular como se fosse para computador ou vice-versa.
Exemplo é o Windows 8 da Microsoft, que quis imitar a sensação de fluxo rápido de um smartphone dentro do computador, porém foi um desastre total.
Assim, chegamos ao aplicativo Steam Mobile. Um aplicativo frustrante de se utilizar que falha em imitar o esplendor do seu irmão mais velho que é a versão de Desktop. Bom, vamos o analisar e aprender o que não fazer de UX para mobiles.
A primeira vista fica claro que houve a tentativa de se fazer o mais próximo possível com sua versão de Desktop. O porquê disso pode ser porque os desenvolvedores quiseram com que as pessoas que forem usar não precisem reaprender como utilizar a Steam. Entretanto, ao fazerem isso fica óbvio que não levaram em conta o tamanho da tela de um celular, assim a sua UI fica amontoada e confusa, fazendo com que o usuário não saiba por onde seguir com seus olhos.
Sempre que se for fazer um aplicativo é importante que você deixe espaço para o seu usuário se localizar dentro dele. Dessa maneira, você evita com que o usuário faça erros e consiga executar o seu objetivo no aplicativo de maneira rápida e precisa. Caso contrário, a experiência de uso do usuário fica frustrante e até mesmo pode gerar uma sensação de claustrofobia com uma quantidade exagerada de elemento presentes na tela.
Outra questão lógica que se deve levar em conta quando está se pensando no design é as ferramentas de interação que o usuário, que no caso dos smartphones atuais são os dedos. Por isso quando você criar botões, cards e elementos de navegação, você tem que deixa-los grandes o suficientes e separados o bastante com o fim de deixar sua interação o mais precisa possível.
As interações do usuário tem que dar uma sensação de naturalidade para o usuário, algo que também isso falha na versão mobile da Steam. Um exemplo são aqueles botões que são setas cujo objetivo é para fazer o scroll lateral das imagens, algo que seria perfeito para uma pessoa que tem um mouse, mas não se há mouses em celulares. O engraçado é que você pode utilizar o deslizar do dedo para mudar as imagens, mas mesmo assim não parece natural porque o scroll é travado em seções, dessa maneira prendendo a interação do usuário e a transformando em algo mecânico.
Por isso, estude os instrumentos que o usuário utilizará para interagir com a interface e tente deixar todas as interações o mais natural possível. Isso faz com que o usuário não se sinta engessado durante o uso do aplicativo e evita qualquer tipo de confusão que possa ocorrer.
Entretanto nem tudo dentro do aplicativo é ruim. A lista de amigos é até mesmo um exemplo de como fazer uma boa tabela em aplicativos mobile. Algo simples, sem qualquer tipo de detalhe extra e logo já mostra todas as informações necessárias para o usuário.
Ou seja, em termos de usabilidade é algo eficiente e eficaz, além de ser algo bem fácil de se aprender a utilizar. Há entretanto alguns detalhes que poderiam ser adicionados para melhorar esta tela, como adicionar filtros para os seus amigos, a possibilidade de criar grupos e de adicionar amigos. O engraçado é que essa tela reformada já existe e seria perfeita para o Steam Mobile, porém ela está sendo usada para a Steam Desktop.
Entendo que a Valve quis deixar a versão mobile o mais próximo com a versão desktop já que ela é uma verdadeira obra de arte em questão de design para aplicativos para computadores. Além disso, nota-se que eles quiseram fazer o mais próximo possível para manter sua identidade visual.
Então, será que há como fazer um design para a versão mobile sem perder a essência de sua versão desktop? É possível, porque seguindo os detalhes que mencionei anteriormente eu refiz parte da tela Store da Steam mobile. Apenas fazendo pequenas alterações como espaçamento entre os elementos, removendo botões e navegação não natural torna-se algo mais fácil de utilizar e mais visualmente atrativo.
Assim concluímos que UX e a UI é algo que tem que ser estudado sempre, e o que foi utilizado em um projeto para uma determinada plataforma ou área não pode ser transportado para uma situação totalmente diferente. Isto mostra o quanto você deve ter uma visão crítica e realizar sempre uma análise lógica sobre o que você está criando. E essa análise e visão não é algo que se adquire um dia para o outro, é algo difícil que precisa ser treinado por muito tempo e que até mesmo gigantes da indústria podem errar nessa área.
