{"id":6963,"date":"2022-08-15T15:00:00","date_gmt":"2022-08-15T18:00:00","guid":{"rendered":"https:\/\/www.blip.ai\/blog\/?p=6963"},"modified":"2024-04-18T20:44:30","modified_gmt":"2024-04-18T23:44:30","slug":"o-que-e-prototipacao","status":"publish","type":"post","link":"https:\/\/www.blip.ai\/blog\/tecnologia\/o-que-e-prototipacao\/","title":{"rendered":"O que \u00e9 prototipa\u00e7\u00e3o: tudo sobre como fazer, tipos e ferramentas"},"content":{"rendered":"\n<p><em>Entenda o que \u00e9 prototipa\u00e7\u00e3o e por que prototipar \u00e9 uma das melhores maneiras de testar e validar suas ideias de forma barata e precisa.<\/em><\/p>\n\n\n\n<p>Quando falamos sobre <a href=\"https:\/\/www.blip.ai\/blog\/designers\/ui-e-ux-design-para-chatbots-e-interfaces-conversacionais\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>UX\/UI<\/strong><\/a>, prototipa\u00e7\u00e3o parece ser um dos assuntos mais recorrentes. Por conta disso, muitas vezes essa fase acaba sendo subestimada: aprendemos uma ferramenta, criamos um processo e j\u00e1 esquecemos de retomar o assunto.<\/p>\n\n\n\n<p>Ser\u00e1 que os<strong> tipos de prototipa\u00e7\u00e3o<\/strong> que estamos usando, s\u00e3o os mais r\u00e1pidos? Os mais eficazes?<\/p>\n\n\n\n<p>Quantas vezes voc\u00ea j\u00e1 parou para reavaliar seu m\u00e9todo?<\/p>\n\n\n\n<p>Assim como todas as fases de desenvolvimento de um produto ou projeto, a <strong>prototipa\u00e7\u00e3o<\/strong> nos desafia constantemente a inovar. Se prototipar, para voc\u00ea, \u00e9 a fase c\u00f4moda, j\u00e1 adianto: voc\u00ea pode estar fazendo isso errado!<\/p>\n\n\n\n<p>Antes de come\u00e7ar a avaliar o tipo de prototipa\u00e7\u00e3o, vamos entender as bases desse processo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O que \u00e9 prototipa\u00e7\u00e3o?<\/strong><\/h2>\n\n\n\n<p><em>\u201cO prot\u00f3tipo \u00e9 uma vers\u00e3o simulada ou amostra de um produto final, a utilizada para testes antes do lan\u00e7amento.\u201d <\/em>Jerry Cao, UX Content Strategist da UXPin<\/p>\n\n\n\n<p>Resumidamente, um <strong>prot\u00f3tipo \u00e9 usado para validar uma ideia<\/strong>. Dentre suas maiores vantagens, est\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>o fato de que ele \u00e9 barato;<\/li>\n\n\n\n<li>a possibilidade de coletar feedbacks;<\/li>\n\n\n\n<li>a oportunidade de aprimorar o conceito antes que seja entregue ao desenvolvimento.<\/li>\n<\/ul>\n\n\n\n<p>E, o que \u00e9 prototipa\u00e7\u00e3o? <strong>\u00c9 justamente a cria\u00e7\u00e3o deste prot\u00f3tipo.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Quais s\u00e3o os objetivos de um prot\u00f3tipo?<\/strong><\/h2>\n\n\n\n<p>Em um artigo publicado na <strong>Handbook of Human-Computer Interaction<\/strong> (1997) pelos designers da Apple, Stephanie Houde e Charles Hill, os autores definem 4 categorias de prot\u00f3tipos:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"964\" height=\"682\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-1-1.webp\" alt=\"O que \u00e9 prototipa\u00e7\u00e3o - imagem\" class=\"wp-image-23581\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-1-1.webp 964w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-1-1-700x495.webp 700w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-1-1-768x543.webp 768w\" sizes=\"(max-width: 964px) 100vw, 964px\" \/><figcaption class=\"wp-element-caption\">Esquema demonstrativo das categorias de prot\u00f3tipo propostas por Houde e Hill<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Role prototypes (fun\u00e7\u00e3o)<\/strong><\/h3>\n\n\n\n<p>S\u00e3o prot\u00f3tipos que possuem o <strong>objetivo de investigar o que um produto pode oferecer ao usu\u00e1rio<\/strong>.<\/p>\n\n\n\n<p>Descrevem como a funcionalidade da qual o usu\u00e1rio pode se beneficiar, sem dar muita aten\u00e7\u00e3o ao como funcionaria.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Look &amp; Feel (olhar e sentir)<\/strong><\/h3>\n\n\n\n<p>S\u00e3o prot\u00f3tipos com objetivo de<strong> validar a<\/strong><a href=\"https:\/\/www.blip.ai\/blog\/atendimento\/experiencia-do-usuario-com-conversas\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> experi\u00eancia do usu\u00e1rio<\/strong><\/a><strong> com a interface do produto<\/strong>, refinando o direcionamento das intera\u00e7\u00f5es com o p\u00fablico alvo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Implementation (implementa\u00e7\u00e3o)<\/strong><\/h3>\n\n\n\n<p>Prot\u00f3tipos de implementa\u00e7\u00e3o buscam responder d\u00favidas sobre a<strong> viabilidade de implementa\u00e7\u00e3o<\/strong>. Conseguimos fazer isso? Como essa tecnologia pode impactar na nossa performance?<\/p>\n\n\n\n<p>Essas s\u00e3o algumas das an\u00e1lises propostas desse tipo de prova de conceito.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Integration (integra\u00e7\u00e3o)<\/strong><\/h3>\n\n\n\n<p>A categoria final \u00e9 a uni\u00e3o das tr\u00eas anteriores: Role, Look &amp; Feel e Implementation.<\/p>\n\n\n\n<p>A natureza desses prot\u00f3tipos simula situa\u00e7\u00f5es reais de uso em alta fidelidade, o que faz com que <strong>sejam mais caros e demorados de construir.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"728\" height=\"1024\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-1.webp\" alt=\"O que \u00e9 prototipa\u00e7\u00e3o - imagem\" class=\"wp-image-23583\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-1.webp 728w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-1-355x500.webp 355w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption class=\"wp-element-caption\">Meu esquema demonstrativo das categorias de prot\u00f3tipo <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Ferramentas de prototipa\u00e7\u00e3o e tipos de prot\u00f3tipos<\/strong><\/h2>\n\n\n\n<p>Al\u00e9m das categorias apresentadas acima, podemos classificar um prot\u00f3tipo posicionando uma<strong> r\u00e9gua de baixa a alta fidelidade<\/strong>. Quanto mais baixa, mais f\u00e1cil e r\u00e1pida deve ser a constru\u00e7\u00e3o daquele prot\u00f3tipo.<\/p>\n\n\n\n<p>Aqui, \u00e9 importante compreender o momento e o objetivo do design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prot\u00f3tipos em baixa fidelidade<\/strong><\/h3>\n\n\n\n<p>Desenhos <strong>feitos \u00e0 m\u00e3o<\/strong> (Sketches) s\u00e3o a forma<strong> mais r\u00e1pida e barata<\/strong> de tangibilizar as ideias. Esse tipo de prototipa\u00e7\u00e3o pode ser utilizado em diversos momentos e contextos, principalmente se o produto ainda n\u00e3o existe, n\u00e3o h\u00e1 <em>toolkit <\/em>ou componentes digitais que possam ser aproveitados para testar a ideia.<\/p>\n\n\n\n<p>O prot\u00f3tipo em baixa fidelidade tamb\u00e9m permite testar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>fluxos menores;<\/li>\n\n\n\n<li>arquitetura;<\/li>\n\n\n\n<li>nomenclaturas (Oi, UX Writing!);<\/li>\n\n\n\n<li>descri\u00e7\u00f5es.<\/li>\n<\/ul>\n\n\n\n<p>Se o objetivo \u00e9 <strong>validar a experi\u00eancia sobre o produto<\/strong>, o prot\u00f3tipo em baixa <strong>n\u00e3o \u00e9 o mais indicado<\/strong>, uma vez que ele ainda \u00e9 pouco fiel \u00e0 solu\u00e7\u00e3o final.<\/p>\n\n\n\n<p>O prot\u00f3tipo em baixa \u00e9 uma boa op\u00e7\u00e3o de aplica\u00e7\u00e3o quando tem o objetivo de:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>testar fluxos simples;<\/li>\n\n\n\n<li>coletar feedbacks r\u00e1pido;<\/li>\n\n\n\n<li>validar texto (teste A\/B);<\/li>\n\n\n\n<li>organizar as ideias.<\/li>\n<\/ul>\n\n\n\n<p>Ele n\u00e3o \u00e9 uma boa op\u00e7\u00e3o para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>validar a experi\u00eancia final;<\/li>\n\n\n\n<li>avaliar a usabilidade;<\/li>\n\n\n\n<li>validar tarefas complexas.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"756\" height=\"577\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-.webp\" alt=\"o que \u00e9 prototipa\u00e7\u00e3o - imagem\" class=\"wp-image-23584\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-.webp 756w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao--655x500.webp 655w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><figcaption class=\"wp-element-caption\">Exemplo de prot\u00f3tipo em baixa de um aplicativo mobile &#8211; InfoSec Institute<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prot\u00f3tipos em m\u00e9dia fidelidade<\/strong><\/h3>\n\n\n\n<p>O que \u00e9 prototipa\u00e7\u00e3o em m\u00e9dia fidelidade?<\/p>\n\n\n\n<p>Ela resulta em prot\u00f3tipos um pouco mais trabalhosos e que se aproximam melhor da interface final. Para ser constru\u00eddo come\u00e7am a depender de ferramentas&nbsp; de prototipa\u00e7\u00e3o mais complexas, como Figma, Sketch e InVision.<\/p>\n\n\n\n<p><a href=\"https:\/\/usemobile.com.br\/dicas-para-criar-wireframe-aplicativos\/\" target=\"_blank\" rel=\"noopener\">Wireframes<\/a>,<a href=\"https:\/\/memeburn.com\/2013\/09\/wireframing-is-out-prototyping-is-in-heres-why\/\" target=\"_blank\" rel=\"noreferrer noopener\"> apesar de estarem caindo em desuso no cen\u00e1rio de desenvolvimento \u00e1gil de produto<\/a>, entram nessa categoria.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-3.webp\" alt=\"O que \u00e9 prototipa\u00e7\u00e3o - imagem\" class=\"wp-image-23585\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-3.webp 1024w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-3-700x467.webp 700w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-3-768x512.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>J\u00e1 foram importantes \u2014 principalmente para a arquitetura da informa\u00e7\u00e3o \u2014 quando sites come\u00e7aram a se popularizar e o uso de <strong>interfaces digitais ainda n\u00e3o fazia parte do modelo mental das pessoas.<\/strong> <\/p>\n\n\n\n<p>Ainda s\u00e3o muito comuns no desenvolvimento de sites como uma etapa de valida\u00e7\u00e3o do cliente.<\/p>\n\n\n\n<p>Os prot\u00f3tipos em m\u00e9dia fidelidade s\u00e3o boas op\u00e7\u00f5es para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>organizar as ideias;<\/li>\n\n\n\n<li>testar fluxos e tarefas;<\/li>\n\n\n\n<li>coletar feedbacks em tempo moderado;<\/li>\n\n\n\n<li>validar textos (teste A\/B) e estrutura da interface.<\/li>\n<\/ul>\n\n\n\n<p>Entretanto, <strong>n\u00e3o<\/strong> s\u00e3o indicados para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>validar a experi\u00eancia;<\/li>\n\n\n\n<li>Usabilidade final.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"640\" src=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-5.webp\" alt=\"O que \u00e9 prototipa\u00e7\u00e3o - foto\" class=\"wp-image-23586\" title=\"-\" srcset=\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-5.webp 750w, https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/08\/o-que-e-prototipacao-5-586x500.webp 586w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><figcaption class=\"wp-element-caption\">Exemplo de Wirefeame de um site &#8211; Justinmind<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Prot\u00f3tipos em alta fidelidade<\/strong><\/h3>\n\n\n\n<p>Prot\u00f3tipos em alta fidelidade buscam<strong> representar ao m\u00e1ximo a experi\u00eancia final com a interface<\/strong>.<\/p>\n\n\n\n<p>Necessitam de mais tempo para serem produzidos, e \u00e9 comum a utiliza\u00e7\u00e3o de mais de uma ferramenta de prototipa\u00e7\u00e3o para sua concep\u00e7\u00e3o. Algumas que j\u00e1 utilizamos em Blip:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Desenho: Sketch, Figma, Adobe XD<\/li>\n\n\n\n<li>Anima\u00e7\u00e3o: Principle, Adobe XD, Quant-ux, Atomic.io<\/li>\n\n\n\n<li>Fluxos: InVision, Figma, Quant-ux<\/li>\n<\/ul>\n\n\n\n<p>O que \u00e9 prototipa\u00e7\u00e3o em alta fidelidade \u00e9 uma boa op\u00e7\u00e3o para projetos que tenha como objetivo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>testar fluxos\/tarefas simples e complexas;<\/li>\n\n\n\n<li>coletar feedbacks;<\/li>\n\n\n\n<li>validar copy;<\/li>\n\n\n\n<li>testar experi\u00eancia e usabilidade;<\/li>\n\n\n\n<li>realizar hand-off para desenvolvimento.<\/li>\n<\/ul>\n\n\n\n<p>Ao contr\u00e1rio, <strong>n\u00e3o<\/strong> \u00e9 uma boa escolha em cen\u00e1rios que necessitam de<strong> valida\u00e7\u00e3o r\u00e1pida de ideias em fase incipiente<\/strong>, e nos quais o guia de estilo e componentes do produto ainda n\u00e3o existem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>E como fazemos na Blip?<\/strong><\/h2>\n\n\n\n<p>Por aqui, seja em qualquer cen\u00e1rio, <strong>avaliamos o momento do desenvolvimento<\/strong> da ideia antes de escolher o modo de prototipa\u00e7\u00e3o.<\/p>\n\n\n\n<p>Dentro do cen\u00e1rio de desenvolvimento \u00e1gil, \u00e9 muito importante que as valida\u00e7\u00f5es sejam feitas de forma r\u00e1pida e interativa.<\/p>\n\n\n\n<p>Na plataforma Blip, j\u00e1 contamos com uma boa estrutura de Toolkit, o que nos permite<strong> criar prot\u00f3tipos mais fi\u00e9is<\/strong> e, ao mesmo tempo,<strong> de forma r\u00e1pida.&nbsp;<\/strong><\/p>\n\n\n\n<p>Agora que voc\u00ea j\u00e1 sabe o que \u00e9 prototipa\u00e7\u00e3o e como fazer, lembre-se: <strong>seja qual for a sua escolha, prot\u00f3tipos s\u00e3o insubstitu\u00edveis<\/strong>. N\u00e3o importa a ideia, voc\u00ea s\u00f3 descobrir\u00e1 se ela funciona ou n\u00e3o quando a tiver em m\u00e3os.<\/p>\n\n\n\n<p>Se quiser construir um produto de sucesso, aplique o conceito do que \u00e9 prototipagem antes!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Entenda o que \u00e9 prototipa\u00e7\u00e3o e por que prototipar \u00e9 uma das melhores maneiras de testar e validar suas ideias de forma barata e precisa. Quando falamos sobre UX\/UI, prototipa\u00e7\u00e3o parece ser um dos assuntos mais recorrentes. Por conta disso, muitas vezes essa fase acaba sendo subestimada: aprendemos uma ferramenta, criamos um processo e j\u00e1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":23588,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[401],"tags":[],"class_list":["post-6963","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia"],"lang":"pt","translations":{"pt":6963},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/6963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/comments?post=6963"}],"version-history":[{"count":0,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/6963\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media\/23588"}],"wp:attachment":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media?parent=6963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/categories?post=6963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/tags?post=6963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}