{"id":18363,"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-20T19:14:09","modified_gmt":"2026-04-20T19:14:09","slug":"disseny-web-experiencia-usuari","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/","title":{"rendered":"Disseny web, l\u2019experi\u00e8ncia d\u2019usuari"},"content":{"rendered":"<p>Per oferir una <strong>bona experi\u00e8ncia d\u2019usuari<\/strong>, primer de tot hem d\u2019analitzar i <strong>disposar d\u2019una bona interf\u00edcie d\u2019usuari<\/strong>. La interf\u00edcie d\u2019usuari \u00e9s el pont que ens permet connectar i interactuar amb qui visita la nostra web. Per aix\u00f2, <strong>un bon disseny web<\/strong> ha de comptar amb una interf\u00edcie d\u2019usuari o UI (User Interface) ben resolta. Aix\u00ed aconseguirem una interacci\u00f3 fluida amb la persona que hi ha darrere la pantalla i podrem oferir-li una experi\u00e8ncia d\u2019usuari o UX (User Experience) positiva.<\/p>\n<p>&nbsp;<\/p>\n<h2>El disseny web d\u2019abans<\/h2>\n<p>Per entendre com ha evolucionat la web al llarg dels anys, nom\u00e9s cal donar un cop d\u2019ull als llocs creats abans de l\u2019any 2000. Limitats per les resolucions i superats per una tecnologia emergent que encara estava en fase de maduraci\u00f3, la majoria oferien una <strong>experi\u00e8ncia d\u2019usuari molt pobra<\/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>Per sort, han quedat enrere aquells anys en qu\u00e8 navegar per segons quines webs era gaireb\u00e9 com ser el protagonista d\u2019una pel\u00b7l\u00edcula d\u2019Indiana Jones, superant proves per arribar a l\u2019objectiu 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>El disseny web avui<\/h2>\n<p>Avui dia, la situaci\u00f3 ha millorat molt. L\u2019usuari sol ser el client, i per cuidar-lo, hem de posar-li les coses f\u00e0cils. Podem comparar l\u2019experi\u00e8ncia digital amb la d\u2019un consumidor entrant a una botiga f\u00edsica, per entendre millor el seu comportament.<\/p>\n<h3>Situaci\u00f3 1<\/h3>\n<p><strong>Situaci\u00f3 online<\/strong>: Un mal disseny web fa que l\u2019usuari tingui dificultats per trobar o utilitzar el men\u00fa de navegaci\u00f3. L\u2019usuari es frustra i tanca la nostra web.<\/p>\n<p><i>S\u00edmil real: El client arriba a la botiga i el pany de la porta no funciona, i si aconsegueix obrir-la, la porta pesa una barbaritat. El client es cansa i se\u2019n va a la botiga del costat.<\/i><\/p>\n<h3>Situaci\u00f3 2<\/h3>\n<p><strong>Situaci\u00f3 online<\/strong>: L\u2019usuari aconsegueix fer servir el men\u00fa, per\u00f2 per una mala organitzaci\u00f3, no troba f\u00e0cilment el que busca. L\u2019usuari es frustra i tanca la nostra web.<\/p>\n<p><i><strong>S\u00edmil real<\/strong>: El client entra a la botiga, per\u00f2 tenim els cigrons al costat de les volanderes, les cerveses amb els batuts de prote\u00efnes (s\u00ed, tal qual), i li resulta impossible trobar el que vol. El client es cansa i se\u2019n va a la botiga del costat.<\/i><\/p>\n<h3>Situaci\u00f3 3<\/h3>\n<p><strong>Situaci\u00f3 online<\/strong>: L\u2019usuari entra a la web i es troba amb una finestra emergent d\u2019un producte \u201cestrella\u201d; per tancar-la ha de clicar una creu diminuta d\u20191px. L\u2019usuari es frustra i tanca la nostra web.<\/p>\n<p><i><strong>S\u00edmil real<\/strong>: El client entra a la botiga i, a un pam de dist\u00e0ncia, un dependent amb un gran somriure li comen\u00e7a a recitar un discurs sense pauses ni punts, no calla i no deixa parlar el client. <span style=\"text-decoration: line-through;\">&#8220;Hola, li truco de Vo\u00f1afone\/Motristar\/Ogrange&#8221;<\/span>. El client penja.<\/i><\/p>\n<h3>Situaci\u00f3 4<\/h3>\n<p><strong>Situaci\u00f3 online<\/strong>: L\u2019usuari navega per la web, per\u00f2 li costa molt situar-se i recordar on \u00e9s; tornar a una p\u00e0gina interessant es converteix en una odissea. Tot plegat \u00e9s un laberint. L\u2019usuari es frustra i tanca la nostra web.<\/p>\n<p><i><strong>S\u00edmil real<\/strong>: IKEA<\/i><\/p>\n<p>&nbsp;<\/p>\n<h2>Experi\u00e8ncia d\u2019usuari: podem ser aliats de l\u2019usuari<\/h2>\n<p>Podem crear vincles i posar-nos al costat de qui ens visita. Podem acompanyar-lo i mostrar-li de manera senzilla el cam\u00ed fins al producte que busca. Resoldre els seus dubtes sense ser pesats. Nom\u00e9s cal una bona estructura de continguts i un men\u00fa clar. Podem anar m\u00e9s enll\u00e0 i aconseguir que, a m\u00e9s de f\u00e0cil, la navegaci\u00f3 sigui agradable, o fins i tot sorprendre\u2019l per la innovaci\u00f3 en la presentaci\u00f3 dels nostres serveis o productes, refor\u00e7ant aix\u00ed la imatge de 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>Per oferir una bona experi\u00e8ncia d\u2019usuari, primer de tot hem d\u2019analitzar i disposar d\u2019una bona interf\u00edcie d\u2019usuari. La interf\u00edcie d\u2019usuari \u00e9s el pont que ens permet connectar i interactuar amb qui visita la nostra web. Per aix\u00f2, un bon disseny web ha de comptar amb una interf\u00edcie d\u2019usuari o UI (User Interface) ben resolta. Aix\u00ed [&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-18363","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>Disseny web, l\u2019experi\u00e8ncia d\u2019usuari - 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\/ca\/disseny-web-experiencia-usuari\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Disseny web, l\u2019experi\u00e8ncia d\u2019usuari - Code Barcelona\" \/>\n<meta property=\"og:description\" content=\"Per oferir una bona experi\u00e8ncia d\u2019usuari, primer de tot hem d\u2019analitzar i disposar d\u2019una bona interf\u00edcie d\u2019usuari. La interf\u00edcie d\u2019usuari \u00e9s el pont que ens permet connectar i interactuar amb qui visita la nostra web. Per aix\u00f2, un bon disseny web ha de comptar amb una interf\u00edcie d\u2019usuari o UI (User Interface) ben resolta. Aix\u00ed [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/\" \/>\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-20T19:14:09+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=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Disseny web, l\u2019experi\u00e8ncia d\u2019usuari\",\"datePublished\":\"2017-04-26T09:45:39+00:00\",\"dateModified\":\"2026-04-20T19:14:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/\"},\"wordCount\":628,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\"],\"inLanguage\":\"ca\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/\",\"url\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/\",\"name\":\"Disseny web, l\u2019experi\u00e8ncia d\u2019usuari - Code Barcelona\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#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-20T19:14:09+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#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\/ca\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/ca\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/ca\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@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":"Disseny web, l\u2019experi\u00e8ncia d\u2019usuari - 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\/ca\/disseny-web-experiencia-usuari\/","og_locale":"ca_ES","og_type":"article","og_title":"Disseny web, l\u2019experi\u00e8ncia d\u2019usuari - Code Barcelona","og_description":"Per oferir una bona experi\u00e8ncia d\u2019usuari, primer de tot hem d\u2019analitzar i disposar d\u2019una bona interf\u00edcie d\u2019usuari. La interf\u00edcie d\u2019usuari \u00e9s el pont que ens permet connectar i interactuar amb qui visita la nostra web. Per aix\u00f2, un bon disseny web ha de comptar amb una interf\u00edcie d\u2019usuari o UI (User Interface) ben resolta. Aix\u00ed [&hellip;]","og_url":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/","og_site_name":"Code Barcelona","article_published_time":"2017-04-26T09:45:39+00:00","article_modified_time":"2026-04-20T19:14:09+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":{"Escrit per":"cd26Bc","Temps estimat de lectura":"3 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Disseny web, l\u2019experi\u00e8ncia d\u2019usuari","datePublished":"2017-04-26T09:45:39+00:00","dateModified":"2026-04-20T19:14:09+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/"},"wordCount":628,"image":{"@id":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg","articleSection":["Disseny i desenvolupament web"],"inLanguage":"ca"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/","url":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/","name":"Disseny web, l\u2019experi\u00e8ncia d\u2019usuari - Code Barcelona","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#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-20T19:14:09+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/codewebbarcelona.com\/ca\/disseny-web-experiencia-usuari\/#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\/ca\/#website","url":"https:\/\/codewebbarcelona.com\/ca\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/ca\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"ca","@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\/ca\/wp-json\/wp\/v2\/posts\/18363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/comments?post=18363"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts\/18363\/revisions"}],"predecessor-version":[{"id":18372,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/posts\/18363\/revisions\/18372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/media\/4171"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/media?parent=18363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/ca\/wp-json\/wp\/v2\/categories?post=18363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}