{"id":87827,"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-11T06:22:24","modified_gmt":"2026-06-11T06:22:24","slug":"webdesign-user-experience","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/de\/webdesign-user-experience\/","title":{"rendered":"Webdesign, das Nutzererlebnis"},"content":{"rendered":"<p>Um eine <strong>optimale User Experience<\/strong> zu bieten, m\u00fcssen wir zun\u00e4chst analysieren und <strong>f\u00fcr eine durchdachte Benutzeroberfl\u00e4che<\/strong> sorgen. Die Benutzeroberfl\u00e4che ist die Schnittstelle, \u00fcber die wir mit dem Nutzer interagieren und ihn auf unserer Website begleiten. Deshalb braucht <strong>gutes Webdesign<\/strong> immer auch eine \u00fcberzeugende User Interface (UI). Nur so gelingt eine reibungslose Interaktion mit dem Besucher hinter dem Bildschirm \u2013 und wir schaffen eine positive User Experience (UX).<\/p>\n<p>&nbsp;<\/p>\n<h2>Webdesign damals<\/h2>\n<p>Um die Entwicklung des Webs besser zu verstehen, gen\u00fcgt ein Blick auf Websites aus der Zeit vor dem Jahr 2000. Damals waren die M\u00f6glichkeiten durch geringe Bildschirmaufl\u00f6sungen und noch unausgereifte Technologien stark eingeschr\u00e4nkt \u2013 und das spiegelte sich in einer <strong>schwachen Nutzererfahrung<\/strong> wider.<\/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>Gl\u00fccklicherweise sind die Zeiten vorbei, in denen das Surfen auf manchen Webseiten einem Indiana-Jones-Abenteuer glich, bei dem man erst zahlreiche H\u00fcrden \u00fcberwinden musste, um ans Ziel zu gelangen.<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>Webdesign heute<\/h2>\n<p>Heute sieht die Welt anders aus. Der Nutzer ist in der Regel auch unser Kunde \u2013 und dem wollen wir den Weg so einfach wie m\u00f6glich machen. Um das zu verdeutlichen, vergleichen wir typische Online-Situationen mit dem Einkaufserlebnis im Gesch\u00e4ft. So l\u00e4sst sich das Nutzerverhalten besser nachvollziehen.<\/p>\n<h3>Situation 1<\/h3>\n<p><strong>Online-Situation<\/strong>: Aufgrund eines schlechten Webdesigns findet oder bedient der Nutzer das Navigationsmen\u00fc nur schwer. Die Folge: Er ist genervt und verl\u00e4sst unsere Website.<\/p>\n<p><i>Vergleich aus dem Alltag: Der Kunde kommt in unser Gesch\u00e4ft, aber der T\u00fcrgriff funktioniert nicht \u2013 und falls er die T\u00fcr doch aufbekommt, ist sie so schwer, dass er fast aufgibt. Der Kunde ist frustriert und geht zum n\u00e4chsten Laden.<\/i><\/p>\n<h3>Situation 2<\/h3>\n<p><strong>Online-Situation<\/strong>: Der Nutzer kann das Men\u00fc bedienen, findet aber wegen einer schlechten Navigationsstruktur nicht, was er sucht. Die Folge: Er ist genervt und verl\u00e4sst unsere Website.<\/p>\n<p><i><strong>Vergleich aus dem Alltag<\/strong>: Der Kunde betritt unser Gesch\u00e4ft, aber die Kichererbsen stehen neben den Unterlegscheiben, das Bier bei den Proteinshakes (na klar!) \u2013 da findet niemand, was er sucht. Der Kunde ist frustriert und geht zum n\u00e4chsten Laden.<\/i><\/p>\n<h3>Situation 3<\/h3>\n<p><strong>Online-Situation<\/strong>: Der Nutzer besucht unsere Website und wird sofort von einem Pop-up begr\u00fc\u00dft, das ein \u201eMust-have\u201c-Produkt anpreist. Um das Fenster zu schlie\u00dfen, muss er auf ein winziges Kreuz klicken. Die Folge: Er ist genervt und verl\u00e4sst unsere Website.<\/p>\n<p><i><strong>Vergleich aus dem Alltag<\/strong>: Der Kunde betritt unser Gesch\u00e4ft und steht sofort einem \u00fcberfreundlichen Verk\u00e4ufer gegen\u00fcber, der ihn ohne Punkt und Komma zutextet und ihm keine Gelegenheit l\u00e4sst, selbst zu Wort zu kommen. <span style=\"text-decoration: line-through;\">&#8220;Hallo, ich rufe an von Vo\u00f1afone\/Motristar\/Ogrange&#8221;<\/span>. Der Kunde legt auf.<\/i><\/p>\n<h3>Situation 4<\/h3>\n<p><strong>Online-Situation<\/strong>: Der Nutzer surft auf der Website, verliert aber schnell die Orientierung. Eine bestimmte Seite wiederzufinden, wird zur Odyssee \u2013 ein echtes Labyrinth. Die Folge: Er ist genervt und verl\u00e4sst unsere Website.<\/p>\n<p><i><strong>Vergleich aus dem Alltag<\/strong>: IKEA<\/i><\/p>\n<p>&nbsp;<\/p>\n<h2>User Experience: Wir k\u00f6nnen Freunde des Nutzers werden<\/h2>\n<p>Wir k\u00f6nnen eine Beziehung zu unseren Besuchern aufbauen, ihnen die Hand reichen und sie gezielt zum gew\u00fcnschten Produkt f\u00fchren. Ihre Fragen beantworten, ohne aufdringlich zu sein. Alles, was wir daf\u00fcr brauchen, ist eine klare Inhaltsstruktur und ein \u00fcbersichtliches Navigationsmen\u00fc. Gehen wir noch einen Schritt weiter, machen wir die Nutzung nicht nur einfach, sondern auch angenehm oder sogar \u00fcberraschend \u2013 etwa durch innovative Pr\u00e4sentationen unserer Leistungen oder Produkte. So entsteht ein positives Markenbild.<\/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>Um eine optimale User Experience zu bieten, m\u00fcssen wir zun\u00e4chst analysieren und f\u00fcr eine durchdachte Benutzeroberfl\u00e4che sorgen. Die Benutzeroberfl\u00e4che ist die Schnittstelle, \u00fcber die wir mit dem Nutzer interagieren und ihn auf unserer Website begleiten. Deshalb braucht gutes Webdesign immer auch eine \u00fcberzeugende User Interface (UI). Nur so gelingt eine reibungslose Interaktion mit dem Besucher [&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":[658],"class_list":["post-87827","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-webentwicklung"],"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\/de\/webdesign-user-experience\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/webdesign-user-experience\/\" \/>\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-11T06:22:24+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\\\/de\\\/webdesign-user-experience\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-user-experience\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Webdesign, das Nutzererlebnis\",\"datePublished\":\"2017-04-26T09:45:39+00:00\",\"dateModified\":\"2026-06-11T06:22:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-user-experience\\\/\"},\"wordCount\":556,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-user-experience\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/diseno-web-la-experiencia-de-usuario-featured.jpg\",\"articleSection\":[\"Webdesign und -entwicklung\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-user-experience\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-user-experience\\\/\",\"name\":\"Dise\u00f1o web y la importancia de la experiencia de usuario\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-user-experience\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-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-06-11T06:22:24+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Para ofrecer una buena experiencia de usuario, primeramente, deberemos analizar y disponer de una buena interfaz de usuario.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-user-experience\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/webdesign-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\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@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\/de\/webdesign-user-experience\/","og_locale":"de_DE","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\/de\/webdesign-user-experience\/","og_site_name":"CODE","article_published_time":"2017-04-26T09:45:39+00:00","article_modified_time":"2026-06-11T06:22:24+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\/de\/webdesign-user-experience\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-user-experience\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Webdesign, das Nutzererlebnis","datePublished":"2017-04-26T09:45:39+00:00","dateModified":"2026-06-11T06:22:24+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-user-experience\/"},"wordCount":556,"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-user-experience\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-la-experiencia-de-usuario-featured.jpg","articleSection":["Webdesign und -entwicklung"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-user-experience\/","url":"https:\/\/codewebbarcelona.com\/de\/webdesign-user-experience\/","name":"Dise\u00f1o web y la importancia de la experiencia de usuario","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-user-experience\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-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-06-11T06:22:24+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Para ofrecer una buena experiencia de usuario, primeramente, deberemos analizar y disponer de una buena interfaz de usuario.","inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/de\/webdesign-user-experience\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/codewebbarcelona.com\/de\/webdesign-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\/de\/#website","url":"https:\/\/codewebbarcelona.com\/de\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"de-DE","@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\/de\/wp-json\/wp\/v2\/posts\/87827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/comments?post=87827"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/87827\/revisions"}],"predecessor-version":[{"id":87836,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/87827\/revisions\/87836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media\/4171"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media?parent=87827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/categories?post=87827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}