{"id":313,"date":"2021-01-13T14:56:00","date_gmt":"2021-01-13T14:56:00","guid":{"rendered":"https:\/\/www.artcreateweb.com\/blog\/?p=313"},"modified":"2021-03-08T17:27:21","modified_gmt":"2021-03-08T17:27:21","slug":"los-diez-principios-basicos-que-una-web-deberia-cumplir-segun-jakob-nielsen","status":"publish","type":"post","link":"https:\/\/www.artcreateweb.com\/blog\/index.php\/2021\/01\/13\/los-diez-principios-basicos-que-una-web-deberia-cumplir-segun-jakob-nielsen\/","title":{"rendered":"Los Diez principios b\u00e1sicos que una web deber\u00eda cumplir seg\u00fan Jakob Nielsen"},"content":{"rendered":"\n

Para que una Web sea \u201cuser friendly\u201d o lo que es lo mismo, que tenga un dise\u00f1o centrado en el usuario para que este pueda navegar por la Web de forma f\u00e1cil e intuitiva pudiendo alcanzar el objetivo concreto que ven\u00eda a buscar al visitarla.<\/p>\n\n\n\n

A estos principios se les llama tambi\u00e9n \u201cPrincipios Heur\u00edsticos\u201d porque est\u00e1n basados en reglas generales y no directrices espec\u00edficas de usabilidad.<\/p>\n\n\n\n

Jakob Nielsen<\/strong>, autoridad reconocida en el campo de la usabilidad web, propone diez principios b\u00e1sicos que toda Web debe cumplir<\/strong>:<\/p>\n\n\n\n

  1. Visibilidad del estado del sistema<\/strong><\/li><\/ol>\n\n\n\n

    El sistema, ya sea una app, una web o cualquier otro producto digital, siempre debe informar al usuario del estado en el que se encuentra, dando una retroalineaci\u00f3n al usuario de lo que est\u00e1 ocurriendo y ofrecerle una respuesta<\/strong> acorde en el menor tiempo posible.<\/p>\n\n\n\n

    De este modo, cualquier acci\u00f3n que realice el usuario tendr\u00e1 que generar una respuesta perceptible en un tiempo corto. Como ejemplo de este principio tendr\u00edamos:<\/p>\n\n\n\n

    • Las barras de progreso cuando est\u00e1 cargando la apertura de una ventana nueva.<\/li>
    • La barra de progreso cuando se est\u00e1 procesando un pago online.<\/li>
    • Las migas de pan o Breadcrumbs que indican al usuario donde se encuentra en cada momento.<\/li>
    • Los mensajes de confirmaci\u00f3n cuando el usuario rellena y env\u00eda un formulario.<\/li>
    • El cambio visual de los elementos cuando un usuario hace click en uno y pasa el cursor por encima.<\/li>
    • Los indicadores dentro de un proceso de compra que sit\u00faan al usuario en qu\u00e9 parte del proceso de compra se encuentra y que le falta por completar para finalizar dicha compra.<\/li><\/ul>\n\n\n\n
      1. Relaci\u00f3n entre el sistema y los usuarios del sistema<\/strong><\/li><\/ol>\n\n\n\n

        El sistema debe emplear un lenguaje al que los usuarios est\u00e9n familiarizados, con una terminolog\u00eda que les sea habitual \/ conocida y legible. As\u00ed el usuario se sentir\u00e1 c\u00f3modo al navegar por la web. Para conseguir esto, adem\u00e1s ser\u00e1 imprescindible el no dar la posibilidad de equivocarse al usuario a la hora de mostrarle un icono que no representa la funci\u00f3n real que cumple.<\/p>\n\n\n\n

        1. Consistencia y est\u00e1ndares<\/strong><\/li><\/ol>\n\n\n\n

          Toda web o app, debe mostrar un dise\u00f1o que sea coherente con el resto de elementos. Esto quiere decir que, el lenguaje empleado debe ser coherente entre s\u00ed, los colores, la forma de navegaci\u00f3n, los enlaces, los iconos, los campos de los formularios, la tipograf\u00eda, el tama\u00f1o de la fuente de los t\u00edtulos o los p\u00e1rrafos, los botones, etc.<\/p>\n\n\n\n

          1. Control y libertad para el usuario<\/strong><\/li><\/ol>\n\n\n\n

            Ocurre muy habitualmente que el usuario por error pulsa un elemento que no quer\u00eda y necesitar\u00e1 que le demos la opci\u00f3n de revertir dicha acci\u00f3n err\u00f3nea. As\u00ed evitaremos su frustraci\u00f3n. Para ello, debemos proporcionar botones o acciones que le permitan volver al estado anterior (Bot\u00f3n de cancelar, eliminar del carrito un producto que no quer\u00eda a\u00f1adir, un bot\u00f3n de retroceder, bot\u00f3n deshacer, etc).<\/p>\n\n\n\n

            1. Flexibilidad y eficiencia de uso<\/strong><\/li><\/ol>\n\n\n\n

              Se deben proporcionar m\u00e9todos que permitan interactuar tanto a los usuarios m\u00e1s experimentados como a los m\u00e1s novatos, a trav\u00e9s de atajos de teclado que les permitan aprovechar de forma m\u00e1s r\u00e1pida y eficiente el sistema sin importar los conocimientos del usuario.<\/p>\n\n\n\n

              Una forma de cumplir este principio es personalizando las acciones m\u00e1s frecuentes en el sistema, dot\u00e1ndolas de funcionalidades como son los atajos de teclado o los valores parametrizables dentro del buscador avanzado.<\/p>\n\n\n\n

              1. Prevenci\u00f3n de errores<\/strong><\/li><\/ol>\n\n\n\n

                Antes de que el usuario pueda caer en el error, el sistema debe prevenir las equivocaciones, ya que estas provocan frustraci\u00f3n. Para cumplir este principio, toda plataforma web o app debe proporcionar informaci\u00f3n de ayuda \u00fatil en cada elemento que lo requiera. Algunos ejemplos de esto ser\u00edan: los campos autocompletables en los formularios donde se pide la direcci\u00f3n de env\u00edo, avisos en los que deje en blanco alg\u00fan campo obligatorio de formulario, campos de formularios que no admitan ciertos caracteres que puedan indicarlo al usuario, buscadores autopredictivos o autocompletes para que los usuarios no tengan que escribir toda la palabra y puedan as\u00ed equivocarse al hacerlo, etc.<\/p>\n\n\n\n

                1. Reconocer antes que recordar<\/strong><\/li><\/ol>\n\n\n\n

                  El usuario no deber\u00eda memorizar toda la informaci\u00f3n que generan los diferentes elementos y las diferentes acciones dentro del sistema, que recibi\u00f3 con anterioridad (ya sea en un momento cercano o lejano). Por este motivo, debemos ayudar al usuario a minimizar la informaci\u00f3n que tiene que recordar a trav\u00e9s del uso de diversos elementos como pueden ser los objetos, acciones u opiniones. <\/p>\n\n\n\n

                  Ejemplos sobre este principio son:<\/p>\n\n\n\n

                  • Los botones de cancelar en color rojo.<\/li>
                  • La barra de navegaci\u00f3n en la parte superior y con el men\u00fa de hamburguesa (el icono con disposici\u00f3n horizontal de sus tres<\/em> l\u00edneas paralelas) en m\u00f3vil a la izquierda.<\/li>
                  • La diferenciaci\u00f3n de los t\u00edtulos principales<\/li>
                  • Mostrar los art\u00edculos que ha visto con anterioridad.<\/li><\/ul>\n\n\n\n
                    1. Dise\u00f1o est\u00e9tico y minimalista<\/strong><\/li><\/ol>\n\n\n\n

                      Debemos mostrar unicamente aquellos elementos que aporten informaci\u00f3n importante al usuario y se deben evitar aquellos que generan ruido y que solo distraen, hacen perder tiempo al usuario y que adem\u00e1s pueden distraerle del objetivo principal. Se deben por tanto evitar los dise\u00f1os recargados, aquellos que tardan en cargar, con exceso de colores y animaciones.<\/p>\n\n\n\n

                      1. Reconocimiento, diagnostico y recuperaci\u00f3n de errores<\/strong><\/li><\/ol>\n\n\n\n

                        Hacer que todos los errores que pueda tener la web, se muestren a los usuarios en un lenguaje claro y entendible, donde se aclare el problema y se den las posibles opciones que tiene hasta que se resuelva. Por ello, se deben evitar los mensajes de error que indiquen \u00fanicamente: \u00abError 404\u00bb, \u00abError34-x1″, Error 504\u00bb, etc.<\/p>\n\n\n\n

                        1. Ayuda y documentaci\u00f3n<\/strong><\/li><\/ol>\n\n\n\n

                          Aunque lo ideal es que el usuario no necesite ayuda para navegar por la web o app, puede ser necesario ofrecerle cierto tipo de ayuda que no sea muy extensa y que se encuentre situada de forma f\u00e1cil de localizar, donde se especifiquen brevemente y de forma clara los pasos a seguir. Ejemplos:<\/p>\n\n\n\n

                          • A\u00f1adir un icono con el s\u00edmbolo de interrogaci\u00f3n en sitios donde se pueda requerir.<\/li>
                          • El Chat en l\u00ednea.<\/li>
                          • Secci\u00f3n de preguntas frecuentes FAQs.<\/li>
                          • Navegaci\u00f3n guiada con lo b\u00e1sico y esencial en aplicaciones o programas y que se muestre nada m\u00e1s se instala o se abre por primera vez dicho sistema.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"

                            Para que una Web sea \u201cuser friendly\u201d o lo que es lo mismo, que tenga un dise\u00f1o centrado en el usuario para que este pueda navegar por la Web de forma f\u00e1cil e intuitiva pudiendo alcanzar el objetivo concreto que ven\u00eda a buscar al visitarla.
                            \nJakob Nielsen, autoridad reconocida en el…<\/p>\n","protected":false},"author":1,"featured_media":374,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,41],"tags":[66,61,58,62,11],"_links":{"self":[{"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/313"}],"collection":[{"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":26,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/313\/revisions\/359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/374"}],"wp:attachment":[{"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artcreateweb.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}