{"id":76856,"date":"2017-04-26T09:45:39","date_gmt":"2017-04-26T09:45:39","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-experiencia-de-usuario\/"},"modified":"2026-06-11T00:21:26","modified_gmt":"2026-06-11T00:21:26","slug":"design-web-experiencia-utilizador","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/","title":{"rendered":"Web design, a experi\u00eancia do utilizador"},"content":{"rendered":"<p>Para garantir uma <strong>boa experi\u00eancia do utilizador<\/strong>, \u00e9 fundamental come\u00e7ar por analisar e <strong>criar uma interface de utilizador eficaz<\/strong>. A interface de utilizador \u00e9 o ponto de contacto entre o site e quem o visita, permitindo a intera\u00e7\u00e3o. Por isso, <strong>um bom design web<\/strong> deve sempre incluir uma interface de utilizador (UI) bem pensada. S\u00f3 assim conseguimos uma intera\u00e7\u00e3o fluida com quem est\u00e1 do outro lado do ecr\u00e3, proporcionando uma experi\u00eancia de utilizador (UX) positiva.<\/p>\n<p>&nbsp;<\/p>\n<h2>O design web de outros tempos<\/h2>\n<p>Para percebermos a evolu\u00e7\u00e3o da web ao longo dos anos, basta olhar para sites criados antes do ano 2000. Limitados pelas resolu\u00e7\u00f5es da altura e por uma tecnologia ainda em desenvolvimento, a maioria oferecia uma <strong>experi\u00eancia de utilizador bastante pobre<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-677\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/applewebsite1997-1.jpg\" alt=\"dise\u00f1o web interfaz usuario\" width=\"640\" height=\"541\" \/><\/p>\n<p>Felizmente, j\u00e1 l\u00e1 vai o tempo em que navegar em certos sites era quase como ser protagonista de um filme do Indiana Jones, a ultrapassar obst\u00e1culos para chegar ao objetivo final.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-678\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/640_indiana_jones_raidersofthelostarc_still-1.jpg\" alt=\"indiana jones\" width=\"640\" height=\"360\" \/><\/p>\n<h2>O design web hoje<\/h2>\n<p>Hoje em dia, tudo mudou para melhor. O utilizador \u00e9, na maioria das vezes, o cliente, e o nosso objetivo \u00e9 facilitar-lhe a vida ao m\u00e1ximo. Podemos comparar o comportamento online com situa\u00e7\u00f5es do dia a dia numa loja f\u00edsica, para perceber melhor as necessidades e expectativas de quem nos visita.<\/p>\n<h3>Situa\u00e7\u00e3o 1<\/h3>\n<p><strong>Situa\u00e7\u00e3o online<\/strong>: Devido a um mau design, o utilizador tem dificuldade em encontrar ou utilizar o menu de navega\u00e7\u00e3o. Fica frustrado e abandona o site.<\/p>\n<p><i>Equivalente na vida real: O cliente chega \u00e0 loja e a ma\u00e7aneta da porta n\u00e3o funciona; se conseguir abrir, a porta \u00e9 t\u00e3o pesada que desiste. Acaba por ir \u00e0 loja ao lado.<\/i><\/p>\n<h3>Situa\u00e7\u00e3o 2<\/h3>\n<p><strong>Situa\u00e7\u00e3o online<\/strong>: O utilizador consegue usar o menu, mas devido a uma m\u00e1 organiza\u00e7\u00e3o, n\u00e3o encontra facilmente o que procura. Fica frustrado e abandona o site.<\/p>\n<p><i><strong>Equivalente na vida real<\/strong>: O cliente entra na loja, mas encontra os gr\u00e3os ao lado das pe\u00e7as de ferragens, as cervejas misturadas com batidos de prote\u00edna (sim, \u00e9 verdade!), tornando imposs\u00edvel encontrar o que quer. Frustrado, vai-se embora para a loja ao lado.<\/i><\/p>\n<h3>Situa\u00e7\u00e3o 3<\/h3>\n<p><strong>Situa\u00e7\u00e3o online<\/strong>: O utilizador entra no site e depara-se com uma janela pop-up a anunciar um produto \u201cimperd\u00edvel\u201d. Para fechar a janela, tem de clicar numa cruz min\u00fascula de 1px. Fica irritado e fecha o site.<\/p>\n<p><i><strong>Equivalente na vida real<\/strong>: O cliente entra na loja e, a um cent\u00edmetro de dist\u00e2ncia, \u00e9 abordado por um vendedor de sorriso largo que, desde o primeiro segundo, debita um discurso sem pausas, n\u00e3o deixa o cliente falar e n\u00e3o o larga. <span style=\"text-decoration: line-through;\">&#8220;Ol\u00e1, falo da Vo\u00f1afone\/Motristar\/Ogrange&#8221;<\/span>. O cliente desliga.<\/i><\/p>\n<h3>Situa\u00e7\u00e3o 4<\/h3>\n<p><strong>Situa\u00e7\u00e3o online<\/strong>: O utilizador come\u00e7a a navegar no site, mas n\u00e3o consegue perceber onde est\u00e1 nem como voltar atr\u00e1s para rever uma p\u00e1gina interessante. Sente-se perdido num labirinto. Fica frustrado e abandona o site.<\/p>\n<p><i><strong>Equivalente na vida real<\/strong>: IKEA<\/i><\/p>\n<p>&nbsp;<\/p>\n<h2>Experi\u00eancia de utilizador: como conquistar o utilizador<\/h2>\n<p>Podemos criar uma rela\u00e7\u00e3o de proximidade com quem visita o nosso site. Podemos gui\u00e1-lo facilmente at\u00e9 ao produto ou informa\u00e7\u00e3o que procura, esclarecer d\u00favidas e evitar ser intrusivos. Para isso, basta garantir uma boa estrutura de conte\u00fados e um menu de navega\u00e7\u00e3o intuitivo. Podemos ir mais longe e tornar a navega\u00e7\u00e3o n\u00e3o s\u00f3 f\u00e1cil, mas tamb\u00e9m agrad\u00e1vel ou at\u00e9 surpreendente, inovando na forma como apresentamos os nossos servi\u00e7os ou produtos e, assim, refor\u00e7ar a imagem da marca.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-680\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/experiencia-de-usuario-1.jpg\" alt=\"experiencia de usuario\" width=\"1125\" height=\"518\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para garantir uma boa experi\u00eancia do utilizador, \u00e9 fundamental come\u00e7ar por analisar e criar uma interface de utilizador eficaz. A interface de utilizador \u00e9 o ponto de contacto entre o site e quem o visita, permitindo a intera\u00e7\u00e3o. Por isso, um bom design web deve sempre incluir uma interface de utilizador (UI) bem pensada. S\u00f3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4171,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"class_list":["post-76856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dise\u00f1o web y la importancia de la experiencia de usuario<\/title>\n<meta name=\"description\" content=\"Para ofrecer una buena experiencia de usuario, primeramente, deberemos analizar y disponer de una buena interfaz de usuario.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o web y la importancia de la experiencia de usuario\" \/>\n<meta property=\"og:description\" content=\"Para ofrecer una buena experiencia de usuario, primeramente, deberemos analizar y disponer de una buena interfaz de usuario.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/\" \/>\n<meta property=\"og:site_name\" content=\"CODE\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-26T09:45:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-11T00:21:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"884\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Web design, a experi\u00eancia do utilizador\",\"datePublished\":\"2017-04-26T09:45:39+00:00\",\"dateModified\":\"2026-06-11T00:21:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/\"},\"wordCount\":602,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/diseno-web-la-experiencia-de-usuario-featured.jpg\",\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/\",\"name\":\"Dise\u00f1o web y la importancia de la experiencia de usuario\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/diseno-web-la-experiencia-de-usuario-featured.jpg\",\"datePublished\":\"2017-04-26T09:45:39+00:00\",\"dateModified\":\"2026-06-11T00:21:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Para ofrecer una buena experiencia de usuario, primeramente, deberemos analizar y disponer de una buena interfaz de usuario.\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/design-web-experiencia-utilizador\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/diseno-web-la-experiencia-de-usuario-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/diseno-web-la-experiencia-de-usuario-featured.jpg\",\"width\":1920,\"height\":884},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\\\/\\\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dise\u00f1o web y la importancia de la experiencia de usuario","description":"Para ofrecer una buena experiencia de usuario, primeramente, deberemos analizar y disponer de una buena interfaz de usuario.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/","og_locale":"pt_PT","og_type":"article","og_title":"Dise\u00f1o web y la importancia de la experiencia de usuario","og_description":"Para ofrecer una buena experiencia de usuario, primeramente, deberemos analizar y disponer de una buena interfaz de usuario.","og_url":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/","og_site_name":"CODE","article_published_time":"2017-04-26T09:45:39+00:00","article_modified_time":"2026-06-11T00:21:26+00:00","og_image":[{"width":1920,"height":884,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Web design, a experi\u00eancia do utilizador","datePublished":"2017-04-26T09:45:39+00:00","dateModified":"2026-06-11T00:21:26+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/"},"wordCount":602,"image":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg","inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/","url":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/","name":"Dise\u00f1o web y la importancia de la experiencia de usuario","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg","datePublished":"2017-04-26T09:45:39+00:00","dateModified":"2026-06-11T00:21:26+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Para ofrecer una buena experiencia de usuario, primeramente, deberemos analizar y disponer de una buena interfaz de usuario.","inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-experiencia-utilizador\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg","width":1920,"height":884},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#website","url":"https:\/\/codewebbarcelona.com\/pt-pt\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/pt-pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts\/76856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=76856"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts\/76856\/revisions"}],"predecessor-version":[{"id":76865,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts\/76856\/revisions\/76865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/media\/4171"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=76856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=76856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}