Las estadísticas son una fuente interesante de información que nos indica cómo debemos proceder. Hoy en día, aproximadamente el 75% de los usuarios forma su opinión teniendo en cuenta la estética del sitio, y casi el 90% no volvería a este si la experiencia de usuario no fue buena. Esta última se ha convertido en el epicentro del diseño web, y en este artículo veremos cómo la web wireframecontribuye a mejorarla.
¿Qué es un wireframe?
Un wireframe es un boceto visual que representa la estructura fundamental de una página web, aplicación o software, sin enfocarse en los detalles estéticos. Puede ser tanto digital como un dibujo en papel.
Sin embargo, esto nos puede llevar a confundirlo con un mockup. La diferencia entre ambos es precisamente el nivel de detalle y la fidelidad visual.
Los mockups son representaciones más detalladas y realistas, que incluyen aspectos visuales como colores, tipografías y gráficos. Su objetivo es mostrar cómo se vería el producto final. Por el contrario, un wireframe es esquemático y se centra en la funcionalidad y en la organización de los elementos y se usan para planificar la estructura básica.
En cuanto a la importancia que tiene un wireframe en el diseño web, undiseñador UX/UI los utilizara para las siguientes funciones:
Planificar la estructura de la página web.
Identificar problemas deusabilidad web en las primeras fases de diseño.
Facilitar la comunicación entre diseñadores, desarrolladores y clientes.
Asegurar que todos los elementos necesarios estén presentes antes de invertir tiempo en el diseño visual y la codificación.
Diferencias entre wireframes de alta y baja calidad
Estos son los dos tipos de wireframe más conocidos. Los de baja fidelidad son representaciones muy simples y básicas, que utilizan formas y líneas sencillas para delinear la disposición y la estructura de una interfaz. Por tanto, se centran solo en aspectos como la funcionalidad y la jerarquía de los elementos, para comunicar en poco tiempo las ideas más importantes del diseño. De este modo, se identifican fácilmente problemas de usabilidad y se facilita la colaboración entre quienes forman el equipo.
Los wireframes de alta fidelidad incluyen más detalles y son más precisos con respecto al diseño final de la interfaz. Aunque no muestra este al completo, sí podría incluir ya tipografías, tamaños de fuente y la ubicación exacta de cada elemento. También anotaciones específicas sobre comportamiento y funcionalidad.
Objetivos del wireframing en UX/UI
El wireframing UX es una herramienta muy usada en el diseño web, ya que sus objetivos son conseguir una experiencia de usuario óptima y una estructura bien planificada. Los más destacados son:
Definir la estructura de la página. El wireframing ayuda a establecer la disposición básica de una página web, puesto que delinea la colocación de los elementos principales. Como encabezados, menús, contenido y pie de página. Así, diseñadores y desarrolladores pueden visualizar la organización y el flujo de la información.
Mejorar la usabilidad. Se detectan problemas con rapidez y se asegura que la web será intuitiva y fácilmente navegable. Aquí es importante el concepto deaffordance en UX.
Facilita la comunicación y la lluvia de ideas. El wireframe es un lenguaje común para quienes trabajan en diseño web. Permite generar ideas nuevas relativas a la experiencia de usuario y a llevar a un consenso sobre estructura y funcionalidad.
Optimización del proceso de diseño. Se reduce el coste asociado a los cambios constantes de diseño, así como el tiempo total empleado. El desarrollo se agiliza desde la conceptualización hasta la implementación final.
Priorización de contenido. El wireframe pone sobre la mesa el contenido que es relevante para el diseño. De esta manera, el equipo se centra en la jerarquía de elementos, en estos mismos y en la navegación.
Consejos para diseñar un wireframe
Ser diferente, pero no demasiado. El diseño UX debe lograr el equilibrio entre lo familiar y lo inesperado. Si la página es muy diferente a lo habitual, puede haber problemas para saber navegar por ella. Al mismo tiempo, si es muy común, resultará aburrido.
Comprender la psicología humana. El origen del diseño UX se encuentra en la psicología Gestalt. La afirmación principal de esta corriente es que el total es mayor que la suma de las partes. En términos de diseño, toda la web debe seguir un patrón unificado, y el wireframe es el elemento que permite cohesionar todas las partes.
Escribir es reescribir: usar datos para ver qué funciona. El boceto debe basarse en datos. Por ejemplo, mejores prácticas de la industria, Google Analytics, mapas de calor de páginas publicadas anteriormente, mapas de viaje del cliente o información de estudios de mercado. En otras palabras, el diseño no es aleatorio.
Dominar el lenguaje de la comunicación visual. El wireframe permite que haya una conversación entre usuarios e interfaz. Los objetivos se habrán conseguido cuando a las preguntas de los usuarios, la interfaz responde en un tiempo muy corto.
Wireframe: el ejemplo de Twitter
Un ejemplo de wireframe conocido es Twitter. Pero antes, veamos la siguiente imagen:
Como se puede ver, es sencillo imaginar qué elementos irán en cada parte de esos bocetos de página web. Los cuadros marcados con una equis son espacios para imágenes: los rectángulos anchos y estrechos marcan títulos y textos; los de esquinas redondeadas marcan botones con llamadas a la acción, y las flechas indican la ruta de navegación entre todos esos elementos.
Si volvemos a nuestro ejemplo real, en la página de bienvenida de Twitter se puede ver un diseño muy sencillo y eficaz. La página se divide en dos mitades. A la izquierda nos explica qué es Twitter y a la derecha nos anima a registrarnos. Sin más adornos y con los colores de la marca.
El copy de Twitter se limita a enfatizar que es una red social y que permite el uso de 280 caracteres en cada tuit. La ventaja de un wireframe tan minimalista es que evita las distracciones. Twitter ha decidido que no quiere informar a sus usuarios de sus funciones hasta que no se hayan registrado.
No obstante, existe un diseño que es incluso más eficaz que este, el de Google. Solo muestra el cuadro donde efectuar la búsqueda. Nunca menos fue más.
¿Quién es el Responsable del tratamiento de sus datos?
THREEPOINTS EDUCATION, S.L.U, con CIF B-67187906, será la responsable de los datos
personales facilitados a través de la presente página web, así como de los facilitados
telefónicamente, a través de cualquiera de nuestros formularios en formato papel, de los obtenidos como
consecuencia de la relación que Usted mantenga con nosotros y de los derivados de sus hábitos de navegación
y consumo. Dicha compañía se encuentra ubicada en Av Diagonal, 662, 08034 Barcelona, pudiendo
ponerse en contacto con la misma a través de la dirección electrónica info@inesdi.com.
Igualmente, podrá ponerse en contacto con nuestro Delegado de Protección de Datos mediante escrito
dirigido a dpo@planeta.es o a Grupo Planeta, At.:
Delegado de Protección de Datos, Avda. Diagonal 662-664, 08034 Barcelona.
¿Con qué finalidad tratamos sus datos personales?
THREEPOINTS EDUCATION, S.L.U tratará sus datos personales con el fin de gestionar la relación que Usted
mantiene con nosotros, así como para enviarle comunicaciones comerciales por cualquier vía, incluso
finalizada la relación con usted, para mantenerle informado de aquellos de nuestros productos y servicios
similares a los contratados por Usted.
Asimismo, le informamos que, con el fin de poder ofrecerle productos y servicios de THREEPOINTS
EDUCATION, S.L.U o de terceras empresas adecuados a sus intereses, así como para mejorar su experiencia
de usuario de nuestra página Web, elaboraremos un “perfil comercial” en base tanto a la información
facilitada por usted como a aquella otra derivada de sus hábitos de consumo y navegación y la
obtenida de redes sociales.
Adicionalmente, sus datos personales y perfil comercial serán cedidos al resto de
sociedades del Grupo Planeta para que éstas le remitan comunicaciones comerciales sobre sus propios
productos y servicios o de terceras empresas pertenecientes o ajenas al Grupo Planeta, elaborando para ello,
a su vez, su propio perfil comercial con dichos datos y perfiles, así como con los datos y perfiles de usted
que ya tuviera u obtenga, todo ello, para que dichas comunicaciones sean de su interés por adecuarse a sus
gustos, hábitos de consumo y navegación y preferencias comerciales. Este tratamiento implicará, por tanto,
el cruce de bases de datos de las distintas empresas del Grupo Planeta y enriquecimiento de las
mismas.
Puede consultar el listado de empresas del Grupo Planeta en el siguiente link www.planeta.es. Dichas empresas desarrollan su actividad en
los sectores editorial, formación, cultura, ocio, coleccionismo, textil, seguros privados, gran consumo y
joyería.
En cualquier caso, las terceras empresas ajenas a nuestro grupo de las que, en su caso, le enviaremos
comunicaciones comerciales serán aquellas que desarrollen su actividad en los mismos sectores que las
empresas del Grupo Planeta y que han sido indicados anteriormente, o en los sectores de Telecomunicaciones,
bancario y financiero, viajes, tecnología y actividades jurídicas.
¿Por cuánto tiempo conservaremos sus datos?
Tanto los datos personales proporcionados, como los obtenidos de su navegación y hábitos de consumo,
así como el perfil comercial obtenido se conservarán mientras Usted no solicite su supresión.
¿Cuál es la legitimación para el tratamiento de sus datos?
La base legal para el tratamiento de sus datos personales es la ejecución y mantenimiento de la
relación mantenida con Usted, así como el consentimiento expreso que, en su caso, nos haya facilitado para
los tratamientos adicionales consistentes en el envío de comunicaciones comerciales propias y/o de terceros,
la elaboración de perfiles comerciales y la cesión de dichos datos y perfiles al resto de sociedades del Grupo Planeta
con las finalidades indicadas en el apartado “¿Con qué finalidad tratamos sus datos personales?”
anterior.
Le informamos que los datos personales que se solicitan en el momento de registrarse en la presente
página web, los solicitados telefónicamente o en cualquiera de nuestros formularios en formato papel, son
los estrictamente necesarios para formalizar y gestionar la relación con Usted, de manera que, en caso de no
facilitarlos, no podremos mantener dicha relación. En cualquier caso, dicha finalidad principal no está
supeditada al consentimiento para el tratamiento de los datos que no sean necesarios para dicha actividad
principal.
Como, hemos indicado anteriormente, la oferta prospectiva de productos y servicios propios y/o de
terceros, así como la elaboración de perfiles comerciales y la cesión de dichos perfiles y de sus datos
personales a terceras empresas del Grupo Planeta, son tratamientos adicionales que están basados en el
consentimiento que se le solicita, sin que en ningún caso la retirada de este consentimiento condicione el
mantenimiento de la relación que mantiene con nosotros.
¿A qué destinatarios se comunicarán sus datos?
Únicamente en el caso de que nos dé su consentimiento para ello, sus datos personales y, en su caso, su
perfil comercial, serán comunicados al resto de empresas del Grupo Planeta con las finalidades
indicadas en el punto “¿Con qué finalidad tratamos sus datos personales?”
de la presente política de privacidad. Puede consultar el listado de empresas del Grupo Planeta
en el siguiente link www.planeta.es.
¿Cuáles son sus derechos cuando nos facilita sus datos?
Cualquier persona tiene derecho a obtener confirmación sobre si en THREEPOINTS EDUCATION,
S.L.Uestamos tratando datos personales que les conciernan, o no.
Asimismo, las personas interesadas tienen derecho a acceder a sus datos personales, así como a
solicitar la rectificación de los datos inexactos o, en su caso, solicitar su supresión cuando, entre otros
motivos, los datos ya no sean necesarios para los fines que fueron recogidos.
En determinadas circunstancias, los interesados podrán solicitar la limitación del tratamiento de sus
datos, en cuyo caso únicamente los conservaremos para el ejercicio o la defensa de reclamaciones.
En determinadas circunstancias y por motivos relacionados con su situación particular, los interesados podrán
oponerse al tratamiento de sus datos. THREEPOINTS EDUCATION, S.L.Udejará de tratar los
datos, salvo por motivos legítimos imperiosos, o el ejercicio o la defensa de posibles reclamaciones.
Asimismo, los interesados tienen derecho a recibir, en un formato estructurado, de uso común y lectura
mecánica, los datos personales que le incumban que nos hayan facilitado, y a transmitirlos a otro
responsable.
Los interesados, podrán ejercer dichos derechos y la revocación en cualquier momento de los
consentimientos en su caso prestados, mediante carta dirigida a THREEPOINTS EDUCATION, S.L.U,
Apartado de Correos 221 de Barcelona o remitiendo un email a lopd@threepoints.com. En este sentido, le informamos que tiene a su disposición
modelos de ejercicio de los citados derechos en la página web de la Agencia Española de Protección de Datos
(https://www.aepd.es/reglamento/derechos/index.html).
Cuando el interesado lo
considere oportuno podrá presentar una reclamación ante la Agencia Española de protección de datos,
especialmente cuando aquél considere que no hemos satisfecho debidamente el ejercicio de sus derechos. Dicha
reclamación podrá presentarla ante la citada autoridad mediante las diferentes opciones que la sede
electrónica de la Agencia Española de Protección de datos ofrece.