Diseño de un producto web

MATERIA 2 CURSO Diseño de un producto Web 2009/10 Responsable: Ismael Viejo www.isdi.es 1

+ DISEÑO DE UN PRODUCTO WEB 1. Cómo preparar un producto web 2. Análisis del producto 3. Claves del diseño 4. Casos prácticos 5. Arquitectura de la información 6. Aspectos estéticos 7. Aspectos técnicos 8. Estándares 9. Accesibilidad 10. Usabilidad 11. Evaluación del proyecto 12. Buenas prácticas 13. Bibliografía y Enlaces de interés Master en Internet Business www.isdi.es 2 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ DESCRIPCIÓN DEL MÓDULO OBJETIVOS ๏ Analizar los puntos esenciales para diseñar un producto web. ๏ Describir los flujos de trabajo y ejecución del proyecto ๏ Análisis del diseño y de contenido ๏ Arquitectura de la información ๏ Revisaremos los aspectos estéticos, técnicos, la usabilidad, la accesibilidad y los estándares a la hora de preparar el diseño de un producto web. ๏ Buenas prácticas para diseñar Master en Internet Business www.isdi.es 3 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ DESCRIPCIÓN DEL MÓDULO PREDISEÑO ORGANIZACIÓN Master en Internet Business www.isdi.es 4 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ DESCRIPCIÓN DEL MÓDULO ANÁLISIS del PREDISEÑO PROYECTO ORGANIZACIÓN CONTENIDO OBJETIVOS Master en Internet Business www.isdi.es 5 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ DESCRIPCIÓN DEL MÓDULO ANÁLISIS del PREDISEÑO PROYECTO ASPECTOS ORGANIZACIÓN ESTÉTICOS CONTENIDO OBJETIVOS Master en Internet Business www.isdi.es 6 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ DESCRIPCIÓN DEL MÓDULO ANÁLISIS del PREDISEÑO PROYECTO ASPECTOS ORGANIZACIÓN ESTÉTICOS CONTENIDO OBJETIVOS ASPECTOS TÉCNICOS Master en Internet Business www.isdi.es 7 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ DESCRIPCIÓN DEL MÓDULO ANÁLISIS del PREDISEÑO PROYECTO ASPECTOS ORGANIZACIÓN ESTÉTICOS CONTENIDO OBJETIVOS ASPECTOS TEST TÉCNICOS del PROYECTO Master en Internet Business www.isdi.es 8 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ DESCRIPCIÓN DEL MÓDULO ANÁLISIS del PREDISEÑO PROYECTO ASPECTOS ORGANIZACIÓN ESTÉTICOS CONTENIDO OBJETIVOS BUENAS ASPECTOS TEST PRÁCTICAS TÉCNICOS del PROYECTO PARA DISEÑAR Master en Internet Business www.isdi.es 9 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1 CÓMO PREPARAR UN PRODUCTO WEB 1) PREDISEÑO 2) DEFINICIÓN DEL PROYECTO 3) SEGUIMIENTO DEL PROYECTO Master en Internet Business www.isdi.es 10 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.1 PREDISEÑO. CONSEJOS RÁPIDOS PRIMERAS IDEAS Master en Internet Business www.isdi.es 11 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.1 PREDISEÑO. CONSEJOS RÁPIDOS ๏ Pensar el proyecto web antes de escribir una sola línea de código Master en Internet Business www.isdi.es 12 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.1 PREDISEÑO. CONSEJOS RÁPIDOS ๏ Pensar el proyecto web antes de escribir una sola línea de código ๏ Escribir Master en Internet Business www.isdi.es 13 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.1 PREDISEÑO. CONSEJOS RÁPIDOS ๏ Pensar el proyecto web antes de escribir una sola línea de código ๏ Escribir Master en Internet Business www.isdi.es 14 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.1 PREDISEÑO. CONSEJOS RÁPIDOS ๏ Pensar el proyecto web antes de escribir una sola línea de código ๏ Escribir ๏ Pensando en el usuario Master en Internet Business www.isdi.es 15 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.1 PREDISEÑO. CONSEJOS RÁPIDOS ๏ Pensar el proyecto web antes de escribir una sola línea de código ๏ Escribir ๏ Pensando en el usuario ๏ Interacción humana Master en Internet Business www.isdi.es 16 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.1 PREDISEÑO. CONSEJOS RÁPIDOS ๏ Pensar el proyecto web antes de escribir una sola línea de código ๏ Escribir ๏ Pensando en el usuario ๏ Interacción humana ๏ Lenguaje propio Master en Internet Business www.isdi.es 17 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO DOCUMENTOS PROTOTIPOS WIREFRAMES FUNCIONALES INTERACTIVOS Master en Internet Business www.isdi.es 18 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO ESCRIBIR ๏ Documentos funcionales (PRD) Master en Internet Business www.isdi.es 19 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO ESCRIBIR ๏ Documentos funcionales (PRD) ๏ Buscar la comprensión entre los participantes en el proyecto Master en Internet Business www.isdi.es 20 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO ESCRIBIR ๏ Documentos funcionales (PRD) ๏ Buscar la comprensión entre los participantes en el proyecto DEFINIR ๏ Tiempos de ejecución ๏ Contenidos / acuerdos con externos ๏ Estructura / Navegación ๏ Estadísticas / Espectativas ๏ Publicidad / Segmentación ๏ SEO / SEM ... Master en Internet Business www.isdi.es 21 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO DOCUMENTOS FUNCIONALES. WIKI ๏ Crear y compartir páginas, documentos y contenido enriquecido con tu equipo Master en Internet Business www.isdi.es 22 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO DOCUMENTOS FUNCIONALES. WIKI ๏ Crear y compartir páginas, documentos y contenido enriquecido con tu equipo VENTAJAS ✓ Un único documento ✓ Recuperar versiones anteriores ✓ Creación de documentos públicos y privados ✓ Crear grupos y espacios de trabajo ✓ Reduce el tráfico de información vital por correo web Master en Internet Business www.isdi.es 23 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO DOCUMENTOS FUNCIONALES. WIKI Master en Internet Business www.isdi.es 24 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO WIREFRAMES ๏ Guía visual que muestra la estructura básica de una web y la relación entre sus páginas Master en Internet Business www.isdi.es 28 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO WIREFRAMES ๏ Guía visual que muestra la estructura básica de una web y la relación entre sus páginas Master en Internet Business www.isdi.es 29 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO WIREFRAMES ๏ Guía visual que muestra la estructura básica de una web y la relación entre sus páginas VENTAJAS ✓ Mejorar la usabilidad ✓ Permite escribir menos ✓ Llegar a un acuerdo antes ✓ Llegar al cliente antes Master en Internet Business www.isdi.es 30 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO WIREFRAMES Master en Internet Business www.isdi.es 31 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO WIREFRAMES Master en Internet Business www.isdi.es 32 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO PROTOTIPOS INTERACTIVOS ๏ Representación preparada para estudiar el uso y comportamiento del sitio web. Master en Internet Business www.isdi.es 33 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO PROTOTIPOS INTERACTIVOS ๏ Representación preparada para estudiar el uso y comportamiento del sitio web. VENTAJAS ✓ Mejorar la efectividad del wireframe ✓ Ver los problemas de navegación más rápido ✓ Siempre son útiles Master en Internet Business www.isdi.es 34 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO PROTOTIPOS INTERACTIVOS ๏ Representación preparada para estudiar el uso y comportamiento del sitio web. VENTAJAS ✓ Mejorar la efectividad del wireframe ✓ Ver los problemas de navegación más rápido ✓ Siempre son útiles ADVERTENCIA ✴ Fidelidad comprometida Master en Internet Business www.isdi.es 35 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.2 DEFINICIÓN DEL PROYECTO CLAVE: ANÁLISIS DEL COMPORTAMIENTO ๏ PRIMERO: comportamiento ๏ Después, diseño Master en Internet Business www.isdi.es 36 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.3 SEGUIMIENTO DEL PROYECTO Día a Día Master en Internet Business www.isdi.es 37 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.3 SEGUIMIENTO DEL PROYECTO HERRAMIENTAS DE CONTROL ๏ Sistema de asignación y seguimiento de tareas VENTAJAS ✓ Asignación de nuevas tareas ✓ Mejoras, Bugs, incidencias ✓ Grupos de tareas. Mismo proyecto Master en Internet Business www.isdi.es 38 MÓDULO III DISEÑO DE UN PRODUCTO WEB

1.3 SEGUIMIENTO DEL PROYECTO HERRAMIENTAS DE CONTROL ๏ Sistema de asignación y seguimiento de tareas Master en Internet Business www.isdi.es 39 MÓDULO III DISEÑO DE UN PRODUCTO WEB

2 ANÁLISIS DEL PRODUCTO 1) OBJETIVOS 2) PÚBLICO 3) ESTRUCTURA 4) ELEMENTOS ORGANIZATIVOS Master en Internet Business www.isdi.es 40 MÓDULO III DISEÑO DE UN PRODUCTO WEB

2.1 OBJETIVOS PARTICIPACIÓN ๏ Conviene que participen desde el principio todas las personas que vayan a desempeñar tareas en el proyecto. PUNTOS CLAVES ๏ ¿Para quiénes? Público ๏ ¿Qué? Objetivos empresa ๏ ¿Cómo? Arquitectura de la Información ๏ Usuarios ๏ Competencia Master en Internet Business www.isdi.es 41 MÓDULO III DISEÑO DE UN PRODUCTO WEB

2.2 PÚBLICO IDENTIFICACIÓN DEL PÚBLICO ๏ Target INFLUENCIAS ๏ Mensaje básico que se quiere transmitir ๏ A quién va dirigido y cómo influye en el diseño ๏ Qué tipo de web o servicio utilizar Master en Internet Business www.isdi.es 42 MÓDULO III DISEÑO DE UN PRODUCTO WEB

2.3 ESTRUCTURA MODELO DE NEGOCIO ๏ Pensar la Web como un medio propio de comunicación ANALIZAR EL CONTENIDO POR SECCIONES Pensar diferentes arquitecturas, dependiendo del contenido ๏ Información ๏ Educativa ๏ Comercial ๏ Servicios (Foros, Blogs) ๏ Corporativa Master en Internet Business www.isdi.es 43 MÓDULO III DISEÑO DE UN PRODUCTO WEB

2.4 ELEMENTOS ORGANIZATIVOS ESTRUCTURA ๏ Las páginas ๏ Relaciones entre las páginas: Estructura ๏ Localización y acceso a otras áreas CONTENIDOS ๏ Criterios de búsqueda ๏ Evitar paginación para buscar contenido Master en Internet Business www.isdi.es 44 MÓDULO III DISEÑO DE UN PRODUCTO WEB

3 CLAVES DEL DISEÑO 1) BÁSICOS DEL DISEÑO 2) REGLAS DE LA SIMPLICIDAD Master en Internet Business www.isdi.es 45 MÓDULO III DISEÑO DE UN PRODUCTO WEB

3.1 BÁSICOS DEL DISEÑO PUNTOS ESENCIALES ๏ Herramienta de comunicación ๏ Simple antes que recargado ๏ Privilegie el contenido ๏ Contenido comprensible ๏ Usable ๏ Accesible ADVERTENCIAS ✴ No es un escenario personal Master en Internet Business www.isdi.es 46 MÓDULO III DISEÑO DE UN PRODUCTO WEB

3.1 BÁSICOS DEL DISEÑO PUNTOS ESENCIALES ๏ Simple antes que recargado Master en Internet Business www.isdi.es 47 MÓDULO III DISEÑO DE UN PRODUCTO WEB

3.2 REGLAS DE LA SIMPLICIDAD PUNTOS ESENCIALES DE LA SIMPLICIDAD ๏ Eliminad opciones ๏ Esconder opciones ๏ Agrupar y colocar opciones ๏ Buscar un único punto de atención ADVERTENCIAS ✴ La simplicidad ocurre en la mente del usuario ✴ Su experiencia determina cuando algo es simple o fácil ✴ Hay que creer en lo que dicen nuestros usuarios Master en Internet Business www.isdi.es 50 MÓDULO III DISEÑO DE UN PRODUCTO WEB

3.2 REGLAS DE LA SIMPLICIDAD PUNTOS ESENCIALES ๏ Esconder opciones Master en Internet Business www.isdi.es 51 MÓDULO III DISEÑO DE UN PRODUCTO WEB

3.2 REGLAS DE LA SIMPLICIDAD PUNTOS ESENCIALES ๏ Agrupar y colocar opciones Master en Internet Business www.isdi.es 52 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4 CASOS PRÁCTICOS 1) DISEÑAR CONTENIDOS 2) DISEÑAR INTERFAZ Master en Internet Business www.isdi.es 53 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.1 DISEÑAR CONTENIDOS BUSCAR LEGIBILIDAD ๏ Título: Debe atraer la atención. Informar del contenido. Breve ๏ Contenido de calidad ๏ Redactar pensando que es para un medio online ๏ Espacios en blanco. Párrafos. Listas ๏ Dar formato al texto ๏ Evitar los párrafos largos salvo estrictamente necesarios ๏ Crear un estilo propio ๏ Enlazar Master en Internet Business www.isdi.es 54 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.1 DISEÑAR CONTENIDOS BUSCAR LEGIBILIDAD Master en Internet Business www.isdi.es 55 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.1 DISEÑAR CONTENIDOS BUSCAR LEGIBILIDAD Master en Internet Business www.isdi.es 56 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ BUSCAR USABILIDAD ๏ Claro. Evidente ๏ Conciso. Evitar mucha palabrería ๏ Familiar. Respetar los hábitos ๏ Eficiente ๏ Responder. Rápido & Feedback ๏ Atractivo. Invitar al lector Master en Internet Business www.isdi.es 57 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO USABILIDAD: MENÚ DE NAVEGACIÓN ✓ Conectar la pestaña activa con el contenido ✓ Dar a las otras solapas otro color Master en Internet Business www.isdi.es 58 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO USABILIDAD: MENÚ DE NAVEGACIÓN ✓ Cambiar el color de la fuente de la solapa activa ✓ Definir toda la solapa como área de enlace Master en Internet Business www.isdi.es 59 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO USABILIDAD: CURSOR DEL RATÓN ✓ Al estilar con css, activar el cursor de texto .labelX { cursor: text; } ✓ Cursor de enlace .botonX { cursor: pointer; } Master en Internet Business www.isdi.es 60 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO USABILIDAD: MENÚ DE NAVEGACIÓN Master en Internet Business www.isdi.es 61 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO USABILIDAD: EVIDENTE Master en Internet Business www.isdi.es 67 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO USABILIDAD: EVIDENTE Master en Internet Business www.isdi.es 68 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO ATRACTIVO Master en Internet Business www.isdi.es 69 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO ATRACTIVO Master en Internet Business www.isdi.es 70 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO ATRACTIVO Y FAMILIAR Master en Internet Business www.isdi.es 71 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO USABILIDAD Master en Internet Business www.isdi.es 72 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJEMPLO: FEEDBACK CON EL USUARIO Master en Internet Business www.isdi.es 73 MÓDULO III DISEÑO DE UN PRODUCTO WEB

4.2 DISEÑAR UN INTERFAZ EJ. INTERFAZ MULTI_TOUCH ๏ Pantallas gigantes ๏ Resoluciones incontrolables ๏ Otros retos de maquetación diferentes http://vimeo.com/5486749 http://vimeo.com/4584354 Master en Internet Business www.isdi.es 77 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5 ARQUITECTURA DE LA INFORMACIÓN 1) DEFINICIÓN 2) TIPOS DE ARQUITECTURA 3) OTROS ELEMENTOS PARTICIPATIVOS EN LA ARQUITECTURA 4) LA INFORMACIÓN FUERA DE NUESTRA ARQUITECTURA Master en Internet Business www.isdi.es 78 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.1 OBJETIVOS ARQ. DE LA INFORMACIÓN PUNTOS ESENCIALES DE LA ARQUITECTURA ๏ Planificación http://www.youtube.com/watch?v=iVFTBj_BYy0 ๏ Análisis ๏ Modelos de organización de los contenidos de una web OBJETIVOS ๏ Hacer el sito web más usable ๏ Satisfacer la expectación del usuario VENTAJAS ✓ Los usuarios vuelven una y otra vez ✓ Mejora la percepción de la marca Master en Internet Business www.isdi.es 79 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA PUNTOS ESENCIALES ๏ Organizar el contenido, tipos de páginas, secciones, contenidos... ๏ Elegir un tipo de arquitectura o estructura visual y organizativa Master en Internet Business www.isdi.es 80 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA TIPOS DE ARQUITECTURAS ๏ Lineal ๏ Jerárquica ๏ Reticular ๏ Paralelo ๏ Matriz ๏ Zoom jerárquico ๏ Tags ๏ Mapas, 3D... Master en Internet Business www.isdi.es 81 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA LINEAL ๏ Elementos correlativos Master en Internet Business www.isdi.es 82 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA LINEAL ๏ Elementos correlativos 1 2 3 4 Master en Internet Business www.isdi.es 84 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA LINEAL ๏ Elementos correlativos 1 2 3 4 100% 70% 40% 15% Master en Internet Business www.isdi.es 85 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA LINEAL ๏ Elementos correlativos 1 2 Master en Internet Business www.isdi.es 86 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA LINEAL ๏ Elementos correlativos 1 2 100% 85% Master en Internet Business www.isdi.es 87 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA JERÁRQUICA ๏ Los elementos pertenecen o dependen de uno principal Master en Internet Business www.isdi.es 91 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA RETICULAR ๏ Diferentes elementos interrelacionados Master en Internet Business www.isdi.es 95 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA RETICULAR ๏ Diferentes elementos interrelacionados Master en Internet Business www.isdi.es 96 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA PARALELO ๏ Informaciones simultáneas y de mismo valor informativo Master en Internet Business www.isdi.es 97 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA MATRIZ ๏ Retícula organizada Master en Internet Business www.isdi.es 102 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA ZOOM JERÁRQUICO ๏ Visión ampliada del contenido Master en Internet Business www.isdi.es 106 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA TAGS ๏ Etiquetas y secciones en vivo Master en Internet Business www.isdi.es 109 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA TAGS ๏ Etiquetas y secciones en vivo Master en Internet Business www.isdi.es 110 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA INFORMACIÓN ESPACIAL ๏ Miradas e información relacionadas con el espacio Master en Internet Business www.isdi.es 111 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.2 TIPOS DE ARQUITECTURA INFORMACIÓN ESPACIAL ๏ Miradas e información relacionadas con el espacio 3D ๏ http://www.youtube.com/watch?v=ZzXU7Ai3y2U Master en Internet Business www.isdi.es 114 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.3 OTROS ELEMENTOS PARTICIPATIVOS TAMBIÉN INFLUYEN EN LA ARQUITECTURA ๏ Paginación / AJAX ๏ Resultados en el buscador ๏ Ordenación de tipos o formatos de contenidos ๏ BBDD Master en Internet Business www.isdi.es 115 MÓDULO III DISEÑO DE UN PRODUCTO WEB

5.4 CONTENIDOS FUERA DE NUESTRA WEB EL SOPORTE NO IMPORTA ๏ Móviles ๏ Consolas, http://www.youtube.com/xl ๏ Twitter, Facebook ๏ Widgets ๏ RSS ๏ Listas de correo ๏ Comentarios de los usuarios ... ๏ Realidad Aumentada: http://www.youtube.com/watch? v=0z_Q3yl4NjM Master en Internet Business www.isdi.es 116 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6 ASPECTOS ESTÉTICOS 1) COMPOSICIÓN 2) USO DEL COLOR 3) IMÁGENES 4) TIPOGRAFÍA 5) ICONOGRAFÍA Master en Internet Business www.isdi.es 117 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.1 COMPOSICIÓN ESTILO ๏ Cuidar el estilo. Personalidad ๏ Conseguir homogeneidad ๏ Cuidar los tamaños y tipos de fuentes ๏ Combinación de colores ๏ Iconografía ๏ Vigilar el target o público objetivo Master en Internet Business www.isdi.es 118 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.1 COMPOSICIÓN EJEMPLO SITIO WEB DE INFORMACIÓN Master en Internet Business www.isdi.es 119 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.1 COMPOSICIÓN EJEMPLO MICROSITE ESPECIAL Master en Internet Business www.isdi.es 120 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.1 COMPOSICIÓN EJEMPLO SITIO WEB INFANTIL Master en Internet Business www.isdi.es 121 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.2 USO DEL COLOR BUENAS PRÁCTICAS ๏ Trabajar el contraste. Facilita la usabilidad y accesibilidad ๏ Diferenciar el color de los enlaces del texto sin enlazar ๏ Menús de interacción diferenciados de zona de lectura ๏ El color dominante debe permitir una lectura clara ADVERTENCIAS ✴ No todos los usuarios tienen la misma configuración de colores ✴ Compara con diferentes monitores y resoluciones el trabajo Master en Internet Business www.isdi.es 122 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.2 USO DEL COLOR EJEMPLO. WEB INFANTIL Master en Internet Business www.isdi.es 123 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.2 USO DEL COLOR EJEMPLO. MENÚ DE NAVEGACIÓN Master en Internet Business www.isdi.es 124 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.2 USO DEL COLOR EJEMPLO USO DEL CONTRASTE Master en Internet Business www.isdi.es 125 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.3 IMÁGENES BUENAS PRÁCTICAS ๏ Las imágenes grandes son más observadas que las pequeñas ๏ Las imágenes atraen y distraen a la vez. Es importante limitar los elementos gráficos ๏ Las animaciones son molestas ๏ Optimizar la compresión de las imágenes. JPGs GIFs, ppp ๏ Utilizar el formato inadecuado puede triplicar su peso ๏ Reutilizar las imágenes favorece la velocidad de carga Master en Internet Business www.isdi.es 126 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.4 TIPOGRAFÍA LIMITACIONES A TENER EN CUENTA ๏ Las familias tipográficas en cada Sistema Operativo son diferentes ๏ Asegurarse de usar fuentes compatibles ✴ http://vimeo.com/6993808 Master en Internet Business www.isdi.es 127 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.4 TIPOGRAFÍA RECOMENDACIONES ๏ Las tipografías Sans-Serif (sin remates) son más apropiadas para la web ๏ Suficiente contraste con color el fondo ๏ Vigilar efecto ceguera a los banners ๏ A menor longitud de línea, mayor velocidad de lectura ๏ El texto justificado funcional mal en los sitios web ๏ No usar más de dos fuentes diferentes ๏ Las cursivas son poco legibles. Usarlas en tamaños suficientemente grandes ๏ El subrayado puede confundirse con un enlace Master en Internet Business www.isdi.es 128 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.4 TIPOGRAFÍA FAMILIAS COMPATIBLES Master en Internet Business www.isdi.es 129 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.4 TIPOGRAFÍA HERRAMIENTAS DE TIPOGRAFÍA PARA WEB CSS Type Set te permite visualizar e interactuar con el estilo de la tipografía y generar el código CSS Master en Internet Business www.isdi.es 130 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.4 TIPOGRAFÍA HERRAMIENTAS DE TIPOGRAFÍA PARA WEB Typetester te para comparar distintas fuentes en la misma ventana Master en Internet Business www.isdi.es 131 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.4 TIPOGRAFÍA HERRAMIENTAS DE TIPOGRAFÍA PARA WEB WhatTheFont te permite escanear dentro de una página la fuente que se está mostrando. Master en Internet Business www.isdi.es 132 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.5 ICONOGRAFÍA USOS ๏ Uso habitual para facilitar la navegación ๏ Su uso evita tener que leer textos Master en Internet Business www.isdi.es 133 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.5 ICONOGRAFÍA USOS ๏ Uso habitual para facilitar la navegación ๏ Su uso evita tener que leer textos ADVERTENCIAS ✴ No se reconocen más rápido que los textos ✴ Son subjetivos y están expuestos a la interpretación ✴ Evitar crear falsas expectaciones (iconos que no enlazan o malas interpretaciones) ✴ Uso correcto de su significado. Tener a la estandarización Master en Internet Business www.isdi.es 134 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.5 ICONOGRAFÍA ERRORES A LA HORA DE DISEÑAR ICONOS ✴ Poca diferencia entre iconos similares ✴ Demasiados elementos ✴ Falta de consistencia visual Master en Internet Business www.isdi.es 135 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.5 ICONOGRAFÍA ERRORES A LA HORA DE DISEÑAR ICONOS ✴ Poca diferencia entre iconos similares ✴ Demasiados elementos ✴ Falta de consistencia visual PUNTOS CLAVES PARA DISEÑAR ICONOS ๏ Debido al riesgo de interpretación, no pueden depender únicamente de la inspiración o de las preferencias del diseñador. ๏ Crear versiones, prototipos ๏ Realizar tests Master en Internet Business www.isdi.es 136 MÓDULO III DISEÑO DE UN PRODUCTO WEB

6.5 ICONOGRAFÍA EJEMPLOS Master en Internet Business www.isdi.es 137 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7 ASPECTOS TÉCNICOS 1) ENTORNOS DE TRABAJO 2) NAVEGADORES 3) RESOLUCIONES DE PANTALLA 4) HTML, CSS y USO DEL FLASH Master en Internet Business www.isdi.es 141 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.1 ENTORNOS DE TRABAJO ENTORNOS ๏ Desarrollo ๏ PRE. Preproducción ๏ PRO. Producción CONTROL DE VERSIONES ๏ Se puede realizar de manera manual ๏ Es aconsejable disponer de herramientas que lo faciliten CVS, SVN, SourceSafe... Master en Internet Business www.isdi.es 142 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.2 NAVEGADORES USER AGENT ๏ A todo lo que accede a la web se le llama User Agent ๏ Los UA más comunes son los navegadores ๏ Otros UA: robots de buscadores, teléfonos móviles, etc... Master en Internet Business www.isdi.es 143 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.2 NAVEGADORES USER AGENT ๏ A todo lo que accede a la web se le llama User Agent ๏ Los UA más comunes son los navegadores ๏ Otros UA: robots de buscadores, teléfonos móviles, etc... ADVERTENCIAS ✴ Una web se tiene que ver bien en todos los navegadores ✴ Ningún navegador implementa al 100% los estándares Master en Internet Business www.isdi.es 144 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.3 RESOLUCIONES DE PANTALLA DEFINICIÓN ๏ Número de píxeles por pulgada que pueden ser mostrados en la pantalla. Producto de filas x columnas Master en Internet Business www.isdi.es 145 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.3 RESOLUCIONES DE PANTALLA (vídeo) Master en Internet Business www.isdi.es 146 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.3 RESOLUCIONES DE PANTALLA DEFINICIÓN ๏ Número de píxeles por pulgada que pueden ser mostrados en la pantalla. Producto de filas x columnas ๏ El producto de filas por columnas es el ratio Master en Internet Business www.isdi.es 147 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.3 RESOLUCIONES DE PANTALLA DEFINICIÓN ๏ Número de píxeles por pulgada que pueden ser mostrados en la pantalla. Producto de filas x columnas ๏ El producto de filas por columnas es el ratio Master en Internet Business www.isdi.es 148 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.3 RESOLUCIONES DE PANTALLA PUNTOS CLAVES ๏ No diseñar para una única resolución ๏ No olvidar los dispositivos que no son de sobremesa: portátiles, iPhone, etc.. ๏ Analizar las estadísticas para conocer la resolución de pantalla más común entre tus usuarios y utilizar ese espacio para los puntos claves del sitio web MESAS INTERACTIVAS ๏ http://www.youtube.com/watch?v=v_AvkV286mI Master en Internet Business www.isdi.es 149 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.4 HTML, CSS y USO DEL FLASH HTML (HyperText Markup Language) ๏ Es el lenguaje utilizado para construir la estructura y el contenido en forma de texto. ๏ Se completa sea información con objetos como imágenes, sonidos o vídeos. CSS (Cascading Style Sheets) ๏ Es el lenguaje utilizado para definir la presentación Flash ๏ Aplicación para soportes de animaciones, audio y vídeo. Master en Internet Business www.isdi.es 150 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.4 HTML, CSS y USO DEL FLASH EJEMPLOS ETIQUETAS HTML <h1></h1> <h2></h2> <h1 class=”title”>Título página</h1> <h2 class=”section”>Subtítulo sección</h2> CSS (Cascading Style Sheets) .title {font-size:1em; color:red;} .section {font-size:0.7em; color:green;} EJEMPLO Título página Subtítulo sección Master en Internet Business www.isdi.es 151 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.4 HTML, CSS y USO DEL FLASH EJEMPLO HTML. ESTRUCTURA BÁSICA <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="/css/estilos.css" type="text/css" /> <title>Mi web</title> </head> <body> <h1>Aquí va el contenido</h1> <p>Web</p> </body> </html> Master en Internet Business www.isdi.es 152 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.4 HTML, CSS y USO DEL FLASH EJEMPLO USO DEL FLASH: BANNERS Master en Internet Business www.isdi.es 153 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.4 HTML, CSS y USO DEL FLASH EJEMPLO USO DEL FLASH: BANNERS Master en Internet Business www.isdi.es 154 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.4 HTML, CSS y USO DEL FLASH EJEMPLO USO DEL FLASH: JUEGOS Master en Internet Business www.isdi.es 155 MÓDULO III DISEÑO DE UN PRODUCTO WEB

7.4 HTML, CSS y USO DEL FLASH EJEMPLO USO DEL FLASH: VIDEO/AUDIO PLAYERS Master en Internet Business www.isdi.es 156 MÓDULO III DISEÑO DE UN PRODUCTO WEB

8 ESTÁNDARES 1) ¿QUÉ SON LOS ESTÁNDARES? 2) ¿QUIÉN LOS HACE? 3) VENTAJAS Master en Internet Business www.isdi.es 157 MÓDULO III DISEÑO DE UN PRODUCTO WEB

8.1 ¿QUÉ SON LOS ESTÁNDARES? ESTÁNDAR ๏ Modelo a seguir al hacer algo ๏ Conjunto de documentos y reglas necesarias ๏ Es lo contrario de “tecnología propietaria”. OBJETIVO DE LOS ESTÁNDARES ๏ La creación y el posterior uso correcto de un producto EJEMPLO ๏ Código de barras ✓ Todos los fabricantes y etiquetadores siguen e interpretan las mismas indicaciones Master en Internet Business www.isdi.es 158 MÓDULO III DISEÑO DE UN PRODUCTO WEB

8.2 ¿QUIÉN HACE LOS ESTÁNDARES? EL CASO DE INTERNET Y EL DESARROLLO DE LA WEB ๏ ORGANIZACIÓN: Wide Web Consortium (W3C) ๏ Todos pueden participar con críticas, mejoras y sugerencias ๏ Otras organizaciones ALGUNOS ESTÁNDARES EN LA WORLD WIDE WEB ๏ HTML, XML (ficheros), CSS, SOAP(app. java), XMLRPC (trans. datos http) Master en Internet Business www.isdi.es 159 MÓDULO III DISEÑO DE UN PRODUCTO WEB

8.3 VENTAJAS ¿VALE LA PENA SEGUIR LOS ESTÁNDARES? ✓ Se ahorra tiempo: el lenguaje es preciso ✓ Cuesta menos mantener las páginas. Contenido mejor estructurado ✓ Cada página ocupa menos ✓ Menos problemas de compatibilidad ✓ Evita problemas al usuario Master en Internet Business www.isdi.es 160 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9 ACCESIBILIDAD 1) DEFINICIÓN. WAI 2) ¿QUÉ ES LA W3C? 3) ¿POR QUÉ SON IMPORTANTES LOS ESTÁNDARES? 4) OBJETIVOS 5) ¿CÓMO CONSEGUIR LOS OBJETIVOS? 6) ESTUDIOS Y EJEMPLOS Master en Internet Business www.isdi.es 161 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.1 DEFINICIÓN DE ACCESIBILIDAD ¿QUÉ ES LA ACCESIBILIDAD? ๏ Es el grado en el que todas las personas pueden visitar un sitio web o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas ๏ Hablar de accesibilidad es hablar de un acceso universal WAI (Web Accesibility Initiative) ๏ Iniciativa de Accesibilidad Web ๏ Objetivo: facilitar el aceso de las personas con discapacidad ๏ Desarrollando pautas y herramientas de accesibilidad para satisfacer los objetivos del w3c Master en Internet Business www.isdi.es 162 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.2 ¿QUÉ ES EL W3C? WORLD WIDE WEB CONSORTIUM ๏ Organismo neutro ๏ Fundado en 1994 Tim Berners-Lee ๏ Existen diferentes actividades y Grupos del w3c ๏ 60 Personas en el equipo w3c ๏ 410 miembros ๏ 40 relaciones con otros organismos estandarizadores QUÉ HACE EL W3C ๏ Marca directrices sobre los estándares (css, xml, http, etc) Master en Internet Business www.isdi.es 163 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.3 ¿POR QUÉ SON IMPORTANTES LOS ESTÁNDARES? CARACTERÍSTICAS PRINCIPALES DE LOS ESTÁNDARES ✓ Abiertos ✓ Gratuitos ✓ La tecnología estándar debería estar libre de derechos Master en Internet Business www.isdi.es 164 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.4 OBJETIVOS OFRECER UNA WEB ÚNICA ๏ Misma información y servicios a todos los usuarios ACCESO INDEPENDIENTE ... ๏ De las características técnicas de los dispositivos (PDAs, PCs, teléfonos, TV, Consolas, etc.) ๏ De las limitaciones de ancho de banda ๏ De los dispositivos de salida: resoluciones, color, sonido, etc. ๏ De las discapacidades de los usuarios: Dislexia, ceguera, sordera, dificultades en manejo de teclados, ratón, etc. Master en Internet Business www.isdi.es 165 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.4 OBJETIVOS SÍNTESIS DE LOS PUNTOS DE VERIFICACIÓN ๏ Contraste: analizador de Contraste de Color ๏ Tablas: <th>... Marcadores para asociar celdas de encabezamiento y celdas de datos ๏ Encabezados. <h1> <h2>... Uso racional de los encabezados ๏ CSS. Evaluación sin hoja de estilo. Unidades de posicionamiento, tamaño de fuentes, tamaños de elementos estructurales definidos en unidades relativas ๏ Imágenes. “alt” Evaluar textos alternativos ๏ Formularios. <label> Evaluación de las etiquetas descriptivas ๏ Uso de scripts, enlaces, Lectores de pantalla (definciencia visual) Reconocimiento de voz (movilidad reducida), etc. Master en Internet Business www.isdi.es 166 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.5 ¿CÓMO CONSEGUIR LOS OBJETIVOS? ALCANZAR LA UNIVERSALIDAD ๏ Diseñar para usuarios con discapacidades ๏ Que sean capaces de satisfacer sus necesidades OTRAS SITUACIONES A ANALIZAR ๏ Escaso ancho de banda ๏ Equipos informáticos viejos ๏ Personas mayores ๏ Novatos en la web ๏ Información accesible a robots de indexación... Master en Internet Business www.isdi.es 167 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.6 ESTUDIOS Y EJEMPLOS CERTIFICACIONES ๏ Niveles de accesibilidad: A, AA, AAA ๏ Validación del HTML ๏ Validación del CSS ALCANCE ๏ Bajo nivel de accesibilidad en España ๏ La gran mayoría de los sitios web no llegan al nivel de cumplimiento requerido por la ley Master en Internet Business www.isdi.es 168 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.6 ESTUDIOS Y EJEMPLOS COLOR ๏ Usar un contraste efectivo entre color frontal y color de fondo Master en Internet Business www.isdi.es 169 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.6 ESTUDIOS Y EJEMPLOS COLOR ✴ Colores iguales para gente con problemas visuales Master en Internet Business www.isdi.es 170 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.6 ESTUDIOS Y EJEMPLOS COLOR ✴ Colores iguales para gente con problemas visuales ITV BBC ONE ✓ Incorporar leyenda en el gráfico Master en Internet Business www.isdi.es 171 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.6 ESTUDIOS Y EJEMPLOS ENLACES ✓ Diferenciar bien los enlaces Master en Internet Business www.isdi.es 172 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.6 ESTUDIOS Y EJEMPLOS TEXTO ALTERNATIVO EN IMÁGENES <alt> ✴ El texto alternativo duplica la información que acompaña a la imagen Master en Internet Business www.isdi.es 173 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.6 ESTUDIOS Y EJEMPLOS ALTERNATIVA A LOS SCRIPTS ✴ Enlaces JavaScript sin alternativa (en el caso de que no esté soportado JavaScript) Master en Internet Business www.isdi.es 174 MÓDULO III DISEÑO DE UN PRODUCTO WEB

9.6 ESTUDIOS Y EJEMPLOS DOCS. DE ACCESIBILIDAD DE LOS PRODUCTOS DE GOOGLE ๏ http://www.google.com/accessibility/resources.html ๏ Objetivo: Información disponible para todo el mundo OFRECE DIFERENTES ALTERNATIVAS DE ACCESO ✓ Atajos de teclado. Shortcuts ✓ Altos contrastes de color ✓ Tecnologías texto hablado. text-to-speech ✓ ¡Ayuda todo el mundo! no sólo discapacitados Master en Internet Business www.isdi.es 175 MÓDULO III DISEÑO DE UN PRODUCTO WEB

10 USABILIDAD 1) DEFINICIÓN 2) PRINCIPIOS BÁSICOS 3) EJEMPLOS Master en Internet Business www.isdi.es 176 MÓDULO III DISEÑO DE UN PRODUCTO WEB

10.1 DEFINICIÓN USABILIDAD INTERACCIÓN PERSONA-ORDENADOR ๏ Facilidad con que las personas puede utilizar un sitio web en particular con el fin de alcanzar un objetivo concreto ๏ La claridad con la que se diseña la interacción del sitio web GRADO DE USABILIDAD ๏ Es una medida empírica (No son opiniones o sensaciones) realizada en laboratorios o test de usabilidad y es relativa al uso del mismo ๏ Depende de las metas planteadas ๏ Es una experiencia que sucede en el usuario Master en Internet Business www.isdi.es 177 MÓDULO III DISEÑO DE UN PRODUCTO WEB

10.2 PRINCIPIOS BÁSICOS PUNTOS CLAVES ๏ Facilidad de aprendizaje. Familiaridad, Sintetización ๏ Flexibilidad. Posibilidades. Multiplicidad ๏ Robustez. Facilidad para cumplir sus objetivos UN SITIO WEB USABLE DEBE SER: ✓ Entendible. Fácil de interactuar ✓ Novedoso ✓ Comprensible ✓ Inteligente ✓ Atractivo Master en Internet Business www.isdi.es 178 MÓDULO III DISEÑO DE UN PRODUCTO WEB

10.1 EJEMPLOS OBJETIVOS Y METAS BIEN PLANTEADAS ✓ Facilidad para alcanzar el objetivo y claridad de interacción Master en Internet Business www.isdi.es 179 MÓDULO III DISEÑO DE UN PRODUCTO WEB

10.1 EJEMPLOS DISTRAER ✴ Evitar distraer la atención http://www.youtube.com/watch?v=qide9Z4PWG8 Master en Internet Business www.isdi.es 180 MÓDULO III DISEÑO DE UN PRODUCTO WEB

10.1 EJEMPLOS DISTRAER ✴ Evitar animaciones http://www.lingscars.com/ Master en Internet Business www.isdi.es 181 MÓDULO III DISEÑO DE UN PRODUCTO WEB

10.3 CÓMO LEEMOS HÁBITOS DE LECTURA INICIAL. PORTADAS. ๏ No leemos. Escaneamos ๏ Buscamos una palabra o imagen de referencia ๏ Leemos de izquierda a derecha pero de manera discontinua ๏ Movimiento discontinuo: Párrafo Imagen Párrafo LECTURA DE CONTENIDOS ๏ Leemos 100% de izquierda a derecha al leer un artículo con intención de leerlo entero ๏ Lectura en diagonal: Escaneamos rápidamente los inicios de párrafos, textos formateados, etc. Master en Internet Business www.isdi.es 182 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11 EVALUACIÓN DEL PROYECTO 1) SEO 2) TEST DE USABILIDAD 3) TEST DE ACCESIBILIDAD 4) EYE TRACKING Master en Internet Business www.isdi.es 183 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.1 SEO. Search Engine Optimization Optimización para buscadores ๏ Conjunto de técnicas y acciones para mejorar el posicionamiento ๏ Analizar los efectos en los resultados de búsqueda ๏ OBJETIVO: Conseguir el mayor número de enlaces a tu web BUENAS PRÁCTICAS ✓ Correcta semántica html, css, etc ✓ Estructura de contenidos coherente ✓ Redacción de contenidos de calidad ✓ Realizar tests. Versiones A y B: Google Optimizer Master en Internet Business www.isdi.es 184 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.1 SEO JUSTIFICACIÓN DEL SEO ๏ Algunos usuarios no pasan de la 3ª página del resultado de un buscador SI NO ESTÁS ENTRE LOS PRIMEROS RESULTADOS ✴ No tienes relevancia en el sector ✴ No aumenta tu negocio ✴ No existes Master en Internet Business www.isdi.es 185 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.1 SEO CLAVES SEO 1.1 ๏ Entrelazar todas tus páginas ๏ Colocar palabras claves en la URL (de manera natural) ๏ Colocar palabras claves en la etiqueta <title> ๏ Palabras diferentes en los enlaces entrantes ๏ Text Palabras claves en el contenido ๏ Palabras claves en la etiqueta <alt> en las imágenes ๏ Usa las metatags <description> y <keywords> (msn/yahoo) ๏ Usa el archivo robots.txt para prohibir indexar páginas ๏ XML-Sitemap para genera el sitio web para los buscadores Master en Internet Business www.isdi.es 186 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.1 SEO CLAVES SEO 1.2 ๏ No crear granjas de enlaces ๏ No engañar a Google ๏ Actualizar el contenido ๏ No abusar de las palabras claves en los textos ๏ Usar las redes sociales ๏ Saber cómo piensan y qué palabras claves utilizan tus usuarios ๏ Probad cambios y sacar conclusiones Master en Internet Business www.isdi.es 187 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 TEST DE USABILIDAD ANÁLISIS DEL COMPORTAMIENTO DE TU WEB ๏ El comportamiento que vemos, es el que hemos diseñado CARACTERÍSTICAS ๏ Se hacen preguntas a los usuarios ๏ Realizan diferentes tareas ๏ Se mide el esfuerzo y dificultades que han encontrado ๏ Se analiza la percepción sobre ellos ๏ Se anotan las expectativas de cómo funcionan las cosas Master en Internet Business www.isdi.es 188 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 TEST DE USABILIDAD DIFERENTES MÉTODOS ๏ De manera informal, hablando juntos frente al ordenador ๏ De manera remota. Con Voz IP, compartiendo pantallas o herramientas colaborativas OBJETIVO: EJECUTAR TAREAS CLAVES DEL SITIO WEB ๏ Usar el reproductor de audio/vídeo ๏ Introducir datos en un formulario ๏ Comprar entradas ๏ Comprar un vuelo... Master en Internet Business www.isdi.es 189 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 TEST DE USABILIDAD RESULTADOS ๏ Se miden los tiempos máximos y mínimos ๏ Cuantos han realizado la tarea al 100% ๏ Cuantos no la han completado... Master en Internet Business www.isdi.es 190 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 EJEMPLO: TEST DE USABILIDAD ELIMINAR OPCIONES ๏ Versión A. 5.4% conversión ✓ Versión B: 11.9% conversión Master en Internet Business www.isdi.es 191 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 EJEMPLO: TEST DE USABILIDAD ANALIZAR LOS TEXTOS ๏ Versión A. ✓ Versión B: 30% de mejora ๏ Herramienta utilizada: Google Optimizer Master en Internet Business www.isdi.es 192 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 EJEMPLO: TEST DE USABILIDAD TEXTOS EN LOS ENLACES ๏ Versión A. Free Hosting ✓ Versión B. See Plans & Princing: 52% de aumento en la página ๏ Herramienta utilizada: Homegrown Master en Internet Business www.isdi.es 193 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 EJEMPLO: TEST DE USABILIDAD POSICIÓN DE LOS BOTONES Master en Internet Business www.isdi.es 194 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 EJEMPLO: TEST DE USABILIDAD POSICIÓN DE LOS BOTONES ๏ Versión A. 11.9% de conversión ✓ Versión B: 12.3% de conversión ๏ Herramienta utilizada: Google Optimizer Master en Internet Business www.isdi.es 195 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.2 EJEMPLO: TEST DE USABILIDAD POSICIÓN DE LOS BOTONES ๏ Versión A. 12.2% de conversión ✓ Versión B: 13.8% de conversión ๏ Herramienta utilizada: Google Optimizer Master en Internet Business www.isdi.es 196 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.3 TEST DE ACCESIBILIDAD OBJETIVO ๏ Comprobar el nivel de accesibilidad alcanzado en el diseño y desarrollo de la página ๏ Analizar el acceso a todas las personas independientemente de sus características diferenciadoras Master en Internet Business www.isdi.es 197 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.3 TEST DE ACCESIBILIDAD CÓMO CUMPLIR CON LA ACCESIBILIDAD ๏ INTECO ha creado el Centro de Referencia en Accesiblidad y Estándares Web OBJETIVO INTECO ✓ Permitir que las páginas web pertenecientes a la Administración del Estado, puedan ser utilizadas por el mayor número de personas independientemente de sus propias limitaciones o las derivadas de su entorno CÓMO ๏ Ofreciendo soporte y formación ๏ Desarrollando un área I+D+i que asegura el seguimiento de las pautas propuestas y su adecuación a las Leyes Master en Internet Business www.isdi.es 198 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.3 TEST DE ACCESIBILIDAD VALIDADORES y HERRAMIENTAS DE ACCESIBILIDAD ๏ Validador de HTML y XHTML http://validator.w3.org ๏ Validador de CSS http://jigsaw.w3.org/css-validator ๏ Analizador de accesibilidad http://www.tawdis.net ๏ Navegador sólo-texto http://www.delorie.com/web/lynxview.html Master en Internet Business www.isdi.es 199 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.3 TEST DE ACCESIBILIDAD EJEMPLO RESULTADO ✴ Validador de HTML y XHTML http://validator.w3.org Master en Internet Business www.isdi.es 200 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.3 TEST DE ACCESIBILIDAD EJEMPLO RESULTADO ✓ Validador de HTML y XHTML. Positivo http://validator.w3.org Congratulations To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the HTML you could use to add this icon to your Web page: Master en Internet Business www.isdi.es 201 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.4 EYE TRACKING. “SEGUIMIENTO DE OJOS” ๏ Evaluación del punto donde se fija la mirada y el movimiento del ojo Master en Internet Business www.isdi.es 202 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.4 EYE TRACKING ANÁLISIS Y CONCLUSIONES ๏ Los textos atraen antes que las imágenes ๏ Las imágenes grandes funcionan mejor que las pequeñas ๏ El primer foco de atención es arriba a la derecha ๏ Los usuarios escanean la parte superior antes de hacer scroll ๏ Los usuarios ignoran los banners ๏ Tipografías, bloques de color llamativos, etc. son ignorados ๏ Mostrar números como dígitos facilita la lectura ๏ Las listas atraen mejor la atención Master en Internet Business www.isdi.es 203 MÓDULO III DISEÑO DE UN PRODUCTO WEB

11.4 EYE TRACKING ANÁLISIS Y CONCLUSIONES ๏ El tamaño de la fuente influye en el comportamiento de lectura ๏ Las pequeñas fomentan la lectura. Las grandes el escaneo ๏ Los párrafos cortos actuan mejor que los largos ๏ Formatear el texto puede ayudar la lectura ๏ Una sola columna fija mejor la atención que la multicolumna ๏ Los lectores miran mucho los menús y botones ๏ El espacio en blanco es bueno para la legibiblidad Master en Internet Business www.isdi.es 204 MÓDULO III DISEÑO DE UN PRODUCTO WEB

12 BUENAS PRÁCTICAS CONSEJOS PARA REALIZAR UN BUEN DISEÑO ✓ Respetar los procesos de prediseño y flujos de trabajo ✓ Pensar en el usuario. Lectores, usuarios > Suscriptores ✓ 1º estudiar el comportamiento de tu web. 2º El diseño ✓ Observar los hábitos ✓ Presentar alternativas ✓ Considerar a la competencia ✓ Crea una buena librería de referencia e inspiración ✓ Contenido de calidad Master en Internet Business www.isdi.es 205 MÓDULO III DISEÑO DE UN PRODUCTO WEB

12 BUENAS PRÁCTICAS CONSEJOS PARA REALIZAR UN BUEN DISEÑO ✓ Buscar la simplicidad ✓ Estudiar la usabilidad ✓ Examinar el sitio web. Pruebas de usuarios, técnicas, etc. ✓ Considerar la experiencia de los usuarios ✓ REDISEÑAR Master en Internet Business www.isdi.es 206 MÓDULO III DISEÑO DE UN PRODUCTO WEB

12 BUENAS PRÁCTICAS SEGUIR LA EVOLUCIÓN DE LA WEB 1. Conectar ordenadores 2. Conectar gente @ 3. Redes Sociales 4. Datos Sociales VIGILAR SOBRECARGA DE INFORMACIÓN ✴ Analizar los datos que enviamos ✴ La expectación de los subscriptores ✴ Analizar cómo de importante es la información para el que la recibe. No para el que la envía Master en Internet Business www.isdi.es 207 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ BIBLIOGRAFÍA REFERENCIAS Master en Internet Business www.isdi.es 208 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ ENLACES REFERENCIAS UTILIZADAS WIKIS Y TRABAJAR DOCUMENTOS INDIVIDUALMENTE O EN EQUIPO http://www.atlassian.com/software/confluence/videos/create-and-edit.jsp http://basecamphq.com/ http://tadalist.com/ WIREFRAMES http://www.balsamiq.com/products/mockups SEGUIMIENTO DE TAREAS http://confluence.atlassian.com/display/JIRA/ Home;jsessionid=4737D0FA05C4459D740BD02DABAC97A0 USO DEL COLOR http://es-es.colourlovers.com http://wearecolorblind.com// ACCESIBILIDAD http://tawdis.fundacionctic.org/tools/?lang=es https://addons.mozilla.org/es-ES/firefox/addon/1158 Master en Internet Business www.isdi.es 213 MÓDULO III DISEÑO DE UN PRODUCTO WEB

+ ENLACES REFERENCIAS UTILIZADAS ESCENARIOS PERSONALES. EL ESTILO http://www.arroyodesanservan.org/WEB/Ayuntamiento/saludaAlcalde.php http://vimeo.com/6977587 USABILIDAD http://www.useit.com/ ABTests.com repositorio de pruebas A/B SOCIAL BOOKMARKS http://www.delicious.com Master en Internet Business www.isdi.es 214 MÓDULO III DISEÑO DE UN PRODUCTO WEB

THANKS! Nombre Ismael Viejo Correo ismaller@gmail.com Master en Internet Business www.isdi.es 215 MÓDULO III DISEÑO DE UN PRODUCTO WEB

http://ticseducation.wordpress.com	338
http://isuberna.blogspot.com	69
http://www.picubo.org	52
http://ijirua.blogspot.com	23
http://paper.li	20
http://ijirua.blogspot.com.es	11
http://133.100.1.186	5
http://a0.twimg.com	4
http://presentacion.org	3
http://blackboard.avanforce.com	1
https://twitter.com	1
http://feeds.feedburner.com	1

Diseño de un producto web

by Ismael Viejo

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 528

Statistics

Diseño de un producto web Presentation Transcript