Concrete Logo
Hamburger button

Da Arquitetura de Informação aos Protótipos de Alta Fidelidade

  • Blog
  • 12 de Dezembro de 2014

Não vou mentir… Os anos em que trabalhei em startups fizeram com que eu tivesse uma vantagem de fazer as coisas acontecerem “moving fast and breaking things” – ou seja, movendo rápido e quebrando coisas. Foi por isso que de planejamento de mídias sociais eu acabei me tornando designer de produto. Hoje, as várias descrições deste cargo podem ser confusas, como o Diogenes Brito fala neste post. Eu sempre adorei criar produtos desde o conceito (Tutudo, Mimpit e UniPay) e, junto com isso, trabalhar com Arquitetura da Informação. É por isso que desde minha última startup eu decidi aventurar e ser uma especialista em UX. Meu amor pela Arquitetura de Informação poderia me levar tão longe quanto wireframes, então tive um lapso e pensei: “se eu estou fazendo todos esses wireframes, por que não jogar algumas cores neles?”

Comecei a usar o software mais fácil para UI, o Adobe Fireworks (já que o Axure é um pouco mais complicado e os designers poderiam usar de verdade os meus wireframes em PNG no Fireworks, eu decidi usá-lo como ferramenta de protótipo).

imagem1may

Ok, concordo que era terrível! Mas foi uma tentativa de ver minha ideia de verdade. Aí eu tentei, tentei e tentei e consegui algumas telas boas:

E yes! Funcionou!

E yes! Funcionou!

Agora eu poderia testar meus produtos com protótipos de alta fidelidade. E os usuários realmente olham diferente para o papel e para mockups reais. Mas ainda não era suficiente: eu queria que qualquer um no time usasse o produto e me desse feedbacks reais, me dando pontos de vistas de tecnologia, marketing e negócios. Foi quando o Invision App apareceu. Funciona bem não só para produtos web, mas também para aplicativos que você pode instalar em seu aparelho, Android ou iOS. Ainda é de graça para um projeto, limitado a 30 telas. Mas não tenha medo, tente.

A comunicação entre todo o time melhora 100%. Sério, 100%. Agora nós podemos ver os pontos fortes e os pontos fracos do produto ao mesmo tempo que a arquitetura de informação ao invés de esperar por telas perfeitas e ter trabalho dobrado. Sim, sou uma usuária super feliz do Invision App (só esperando minha camiseta! Rs)

Mas não posso parar aqui. Eu sei que é importante focar no nosso campo de trabalho, mas desenvolvimento de produto e UX precisam de toneladas de conhecimento de diversas áreas (negócios, tecnologia, marketing, suporte, vendas e design). Eu mergulhei fundo no campo de aplicativos mobile para conseguir soluções de UX melhores, mais limpas e mais rápidas. Por isso instalei o XCode  e comecei alguns cursos para entendê-lo melhor (geeks de Android, não fiquem tristes, eu também instalei o Android Studio).

No meio disso tudo eu também descobri o Sketch. Já que o Adobe disse que vai suspender o Fireworks por um tempo agora, eu teria que achar um software amigável que me ajudasse a fazer as coisas mais rápidas. (Sim, eu odeio Photoshop; é para melhoria de fotos, não para UI).

O Sketch (do Bohemian Coding) se tornou até mais rápido que o Fireworks. Ele oferece Arboards nos tamanhos dos aplicativos e até converte os assets para @2x e @3x em um clique. Então, sim, é mais rápido! Você também pode achar um monte de plugins para te ajudar a começar. (De novo, geeks Android, ele tem também plugins que nos dá tamanhos XXhdpi. Yeah!)

Voltando ao XCode, quando você estiver familiarizado com o Sketch você vai gostar da Storyboard. Meu conselho é baixar um aplicativo de graça  e tentar entender o que foi feito, começando com um curso simples, que te ensina desde o design de um app mobile até como colocá-lo no XCode. Não é difícil, confie em mim.

Como eu estou trabalhando com times ágeis e a maior parte dos nossos clientes já desenharam as telas, é legal fazer os cortes no PSD (a maioria dos designers usam photoshop), exportar para o XCode e começar a montar a tela no Storyboard. Assim, nós criamos o nosso protótipo diretamente no XCode e usamos uma ferramenta (MobRelease, criada pela Concrete Solutions, a empresa que trabalho agora) para instalar o aplicativo nos aparelhos.

Não tenha medo. Se você não tem experiência com códigos, o Invision App funciona muito bem pra você, mas se você quer ter uma interação real com o teclado e tudo mais, você pode tentar usar o XCode. No fim, quanto mais longe você for mais limpa a comunicação se torna e mais leve será o processo de entrega do produto. Não se restrinja ao que você faz de melhor, tente.  Design é divertido! E lembre-se, melhor feito que perfeito.

Dúvidas, sugestões ou considerações? Aproveite o campo abaixo. Até a próxima!