{"id":1252,"date":"2023-08-25T17:28:11","date_gmt":"2023-08-25T20:28:11","guid":{"rendered":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/?p=1252"},"modified":"2023-08-25T19:03:16","modified_gmt":"2023-08-25T22:03:16","slug":"diseno-vs-usabilidad-pueden-convivir","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/diseno-vs-usabilidad-pueden-convivir\/","title":{"rendered":"Dise\u00f1o vs. Usabilidad \u00bfPueden convivir?"},"content":{"rendered":"\n<p class=\"has-normal-font-size\"><strong>La interfaz elegida es un sitio web&nbsp; de una marca Espa\u00f1ola de comida a domicilio especializada en hamburguesas smash, vinculada a la m\u00fasica, la moda, la cultura callejera.<\/strong><\/p>\n\n\n\n<p>En su seductora comunicaci\u00f3n prevalece un estilo informal, y a su vez esto se ve acompa\u00f1ado por su est\u00e9tica vanguardista y actual, variando entre s\u00ed los distintos tipos de tama\u00f1os y colores en sus tipograf\u00edas que son utilizadas de esta forma para jerarquizar la informaci\u00f3n, esto se puede ver reflejado en el lema de la marca desde un tama\u00f1o imponente y llamativo, a peque\u00f1as aclaraciones acompa\u00f1adas de t\u00edtulos y en conjunto al mismo tiempo integrando un contenido animado, generando a\u00fan m\u00e1s una estimulaci\u00f3n en el p\u00fablico de mantener la atenci\u00f3n y la sorpresa. La informaci\u00f3n (a nivel dise\u00f1o) brindada en la interfaz es clara y concisa, permite al usuario explorar, mirar o leer el contenido desde diferentes puntos de vista.<\/p>\n\n\n\n<p>Hemos notado que su recorrido y la estructura en formato Desktop no es el tradicional y el que uno espera: que sea de arriba hacia abajo. Sino que todo va sucediendo en la horizontalidad de izquierda a derecha. Al ingresar y comenzar a scrollear es que te vas dando cuenta de su recorrido, incluso porque ves las im\u00e1genes cortadas y uno tiende a querer seguir vi\u00e9ndolas (un recurso muy utilizado en las aplicaciones m\u00f3viles). Tambi\u00e9n el men\u00fa lo vemos en la parte inferior, en vez de ponerlo en su lugar convencional, o los tradicionales \u201cCall to Action\u201d&nbsp; siempre bien diferenciados, justamente para llevar al usuario a realizar esa acci\u00f3n esperada dentro de la interfaz, estos los encontramos \u201cperdidos en el dise\u00f1o\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1200\" style=\"aspect-ratio: 1600 \/ 1200;\" width=\"1600\" autoplay controls loop src=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/64ca692f04ac2134728735-1.mp4\"><\/video><figcaption class=\"wp-element-caption\">Recorrido horizontal versi\u00f3n Escritorio<\/figcaption><\/figure>\n\n\n\n<p>Vamos a diferenciar el recorrido, la estructura, y varias cuestiones en su funcionamiento en las versiones<strong> Desktop<\/strong> y<strong> Mobile<\/strong>, ya que ambas versiones tienen distintas funcionalidades. En la versi\u00f3n de Escritorio podemos notar que los botones convencionales est\u00e1n hechos en un tama\u00f1o peque\u00f1o y con la tipograf\u00eda del logo (Recoleta) que al pasar el mouse por arriba se visualiza el efecto placeholder que intercambia los colores del bot\u00f3n, para dar una sugerencia o que el usuario ingrese en ese espacio; Tambi\u00e9n hay otros como por ejemplo en la pantalla principal del Inicio dentro de un sticker con un tama\u00f1o considerable, pero no es lo que ves a primera vista al momento de ingresar para realizar una acci\u00f3n, ya que a pesar de su tama\u00f1o y al estar en un color negro condensado, tiene mucha animaci\u00f3n y fotograf\u00eda a su alrededor que compiten con este mismo desviando la atenci\u00f3n y tal vez confundiendo al usuario a la hora de querer realizar una acci\u00f3n b\u00e1sica, como la de ingresar al men\u00fa y ver los productos, o bien realizar directamente un pedido.<\/p>\n\n\n\n<p>Algunas particularidades mas para mencionar son: Imagen principal y al costado un paquete de texto \u201cte damos lo tuyo @ganasdevicio\u201d (funcionando como miscel\u00e1nea). Ambos elementos clickeables y en cuanto funcionalidad de bot\u00f3n no hay una est\u00e9tica unificador y convencional que de a entender la acci\u00f3n que el usuario debe hacer.<\/p>\n\n\n\n<p>Tambi\u00e9n algo que notamos (al ver la interfaz en repetidas ocasiones) es que algunos elementos que son clickeables tienen al costado un \u00edcono de una flecha que al pasar con el mouse se mueve y funciona justamente para hacer notar que una simple palabra no es que funciona como collage, sino que es un bot\u00f3n para dirigirse a otro lado de la web. Es un recurso poco utilizado, y cuesta encontrar el recorrido.<\/p>\n\n\n\n<p>Siguiendo con el an\u00e1lisis pero en la versi\u00f3n Mobile, el scroll es vertical y en algunas ocasiones (para mostrar im\u00e1genes) se utiliza el scroll horizontal, tambi\u00e9n creemos que la estructura en formato mobile favorece la distribuci\u00f3n de los elementos y su legibilidad. El men\u00fa sigue encontr\u00e1ndose en la parte inferior izquierda de la pantalla, lo que hace perder el famoso \u00edcono hamburguesa all\u00ed abajo. El call to action aqu\u00ed si es m\u00e1s visible, en la parte superior a la derecha lo mismo, el bot\u00f3n sticker de reservar tambi\u00e9n se ve mucho mejor e incluso el bot\u00f3n remarcado de \u201cped\u00ed ya\u201d tiene un tama\u00f1o m\u00e1s acorde a la plataforma y es mucho m\u00e1s visible ya que no tiene tantos elementos a su alrededor que compitan con este mismo desviando la atenci\u00f3n. El recurso de la palabra con el \u00edcono de la flecha en esta versi\u00f3n tambi\u00e9n se lo puede ver, pero a diferencia de la versi\u00f3n escritorio, la flecha no hace ning\u00fan movimiento para dar indicaci\u00f3n de nada.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1200\" style=\"aspect-ratio: 1600 \/ 1200;\" width=\"1600\" autoplay controls loop src=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/64ca692aeac09129558426-1.mp4\"><\/video><figcaption class=\"wp-element-caption\">Versi\u00f3n mobile de interfaz<\/figcaption><\/figure>\n\n\n\n<p>El recurso de la flecha como elemento clickeable, lo planteamos como redundante, o que la palabra sola no funciona como elemento que lo llevar\u00e1 a realizar una acci\u00f3n.<\/p>\n\n\n\n<p>La flecha como indicador de alguna acci\u00f3n que tiene que realizar el usuario, vuelve a verse en la versi\u00f3n mobile de la secci\u00f3n \u201cVicio Cities\u201d, y en este caso se lo utiliza para que el usuario vea las otras localidades que aparecen en el carrusel haciendo un scroll horizontal. A nuestro parecer se podr\u00eda implementar otro recurso, o implementar otra forma de componer esos mismos carruseles que contienen las localidades con otro tipo de indicador, tal vez jugando con la paleta crom\u00e1tica o miscel\u00e1neas. Incluso en la misma secci\u00f3n hay ciudades que tienen solo una opci\u00f3n de localidad y se puede ver que el \u00edcono de la flecha sigue estando, funcionando simplemente como un \u00edtem, sin aportar ninguna funcionalidad ni tampoco como indicador, ya que en esos casos es innecesario.<\/p>\n\n\n\n<p>En rasgos generales, los botones que te redirigen a un supuesto men\u00fa son solo pesta\u00f1as que contienen la informaci\u00f3n de un pdf sin ninguna funcionalidad de comprar, solo para ver sus especificaciones. No podemos afirmar que esto est\u00e9 bien, o est\u00e9 mal, es una estrategia m\u00e1s de comunicaci\u00f3n y marketing que Vicio desea emplear. La compra por fuera de su web y una asociaci\u00f3n con apps de env\u00edos reconocidas para darle rapidez y eficiencia a la entrega de sus pedidos.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1007\" height=\"1024\" data-id=\"1419\" src=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/3-2-1007x1024.jpg\" alt=\"\" class=\"wp-image-1419\" srcset=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/3-2-1007x1024.jpg 1007w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/3-2-295x300.jpg 295w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/3-2-768x781.jpg 768w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/3-2-1511x1536.jpg 1511w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/3-2-2014x2048.jpg 2014w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/3-2-1200x1220.jpg 1200w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/3-2-1980x2013.jpg 1980w\" sizes=\"auto, (max-width: 1007px) 100vw, 1007px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"724\" src=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/viocio-02-2-1024x724.jpg\" alt=\"\" class=\"wp-image-1421\" srcset=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/viocio-02-2-1024x724.jpg 1024w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/viocio-02-2-300x212.jpg 300w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/viocio-02-2-768x543.jpg 768w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/viocio-02-2-1536x1086.jpg 1536w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/viocio-02-2-2048x1448.jpg 2048w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/viocio-02-2-1200x849.jpg 1200w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/viocio-02-2-1980x1400.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La interfaz elegida es un sitio web&nbsp; de una marca Espa\u00f1ola de comida a domicilio especializada en hamburguesas smash, vinculada a la m\u00fasica, la moda, la cultura callejera. En su seductora comunicaci\u00f3n prevalece un estilo informal, y a su vez esto se ve acompa\u00f1ado por su est\u00e9tica vanguardista y actual, variando entre s\u00ed los distintos [&hellip;]<\/p>\n","protected":false},"author":64,"featured_media":1445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"comision":[14],"eje":[4],"class_list":["post-1252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","comision-aku-nika","eje-composicion"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comments?post=1252"}],"version-history":[{"count":27,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1252\/revisions"}],"predecessor-version":[{"id":2229,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/1252\/revisions\/2229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media\/1445"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media?parent=1252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/categories?post=1252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/tags?post=1252"},{"taxonomy":"comision","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comision?post=1252"},{"taxonomy":"eje","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/eje?post=1252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}