{"id":20203,"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-04-20T22:24:45","modified_gmt":"2026-04-20T22:24:45","slug":"web-design-user-experience","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/","title":{"rendered":"Web Design, the User Experience"},"content":{"rendered":"<p>To deliver an <strong>optimal user experience<\/strong>, we first need to analyze and <strong>create an effective user interface<\/strong>. The user interface is the bridge that connects us with our users, enabling interaction with our website. That\u2019s why <strong>good web design<\/strong> always includes a well-crafted user interface, or UI. This is the key to meaningful interaction with the person behind the screen, ensuring a positive user experience, or UX.<\/p>\n<p>&nbsp;<\/p>\n<h2>Web design through the years<\/h2>\n<p>To better understand how the web has evolved, just take a look at websites built before the year 2000. Constrained by low screen resolutions and outpaced by rapidly advancing technology that was still maturing, most of these sites offered a <strong>poor user experience<\/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>Fortunately, the days when browsing certain websites felt like starring in an Indiana Jones movie\u2014overcoming obstacles just to reach your goal\u2014are behind us.<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>Web design today<\/h2>\n<p>Today, things have changed for the better. The user is typically the client, and to treat clients well, we need to make their experience as smooth as possible. Let\u2019s look at a few scenarios that compare online experiences to what happens when a customer walks into a store\u2014helping us better understand user behavior.<\/p>\n<h3>Scenario 1<\/h3>\n<p><strong>Online scenario<\/strong>: Due to poor web design, the user struggles to find or use the navigation menu. Frustrated, they leave our website.<\/p>\n<p><i>Real-world equivalent: A customer arrives at our store, but the door handle doesn\u2019t work, and if they manage to open it, the door is impossibly heavy. The customer gets frustrated and goes to the shop next door.<\/i><\/p>\n<h3>Scenario 2<\/h3>\n<p><strong>Online scenario<\/strong>: The user manages to use the navigation menu, but poor site structure makes it hard to find what they\u2019re looking for. Frustrated, they leave our website.<\/p>\n<p><i><strong>Real-world equivalent<\/strong>: The customer enters our store, but we\u2019ve put chickpeas next to hardware washers, and beers with protein shakes (really!), making it impossible to find what they want. The customer gets frustrated and goes to the shop next door.<\/i><\/p>\n<h3>Scenario 3<\/h3>\n<p><strong>Online scenario<\/strong>: The user lands on our website and is immediately hit with a pop-up advertising a \u201cmust-have\u201d product. To close it, they have to click a tiny 1px by 1px \u2018X\u2019. Frustrated, they leave our website.<\/p>\n<p><i><strong>Real-world equivalent<\/strong>: The customer enters our store and is instantly confronted by an overly enthusiastic salesperson who launches into a non-stop sales pitch, not letting the customer get a word in. <span style=\"text-decoration: line-through;\">&#8220;Hello, I\u2019m calling from Vo\u00f1afone\/Motristar\/Ogrange&#8221;<\/span>. The customer hangs up.<\/i><\/p>\n<h3>Scenario 4<\/h3>\n<p><strong>Online scenario<\/strong>: The user starts browsing the website but finds it impossible to get their bearings. Going back to a page they found interesting is a real challenge\u2014it\u2019s a maze. Frustrated, they leave our website.<\/p>\n<p><i><strong>Real-world equivalent<\/strong>: IKEA<\/i><\/p>\n<p>&nbsp;<\/p>\n<h2>User experience: building a connection<\/h2>\n<p>We can build a relationship and be on the same side as our users. We can guide them easily to the product they\u2019re looking for, answer their questions, and avoid being intrusive. All it takes is well-structured content and a clear navigation menu. We can go further\u2014not only making our site easy to use, but also enjoyable, or even impressive, by presenting our services or products in innovative ways. This is how we create a strong brand image.<\/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>To deliver an optimal user experience, we first need to analyze and create an effective user interface. The user interface is the bridge that connects us with our users, enabling interaction with our website. That\u2019s why good web design always includes a well-crafted user interface, or UI. This is the key to meaningful interaction with [&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":[208],"class_list":["post-20203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-desenvolupament-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web Design, the User Experience - Code Barcelona<\/title>\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\/en\/web-design-user-experience\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design, the User Experience - Code Barcelona\" \/>\n<meta property=\"og:description\" content=\"To deliver an optimal user experience, we first need to analyze and create an effective user interface. The user interface is the bridge that connects us with our users, enabling interaction with our website. That\u2019s why good web design always includes a well-crafted user interface, or UI. This is the key to meaningful interaction with [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-26T09:45:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T22:24:45+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\/en\/web-design-user-experience\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Web Design, the User Experience\",\"datePublished\":\"2017-04-26T09:45:39+00:00\",\"dateModified\":\"2026-04-20T22:24:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/\"},\"wordCount\":545,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/\",\"name\":\"Web Design, the User Experience - Code Barcelona\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/#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-04-20T22:24:45+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/#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\/en\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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":"Web Design, the User Experience - Code Barcelona","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\/en\/web-design-user-experience\/","og_locale":"en_US","og_type":"article","og_title":"Web Design, the User Experience - Code Barcelona","og_description":"To deliver an optimal user experience, we first need to analyze and create an effective user interface. The user interface is the bridge that connects us with our users, enabling interaction with our website. That\u2019s why good web design always includes a well-crafted user interface, or UI. This is the key to meaningful interaction with [&hellip;]","og_url":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/","og_site_name":"Code Barcelona","article_published_time":"2017-04-26T09:45:39+00:00","article_modified_time":"2026-04-20T22:24:45+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\/en\/web-design-user-experience\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Web Design, the User Experience","datePublished":"2017-04-26T09:45:39+00:00","dateModified":"2026-04-20T22:24:45+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/"},"wordCount":545,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg","articleSection":["Disseny i desenvolupament web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/","url":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/","name":"Web Design, the User Experience - Code Barcelona","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/#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-04-20T22:24:45+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/web-design-user-experience\/#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\/en\/#website","url":"https:\/\/codewebbarcelona.com\/en\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/wp-json\/wp\/v2\/posts\/20203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=20203"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20203\/revisions"}],"predecessor-version":[{"id":20212,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20203\/revisions\/20212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/4171"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=20203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=20203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}