Empezar con un sitio web puede ser un desafío muy fuerte.
Hay expectativas altas y muchas partes móviles en este proyecto.
Personas, tecnología, puntos de vista, la marca, entre varias otras.
En otras palabras, muchas cosas pueden salir mal.
Es por eso que te recomendamos estos 10 puntos para iniciar con tu sitio web.
«No traigas un cuchillo a una pelea de diseño»
1. Establece las expectativas correctas.
Un proyecto de diseño web no puede ser exitoso hasta que establezcamos lo que significa la palabra «éxito» en este contexto específico.
Dependiendo de tu experiencia como dueño de un sitio web, tu facilidad para articular las necesidades de tu sitio, puede variar.
Esto puede ser catastrófico para la relación con tu equipo de diseño, nadie quiere que al final escribas ese terrible mail con el encabezado «Esto no es lo que yo esperaba»
Es por eso que es importante asentar las expectativas al inicio de la comunicación con tu diseñador o equipo.
Aquí cinco preguntas que puedes hacerte a ti mismo para arrancar con el pie derecho
¿Cuál es el valor del sitio web para ti y tu negocio?
¿Qué esperarías que alcanzara el sitio web?
¿Cómo quieres medir el éxito del sitio en internet?
¿Es el sitio web una parte esencial de tu negocio? ¿O es solo un lugar para proveer información sobre tu organización, una extensión de la marca (micrositio) o un proyecto secundario?
¿Quién es tu público meta? ¿Quién va a visitar el sitio?
Una vez que tengas resueltas estas respuestas, podrás esperar que tu diseñador te proporcione una propuesta realista, además claro de un contrato. De este modo, limitas el número de errores que puedan cometerse o sorpresas desagradables a posteriori.
2.- Define una meta.
Este punto se relaciona directamente con el anterior. Es sencillo, un sitio sin una única meta clara, no tiene oportunidad de ser exitoso.
La meta debería ser definida entre tu organización y el equipo o personas que desarrollarán el sitio web. Esta debe ser claramente definida, medible y alcanzable.
Aquí un ejemplo de una buena meta para un sitio web.
Una buena meta para un sitio web, debería tener estos 3 elementos
Claramente definida. Ej. «Necesita atraer ventas»
Medible. Ej. «Necesita atraer al menos «X» cantidad de ventas al mes»
Alcanzable. NO «Necesita atraer chorrocientos mil ventas al mes»
Y lo más importante, un sitio web debería sólo tener una meta principal.
3. Piensa en tu público primero y resuelve un problema específico.
Metas, son lo que los clientes quieren para su sitio web. Soluciones es lo que la audiencia quiere para ese sitio.
«Dejemos que la audiencia sepa qué hay en nuestro sitio para ellos»
Por ejemplo, el Dollar Shave Club.
«Luce, siéntete y rasúrate como un millón de dólares»
Sin pagar por ello. Prueba El Club hoy
Empezar.
El principal propósito de este sitio de comercio electrónico es entregar navajas de afeitar y accesorios a las personas cada mes. «The Dollar Shave Club´s» Resuelve el problema de tener que comprar estos artículos en distintos establecimientos.
El sitio web y su propósito son claros. Con el fin de convertir visitantes en consumidores, los diseñadores crean una experiencia de usuario y navegación enfocados únicamente en la única cosa que la audiencia quiere conocer, cuando considera comprar un servicio de suscripción mensual.
4. Dale prioridad al contenido
Ninguna cantidad de belleza puede reemplazar una buena presentación del contenido.
El contenido es rey. Siempre deberías de pensar en este, porque es el que lleva al «engagement» -es decir a crear un vínculo con tu cliente- y dicha relación genera confianza, la cual, siempre produce mutuos beneficios para ti y tu cliente.
Como dueño de un sitio web, lo peor que puedes hacer es poner primero belleza antes que función. O como John Maeda dijo «Rociar con diseño»
Siempre es necesario comenzar con el contenido que deseas mostrar en el sitio, y solo entonces, piense en cómo el diseño puede ayudar a hacer ese contenido más visible y resonar mejor con las audiencias.
Por ejemplo, si está construyendo un sitio de comercio electrónico, debería pensar como los productos pueden sobresalir, en lugar de diluirse con el resto del diseño. Aquí hay un ejemplo de «Tessemae´s»
Nota como los productos son los elementos más visibles en la página. No el encabezado o el menú u otro elemento.
5.- Respeta los estándares Web.
Los estándares son geniales. Aprende a amarlos. No seas hostil.
Hay una principal razón por la que los estándares son geniales: las personas -tu audiencia- está acostumbrada a ellos. No hagas que tu usuario aprenda un nuevo lenguaje de diseño o aprenda de nuevo a navegar por un sitio web.
Haz la tarea fácil para tu usuario al implementar estándares de diseño web, que tu usuario ha aprendido a usar y entender, incluso inconscientemente.
Por ejemplo, en cada sitio de comercio electrónico, la canasta o carrito de compras se encuentra en la esquina superior derecha. No se hace así porque sea la solución más bonita. Se diseña de este modo porque las personas esperan encontrar su carrito de compras ahí.
Aquí hay un ejemplo de Wrightwood Furniture
Carrito en la esquina superior derecha
Abraza otros estándares web tales como:
Logotipo arriba a la izquierda (Un estudio por Norman Nielsen señala que los usuarios tendrán 89% más de probabilidad de recordar logotipos desplegados en la parte superior izquierda)
Branding y apariencia consistente en todo el sitio: las páginas independientes no deberían seguir distintos patrones de diseño -algo que ocurre a menudo con tiendas de comercio electrónico-
Datos de contacto en la parte superior o en el centro, (como se muestra en la captura de pantalla arriba)
Navegación principal, atravesando toda la parte superior y evitar menús confusos (los cuales son molestos para los usuarios, como otro estudio de Norman Nielsen muestra)
Proposición de valor y llamados a la acción, lo más arriba posible en el contenido de la página o “above the fold” como se le conoce en el medio (hacer tus llamados a la acción visibles, garantiza mejores conversiones)
Función de búsqueda en el cabezal del sitio o «header»
Opción para ingresar o «loguearse» en el fondo o «footer»
6. Haz la navegación simple
Si las personas no pueden navegar fácilmente del punto “A” al punto “B”, el sitio web, no podrá alcanzar su meta.
Por lo tanto, tu diseño de navegación debería requerir solo la cantidad mínima de información necesaria para llevar al usuario del punto «A» al «B» rápidamente.
Primero, intenta describir los pasos más importantes a lo largo del recorrido del usuario a través del sitio web. (User´s Journey)
Asegúrate de que tu navegación los ayude con ese viaje en lugar de dificultar las cosas.
Piense en cómo puedes apoyar al usuario a hacer lo que ya quiere hacer, en lugar de obligarlo a actuar a tu manera.
Utiliza las mejores prácticas de navegación del sitio web y conoce los patrones básicos de navegación móvil, para una experiencia de usuario óptima.
Aquí hay un buen ejemplo de Ugmonk.com. Observa cómo la navegación es muy mínima y solo le ofrece un puñado de opciones principales. Al mismo tiempo, deja muy en claro en qué página se está navegando actualmente.
La navegación es muy sencilla y ofrece sólo las opciones indispensables
7.- Enfócate en lo móvil
Los dispositivos móviles son hacia dónde todo se está moviendo en este momento: desde navegar por la web y consumir otros medios, hasta participar en las redes sociales y las compras.
Hoy, más personas se conectan a Internet en dispositivos móviles, que en computadoras de escritorio.
Por este motivo, debes asegurarte de que el diseño de tu sitio web esté optimizado para dispositivos móviles, lo que significa que todo sea completamente operativo en el dispositivo móvil. «Completamente operativo», significa que todas las características, incluido el carrito de compras, deben funcionar sin problemas para una gran experiencia de usuario.
A continuación, se incluyen dos ejemplos de sitios web, con una optimización móvil muy buena en términos de diseño y la facilidad de acceso a todos los elementos de la interfaz de usuario:
Todos los elementos son fácilmente accesibles por el usuario
8. No ignores la tipografía
Cuando estás bajo presión y realmente quieres tener pronto un sitio para poder «salir al aire”, la tipografía puede ser una ocurrencia tardía …
– Simplemente agrega algunas fuentes al diseño que, de otro modo, ya está «terminado». Suele ser la conversación con el diseñador.
Por favor no tengas esta conversación.
Hoy en día, muchos proyectos de diseño web de calidad dependen en gran medida de la tipografía, básicamente esta no es solo un elemento decorativo o adicional al proyecto, sino una herramienta de diseño en sí misma.
Otro tema importante de la buena tipografía -y esto es algo que se relaciona con el punto anterior- es que debe funcionar en todos los dispositivos.
Aquí hay un ejemplo de Bittermilk (visto en el escritorio):
Y dispositivos móviles
Nota como la tipografía juega un papel importante en la apariencia y facilidad de uso del sitio
Por favor, nota cómo la elección de las fuentes, los colores, el espaciado, etc. desempeña un papel en la apariencia general de toda la página, y funciona bien tanto en una computadora de escritorio como en un dispositivo móvil.
9. Entregables
Es necesario encontrar un balance entre colaborar con tu diseñador o equipo de trabajo y desatender el proyecto.
Si tuviste una primera junta y después no has vuelto a saber del sitio web y esperas que al finalizar «X» cantidad de semanas, el sitio será útil y atractivo para el público, es muy probable que te veas en la necesidad de hacer re trabajo.
En su lugar, divide el proyecto en dos o tres partes principales, según la complejidad de este, y revisa los entregables de acuerdo con el cronograma establecido.
Cada vez, proporciona retroalimentación a tus diseñadores o equipo y compártelo con las personas importantes para la meta del sitio: usuarios principalmente, así como el dueño del proyecto y otros actores, realmente vitales como el departamento legal y marketing.
Recuerda que es mejor que, por ejemplo, revises el contenido con anticipación antes de pasar al diseño y programación, así ahorrarás costos y tiempo.
10.- Abraza las redes sociales
Al igual que los dispositivos móviles, las redes sociales son un elemento omnipresente en el paisaje web moderno. No lo ignores.
Las redes sociales están donde están las personas, usa esto a tu favor.
Se ha informado que alrededor de dos mil millones de personas visitan Facebook todos los meses. Por esa razón, es absolutamente necesario construir una integración de redes sociales en tu sitio web.
Al hacerlo, es más probable que las personas compartan tu contenido o productos y así, ayudarán a otros a encontrarte, lo que dirigirá tráfico a tu sitio web.
Aquí hay un buen ejemplo de The Colossal Shop (fíjate en los pequeños botones de redes sociales que se encuentran debajo del precio del artículo):
Por mucho que The Colossal Shop quisiera que las personas permanezcan en sus páginas indefinidamente, saben que no es una posibilidad real, por lo que proporcionan herramientas útiles para compartir la información sobre sus productos.
¿Qué sigue?
Si bien solo hemos arañado la superficie de lo que se necesita para diseñar un sitio web exitoso, sigue estos mandamientos de diseño web para que puedas comenzar con tu próximo proyecto.
Recuerda evitar errores comunes, apóyate en tu diseñador web para crear una experiencia de usuario ganadora y un sitio que inspire confianza.
Creamos este artículo a partir de la publicación de Adobe en su blog oficial.
Pueden consultar el artículo original aquí
