Redesign do Instagram Web
17.01
O que aprendemos redesenhando o Instagram:
Para quem não nos conhece, somos a equipe de design dentro da Vizir – mesmo sendo uma pequena porção dentro de vários devs por aqui – e como designers, temos a missão de alinhar o Design com o Desenvolvimento. Certo dia, percebemos que poderíamos fazer mais do que o nosso trabalho do dia a dia, poderíamos como designers, encontrar nossos próprios “Problemas do Design” e nos desafiar: se fôssemos trabalhar com um App que é muito usado, o que poderíamos fazer de diferente? O que poderíamos melhorar em termos de Usabilidade e Interface? Tomamos como desafio então, escolher um aplicativo conhecido no mercado e fazer uma análise de como poderíamos repensá-lo como um todo.
Mas qual App trabalhar?
Como prega o bom e velho Design, sempre olhamos pelo belo, mas também não esquecemos de analisar dados, pois o Design também é responsável por entregar muito mais do que uma imagem bonita aos olhos, o Design precisa que este “Belo” seja comprovado com números de download ou tempo de navegação. Pesquisamos então, quais eram os Aplicativos mais baixados, no caso, nos atemos ao número de download para o sistema iOS. Encontramos dados da Exame e vimos que em 2017, os 5 aplicativos mais baixados foram respectivamente: Bitmoji, Snapchat, YouTube, Messenger e Instagram.
Dentre esta gama de opções acabamos optando pelo Instagram, por termos familiaridade com a aplicação dentro do time da Vizir e também através do Zen Voting, mas optamos por focar na sua versão desktop, onde é possível ver uma grande diferença na performance, tanto da usabilidade quanto do layout em si.
Após a escolha
O segundo passo foi verificar se encontrávamos exemplos de outros aplicativos que também usavam dessa sinergia entre “mobile e desktop”, um dos mais conhecidos atualmente é o Whatsapp, a versão desktop cumpre a tarefa de transmitir a mesma função, do mobile, para o desktop. Apesar da versão desktop do Instagram ser parecido com o mobile, ele não é muito fiel ao aplicativo, como a distribuição de algumas funcionalidades: os “stories” por exemplo, que são mantidos na lateral da tela enquanto no app ele fica na parte superior, além da ausência de algumas delas: como as mensagens diretas, opção de curtir e responder comentários e etc. Isso prejudica a performance do aplicativo quanto ao seu usuário mas também faz com que pessoas deixem de usá-lo pela falta de praticidade e de elementos que se encontram na versão mobile.
Entendemos que por muitas vezes, nós como designers, tomamos determinadas decisões para que a utilização de uma aplicação seja priorizada em um determinado device, mas entendemos que poderíamos atender alguns usuários (grandes Marcas, por exemplo).
O Desafio
O primeiro e grande desafio foi identificar o que poderíamos efetivamente alterar e que traria um ganho para a aplicação, em termos de usabilidade e design. Afinal, é o Instagram. Trabalhar com uma aplicação tão conhecida, que o próprio time utiliza diariamente, poderia nos levar ao óbvio, então o famoso “outside the box” – ou seja sair do comodismo – foi colocado em pauta o tempo todo durante as conversas de brainstorm, para conseguirmos fazer uma análise crítica, com embasamento em Heurísticas e Boas Práticas de Design e não apenas no que gostamos ou deixamos de gostar em termos visuais.
Metas:
Entendendo o Aplicativo
O Instagram (lançado em 2010) é uma rede social de compartilhamento de fotos e vídeos, hoje em dia o aplicativo possui em média 400 milhões de usuários ativos em sua plataforma, além de ser utilizado por 48,8% das empresas e ser a segunda rede social mais usada no mundo, ficando atrás apenas do Facebook.
Além disso o instagram dá a liberdade dos usuários compartilharem suas fotos em outras redes sociais como facebook, twitter, tumblr e flickr aumentando a sua influência pela internet (dados da DMR Business Statistcs e da Omnicore Agency).
Os Problemas
Após uma análise do aplicativo, listamos os principais pontos de atenção encontrados e eles foram:
Importante ressaltar que pensamos que são pontos de atenção/problemas, dado que alguns detalhes que existiam no mobile, não existiam na versão desktop, e entendemos que ter nas duas versões da aplicação, poderia trazer um ganho e atender usuários que poderiam usufruir dessas features independente do meio que estivessem acessando.
Sobre as mudanças
Após listarmos os problemas, decidimos que algumas mudanças seriam feitas nessa primeira análise, até mesmo pensando que se fôssemos fazer uma rodada de teste com usuários, não teríamos um retrabalho extremo pois teríamos partido de um MVP:
Já a segunda versão possui o reticências no canto superior do sidebar, onde lá se encontra as fotos salvas, as configurações e outros. Além do que você tem a opção de fechar as sugestões caso você não queira vê-las.
Aprendizado
Pensando na utilização da aplicação, identificarmos estes itens e então sugerimos novas versões, a serem testadas com os usuários, pode oferecer um fluxo de navegação para eles que seja mais satisfatório no que diz respeito a atender as necessidades com aquele meio, independente de qual device ele esteja com acesso no momento e fazendo com que ele se sinta mais confortável com a aplicação. Mas todo esse trabalho de análise de uma aplicação, deve sempre levar em consideração Heurísticas, Boas práticas de design e usabilidade, para que não se desvirtue o olhar para algo pessoal e sim, para um resultado que tenha embasamento e siga realmente um caminho que seja mais adequado ao usuário. E o principal: fazer rápido, para testar rápido e se falharmos, tudo bem, pelo menos aprendemos qual caminho não devemos seguir.
Além disso, esse exercício cria, para empresa, a idéia de que seu produto precisa sempre inovar, não apenas no quesito de funcionalidade, mas também na experiência que quer passar para o cliente tanto no layout quanto no fluxo e como experiência final, como experiência de marca, para tornar o usuário um propagador da aplicação, quase que uma propaganda gratuita.
Projetos como esse mostram que não precisamos nos ater apenas às atividades do dia-a-dia, – isso quando falamos de nós, equipe de Design, designers – que é possível sair da nossa zona de conforto e nos surpreender pois em todo aplicativo há sempre itens a serem melhorados, e o exercício que fizemos, ajuda o designer à melhorar não só o app, mas o olhar como profissional de design e praticar o que sabe.
Esse post foi realizado pelo time de design da Vizir: Heloisa Souza, Carol Chang, Fernanda Ishimoto e Priscila Sonnesso.
Presidente de Portugal no encerramento No último dia aconteceu a trilha FullSTK, focada...
Eita, sô! Chegamos ao décimo aniversário da Vizir! Chegamos em um momento...
Terceiro dia de evento. Fila para entrar, muita gente de novo, mas faz parte! Tudo...
Palco principal do WebSummit, as luzes dele são legais! No primeiro dia, ou melhor,...
Estamos contratando Desenvolvedores(as)! Apaixonados por resolver problemas reais e que...