metodología de desarrollo de sitios web · 1 prohibido utilizarse o copiarse sin permiso del autor...

1

Prohibido utilizarse o copiarse sin permiso del autor

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

2


Evolución en la forma de desarrollar sitio web

• Diseño centrado en la compañía

www.cemex.com



• Diseño centrado en la tecnología

portal.udem.edu.mx

3



• Diseño centrado en el diseño

www.christinaaguilera.com



• 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.

4


Metodología

• Planos de Garrett

Fuente: “The Elements of the User Experience” /www.jjg.net


Metodología

• Diseño iterativo

Fuentes: “The Design of Sites” /“Web Usability”

5


Metodología


Etapas importantes

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

6


Etapas importantes

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


Etapas importantes

1. Definir de necesidades y objetivos– Crear personas:

7


Etapas importantes

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

www.cnn.com


Etapas importantes

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

8


Etapas importantes

1. Definir de necesidades y objetivos– Tipos de objetivos: SITIO WEB DE COMERCIO


Etapas importantes

• Definir de necesidades y objetivos– Tipos de objetivos: SITIO WEB DE COLABORACIÓN

9


Etapas importantes

• Definir de necesidades y objetivos– Tipos de objetivos: CONTEXTO

– Tipos de objetivos: CUSTOMIZACIÓN

– Tipos de objetivos: CANALES DE DISTRIBUCIÓN


Metodología

10


Etapas importantes

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


Etapas importantes


― 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)

11


Etapas importantes


– Funcionalidades:• Análisis técnico• Tabla de funcionalidades. Ejemplo Carrito de Compras

PRIr a páginaClickPagarBotónBotón finalizar compra

PRActualiza totalTeclearPredefinir 1TextoCantidad a comprar

AGAgregar a carritoIr a la página X

Click y selección

Nombre de cada producto

ListaLista de productos

AutorAcción siguiente

EventoContenidoTipoFuncionalidad


Metodología

12


Etapas importantes

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


Etapas importantes

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, Dynamicdiagrams

• Esquemas de organización y navegación entre páginas

13


Metodología


Etapas importantes

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

14


Etapas importantes

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 (textfields), listas desplegables (dropdown lists), cajas de listas (listboxes)


Etapas importantes

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

15


Etapas importantes

4. Diseño de información = Diseño de la navegación + Diseño de la interfaz― Esqueleto de una página = borradores (mockups)


Etapas importantes

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

16


Etapas importantes

4. Diseño de información • Wireframes


Metodología

17


Etapas importantes

5. Diseño visual• Colores• Tipografía• Iconos• Imágenes• Identidad


Etapas importantes

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

metodología de desarrollo de sitios web · 1 prohibido utilizarse o copiarse sin permiso del autor...

Documents