Proceso de diseño. de un sitio web. Sandra Elisa Roura Espinosa* Entretextos. Resumen. Abstract

Transcripción

1 ISSN: Entretextos abril - julio2015 Proceso de diseño de un sitio web Sandra Elisa Roura Espinosa* Resumen En las asignaturas Producción sígnica digital I y II, los alumnos de séptimo y octavo semestre de la licenciatura en diseño gráfico de la UPAEP tienen como objetivo el aprendizaje del diseño web para el cual deberán seguir un proceso lógico pero meticuloso donde comienzan con la investigación del problema, seguido de la indagación con todos los perfiles de usuario posibles, logrando así tener los datos suficientes para poder realizar propuestas de diseño que satisfagan las necesidades que los usuarios tienen al entrar a algún sitio en internet. Palabras clave: diseño, trabajo de investigación, internet, usuario de información. Keywords: design, research work, Internet, information users. *Profesora en la Licenciatura en Diseño Gráfico de la Universidad Popular Autónoma del Estado de Puebla, UPAEP. sandraelisa.roura@upaep.mx En estas asignaturas, los alumnos tienen como objetivo investigar, organizar la información, planear y bocetar distintas propuestas gráficas hasta llegar a la programación, comprobación y la publicación de dicho producto. De esta forma, los alumnos no solo aprenden las herramientas sino un proceso de diseño completo para generar productos web centrados en los usuarios, basados en diversas teorías de usabilidad como las propuestas por Jakob Nielsen o Alan Cooper. Abstract In the subjects Digital Sign Production II and I the students of the seventh and eighth semester of the Bachelor of Graphic Design at the UPAEP have the learning of web design as aim, in which they must follow a logical

2 and meticulous process, starting with the investigation of the problematic, followed by the users profile s inquiry to obtain enough data to execute the design proposals that satisfies the user s needs regarding a website. In these two subjects, the students have the investigation, information organization, planning, sketching and programming a website as a goal s course including the user testing to corroborate the website s usability, to finish with the publication in a hosting. In this way, instead of learning only the web design tools, the students learn the whole design process to generate user-centered websites based on Jakob Nielsen and Alan Cooper theories. Introducción Desde la introducción del internet a la vida cotidiana, muchos diseñadores han optado por desarrollarse dentro del ámbito del diseño de sitios web, en algunos casos realizando la gestión de dicha clase de proyectos, diseño de la interfaz, desarrollo del diseño de información y en algunas ocasiones la misma ejecución de la programación. 4 billones de sitios tan solo indexados por los buscadores Google y Bing Debido a la gran variedad de roles que puede tener el diseñador dentro de este gran mundo del desarrollo web es necesario hacer de su conocimiento un proceso lógico que contemple distintos aspectos como lo son los usuarios y sus necesidades, los aspectos técnicos y funcionales, incluso la gestión de equipos de trabajo. De acuerdo con Jakob Nielsen (2000:9), internet es un entorno que está en manos de los usuarios, por lo que el diseñador dedicado al desarrollo web deberá de tener en claro el principal objetivo, los usuarios. Contexto Pocos de estos productos están pensados en las verdaderas necesidades de los internautas El internet crece exponencialmente día con día ya que existen alrededor de 4 billones de sitios tan solo indexados por los buscadores Google y Bing (Kunder, 2006); en cuanto a los usuarios en nuestro país, existen alrededor de 45.1 millones de internautas (AMIPCI, 2013:6) y de acuerdo con Alan Cooper (2007:4-5), gran parte de las tecnologías de información incluidos los sitios web no ofrecen buenas soluciones a los usuarios, es decir, pocos de estos productos están pensados en las verdaderas necesidades de los internautas dando como resultado sitios web que persiguen cualquier clase de objetivos menos el de satisfacer a las personas. Cooper menciona que el tener objetivos meramente mercadológicos dentro de un sitio web generan un diseño limitado dando como resultado productos o sitios web que poco tienen que ver con los deseos o necesidades de los usuarios. 2

3 Por su parte Jakob Nielsen (2000:15) claramente menciona una lista de errores en los que se incurre al diseñar un sitio web, como lo son: el considerar a un sitio como un mero folleto o brochure de la empresa, diseño atractivo pero poco funcional generando confusión hacia el usuario, contenidos de texto lineales y excesivos, arquitectura de información encaminada a mostrar solo la estructura de la empresa, así como una escasa o nula estrategia de vinculación hacia otros sitios. Debido a este listado de problemas, los cuales son fácilmente detectables a través un sencillo análisis de distintos sitios, es necesario considerar un proceso centrado en los múltiples usuarios que puede poseer un producto de diseño como lo es el sitio web, siempre tomando en cuenta la funcionalidad, la usabilidad y el diseño. 1 El proceso en el diseño de sitios web En la licenciatura de diseño gráfico en la Universidad Popular Autónoma del Estado de Puebla (UPAEP), específicamente en las materias de Producción sígnica digital I y II, los alumnos siguen un proceso sencillo siempre basado en el usuario, tal como menciona Jorge Frascara (2011:9-10), el diseño de una interfaz, como lo es un sitio web, forma parte del diseño de información y esta disciplina tiene como objetivo brindar facilidad al usuario en la comprensión de la información presentada así como la realización de determinadas tareas. Muchos de los proyectos desarrollados comienzan desde cero, es decir, desde la misma creación de la marca o rediseño, sin embargo en este breve documento solo se describirá el proceso que se sigue en cuanto al diseño web y no de la imagen de la empresa, producto o servicio. Figura 1: esquema del proceso de diseño de un sitio web. Fuente: Diseño de esquema de proceso de diseño web, elaboración propia. 1.1 Análisis del sitio web a desarrollar En esta etapa dentro del salón de clase, se les explica a los alumnos una problemática que deben resolver, mientras que en otros casos los estudiantes consiguen un proyecto real donde es posible tener contacto con el cliente, donde este les dé a conocer sus necesidades en cuanto al sitio web. Aquí la información se analiza especulando sobre algunas características que pudiera tener el sitio. 3

4 1.2 Análisis y comparativos de otras páginas Se lleva a cabo un análisis de sitios web similares, aplicando algunas premisas de usabilidad (Nielsen, NN Group, 1995) de acuerdo con la necesidad del sitio web, para así determinar algunos errores o aciertos que pudieran aplicarse al sitio web. Algunos de estos principios que menciona Nielsen son: Mantener al usuario informado, es decir, proveer de retroalimentación sobre su estatus o ubicación. Utilizar lenguaje y diseño familiares al usuario, evitando diseños o lenguajes complejos que entorpezcan la navegación. Libertad, en otras palabras, facilidad de navegar o realizar una tarea sin necesidad de ver mensajes forzosos. Para ejemplificar este punto menciono el sitio web de Foro Alfa el cual es un portal donde diversos autores escriben sobre temas relacionados al diseño y marketing; al realizar la lectura de algún artículo, sin estar inscrito como usuario, emerge un pop-up 1 solicitando el registro del usuario y bloqueando con una pantalla amarilla la lectura, limitando así la libertad de navegación. Figura 2: Ejemplo de poca libertad de navegación dentro del sitio web Fuente: pantalla de registro del sitio web Foro Alfa. Reconocimiento antes que memoria, esto es, facilitar o poner visibles a elementos importantes como menús de botones, en otras palabras, que el usuario no tenga que recordar dónde están ciertos componentes de navegación, sino que los pueda localizar de manera sencilla. Estético y diseño minimalista, es decir, crear sitios web sencillos a menos que en algunos casos se trate de una web de juegos, pero que jamás se encuentre comprometida información importante. 1 Elemento o ventana que comúnmente emerge automáticamente en la pantalla, este puede ser un anuncio o un formulario de registro. 4

5 Ayuda y documentación, como lo es el caso de las páginas de ventas como Amazon en donde se ofrece al usuario documentación relacionada con los pasos que se requieren al comprar un producto, por ejemplo, el sistema de pago, formas y costos de envíos y solución de problemas o preguntas comunes. Flexibilidad y eficiencia en el sitio web, funcionalidad en diversos navegadores así como en distintas resoluciones de pantallas o anchos de banda. El proceso de diseño comienza comúnmente con el contacto y entrevista al cliente 1.3 Creación de perfiles de usuario Tal como lo plantea Jorge Frascara (2011:15-16), en su libro Diseño de información, el proceso de diseño comienza comúnmente con el contacto y entrevista al cliente por lo que sus metas y objetivos deberán estar implícitos en el diseño del sitio web, sin embargo también deberá estar inminentemente alineado hacia los futuros usuarios. Para que el diseño sea centrado en el usuario se elaborarán diversos perfiles de personas por lo que previamente será necesario realizar una sencilla investigación cualitativa a través de encuestas, entrevistas o grupos de enfoque; en este proceso el diseñador realiza una hipótesis sobre los posibles usuarios del sitio web en cuestión y a partir de una muestra de personas elabora distintos perfiles que más adelante se explicarán. Menciona Alan Cooper la necesidad latente de realizar este tipo de investigación para cualquier proyecto que involucre la interacción de usuarios para así recabar datos importantes que serán en beneficio del diseño del sitio web, como lo son: Actitudes de los usuarios. Lenguaje y aspectos sociales. Aspectos técnicos y conocimientos por parte del usuario para determinar el nivel de dificultad de la interfaz. La información que el usuario requiere. Las tareas que el usuario necesita o quiere realizar. Los posibles comportamientos de los usuarios dentro del sitio web. Las posibles características que el sitio web presentará en interfaz (Cooper, Reimann & Cronin, 2007:49-51). Una vez compilada la información obtenida de los usuarios se procede al diseño de personas o perfiles de usuario. Cabe enfatizar que estas tablas, que se desarrollarán a partir de la investigación, no están basadas en una persona en específico sino en los gustos, necesidades y antecedentes de 5

6 los distintos grupos de usuarios previamente investigados, siendo posible crear distintos perfiles de usuarios dependiendo la magnitud del sitio web a diseñar. A continuación se muestra dos perfiles de usuario diseñados por los alumnos de la materia de Producción Sígnica I para la elaboración de un sitio web de venta de helados. Figura 2. Ejemplo de un perfil de usuario. Fuente: Perfil de usuario para el diseño de un sitio web de una empresa de venta de helados, realizado por Lucina Alicia Fernández Salinas. Figura 3: Ejemplo de un perfil de usuario. Fuente: Perfil de usuario para el diseño de un sitio web de una empresa de venta de helados realizado por Luisa Daniela García Chong. Los perfiles de personas pueden ser de distintas formas pero deben poseer información básica: las motivaciones y necesidades de los usuarios (Brown, 2007). A pesar de que estos documentos no están basados en alguna persona en específico es necesario otorgarles un nombre así como una fotografía ya que como menciona Cooper (2007:82) estas personificaciones generan en el diseñador 6

7 una empatía, así como al equipo de trabajo, incluso al mismo cliente. Así como menciona Alan Cooper es importante describir las necesidades del usuario, las cuales son las carencias o impulsos que posee una persona relacionado a algún producto, bien o servicio y es preciso tener una pequeña descripción de estas, las cuales están íntimamente ligadas a las motivaciones. Los escenarios son verbalizaciones de situaciones que probablemente podrían ocurrirle al usuario Las motivaciones son lo que llevan a las personas a realizar una actividad (Cooper, 2007:93) por lo que son un aspecto importante que debe incluirse dentro del diseño de perfiles de usuarios, como ejemplo, las motivaciones que surgieron dentro del proyecto del sitio web de helados fueron querer conocer los contenidos alimenticios o tablas nutrimentales de los productos, conocer la ubicación de la tienda más cercana y tener información sobre franquicias y programas sociales. Los escenarios son verbalizaciones de situaciones que probablemente podrían ocurrirle al usuario por lo que necesite acceder al sitio web, mientras que los comportamientos son las acciones que realizará el usuario para resolver lo planteado anteriormente en las escenas (Brown, 2007). Otros aspectos que deben describirse son el background personal, el cual ofrece una pequeña historia relacionada con las necesidades del cliente y ayuda a generar una cierta empatía entre el diseñador y usuario, así como información demográfica la cual representa el grupo de edad de los usuarios, así como su nivel tecnológico para así contar con una mejor y más eficiente referencia de las características que deberá tener el sitio web. 1.4 Creación de árbol de navegación Los comportamientos son las acciones que realizará el usuario para resolver lo planteado El proceso de investigación y diseño de usuarios trae como uno de los resultados, el diseño del árbol de navegación. Es a través del diseño de personas como se obtiene claridad para el diseño de la navegación del sitio web ya que se poseen datos como el nivel tecnológico de los usuarios, las tareas que estos esperan realizar y la información que el usuario necesita encontrar. Sin comenzar a construir una lista exhaustiva de las necesidades de los usuarios no hubiera sabido por donde comenzar Peter Van Dijck En esta parte del proceso se jerarq uiza la información o el contenido del sitio web y es aquí donde también se explica cómo será el uso de los distintos menús o enlaces, es decir, si se da click a cierto botón qué sección se abrirá, cómo es posible regresar al inicio, qué opción existe si el usuario se ha perdido, entre otros aspectos. En este punto el alumno desarrolla habilidades que son importantes dentro del diseño de un sitio web, como lo son la organización, agrupación y jerarquización de la información, presentándola en un mapa para analizar su funcionalidad y viabilidad. 7

8 En el salón de clases el docente actúa como si fuera el cliente por lo que el alumno debe presentarle el árbol de navegación así como los perfiles de usuario y con base en estos documentos se discute la viabilidad del mapa y se realizan algunos cambios o sugerencias. A continuación se presentan algunos mapas de navegación creados por los alumnos para el proyecto del sitio web de helados. Figura 4. Ejemplo de un árbol de navegación. Fuente: Árbol de navegación para el diseño de un sitio web de una empresa de venta de helados realizado por Lucina Alicia Fernández Salinas. Figura 5. Ejemplo de un árbol de navegación. Fuente: Árbol de navegación para el diseño de un sitio web de una empresa de venta de helados realizado Luisa Daniela García Chong. 8

9 1.5 Bocetaje de los wireframes básicos En este punto del proceso el alumno desarrolla bocetos o wireframes de distintas secciones como el home o inicio, así como una o dos páginas internas. En este aspecto no es necesario realizar demasiados bocetos de un mismo sitio, a menos que lo amerite cada sección, ya que una web puede compartir un mismo diseño modular con algunos ajustes, siendo esta una buena opción que asegura una continuidad y no una distracción pues como menciona Jakob Nielsen (2000: ) los usuarios la mayoría de las veces acceden a un sitio dándole mayor importancia al contenido y no tanto al diseño. Acceden a un sitio dándole mayor importancia al contenido y no tanto al diseño 1.6 Diseño de las páginas Con base en los bocetos presentados se selecciona el diseño que cumpla las metas, motivaciones y características planteadas en los perfiles de usuarios y en este punto el alumno traduce sus bocetos a un software de diseño como Adobe Photoshop o Adobe Illustrator. Figura 6. Diseño de página de inicio. Fuente: diseño de página de inicio para un sitio web de helados realizado por Lucina Alicia Fernández Salinas. 9

10 Figura 7. Diseño de página de inicio. Fuente: diseño de página de inicio para un sitio web de helados realizado por Luisa Daniela García Chong. 1.7 Pruebas de usuario / Revisión Es importante mencionar que el desarrollo de esta prueba depende de la magnitud del proyecto, debido a que en algunas ocasiones el sitio puede ser sencillo sin la necesidad de realizar este test, sin embargo para sitios complejos donde existe mucha interacción por parte de distintos usuarios es necesario hacer esta clase de análisis. Dentro del salón de clase el alumno presenta en pantalla los diseños terminados de las diversas páginas que forman el sitio web, el docente constata que tengan relación con el árbol de navegación así como los perfiles de usuario presentados, en caso de que no exista coherencia en el diseño y lo declarado en los perfiles de usuario y árboles de navegación, el alumno tendrá que rediseñar el sitio o ciertos aspectos donde no exista coherencia. Una vez aprobado el diseño se determina la mejor manera para preparar las imágenes para su posterior programación, es decir a través del software que el alumno haya elegido se preparan las distintas piezas que se utilizarán para la programación. 1.8 Programación del diseño En este proceso los alumnos aprenden dos lenguajes de programación, HTML y CSS. El HTML o Hyper Text Markup Language es el contenido del sitio web, es donde está todo el texto, tablas, listas, imágenes e hipervínculos, mientras que el Cascading Style Sheet o CSS es el que aporta todos los estilos como colores, fondos, variantes tipográficas, efectos, entre muchas otras cosas que harán que el sitio web se vea tal cual el alumno lo planteó en el paso del diseño de página. En algunos casos 10

11 estos lenguajes se complementan con algunas librerías de JQuery para dar movimiento a algunos elementos del sitio sin embargo este lenguaje se limita a la decisión e interés de cada alumno así como a la necesidad de cada sitio. 1.9 Pruebas de usabilidad Una vez terminado el sitio web el alumno presenta todos sus archivos y se comprueba que el sitio cumpla con ciertas características, es decir, que exista un funcionamiento correcto de botones (hipervínculos), sencilla navegación, visualización óptima de imágenes, visualización óptima del sitio en diversos navegadores (Chrome, Explorer, Safari, Mozilla) así como en diversas resoluciones y funcionamiento correcto de elementos como audio y video. En este sitio se prueban todas las páginas revisando que no exista ningún problema, en el caso de que exista alguna problemática el alumno tendrá que corregirla para su posterior lanzamiento Lanzamiento En este último paso el alumno aprende a utilizar los servicios de dominio y hosting, sin embargo debido a que estos poseen un costo y generalmente su renta es anual se utiliza un servicio gratuito que ofrece herramientas similares a los servicios de paga, teniendo en cuenta algunas restricciones, como lo es la limitada selección del nombre del dominio o el poco espacio de disco duro. En este proceso el alumno utiliza el servicio gratuito de en donde se deberá inscribir para poder obtener un hosting es decir, el espacio donde se guardarán los archivos que conforman el sitio web así como el dominio, es decir, la dirección del sitio. Una vez inscrito en el servicio, el alumno deberá guardar todos los archivos que conforman el sitio web, para esto deberá ordenar sus archivos y carpetas para así configurar un cliente de FTP 2 como el FileZilla el cual le permitirá almacenar todos los documentos de una manera rápida y ordenada dentro del hosting. Deberá ordenar sus archivos y carpetas para así configurar un cliente de FTP como el FileZilla 2 FTP: por sus siglas en inglés File Transfer Protocol o Protocolo de Transferencia de Archivos. Cliente FTP es un programa que emplea el protocolo FTP para conectarse a un servidor y transferir archivos, ya sea para descargarlos o para subirlos. 11

12 Figura 8. Orden de un sitio web para su correcto guardado dentro del hosting. Fuente: orden de un sitio web, elaboración propia. 2. Evaluacion Al comenzar el diseño de un sitio web dentro de clase se le especifica al alumno el sistema de evaluación que se llevará a cabo y que está basado en el proceso de diseño de sitios. Tabla 1: Sistema de evaluación en la materias Producción sígnica digital I y II Rubro Porcentaje Características Investigación Comparativa de otros sitios 5% Tabla comparativa basada en los 10 principios de usabilidad de Jakob Nielsen (NN Group, 1995) de sitios similares Diseño de perfiles de usuario 15% Creación de distintos perfiles de usuarios de acuerdo con los focus groups y entrevistas describiendo las motivaciones, necesidades, escenarios, confort tecnológico, background y comportamientos Diseño de mapa de navegación 15% Diseño de un árbol de navegación de acuerdo a lo reflejado en los perfiles de usuarios Diseño del sitio Revisión de proceso de bocetaje (wireframes) 5% Revisión de los bocetos, buscando que sean coherentes de acuerdo a lo planteado en los perfiles e usuario y mapa de navegación Calidad del diseño 15% Revisión de la calidad de diseño empleando imágenes, vectores, patrones y texturas 12

13 Optimización de recursos 10% Revisión de los recursos como videos y audios optimizados para su reproducción o visualización en web Ejecución del sitio Programación del sitio 15% Traducción del diseño a los lenguajes HTML y CSS, en este punto se verifica que la programación sea correcta y ordenada Funcionalidad / Usabilidad 15% Visualización correcta del sitio en diversos navegadores (Chrome, Explorer, Mozilla y Safari). Visualización correcta en distintas resoluciones. Funcionalidad correcta de los botones o hipervínculos. Navegación sencilla Lanzamiento 5% Aplicación de la página web dentro del hosting Fuente: Elaboración propia con base en la rúbrica general de la escuela de Diseño Gráfico en UPAEP. En esta tabla se determinan los puntos que se tomarán en cuenta y que deberá cumplir el alumno de acuerdo con el proceso revisado en clase. Conclusión A través de este proceso se pretende que el alumno tenga una idea clara de lo necesario para la construcción de sitios web, ayudándole a que, al salir al ámbito profesional, domine los pasos para poder realizar proyectos de esta índole ya sea dentro de un equipo de trabajo o gestionando el proyecto. Es primordial mencionar que el alumno tan solo aprende algunas herramientas que se utilizan en el diseño web teniendo la posibilidad de realizar sitios sencillos, no obstante, deberá estar consciente de la necesidad de trabajar con profesionistas de otras áreas como lo es la programación o sistemas computacionales para realizar sitios web más complejos, por ejemplo un carrito de ventas o módulos administrativos. La necesidad de trabajar con profesionistas de otras áreas como lo es la programación o sistemas computacionales Este proceso permite tener una visualización más amplia de lo que conlleva el diseño web, en otras palabras el diseño web no solo es generar pantallas en los programas de diseño y programarlas, es además investigar sobre las necesidades de los diversos usuarios para poderle ofrecer un sitio adecuado con productos que cumplan las demandas y expectativas de las personas. 13

14 REFERENCIAS AMIPCI. (2013). Hábitos de los Usuarios de Internet en México México: (AMIPCI) Asociación Mexicana de internet. Brown, D. (2007). Communicating Design: Developing Web Site Documentation for Design and Planning. California, Estados Unidos: New Riders. Cooper, C., Reimann, R. y Cronin, D. (2007). About Face 3 The Essentials of Interaction Design. Indiana, Estados Unidos: Wiley Publishing, Inc. Ding, W., y Lin, X. (2010). Information Architecture: The Design and Integration of Information Spaces. North Carolina, Estados Unidos: Morgan & Claypool Publishers. Frascara, J. (2011). Qué es el diseño de información? Argentina: Ediciones Infinito. Kunder, M. d. (2006). World Web Size. Recuperado de consultado Niederst, J. (2012). Learning Web Design: A Beginner s Guide to HTML, CSS, JavaScript, and Web Graphics. California, Estados Unidos: O Reilly Media. Nielsen, J. (1995). Ten Usability heuristics. Recuperado de consultado , Nielsen, J. (2000). Usabilidad: Diseño de sitios web. Madrid, España: Pearson Educación. Van Dijck, P. (2003). Information architecture for designers: structuring websites for business success. Hove, East Sussex, UK: Rotovision. 14