Consejos para mejorar el diseño y la experiencia de un sitio web

Un sitio web es mucho más que saber enlazar páginas, necesitas crear un impacto en el usuario y luego hacer que permanezca en el.

¿Sabías que normalmente los usuarios pueden irse de tu sitio web luego de los primeros 3 segundos si ven que es anticuado o poco moderno?

Luego de los primeros 3 segundos ellos trataran de navegar para buscar o realizar la acción a la que vinieron, si los usuarios no pueden encontrar nada de lo que están buscando, o se pierden, se irán fácilmente y muy rara vez volverán.

El éxito de toda web depende mucho del tipo de combinación entre el diseño de interfaz y experiencia de usuario.

Espaciado

La importancia de él, radica en la armonía y distribución de los objetos, un buen uso del espacio ayuda al usuario a visualizar mejor el orden y jerarquía de los objetos y elementos.

Un buen ejemplo del buen uso de espaciado lo podemos notar en paginas como Rappi, la buena distribución de los objetos hace que tu vista pueda apreciar mejor los elementos.

Botones

Los botones deben ser obvios y resaltar la acción que tu deseas que el usuario utilice, en este caso nuestro botón primario es “start” y nuestro objetivo es que comience su navegación, no podemos poner cancel al mismo nivel del botón primario, ya que nuestra intención es que la atención del usuario vaya a nuestro botón primario.

Otro ejemplo es la página de iTunes, como pueden ver su botón primario es “descargar” por eso resalta un poco más que los demás, ya que la intención de ellos es que bajes su producto.

Bordes

Son pesados y pueden complicar la visibilidad del usuario, también pueden hacer ver al sitio mucho más ocupado y estrecho de lo que realmente es.

Las paginas web modernas no utilizan casi bordes para encerrar sus cajas, cards o secciones, solo en casos muy particulares o que tengan una razón especifica.

Como puedes visualizar en la pagina de Crehana sus elementos no muestran ningún borde y si lo hacen, son finos delgados y de un color suave, como en el caso de las lineas divisoras que veras mas abajo.

Alineación del texto

Alinear muy bien el texto facilitara enormemente la lectura del contenido y hará tu diseño más limpio y preciso.

Una de las cosas que hace a Twitter tan exitosa es por la forma en como distribuye y alinea su texto, haciéndola una red social donde puedes leer contenido rápido y fácil.

Mensajes de ayuda

Es normal que el usuario se equivoque, trata de guiarlo con un pequeño mensaje y especificándole como y donde esta su error.

Estos mensajes son muy comunes a la hora de rellenar formularios o campos, necesitas explicarle al usuario que debe hacer y donde falló tal como ves el ejemplo de la pagina de Platzi.

Keylines

Son perfectas para dividir tu contenido en secciones y resaltar elementos, como títulos, contenido o párrafos. Al igual que los bordes debes utilizar líneas finas y de colores suaves.

Volviendo a la página de Rappi también puedes notar que las secciones se separan por pequeñas lineas delgadas y de un color gris suave sobre un fondo blanco, facilita mejor a tu vista la distribución de cada sección.

Carousel

Debes tener en cuenta que la mayoría de las personas luego de pasar 3 o 4 imágenes en un carrusel se detendrán o saltaran a su próxima tarea.

Es recomendable que no lo hagas muy largo, poner mas de 6 es demasiado, selecciona las imágenes mas impactantes y descarta las demás.

Contraste

Un buen uso del contraste es importante ya que separara visualmente los elementos del fondo.

En este caso los elementos del carrusel de la derecha son casi imperceptibles y se confunden con el fondo del mismo color.

Si te gustó el articulo por favor déjame un clap y sígueme, estaré actualizando cada semana con consejos, trucos y ventajas para aquellos diseñadores que deseen expandir mas sus conocimientos y valor en el mercado.

Temas que te pueden interesar:

¿Debe un diseñador saber programar?: https://medium.com/sue%C3%B1os-graficos/debe-un-dise%C3%B1ador-saber-programar-61c5df2f94f6

¿Cómo convertirse en un diseñador UI/UX y conseguir tu primer empleo?: https://medium.com/sue%C3%B1os-graficos/c%C3%B3mo-convertirse-en-un-dise%C3%B1ador-ui-ux-y-conseguir-tu-primer-empleo-7b0f02d5655e