PRINCIPIOS BASICOS DEL DISEÑO WEB

Transcripción

1 PRINCIPIOS BASICOS DEL DISEÑO WEB Un diseñador web siempre debe procurar realizar webs claros y fácilmente navegables por el usuario que visita el sitio, de manera que disponga de la información que le quiere hacer llegar de una manera clara y sencilla. El diseño web es una técnica que se basa en una serie de reglas que sirven para crear algo que resulte útil y atractivo a la vez. El proceso inicial para hacerlo implica elegir un tipo determinado de audiencia y unos objetivos claros. Durante la planificación de un proyecto, debe tenerse en cuenta que es muy probable que exista algo similar en la web, lo que hace que el diseñador se vea obligado a hacer un buen diseño para poder competir. El diseño web tiene dos partes bien diferenciadas: la funcionalidad o usabilidad y la estética. Ambas son imprescindibles, ya que una página funcional pero con mala estética no atraerá la atención de posibles usuarios o visitantes, mientras que una página muy bonita pero que funciona mal hará que los visitantes que lleguen atraídos por la buena estética del sitio no regresen a él por no encontrar lo que necesitan o les resulte difícil. Y de la mano del diseño puramente gráfico del sitio, va toda una planificación de los contenidos del sitio, las estructura de los menús, cómo será la interacción con el usuario, rutas de navegación, arquitectura de información y en definitiva, todo un diálogo que ha de establecerse entre el sitio web y el visitante, que debe pensarse y planificarse para que éste ultimo entiende de qué va el sitio y sepa usarlo y lo sabe hacer cualquiera (usabilidad). El diseño web es mucho más que darle color y estilo a una página web. La Organización Internacional para la Estandarización (ISO) ofrece dos definiciones de usabilidad: ISO/IEC 9126: La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso ISO/IEC 9241: Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico La distinción entre usabilidad facilidad de uso y accesibilidad, es difícil y en muchos casos innecesaria. Además, la accesibilidad debe ser entendida como parte de y al mismo tiempo requisito para la usabilidad, puesto que la accesibilidad no sólo implica la necesidad de facilitar acceso, sino también la de facilitar el uso.

2 En informática, la usabilidad está muy relacionada con la accesibilidad, hasta el punto de que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos expertos es Jakob Nielsen, el cual definió la usabilidad en el 2003 como un atributo de calidad que mide lo fáciles de usar que son las interfaces web. Otra definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios web para que los usuarios sean capaces de encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea. La usabilidad implica hacerse preguntas como las siguientes, que pueden responderse realizando análisis de usuarios / visitantes y tareas al planificar un proyecto web: Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender? Qué quieren o necesitan hacer los visitantes? Cuál es la formación general de los usuarios? Cuál es el contexto en el que el visitante está trabajando? Qué debe dejarse a la máquina? Qué al usuario? Otras consideraciones incluyen: Pueden realizar fácilmente sus tareas previstas? Por ejemplo, pueden realizar las tareas previstas a la velocidad esperada? Cuánta preparación necesitan los visitantes? Qué documentación u otro material de apoyo están disponible para ayudar al usuario? Puede éste hallar las respuestas que buscan en estos medios? Cuáles y cuántos errores cometen los usuarios cuando interactúan con el producto? Puede el visitante recuperarse de los errores? Qué ha de hacer para ello? Ayuda el producto a recuperarse de los errores? Por ejemplo, muestra el sofware mensajes de error informativos y no amenazantes? Se han tomado medidas para cubrir las necesidades especiales de los usuarios con discapacidades? (Es decir, se ha tenido en cuenta la accesibilidad?) Todos estos temas te permitirán, además, fidelizar visitas, es decir, hacer que tus visitantes vuelvan una y otra vez, puesto que al ponerles fácil la navegación por tu sitio mejorarás mucho la imagen de tu web. PRINCIPIOS BÁSICOS EN LOS QUE SE BASA LA USABILIDAD Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia.

3 Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema. Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario. PRINCIPIOS QUE RIGEN EL DISEÑO WEB Balance Es el equilibrio que debe existir entre los diferentes elementos que componen la página. Imágenes y texto, elementos grandes y pequeños, zonas oscuras y claras, etc., deben estar balanceadas de forma tal que la página no solo resulte atractiva, sino que además logre enfocar la atención del usuario sobre aquellos elementos que nos interesa que lo haga. Contraste El contraste es una forma de distinguir los elementos que deseamos resaltar. Diferencias en la tipografía, diferencias en las formas (círculos, cuadrados, rectángulos, etc.), diferencias de tamaño (una imagen más grande con otras más pequeñas, por ejemplo), texturas y fondos diferentes, etc., son algunos de los contrastes que pueden emplearse para enfocar la atención del usuario sobre los elementos más importantes de la página Énfasis Es una forma de distinguir algo dentro de un elemento. Un ejemplo de esto es lo que sucede con este texto, donde los títulos se encuentran resaltados así como algunas palabras o frases, de forma que facilita la comprensión de lo que se quiere transmitir. Repetición o ritmo El ritmo o repetición es una forma de establecer patrones con los que se ordenan los elementos de la página. Si los elementos de una página web siguen un patrón determinado, es mucho más sencillo para las personas comprender el contenido y acceder a la mayor parte del mismo en poco tiempo. Este punto es clave para mantener la usabilidad del sitio. Proximidad o unidad Este concepto se refiere a colocar juntos o próximos los elementos que estén relacionados, formando unidades visuales que brindan coherencia al contenido de la página. UTILIDAD DE LOS PRINCIPIOS DE DISEÑO WEB El diseño de una página web debe hacer que el usuario que ingresa a la misma sea guiado hacia la información que nos interesa que vea.

4 El logo de una página web suele colocarse en el extremo superior izquierdo debido a que hay estudios que indican que ese es el sitio que miran los internautas cuando ingresan a la página, y al que vuelven a mirar para saber dónde están. Además, los logotipos suelen ser grandes y llamativos. De ahí en más, el usuario debería ser guiado mediante una secuencia de pasos por las zonas del documento que nos interesa que vea. La atención que prestan quienes navegan por internet a cada página que visitan es apenas de unos pocos segundos, por lo que cada instante que el usuario de la página desvíe su atención de lo que nos interesa comunicar, estaremos perdiendo la oportunidad de mostrarle lo que realmente nos interesa que vea. Un aspecto importante a tener en cuenta es la legibilidad y la amenidad de los contenidos aplicados en el diseño. Esta atención sobre las partes esenciales del contenido es la meta que debe seguir todo diseño. En los breves segundos que el usuario presta atención antes de irse de la página, el diseño debe lograr que se quede y guiarlo por el contenido de la página para cumplir los objetivos de la misma. Otra misión importante del diseño web es colaborar en convencer al usuario de la página que el servicio o el producto ofrecido es lo que necesita o le conviene. Para ello es necesario que el diseño web se ajuste a los requerimientos del producto o servicio, sin descuidar los principios del diseño. QUE SE DEBE EVITAR EN UN DISEÑO WEB - Evitar animaciones de bienvenida al sitio web. - Evitar el abuso de banners dinámicos en la web. - Evitar mostrar el contenido abriendo nuevas ventanas del navegador. - Evitar la sobrecarga visual de una página. - Evitar crear elementos cuyo aspecto es similar a publicidad. QUE DEBO TENER EN CUENTA PARA UN DISEÑO WEB - Marcar los enlaces ya visitados por el usuario (Media) - Uso correcto de pestañas o Tabs (Alta) - Presentación visible de las opciones disponibles (Muy alta) - Diseño adaptado a la velocidad media de conexión (Media) - Distribución de las opciones y de la información (Alta) - Aspecto de la página y diseño imprimible (Alta)

5 RESUMEN EN 3 ETAPAS PARA EL DISEÑO DE UNA WEB 1. Planteamiento de objetivos para tu página web Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La planificación de tu web debe incluir: - Breve descripción de los contenidos de la página, su título principal, etc. - Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.) - Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc. - Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente. - Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas físicos, etc. para adaptar la página a sus características. - Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc. 2. Estructurar el contenido de la página Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la página web. Antes de empezar a desarrollar tu página web en el ordenador, debes tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web: - En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.

6 - En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo. - Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista. Esta estructura es mucho más navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo. - En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es que desde cada página podemos ir a cualquier otra del sitio. No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios. Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar información para confeccionar cada sección de tu página web. Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las secciones principales, un cuerpo central con el contenido de la sección y una última columna a la derecha donde insertar tu publicidad. No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por la sección con rapidez. Por lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que retocarla para adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario. 3. Diseñar la página web Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de varias secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir en cada una. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. Por último buscar una empresa de hosting o alojamiento de tu sitio.

7 CRITERIOS PARA EVALUAR UN SITIO Hay varios tipos de criterios para evaluar un sitio web, muchos de ellos dependen del objetivo que persigue la página o del punto de vista a evaluar. A continuación se abordan los aspectos más relevantes. - Usabilidad: Se refiere a la experiencia que tiene un usuario cuando interactúa con páginas de la web. Un sitio web es usable cuando de una manera clara, un usuario entiende el contenido y navega por el web de una forma cómoda y sencilla. Un buen diseño web debe contener un buen menú o algún buen sistema de navegación por la página que se mantenga constante en todas y cada una de las páginas que conforman la web. Este sistema ha de ser fácilmente accesible. - Accesibilidad: Completo acceso participativo a la información contenida en el sitio sin ningún tipo de impedimento. - Compatibilidad: Que la web se vea igual o similar con todos los navegadores. No todos los navegadores interpretan el código HTML y CSS de la misma manera, eso puede ocasionar que el resultado nos sea el mismo. - Código (Validez, Semántica): Páginas apropiadamente estructuradas sin código inválido. Un buen diseño web debe contener todos sus enlaces funcionando a la perfección. Debe seguir estándares web. - Credibilidad (Utilidad): Es importante para los temas de usabilidad y debe reflejar que el sitio está diseñado por una organización o personas reales, honestas y su información es confiable, debe ser fácil de usar, útil, que se pueda contactar, actualizar el contenido frecuentemente, restringir contenido promocional y evitar errores en la funcionalidad del sitio. - Encontrabilidad (SEO): Capacidad de los contenidos digitales de ser encontrados, en especial a través de buscadores. - Estética (Adecuación al perfil): Usabilidad y estética. Un buen diseño web debe contener texto e imágenes en proporciones iguales. El sitio debe parecer estéticamente agradable, un balance entre armonía y simetría en las formas, los colores suaves, los bordes con transiciones suaves, los degradados, etc. La combinación perfecta de colores sería aquella que usara toda la gama de tonos de un color concreto unida a otros dos o tres colores diferentes. Debe contener una variación, como máximo, de tres tipos de fuentes diferentes. Cargar una web de muchos tipos de fuente diferentes dificulta la lectura de su contenido. El tamaño tampoco debería superar los 14 puntos, a no ser que se trate de un encabezado o un título. También tenemos que tener en cuenta que una web no es un

8 libro, por lo que fuentes del tipo Times resultan muy cansadas de leer. Para subsanar ese inconveniente se recomiendan redonditas del tipo de Arial o Verdana. Un buen diseño web debe contener al menos dos o tres imágenes por página. Recordemos que las páginas completas de texto resultan cansadas de leer. Por otro lado los recursos contrarios podrían dificultar la usabilidad del sitio, aunque pueden ser estéticamente agradables, son excesivamente llamativos y genera la llamada "ceguera a los banners" o "insensibilización a este tipo de recursos". - Persuasión: Convertir los usuarios en clientes. Tener la capacidad de convencer a los visitantes. - Información Precisa: Un buen diseño web debe contener el texto que dice o pretende contener. - Peso y tiempo de carga: Un buen diseño web no debe superar los 100 Kilobytes. Toda aquella página que los supere tardaría excesivamente en cargarse con lo que el internauta podría cansarse y cerrar la ventana antes de ver la web. - Uso de tecnologías: Cada sitio tiene un diseño optimo que encaja perfectamente con su temática, requerimientos y tipo de visitantes. Usar las herramientas correctas que no afecte la accesibilidad a la página y tener en cuenta el diseño para personas con discapacidad. LISTA DE CHEQUEO (CHECKLIST) PARA LA EVALUACION DE SITIOS WEB Actividad a realizar: Ingresa y evalúa los requisitos de tu web en el enlace para acceder a la guía en forma de checklist para la evaluación heurística en base a dimensiones como: identidad, lenguaje y redacción, accesibilidad, layout, elementos multimedia...