{"id":1138,"date":"2026-01-29T20:06:47","date_gmt":"2026-01-29T23:06:47","guid":{"rendered":"https:\/\/wp.ufpel.edu.br\/labxd\/?p=1138"},"modified":"2026-02-10T15:57:50","modified_gmt":"2026-02-10T18:57:50","slug":"metodologia-de-projeto-proposta-por-garrett-2011","status":"publish","type":"post","link":"https:\/\/wp.ufpel.edu.br\/labxd\/2026\/01\/29\/metodologia-de-projeto-proposta-por-garrett-2011\/","title":{"rendered":"Metodologia de projeto proposta por Garrett (2011)"},"content":{"rendered":"\n

Garrett (2011) prop\u00f4s um framework<\/em> conceitual composto por cinco planos: superf\u00edcie, esqueleto, estrutura, escopo e estrat\u00e9gia. Essa metodologia auxilia no desenvolvimento de projetos ou servi\u00e7os com foco em experi\u00eancia do usu\u00e1rio e design centrado no usu\u00e1rio.<\/p>\n\n\n

\n
\"Os
Fonte: adaptada de Garrett (2011).<\/figcaption><\/figure>\n<\/div>\n\n\n

Os planos possuem um n\u00edvel de abstra\u00e7\u00e3o, sendo que os planos mais abaixo, como o plano estrat\u00e9gia, s\u00e3o mais abstratos. J\u00e1 os planos mais acima s\u00e3o considerados mais concretos, de modo que o usu\u00e1rio pode ver e interagir com os elementos.<\/p>\n\n\n\n

Na aus\u00eancia de refer\u00eancia, pode-se considerar que esse texto foi baseado no livro The Elements of User Experience: User-Centered Design for the Web and Beyond<\/em><\/strong> de Garrett (2011).<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Plano<\/figure>\n\n\n\n

Nesse plano, definimos qual o objetivo do produto ou servi\u00e7o que estamos desenvolvendo. Por exemplo, o objetivo de um produto\/servi\u00e7o pode ser promover as vendas ou informar a popula\u00e7\u00e3o. Assim como identificamos quais s\u00e3o as necessidades dos usu\u00e1rios. Para tanto, podemos aplicar t\u00e9cnicas de pesquisa com o usu\u00e1rio<\/strong>, como question\u00e1rio, entrevista, grupo focal, card sorting<\/em><\/strong>, entre outros, para compreender quais s\u00e3o as necessidades e expectativas dos usu\u00e1rios.<\/p>\n\n\n\n

Fonte: Garrett (2011).<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Plano<\/figure>\n\n\n\n

No plano escopo, indicamos as funcionalidades e o conte\u00fado do produto. Aqui, estabelecemos quais s\u00e3os as especifica\u00e7\u00f5es funcionais de um produto ou servi\u00e7o. Alguns exemplos de especifica\u00e7\u00f5es funcionais incluem navegadores suportados, sistema operacional, c\u00e2mera, GPS, girosc\u00f3pio etc. Tamb\u00e9m informamos qual ser\u00e1 o conte\u00fado desse artefato quanto a textos, imagens, v\u00eddeos, \u00e1udio ou documentos para download. Podemos aplicar a t\u00e9cnica de auditoria de conte\u00fado<\/strong> (Teixeira, 2014) para ajudar a definir o conte\u00fado de um artefato antes de projet\u00e1-lo.<\/p>\n\n\n\n

Fonte: Garrett (2011).<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Plano<\/figure>\n\n\n\n

Nessa fase, come\u00e7amos a planejar o design de intera\u00e7\u00e3o e a arquitetura da informa\u00e7\u00e3o de um produto ou servi\u00e7o.  Para Rogers, Sharp e Preece (2013), o design de intera\u00e7\u00e3o refere-se ao projeto de produtos interativos que visam ajudar as pessoas a se comunicarem e interagirem melhor em casa ou no trabalho. A arquitetura da informa\u00e7\u00e3o determina a forma como a informa\u00e7\u00e3o \u00e9 estruturada para facilitar o uso e a intera\u00e7\u00e3o de um sistema. Algumas t\u00e9cnicas que auxiliam no plano estrutura s\u00e3o o mapa do site (ou sitemap<\/em>)<\/strong> e fluxograma<\/strong>.<\/p>\n\n\n\n

Fonte: Garrett (2011).<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Plano<\/figure>\n\n\n\n

O plano esqueleto refere-se ao design de interface, navega\u00e7\u00e3o e design da informa\u00e7\u00e3o. Determinamos como os elementos ser\u00e3o organizados e posicionados em uma interface. Para isso, podemos criar um wireframe<\/strong><\/em>, que \u00e9 uma vers\u00e3o mais rudimentar do prot\u00f3tipo final de um artefato. Tamb\u00e9m podemos especificar a navega\u00e7\u00e3o do produto em b\u00e1sica (global, local, contextual), suplementar e avan\u00e7ada, conforme sugere Agner (2018). O design da informa\u00e7\u00e3o auxilia na organiza\u00e7\u00e3o da informa\u00e7\u00e3o para que a informa\u00e7\u00e3o seja mais f\u00e1cil de ser compreendida pelo usu\u00e1rio.<\/p>\n\n\n\n

Fonte: Garrett (2011).<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Plano<\/figure>\n\n\n\n

Esse \u00e9 o plano mais concreto do framework<\/em> proposto por Garrett (2011). \u00c9 aqui que o usu\u00e1rio vai ver e interagir com um produto ou servi\u00e7o. Definimos a experi\u00eancia do usu\u00e1rio no n\u00edvel sensorial<\/strong>. Ou seja, o usu\u00e1rio pode usar os seus sentidos (paladar, olfato, tato, audi\u00e7\u00e3o e vis\u00e3o) para interagir com o produto ou servi\u00e7o. Podemos aplicar alguns princ\u00edpios, como contraste, uniformidade, consist\u00eancia, paleta de cores e tipografia<\/strong>, para tornar um artefato visualmente mais atraente.<\/p>\n\n\n\n

Fonte: Garrett (2011).<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"Mapa\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Fonte: Mapa mental da metologia de Garrett desenvolvido por
Alessandra Franzosi Motter<\/strong> na disciplina de Tecnologias da informa\u00e7\u00e3o em 2024\/1. Baseada em Garrett (2011).<\/figcaption><\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Refer\u00eancias<\/h2>\n\n\n\n

AGNER, Luiz. Ergodesign e Arquitetura de Informa\u00e7\u00e3o: Trabalhando com o Usu\u00e1rio<\/strong>. 4. ed. Rio de Janeiro: Senac Rio, 2018.<\/p>\n\n\n\n

GARRETT, Jesse James. The Elements of User Experience: User-Centered Design for the Web and Beyond<\/strong>. 2. ed. Berkeley: New Riders, 2011.<\/p>\n\n\n\n

ROGERS, Yvonne; SHARP, Helen; PREECE, Jennifer. Design de intera\u00e7\u00e3o: al\u00e9m da intera\u00e7\u00e3o humano-computador<\/strong>. tradu\u00e7\u00e3o: Isabela Gasparini. 3. ed. Porto Alegre: Bookman, 2013.<\/p>\n\n\n\n

TEIXEIRA, Fabricio. Introdu\u00e7\u00e3o e boas pr\u00e1ticas em UX Design<\/strong>. [S. l.<\/em>]: Casa do C\u00f3digo, 2014.<\/p>\n","protected":false},"excerpt":{"rendered":"

Garrett (2011) prop\u00f4s um framework conceitual composto por cinco planos: superf\u00edcie, esqueleto, estrutura, escopo e estrat\u00e9gia. Essa metodologia auxilia no desenvolvimento de projetos ou servi\u00e7os com foco em experi\u00eancia do usu\u00e1rio e design centrado no usu\u00e1rio. Os planos possuem um n\u00edvel de abstra\u00e7\u00e3o, sendo que os planos mais abaixo, como o plano estrat\u00e9gia, s\u00e3o mais […]<\/p>\n","protected":false},"author":1373,"featured_media":1169,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45],"tags":[58,61,60,57,56],"class_list":{"0":"post-1138","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-artigos","8":"tag-cinco-planos","9":"tag-design-centrado-no-usuario","10":"tag-experiencia-do-usuario","11":"tag-garrett","12":"tag-metodologia-de-projeto","14":"post-with-thumbnail","15":"post-with-thumbnail-icon"},"jetpack_featured_media_url":"https:\/\/wp.ufpel.edu.br\/labxd\/files\/2026\/01\/planos-garrett.png","_links":{"self":[{"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/posts\/1138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/users\/1373"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/comments?post=1138"}],"version-history":[{"count":3,"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/posts\/1138\/revisions"}],"predecessor-version":[{"id":1170,"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/posts\/1138\/revisions\/1170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/media\/1169"}],"wp:attachment":[{"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/media?parent=1138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/categories?post=1138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ufpel.edu.br\/labxd\/wp-json\/wp\/v2\/tags?post=1138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}