Metodología de Desarrollo de Sitios Web. El desarrollo de software vs. El desarrollo de sitios web

Transcripción

1 Metodología de Desarrollo de Sitios Web Luis Carlos Aceves G. El desarrollo de software vs. El desarrollo de sitios web Diferencias en la forma de trabajar (metodología): Quién es el usuario? Rol de la tecnología de información Enfoque Roles en el desarrollo Técnicas y herramientas Pruebas Fases 1

2 Evolución en la forma de desarrollar sitio web Diseño centrado en la compañía Evolución en la forma de desarrollar sitio web Diseño centrado en la tecnología portal.udem.edu.mx 2

3 Evolución en la forma de desarrollar sitio web Diseño centrado en el diseño Evolución en la forma de desarrollar sitio web Diseño centrado en el usuario Tomar en cuenta cada posible acción que el usuario podrá realizar en nuestro sitio web, entendiendo las expectativas que tiene en cada paso del proceso de diseño. 3

4 Planos de Garrett Metodología Fuente: The Elements of the User Experience / Diseño iterativo Metodología Fuentes: The Design of Sites / Web Usability 4

5 Metodología 1. Definir de necesidades y objetivos Definir hacia quién va dirigido el sitio web Simular un mercado meta: cuántos? dónde? Comportamiento? Tomar en cuenta diferencias del mercado: Diferencias por segmentación Diferencias por nivel de experiencia Diferencias por discapacidad 5

6 1. Definir de necesidades y objetivos Crear personas: Prototipos de usuario Cada persona representa un grupo de gente (mercado) con características similares Se documentan en descripciones de 1-2 páginas Representan patrones, no cargos de trabajo Se incluyen patrones de conducta, metas, habilidades, actitudes y ambiente con algunos detalles personales para darle vida 1. Definir de necesidades y objetivos Crear personas: 6

7 1. Definir de necesidades y objetivos Tipos de objetivos: SITIO WEB DE CONTENIDO 1. Definir de necesidades y objetivos Tipos de objetivos: SITIO WEB DE COMUNIDAD 7

8 1. Definir de necesidades y objetivos Tipos de objetivos: SITIO WEB DE COMERCIO Definir de necesidades y objetivos Tipos de objetivos: SITIO WEB DE COLABORACIÓN 8

9 Definir de necesidades y objetivos Tipos de objetivos: CONTEXTO Tipos de objetivos: CUSTOMIZACIÓN Tipos de objetivos: CANALES DE DISTRIBUCIÓN Metodología 9

10 2. Obtener requerimientos de contenido y especificaciones funcionales Análisis. quién es el usuario? Métodos de investigación Entrevistas Encuestas Análisis competitivo Focus groups 2. Obtener requerimientos de contenido y especificaciones funcionales Contenido: Definición de la marca: URL + logo Contenido que los usuarios saben que quieren Contenido que los usuarios no saben que quieren pero lo necesitarán Uso de sistemas administradores de contenido (CMS) 10

11 2. Obtener requerimientos de contenido y especificaciones funcionales Funcionalidades: Análisis técnico Tabla de funcionalidades. Ejemplo Carrito de Compras Funcionalidad Tipo Contenido Evento Acción siguiente Autor Lista de productos Lista Nombre de cada producto Click y selección Agregar a carrito Ir a la página X AG Cantidad a comprar Texto Predefinir 1 Teclear Actualiza total PR Botón finalizar compra Botón Pagar Click Ir a página PR Metodología 11

12 3. Diseño de interacción y arquitectura de información Diseño de interacción Describir el posible comportamiento de un usuario y definir la forma en que el sitio web responderá Suele ser un trabajo computacional, ya que debe definir qué funcionalidad hacer y cómo programarla, pero Lo que funciona bien desde el punto de vista técnico no es necesariamente lo que funciona mejor para el usuario 3. Diseño de interacción y arquitectura de información Arquitectura de información Crear esquemas organizacionales y de navegación que permitan a los usuarios moverse a través de todo el contenido del sitio web de forma eficiente y efectiva Tipos: Diagrama de árbol horizontal, diagrama de árbol vertical, Sexy diagrams, Lenguaje visual de Garrett, Dynamic diagrams Esquemas de organización y navegación entre páginas 12

13 Metodología 4. Diseño de información Las ideas que se desean comunicar al usuario Cómo representar información de forma que el usuario la pueda entender Implica la unión del diseño de interfaces y el diseño de navegación 13

14 4. Diseño de información Diseño de la interfaz Las cosas que el usuario podrá hacer Representación gráfica de las especificaciones funcionales Conjunto de objetos que son relevantes para la interacción del usuario Elementos principales a considerar para la interacción: botones de acciones, cajas de selección (checkboxes), botones de selección (radio buttons), cajas de texto (text fields), listas desplegables (dropdown lists), cajas de listas (list boxes) 4. Diseño de información Diseño de la navegación Los lugares a los que el usuario podrá ir Forma especializada de diseño de interfaces dirigida a presentar espacios de información Es la manera en la que el usuario puede ver la arquitectura de información y moverse a través de ella Sistemas de navegación: navegación global, navegación local, navegación complementaria, navegación contextual, navegación de cortesía 14

15 4. Diseño de información = Diseño de la navegación + Diseño de la interfaz Esqueleto de una página = borradores (mockups) 4. Diseño de información = Diseño de la navegación + Diseño de la interfaz Esqueleto de una página = wireframes Un wireframe representa: Las cosas que el usuario podrá hacer Los lugares a los que el usuario podrá ir Las ideas que se desean comunicar al usuario Cada wireframe representa una página de la arquitectura de información 15

16 4. Diseño de información Wireframes Metodología 16

17 5. Diseño visual Colores Tipografía Iconos Imágenes Identidad 6. Pruebas de usabilidad Evaluaciones o inspecciones por expertos Evaluaciones con usuarios reales (segmentar) Pruebas automatizadas Si se trata de un rediseño las pruebas son la primer etapa 17