Primeiras aulas do curso UX Design com Axure parte 2: aprimoramento de protótipo para App

UX Design com Axure parte 2: aprimoramento de protótipo para App

Identificação de melhorias no protótipo - Começando

Esse é o segundo curso de prototipagem de aplicativos mobile com novas questões de usabilidade e alguns recursos mais avançados do Axure. A gente vai começar a partir do último arquivo desenvolvido no curso anterior que ele está disponível para download no primeiro exercício dessa aula.

Se você já fez o curso anterior ou se já tem uma certa experiência com Axure esse curso vai ser útil para produzir protótipos de maior fidelidade e para entender um pouco melhor algumas questões da experiência do usuário e para começar a gente vai testar o protótipo no Axure share aqui no Smartphone, eu vou até abrir aqui e vou anotando algumas questões aqui na tela, aqui no próprio aplicativo.

Então vamos lá, eu estou abrindo aqui o Axure share, em my projects e tenho o meu protótipo. Carregou a tela de carregando funciona normalmente e parte para a nova tela. Então vamos aqui também na tela do computador para a tela de serviços de localização.

Aqui, aparentemente a gente não tem problema. Se eu clicar em não permitir a gente fica nessa tela travada. Se eu clicar em ativar localização, o certo seria ir para configurações do aparelho do usuário, né? Se for iPhone vai para o painel de controle do iPhone, para Android vai para o painel de controle do Android.

Mas isso não faz tanta diferença na experiência do usuário, então se a gente só apertar ativar localização, ele recarrega a página e o usuário pode dar um ok e avançar a etapa, sair dessa parte travada.

Então nessa tela não teria muito problema para arrumar. Na tela termos de uso, eu vou avançar aqui, a gente vê aqui tudo normal aqui em cima, olha a página certinho, eu estou informando o usuário o que ele precisa fazer e chegou aqui embaixo o texto está por trás do botão. E aqui eu vou dar dois cliques no painel dinâmico estou no estado 1, e a gente vê que o texto está adequado aqui. Por que isso acontece?

A fonte e o texto varia um pouco de um dispositivo para o outro e quando vai para o smartphone ela provavelmente ocupa um pouquinho mais de espaço e acabou descendo. Então a gente tem que considerar um pouco esse espaço e é sempre bom testar no aparelho que vai ser utilizado o aplicativo.

Então a gente encontra esse problema aqui e já pode corrigir. Eu sei que se eu der mais um espacinho aqui eu já evito esse problema aqui no meu protótipo. Então eu já corrijo essa alteração, não preciso fazer uma anotação disso porque é algo simples de fazer e vou para o próximo passo.

Vou dar um li e aceito as condições aqui no meu protótipo smartphone. Aí a gente vai para página do cadastro de telefone, dá um bem-vindo ao Bize. Aqui já está com as informações que a gente precisa. Mas o que tem nessa tela? Deixa eu abrir aqui o cadastro de telefone, vamos lá.

Bom eu vou tentar cadastrar um telefone, eu vou cadastrar aqui, Ok. Já encontrei um problema, deu zoom no meu campo de digitação, eu estou vendo que eu tenho um teclado de letras aqui, melhor que fosse um teclado numérico. Então a gente já encontrou um problema, dois problemas, aliás, um seria corrigir o zoom, a gente vai ver isso um pouquinho mais pra frente.

Então eu vou adicionar uma anotação, page notes são as anotações da página. Então aqui no page notes do cadastro do telefone, eu vou dizer aqui, o aparelho dá zoom no campo que escolho para digitar corrigir isso. Ok? A gente fez uma anotação, que daqui pra frente a gente vai rever e vai corrigir logicamente.

Aí a gente tem esses campos aqui. Esses dois campos a gente percebeu que quando a gente acessa aqui no smartphone, ele está com um teclado de letras e o ideal é que seja um teclado numérico. Então o que a gente pode fazer? Aqui no text field estilo, type text, eu vou mudar para phone number e no phone number o usuário vai poder digitar ele vai ter um teclado parecido com um teclado de telefone.

E aí ele consegue digitar o número corretamente sem ter que ficar procurando alí no teclado de letras. Então tá, mas então eu não vou digitar nada e vou clicar em próximo.

Ele funciona do mesmo jeito, ele avança para a próxima tela. Isso não é para acontecer, o usuário tem que preencher com o telefone mesmo. Pra eu não precisar de um telefone fictício, ele tem que preencher com caracteres numéricos e com a quantidade de caracteres necessários para um telefone.

Então eu vou adicionar aqui uma informação em algum desses widgets, poderia ser nos dois, mas se eu adicionar em uma já vou me lembrar. E aqui, selecionei o widget, do lado de interactions que são as interações que a gente define para ele tem as notas.

Assim como a nota da página que a gente definiu aqui embaixo, a gente tem nota para o widget, essas anotações ficam específicas aqui no widget e a gente pode visualizar até no preview do protótipo. Então se eu clicar aqui no notes e adicionar uma... precisa da mensagem de erro, precisa da mensagem de erro caso não preencha ou preencha incorretamente.

Aqui tem uma notinha, eu sei que tem uma nota nesse widget porque veio uma informação aqui, assim como, interações, as anotações também recebem uma numeração. E aí eu posso deixar isso para arrumar um pouquinho mais pra frente, a gente está primeiro fazendo uma avaliação do que precisa ser arrumado.

Então, cliquei em próximo e eu vim parar aqui na tela do código de verificação. Código de verificação, a gente sabe que nessa tela tem algo para ser preenchido e nessa tela também tem um pop up com SMS que dá uma informação do código de verificação.

Bom, a gente não configurou nada aqui. Eu cliquei para preencher do mesmo jeito dá zoom nesse widget e ele não é numérico. Vamos mudar aqui para phone number. Ele precisa me adicionar, vou adicionar uma anotação aqui que este campo é obrigatório e precisa ser preenchido corretamente para avançar.

A gente adicionou a anotação aqui, a gente sabe que tem um outro problema que seria o zoom, a gente percebeu que o nosso smartphone dá zoom no campo selecionado. Um outro problema aqui, e se o usuário adicionou um telefone errado? Se ele adicionou um telefone errado, com certeza ele não recebeu um SMS com a notificação, com o código de verificação.

Então a gente tem que dar a opção do usuário pedir um novo código e essa opção pode ser simplesmente um botão de voltar. Então vamos lá, adicionar um label aqui, digitar voltar, aumentar um pouquinho o tamanho dele, 16 de repente.

Vamos adicionar uma forma, aqui eu começo no retângulo, mas eu quero um triângulo para a esquerda, o botão, eu vou diminuir, pequenininho aqui só para ajustar.

Essa liberdade do usuário ir e voltar é uma questão muito discutida em usabilidade. O usuário tem que sempre ter o direito de avançar ou voltar quando isso também é de interesse da empresa, dona do aplicativo, dona de um site. Não é interessante que um usuário de repente volte no momento de uma realização de uma compra.

Mas esse momento é interessante porque ele pode ter errado e aí ele tem que encontrar facilmente uma opção de voltar. Então eu vou adicionar aqui corzinha preta, não precisa de contorno. Esses dois aqui, vou alinhar o centro aqui com as linhas inteligentes do Axure. Ele tem um botão de voltar.

Selecionando esses dois itens a gente não consegue atribuir interação, mas a gente pode adicionar um hot spot sobre ele. Muito bem, selecionou o hot spot. A gente pode dizer que um clique, open link, pode ser o cadastro de telefone. Pode ser ou pode ser também back to previous page, eu coloquei a opção voltar mesmo atribuída para esse botãozinho.

Se a gente quiser visualizar clica no preview e vai ver que está funcionando. Aqui não está funcionando por quê? Porque ele só vai funcionar se a gente for de uma página para outra, se eu for para o próximo aí sim, eu consigo voltar.

Ok? Ele sempre vai voltar para uma página anterior. A função voltar é útil também em questões quando uma página vai para vai para diversos lugares e aí a página seguinte precisa voltar para aquela página anterior específica. Por isso que ao invés de eu nomear uma página eu posso clicar aqui no voltar e escolher a opção back, voltar para a página anterior.

Aqui a gente já definiu, criou uma anotação aqui que precisa deixar esse campo obrigatório. Então a gente pode avançar, clica aqui no próximo, a questão do zoom, resolveu pra um, resolve pra todos no protótipo. Então aqui a gente chegou na tela principal. A gente continua as nossas próximas anotações e pequenas alterações no próximo vídeo.

Identificação de melhorias no protótipo - Notas e hotspots

Continuando, a gente caiu na nossa tela principal e na tela principal a gente tem alguns painéis dinâmicos que controlam algumas funções. Para ver um pouquinho do que a gente tem aqui, vou dar dois cliques nesse primeiro painel dinâmico, quando eu selecionar aqui, aqui embaixo aparece cadastro do perfil do usuário.

Então eu posso dar dois cliques aqui no widget manager e eu também consigo controlar lá o painel dinâmico. Abre essa caixa de diálogo, eu escolho o estado que eu quero controlar. Aqui, cadastro de perfil e pronto.

No painel dinâmico a gente não consegue adicionar anotações, anotações da página, não tem isso porque é um painel dinâmico, mas a gente consegue adicionar anotações aos widgets e, por exemplo, o primeiro problema que eu já vejo aqui é que não é clicável.

Eu não consigo clicar aqui para adicionar uma foto, então eu já vou adicionar essa notinha. Preciso desta opção, aqui em importar foto do Facebook também não tem opção, mas não consigo adicionar nota por quê? Porque aqui é um objeto composto, ele está agrupado

Então para adicionar uma nota eu vou adicionar um hotspot e por meio desse hotspot mesmo que eu vou atribuir uma ação. Então, adicionei o hotspot aqui e preciso definir a ação. Cada uma dessas notas vai me lembrar do que eu preciso fazer e corrigir nesse protótipo.

Aqui o nome e o sobrenome eu posso clicar aqui no meu preview, o tecladinho está aparecendo, ok. Ele não deu zoom, mas o problema do zoom aparece em outra situação que a gente deve corrigir, tudo bem. Mas se eu não preencher, se eu manter o nome e o sobrenome eu consigo avançar do mesmo jeito.

Então isso é um problema, então eu adiciono uma notinha aqui e vou dizer que estes campos precisam ser obrigatórios e dar e devem dar algum tipo de resposta caso não seja preenchido.

Então a gente já adicionou uma série de notas, a gente só tinha uma ação aqui, agora a gente tem a segunda nota, a terceira nota e a quarta nota, assim como as interações, as notas aparecem ali notificadas e numeradas sequencialmente.

A gente viu, é isso mesmo que a gente precisava fazer a gente pode acompanhar isso lá no AppMap. Vou clicar no AppMap eu vou bem nessa parte aqui, realmente eu tenho esses pop ups, tirar foto, faltou um c aqui vamos corrigir.

Tirar foto com a câmera, outra questão aqui desse pop up é a gente corrigiu essa parte de SMS, a gente deu a oportunidade do usuário voltar, a gente corrige aqui para a leitura estar adequada também.

E essa setinha que só avança como essa aqui também, segura o Shift seleciona as duas ou defina é uma setinha que vai e volta, não só avança. Agora sim está adequado, o usuário consegue voltar do código de verificação para o cadastro do telefone.

Tudo bem a gente corrigiu a leitura do nosso fluxograma. Vou fechar aqui o AppMap e voltar aqui para o cadastro do perfil. Bom, no cadastro do perfil da tela inicial está tudo ok. A gente adicionou as anotações que precisam a gente pode avançar mais uma etapa.

Eu vou fechar aqui eu já sei as anotações e ainda no painel dinâmico do cadastro do perfil eu tenho apelido, no apelido a gente também precisa avaliar algumas questões, por exemplo, aqui a gente vê que o campo não é obrigatório e é uma questão que é importante aqui, é importante o usuário adicionar um campo aqui, adicionar uma resposta nesse campo.

Então a gente também adiciona uma nota aqui dizendo que este campo deve ser obrigatório. Se esse campo deve ser obrigatório, adicionou uma nota a gente já sabe. Também vamos adicionar na anotação que também dá uma resposta caso o usuário não preencha. Tudo bem? a gente precisa simular realmente caso o usuário queira pular essa etapa, ele precisa ficar travado aí até que ele preencha corretamente.

Adicionamos informações aqui nesse painel dinâmico. A gente pode avançar um pouquinho mais, voltando na tela principal a gente sabe que tem outro painel dinâmico que é ativado com o botão da funcionalidade principal. Então a gente tem aqui painel Bize, a gente pode vir aqui no widget manager painel bize, eu vou dar dois cliques para editar ele.

Se está difícil encontrar qual é o painel dinâmico o widget manager facilita isso. Porque às vezes um painel está sobrepondo o outro e fica difícil, às vezes você tem que desmontar a arte inteira para conseguir acessar onde está o painel dinâmico, não é tão necessário. A gente vai lá no widget manager e se está tudo nomeado fica fácil de encontrar.

Então aqui a gente tem o painel Bize e tem a parte pesquisar. Aqui no meu smartphone eu vou cadastrar o perfil, ele está funcionando ok. E vamos no painel Bize ver o que é isso e como está funcionando. Aqui no meu smartphone funciona aparentemente Ok, mas realmente tem uma parte muito estranha aqui, tudo vazio.

Se o usuário fosse acessar essa parte ele ia falar: poxa tem um botão de pesquisar poderia ser só um botão de pesquisar, não precisa ser um painel todo para isso. O que a gente pode fazer, utilizar para facilitar a vida do usuário aqui? De repente, além de pesquisar ele pode acessar os últimos endereços que acessou.

Então a gente pode adicionar um parágrafo aqui e nesse parágrafo detalhar aqui. Esse parágrafo vai representar os endereços recentes.

Aqui eu vou mudar a corzinha, eu quero esse amarelinho um pouquinho puxado para o laranja, vou colocar tamanho 16, bold, endereços recentes e vou dar um enter, vou dar mais um enter, tirar aquele espaço duplo.

Mudar a cor para branco tirar o bold e vou colocar aqui, por exemplo, Rua da tecnologia inovadora 3185, Vila Mariana, São Paulo - SP.

Ficou meio grande eu vou diminuir um pouquinho para 14 para que caiba em duas linhas. Vou dar dois enters, três enters e vou adicionar mais uma avenida, isso é tudo um texto fictício, mas é para aparecer um diferente do outro para dar um pouco mais de sensação de que aquilo lá é uma simulação mas próxima do real.

Colocar Avenida Alan Turing, Vila Computing, Cuiabá - MT. Adiciona o número, Avenida Alan Turing pode ser 100101, como se fosse um binário. Adicionamos aqui a informação pode passar o Vila Computing para a parte de baixo. Vou adicionar também uma linha horizontal para dividir esses itens não deixar tudo aqui simplesmente colocados de qualquer jeito.

Selecionei a cor branca para a linha, desci um pouquinho, deixei balanceado, Ok. Adicionamos endereços recentes e aqui a gente pode adicionar o hot spot que é o link desses endereços.

Como é uma simulação, independente de onde o usuário clicar se for um endereço ou outro a gente vai fazer ele ir para o mesmo lugar que é a tela com as informações traçadas ou pop up de informações do trajeto.

Então eu vou colocar aqui para interação para ir com um clique open link tela principal com resultado, dou um ok. Aqui nas minhas bibliotecas, eu tenho uma biblioteca de widgets do Alura e a gente consegue adicionar alguns widgets personalizados.

Por exemplo, eu tenho o botão favoritos, botão eventos, isso pode ajudar a preencher um pouco melhor essa página. Eu vou adicionar aqui o botão favoritos e o botão eventos.

A gente já tem uma página com um painel dinâmico mais completo, o botão do painel Bize ele abria e só tinha o formulário pesquisar, agora a gente tem uma parte toda cheia. Aqui a gente pode adicionar também uma label, eu vou dar um Command + C aqui ou Ctrl + C, se for o windows e colar no espaço da label.

Invés de endereços recentes, isso aqui é o favoritos, deve-se manter alinhado com a estrelinha. Seguro o option, arrasto o favoritos até este carinha aqui de baixo, vou mudar para eventos. Pronto, a gente já tem um painel um pouquinho mais bem elaborado.

Eu poderia também adicionar no hot spot aqui em cada um deles, favoritos deve levar para o favoritos e para isso a gente precisa de uma área ainda nesse painel dinâmico, eu vou adicionar outro hot spot que o eventos deve levar para o eventos, mas como a gente ainda não tem eu vou adicionar uma anotação para que a gente faça depois.

Então aqui nesse hot spot eu adiciono um notes e a nota é: configurar testados do painel dinâmico para definir a interação. Pronto, a gente tem uma nota aqui, e a gente sabe o que fazer futuramente.

Vou fechar aqui o painel Biz e da tela principal a pesquisar né? E ainda não paguei o bizi eu vou mexer agora no resultados da busca e a gente vê no próximo vídeo.

Identificação de melhorias no protótipo - Busca e mapa

A gente poderia melhorar um pouquinho como esse texto é exibido. A gente está utilizando aqui o mesmo texto para tudo, vou tirar o hotspot de cima, e olha só, a gente tem objetos agrupados, o mesmo texto para todos eles.

Eu vou deletar esses de baixo, deletei aqui, esse aqui de cima eu vou dar dois cliques para descer um pouquinho com esse cara. Esse aqui eu vou aumentar um pouquinho, vou dar um enter aqui e adicionar option Z, faz esse símbolo que representa aproximadamente.

Então eu vou adicionar aqui aproximadamente 1.8 km, 5 min. Quer dizer, eu adicionei uma função no meu protótipo que é justamente dar um feedback para o usuário, de quanto tempo ele vai demorar, qual a distância daquele resultado.

Isso ajuda muito na experiência porque o usuário se sente um pouco mais guiado, ele sabe que esse aqui é o resultado mais próximo e consequentemente os resultados mais de baixo são um pouquinho mais longe, são mais longe mesmo e são um pouquinho mais diferentes do que o usuário estava procurando.

Então a gente pode segurar o option e duplicar esse item. Olha só: dupliquei e aqui eu vou adicionar o nome, ao invés de Rua das Flores eu vou colocar Avenida Flores, 3185, Vila Flórida, vamos colocar Villa Hollywood, Campinas - SP, ficou apertadinho, eu vou diminuir o nome ... Vila Jumper, pode ser.

Ficou um pouquinho mais bem espaçado então aqui eu vou adicionar 200 km, 212 km e eu vou colocar aqui 10 horas e 5 minutos, 2 horas e 5 minutos. Eu vou tirar esse pontinho aqui para ficar igualzinho e posso adicionar outro endereço um pouquinho mais longe.

Então aqui vai ter Alameda das Flores, 3185 e a gente coloca de repente um lugar bem mais longe ainda do que seria de Campinas, pode ser Lapa Rio de Janeiro, ficou faltando um espacinho, Rio de Janeiro, espacinho RJ. E aqui eu vou colocar 523 km aproximadamente, 26 horas e 45 minutos.

A gente configurou um pouquinho melhor os resultados e podemos adicionar o hotspot aqui de volta. A gente já sabe que ao clicar selecionar qualquer um desses resultados a gente vai para a tela principal com caminho traçado. Só voltando aqui o hotspot, vou selecionar o item 1, o item 2 e o item 3 e vou clicar aqui distribute vertically.

Então ele distribui os itens verticalmente e deixa tudo mais uniforme, bonitinho alí. Sendo assim o resultado tem mais uma cara de resultado mesmo, as possibilidades do resultado que o usuário quer aparecem ali como devem ser.

A gente criou até a resposta que é dar um feedback para o usuário daquilo, de quanto tempo ele vai demorar e qual a distância, quantos quilômetros tem de distância. Então vamos avançar aqui no meu protótipo, então no smartphone, se eu clicar em qualquer um dos resultados eu vou parar onde? Na tela principal do resultado traçado.

E o que está escrito aqui na nossa AppMap? Vou fechar aqui, deixa aqui. No AppMap a gente tem aqui o caminho do usuário fazendo a sua busca por um endereço. Ele tem aqui pop up com a informação do percurso e pode cancelar? Cadê esse pop up com informações do percurso? A gente não criou e aqui a gente tem a tela principal com a rota traçada.

Essa tela principal com rota traçada, a gente tem que fazer o mesmo percurso. Então clica aqui na tela principal com rota traçada e a gente pode voltar para a tela principal que o usuário pode ou cancelar, vou avançar aqui um pouquinho. Cancelar ou chegar ao destino.

Então a gente definiu o ultrassom que podia ser feito aqui, mas aqui a gente tinha esquecido de preencher, cadê esse pop up com informações de percurso? A gente precisa criar ele na tela principal com rota traçada. Vamos lá para a tela principal com resultado e vamos criar um painel dinâmico: dynamic panel, vou colocar aqui e criar aqui.

Eu vou dar dois cliques para entrar na edição dele, o nome do painel dinâmico, pode ser resultado, não, pop up com informações do percurso, olha aqui o estado 1 eu não preciso renomear só tem 1 estado mesmo, pelo menos a princípio. Vou dar um ok, vou dar dois cliques no estado 1 para passar a editar ele.

E eu vou copiar algumas características de outro painel dinâmico que a gente criou, aqui no painel da tela principal eu venho aqui no cadastro do perfil e eu vou copiar a parte do fundo e esse retângulo aqui, Command + C. Fecho essa parte, Command + W, e voltei aqui para o pop up de informações de percurso, Command + V.

Olha, só a gente tem esse painelzinho aqui da mesma forma que a gente já teve anteriormente. Eu vou adicionar algumas informações para que ele fique legalzinho, fiquei direitinho, como deve ser um pop-up com informações do percurso.

Vamos na biblioteca de widgets da Alura e a gente tem um mapa aqui, esse mapa eu vou adicionar aqui, que mapa grandão! é só reduzir que a gente já tem algo mais apropriado, reduzi aqui, aumentar um pouquinho aqui e a gente adiciona essa informação.

Se o usuário quer cancelar eu posso adicionar a opção cancelar, venho na biblioteca default, vou adicionar um label aqui, cancelar e um x. Esse cancelar não é para ficar tão evidente, mas eu posso deixar ele em bold, e eu posso trocar a cor da fonte por um cinza. Pronto, agora eu vou adicionar um hot spot para definir a ação que esse cancelar faz.

Se eu adicionar o hot spot aqui, aqui bonitinha, sobe um pouquinho, eu digo na interação que ao clicar o usuário vai abrir a janela, a tela principal registrado, porque a outra tela principal seria para um usuário novo, tela principal registrado. Então quer dizer, ele cancelou e voltou lá para a tela principal do aplicativo.

Agora a gente precisa adicionar algumas informações do trajeto que eu quero percurso vou adicionar aqui parágrafo e aqui era Rua das Flores, 3185 vamos relembrar o que estava escrito lá. Então era: tela principal, painel Bize, resultado da busca, Rua das Flores, 3185, Vila Flórida, São Paulo é essa, não é? Rua das Flores, 3185, Vila Flórida, São Paulo tracinho SP.

Ok, ele adicionou essas informações e o que mais eu tenho que ter de informação aqui no pop-up? De repente a gente pode adicionar um painel de atenção, aqui eu vou aumentar um pouquinho a fonte para 16 já que esse é o resultado.

Eu vou segurar o option e descer um pouquinho aqui. E aqui eu vou colocar informações, por exemplo, atenção, dois pontos, vias, vou adicionar aqui marcadores, vias rápidas, adicionar aqui trechos sem ciclovias.

Aqui não precisa ser tão grande, então a gente volta para o tamanho 14, mas atribui uma cor vermelhinha para chamar a atenção, porque o usuário vai olhar para cá e vai: Olha lá então nesse meu trajeto eu tenho alguns perigos, quer dizer o aplicativo pode dar uma resposta melhor para melhorar a experiência do usuário.

Eu vou reduzir aqui um pouquinho, deixar um espaço, vou dar um Command + A para selecionar tudo, mas vou selecionar, vou tirar da seleção a parte preta que está atrás, centralizei na tela e dentro da biblioteca do Alura a gente tem um botão próximo, cadê o botão próximo, botão, botão, botão próximo, ele lá.

Ao invés de utilizar um botão próximo eu vou dar o nome para pedalar, reduzi ele aqui um pouquinho e por nesse cantinho aqui de baixo à direita.

Isso também melhora a usabilidade, o botão de ação que ele precisar realizar está mais próximo do dedo polegar que é onde faz o touch no smartphone. Esse botão de pedalar eu vou trocar a cor dele, não precisa ser preto aqui, de repente, pode ser aquele amarelinho lá, não tem uma cor completa, gradiente.

Vou colocar essa cor aqui, 60 graus só que o texto preto, pronto, aqui está o botão de pedalar e a ação que ele toma é: um clique, show, dynamic panels, showhide eu vou escolher aqui o painel pop-up com informações do percurso, hide animate, pode ser um fade.

Então quer dizer, se clicar ele vai esconder esse painel e já que esse painel está sobre a tela principal com o trajeto traçado a gente já definiu o que faltava que estava no fluxograma e não tinha realizado. A gente pode testar aqui por meio do botão preview, eu vou salvar nas alterações, dar um Command + S, olha o preview.

E aí o meu protótipo está aberto aqui no navegador, se eu clicar em cancelar ele foi para a tela principal com um usuário registrado, de um usuário registrado, se eu clicar em pedalar ele fecha o painel dinâmico e está aqui a minha rota traçada.

Por exemplo, aqui na página termos de uso a gente aumentou o espaço aqui, a gente sabe que isso vai se ajustar adequadamente no smartphone. E na página cadastro do telefone a gente criou nota. Olha só aqui, as notas aparecem na visualização, precisa dar uma mensagem de erro caso o usuário não preencha ou preencha incorretamente.

No próximo vídeo a gente vai ver quais telas ainda são necessárias implementar para que esse protótipo gere uma melhor experiência de usuário.

Sobre o curso UX Design com Axure parte 2: aprimoramento de protótipo para App

O curso UX Design com Axure parte 2: aprimoramento de protótipo para App possui 217 minutos de vídeos, em um total de 32 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!

  • 1120 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

  • 1120 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

  • 1120 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

  • 1120 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