Primeiras aulas do curso UX Design com Axure parte 1: protótipo para App mobile

UX Design com Axure parte 1: protótipo para App mobile

Fluxo do desenvolvimento: o AppMap - Criação de fluxograma

Se criarmos um produto e lançarmos no mercado sem que ele tenha sido testado, ele não terá uma boa aceitação do público, e mesmo que tenha, é muito provável que com o tempo seus usuários passem a encontrar problemas em seu funcionamento.

Os protótipos existem justamente para que possamos testar nossos produtos antes de lançá-los no mercado em larga escala. No mundo físico, encontramos protótipos para mouse, teclado, carros e até cabine de aviões. No mundo digital, criamos protótipos para testar todo o tipo de interação humana com uma aplicação; podemos construir protótipos para sites, sistema de mercado ou um aplicativo mobile.

Neste curso, criaremos um protótipo para um aplicativo de smartphone; desenvolveremos um diagrama de como esse aplicativo deve se desenrolar de tela para tela, para posteriormente desenvolvermos um "entregável" a ser testado em um tela de computador, assim como em um celular.

Criamos uma pasta denominada BIZE, o mesmo nome do aplicativo que iremos criar. Nela, estão contidos o briefing e uma biblioteca de widgets. Abriremos, primeiramente, o briefing:

Cliente: Apeperia

Protótipo: Bize

Descrição

Vamos desenvolver um aplicativo para smartphones que deve funcionar como GPS para ciclistas e indicará o melhor caminho para os usuários. Os usuários poderão visualizar outros contatos do mapa, eventos e locais de interesse; poderão adicionar marcações na localização que estiverem e enviar mensagens a outros usuários. Também serão informados quando algum amigo estiver por perto de sua localidade, ou quando algum evento estiver ocorrendo.

Começaremos abrindo o Axure, criando um novo arquivo e clicando na opção "Create New RP File".

Ao visualizarmos nosso ambiente de trabalho, perceberemos que o Axure cria automaticamente algumas páginas, e nós iremos deleta-las, de forma a ficarmos somente com a Home.

área de trabalho com páginas

Modicaremos o nome Home para AppMap, selecionando a aba correspondente.

AppMap

Essa área em que se localiza o AppMap corresponde ao "Sitemap". Neste espaço estarão todas as telas do projeto, inclusive o diagrama de fluxo, ou seja, trata-se do mapa do aplicativo em que estamos trabalhando.

Clicaremos sobre AppMap com o botão direito do mouse e selecionaremos as opções "Diagram Type > Flow", isto é, montaremos o fluxo do aplicativo que guiará o funcionamento do protótipo. Depois que ele estiver concluído, poderemos de fato desenvolver o protótipo e a aplicação no Axure.

Abaixo da área "Sitemap" teremos o menu "Widgets".

widgets

Usaremos esse menu muitas vezes, pois lá consta uma série de formas que poderão ser utilizadas para compor um app map. Teremos, inclusive, algumas bibliotecas como a padrão e a de fluxograma, e usaremos todas por enquanto. Selecionaremos um título da biblioteca default e arrastaremos para a área de trabalho.

arrastando título

Posicionaremos o título na parte superior esquerda da área de trabalho e editaremos o nome para AppMap - Bize. Veremos que existe um cabeçalho de ferramentas na parte superior da tela, em que podemos acessar opções de estilo do texto; retiraremos o negrito da palavra Bize.

Estamos, como já foi dito, criando um aplicativo para celulares que funciona basicamente como um GPS para ciclistas. A primeira tela que podemos imaginar para um aplicação dessa natureza é a de um mapa. Em "Widgets", selecionaremos a biblioteca de flow, em "Select Library > Flow" para escolhermos a forma que abrigará a imagem do mapa.

Para a tela principal escolheremos a forma de diamante; a arrastamos até a área de trabalho e aumentamos seu tamanho selecionando o vértice superior direito e ampliando a forma manualmente.

Uma vez que a forma estiver posicionada, clicaremos sobre ela e escreveremos Tela Principal: - Mapa de fundo -Funcionalidades. O briefing nos deu uma ideia genérica sobre quais seriam as funcionalidades da aplicação, mas sabemos que elas poderão ser acessadas pela tela principal.

diamante

A partir da tela principal, existem pelo menos dois botões, sendo um deles de localização e o outro de pesquisas. Criaremos mais uma forma de diamante, que conterá o texto Botão Foco na localização. No entanto, utilizar a mesma forma de diamante da tela principal pode tornar nosso fluxo confuso. Para alterarmos a forma que já contém um texto, selecionaremos um pequeno ícone circular que se encontra na parte superior direita da forma. Com isso, teremos acesso a outros esquemas. Escolheremos o retângulo de bordas arredondadas:

ícone circular

Criaremos um novo botão responsável pela pequisa. Com o botão de localização selecionado, pressionaremos a tecla "Alt" - que duplicará o botão original - e arrastaremos o novo botão para cima.

duplicação do botão

Editaremos o nome do novo botão, que conterá o texto Botão BIZE.

botão bize

Com a experiência que possuímos através do uso de outros aplicativos de GPS, sabemos que ao pesquisarmos uma determinada localidade são exibidas informações de percurso, como quanto tempo levaremos para chegar ao nosso destino ou o cálculo da distância em quilômetros ou metros. Portanto, iremos criar um pop-up com informações do percurso, e para simbolizá-lo criaremos uma forma hexagonal contendo o seguinte texto: Pop-up com informações do percurso.

pop up

Ao digitarmos, por exemplo, "Rua das Flores" em uma aplicação de GPS, são sugeridas várias "Rua das Flores" em diferentes localidades, para que assim possamos selecionar o nosso destino corretamente dentre as sugestões apresentadas.

Logo, quando digitamos uma localidade no botão de pesquisa, somos direcionados a uma tela com todos os resultados da busca realizada pelo usuário. Criaremos uma forma retangular com o texto Resultados da busca, posicionado antes do Pop-up com informações do percurso, uma vez que não é possível exibir as informações antes do percurso ser decidido.

resultados da busca

Percebam que estamos montando um caminho a ser percorrido pelo usuário: temos a Tela principal, em que o usuário pode acionar tanto o botão de pequisa quanto o de foco da localização. Uma vez selecionado o botão de pesquisa, o usuário terá acesso a resultados de sua busca e, assim que escolher a localização adequada, conseguirá visualizar informações sobre o percurso, por meio de um pop-up.

Podemos dispor as formas em nossa área de trabalho da maneira que quisermos, de acordo com o interesse do fluxograma. Para alocar as formas, basta selecioná-las e movê-las, no entanto, existem dois modos de seleção disponíveis.

No canto superior esquerdo há a opção "Selection Mode":

selection mode

Com a primeira opção selecionada, clicaremos e arrastaremos a caixa de seleção sobre os itens de nosso interesse. Eles não precisam estar completamente envolvidos pela caixa de seleção azul.

parcialmente selecionados

Modificaremos o modo de seleção para "Select Contained Mode".

contained mode

Com este modo habilitado, precisamos envolver completamente um item com a caixa de seleção para que ele de fato seja selecionado. Na imagem abaixo, teremos apenas as formas Resultados da buscae Pop-up com Informações do percurso selecionadas, afinal, elas estão completamente envolvidas pela caixa de seleção, ao passo em que Botão BIZE e Botão Foco na localização, não.

não selecionados

Teremos ainda a terceira opção de seleção, o modo conector, que serve para desenharmos os caminhos do fluxograma. Selecionaremos essa opção arrastando o vértice de alguma das formas até outra, para estabelecermos uma conexão.

estabelecendo conexões

Precisamos orientar a direção do fluxograma nas conexões. Por exemplo, se o usuário selecionar o botão de foco na localização, ele não conseguirá retornar para a opção de tela principal. Para assinalar esse comportamento da aplicação, selecionaremos a seta de conexão entre a tela principal e o botão de localização, e alteraremos sua propriedade, incluindo um indicador de direcionamento.

alterando direção

Já no caso do botão de pesquisa, o usuário consegue retornar até a página principal. Portanto, selecionaremos esse indicador.

A partir de Botão BIZE, o usuário pode pesquisar um endereço, e assim faremos uma conexão de dois sentidos entre Botão BIZE e Resultados da busca.

resultado da busca e bize

Nós podemos, inclusive, nomear a ação que conecta os dois itens, no caso, "Pesquisar". Basta clicarmos na conexão para acionarmos o editor.

De Resultado da busca, o usuário irá para Pop-up com informações do percurso, e ao chegar neste ponto da navegação, ele não conseguirá mais retornar para o ponto de pesquisa, portanto, teremos uma conexão unidimensional, que chamaremos de "Selecionou um resultado", afinal, o usuário já escolheu sua rota e está apenas se informando dos seus pormenores.

fluxo demonstrando "pesquisar > resultados da busca > selecionou um resultado > pop-up com informações do percurso"

Uma vez que o destino foi selecionado, o usuário será direcionado à tela principal, com sua rota inteira traçada no mapa. Criaremos uma nova forma de diamante, com o texto Tela Principal com rota traçada. Assim, criaremos uma conexão com o nome "Confirma".

fluxo de navegação com "pesquisar > resultados da busca > selecionou um resultado > pop-up com informações do percurso > confirma > tela principal com rota traçada

Contudo, o usuário pode cancelar sua pesquisa na altura do item Pop-up com informações do percurso e retornar para a tela inicial do aplicativo. Então, faremos uma conexão entre estes elementos, que será intitulada "Cancela".

seta interligando as formas "Tela principal: - mapa de fundo - funcionalidades" e "pop-up com informações do percurso"

Com isso, temos todo o caminho da ação de pesquisa de endereço traçado. Ainda precisaremos pensar em outras possibilidades, divisões, novos usuários, notificações e assim por diante. Salvaremos todo o nosso trabalho sob o título de Protótipo App Bize.rp.

Fluxo do desenvolvimento: o AppMap - Instalação Axure

Para estrearmos o Axure 7, é muito simples: iremos até a página www.axure.com, e digitaremos o e-mail no campo correspondente para inciar o teste gratuito. Selecionaremos a opção "PC" ou "MAC", conforme o sistema operacional em uso.

Ao final da instalação, configuraremos o diretório em que o programa será instalado. No caso do sistema operacional MAC, basta arrastarmos o ícone do programa para a pasta "Applications".

applications

Assim feito, basta abrir o programa e começar a utiliza-lo. O teste gratuito possui duração de 30 dias.

Fluxo do desenvolvimento: o AppMap - Organizando itens

Traçamos o caminho da principal funcionalidade do nosso protótipo. Porém, como sabemos, um aplicativo é o conjunto de caminhos que um usuário pode percorrer. Justamente por isso diferenciamos cada uma das telas ou botões com formatos diferentes. No entanto, apenas as formas não servirão para diferenciar todas as ações do protótipo.

Podemos facilitar a organização e leitura do nosso fluxograma criando cores e legendas, começando pela legenda das estruturas que já foram adicionadas ao projeto. Incluiremos uma forma de diamante e configuraremos suas proporções no cabeçalho de ferramentas. Teremos uma altura e largura de 30 x 30.

Com a forma de diamante já posicionada na área de trabalho e as devidas proporções, acessaremos a biblioteca default do menu "Widgets" e selecionaremos a opção "Label". Assim feito, arrastaremos ela até que fique próxima à forma de diamante:

Faremos a edição do texto para indicar que a forma de diamante significa "Telas principais". Uma vez que a legenda estiver pronta, iremos selecionar a composição e, com a tecla "Ctrl + Alt", a duplicaremos.

duplicação

Reduplicaremos as composições para podermos construir todos os itens que devem compor a legenda com mais rapidez.

Iremos começar a personalizar cada um dos elementos. Para o segundo item da legenda, escolheremos a forma retangular que representa "telas comuns". Lembrando que para modicar a forma basta selecioná-la e clicar no ícone circular logo acima do desenho.

opções de formatos disponíveis, como losango, círculo, quadrado, trapézio e outros

Em seguida, criaremos um retângulo arredondado, que representa botões", e por último, o hexágono de "pop-ups".

legenda completa, contendo losango para telas principais, quadrado para telas comuns, quadrado com bordas arredondadas para botões, e hexágono para pop ups

Iremos selecionar todos os itens e duplicá-los, posicionado a duplicata à direita.

Modificaremos todas as formas para elipses, afinal, começaremos a montar uma legenda de cores.

Primeiramente, iremos configurar para que todas as formas da primeira coluna não possuam qualquer preenchimento de cor. Para isso, selecionaremos todas elas e, no painel de ferramentas, clicaremos no ícone de cor, representado pelo ícone de balde de tinta.

Para as formas da segunda coluna iremos fazer as seguintes legendas e cores: a primeira delas será "Apenas interação touch" (amarelo), "Permite inserção de dados" (rosa), "Carregamento automático" (verde) e "Telas externas" (azul).

Com a legenda finalizada, iremos aplicar as cores ao fluxograma. A Tela Principal só permitira interação touch, isto é, deslizando-se sobre o mapa ou clicando em algum botão. Logo, definiremos que esta primeira forma será amarela. Selecionaremos a forma e clicaremos no ícone responsável pelo preenchimento de cor. Lembrando que as últimas cores utilizadas estão disponíveis no painel, e que devemos sempre configurar o "Fill Type" para "Solid".

Botão BIZE será de cor rosa, enquanto todos os demais itens serão amarelos. Para organizarmos melhor nossa área de trabalho, criaremos um título para as legendas. Adicionaremos, ainda, uma forma retangular que nos auxiliará a criar uma caixa de contenção para as informações da legenda.

caixa de contenção

A forma está sobreposta aos elementos da legenda. Para resolver esse problema, clicaremos com o botão direito e escolheremos as opções "Order > Send to Back".

Selecionaremos toda a composição, e clicaremos sobre ela com o botão direito; feito isto, escolheremos a opção "Group", o que fará com que toda a composição se torne uma unidade.

Voltando ao fluxograma, não há nenhuma tela de carregamento automático ou telas externas, elementos presentes na legenda. Portanto, faremos uma forma que simbolize a tela de carregamento da aplicação.

No menu "Widgets", selecionaremos a biblioteca "Flow" e criaremos uma forma retangular com o texto Carregamento do App, e acionaremos "Ctr + B" para que o texto fique em negrito. Posicionaremos a Tela de carregamento do App logo antes da Tela Principal. A cor para este item será verde, e você pode utilizar a ferramenta conta-gotas no painel de cores para aplicar exatamente a mesma tonalidade da legenda ou, ainda, acessar as cores recentes também disponíveis no painel.

Sendo assim, acionamos o modo de seleção de conexão e unimos Carregamento do App com Tela Principal. A conexão será unidimensional, uma vez que o usuário não pode retornar à tela de carregamento.

Nosso próximo passo é criar uma tela externa, como uma notificação de localização. Criaremos uma forma correspondente a um pop-up, ou seja, um item hexagonal de cor azul que conterá o texto Serviço de Localização.

Este pop-up poderia estar posicionado entre Carregamento do App e Tela Principal, no entanto, normalmente usuários mais antigos não precisarão ativar o serviço de localização, ou seja, é algo que precisa ser ativando para novos usuários da aplicação.

Percebemos que existem pelo menos dois caminhos a serem percorridos: aquele do usuário antigo e o do novo usuário. Desenvolveremos este novo caminho nas próximas aulas.

Sobre o curso UX Design com Axure parte 1: protótipo para App mobile

O curso UX Design com Axure parte 1: protótipo para App mobile possui 196 minutos de vídeos, em um total de 39 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface em Design & UX, ou leia nossos artigos de Design & UX.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI - User Interface acessando integralmente esse e outros cursos, comece hoje!

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1122 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana