diseño web

Cómo hacer un briefing de diseño web
14/07/2017
A menudo me encuentro con clientes que tienen serias dificultades para explicarnos en qué consiste su proyecto web. Les cuesta mucho organizar la información y definir aquellos datos que son más importantes a la hora de hacer un presupuesto de desarrollo web. Por este motivo os dejo un breve esquema de cómo debe ser un briefing para el desarrollo o diseño de un sitio web.   Descripción del proyecto Empezaremos nuestro briefing haciendo una descripción del proyecto en líneas generales, de la empresas u organización que lo respalda y del contexto del mismo. No estamos escribiendo una novela, conviene ir al grano y resumirlo en no más de 2 ó 3 párrafos. Datos de contacto Datos de contacto de las personas implicadas en el proceso de desarrollo así como de sus departamentos. Público objetivo  Aquí presentaremos la audiencia y el público objetivo al que irá dirigido el sitio web. Edad, zona geográfica, nivel socioeconómico, sexo, profesiones, estudios, aficiones, etc.. Tampoco hay que profundizar en esto y basta con tener una idea somera del asunto. Productos o servicios ofrecidos Descripción de los productos o servicios que ofrece la empresa de una forma esquemática y sin profundizar. En el caso de no existir productos o servicios, como por ejemplo una web para concienciar a la gente sobre el movimiento vegano, obviamente no hará falta completar este apartado. Competencia Definición de los principales competidores tanto a nivel nacional como internacional. Siempre debemos incluir los links a las páginas de esas empresas u organizaciones. Referencias Ejemplos de webs que gustan y a las que hay que parecerse o superar. Este apartado es muy útil a la hora de dar a entender los gustos y el nivel de diseño. Presupuesto Es muy importante definir un presupuesto y exponerlo abiertamente. De igual forma que hacemos cuando vamos a comprarnos un portátil o un coche, es muy conveniente ser claros con esto. Hay que buscar proveedores de confianza y confiar en ellos. Un proveedor serio podrá asesorar y valorar todo mucho mejor teniendo una horquilla de presupuesto. No hagamos que nos enseñen el Porsche si solo tenemos presupuesto para un Dacia. Además esto puede ahorrarte mucho tiempo en negociaciones y búsqueda de proveedor.  Objetivos Empezaremos por definir los objetivos más intangibles, aquellos que ayudan a entender en términos generales de qué va la vaina, pero que no se pueden medir con exactitud. Algunos ejemplos serían:  · Dar a conocer la marca · Promocionar los servicios de la empresa · Mejorar la presencia online · Mejorar la usabilidad Y después pasamos a centrarnos en la definición de aquellos objetivos que sí se pueden medir y que después pueden pasar a ser los famosos KPIs. Estos objetivos son los que realmente nos interesan ya que van a condicionar en gran medida muchas de las decisiones de diseño y desarrollo. Debemos dividirlos en dos: Objetivo principal  Motivo por el cual se quiere desarrollar el sitio web, el goal principal, aquello que más nos interesa conseguir. Ejemplos de objetivos principales típicos serían:  · Vender determinado producto. · Conseguir potenciales clientes (leads). · Obtener donativos.  Objetivos secundarios Otros objetivos que, si bien no son críticos, su consecución nos puede resultar de gran ayuda. Ejemplos de objetivos secundarios serían:  · Conseguir suscriptores a la newsletters. · Conseguir usuarios registrados. · Conseguir comentarios en los post. · Conseguir reviews de productos. Mapa de sitio Si tienes alguna idea de las secciones, tipos de contenido o mapa de sitio conviene especificarlo aquí. Si no sabes cómo organizar el contenido simplemente especifica qué tipo de información quieres mostrar en la web.  Idiomas Definir en qué idiomas deberá estar disponible el sitio. También indicar si el cliente proveerá los textos traducidos o la empresa de desarrollo debe encargarse de esto. Tiempos Plazos de entrega final y entregas parciales.  Imagen corporativa y diseños Si la empresa u organización dispone de logo es conveniente adjuntarlo al briefing. Si hay diseños o ejercicios de UX o diseño previos también conviene adjuntarlos. Funcionalidades En este apartado es donde hay que definir cualquier cosa que queramos que haga el sitio web. Es la parte más importante de todo el briefing web y donde debemos explayarnos con los detalles, ya que es la que más influye en el coste de desarrollo. Si tenemos algún conocimiento técnico o sabemos más o menos de lo que hablamos es importante dar cuantos más detalles mejor. Si no tienes ni idea, es mejor ser prudente e intentar explicar de forma simple qué cosas quieres que haga la web.  Si no sabes cómo se llama algo puedes poner ejemplos de otras webs pegando la dirección de la web que hace aquello que quieres. Por ejemplo: Quiero que las fotos del producto se vean como en zara.com https://www.zara.com/es/es/rebajas/hombre/blazers/blazer-cuadros-marino-c436046p4606523.html Ejemplos de funcionalidades comunes son: · Diseño responsive (adaptativo). · Sistema de venta online con carrito de la compra y pago con tarjeta y PayPal. · Buscador por palabras. · Buscador por palabras y autocompletado · Blog con comentarios y bloque de artículos relacionados. · Posibilidad de registro de usuarios con Facebook (Login with Facebook). · Sistema de reservas de pistas de paddel. · Área de clientes donde podrán descargar archivos. También es importante detallar cualquier integración que haya que hacer con otros programas o webs. Por ejemplo: · La tienda virtual debe integrarse con un sistema CRM. · El catálogo de piezas deberá actualizarse diariamente contra nuestro sorfware de gestión de almacen. Tecnología Si se trata de un sitio nuevo y tienes predilección por alguna tecnología en particular debes definirlo. Si no lo tienes claro ponte en manos de profesionales y déjate asesorar. Siempre he defendido que hay que elegir un proveedor de confianza y trabajar con la tecnología que dicho proveedor domine. Se contrata a profesionales y estos profesionales deben decidir cuál es la mejor tecnología para cada proyecto. En el caso de que se trate de rediseño hay que dejar muy claro cuál es la tecnología actual y si hay que mantenerla o se puede cambiar. Alojamiento web Indicar el presupuesto disponible para alojamiento web.  También se pueden incluir extras para mejora del rendimiento o la seguridad como por ejemplo la contratación de un CDN o un certificado SSL. Dominios Si ya se dispone de un dominio conviene detallarlo. Si no se dispone del mismo se deben sugerir nombres de dominios para comprobar su disponibilidad. Mantenimiento Especificar si se dispone de un equipo para actualizar el contenido o necesitas contratar este servicio.   Y esto es todo. Fácil ¿verdad? También puedes incluir cualquier otra información que estimes oportuna, pero recuerda obviar todo aquello que no sea de interés para valorar el desarrollo. Ahora ya no tienes excusa para lanzarte con esa idea loca de web que tienes en mente. Ponte manos a la obra, crea un briefing para tu proyecto online y busca una empresa de diseño web que te elabore un presupuesto.
Anatomía de una microinteracción
28/04/2017
Las microinteracciones son pequeñas piezas de funcionalidad que permiten al usuario llevar a cabo una acción concreta.  Hoy en día estamos rodeados de ellas ya que se encuentran en todos los productos digitales. Un buen diseño de microinteracciones mejora la experiencia de usuario y puede ser el responsable de que los usuarios se enamoren de nuestro producto. La historia de las microinteracciones se remonta a los primeros aparatos electrónicos y muchos de los estándares de las GUI que usamos actualmente fueron en su día microinteracciones  primitivas. Una microinteracción puede ser parte de un producto o puede ser el producto completo.  Por ejemplo, una báscula de las de toda la vida solo sirve para una cosa: Calcular el peso. Tiene un único caso de uso: el usuario se sube encima y la báscula muestra el peso mediante el display. La interacciones bien diseñadas resuelven un problema concreto con eficiencia, humor y estilo; marcando la diferencia entre un producto que amamos y otro que simplemente aceptamos.  Por ejemplo Google ofrece sugerencias sobre lo que estas buscando de forma instantánea generando una sensación única y mágica en el usuario. Whatsapp muestra pequeños iconos en cada mensaje para informar del estado de las conversaciones. Un reloj indica que el mensaje no ha llegado, un tick indica que el mensaje ha llegado al servidor de WhatsApp, un doble tick indica que el mensaje ha llegado al dispositivo del destinatario y un doble tick cambia al color azul cuando el destinatario ha leído el mensaje. Por el contrario, una microinteracción mal concebida puede causar gran confusión y frustración en un usuario. Por ejemplo, la ruedecita para regular la temperatura de algunas neveras siempre me ha parecido super confusa.  Tiene números del 1 al 9, pero no queda totalmente claro si un numero más alto es más frío o es más temperatura.  El diseño mejora notablemente añadiendo simplemente la palabra Colder (Más frío).  Pero mejora mucho más si añadimos unos iconos de termómetros en cada extremo de la escala de forma que cualquier persona pueda entender la microinteracción independientemente del idioma que hable. Personalmente hubiera optado por iconos de copos de nieve que resultan más ilustrativos. Un copo en un lado de la rueda y tres copos en el lado opuesto. Incluso se podría mejorar añadiendo un degradado de color de tonos cálidos a fríos. Otro ejemplo mítico de microinteraccion mal diseñada es el cierre de un coche con el mando a distancia. Justo después de apretar el botón del mando las luces del coche parpadean y suena un pitidito, todo fantástico si no fuera porque cuando abres el coche ocurre prácticamente lo mismo.  Por este motivo la mayoría de la gente presiona el botón del mando varias veces e incluso más de uno vuelve a salir a la calle a comprobar si el coche esta cerrado. Una microinteracción se compone de 4 partes: Los Triggers (Disparadores) que la inician,  las Rules (Reglas) que determinan su funcionamiento, el Feedback generado por las rules que dan información de estado y por último los Loops and modes que… Vamos a desgranar cada una de estas partes: 1.- Triggers (Disparadores) que la inician Un trigger es lo que inicia la microinteracción. Es importante que el usuario identifique fácilmente el trigger, que no haya discordancias visuales, por ejemplo si el trigger parece un interruptor debe actuar como tal. Cuanto más común y usada sea la microinteracción, más visible y fácil de reconocer debe ser el trigger. Ej: Durante el diseño de la web para la Drupalcamp Spain 2017 decidimos ubicar el call to action para comprar entradas como un botón flotante que este siempre visible, en todo momento y por todo el sitio. Existen dos tipos de triggers: Manuales: Es el usuario es el que determina cuando se inicia la microinteracción. Estos triggers surgen del deseo del usuario de hacer algo: Quiero apagar la alarma, quiero saber como ir a Lisboa, quiero iniciar un chat con mi ex-novia, etc. El ejemplo más obvio y común de este tipo de triggers es el botón. De sistema: Se activan de forma automática y sin intervención humana si se cumple una determinada condición. La mayoría de las veces el usuario puede configurar y limitar estos triggers.  Ejemplos típicos de condiciones pueden ser: Errores: Cuando se produce un error en una app el sistema lo comunica mediante una microinteración. Ej: Endomondo genera un aviso por voz y muestra un icono de color rojo cuando se pierde la señal GPS. Cambios en la ubicación: Cuando entramos o salimos de una ubicación concreta. Ej: Tripadvisor muestra sugerencias sobre restaurantes de las ciudades a las que acabas de llegar mediante notificaciones  push a los móviles de aquellos usuarios que previamente lo han autorizado. Datos entrantes: Un nuevo email, una actualización disponible, el tiempo, una llamada, un mensaje, etc. Ej: Cualquier smartphone al recibir una llamada muestra varias opciones de forma automática como coger la llamada, colgar o responder con un sms. Otras microinteracciones: en muchas ocasiones una microinteracción precede a otra y forman parte de una feature o macrointeracción. Por ejemplo, en el registro de un usuario después de introducir email y contraseña puede enviarse un email para confirmar la cuenta mediante un link. 2.- Rules (Reglas) que determinan como funciona Las reglas sirven para crear un modelo de la microinteracción y deben reflejar tanto las restricciones del contexto como las restricciones del negocio. La clave a la hora de definir las reglas es reducir la complejidad. Limitar las opciones al mínimo y fijar unos valores por defecto. Cuantas más opciones más reglas. Toda aquella información que conocemos a priori debe utilizarse para confeccionar las reglas. Datos del usuario que tenemos guardados, datos de la plataforma, o del entorno. Ej: Instagram usa datos que tiene de la gente a la que seguimos y nos sigue para generar las rules de la microinteracción que nos sugiere seguir nuevos usuarios. Hay que definir estados para cada elemento y ver como cambia con el tiempo o con la interacción del usuario. Las reglas también sirven para prevenir errores. Evitar que el usuario pueda cometer un error. 3.- Feedback que informa al usuario de lo que está ocurriendo El feedback es posiblemente la parte más importante de una microinteracción porque ofrece al usuario información que le permite entender cómo transcurre la acción. Es importante definir qué información necesita saber el usuario y cuándo necesita saberla. Existen los siguientes tipos de feedback: Feedback visual: Animaciones y mensajes. El más común de todos los tipos de feedback. Ej: Asana muestra un mensaje de confirmación flotante cuando el usuario marca una tarea como completada. Feeback en forma de audio: Earcorns y voz (speech). Los earcorn son sonidos distintivos que se emplean para anunciar determinados eventos: arranque del sistema, nuevo mensaje, etc. Quizá el earcorn mas famoso de la historia sea el mítico sonido de arranque de Windows XP, o el de error! El feedback por audio también puede ser simplemente por voz, las voces sintetizadas ya son muy realistas y cada vez es más común que una app nos informe de cualquier cosa de esta forma. Feedback vibrotactil: El dispositivo en cuestión vibra para enviar al usuario algún tipo de información.  Mucho ha llovido desde que en 1976 el video juego arcade de Moto Cross "Fonz" añadiera el primer feedback vibrotactil de la historia de forma que los jugadores podían sentir la vibración al chocar contra otras motos dentro del juego. Hoy día este tipo de feedback es muy común en consolas, máquinas recreativas, smartphones y tablets. Ej: El Steam controller implementa este tipo de feedback. El feedback nos permite dotar de personalidad a nuestra microinteracción y por consiguiente a nuestra aplicación.  Ej: Mailchimp da un toque de humor genial al momento crítico de enviar una campaña de email marketing. Siempre que sea posible hay que dar feedback al usuario para evitar momentos de incertidumbre. Un buen feedback nos da esa fantastica sensación de tener el control de la app. 4.- Bucles y modos Cuando existen acciones poco frecuentes que pueden enturbiar la microinteraccion utilizamos lo que se conoce como “modo”.   Un modo es un espacio concreto en el que el funcionamiento de la microinteracción cambia. Ya en los inicios de la computación moderna el mítico editor de texto para sistemas UNIX Vi basaba su manejo en el cambio de modo: El modo comando permitía desplazarse dentro de un archivo y realizar operaciones de edición como buscar, eliminar texto, modificar texto, etc. mientras que el modo insertar permitia escribir texto nuevo en el archivo. Para cambiar de modo había que presionar la tecla ESC. (Aunque hable de él en pasado todavía cientos de miles de programadores y administradores de sistema siguen usando Vi a diario). Ej: Captura del Editor vi para Mac OS. Siempre que sea posible un modo debe tener su propia pantalla para evitar confusión. Ej: Airbnb permite a los usuarios usuarios que tienen su casa en alquiler en la plataforma cambiar entre el modo viaje y el modo host. Por último los bucles (loops) determinan la duración de una microiteracción y definen si esta se repite o cambia en el tiempo. Los parámetros de los loops deben ser elegidos con mucho cariño para asegurar la mejor experiencia de usuario. Los loops de larga duración se emplean para dotar de memoria a la microinteración y para ir simplificándola a lo largo del tiempo.   Como diseñadores es importante usar las microinteracciones de forma correcta ya que nos permiten mejorar la experiencia de usuario y dotar a nuestros productos de ese toquecito mágico que engancha a los usuarios.
https://wildwildweb.es/es/blog/los-mejores-modulos-drupal-para-tu-web-responsive
16/01/2017
El diseño web responsive ha pasado de ser un servicio extra para los clientes a casi una obligación. No se contempla ya la posibilidad de hacer una web sin seguir este paradigma. Y no solo en Drupal, sino en cualquier CMS. Mucha culpa de esta nueva pauta a la hora de diseñar la ha tenido Google, que en 2015 decidió dar un nuevo empuje a esta filosofía de diseño incluyéndolo como factor importante de medición para el posicionamiento SEO técnico. A día de hoy, las webs que están perfectamente adaptadas a cualquier dispositivo tienen mejor ranking en Google, mientras que las demás sufren penalizaciones. Pero Google no ha sido el único que ha impulsado esta tendencia. Los propios usuarios han sido más exigentes y han valorado muy positivamente las webs con este diseño, dejando de usar las que les resultaban incómodas de navegar desde sus pequeños dispositivos. Drupal no se ha quedado atrás en esta tendencia cada vez más asentada y la comunidad no para de generar módulos expresamente desarrollados para la creación de webs responsive.  Actualmente no hay ninguna barrera entre el diseño responsive y el desarrollo web en Drupal. Cualquier propuesta de diseño puede ser perfectamente ejecutada gracias a todos los módulos que existen. Incluso paradigmas de diseño como el "Mobile First", que consiste en diseñar primero las versiones para móvil de la web e ir escalando el diseño hasta la versión para desktop, son perfectamente compatibles con la creación de un sitio basado en Drupal. Aquí os dejamos una lista de los mejores módulos para diseño responsive en Drupal:   Responsive Menus El famoso “menú hamburguesa” es un elemento indispensable para cualquier diseño responsive de calidad. Lo ideal sería hacer un pequeño desarrollo combinando Jquery con Css, pero este módulo te ahorrará ese tiempo. Una vez instalado podrás configurar muchas opciones, como por ejemplo a qué medida de pixeles quieres que se active el menú o qué estilo quieres que tenga.   Responsive Images and styles Uno de los mayores problemas del diseño responsive es la carga de imágenes. Un peso muy alto en las fotos hace que la web cargue muy lenta en los dispositivos móviles. Este módulo nos permite crear diferentes estilos de imagen para que la web sirva automáticamente las fotos adaptadas al tamaño de la pantalla. Además es compatible con el módulo Media, lo que hará que las imágenes subidas con el editor de texto también puedan tener esta capacidad.   Fitvids No se a vosotros, pero a mi me resulta bastante molesto entrar en una web que integra videos y no poder darle al "play" porque aparecen maximizados. Con este módulo se soluciona este problema ya que, una vez configurado, cualquier video que subas a la web aparecerá adaptado al tamaño correcto de la pantalla.   FooTable Otro de los quebraderos de cabeza entre los diseñadores y los desarrolladores son las tan temidas (y odiadas) TABLAS. Este módulo por fin ataca el problema "tablas vs. móviles" y lo soluciona con una integración que convierte la tabla en un cuadro de opciones desplegables muy intuitivo y con gran usabilidad.   Display Suite Creado en origen únicamente para webs de diseño fluido, en la actualidad se utiliza prácticamente en todos los desarrollos, y es un firme candidato a entrar en la siguiente versión del Core de Drupal. Lo más útil es que puedes elegir el diseño de los templates de los nodos sin necesidad de theming. Pero además, te permite crear campos personalizados, como por ejemplo campos con código PHP o campos que muestren bloques ya existentes, e integrarlos en la estructura del nodo.   Flex Slider Con este módulo conseguimos mantener fluidas las imágenes de un slider para que no se deformen. Su velocidad de carga es muy buena y permite configurar su estilo y tiempo de reproducción. No es una solución completa ya que, dependiendo del formato de las imágenes, pueden llegar a verse muy pequeñas en móviles y dar problemas de usabilidad.   Fields Groups + Easy Responsive Tabs to Accordion La mayor virtud de este módulo es que nos permite crear grupos de campos sin necesidad de theming. Entre los estilos que puedes elegir para mostrarlos está el modo pestañas o “tabs”. Aquí es donde entran en juego las restricciones del responsive ya que las tabs, por lo general, no funcionan correctamente en móviles por exceso de tamaño. Con el submódulo Easy Responsive Tabs to Accordion podrás convertir las tabs en un sencillo menú vertical fluido. Es una de las mejores soluciones responsive de Drupal que hemos utilizado hasta ahora.   Backstrech Las imágenes de fondo o backgrounds que se utilizan en portadas o en banners, suelen ser otro de los quebraderos de cabeza del responsive. Al ser un diseño fluido, lo más normal es que la imagen se deforme a medida que el contenedor reduce su ancho. Pero con este módulo conseguiremos que la imagen se mantenga con el mismo alto y SIEMPRE centrada, sin deformarse. Como véis hay un montón de módulos que nos pueden hacer la vida más fácil a la hora de implementar un diseño responsive en nuestra web Drupal. Es importante tener en cuenta que habrá que hacer siempre algunos ajustes tanto en CSS como en Jquery para que todo quede como queremos, pero gracias a estos módulos conseguiremos una web 100% responsive hecha con Drupal.
Tipografías de imprenta
01/09/2016
A veces me despierto por las noches empapado de sudor recordando los tiempos en los que al diseñar una web solo podía utilizar las llamadas "fuentes seguras" o "tipografías de sistema": Arial, Verdana, Trebuchet, Georgia o "mi preferida", la Comic Sans.  Afortunadamente esos tiempos ya terminaron y ahora la variedad tipográfica de la que disponemos es enorme. Tan grande que a veces podemos tardar más en elegir las fuentes y la herramienta, que en elegir una película en Netflix, cuya media ronda, en mi caso, los tres días y medio. Para ello, vamos a hacer a un repaso por los Web Font Services más populares y seleccionaré de cada uno de ellos mis tipografías favoritas.    Google Fonts Google Fonts es la herramienta más utilizada cuando hablamos de Web Font Services y la que tiene más fuentes. Es un servicio gratiuito y eso hace que dentro de las opciones tipográficas haya un poco de todo. De entre todas seleccionaré tres:   Open Sans   Source Sans Pro   Raleway     Typekit Typekit es el otro gigante junto a Google Fonts, entre los dos se reparten el mayor trozo del pastel. Pertenece a Adobe y en este caso sí es de pago, por lo que la calidad de las fuentes es un poco mayor, ya que encontramos muchas tipografías bajo licencia como la Futura. Futura   Proxima Nova   Museo Slab     Typoteque Typoteque ofrece una gran variedad de familias mediante un servicio de pago, tipo Typekit pero las fuentes que encontramos no son de la misma calidad (es díficil competir con Adobe), sin embargo hay algunas interasantes. Lo que sí que merece la pena sin duda es que eches un vistazo a su tienda de libros sobre tipografía.   Freda Sans Screen   Zico     Webtype A Webtype, también de pago, lamentablemente le auguro el mismo futuro que a Fontdeck, otro servicio de web fonts, que ha terminado echando el cierre, en parte porque competir sobre todo con Adobe y con Google es como jugar en la champions con una panda de amigos. Sin embargo, de entre la gran mayoría de fuentes totalmente prescindibles, destaco una: la Escrow, una elegantísima tipografía de serifa. Escrow    Brick En Brick han hecho suya la famosa frase de Mies Van der Rohe de "menos es más". Pocas fuentes pero la mayoría de gran calidad y totalmente gratuito. Entre otras puedes encontrar la Montserrat, la mejor alternativa a la Gotham, pero en este caso en todos sus pesos, a diferencia de lo que pasa en Google Fonts, que solo nos ofrecen uno. Montserrat    Bodoni   Bitter   Tras este repaso solo me queda invitarte a que visites cada uno de las distintas herramientas con cierta frecuencia porque su catálogo se va ampliando y actualizando constantemente. Que la fuente te acompañe.
Las 10 Directrices de usabilidad más importantes
24/06/2015
El gurú de la usabilidad Jakob Nielsen dijo hace ya muchos años que “si la gente no puede usar un sitio web porque no le resulta intuitivo, se irán a otra parte”. No le faltaba razón. Desafortunadamente hoy día todavía existe un porcentaje altisimo de sitios web que presentan serios problemas de usabilidad. La mayoría de los desarrolladores web no hacen análisis de usabilidad porque tienen poca o ninguna idea sobre la materia y los diseñadores tampoco, ya que sólo suelen pensar en la estética olvidándose de la usabilidad. Por esta razón os presentamos esta lista de las principales directrices de usabilidad web.   La calidad del diseño de un sitio web es un indicador de credibilidad. Múltiples estudios defienden que las personas no empleamos criterios rigurosos a la hora de juzgar un sitio web y que el diseño es la primera prueba en la credibilidad de un sitio web por encima incluso de la información fiable y de calidad. El scroll mola Con la aparición de los móviles no queda más remedio que hacer scroll en casi cualquier web y los usuarios se han acostumbrado a ello. Esto no quiere decir que no debamos ubicar cosas como el logo, el menú de navegación o el propósito del sitio en la parte superior y más visible. El azul sigue siendo el mejor color para los enlaces. Desde que Sir Tim Berners-Lee creó las primeras páginas de hipertexto y eligió el color azul para los enlaces de forma aparentemente aleatoria, esta directriz se ha impuesto como norma. El color azul es uno de los menos problemáticos para las personas con deficiencias de visión, de forma que casi todo el mundo puede ver el azul o más exactamente, casi todo el mundo es capaz de distinguir el azul como un color diferente de los demás.   El espacio en blanco mejora la comprensión. Este elemento no visible tiene un fuerte impacto en la UX. Si quieres que algo destaque añade espacio en blanco alrededor.   Los usuarios no ven la publicidad La ceguera publicitaria dicta que la mayoría de nosotros ignoramos consciente o inconscientemente la información que se nos muestra en forma de banners. Por esto debemos evitar el uso de cualquier técnica que haga parecer que un bloque es un anuncio.   La regla de Pareto también se aplica en internet El 20% de tus usuarios generaran el 80% del beneficio, sea cual sea éste.. compras, envíos de formularios, comentarios.. 3 clicks siguen siendo el máximo permitido Los usuarios deben encontrar lo que buscan sin superar los 3 clicks dentro de un sitio web. Esta regla es especialmente importante en tiendas online.   Los humanos sólo pueden retener a la vez entre 5 y 9 cosas en la memoria a corto plazo El mítico principio del 7 más o menos 2, se ha aplicado desde comienzos de los 90 para limitar el número de items de un menú de navegación a 7. Esta regla se puede aplicar también a otros elementos del sitio como bloques de información o categorías.   El tiempo de carga es inversamente proporcional a la satisfacción de un usuario Otro principio clásico, conocido como la regla del segundo segundo, antiguamente se decía que un usuario no debería esperar más de dos segundos para obtener algún resultado de sus acciones como la carga de una página o similar.   Los menús de navegación "Off canvas" no son sólo para móviles Desde que Facebook creara el primer menú de navegación offcanvas, los usuarios han ido acostumbrándose a ellos y hoy día empiezan a ser un estándar no sólo en móviles sino en cualquier resolución de pantalla.