Ideação 8: Protótipo em Papel

Esta lição pode ajudá-la a ganhar pontos em toda a seção Técnica da rubrica de julgamento.
Esta lição será especialmente útil com "Experiência do usuário e design".

Nesta lição, você vai ...

● Saber mais sobre as convenções de UI comuns

● Criar um protótipo de papel do seu aplicativo

Key Terms and Concepts

● Protótipo - um modelo inicial de um produto

● Protótipo de Papel - uma representação desenhada à mão de como será a aparência de seu
aplicativo
● Prototipagem de papel - criando um protótipo de papel
● Convenções - é algo que é comum ou muito usado
● UI ou IU - User Interface / Interface do Usuário
Inspiração

Agora que você tem uma ideia para seu MVP, é hora de esboçar algumas ideias e pensar em como seu
aplicativo e interface de usuário podem ser.

Um protótipo é um modelo inicial de algo. Existem diferentes tipos de protótipos, mas iremos nos
concentrar em protótipos de papel nesta lição. Um protótipo de papel é uma representação desenhada
à mão de como será a aparência de seu aplicativo. Normalmente se parecem com capturas de tela.

Quais são os benefícios da prototipagem em papel ou da criação de um protótipo em papel?

● Você pode comunicar rapidamente suas ideias de forma visual. Por exemplo, você pode mostrar
o que acontece quando você clica em botões em seu aplicativo.
● É colaborativo! Quando você trabalha no papel, é mais casual e as conversas surgem da
experimentação.
● É barato! Você não precisa gastar muito dinheiro e tempo para criar um protótipo de papel. Você
pode usar materiais como papel, recortes de revistas, post-its, marcadores, adesivos, fita adesiva
e cola.
● Você não precisa de acesso a um computador ou à Internet.
● Você não precisa ser um especialista técnico para esta parte do processo.
● Você pode ver como seus usuários reagem ao seu protótipo de papel para aprender
rapidamente o que pode ou não funcionar em seu design.
● Os protótipos podem ajudar a confirmar as decisões de design antes que você gaste mais tempo
desenvolvendo e programando seu aplicativo.

Antes de começar, aqui estão algumas convenções de IU básicas que você pode usar em seu aplicativo.
Uma convenção é algo comum ou muito usado. Aqui estão algumas convenções de interface de usuário
comuns. Você não precisa usar todas essas convenções, elas são apenas sugestões para certas coisas
que você pode querer incluir em seu aplicativo.
Botões

Os botões são usados ​em todas as interfaces do

usuário móvel. Eles são usados ​para solicitar que
o usuário execute uma ação importante, como
“inscrever-se” ou “enviar”. Tenha cuidado para
não usar botões em excesso, muitos botões
podem parecer desordenados e confusos, e o
usuário não saberá qual usar.

Tela Inicial

Muitos aplicativos usam a tela inteira para

exibir seu logotipo quando você o abre pela
primeira vez. Isso é chamado de tela inicial. Às
vezes, eles colocarão um menu de navegação
ou botões nesta tela.

Logotipo e Cabeçalho

A maioria dos aplicativos tem um lugar na parte

superior para um logotipo no menu de
navegação principal.
Barra de Navegação

Uma barra de navegação ajuda os usuários a

encontrar o que procuram em um aplicativo.
Muitos aplicativos colocam uma barra de
navegação na parte inferior da tela contendo
ícones. Você deve limitar sua barra de
navegação a cinco itens ou menos para não
ficar confusa.

Menu em tela cheia

Você pode mostrar ao usuário um menu de tela

inteira para ajudá-lo a navegar no seu aplicativo.
Isso pode parecer uma lista ou você pode ser
criativo e usar blocos de cores ou imagens.

Menu de hambúrguer

Um menu de hambúrguer tem a seguinte

aparência:

É usado quando uma barra de navegação ou

menu completo não cabe na tela. Ao clicar
nele, aparecerá um menu oculto.
 Menu de mais opções

Um menu de mais opções se parece com este:

Semelhante a um menu de hambúrguer, esse

menu também exibirá informações que não
cabem na tela.

Barra de Pesquisa

Ter uma barra de pesquisa é uma maneira

extremamente comum de ajudar os usuários a
navegar em seu aplicativo.

Adicionar uma lupa ao lado da barra de pesquisa

ajuda os usuários a saber que se trata de uma
barra de pesquisa.

Feed de rolagem

A maioria dos usuários está acostumada a rolar

para baixo para ver mais informações. Um feed
pode ser usado para mostrar mais informações
do que cabem em uma tela.

Dê uma olhada em alguns dos aplicativos que você tem em seu telefone. Quais partes da interface do
usuário você vê sendo usadas continuamente? Quais partes você acha que parecem legais ou tornam o
aplicativo fácil de usar?

Embora você possa querer que seu aplicativo tenha uma aparência realmente diferente para se
destacar de seus concorrentes, o uso de convenções pode realmente ajudar seus usuários a entender
como usar seu aplicativo mais rapidamente. Por exemplo, a maioria dos usuários está familiarizada com
um menu de hambúrguer, então incluir um em seu aplicativo pode ajudar um usuário a entender
rapidamente o que fazer ao abrir seu aplicativo. Você também pode projetar um novo tipo de menu,
mas pode ser confuso para os usuários e eles podem não conseguir descobrir como usar seu aplicativo.
Claro, você deve ser criativo com seu aplicativo se quiser! Na seção de recursos adicionais, há dicas
sobre como testar diferentes partes de sua IU com seus usuários. Mais tarde, em Empreendedorismo 5:
Criar um logotipo , você criará um logotipo e escolherá um esquema de cores para seu aplicativo.

● Baixe um novo aplicativo da app store agora mesmo. Possui alguma das convenções
mencionadas acima? Tente usar o aplicativo por cerca de 5 minutos. Quanto tempo você
demorou para descobrir como usá-lo?

● Precisa de algumas sugestões?

Experimente All Trails (iOS e Android) ou Spotify (iOS e Android).

Antes de começar, você pode aprender mais sobre prototipagem em papel, fluxo do usuário e
teoria das cores neste breve vídeo com Melissa Powell, que faz parte da equipe de Relações com
o desenvolvedor do Google, e Mariam Shaikh, que é designer sênior de experiência do usuário no
Google.

https://www.youtube.com/watch?v=JMjozqJS44M
vídeo começa no 1:40. Ative as legendas em português!

Pronta para começar?

É hora de criar seu próprio protótipo de papel.

O esboço é uma parte fundamental do processo de design e pode ajudá-lo a tomar decisões
importantes sobre o que projetar. Seu protótipo de papel pode ser tão simples quanto
desenhar em um pedaço de papel e é útil quando você está trabalhando com suas ideias
iniciais. Você pode mostrar a estrutura básica de seu aplicativo e experimentar como as
pessoas irão interagir com seu aplicativo. Você também pode testar as cores e onde os botões
irão. Gastar tempo agora para testar suas ideias no papel ajudará você a economizar tempo
mais tarde, ao transferir suas ideias para o protótipo digital.

Atividade - Prototipando

Clique aqui e pegue o modelo de prototipação

O que você vai precisar:

● Papel liso
● Canetas/lápis
Opcional:
● Impressões do modelo acima
● Adesivos
● Cola
● Tesouras
● Fita
● Revistas

What you will do:

1. Em equipe, esboce cada tela de seu aplicativo. Anote suas idéias à medida que surgirem
e tente não julgá-las ainda. Você pode questioná-los mais tarde! Lembre-se de se
concentrar na criação de recursos que fazem parte do seu MVP desde a última lição de
concepção. Comece a projetar os recursos que estão incluídos em seu MVP primeiro. Ao
fazer isso, você pode querer considerar:
○ Como será a primeira tela?
■ Terá um logotipo?
 ■ Qual será o esquema de cores?
Você passará mais tempo criando seu logotipo e esquema de cores nas
lições a frente
○ Seu aplicativo precisa de um menu para navegação? Qual será a aparência
desse menu? O que estará nesse menu?
○ O usuário fará login no seu aplicativo? Qual seria a aparência da tela de login?
Que tal uma página de perfil?
○ O que acontece se você clicar em um botão para ir para a próxima tela?
○ Qual será a aparência de cada tela?

2. Confira o exemplo de um protótipo de papel abaixo.

Observe a maneira como os adesivos são usados ​para mostrar onde os usuários podem
clicar nos botões. Além disso, em alguns casos, há esboços abaixo, o que possivelmente
seria a próxima tela para a qual um usuário é levado assim que um botão é clicado.

3. 3. Depois de ter um protótipo funcional, crie uma simulação de como o usuário navega
no aplicativo. Você pode tirar fotos conforme mostrado no vídeo acima e criar um .gif ou
vídeo.

REFLEXÃO

Você acabou de criar seu protótipo de papel! Recomendamos que você salve seu protótipo em
papel porque pode ser necessário consultá-lo enquanto trabalha na construção de seu
aplicativo. Certifique-se de deixá-lo em um local seguro para não perdê-lo ou peça a um dos
membros da sua equipe que seja responsável por ele.

❏ Se o design do seu aplicativo deve ser o “produto mínimo viável”, quais recursos devem
ser incluídos e quais recursos você está removendo do seu design?
❏ Você escolheu seguir alguma convenção? Em caso afirmativo, quais?
Recursos adicionais: usando ferramentas digitais para prototipar

Se você estiver em uma equipe remota, também pode criar um protótipo digital de seu aplicativo. Você
pode tentar uma ferramenta como o InvisionApp ou até mesmo algo mais simples como o Google Slides.
Aqui está um exemplo de protótipo de papel digital usando o Apresentações Google:
Alternativa: Modelo de Prototipação Digital