Tabla de Contenidos
Sobre la autora: Alina Khazanova, DiseƱadora de Producto @ Elementor
Alina es diseƱadora de producto en Elementor.
Su pasiĆ³n es brindar una experiencia de producto valiosa y satisfactoria a los usuarios.
Seguir los principios del diseƱo de sitios web puede determinar el Ʃxito o fracaso de tu sitio.
Es la diferencia entre que los usuarios se vayan casi tan pronto como lleguen a tu pƔgina de inicio, o que exploren tus servicios y productos y eventualmente se conviertan.
El diseƱo no es de ninguna manera una ciencia exacta.
Sin embargo, hay muchos principios Ćŗtiles y reglas prĆ”cticas que pueden ayudar a mejorar tus proyectos tanto en tĆ©rminos de usabilidad como de estĆ©tica cuando buscas construir un sitio web profesional.
En este artĆculo, explicaremos quĆ© son los principios de diseƱo y por quĆ© deberĆas conocerlos.
TambiĆ©n discutiremos algunas de las pautas mĆ”s populares y efectivas a seguir. Ā”Comencemos!
Tabla de Contenidos
ĀæQuĆ© Son los Principios del DiseƱo de Sitios Web?
Los principios de diseƱo se basan en contribuciones de profesionales en industrias tan diversas como la psicologĆa y la ciencia del comportamiento, la fĆsica, la ergonomĆa y mĆ”s.
En general, estos principios son leyes flexibles que guĆan a los diseƱadores hacia la producciĆ³n de productos finales efectivos.
Afectan quĆ© elementos se eligen o descartan y cĆ³mo se organizan esas caracterĆsticas.
Los principios de diseƱo facilitan la creaciĆ³n de una Experiencia de Usuario (UX) y una Interfaz de Usuario (UI) estĆ©ticamente agradables y eficientes.
Implementarlos correctamente impulsa las conversiones.
Por ejemplo, Pipedrive aumentĆ³ las inscripciones en un 300 por ciento despuĆ©s de implementar una prĆ”ctica clave: la simplicidad.
Incorporar principios de diseƱo en tus proyectos mejorarĆ” la usabilidad de tus sitios web, influirĆ” en cĆ³mo se perciben y, en Ćŗltima instancia, te permitirĆ” tomar las mejores decisiones tanto para tus usuarios como para tu negocio de diseƱo web.
20 Principios Clave del DiseƱo de Sitios Web Efectivo
Hay muchas definiciones de principios de diseƱo disponibles en lĆnea, y diferentes diseƱadores y otros profesionales los interpretarĆ”n segĆŗn sus necesidades.
Sin embargo, hay algunas mejores prƔcticas que se aplican independientemente del contexto.
A continuaciĆ³n, se presentan algunos de los principios de diseƱo de sitios web mĆ”s populares segĆŗn lo sugerido por cientĆficos y expertos en usabilidad.
Las 10 Leyes de la Experiencia de Usuario (UX)
Las leyes UX son una colecciĆ³n de principios de diseƱo de Jon Yablonski ā diseƱador de producto senior en General Motors ā de su libro āLaws of UX: Using Psychology to Design Better Products & Servicesā.
Estas son pautas sĆ³lidas que todo diseƱador deberĆa considerar.
AquĆ hay algunos de los principios mĆ”s importantes que Yablonski enumera:
1. Haz que los Objetivos Principales sean FƔciles de Alcanzar (Ley de Fitts)
La ley de Fitts se origina en el trabajo del psicĆ³logo Paul Fitts mientras examinaba el sistema motor humano.
Esta ley establece que la distancia y el tamaƱo de un elemento objetivo impactan directamente en la cantidad de tiempo que le toma a un usuario navegar hasta Ʃl e interactuar con Ʃl.
Esto significa que querrƔs hacer que tus objetivos principales sean fƔciles de alcanzar.
AdemĆ”s, si tienes mĆŗltiples objetivos, debe haber suficiente espacio entre ellos.
Por ejemplo, al diseƱar para mĆ³viles, los Ćconos clicables deben ser lo suficientemente grandes para tocar:
El espacio adicional entre los botones asegurarĆ” que los usuarios no hagan clic accidentalmente en el Ćcono incorrecto.
Como regla general, el Ć”rea mĆnima clicable para diseƱos mĆ³viles debe ser de 40 x 40 pĆxeles.
2. MantĆ©n las Opciones de los Usuarios al MĆnimo (Ley de Hick)
Si alguna vez te has sentido abrumado por la cantidad de opciones disponibles y has tenido problemas para decidir entre ellas, entenderĆ”s cĆ³mo demasiadas opciones pueden ser paralizantes para los usuarios.
Esta es la ley de Hick en pocas palabras.
Cuantas mĆ”s opciones haya disponibles, y cuanto mĆ”s complejas sean, mĆ”s tiempo les llevarĆ” a los usuarios tomar una decisiĆ³n.
La ley de Hick, tambiĆ©n conocida como la ley de Hick-Hyman, lleva el nombre de William Edmund Hick y Ray Hyman, dos psicĆ³logos que examinaron la correlaciĆ³n entre el nĆŗmero de estĆmulos presentados a un individuo y su tiempo de reacciĆ³n.
Este principio significa efectivamente que deseas eliminar el desorden y mostrar a tus usuarios solo las opciones mƔs esenciales que necesitan.
Por ejemplo, la mayorĆa de los sitios web ofrecerĆ”n una opciĆ³n clara entre āGuardarā o āCancelarā y āSĆā o āNoā al confirmar alguna acciĆ³n:
Asimismo, esta ley tambiĆ©n se puede aplicar para simplificar tu menĆŗ de navegaciĆ³n, mostrar productos o servicios y otros elementos de diseƱo del sitio web.
3. Coloca Elementos Relacionados en Ćreas Comunes (Ley de la RegiĆ³n ComĆŗn)
La ley de la regiĆ³n comĆŗn, una de varias leyes de la escuela de psicologĆa Gestalt, simplemente establece que si los elementos en una pĆ”gina estĆ”n agrupados estrechamente, se perciben como conectados entre sĆ.
Puedes lograr esto con bordes, fondos o espaciado.
Por ejemplo, los enlaces de navegaciĆ³n generalmente se colocan juntos para formar un menĆŗ:
Este principio trata sobre la composiciĆ³n y el espaciado, y querrĆ”s usarlo sabiamente.
Como otro ejemplo, en la pĆ”gina principal de un blog donde las vistas previas se muestran cronolĆ³gicamente, el tĆtulo, la descripciĆ³n y la imagen de cada publicaciĆ³n deben agruparse visualmente.
4. Usa Escenarios y LĆ³gicas Familiares (Ley de Jakob)
La ley de Jakob, acuƱada por Jakob Nielsen, cofundador del Nielsen Norman Group, aboga por el uso de escenarios y lĆ³gicas familiares en el desarrollo de la interfaz de usuario.
Tus usuarios generalmente esperarĆ”n āy preferirĆ”nā que tu sitio funcione de la misma manera que otros con los que ya estĆ”n familiarizados.
Cada uno de nosotros construye modelos mentales alrededor de las convenciones que rodean a los sitios web.
Esto permite a tus usuarios centrarse en lo que quieren lograr en lugar de aprender a moverse por una interfaz desconocida.
Esto significa que querrƔs ceƱirte a lo que ya conocen y no abrumarlos con escenarios desconocidos.
Un icono de Ā«hamburguesaĀ», por ejemplo, generalmente abrirĆ” algĆŗn tipo de menĆŗ:
Si usas este icono en tu diseƱo, deberĆa comportarse de la manera que tus usuarios esperan.
5. Usa Estructuras Simples y Evita Formas Complejas (Ley de PrƤgnanz)
En 1910, Max Wertheimer, un psicĆ³logo, observĆ³ una serie de luces que se encendĆan y apagaban en un cruce de ferrocarril.
Aunque parecĆa que una sola luz se movĆa alrededor del cartel entre las bombillas, en realidad era una serie de bombillas que se encendĆan y apagaban.
Esta observaciĆ³n formĆ³ la base de un conjunto de principios sobre cĆ³mo percibimos visualmente los objetos.
Uno de ellos es la ley de PrƤgnanz, que recomienda usar estructuras simples y evitar formas complejas.
Tus usuarios interpretarƔn tu diseƱo utilizando el menor esfuerzo cognitivo posible.
Las imƔgenes complejas se percibirƔn en sus formas mƔs simples.
Reducir la sobrecarga cognitiva deberĆa ser una parte importante de tus objetivos de diseƱo.
Puedes aplicar este principio agrupando y alineando elementos en bloques, columnas y secciones relevantes, en lugar de esparcirlos por toda la pƔgina:
Las estructuras y elementos simples facilitarĆ”n la interpretaciĆ³n.
6. Coloca Elementos Agrupados Cerca Uno del Otro (Ley de Proximidad)
La ley de proximidad, otro principio atribuido a la psicologĆa Gestalt, establece que los elementos que estĆ”n cerca uno del otro se percibirĆ”n como un grupo.
Esto tambiĆ©n reduce la sobrecarga cognitiva para tus usuarios, ya que comprenderĆ”n la informaciĆ³n mĆ”s fĆ”cilmente.
Aplicar este principio se trata de hacer un uso inteligente del espaciado.
Los elementos que componen un grupo deben estar mĆ”s cerca entre sĆ que los de diferentes grupos.
En muchos encabezados de sitios web, los enlaces del menĆŗ se agrupan mientras que las Llamadas a la AcciĆ³n (CTAs) se alinean a un lado o de alguna manera se dividen de los elementos de navegaciĆ³n:
Esta es una ilustraciĆ³n perfecta de la ley de proximidad.
Dado que los enlaces del menĆŗ y las CTAs cumplen funciones diferentes, estĆ”n visualmente separados.
7. Usa la Similitud para Unir Elementos en Grupos (Ley de Similitud)
Otra ley de Gestalt, la ley de similitud, establece que los objetos similares se percibirĆ”n como relacionados independientemente de la separaciĆ³n que exista entre ellos.
Esta es la base detrĆ”s del estilo de conjuntos de caracterĆsticas con esquemas de color, iconos y texto similares:
QuerrƔs usar este principio sabiamente para unir contenido relacionado en grupos a travƩs de un estilo similar y consistente.
8. Conecta Elementos de DiseƱo para Mostrar su RelaciĆ³n entre SĆ (Ley de Conectividad Uniforme)
La ley de conectividad uniforme, tambiĆ©n de la psicologĆa Gestalt, establece que los elementos que estĆ”n conectados visualmente se percibirĆ”n como mĆ”s relacionados que los elementos que no estĆ”n conectados en absoluto.
Una aplicaciĆ³n de esta ley es usar un paso a paso visual en tus flujos de incorporaciĆ³n o de pago:
Esto crea una conexiĆ³n visual que muestra que todos los pasos son partes del mismo proceso.
9. Divide el Contenido en PequeƱos Fragmentos (Ley de Miller)
La ley de Miller lleva el nombre del psicĆ³logo cognitivo George Miller, quien afirmĆ³ que una persona promedio puede mantener solo de cinco a nueve piezas de informaciĆ³n en su memoria de trabajo.
Este principio sugiere separar el contenido en fragmentos.
Por ejemplo, los nĆŗmeros de tarjetas de crĆ©dito generalmente se dividen en grupos de cuatro para ayudar a las personas a interpretarlos.
Esta ley subraya la importancia de una planificaciĆ³n de diseƱo adecuada.
A medida que una aplicaciĆ³n se hace mĆ”s grande y adquiere mĆ”s funciones, se vuelve mĆ”s difĆcil de usar.
Debes planificar tu interfaz teniendo esto en cuenta para que pueda acomodar nuevas funciones mientras sigue siendo fƔcil de operar.
Otra forma de aplicar esta regla es limitando la cantidad de contenido que tu usuario tiene que percibir en un momento dado.
Divide el contenido en fragmentos en lugar de mostrarlo todo en un solo bloque:
AdemƔs, diseƱa teniendo en cuenta los tamaƱos de pantalla mƔs populares y controla cuƔntos elementos ven los usuarios de un vistazo.
SĆ© crĆtico con tu diseƱo.
Si crees que hay demasiado contenido en una secciĆ³n, muĆ©velo a otra y separa los elementos lĆ³gicamente.
10. AcentĆŗa los Primeros y Ćltimos Elementos en una Serie (Efecto de la PosiciĆ³n Serial)
Esta ley fue acuƱada por el psicĆ³logo alemĆ”n Herman Ebbinghaus, quien fue pionero en mĆ©todos experimentales para medir la memoria.
Establece que los usuarios recordarĆ”n mejor los primeros y Ćŗltimos elementos de una serie.
Puedes usar esta tendencia para resaltar las Ɣreas mƔs importantes de tus pƔginas web.
Por ejemplo, el contenido clave como CTAs, formularios u opciones de compra son mƔs efectivos en la parte superior o inferior de la pƔgina.
Los 10 "Mandamientos" de Usabilidad de Jakob Nielsen
Jakob Nielsen ā el cofundador del Nielsen Norman Group que mencionamos brevemente antes ā inventĆ³ varios mĆ©todos de usabilidad, incluyendo los diez principios heurĆsticos de evaluaciĆ³n que estamos a punto de discutir.
El Nielsen Norman Group es una firma renombrada de investigaciĆ³n y consultorĆa en UX que ha tenido un impacto significativo en el campo del diseƱo web y de software.
Nielsen desarrollĆ³ originalmente estos principios de usabilidad en 1990, pero los revisĆ³ para mayor claridad basĆ”ndose en el anĆ”lisis de 249 problemas de usabilidad.
Ten en cuenta que no son leyes ni directrices especĆficas, sino mĆ”s bien reglas generales.
Es por esta razĆ³n que se les llama Ā«heurĆsticasĀ».
1. MantĆ©n a Tus Usuarios Informados con RetroalimentaciĆ³n Apropiada
Los usuarios necesitan confiar en tu marca y sentirse seguros al usar tu aplicaciĆ³n.
Esto significa que tu sitio debe comunicar continuamente lo que estĆ” sucediendo y hacerles saber si sus interacciones son exitosas.
Por ejemplo, una tienda de comercio electrĆ³nico informarĆ” a los usuarios que han aƱadido un artĆculo a su carrito o lo han guardado para consideraciĆ³n posterior.
La retroalimentaciĆ³n puede usar cambios de color, indicadores de progreso, notificaciones y alertas para informar visualmente al usuario.
2. La InformaciĆ³n Debe Mostrarse en un Orden LĆ³gico y Usar Frases y Conceptos Familiares
Los usuarios no deberĆan necesitar consultar un diccionario para entender los tĆ©rminos en tu sitio web.
QuerrĆ”s ceƱirte a la convenciĆ³n.
Usa palabras con las que ya estƩn familiarizados en el texto de tu interfaz.
Por ejemplo, los tĆ©rminos Ā«deshacerĀ» y Ā«rehacerĀ» tienen significados bastante universales en las interfaces de usuario de aplicaciones.
Cambiar estos tĆ©rminos a otros desconocidos como Ā«revertirĀ» y Ā«repetirĀ» serĆ” desorientador para los usuarios.
3. Permite Control y Libertad en la Forma en que los Usuarios InteractĆŗan con tu Sitio Web
Los usuarios a menudo cometen errores y necesitarƔn una forma de deshacer o rehacer acciones, como usando botones, como mencionamos antes.
De manera similar, puedes considerar proporcionar una opciĆ³n de Editar donde sea relevante.
Por ejemplo, esta funciĆ³n es a menudo Ćŗtil para hacer cambios en comentarios y mensajes en aplicaciones de redes sociales.
Con tales caracterĆsticas disponibles, los usuarios se sentirĆ”n mĆ”s en control y estarĆ”n menos tensos cuando ocurran accidentes.
4. Sigue las Convenciones y EstƔndares
Adherirse a los estĆ”ndares puede parecer similar al segundo principio, y puede considerarse una extensiĆ³n del mismo.
Implementa estructuras de navegaciĆ³n con las que los usuarios estĆ©n familiarizados.
DeberĆan encontrar fĆ”cil entender tu interfaz y acceder a los elementos que necesitan para interactuar con tu pĆ”gina.
Un informe sobre la usabilidad de la terminologĆa del carrito de compras ilustra esto.
El diseƱo usĆ³ el tĆ©rmino Ā«Trineo de ComprasĀ» en un intento de destacar.
Sin embargo, el 50 por ciento de los usuarios no entendieron lo que significaba.
La otra mitad dedujo su significado solo porque estaba en el mismo lugar donde normalmente estĆ” un carrito en un sitio web.
5. PrevƩn Errores Cuando Puedas y Advierte a los Usuarios Antes de que Tomen Acciones Irreversibles
Es inteligente mostrar mensajes de error significativos para que sea claro cĆ³mo recuperarse de los problemas y quĆ© los causĆ³.
Sin embargo, es aĆŗn mĆ”s efectivo eliminar situaciones propensas a errores o informar explĆcitamente a los usuarios de cualquier consecuencia conocida de las acciones que estĆ”n a punto de tomar.
Por ejemplo, eliminar una cuenta de usuario a menudo es irreversible.
La mayorĆa de las aplicaciones resaltarĆ”n esta configuraciĆ³n en rojo para que destaque.
Un mensaje de Ā«ĀæEstĆ”s seguro de que quieres hacer esto?Ā» generalmente se muestra si los usuarios hacen clic en el botĆ³n Eliminar.
6. MantĆ©n la InformaciĆ³n Importante Visible
Los usuarios no deberĆan tener que recordar informaciĆ³n de un paso de un proceso ā como un pago o una configuraciĆ³n tĆ©cnica ā a otro.
Quieres que tus usuarios reconozcan, en lugar de recordar, la informaciĆ³n.
Una tienda de comercio electrĆ³nico puede aplicar esta heurĆstica al poner a disposiciĆ³n una lista de artĆculos vistos recientemente, para que los usuarios no tengan que recordar los nombres de los productos que aĆŗn no han completado la compra.
7. Construya Sistemas que Sean CĆ³modos Tanto para Principiantes como para Expertos
QuerrĆ” hacer que su sitio web sea fĆ”cil para los nuevos visitantes, pero tambiĆ©n cĆ³modo para aquellos mĆ”s familiarizados con el sistema que puedan necesitar aceleradores para acciones frecuentes.
Los atajos de teclado, que puede proporcionar o permitir que los usuarios creen y editen, son un ejemplo de esto.
8. Haga que sus DiseƱos Sean Tanto EstƩticamente Agradables como Simples
QuerrĆ” mantener su interfaz despejada en lugar de abrumar a sus usuarios con demasiadas opciones.
Los elementos innecesarios compiten por espacio y reducen la visibilidad de las caracterĆsticas mĆ”s importantes.
9. Proporcione Mensajes de Error que Sean FƔciles de Entender
Los mensajes de error claros y comprensibles facilitan identificar las fuentes de los problemas y encontrar rƔpidamente posibles soluciones.
QuerrĆ” que los suyos sean directos, educados (sin culpar al usuario) y constructivos, dando consejos sobre cĆ³mo recuperarse del problema.
10. Proporcione Documentos de Ayuda Buscables
A veces puede ser necesario que los usuarios consulten informaciĆ³n de ayuda adicional.
Su documentaciĆ³n debe ser fĆ”cil de buscar para que puedan encontrar rĆ”pidamente contenido relevante para sus situaciones y resolver sus problemas.
CĆ³mo Aplicar Principios de DiseƱo Web en sus Proyectos
Aprender sobre tantos principios y directrices puede resultar abrumador.
AquĆ hay algunos consejos para aplicarlos:
1. MantƩngase Familiarizado con las Mejores PrƔcticas
QuerrƔ seguir aprendiendo y educƔndose sobre las mejores prƔcticas de diseƱo UX.
Aprenda de soluciones existentes relacionadas con la web.
Comience sus proyectos con una fase de investigaciĆ³n o inspiraciĆ³n donde aprenda mĆ”s sobre las necesidades de sus usuarios y recopile referencias de calidad para aprender.
2. Elija CuƔles Principios Usar Sabiamente
Cada proyecto es un caso individual y se beneficiarƔ de diferentes principios de diseƱo.
NecesitarƔ priorizar cuƔles pueden ayudarle mƔs para cada sitio web que cree.
Tenga en cuenta la funcionalidad principal del sitio, sus flujos de usuario primarios y sus objetivos comerciales correspondientes.
3. Pruebe y Mejore Regularmente sus DiseƱos
NecesitarĆ” probar su sitio web tanto como sea posible con usuarios reales objetivo.
Si no puede hacerlo, puede solicitar ayuda y probar con compaƱeros de trabajo, clientes e incluso sus co-diseƱadores para recopilar informaciĆ³n relevante sobre la usabilidad de su sitio web.
En esta etapa, no estĆ” buscando la perfecciĆ³n.
Nada es perfecto desde el principio, asĆ que no tenga miedo de pulir y mejorar su diseƱo segĆŗn los comentarios de los datos de uso.
4. Practique
A medida que los practique, comenzarƔ a aplicar los principios de diseƱo casi subconscientemente.
Cuanto mƔs diseƱe con los principios de usabilidad en mente, mƔs fƔcil le resultarƔ generar soluciones efectivas rƔpidamente y evitar problemas.
5. Forme su Estilo Ćnico ā Pero Solo DespuĆ©s de Entender los Conceptos BĆ”sicos
Las reglas estƔn diseƱadas para facilitar los procesos, pero no estƔn destinadas a seguirse ciegamente.
Sin embargo, a menudo solo podrĆ” romper las reglas con Ć©xito cuando comprenda completamente su propĆ³sito.
Estos principios de diseƱo forman un conjunto de herramientas bĆ”sicas y conocimientos fundamentales para que experimente y desarrolle su propio estilo Ćŗnico.
Una vez que los haya dominado, podrƔ producir soluciones de diseƱo extraordinariamente exitosas rompiƩndolos intencionalmente.
6. Use el Editor de Elementor
Nuestro Editor de Elementor se basa en principios y lĆ³gica de diseƱo.
Al usar nuestra caracterĆstica de diseƱo y amplia colecciĆ³n de widgets, puede organizar mejor la estructura del contenido de su sitio web y asegurarse de que estĆ” construyendo un producto digital fĆ”cil de usar.
Por ejemplo, las secciones y columnas de Elementor le ayudan a agrupar el contenido lĆ³gicamente.
Los widgets proporcionan una manera fĆ”cil de fragmentar el contenido, empleando los principios de similitud y conexiones visuales para facilitar la percepciĆ³n de sus usuarios.
En general, Elementor elimina la molestia de organizar el contenido desde cero.
Con nuestros widgets y la Biblioteca de Plantillas, tiene numerosas soluciones para implementar principios de diseƱo de la mejor manera posible.
Resumiendo
Para crear sitios web profesionales y fƔciles de usar, necesita estar familiarizado con los principios bƔsicos de diseƱo e implementarlos sabiamente en su trabajo.
Esto le ayudarƔ a mejorar sus diseƱos haciƩndolos mƔs atractivos, fƔciles de usar y, lo mejor de todo, mƔs rentables.
Cubrimos mucho terreno en esta publicaciĆ³n, incluyendo diez leyes de UX compiladas por Jon Yablonski, y diez principios de usabilidad desarrollados por Jakob Nielsen.
AdemƔs, compartimos varias formas en que puede implementar estas mejores prƔcticas en su trabajo, incluyendo el uso de nuestro Editor de Elementor.
ĀæTiene alguna pregunta sobre cĆ³mo aplicar los principios de diseƱo en su trabajo?
Ā”HĆ”ganoslo saber en la secciĆ³n de comentarios a continuaciĆ³n!
ĀæBuscas contenido nuevo?
Al introducir tu email, aceptas recibir emails de Elementor, incluidos emails de marketing,
y acepta nuestros TĆ©rminos y condiciones y nuestra PolĆtica de privacidad.
