Lo que tus clientes quieren ver en tu diseño web
Una guía detallada que ayuda a comprender los principios de un buen diseño de sitios web.
Diseñar un buen sitio web es a menudo difícil y duro. Puede haber miles de millones de sitios web, solo unos pocos miles de ellos son en su mayoría buenos sitios web.
La gente pasa mucho tiempo en Internet comprando, ordenando comida en línea, explorando los sitios web de sus universidades, leyendo artículos de diferentes sitios web y muchos más. Puede hacer que el día de un usuario sea malo simplemente diseñando un sitio web malo. Es tiempo de cambiar. Si está a punto de diseñar un sitio web o ya tiene un sitio web y está pensando en actualizar su sitio web horrible, este artículo es totalmente para usted. No te preocupes, te tengo. Yo también navegaba en el mismo barco. Entonces, a lo largo del tutorial, quiero que sigan dos grandes citas sobre el diseño.
Siempre debemos centrarnos en estos aspectos clave, es decir, usabilidad y experiencia del usuario para diseñar un sitio web. Siga los 9 principios generales discutidos a continuación y haga que sus sitios web sean utilizables, estéticos, amigables y atractivos para usar.
Mantenga la barra de navegación lo más simple posible con opciones mínimas
Motive , aprenda y enséñese cómo implementar los consejos anteriores mirando algunos de los mejores sitios web disponibles. Por ejemplo, Gmail - Google. Porque, por qué no, es uno de los mejores sitios web / aplicaciones del planeta.
Una relación de aspecto es la altura y el ancho de un dispositivo de visualización. Todos los usuarios de hoy quieren una versión móvil del sitio web. Es deber del diseñador no solo diseñar el sitio web para una pantalla más grande, sino también enfocarse en las pantallas más pequeñas.
El sitio web no debería funcionar solo para un iPhone específico, Blackberry (si eso es una cosa hoy), teléfonos Samsung y One Plus. El diseño debe adaptarse a todos los teléfonos inteligentes disponibles en el mercado. Bueno, si no todos los teléfonos inteligentes, al menos intenta.
Algunos consejos para un diseño receptivo son:
Ahora ustedes podrían haber escuchado este término antes de un millón de veces " enfoque de diseño móvil primero ". Hay algunos requisitos de diseño en este enfoque que se enumeran a continuación:
Mantener el esquema de coloración consistente es una de las tareas más difíciles del planeta. A veces, el color que nos gusta puede no ser del agrado de otros.
A menudo hay una compensación entre los colores.
Asegúrese de que el color que elija sea del agrado de los demás.
Algunos colores pueden ajustarse bien a un texto determinado y otros no, por lo que mantener la consistencia es el papel clave aquí.
Ejecute una encuesta, pruebe e itere hasta obtener buenos comentarios de los usuarios. Además, la combinación de colores en su sitio web debe ser coherente.
No hagas una combinación de colores.
Algunos de los consejos son:
Por ejemplo, solo mira tu página de Gmail nuevamente, la simplicidad en su mejor momento. Como dije, la simplicidad es la clave aquí. Todos los colores son igualmente equilibrados. Toda la información es claramente visible.
A continuación hay algunos consejos para diseñar una buena interfaz de usuario:
Para hacer algo intuitivo, conéctelo a las propias experiencias de los usuarios. Usa metáforas mientras diseñas.
A menudo, las tres preguntas más importantes que debemos hacernos antes de diseñar algo son:
Necesitamos optimizar las interacciones que los usuarios tienen con su producto. Por lo tanto, coinciden con las actividades y necesidades del usuario.
Por ejemplo, el mismo viejo Gmail de Google tiene este sorprendente diseño en el que ni siquiera necesitamos el impulso de leer todas las opciones en el lado izquierdo.
Porque asocian cada nombre de opción con su símbolo respetado. Así que esto es algo increíble que puedes implementar en tu sitio web también.
Mira, así es como el usuario se siente frustrado, en este caso, el contenido nunca cumple con los objetivos del usuario.
Otro escenario es que las páginas de ayuda y documentación son páginas que necesitan más atención al proporcionar los detalles. Incluso si el programa se puede usar sin papeleo, se puede requerir soporte y documentos.
Cualquier información de este tipo debe ser:
Sugerencia: cualquier información que le des a los usuarios recuerda " Nunca andes por las ramas "
Para obtener un buen ejemplo del contenido, solo eche un vistazo a los foros de soporte de la página de Gmail de Google. Toda la información está bien presentada. Un usuario nunca puede perderse o frustrarse dentro de esta página y obtiene lo que quiere.
Si el rendimiento del sitio web es demasiado lento, creará un impacto negativo en la compañía del sitio web.
Y los usos podrían dejar de usar el sitio web. Piensa y actúa sabiamente.
Existen muchas herramientas de prueba de sitios web, solo elija una y pruebe la velocidad de su sitio web.
Uno de los más populares es Pingdom Tools .Entonces, el primer paso es en lugar de actualizar su sitio web sin saber dónde está el problema. Pruebe una de esas herramientas y llegarán a dónde está el problema, a qué página, sección o lo que sea, el rendimiento es lento.
El correcto ese problema específico.
Las cosas pueden tener más sentido más adelante. A continuación se detallan algunos consejos para aumentar el rendimiento de su sitio web:
Probé el sitio web de Gmail con las herramientas Pingdom, los resultados fueron fascinantes. Obviamente, es producto de Google, los resultados finales serían sorprendentes.
Sepa lo que está sucediendo dentro del sistema o sitio web en este caso.
Considere que está utilizando un sitio web para realizar algunas transacciones en línea, hay un momento en el que no sabe qué sucede en el sistema.
De repente, recibe un mensaje de transacción fallida.
En este punto no tienes idea. Hubiera sido mejor si el sitio web proporciona comentarios apropiados sobre el fallo de la transacción o el error detrás de él, como problemas de conexión a Internet, límite de dinero en su banco o incluso un pequeño problema técnico del sitio web.
De hecho, la retroalimentación sobre el progreso es un aspecto importante del diseño, también es la primera heurística de usabilidad del diseño de la interfaz de usuario .
Supongamos que cuando subo una imagen como archivo adjunto en Gmail, con la ayuda de la barra de progreso puedo saber que la imagen se está cargando. Estas cosas simples hacen que su sitio web sea más funcional. Algunos consejos para proporcionar comentarios sobre el progreso son los siguientes:
Use carga o porcentajes apropiados para mostrar sobre el progreso
Si un artículo o un producto no está disponible para la compra, comuníqueselo al usuario.
Proporcione una pantalla de éxito o de fallo , de modo que los usuarios sepan que están en el camino correcto.
No proporcione alertas / diálogos cada vez que ingresen los detalles de su tarjeta, como el nombre, fecha de nacimiento o el número PIN. Además, a veces sería bueno pedirle al usuario que reciba las notificaciones antes de mostrarlas sin su permiso.
No hagas esto
Algunas de las cosas que debe seguir son:
Especialmente el sitio no debe tener ningún error 404 o 500 .
Si tiene enlaces rotos por error, intente diseñar una buena página de error 404.
Un usuario debe estar contento aunque vea una página de error 404, pero este caso es excepcional. Obviamente, cuando su sitio web es casi perfecto, no tiene que preocuparse por ello.
Por ejemplo, he estado usando el sitio web de Google durante bastante tiempo, nunca me he enfrentado a este problema.
Debe diseñar la página de tal manera que, aunque el usuario llegue a una página de error 404, debe volver a las otras páginas o incluso salir del sitio web. Dales opciones para realizar otras tareas.
Los anteriores son los Principios generales para un buen diseño de sitios web.
Con la ayuda de estos principios, puede desarrollar fácilmente sitios web fáciles de usar y funcionales.
Sin estos fundamentos, sin duda sería difícil desarrollar un sitio web bueno e intuitivo.
Solo tenga en cuenta que un sitio web con buena facilidad de uso y facilidad de uso siempre tendrá éxito en el mundo real.
Diseñar un buen sitio web es a menudo difícil y duro. Puede haber miles de millones de sitios web, solo unos pocos miles de ellos son en su mayoría buenos sitios web.
Steve Jobs : El diseño no es solo lo que parece y se siente. El diseño es como funciona.
Ley de Jakobs: los usuarios pasan la mayor parte de su tiempo en otros sitios. Esto significa que los usuarios prefieren que su sitio funcione de la misma manera que todos los otros sitios que ya conocen.
¿Cómo diseñar un buen sitio web?
Bueno, el buen diseño del sitio web a menudo proviene de diferentes áreas expertas. No es un proceso de un solo paso, nunca puedes diseñar buenos sitios web a partir de pasos de acceso directo. Después de tomar una clase de posgrado llamada " Comunicación Humano-Computadora " tuvimos una larga discusión en la clase después de la cual desarrollamos los 9 principios generales con la ayuda de los cuales puedes mejorar o diseñar buenos sitios web (es como una fórmula de diseño) .Siempre debemos centrarnos en estos aspectos clave, es decir, usabilidad y experiencia del usuario para diseñar un sitio web. Siga los 9 principios generales discutidos a continuación y haga que sus sitios web sean utilizables, estéticos, amigables y atractivos para usar.
1. Navegación fácil
Esta es una de las características más importantes o un principio que debe tener en cuenta e implementar mientras diseña un sitio web. Según la encuesta realizada por Clutch , encontraron que " casi todos (94%) dicen que la navegación fácil es la característica más importante del sitio web ". Es cierto porque si su sitio es difícil de navegar, nada está fácilmente disponible en primer lugar, entonces las cosas podrían no funcionar sin problemas. La navegación fácil incluye un diseño de menú simple y la capacidad de moverse rápida y confiablemente por los sitios . No se preocupe, tengo algunos consejos para navegar fácilmente por el sitio web.Mantenga la barra de navegación lo más simple posible con opciones mínimas
- Mitigar las opciones del menú desplegable
- Siga las convenciones del mundo real o use el idioma del usuario para nombrar las opciones. No uses jergas
- Evite demasiados clics dentro del sitio web
Motive , aprenda y enséñese cómo implementar los consejos anteriores mirando algunos de los mejores sitios web disponibles. Por ejemplo, Gmail - Google. Porque, por qué no, es uno de los mejores sitios web / aplicaciones del planeta.
2. Diseño receptivo
Primero, preparemos lo básico. Diseño receptivo significa el diseño de un sitio web / página web que se adapta bien a todos los teléfonos inteligentes, computadoras, computadoras portátiles o cualquier dispositivo de visualización, independientemente de sus relaciones de aspecto.Una relación de aspecto es la altura y el ancho de un dispositivo de visualización. Todos los usuarios de hoy quieren una versión móvil del sitio web. Es deber del diseñador no solo diseñar el sitio web para una pantalla más grande, sino también enfocarse en las pantallas más pequeñas.
El sitio web no debería funcionar solo para un iPhone específico, Blackberry (si eso es una cosa hoy), teléfonos Samsung y One Plus. El diseño debe adaptarse a todos los teléfonos inteligentes disponibles en el mercado. Bueno, si no todos los teléfonos inteligentes, al menos intenta.
Algunos consejos para un diseño receptivo son:
- Optimizar las imágenes
- Asegúrese de que los botones se puedan hacer clic fácilmente en pantallas más pequeñas
- Crea varios prototipos
- Considere un enfoque de diseño móvil primero
- Sugerencia : si necesita que su diseño sea el mejor, siga:
- Comprender → Explorar → Prototipo → Evaluar
Ahora ustedes podrían haber escuchado este término antes de un millón de veces " enfoque de diseño móvil primero ". Hay algunos requisitos de diseño en este enfoque que se enumeran a continuación:
- Proporcionar menos contenido en la pantalla y centrarse en detalles importantes.
- El tamaño del texto debe ser apropiado.
- Proporcionar mejores elementos interactivos.
- Decirles a los clientes que los quieres
3. Mismo esquema de color (consistencia)
Al definir la jerarquía del conocimiento a través de los sitios web, el color es muy importante. Los usuarios deberían poder hojear las páginas para entender de qué se tratan.Mantener el esquema de coloración consistente es una de las tareas más difíciles del planeta. A veces, el color que nos gusta puede no ser del agrado de otros.
A menudo hay una compensación entre los colores.
Asegúrese de que el color que elija sea del agrado de los demás.
Algunos colores pueden ajustarse bien a un texto determinado y otros no, por lo que mantener la consistencia es el papel clave aquí.
Ejecute una encuesta, pruebe e itere hasta obtener buenos comentarios de los usuarios. Además, la combinación de colores en su sitio web debe ser coherente.
No hagas una combinación de colores.
Algunos de los consejos son:
- No use colores súper brillantes u oscuros en su sitio web.
- Resalte la información importante donde sea necesario.
- Asegúrate de usar la combinación de colores correcta .
- Mantenga los colores lo más minimalista posible.
Por ejemplo, solo mira tu página de Gmail nuevamente, la simplicidad en su mejor momento. Como dije, la simplicidad es la clave aquí. Todos los colores son igualmente equilibrados. Toda la información es claramente visible.
4. IU cómoda
Una interfaz de usuario es a través de la cual el usuario interactúa con el sistema. Sirve como puente entre el sistema y el usuario. Si la interfaz de usuario (UI) es buena, entonces el usuario definitivamente querría pasar más tiempo en ella. Es el trabajo del diseñador hacer que la interfaz de usuario se vea fresca y clara.A continuación hay algunos consejos para diseñar una buena interfaz de usuario:
- Mantenga la interfaz simple
- Utilice el diseño de la página de manera eficiente
- Fuentes y colores consistentes
- Eliminar información irrelevante
- Evite el desplazamiento infinito de la información.
Para hacer algo intuitivo, conéctelo a las propias experiencias de los usuarios. Usa metáforas mientras diseñas.
A menudo, las tres preguntas más importantes que debemos hacernos antes de diseñar algo son:
- Quiénes son los usuarios
- Qué actividades se llevan a cabo
- Donde está teniendo lugar la interacción.
Necesitamos optimizar las interacciones que los usuarios tienen con su producto. Por lo tanto, coinciden con las actividades y necesidades del usuario.
Por ejemplo, el mismo viejo Gmail de Google tiene este sorprendente diseño en el que ni siquiera necesitamos el impulso de leer todas las opciones en el lado izquierdo.
Porque asocian cada nombre de opción con su símbolo respetado. Así que esto es algo increíble que puedes implementar en tu sitio web también.
5. Los contenidos cumplen los objetivos del usuario para visitar sitios web
Cuando se trata de encontrar la información correcta, un usuario no estaría contento si no obtiene lo que quiere. Sea específico al proporcionar la información.Mira, así es como el usuario se siente frustrado, en este caso, el contenido nunca cumple con los objetivos del usuario.
Otro escenario es que las páginas de ayuda y documentación son páginas que necesitan más atención al proporcionar los detalles. Incluso si el programa se puede usar sin papeleo, se puede requerir soporte y documentos.
Cualquier información de este tipo debe ser:
- Fácil de buscar
- Ser específico
- Centrarse en la tarea del usuario
- Enumerar como pasos concretos a realizar
Sugerencia: cualquier información que le des a los usuarios recuerda " Nunca andes por las ramas "
Para obtener un buen ejemplo del contenido, solo eche un vistazo a los foros de soporte de la página de Gmail de Google. Toda la información está bien presentada. Un usuario nunca puede perderse o frustrarse dentro de esta página y obtiene lo que quiere.
6. Rendimiento: rápido y ligero
El rendimiento del sitio web debe ser suave como la mantequilla, no lento como un perezoso (es un ejemplo terrible).Si el rendimiento del sitio web es demasiado lento, creará un impacto negativo en la compañía del sitio web.
Y los usos podrían dejar de usar el sitio web. Piensa y actúa sabiamente.
Existen muchas herramientas de prueba de sitios web, solo elija una y pruebe la velocidad de su sitio web.
Uno de los más populares es Pingdom Tools .Entonces, el primer paso es en lugar de actualizar su sitio web sin saber dónde está el problema. Pruebe una de esas herramientas y llegarán a dónde está el problema, a qué página, sección o lo que sea, el rendimiento es lento.
El correcto ese problema específico.
Las cosas pueden tener más sentido más adelante. A continuación se detallan algunos consejos para aumentar el rendimiento de su sitio web:
- Comprime tus archivos
- Optimiza tus imágenes
- Evite usar muchas imágenes: use texto en su lugar
- Reduce las solicitudes HTTP
Probé el sitio web de Gmail con las herramientas Pingdom, los resultados fueron fascinantes. Obviamente, es producto de Google, los resultados finales serían sorprendentes.
7. Comentarios sobre el progreso
La retroalimentación es una respuesta sobre la tarea, proceso o evento después de su finalización o durante su etapa de finalización.Sepa lo que está sucediendo dentro del sistema o sitio web en este caso.
Considere que está utilizando un sitio web para realizar algunas transacciones en línea, hay un momento en el que no sabe qué sucede en el sistema.
De repente, recibe un mensaje de transacción fallida.
En este punto no tienes idea. Hubiera sido mejor si el sitio web proporciona comentarios apropiados sobre el fallo de la transacción o el error detrás de él, como problemas de conexión a Internet, límite de dinero en su banco o incluso un pequeño problema técnico del sitio web.
De hecho, la retroalimentación sobre el progreso es un aspecto importante del diseño, también es la primera heurística de usabilidad del diseño de la interfaz de usuario .
Supongamos que cuando subo una imagen como archivo adjunto en Gmail, con la ayuda de la barra de progreso puedo saber que la imagen se está cargando. Estas cosas simples hacen que su sitio web sea más funcional. Algunos consejos para proporcionar comentarios sobre el progreso son los siguientes:
Use carga o porcentajes apropiados para mostrar sobre el progreso
Si un artículo o un producto no está disponible para la compra, comuníqueselo al usuario.
Proporcione una pantalla de éxito o de fallo , de modo que los usuarios sepan que están en el camino correcto.
8. Evite "Alertas / Diálogos" cuando no sea necesario
No moleste al usuario proporcionando diálogos innecesarios cada vez que haga algo en el sitio web. Por ejemplo, piense que el usuario está intentando hacer un pago en línea. Proporcione un cuadro de diálogo o alerta solo cuando la transacción sea exitosa o fallida.No proporcione alertas / diálogos cada vez que ingresen los detalles de su tarjeta, como el nombre, fecha de nacimiento o el número PIN. Además, a veces sería bueno pedirle al usuario que reciba las notificaciones antes de mostrarlas sin su permiso.
No hagas esto
Algunas de las cosas que debe seguir son:
- Si proporciona los diálogos o alertas, sea específico , no lo llene con información irrelevante.
- Eliminar todos los cuadros de diálogo / alertas cuando sea innecesario
- No solo moleste al usuario abriendo los cuadros de diálogo en el sitio web
- No coloque al usuario dentro del ciclo de los diálogos.
9. Intenta mitigar los errores 404 o 500.
Si ya ha diseñado un sitio web o está a punto de diseñarlo, intente desarrollarlo completamente con todas las páginas, características y funcionalidades: los sitios web no deben tener enlaces e imágenes rotas, funcionalidades incompletas y mucho más.Especialmente el sitio no debe tener ningún error 404 o 500 .
Si tiene enlaces rotos por error, intente diseñar una buena página de error 404.
Un usuario debe estar contento aunque vea una página de error 404, pero este caso es excepcional. Obviamente, cuando su sitio web es casi perfecto, no tiene que preocuparse por ello.
Por ejemplo, he estado usando el sitio web de Google durante bastante tiempo, nunca me he enfrentado a este problema.
Debe diseñar la página de tal manera que, aunque el usuario llegue a una página de error 404, debe volver a las otras páginas o incluso salir del sitio web. Dales opciones para realizar otras tareas.
Los anteriores son los Principios generales para un buen diseño de sitios web.
Con la ayuda de estos principios, puede desarrollar fácilmente sitios web fáciles de usar y funcionales.
Sin estos fundamentos, sin duda sería difícil desarrollar un sitio web bueno e intuitivo.
Solo tenga en cuenta que un sitio web con buena facilidad de uso y facilidad de uso siempre tendrá éxito en el mundo real.
Gracias a todos por pasar su tiempo leyendo mi artículo. Espero que lo hayan disfrutado. Me alegra que hayas aprendido una o dos cosas
