Identidicar y mejora los puntos débiles de tu sitio web

Diseño web

Aumenta tus ventas con una página funcional y atractiva

El diseño web consiste en un conjunto de acciones que permiten planear y desarrollar un sitio web con la finalidad de cumplir objetivos: posicionar una marca, aumentar las ventas, publicar datos institucionales, divulgar de información, entre otros.

En este artículo se podrá conocer más acerca de la historia del desarrollo y diseño de páginas web, la evolución de la web, las primeras redes sociales existentes, nociones de experiencia de usuario y recomendaciones para diseñar una página web exitosa.

Una página web es la sonrisa de tu empresa en el mundo digital

Los seres humanos siempre se han caracterizado por tener memoria a corto plazo. Existe una creencia en la sociedad actual que Internet y las páginas web han existido desde siempre y se desconocen las realidades de evolución frente a velocidades de navegación, visualización de los sitios y la experiencia de los usuarios al navegar en La Red.

Lo anterior está muy distante de la realidad. Internet ha evolucionado a lo largo de los años y con ello el diseño web y la forma expositiva de las páginas también. Para nadie es un secreto que Internet avanza a pasos acelerados y constantemente se ven nuevas tendencias, surgimiento de formatos o nuevos elementos narrativos que hacen que La Red sea lo que es hoy en día.

Para comprender la dinámica del diseño web actual es necesario comprender un poco de historia del desarrollo y diseño web.

Historia del diseño y desarrollo de las páginas web

El primer navegador existente para La Red fue lanzado por Timothy “Tim” John Berners-Lee, quien facilitó la primera conexión entre un cliente/usuario y un servidor/página usando el protocolo HTTP en noviembre de 1989. Este navegador fue llamado inicialmente WorldWideWeb, posteriormente renombrado Nexus en su lanzamiento oficial a finales del año 1990.

Paradójicamente, sólo hasta 1991 se lanza la primera página web bautizada TheProject.html, publicada también por Tim Berners-Lee. Su contenido se basaba en orientaciones hacia la creación de páginas web, detalles técnicos, recomendaciones para la implementación de hipertextos e información de cómo usar Nexus y buscar en la web. Su diseño era plano, pues eran los primeros pasos y apenas se empezaba a explorar las bondades que traería consigo internet.

Posteriormente, en la Universidad de California lanzan, ViolaWWW, el primer navegador gráfico de la historia. No tuvo mucha aceptación por su dificultad de uso pero fue el precursor de Mosaic, segundo navegador gráfico y primero de uso comercial lanzado en enero de 1993.

Mosaic fue importante en la historia de internet, porque fue el primer buscador compatible con cualquier sistema operativo, y aunque inicialmente funcionaba con Unix, se liberó en abril de 1993 para los demás sistemas. Este navegador fue la base de Mozilla, pero más adelante fue comprado por Microsoft y renombrado como Internet Explorer. Aquí es donde empieza la historia contemporánea.

Para esta época, los sitios web se componían principalmente de texto, los colores eran supremamente limitados y el uso de tipografías, animaciones o vídeo no existían, ya que se utilizaba únicamente el lenguaje de hipertexto HTML, que recién había sido creado. En resumen, los primeros diseños de sitios web se pensaron para la transferencia de datos.

Conoce por qué es importante tener un sitio web rápido

Posteriormente, hacia 1994 el hipertexto HTML se diversifica hacia lenguajes más complejos que permitieron un avance significativo en el diseño web: el HTML 2. El HTML 2 introdujo elementos nuevos como el marcado de datos como body, title y head. Adicional, ingresa el dinamismo que le da el CSS, la simpleza del .gif, el sensacionalismo del Action Script o Flash, los menús y listados por medio de iconos, imágenes de fondo, botones y banners.

Todo esto hizo, a diferencia de lo que todos puedan creer, que las páginas web perdieran diseño funcional por la cantidad de elementos nuevos que se agregaron, pues los diseñadores y desarrolladores web no eran mesurados con la cantidad de nuevas posibilidades que permitía el HTML 2, pasándose de creativos.

Este proceso afectó la usabilidad de los sitios web porque el minimalismo o simpleza de los contenidos se perdió, aumentando el tiempo de carga de las páginas considerablemente. Esto llevó a los primeros y fuertes debates entre seguir con la nueva dinámica de diseños web o volver a las raíces del hipertexto básico. Surgiendo el User Experience -UX- o experiencia de usuario, llevando a los desarrolladores a volcar su interés hacia la adecuada estructura y usabilidad de las páginas web.

La solución llega hacia el año 1995 cuando Håkon Wium Lie ingresa al mercado las Hojas de Estilo, conocidas en diseño web como CSS. Es el gran salto para los diseñadores y desarrolladores web que empiezan a usar nuevas formas de organizar y visualizar los contenidos, pues las Hojas de Estilo permitirían trabajar el contenido y el diseño por separado. Esto trajo consigo una creatividad soportada en tecnología, reduciendo los tiempos de carga y simplificando el mantenimiento de los portales web.

Entre 1995 y 1997 lanzan HTML 3 y HTML 4 sin mucha compatibilidad con HTML 2, por lo que los fabricantes de navegadores web evitaron desarrollar soportes a estos lenguajes. Lo rescatable del HTML 3 y el HTML 4 fueron la facilidad para crear tablas, que los textos se pudieran sobreponer a las imágenes y la creación de formularios web.

A toda esta etapa desde 1990 hasta 1997 se le conoce como la Web 1.0, donde el diseño web tenía una relación de nula retroalimentación con los usuarios. Los portales web tenían una exposición de contenido que dependía única y exclusivamente del webmaster o administrador de la web. Los usuarios tenían una única opción de interacción: la lectura.

En 1998, ya el auge de páginas web empezaba a aumentar, a tal punto que se lanza el motor de búsqueda más poderoso que hay a la fecha: Google. Google siempre se ha caracterizado por su diseño minimalista, casi similar a los usados en la época de 1990. Su funcionamiento era claro: priorizar encontrar páginas web por su texto. Más adelante ingresarían resultados de imágenes y videos.

Pero no fue sino hasta mediados de la década del 2000 que a partir del ingreso del CSS 2.1, que se empezaron a ver grandes cambios en el diseño web. El CSS 2.1 permitió agregar módulos como fondos, sombras y colores, consultas de medios y diseños multicolumna. También facilitó la creación y mantenimiento de los sitios web. Pero el salto más grande fue hacia la accesibilidad, pues permitió hojas de estilo auditivas: procesamiento sonoro de un documento, comúnmente usado para las comunidades de ciegos.

Conoce la importancia de html para hacer un website

En esta época empezaron a surgir las nueva generación de redes sociales: Facebook, Twitter y Linkedin. Estas redes se valían de los avances en los lenguajes de programación de las hojas de estilo existentes a la época: Javascript, PHP, XML o ASP, conociéndose esta etapa como la Web 2.0. Es de aclarar que estas no fueron las primeras redes sociales, dado que se tendría que recordar plataformas como

TheWELL o The Whole Earth Lectronic Link: Conocida como el pozo por ser una plataforma para intercambiar textos académicos. Fue tal vez la primer red social de la época. Surgió en 1989 y no trabajaba con protocolo HTTP. Ejemplo que el diseño y desarrollo web no dependen de tendencias.

Friendster: Estuvo en la cima de las redes sociales. Tenía la mayor cantidad de usuarios conectados, pero no tenía una buena gestión de bases de datos. Tenía una buena interfaz gráfica pero tuvo problemas porque el tiempo de carga del sitio llegó a superar los 5 minutos. Posteriormente lo compraría MTV y se convertiría en MySpace. Ejemplo que el diseño debe conversar con el desarrollo.

Sixdegrees: A diferencia de Friendster, esta tenía un tiempo de carga de solo segundos por su gran desarollo (y patentado) sistema de conexión entre bases de datos de usuarios. A pesar de esto, no tuvo buena acogida y tuvo que venderse para poder salvar a los inversionistas. Esta patente de desarrollo fue adquirida por Reid Hoffman que más adelante lanzaría Linkedin. Ejemplo que el diseño web debe conversar con el desarrollo.

Lunarstorm: Red social sueca que luego abrió operaciones en Inglaterra. Llegó a tener 1,5 millones de miembros en 2007, pero más del 50% de sus usuarios eran menores de edad que tenían entre 12 y 17 años. A partir de la regulación parental para la navegación en internet, el sitio cerró en 2010 por falta de actividad. Ejemplo que el diseño y desarrollo web deben conversar con las dinámicas sociales.

La tendencia del diseño web, como se conoce actualmente, llegó hacia finales del año 2011 cuando se lanza CSS 3 y permite diseños que se adapten a las medidas de dispositivos móviles.

Finalmente, HTML 5 llegó en octubre de 2014 con bondades que facilitaron todo lo que se conoce como la web semántica o Web 3.0.

• Se incorporan etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command.

• Permitió generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido.

• Trajo consigo mejoras en los formularios.

• Aportó nuevos tipos de datos (eMail, number, url, datetime) y facilidades para validar el contenido sin Javascript.

• Insertó el Drag & Drop para arrastrar objetos como imágenes.

• Añade etiquetas para manejar la web: header, footer, article, nav, time, link rel=‘’

Todas estas etiquetas permitieron describir cuál es el significado del contenido, como su importancia, su finalidad y las relaciones que existen. Todo esto no trajo un especial impacto para la visualización de contenido, pero sí para la correcta orientación a los motores de búsqueda, propiciando una buena indexación mediante la interpretación de las metas y palabras claves de la página.

Ahora bien, a continuación se hará mayor énfasis en el desarrollo y diseño web.

Desarrollo y diseño web

El diseño web consiste entonces, en un conjunto de acciones que permiten planear y desarrollar un sitio web con la finalidad de cumplir objetivos: posicionar una marca, aumentar las ventas, publicar información institucional, divulgar de información, entre otros.

Para ello, es necesario analizar y evaluar diferentes variables que inciden en el cumplimiento de estos objetivos: públicos de interés, niveles de búsqueda de palabras claves, arquitectura de información, posicionamiento de la web de la competencia o productos sustitutos, por mencionar algunos.

Se estima que más de 4 mil millones de personas usan diariamente internet, ¿Cuántos clientes se logran captar?

Google recibe más de 63 mil búsquedas por segundo al día. ¿Cuántas de esas llegan al sitio web?

Con una adecuada planeación, gestión de contenidos y desarrollo y diseño web, estas preguntas pueden responderse exitosamente. A partir de atraer usuarios, estos deben sentirse cómodos en la página web, por lo que debe ser navegable, usable e interactiva.

Navegabilidad de las páginas web

Un sitio web debe ser fácil de recorrer y a su vez intuitivo para que la navegación se haga de forma natural. La navegación debe ser rápida y simple para que favorezca la experiencia de usuario. Así, encontrarán la información que necesiten o se atraerán hacia la acción que se quiere hagan, como una venta o compra de producto.

En la medida en que los usuarios se sientan cómodos mientras consultan entre las publicaciones de la página web, relacionarán el portal como fuente ideal para informarse del tema. Esto representa grandes posibilidades de que vuelvan a ingresar para una próxima consulta, lo que equivale a tráfico asegurado y persistente. La prioridad es incrementar el tráfico web.

Usabilidad e interactividad

Es necesario procurar que el sitio web responda a todas las demandas del visitante, creando un feedback consistente entre el usuario y la plataforma. Para los usuarios no hay nada más desgastante que los enlaces no funcionen, que se deban dar más clics de los necesarios, que el tiempo de carga del sitio sea lento o que el contenido sea engañoso y lo haga perder tiempo.

La experiencia de usuario siempre se debe priorizar para que sea eficiente y dinámica a las realidades de los visitantes.

Las páginas web deben ser intuitivas, deben responder de manera rápida, deben ser fáciles de navegar y deben demostrar a primera vista su objetivo e identidad. Todo esto permitirá que los usuarios naveguen de forma ágil, permanezcan más tiempo en el portal, vuelvan al sitio web y que sean un posible cliente o un usuario fidelizado.

Según HostingGroup, el 40% de los usuarios abandonan un sitio web que tarde más de 3 segundos en abrir.

Según Sistrix, sitios que reducen su velocidad 1 segundo incrementan hasta 27% la conversión de usuarios a clientes.

El que se elija un servicio de diseño web profesional permitirá ir más allá que simplemente crear un sitio estéticamente atractivo. Existe una importancia en la investigación de búsquedas y palabras claves, la definición de objetivos por públicos específicos, la optimización de parámetros a la medida de cada proyecto web con base en las oportunidades que brinda el mercado y en la fidelización de usuarios con ambientes de confianza fundamentado en navegabilidad, interactividad y usabilidad.

Si tienes una tienda virtual, necesitas mejorarla al máximo

¿Cómo se diseña una página?

Diseñar una página web implica varias fases:

Arquitectura
Esquematización
Construcción
Evaluación

Arquitectura del portal

Una vez estudiadas las oportunidades de mercado y definidos los objetivos para el portal, se comienza la fase de estudio y jerarquización del contenido que mostrará el proyecto web.

Es importante asegurar que la información se organice de tal manera que sea entendible y esté claramente identificada. Por esto, en la fase de arquitectura es importante que los usuarios del sitio web entiendan la presentación de los diferentes tipos de productos o servicios que vas a ofertar.

Es un punto básico para cumplir con una página integralmente navegable, interactiva, optimizada y usable. De ahí que sea un proceso continuo y que acompaña todo el desarrollo de la web.

Este punto es clave porque permitirá una experiencia de usuario eficiente con la interface o representación visual de todos los elementos del sitio.

Armar la arquitectura de una web requiere de tiempo pues asienta las bases para los siguientes pasos de diseño web.

Esquematización o construcción de wireframes

La estructura conceptual lograda en la arquitectura podrá ser visible a través de la esquematización, también llamada wireframe.

El wireframe toma en cuenta la información y las diversas funciones del proyecto web, a fin de que trabajen en conjunto. Su objetivo es velar por la funcionalidad y el comportamiento del sitio web y proponerlo en una guía visual.

Esta guía visual plantea la usabilidad, prioriza el logro de la experiencia del usuario y hace visible el flujo de navegación. A su vez, la experiencia de usuario representa el nivel de satisfacción que obtiene el usuario al interactuar con la página web. Finalmente, el flujo estipula cómo un usuario puede explorar las diferentes secciones del sitio.

Construcción de contenidos

Ya con la arquitectura del sitio y los wireframes solo resta ingresar el contenido. No importa si los contenidos son cortos o largos, lo ideal es que sean amenos a la lectura y que se acompañen de un diseño que sea amigable al usuario.

En esta etapa de construcción de contenidos, también es importante tener en cuenta las palabras claves que buscan los usuarios en internet y que se mueven alrededor del negocio, esto permite desarrollar los contenidos más susceptibles a ser encontrados.

Para finalizar, se deben diseñar llamados a la acción -CTA- llamativos que incentiven a conocer más del negocio, la marca, los productos e inclusive una venta.

Evaluación del sitio web

A medida que van avanzando los tres puntos anteriores es necesario ir evaluando el sitio web. A este proceso se le conoce como testear.

Aquí, se puede ir observando el funcionamiento del sitio web: velocidad de carga, facilidad para encontrar la información, que los llamados a la acción sean los correctos, entre otros.

Para ese proceso se puede valer de herramientas especializadas de medición para comprobar que los objetivos y KPIs se cumplan.

¿Posee una estructura rápida y fácil de navegar?

¿Tiene imágenes suficientemente optimizadas?

¿Responde a las intenciones de búsqueda?

Una vez el portal esté en línea, se le debe hacer seguimiento permanente por medio de analítica web, es decir, analizar todos los datos del sitio: tiempo de rebote, cantidad de visitas, origen de las visitas, permanencia en el tiempo, palabras claves, entre otros.

Juan David Uribe

Juan Uribe
Estratega Digital

Compartir:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

WhatsApp Conversa con nosotros