O que é prototipagem e como ela pode melhorar a criação de seus apps

Um dos passos mais importantes na hora de começar a desenvolver um aplicativo é saber qual a cara que ele vai ter. Afinal, não basta o app funcionar da maneira esperada e ter um monte de recursos legais se ele não oferece ao usuário uma experiência agradável. E é sobre isso que nós iremos falar hoje:

Como fazer um protótipo para seu app de modo que o usuário tenha uma boa experiência ao utilizá-lo?

Mas, antes de começarmos a falar da prototipagem em si, vamos por alguns pingos nos is. Porque, afinal de contas, o que é essa “experiência de usuário” e por que precisamos nos importar com isso?

A importância da UX (User Experience)

Experiência de usuário, ou UX (do inglês “User eXperience”), é tudo que tem relação com a experiência que o usuário tem com o produto ou serviço que está utilizando. Um pouco auto-explicativo, não?

Hoje em dia, porém, as pessoas possuem a concepção equivocada de que o design de UX se refere somente à parte gráfica de sites e apps, que precisam ser planejadas para tornar a navegação o mais agradável possível. E UX não é só isso.

“UX é a forma em que se experiencia o mundo, é a forma que se experiencia sua vida, é a forma em que você experiencia um serviço, ou… sim… um app ou um sistema de computador, mas é um sistema que é um todo.”

– Don Norman

Don Norman é um ex-funcionário da Apple, e quem cunhou o termo UX enquanto trabalhava na empresa. Ele diz que a experiência do usuário com um produto (no caso um computador que a Apple vendia na década de 1990) ia desde a descoberta, de quando se via ele pela primeira vez em uma loja, passando pela compra, quando a caixa não cabia dentro do carro, até chegar em casa e pensar “Ooh… parece assustador. Eu não sei se me atreveria a montar esse computador…”.

Tudo isso é a experiência do usuário, é tudo relacionado à experiência com o produto e até além do momento em que o produto se encontra por perto ou que esteja sendo utilizado, ela também se estende às conversas que se têm com outras pessoas sobre ele.

Mas o que faz uma boa UX?

A experiência deve ser prazerosa e útil para o usuário, ela envolve interações, emoções e a parte visual e fideliza e conquista o cliente. Os três pilares do design de UX são:

• Utilidade – O quão útil é o serviço para o cliente;

• Facilidade de Uso – Questão de ser fácil e rápido;

• Prazer – O quão prazeroso é utilizar o serviço.

Agora que já sabemos os princípios de UX e como eles são intrínsecos para proporcionar a melhor experiência ao nosso usuário, vamos falar sobre um outro conceito diretamente ligado a oferecer uma boa UX para o serviço: a interface do usuário, ou UI (User Interface).

Definindo UI (User Interface)

A UI é cobre toda parte gráfica e visual propriamente dita do app, site, ou sistema, como ele de fato aparece na tela do usuário. A diferença para o UX é que a UI trata de mostrar ao usuário como todas as funcionalidades estão dispostas na tela do dispositivo, enquanto a UX se preocupa em como essa disposição de elementos faz o usuário se sentir.

Você já se sentiu incomodado ao entrar em um site pelo celular e ter dificuldade para navegar porque a letra estava muito pequena para ler, ou porque os botões eram muito difíceis de clicar usando os dedos? Estes são ótimos exemplos de como a interface (UI) deste site produz uma UX ruim.

Quando desenvolvemos um site precisamos nos preocupar não só em fazer um visual bonito, que fique ótimo na tela de 24 polegadas do monitor do seu computador, mas também em como tornar esse site otimizado para aparecer em qualquer tamanho de tela, seja a de um celular, de um tablet, um monitor de 24 polegadas ou uma TV 4K de 80 polegadas. Isso se chama Responsividade, um dos conceitos mais importantes ao se tratar de desenvolvimento mobile.

Algumas dicas de UX e UI

• Use paletas de cores coerentes e que façam sentido para o seu site ou app;
• Escolha uma fonte que seja de leitura agradável;
• Deixar bem claro em que parte do site o usuário se encontra em cada momento;

Veja como a o botão “JavaScript” da barra de navegação está destacado para indicar que o usuário se encontra nessa seção do site.

• Evite colocar informações demais em uma página ou seção.

Se fossem 9h da manhã de uma terça-feira, com qual das placas você saberia se é permitido estacionar?

• Inserir Gatilhos para ajudar na tomada de decisão;
• Deixar claro o propósito da página;

Os problemas de uma UX ruim

UX ruim está relacionada aos os sete principais motivos que levam os usuários a deletarem um app:

Vimos um monte de conceitos novos e a influência que eles têm sobre o aspecto e a experiência de um app. Agora, que tal tentar por isso em prática?

Prototipando com Figma

“Ah, mas eu não entendo nada de programação, como vou fazer um app se não sei nem o que ‘HTML’ quer dizer?”

Você não precisa saber nada! A ferramenta que vamos utilizar em nossa prototipagem é o Figma, que serve justamente para montar o aspecto visual da nossa aplicação e simular as interações de uma página com outras sem escrever uma linha de código.

Os protótipos montados no Figma nos permitem simular o produto final e, a partir disso, podemos fazer testes de usuário, testando tanto a UI quanto a UX para garantir que o desenvolvimento do app de verdade já comece bem encaminhado.

Já pensou ter que refazer boa parte do visual do app só porque lá na frente perceberam que alguma coisa não funcionou tão bem quanto no papel? Com o Figma podemos evitar que esse tipo de situação venha a acontecer.

Cores

Antes de começar a fazer o protótipo propriamente dito devemos pensar em qual paleta de cores usar. O Adobe Color possibilita escolher alguma das paletas mais populares criadas por outros usuários, ou que você mesmo crie a sua.

Fontes

Para escolher as fontes, o Google Fonts é a aposta certa. A plataforma possui diversas fontes disponíveis, é só escolher a que melhor combinar com o estilo do seu app.

Ícones

Navegar em um app sem ícones não daria muito certo, então o Flat Icon é uma boa fonte para pesquisar por ícones. É possível mudar a cor deles, escolher dentre alguns tamanhos e salvar em diversos formatos, mas é recomendado que ícones sejam salvos com a extensão “.png” para manter a transparência da imagem quando forem posicionados sobre outros componentes.

Primeiros passos no Figma

Com nossos assets em mãos, podemos começar com o Figma. Basta criar uma conta gratuita e depois começar um novo projeto clicando no botão de “+” que fica ao lado do seu nome.

Já dentro do projeto, na área esquerda da barra superior você vai encontrar as ferramentas move, frame, shape, drawing e text, além do botão para mostrar e ocultar comentários.

Note que em “shapes” há um dropdown para usar outras ferramentas de formas geométricas no lugar do retângulo.

No painel esquerdo você tem a organização de todos os componentes usados no projeto. Através dele você pode reordenar, bloquear, renomear e deletar qualquer elemento.

No painel direito vemos três abas: design, prototype, e code.

Enquanto a aba esquerda nos permite criar o esqueleto das telas e seus componentes (botões, caixas de texto, ícones, etc), a da direita se encarrega de trabalhar com efeitos nas telas. Nela é possível mudar a cor, posição, blur, blend mode das camadas, tamanho e inclusive a qual formato a tela deve se adequar (iPhones, Androids, tablets, desktops, Apple Watch, folha A4, post de Instagram e muitas outras opções).

Criando interatividade no protótipo

Isso tudo que foi mencionado acontece apenas na aba design, mas é na aba prototype que a mágica do Figma realmente começa a acontecer: em prototype conseguimos fazer com que os layouts respondam aos cliques do mouse e executem ações.

Está prototipando um app de música? Então com o simples arrastar de uma setinha você consegue fazer com que um determinado botão, como o play, te leve até uma página diferente, como a tela em que a música é reproduzida. Basta ligar os botões de uma página até a outra usando os nós que ficam visíveis usando a aba prototype, e então apertar o botão “Present“, que fica no lado direito da barra superior.

A parte mais trabalhosa talvez seja a de criar o design e os layouts para cada página, mas tendo isso já em mãos é fácil ver como o app vem à vida.

Nessa imagem vemos todos os nós que conectam nossas páginas. A rede parece simples, mas note que no “menu” criamos conexões apenas para três das opções que ele contém. Caso as demais telas do app já estivessem prontas, teríamos muito mais conexões e complexidade na rede, talvez até mesmo páginas sendo redirecionadas entre si sem precisar passar primeiro pelo menu.

Parabéns, você acabou de usar o Figma para fazer o protótipo de um app!

Pudemos ver de maneira rápida e intuitiva como ele se comportaria na tela do celular antes mesmo do desenvolvimento começar e, acreditem, qualquer erro ou falha de UI e UX observado nessa fase é crucial. Isso porque é muito mais fácil e rápido arrumar esses erros dentro do protótipo do que ter que mexer no código do app, pois dependendo do tipo de erro o desenvolvimento pode ser atrasado em semanas.

Além disso, outra grande vantagem de se montar um protótipo é que é muito mais fácil se guiar no desenvolvimento já tendo uma base visual como guia.

Gostaria de ter seu próprio app? Por que não tenta fazer você mesmo um protótipo para vê-lo funcionando também? E, caso queria ver ele no ar, traga a sua ideia para a EJCM! Entre em contato conosco hoje e faça seu orçamento.