{"id":263253,"date":"2023-08-06T10:17:00","date_gmt":"2023-08-06T07:17:00","guid":{"rendered":"https:\/\/inform.click\/12-errores-de-ux-ui-que-no-se-deben-cometer-en-el-diseno-de-aplicaciones\/"},"modified":"2023-08-06T10:17:00","modified_gmt":"2023-08-06T07:17:00","slug":"12-errores-de-ux-ui-que-no-se-deben-cometer-en-el-diseno-de-aplicaciones","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/12-errores-de-ux-ui-que-no-se-deben-cometer-en-el-diseno-de-aplicaciones\/","title":{"rendered":"12 errores de UX\/UI que no se deben cometer en el dise\u00f1o de aplicaciones"},"content":{"rendered":"<p>\n  Texto demasiado peque\u00f1o para leer.\n<\/p>\n<p>\n  Contenido de fuente de color claro peque\u00f1o sobre un fondo blanco.\n<\/p>\n<p>\n  Los usuarios no pueden ver las caracter\u00edsticas cruciales ubicadas c\u00f3modamente en alg\u00fan lugar de la interfaz de usuario.\n<\/p>\n<p>\n  Estos son algunos de los problemas comunes con el dise\u00f1o de UX\/UI en las aplicaciones y cometer muchos errores como estos le costar\u00eda muy caro. Al planificar un proyecto de software, es imperativo identificar tales errores bastante temprano en la etapa de dise\u00f1o porque el objetivo es crear una interfaz intuitiva y r\u00e1pida que brinde una experiencia de usuario perfecta.\n<\/p>\n<p>\n  Aqu\u00ed hay algunos errores mortales que pueden significar la perdici\u00f3n de la aplicaci\u00f3n y c\u00f3mo puede evitarlos eventualmente.\n<\/p>\n<h5>\n  1 Desviarse de las expectativas del usuario<br \/>\n<\/h5>\n<p>\n  Curiosamente, los usuarios tienen algunas expectativas cuando se trata de usar esos widgets GUI b\u00e1sicos (botones de radio, casillas de verificaci\u00f3n, barras de desplazamiento, enlaces\/botones de comando, etc.). Intentar un cambio revolucionario en esos botones puede no ser bien recibido.\n<\/p>\n<p>\n  Considere este ejemplo simple: ha estado escuchando las noticias de la BBC toda su vida. De repente, alguien en su familia decide escuchar CNN en su lugar, y tiene la sensaci\u00f3n de \u00abpez fuera del agua\u00bb. Esto es exactamente lo que los usuarios sentir\u00e1n tambi\u00e9n cuando realice modificaciones importantes en los widgets de la GUI.\n<\/p>\n<p>\n  La mayor\u00eda de los widgets GUI populares se han perfeccionado y experimentado durante a\u00f1os, y hay una raz\u00f3n por la que a los usuarios les gustan. No es f\u00e1cil cambiar esa sensaci\u00f3n de tranquilidad y comodidad de la noche a la ma\u00f1ana. Esto se debe a que los usuarios tienen que ejercer una energ\u00eda y una capacidad mental considerables para hacer algo nuevo; y pueden no ser receptivos a eso.\n<\/p>\n<p>\n  Por lo tanto, no realice cambios dr\u00e1sticos en la apariencia de los widgets de GUI de su aplicaci\u00f3n. Sus usuarios prefieren tener una navegaci\u00f3n sin problemas a trav\u00e9s de la aplicaci\u00f3n, por lo que es mejor si conserva la apariencia original de la GUI.\n<\/p>\n<h5>\n  2 No saber lo que el usuario realmente necesita<br \/>\n<\/h5>\n<p>\n  Cuando las empresas no se dan cuenta de las necesidades reales del usuario y presentan algo que no responde a sus necesidades, se comete un gran error. En tales casos, no puede aumentar las ventas y su aplicaci\u00f3n falla.\n<\/p>\n<p>\n  Es importante investigar y obtener informaci\u00f3n profunda sobre los intereses de los usuarios antes de decidir qu\u00e9 caracter\u00edsticas se van a incorporar. Para esto, haga una investigaci\u00f3n exhaustiva del usuario y del mercado.\n<\/p>\n<p>\n  Comprenda lo que sus usuarios objetivo esperan del dise\u00f1o de su aplicaci\u00f3n: tiempo de respuesta instant\u00e1neo, navegaci\u00f3n fluida entre los controles, f\u00e1cil lectura, etc., en resumen, una experiencia de usuario intuitiva.\n<\/p>\n<p>\n  Adem\u00e1s, haga un an\u00e1lisis cr\u00edtico de sus competidores: conozca el factor de usabilidad de sus aplicaciones; qu\u00e9 funciones incluyen en sus aplicaciones, qu\u00e9 tan interactivas son sus interfaces de usuario, etc.\n<\/p>\n<p>\n  Y los desarrolladores principiantes deben tener cuidado: no sobrecarguen demasiadas funciones en la aplicaci\u00f3n. El prop\u00f3sito principal detr\u00e1s de una aplicaci\u00f3n es simplificar las actividades de sus usuarios.\n<\/p>\n<p>\n  Por lo tanto, ser\u00eda recomendable no exagerar con las funciones, ya que esto generar\u00eda una r\u00e1faga de actividad que la convertir\u00eda instant\u00e1neamente en una aplicaci\u00f3n mediocre. Menos n\u00famero de funciones (principales, por supuesto) har\u00eda el truco.\n<\/p>\n<h5>\n  3 objetivos de toque pobre<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d93b3171b.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d93b3171b.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Los usuarios vienen equipados con dedos de diferentes tama\u00f1os. Por lo tanto, el toque debe configurarse para atender a los dedos de todas las personas en el segmento objetivo. El ancho promedio del dedo \u00edndice de un adulto es de 1,6 a 2 cm. Por lo tanto, tenga eso en cuenta al dise\u00f1ar aplicaciones m\u00f3viles basadas en el tacto.\n<\/p>\n<p>\n  Si a los usuarios les resulta dif\u00edcil tocar y activar las funciones de la aplicaci\u00f3n, podr\u00edan abandonar el uso de la aplicaci\u00f3n por completo y eso ser\u00eda realmente tr\u00e1gico. Y esto se aplica nuevamente a la cantidad de funciones que tiene. Cuantas m\u00e1s funciones tenga, las \u00e1reas de toque m\u00e1s peque\u00f1as en la aplicaci\u00f3n. Por otro lado, la incorporaci\u00f3n de algunas caracter\u00edsticas principales conducir\u00eda a \u00e1reas de toque m\u00e1s grandes.\n<\/p>\n<h5>\n  4 El horror del pergamino<br \/>\n<\/h5>\n<p>\n  Los editores de revistas y peri\u00f3dicos y los anunciantes alguna vez vivieron en el horror perpetuo de \u00abel redil\u00bb. Cuando las aplicaciones m\u00f3viles se hicieron populares, el \u00abdoble horror\u00bb se alivi\u00f3 un poco porque el contenido era visible en una pantalla que se pod\u00eda desplazar f\u00e1cilmente.\n<\/p>\n<p>\n  Pero esto solo era cierto en parte porque se volvi\u00f3 cada vez m\u00e1s importante crear un dise\u00f1o web receptivo y m\u00e1s largo donde las acciones principales no deber\u00edan ir debajo de la p\u00e1gina, o m\u00e1s bien, superar un lugar donde las personas puedan desplazarse f\u00e1cilmente y encontrarlo.\n<\/p>\n<p>\n  Las conversiones aumentan solo cuando los botones relevantes se colocan \u00aben la mitad superior de la p\u00e1gina\u00bb, o cuando los usuarios no tienen que desplazarse. Colocar un llamado a la acci\u00f3n claro en un lugar destacado generar\u00eda m\u00e1s conversiones.\n<\/p>\n<h5>\n  5 botones que imitan el aspecto de los botones de control de la GUI<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d93e23014.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d93e23014.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  As\u00ed como tener demasiados controles GUI puede ser un terrible error, lo contrario tambi\u00e9n puede ser mortal. Los textos y titulares subrayados generan la sensaci\u00f3n de que son enlaces que llevar\u00edan a los usuarios a una nueva p\u00e1gina.\n<\/p>\n<p>\n  Hacen clic en \u00e9l, pero cuando no llegan a la p\u00e1gina, asumen que el enlace est\u00e1 roto y salen de la aplicaci\u00f3n. Los usuarios a menudo se confunden y, a veces, se irritan debido a esta farsa y es posible que no regresen.\n<\/p>\n<p>\n  Muestre los botones de radio donde sea absolutamente necesario, pero no d\u00e9 la impresi\u00f3n equivocada de botones de radio donde no los haya.\n<\/p>\n<h5>\n  6 controles GUI inconsistentes<br \/>\n<\/h5>\n<p>\n  Los controles de la GUI deben ser consistentes. Si usa palabras espec\u00edficas para la llamada a la acci\u00f3n y acciones similares, use las mismas palabras en toda la aplicaci\u00f3n. Usar diferentes palabras para la misma acci\u00f3n podr\u00eda crear confusi\u00f3n.\n<\/p>\n<p>\n  A veces, las acciones que los desarrolladores suponen que ser\u00e1n simples para los usuarios, hacen exactamente lo contrario. Si sigue un patr\u00f3n particular en su aplicaci\u00f3n, s\u00edgalo constantemente. Aseg\u00farese de que los botones y las p\u00e1ginas aparezcan donde los usuarios esperan que est\u00e9n.\n<\/p>\n<h5>\n  7 Saltarse los diagramas de flujo y llegar al dise\u00f1o<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d940e251f.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d940e251f.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Los desarrolladores no ahorran tiempo omitiendo los diagramas de flujo y sumergi\u00e9ndose directamente en la parte de dise\u00f1o de la aplicaci\u00f3n. Es muy importante crear un diagrama de flujo pensando en los usuarios, y muchos desarrolladores crean estos diagramas con los personajes de los usuarios para que siempre tengan en mente al usuario final.\n<\/p>\n<p>\n  Esto tambi\u00e9n ayudar\u00eda a determinar de d\u00f3nde provienen los usuarios, cu\u00e1les son sus intereses y d\u00f3nde se encuentran. Por lo tanto, al dise\u00f1ar los diagramas de flujo, es imperativo decidir sobre el usuario y los objetivos comerciales y si se lograr\u00e1 al final o no. Al crear un esquema de flujo, es posible pasar por diferentes opciones con flujos de p\u00e1gina y decidir cu\u00e1l es la mejor.\n<\/p>\n<h5>\n  8 No considerar las &#8216;capacidades percibidas'<br \/>\n<\/h5>\n<p>\n  En t\u00e9rminos sencillos, disponibilidad significa todas las acciones que son f\u00edsicamente posibles dependiendo de las propiedades de un objeto\/entorno. Una escalera te permite subir o bajar, una tapa de botella te permite enroscar o desenroscar.\n<\/p>\n<p>\n  De manera similar, en una p\u00e1gina web, un control deslizante realiza la funci\u00f3n de moverse hacia arriba y hacia abajo, la casilla de verificaci\u00f3n le permite marcarla o desmarcarla y el texto con hiperv\u00ednculo lo lleva a otra p\u00e1gina. Affordance permite a un usuario hacer algo que puede entender f\u00e1cilmente.\n<\/p>\n<p>\n  La percepci\u00f3n de estas posibilidades se basar\u00e1 en el conocimiento del usuario de la p\u00e1gina web, experiencias, creencias y objetivos. Al dise\u00f1ar interfaces de usuario, es importante que el dise\u00f1ador proporcione las indicaciones correctas o podr\u00eda generar confusi\u00f3n y, por lo tanto, una mala experiencia de usuario.\n<\/p>\n<p>\n  Los dise\u00f1adores deben usar indicadores visuales correctos a trav\u00e9s de los cuales los usuarios puedan percibir c\u00f3mo observan estos elementos de la interfaz de usuario e interact\u00faan con ellos. Tambi\u00e9n es importante recordar que no todos los usuarios son iguales; por lo tanto, todas las posibilidades pueden no ser percibidas o interpretadas de la misma manera por todos. As\u00ed que respalda todas las se\u00f1ales visuales con las etiquetas e instrucciones adecuadas.\n<\/p>\n<h5>\n  9 Ausencia del tipo correcto de cuadros de di\u00e1logo<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d942b8868.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d942b8868.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  En la usabilidad del di\u00e1logo de una aplicaci\u00f3n web, es obligatorio informar a los usuarios sobre el estado actual del sistema y c\u00f3mo se han interpretado sus comandos. Los di\u00e1logos est\u00e1n destinados a informar a los usuarios sobre c\u00f3mo est\u00e1n resultando sus acciones, sin sacarlos de la pantalla actual.\n<\/p>\n<p>\n  El silencio puede mantener a los usuarios adivinando. Entonces, al crear una aplicaci\u00f3n web, aseg\u00farese de que el cuadro de di\u00e1logo no oculte informaci\u00f3n a los usuarios. Pero util\u00edcelo con moderaci\u00f3n, porque los mensajes continuos pueden interrumpir.\n<\/p>\n<p>\n  Por ejemplo, cuando el usuario decide salir de una p\u00e1gina en particular despu\u00e9s de escribir informaci\u00f3n, el cuadro de di\u00e1logo puede aparecer con el cuadro de confirmaci\u00f3n que dice \u00ab\u00bfDescartar borrador? Cancelar o Descartar\u00bb.\n<\/p>\n<p>\n  Sin embargo, bombardearlos con cuadros de di\u00e1logo de suscripci\u00f3n (por ejemplo, \u00abPor favor, suscr\u00edbase a nuestro bolet\u00edn diario escribiendo su direcci\u00f3n de correo electr\u00f3nico\u00bb) demasiadas veces puede ser realmente irritante.\n<\/p>\n<h5>\n  10 cometer errores comunes con mensajes de error<br \/>\n<\/h5>\n<p>\n  Los usuarios dedican tiempo y esfuerzo a completar los formularios, y cuando hay un error en ellos, es obligatorio informarles qu\u00e9 sali\u00f3 mal y d\u00f3nde. Si existen reglas espec\u00edficas para crear una contrase\u00f1a, informe a los usuarios de antemano, para que no tengan que hacer lo mismo dos veces.\n<\/p>\n<p>\n  O, si hay que aplicar un c\u00f3digo de promoci\u00f3n, simplemente inf\u00f3rmeles de antemano qu\u00e9 tipo de promociones se aplican y por qu\u00e9. No informarles a tiempo puede generar ansiedad y frustraci\u00f3n en el usuario. Recuerde no cometer estos errores al crear mensajes de error:\n<\/p>\n<ol>\n<li>Ambig\u00fcedad- No tener claro el error cometido por el usuario.\n  <\/li>\n<li>Culpar al usuario: es mejor ser humilde, incluso cuando el usuario comete el error. Se\u00f1ale el error suavemente, para que se les indique que lo intenten de nuevo.\n  <\/li>\n<li>Mala ubicaci\u00f3n de los mensajes de error: es recomendable no colocar los errores en una lista con vi\u00f1etas porque eso realmente los apaga. Coloque los mensajes de error justo encima de los errores para que los usuarios puedan ver lo que est\u00e1 mal al instante.\n  <\/li>\n<li>No usar microcopias para evitar errores: peque\u00f1os fragmentos de texto explicativo cerca de los espacios en blanco pueden indicarle al usuario qu\u00e9 debe completar, para que pueda obtenerlo la primera vez.\n  <\/li>\n<\/ol>\n<h5>\n  11 Ausencia de valores predeterminados inteligentes<br \/>\n<\/h5>\n<p>\n  Tener un campo adicional en la p\u00e1gina de llenado de formularios de su aplicaci\u00f3n puede ser un elemento disuasorio. Entonces, si ese campo adicional es una necesidad absoluta, aseg\u00farese de ingresar valores predeterminados en los campos de entrada del formulario. Las personas escanean los formularios r\u00e1pidamente para verificar cu\u00e1nto tiempo les tomar\u00e1 completar el formulario, y si ya hay un valor predeterminado en el formulario, es probable que contin\u00faen y completen los dem\u00e1s.\n<\/p>\n<p>\n  No tener valores predeterminados inteligentes podr\u00eda hacer que el usuario consuma mucho tiempo y sea frustrante, y eso es un grave error. Tambi\u00e9n es recomendable no establecer valores predeterminados para los campos de entrada que requieren la atenci\u00f3n del usuario. No asuma en qu\u00e9 har\u00e1 clic el usuario, e incluso si fuera un valor predeterminado bien investigado, los usuarios podr\u00edan querer algo m\u00e1s.\n<\/p>\n<h5>\n  12 Ignorar los colores de acento para los botones de llamada a la acci\u00f3n<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d944ab47d.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d944ab47d.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Es muy importante incorporar buenos colores de acento para llamar la atenci\u00f3n sobre botones como \u00abComprar ahora\u00bb, \u00abComenzar un tutorial gratuito\u00bb, \u00abInscr\u00edbase ahora\u00bb, etc. Use un color diferente para los botones para que se destaque, especialmente para aquellos muy botones cruciales de llamada a la acci\u00f3n.\n<\/p>\n<p>\n  El color de acento tiene que ser lo suficientemente brillante para llamar la atenci\u00f3n, pero no irritante ni que distraiga. Aseg\u00farese de que el color de \u00e9nfasis se complemente con el resto del tema de color en la aplicaci\u00f3n. Tambi\u00e9n reserve un color espec\u00edfico para la llamada a la acci\u00f3n y no lo use en ninguna otra parte de la p\u00e1gina.\n<\/p>\n<h4>\n  Conclusi\u00f3n<br \/>\n<\/h4>\n<p>\n  Estos son algunos de los errores m\u00e1s comunes en el dise\u00f1o de UI\/UX. Y recuerde, cada vez que realice cambios en el dise\u00f1o, aseg\u00farese de probarlo a fondo para ver qu\u00e9 tan efectivo ser\u00eda.\n<\/p>\n<p>\n  El dise\u00f1o de aplicaciones es un diferenciador para el \u00e9xito, y con miles de aplicaciones que se lanzan cada d\u00eda, solo unas pocas obtienen aprobaci\u00f3n. Las malas pr\u00e1cticas pueden conducir a errores mortales en el dise\u00f1o de UX\/UI, y todos los esfuerzos de tantas personas se van por el desag\u00fce.\n<\/p>\n<p>\n  <strong>Un \u00faltimo recordatorio:<\/strong>\n<\/p>\n<p>\n  Mientras dise\u00f1a su aplicaci\u00f3n, recuerde dise\u00f1ar para m\u00faltiples plataformas, a menos que est\u00e9 apuntando a una en particular. As\u00ed es como obtienes un Producto M\u00ednimo Viable (MVP) directamente en la tienda.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fuente de grabaci\u00f3n: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2017\/10\/25\/app-design-ux-ui-mistakes\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Texto demasiado peque\u00f1o para leer. Contenido de fuente de color claro peque\u00f1o sobre un fondo blanco. Los usuarios no pueden ver las caracter\u00edsticas cruciales ubicadas c\u00f3modamente en alg\u00fan lugar de la interfaz de usuario. Estos son algunos de los problemas comunes con el dise\u00f1o de UX\/UI en las aplicaciones y cometer muchos errores como estos le costar\u00eda muy caro. Al planificar un proyecto de software, es imperativo identificar tales errores bastante temprano en la etapa de dise\u00f1o porque el objetivo es crear una interfaz intuitiva y r\u00e1pida que brinde una experiencia de usuario perfecta. Aqu\u00ed hay algunos errores mortales que pueden significar la perdici\u00f3n de la aplicaci\u00f3n, y&#8230;<\/p>\n","protected":false},"author":1,"featured_media":193423,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[151,398,203,359,229,60],"tags":[],"class_list":["post-263253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-consejos-y-trucos-web","category-diseno","category-diseno-web","category-entretenimiento","category-libros-de-texto","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=263253"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263253\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/193423"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=263253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=263253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=263253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}