{"id":49227,"date":"2018-06-15T12:11:18","date_gmt":"2018-06-15T18:11:18","guid":{"rendered":"http:\/\/www.cloudbits.org.mx\/blog\/?p=49227"},"modified":"2018-05-30T11:04:22","modified_gmt":"2018-05-30T17:04:22","slug":"diseno-ux","status":"publish","type":"post","link":"https:\/\/www.cloudbits.org.mx\/blog\/2018\/06\/diseno-ux\/","title":{"rendered":"Dise\u00f1o UX: 5 ejemplos de p\u00e1ginas con sobresaliente en usabilidad"},"content":{"rendered":"<p>El dise\u00f1o UX o \u201cexperiencia de usuario\u201d es, lo creamos o no, el elemento m\u00e1s importante de una p\u00e1gina web. Podemos tener una web preciosa y perfectamente dise\u00f1ada que, si no garantiza una buena experiencia de usuario, no nos sirve de nada.<\/p>\n<p>&nbsp;<\/p>\n<p>El\u00a0dise\u00f1o UX (<em>User Experience<\/em>)\u00a0consiste en planear y dise\u00f1ar c\u00f3mo va a ser\u00a0la experiencia de un usuario cuando entra en una p\u00e1gina\u00a0web y navega por ella. Es, en definitiva, el dise\u00f1o enfocado a los usuarios.<\/p>\n<p>&nbsp;<\/p>\n<p>Que el dise\u00f1o UX es importante no s\u00f3lo lo digo yo.\u00a0Google ha dejado claro\u00a0que lo m\u00e1s importante para \u00e9l es la experiencia de los usuarios en las p\u00e1ginas web. Una p\u00e1gina puede tener todo el SEO del mundo que si Google no considera que es\u00a0<em>user friendly<\/em>, no nos la va a posicionar.<\/p>\n<p>&nbsp;<\/p>\n<h3><span id=\"Como_hacer_un_buen_diseno_UX\">C\u00f3mo hacer un buen dise\u00f1o UX<\/span><\/h3>\n<p>Para hacer un buen dise\u00f1o UX simplemente tenemos que hacerlo pensando en los usuarios y pondi\u00e9ndoselo lo m\u00e1s f\u00e1cil posible. Si para llegar a un sitio tiene que clicar un bot\u00f3n, ese bot\u00f3n tiene que ser bien visible y estar claro que es un bot\u00f3n. Parece sencillo y de sentido com\u00fan, pero a la hora de crear una p\u00e1gina web, son tantos los elementos que tenemos que tener en cuenta que al final nos acabamos olvidando de que lo m\u00e1s importante es que sea \u00fatil para el usuario.<\/p>\n<p>Tambi\u00e9n tienes que tener muy en cuenta una cosa y es que los usuarios no est\u00e1n en tu mente. Es muy probable que t\u00fa tengas una idea muy clara y la entiendas a la perfecci\u00f3n. Esto no quiere decir que el resto del mundo la vaya a entender igual. No es que los usuarios sean tontos, como se cre\u00eda en la publicidad de los a\u00f1os 60. Al contrario, los usuarios son muy listos y\u00a0saben perfectamente lo que quieren. Sobre todo a d\u00eda de hoy que la mayor\u00eda de las personas tienen acceso a Internet de una forma u otra.<\/p>\n<p>&nbsp;<\/p>\n<blockquote>\n<p style=\"text-align: center;\">El #dise\u00f1oUX es uno de los elementos clave de toda #web. Te ense\u00f1o 5 ejemplos geniales.<\/p>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<p><strong><a href=\"http:\/\/www.awwwards.com\/\" target=\"_blank\" rel=\"noopener\">Los Awwwards<\/a>\u00a0<\/strong>son unos de los premios m\u00e1s importantes del mundo online en la actualidad y\u00a0se otorgan a las mejores p\u00e1ginas web de Internet de todo el planeta. Y te preguntar\u00e1s, con los cientos de miles de sitios que hay hoy en d\u00eda, \u00bfqu\u00e9 es para ellos \u201cla mejor p\u00e1gina web\u201d? Pues es una combinaci\u00f3n de 4 elementos: un buen dise\u00f1o, una buena usabilidad (o dise\u00f1o UX), mucha creatividad y buen contenido. Si te fijas, dos de ellos coinciden con lo que Google considera una buena web: el contenido y la usabilidad. La mayor\u00eda de los ejemplos que te traigo hoy son ganadores de estos premios, aunque hay alguno tambi\u00e9n de cosecha propia.<\/p>\n<ol>\n<li><span id=\"1_Airbnb\"><strong><a href=\"https:\/\/www.airbnb.es\/\">Airbnb.\u00a0<\/a>Seg\u00fan entras en la p\u00e1gina te queda perfectamente claro a qu\u00e9 se dedican y qu\u00e9 es lo que puedes conseguir en ella. Una vez empiezas a navegar por la web te das cuenta de lo f\u00e1cil que es encontrar lo que buscas, con los resultados perfectamente ordenados, posibilidades de filtrar por lo que quieras\u2026 Adem\u00e1s, tienen tanto un\u00a0dise\u00f1o responsive\u00a0como una app espec\u00edfica para m\u00f3viles.<\/strong><\/span><\/li>\n<li>\n<h4><span id=\"2_Nurture_Digital\"><strong><a href=\"http:\/\/www.nurturedigital.com\/\" target=\"_blank\" rel=\"noopener\">Nurture Digital<\/a>.\u00a0La animaci\u00f3n no tiene por qu\u00e9 estar re\u00f1ida con el dise\u00f1o UX. En esta p\u00e1gina hay v\u00eddeos, los elementos se mueven y hasta el rat\u00f3n arrastra una bola negra. Aun as\u00ed, es una web perfectamente intuitiva que funciona sin problemas.<\/strong><\/span><\/h4>\n<\/li>\n<li>\n<h4><span id=\"3_wrk\"><strong><a href=\"http:\/\/waaark.com\/\" target=\"_blank\" rel=\"noopener\">wrk.<\/a>\u00a0Una de mis favoritas. Incorpora animaciones muy bonitas, sutiles y que, dejos de molestar, hacen que no quieras salir de la p\u00e1gina. Son animaciones en HTML5, por lo que no dan problemas en ning\u00fan navegador. Es muy importante que una web se vea en todos los navegadores; y cuando digo todos, es todos. Y todas sus versiones.<\/strong><\/span><\/h4>\n<\/li>\n<li>\n<h4><span id=\"4_SCPF8230\"><strong><a href=\"http:\/\/www.scpf.com\/\" target=\"_blank\" rel=\"noopener\">S,C,P,F\u2026<\/a>\u00a0Una de mis p\u00e1ginas favoritas de agencia espa\u00f1ola. Es la cosa m\u00e1s sencilla del mundo: preguntas y texto sobre fondo blanco que te van guiando a trav\u00e9s de una web formada s\u00f3lo por contenido. El colmo del minimalismo y un contenido simplemente genial\u00a0que hacen que navegar por la p\u00e1gina sea muy sencillo. El \u00fanico peligro que tiene es que quieras ver todas las posibilidades y no salgas nunca de ah\u00ed.<\/strong><\/span><\/h4>\n<\/li>\n<li>\n<h4><span id=\"5_Draw_a_better_2016\"><strong><a href=\"http:\/\/www.awwwards.com\/sites\/draw-a-better-2016\" target=\"_blank\" rel=\"noopener\">\u00a0Draw a better 2016<\/a>.\u00a0Una tienda online de lo m\u00e1s peculiar para una causa ben\u00e9fica de UNICEF. Funciona a trav\u00e9s de scroll tanto en port\u00e1til como en m\u00f3vil y tiene un proceso de compra con un perfecto dise\u00f1o UX.<\/strong><\/span><\/h4>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<blockquote>\n<p style=\"text-align: center;\">\u00bfSab\u00edas que la mayor\u00eda de la gente abandona una p\u00e1gina #web cuando tiene mala #usabilidad?<\/p>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<p>Como habr\u00e1s podido ver, todas las p\u00e1ginas que he mencionado tienen dise\u00f1os muy sencillos, tirando al minimalismo. Sobrecargar una p\u00e1gina de elementos, contenido, etc. puede resultar en una mala usabilidad, dejando al usuario con demasiadas opciones en las que clicar y sin una gu\u00eda clara de d\u00f3nde puede encontrar la informaci\u00f3n que busca.<\/p>\n<p>He elegido para este post 5 ejemplos raros o no tan comunes. Pero, como te podr\u00e1s imaginar, las grandes marcas tienen webs con perfectos dise\u00f1os UX: Apple, Amazon, ING Direct, Samsung\u2026<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><strong>\u00bfConoces alg\u00fan ejemplo de p\u00e1gina web con buena usabilidad que quieras compartir?<\/strong><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>El dise\u00f1o UX o \u201cexperiencia de usuario\u201d es el elemento m\u00e1s importante de una p\u00e1gina web.<!-- AddThis Advanced Settings generic via filter on wp_trim_excerpt --><!-- AddThis Share Buttons generic via filter on wp_trim_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[37,3],"tags":[173,174,175],"class_list":["post-49227","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","category-marketing-digital","tag-diseno-ux","tag-experiencia-de-usuario","tag-user-friendly"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p90Gx9-cNZ","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/posts\/49227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/comments?post=49227"}],"version-history":[{"count":0,"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/posts\/49227\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/media?parent=49227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/categories?post=49227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cloudbits.org.mx\/blog\/wp-json\/wp\/v2\/tags?post=49227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}