Cómo hacer la arquitectura de una página web

Cuando empecé a escribir sobre arquitectura de sitios web, me vino a la mente la idea de un proyecto de construcción de un rascacielos. Pensé en un enorme rascacielos con restaurantes, tiendas, oficinas, gimnasios y espacios residenciales.

Nadie empezaría nunca el proceso de construcción de un rascacielos hasta que todo estuviera debidamente planificado y trazado.

Soy ingeniero de telecomunicaciones no arquitecto ni contratista de obras, pero aún así puedo ver los innumerables requisitos que hay que trazar antes de proceder a la construcción.

Detalles de planificación de las habitaciones, búsqueda de buenos materiales de construcción, gestión de los distintos equipos que intervienen en la construcción del edificio, permisos de zonificación, asignación de fondos, planificación de catástrofes naturales en caso de terremoto, y la lista sigue.

Todo el mundo considera el diseño como un componente importante de las cosas, ya sea el diseño de un rascacielos o de los neumáticos de tu coche. El diseño no sólo aporta comodidad, innovación y confort a la vida de las personas, sino que en muchos casos, como los rascacielos y los neumáticos de tu coche, la vida y la seguridad de las personas dependen de él.

Llevo años diseñando estrategias y realizando investigaciones para proyectos de sitios web muy grandes y ambiciosos. El diseño conceptual es la base de una arquitectura sólida de un sitio web. Al igual que en la construcción de un rascacielos, necesitas tener un proyecto sólido para construir sitios web a gran escala.

En este artículo, compartiré el proceso de nuestra empresa para la arquitectura de sitios web de gran tamaño. No te olvides de suscribirte a nuestro boletín semanal para recibir contenido exclusivo de desarrollo web.

El arquitecto del sitio web

Averigüemos primero de quién es la función de esta cosa llamada arquitectura de sitios web. Para mí, este trabajo lo realiza un arquitecto de sitios web.

Evito deliberadamente mencionar aquí a los diseñadores de UI/UX y a los chicos de IA porque la arquitectura de sitios web va más allá, abarca la interfaz de usuario, la experiencia de usuario y la arquitectura de la información del sitio.

El arquitecto del sitio web debe tener una sólida comprensión de la usabilidad, un conocimiento profundo de las herramientas de desarrollo web, las tecnologías de marketing online y todo lo demás que interviene en la construcción y el mantenimiento de un sitio web.

Al igual que un arquitecto de un rascacielos o de una casa residencial, debe conocer bien las herramientas, materiales y procesos de construcción para planificar el producto con eficiencia y eficacia. Esta persona, nuestro arquitecto de sitios web, debe poseer un fuerte pensamiento lógico, tener una mente analítica, ser inteligente con los aspectos comerciales de los sitios web y estar atento a los detalles. Por supuesto, para garantizar un producto de calidad, el arquitecto debe consultar a otros especialistas como diseñadores y desarrolladores.

Como ves, en mi opinión, el arquitecto web ideal debe ser un especialista amplio, porque, como verás a continuación, no hay forma de evitarlo.

El proceso de arquitectura de sitios web

Te daré sólo una visión general del proceso de arquitectura de sitios web de mi empresa. El proceso se divide en estas 11 etapas:

• Resumen del proyecto
• Definición del objetivo del sitio web
• Definición del público objetivo
• Análisis de la competencia
• Objetivo-problema-solución del usuario
• Mapa de escenarios
• Mapa mental
• Arquitectura de la información
• Creación de prototipos
• Pruebas de usabilidad de prototipos
• Especificación del proyecto

Como puedes ver, todas estas etapas están relacionadas entre sí, y las hemos organizado de forma secuencial. Hablemos de cada etapa.

Etapa 1: Resumen del proyecto

Recopilar los datos necesarios del cliente y de tu equipo suele llevar 2 días. Aunque debes ser lo más minucioso posible, ten en cuenta también que siempre hay margen para la elaboración y la recopilación de datos adicionales en las otras etapas del proceso de arquitectura del sitio web, así que no te despistes demasiado si no te han transmitido algunos datos.

Determina los objetivos y los resultados esperados: ¿Cuáles son los objetivos del cliente y los resultados que espera de este proyecto, y cómo se imagina el resultado final del mismo?

Debes tener claros los criterios de evaluación de estos objetivos y resultados esperados para asegurarte de que ambos estáis en la misma página. Tienes que ser lo más específico posible, los objetivos y los resultados deben ser cuantificables y mensurables.

Lluvia de ideas con el cliente: Pide al cliente que te cuente todo lo que tiene en mente. Escucha lo que dice con paciencia y detenimiento.

Toma notas: Céntrate en lo que dice y resiste el impulso de intervenir. Tus ideas y comentarios pueden esperar. Si al cliente le apasionan sus ideas para el proyecto, puede pasarse horas hablando de ello, lo cual es completamente normal. Cuando el cliente está realmente metido en el proyecto, es una gran ayuda y un placer trabajar con él.

Resumen de ideas del cliente: Al final de la sesión de lluvia de ideas, debes pedir al cliente que lo resuma todo: si consigue reducir su idea a una frase, entonces la idea está clara. Si no, necesitará mayor claridad y enfoque.

Determina el público objetivo: ¿Quién es el público objetivo del cliente?

¿Quién va a utilizar este sitio y cómo puede beneficiarse de él? El cliente debe tener una idea clara de quién es el usuario final para poder producir un sitio web para él. De lo contrario, es como jugar a los dardos con los ojos cerrados: Sabes dónde está la diana, pero será casi imposible acertar.

También puedes empezar a hablar de lo que el cliente ya sabe sobre su público objetivo: sexo, edad, ubicación, etc.

Determinar los competidores: ¿Quiénes son los competidores directos e indirectos del sitio web? El cliente y el arquitecto del sitio web deben conocer el entorno competitivo existente. Siempre hay competidores. Incluso si la idea del sitio web es completamente única, hay al menos competidores indirectos.

Reúnete con los que toman las decisiones: Reúnete con las personas que toman las decisiones. Discute los plazos, el límite presupuestario, la disponibilidad de recursos, etc. Las cuestiones organizativas, importan.

Resultados y entregables: Algunas de tus otras preguntas tendrán que esperar a ser respondidas más adelante en el proceso de arquitectura del sitio web.

Lo que obtengas en la fase de información sobre el proyecto serán datos básicos y sólo para tener una idea general de lo que tu cliente ya sabe sobre su proyecto. Es crucial comprender las necesidades y expectativas del cliente en esta fase inicial, y elegir la dirección correcta para el proyecto desde el principio.

El precio que pagas por no dedicar suficiente tiempo a esta primera etapa, sencilla pero crítica, crece exponencialmente a medida que avanza el proceso de arquitectura web y la producción del sitio web.

El resultado de la fase de briefing es un documento escrito con información detallada que te proporcionan el cliente y los responsables de la toma de decisiones. Este documento debe ser aprobado y verificado por el cliente.

Fase 2: Definición de los objetivos del sitio web

Un sitio web necesita objetivos. Los objetivos del cliente pueden ser estos: monetizar el sitio, aumentar la cuota de mercado offline mediante marketing online, captar mejor a los clientes online, etc. Los objetivos definen la dirección de todo el proceso de producción del sitio web.

Además de determinar los objetivos del sitio web, también tienes que definir los criterios de éxito en función del cliente. Una buena forma de establecer objetivos es utilizar los criterios SMART. Es decir, cada objetivo debe ser

• Específico
• Mensurable
• Alcanzable
• Relevante
• Limitado en el tiempo

Generar ingresos de 50.000€ en 5 años mediante anuncios, productos informativos como libros electrónicos y planes de suscripción de pago. Ayudar a los usuarios a elegir qué mascota tener. Asesorar a los usuarios sobre cuestiones relacionadas con las mascotas. Crear una plataforma de marketing para productos para mascotas.

Como resultado, tendrás un documento que contiene 2 listas:

• Una lista de los objetivos del proyecto
• Una lista de los objetivos del cliente

Este documento necesita el visto bueno del cliente/decisor.

Etapa 3: Definir el público objetivo

Esta etapa consiste en investigar el público objetivo. Hay que identificar qué tipos de usuarios acudirán al sitio, y también definir las necesidades de cada grupo.

Recopilar datos sobre las características: Necesitamos crear un personaje común para cada grupo. El diseño de la interfaz de usuario depende en gran medida de los resultados de esta etapa.

Para empezar con esto, primero tenemos que definir cuáles son las características comunes de nuestro público.

Definir las características sociodemográficas: Debemos averiguar el sexo, la edad, el nivel educativo y la ocupación de nuestro público objetivo. Dirigirse a adolescentes (15-18) va a diferir de un sitio destinado a personas mayores de 60 años.

Definir las características psicológicas: Debemos determinar el estilo de vida, la personalidad, el temperamento, la motivación, el sistema de valores, las filosofías, etc. de nuestro público objetivo.

Esta información es aún más importante que las características sociodemográficas en cuanto al diseño de la interfaz de usuario. Si, por ejemplo, nuestros usuarios son early adopters, la interfaz de usuario y la estrategia previa al lanzamiento serán diferentes a las de otros sitios web.

Definir las características de los deseos y necesidades: Debemos averiguar por qué nuestro usuario querría registrarse en nuestro sitio web, qué problemas busca resolver con nuestro sitio, etc. Definimos sus puntos de dolor y pretendemos resolverlos con nuestro sitio web.

Esta información es vital, aunque es difícil de encontrar. Si estás trabajando en un proyecto de rediseño de un sitio web, es posible que el cliente ya tenga esta información si dispone de herramientas de opinión de los usuarios. A veces puede tenerla la competencia (pero buena suerte consiguiendo que la comparta contigo).

En este caso, necesitas realizar estudios de investigación de usuarios y llevar a cabo encuestas.

Características de la ubicación geográfica: País, ciudad, región, continente: toda esta información es útil. Estar en línea no elimina por completo el factor de la ubicación. A veces el geotargeting es lo primero en lo que hay que pensar al crear un sitio nacional, un sitio web gubernamental o cualquier sitio web que dependa de la ubicación.

Además, el contenido y la redacción del sitio web están muy determinados por la ubicación de la audiencia. Necesitarás esto cuando estés en la fase de arquitectura de la información (AI).

Crea personas usuarias: Cuando el retrato del público objetivo está bien definido, podemos crear personas.

El objetivo principal del arquitecto web aquí es determinar todos los grupos posibles de usuarios, empezando por el grupo más grande (núcleo) y terminando por el más pequeño. Luego creamos una persona para cada grupo. Cada una de las personas que desarrolles debe tener

• Nombre y apellidos
• Foto
• Edad
• Ubicación
• Ocupación
• Estado civil
• Afición
• Habilidades
• Problemas que necesitan resolver
• Experiencia personal y profesional

Para tener una mejor imagen de tu público objetivo, puedes entrevistar a usuarios potenciales. En este punto se trata de una investigación de marketing.

Tras finalizar esta fase, deberías tener un documento que presente las características generales del público objetivo.

Etapa 4: Análisis de la competencia

Para garantizar el éxito del proyecto, necesitas conocer a tus competidores y tener buenas ideas sobre cómo adelantarte a ellos. Debes descubrir sus puntos fuertes y débiles. Hay varias metodologías para llevar a cabo la investigación del análisis de la competencia, como las encuestas a los participantes en el mercado y la investigación en Internet y en los medios impresos.

Si vas a crear un sitio web local, no te limites sólo a tu país. Busca en sitios web internacionales que estén haciendo cosas similares. Lo más probable es que haya proyectos similares o análogos en marcha en algún lugar del mundo.

Algunos de estos proyectos pueden ser bastante inspiradores. Por ejemplo, hemos estado trabajando en una red social para amantes de las mascotas para un cliente de Rusia. No encontramos competidores directos en el mercado local.

Los competidores de tu sitio web pueden ser competidores directos o competidores indirectos.

Los competidores directos pueden definirse como cualquier sitio web que opere para la misma base de usuarios y que ofrezca productos análogos. Por ejemplo, un competidor directo de Microsoft Windows es Apple Mac OS.

Los competidores indirectos son competidores que ofrecen productos similares, pero que sólo satisfacen parcialmente las necesidades del público objetivo.

Análisis DAFO: Existen distintos enfoques para identificar y analizar a los competidores. A mí me gusta más el análisis DAFO. DAFO -que significa Puntos Fuertes, Puntos Débiles, Oportunidades y Amenazas- ayuda a indicar los puntos fuertes y débiles de tus competidores, y lo que es más importante, te ayuda a averiguar las oportunidades del proyecto.

Al analizar a la competencia, puedes descubrir características e ideas útiles del sitio que merezca la pena adaptar a tu propio sitio web: características generales y universales del sitio, como sistemas de comentarios, formularios web, etc.

En estos casos no hay necesidad de reinventar la rueda. Todas las buenas ideas que obtengas durante la fase de análisis de la competencia serán necesarias para la fase de mapeo mental, por tanto tendremos para entregar los siguientes documentos:

• Una lista de competidores directos e indirectos
• Un análisis DAFO para cada competidor
• Resúmenes de la investigación
• Ideas generadas
• Oportunidades de mercado

Etapa 5: Objetivo-problema-solución del usuario

Partiendo de los personajes que hemos desarrollado, podemos empezar a trabajar en el objetivo-problema-solución.

Objetivos del usuario: Todas las personas tienen objetivos a corto y largo plazo. También puede haber subobjetivos. Por ejemplo, una persona puede desear mejorar su carrera, pero primero necesita encontrar un trabajo.

El subobjetivo es encontrar un trabajo para alcanzar el objetivo de mejorar su carrera. En nuestro proyecto de sitio web, identificamos los objetivos de una persona, sus problemas, y buscamos soluciones para ellos. Todos los objetivos deben estar bien diseñados.

Los objetivos difusos no ayudarán, ya que es imposible resolver todos los problemas en un sitio web. Céntrate en los objetivos principales y mantén corta la lista de objetivos. Algunos clientes piensan que si los usuarios escuchan música por Internet, su sitio también debe ofrecer ese servicio, aunque su sitio web no pretenda resolver ese problema.

Cuantas más funciones añadimos, más se diluyen nuestros objetivos principales.

Problemas de los usuarios: Cuando tenemos una lista de objetivos concretos, podemos determinar problemas concretos. Por ejemplo, un objetivo del usuario en nuestro sitio web podría ser encontrar un contratista que pueda construir su proyecto de construcción. Ese objetivo es más complejo de lo que parece: ¿Cómo localizamos al contratista adecuado para el proyecto de construcción concreto del usuario?

¿Es importante que el contratista se encuentre cerca de donde está el proyecto de construcción? ¿Cómo les permitimos evaluar rápidamente a muchos candidatos? Gracias a preguntas como éstas, generarás ideas fácilmente.

Nuestras soluciones: Cuando hayamos terminado de identificar los objetivos y los problemas, es hora de diseñar y desarrollar soluciones para ellos mediante el diseño de la arquitectura del sitio web.

Este proceso aporta una gran satisfacción a la arquitecta del sitio web porque busca resolver los puntos de dolor que tienen sus usuarios.

Como resultado, tendremos una matriz objetivo-problema-solución diseñada para cada persona que hayamos desarrollado para nuestro sitio web.

Etapa 6: Mapeo de escenarios

El mapeo de escenarios es la etapa dedicada a revelar los posibles flujos de usuarios.

Mapeo de la experiencia del usuario. Fuente: adaptivepath.com Una vez más, tenemos que pensar como un usuario final y crear escenarios probables de sus acciones en nuestro sitio web.

Cada objetivo de cada persona tiene su propio conjunto de mapas de escenarios. Estos escenarios ayudan a revelar los puntos débiles de nuestras ideas y conocimientos existentes. Los escenarios también ayudan al arquitecto del sitio web a desarrollar posteriormente buenos flujos de usuario.

Deberíamos tener mapeados escenarios para los objetivos críticos del sitio que hemos establecido en la etapa anterior.

Fase 7: Mapa mental

Cuando tenemos un montón de ideas, resulta útil empezar a visualizarlas e interconectarlas. La etapa del mapa mental se dedica a crear un sistema sólido de ideas conectadas lógicamente y también nos ayuda a recortar cosas innecesarias. Es una popular herramienta de conceptualización del diseño.

Para crear mapas mentales, debemos utilizar Xmind.

Busca tu lista de ideas y divídelas en categorías lógicas. Por ejemplo, supongamos que estamos trabajando en una web inmobiliaria.

Las secciones del sitio web inmobiliario podrían ser

• Catálogo de propiedades
• Foros de la comunidad
• Artículos/Noticias
• Centro de información

Asigna todas tus ideas a una de estas categorías. Si una idea encaja en más de una categoría, elige la que mejor se adapte a ella. La lluvia de ideas te ayudará a filtrar las funciones, páginas web, etc. inútiles e innecesarias.

Cada sección del sitio web debe planificarse de forma lógica. No te olvides de las funciones que dependen de cada sección, como que el usuario pueda valorar cada propiedad. Marca esta conexión con una flecha para recordar la dependencia.

Puedes diseñar tus propios símbolos para indicar las distintas secciones funcionales. Si la arquitecta web, por ejemplo, está indecisa sobre a qué sección pertenece una determinada característica del sitio, puede marcarla con un signo de interrogación. Estos símbolos son realmente importantes si el proyecto es grande.

Como resultado, tenemos una vista de pájaro de las interconexiones de las características y secciones del sitio.

Fase 8: Arquitectura de la información

Ahora que tenemos un mapa mental detallado de nuestro sitio web, podemos empezar a trabajar en la estructura de la información del sitio web, que será la base del prototipo del sitio web.

La AI del sitio web puede crearse con la ayuda de un software de diagramas de flujo como Visio.

Después de esta fase, deberías tener un diseño de arquitectura de la información (AI).

Etapa 9: Creación de prototipos y esquemas

Para esta etapa necesitarás un programa de creación de prototipos. Yo recomiendo Axure, aunque hay otros programas similares.

No es necesario prototipar primero la página de inicio. Por ejemplo, en el caso de una tienda online o un blog, la página del producto o la página de la entrada del blog deben ser lo primero, porque son páginas críticas y normalmente serán las páginas de aterrizaje de la mayoría de los usuarios del sitio.

El arquitecto del sitio web va a apoyarse en el mapa mental y en los diagramas de arquitectura de la información para desarrollar este prototipo. Al crear cada prototipo de página web, debes centrarte en cómo el usuario puede alcanzar sus objetivos.

Antes de crear el prototipo, debes refrescar tus conocimientos sobre tu público objetivo utilizando las etapas anteriores del proceso de arquitectura del sitio.

Prototipar el menú de navegación primario: El menú de navegación primario es el primero que hay que crear. Tenemos que calcular el número de elementos del menú y el número de menús desplegables.

Prototipo de la sección de cabecera: A continuación diseñamos la sección de cabecera que suele contener estos elementos:

• El menú de navegación primario
• Formulario de búsqueda
• Información de contacto
• Logotipo del sitio web
• Prototipar áreas contextuales

Ahora empezamos a diseñar las áreas contextuales, que serán diferentes según la página web que estés prototipando. Haremos bloques de contenido, algunos de los cuales serán constantes para todas las páginas, otros no.

Prototipar el pie de página web: El pie de página suele ser el mismo en cada página web. Normalmente, el pie de página duplica el menú principal.

También contiene información auxiliar, como la política de privacidad del sitio web, enlaces a redes sociales, información de contacto, información sobre derechos de autor, etc.

Comentarios del cliente: El primer prototipo de página web debe mostrarse a los responsables de la toma de decisiones, y hay que explicarles el motivo del diseño. Puede que el cliente lo revise y sugiera algunos ajustes. No pasa nada, porque hacer esto en un prototipo de baja fidelidad es mucho más fácil que si tuviéramos un prototipo de mayor fidelidad.

Una vez aprobada la primera página, podemos pasar a los siguientes prototipos. Todas las ideas representadas en nuestro mapa mental deben encontrarse en estos prototipos. Es crucial no olvidarse del más mínimo detalle, ya que a la larga puede convertirse en un infierno si lo haces.

Prueba los prototipos con los mapas de escenarios: Nuestros escenarios nos ayudarán a probar las maquetas para garantizar el orden lógico de cada acción.

Este es el componente que más tiempo consume de esta etapa y requiere mucha paciencia y atención. En el caso de sitios web grandes, podría haber más de 100 prototipos de interfaz únicos.

Los entregables tras esta etapa son prototipos y wireframes de baja fidelidad de todos los tipos de páginas web.

Como puedes ver, cada prototipo se desglosó en detalle. De este modo, no surgieron preguntas ni incertidumbres durante el diseño de los prototipos funcionales y los diseños web acabados.

Fase 10: Pruebas de usabilidad de los prototipos

Esta es una de las mejores formas de validar rápidamente la eficacia de la arquitectura del sitio web y hacer cambios antes de que las cosas avancen más. Axure genera HTML a partir de los prototipos, lo que los hace interactivos y listos para probarlos con los usuarios.

Las pruebas de usabilidad en esta fase te ayudarán a detectar lagunas y fallos en la arquitectura. Para las pruebas, invitamos a algunos representantes del público objetivo y observamos cómo consiguen llegar a determinadas páginas y resultados dentro del sitio. Después, se puede entrevistar a los usuarios sobre el sitio en general.

Tras las pruebas de usabilidad, hacemos las correcciones finales.

Como resultado, habremos validado y mejorado la facilidad de uso de nuestros prototipos de página web y obtendremos una mejor imagen de cómo interactuarían los usuarios con el sitio.

Etapa 11: Especificación del proyecto

La etapa final del proceso de arquitectura del sitio web consiste en crear el documento de especificación del proyecto. Éste debe contener una descripción detallada de cada etapa del proceso de arquitectura del sitio. La especificación del proyecto es el resultado de todas las etapas por las que has pasado.

Normalmente contendrá una descripción detallada de cada prototipo, flujos de usuario, etc. Las especificaciones deben ser completas e inequívocas. Sé detallado y minucioso, pero también tan sucinto y conciso como sea posible.

La especificación del proyecto debe contener toda la información relativa al software y las tecnologías web necesarias para el sitio web. Los requisitos de diseño deben ser claros. Una vez aprobada la especificación del proyecto, comienza el desarrollo del sitio web.