Diseño Web

Todo el material usado en estas transparencias se han obtenido de:
Web Programming Step by Step, 2 ed., Jessica Miller, Victoria Kirst, Marty Stepp. Lulu. 2012

Que es usabilidad?

• usabilidad: eficacia con la que los usuarios pueden realizar tareas en un entorno software
• el estudio y mejora de la usabilidad es parte de Interacción hombre-máquina o Human-Computer Interaction (HCI)

Visibilidad y realimentación

• visibilidad: capacidad del usuario para encontrar los controles destinados a su interacción
  • Dónde están?
  • Cuál es su estado? ("están activos o no?")
• realimentación: respuesta del control al usuario antes, durante, o después de una interacción

Problemas comunes en la usabilidad web

• diseño desordenado o pobre
• requiere desplazamiento horizontal, o hace suposiciones sobre el tamaño de la pantalla del usuario
• colores mal elegidos
• usar marcos
• usa pantalla de bienvenida
• controles de navegación pobres o ausentes (atrás, adelante, inicio)
• texto no es legible (no se puede leer rápidamente)

Problemas de usabilidad en el contenido

• el contenido más importante no está en la página inicial
• títulos no descriptivos
• demasiada publicidad (o anuncios que aparecen)
• contenido importante se encuentra en documentos PDF
• diseño que no facilita el indexado de los buscadores
  (título HTML, etiquetas meta, texto de la página, texto de los enlaces, etc.)
• imágenes en miniatura de fotos grandes:

Los usuarios no leen

vs.

• incluye estudiantes

Problemas de usabilidad de enlace

• enlaces mal puestos
• texto inadecuado para un enlace ("Haga clic aquí para obtener más información")
• enlaces que abren forzosamente una nueva ventana del navegador
• enlaces que se abren innecesariamente por Javascript
• los enlaces visitados no aparecen en un color diferente

Problemas de usabilidad funcional

• rendimiento bajo en búsquedas del sitio
• tiene una característica de búsqueda web
• no tener un mapa del sitio u otros medios para navegar por el sitio
• depender de plugins no estándar o versiones del navegador

Sugerencias en el diseño Web

• colocar el nombre y logo en cada página y hacer que el logo enlace a la página de inicio
• proveer de buscador si el sitio tiene más de 100 páginas
• escribir cabeceros directos y simples y títulos de página descriptivos del contenido de la página
• estructurar la página para facilitar la lectura y ayudar a los usuarios ignoran grandes porciones de la página en un solo golpe de vista
• utilizar hipertexto para estructurar el contenido en una página de inicio que proporciona una visión general y varias páginas secundarias centradas en un tema específico
• utilizar enlace a títulos para proporcionar a los usuarios una vista previa del enlace, antes de hacer clic en él

Sugerencias en el diseño Web

• Usar imágenes con relevancia mejorada cuando se usan fotos e imágenes pequeñas
• Asegurar que las páginas importantes son accesibles a los usuarios con discapacidad (especialmente ciegos)
• Seguir a los "grandes": los usuarios esperan la misma funcionalidad en otros sitios. Tener en cuenta la Ley de Jakob (experiencia Web del usuario): los usuarios pasan la mayor parte de su tiempo en otros sitios, así que ahí es donde forman sus expectativas de cómo funciona la Web
• Probar el diseño con usuarios reales. Los usuarios hacen cosas extrañas e inesperadas, por lo que el proyecto máscuidadoso aprenderá de las pruebas de usabilidad

Portales sobre diseño Web

• A List Apart
• CSS Play
• css/edge
• Jeffrey Zeldman Presents
• QuirksMode

Escribiendo para la Web

• Los usuarios leen el texto de las páginas web de manera diferente a los libros, etc.
• Escribir para la web incluye:
  • subtítulos
  • listas con viñetas
  • palabras clave resaltadas
  • párrafos cortos
  • pirámide invertida: poner la información más relevante al inicio y después el resto de la información en orden de importancia, con lo que menos importa al final
  • estilo de escritura simple

Páginas web a evitar

Qué le pasa a cada uno de estos sitios web?

• http://www.corvalliscommunitypages.com/
• http://www.bobmarshall.com/
• http://www.orchy.com/dictionary/
• http://www.riversideartcenter.org/
• http://www.headhunterhairstyling.com/
• más: Top 50 worst websites designs (2017)

Usabilidad y formularios

• validación lado cliente
• resaltado los elementos requeridos dejados en blanco o rellenos incorrectamente
• evitar alert a menos que sea absolutamente necesario

Optimización en buscadores

• conseguir que los usuarios enlacen con su sitio (en particular los portales populares)
• usar palabras clave relevantes en el texto de enlace
• asignar etiquetas meta descriptivas
• usar una URL y título de página que contenga palabras clave para los buscadores
• usar Google Webmaster Tools: https://www.google.com/webmasters/tools/

Diseño accesible

• Todas las persones tienen diferentes habilidades
• Según datos (2008) del INE, en España hay 3,84 millones de personas con discapacidad (visión, audición, comunicación, cognitivo, movilidad, autocuidado, relaciones personales)
• Las discapacidades pueden ser temporales y situacionales y nos afecta a todos
• El diseño que tiene en cuenta todas las habilidades se llama diseño accesible

Herramientas y recursos

Herramientas

• Web Accessability Evaluation Tool: http://wave.webaim.org/
• Color Schemes: http://colorbrewer2.org/
• Color blindness checker: http://www.color-blindness.com/coblis-color-blindness-simulator/
• Text readability: http://juicystudio.com/services/readability.php

Recursos

• Web Content Accessibility Guidelines (something to know about when you apply for jobs): https://www.w3.org/WAI/intro/wcag
• Teach Access Tutorial (general background and covers an important standard called ARIA). http://teachaccess.org/initiatives/tutorial/
• Web design and development course by AccessComputing http://www.washington.edu/accesscomputing/webd2/