Diferencia entre revisiones de «Categoría:Lenguaje Computacional 3»

De Casiopea
Línea 43: Línea 43:


===La estructura===
===La estructura===
* Arquitectura de la Información
 
====Arquitectura de la Información====
 
*Card Sorting
*Etiquetado y lingüística
*Mapas de Navegación
*Mapas de Interacción
*WireFrames
 
 
=====WireFrames=====
 
Llamamos wireframe a una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios.
 
Es muy importante '''aclararle siempre al cliente''' qué es un Wireframe, estar seguros de que entiende que ese no es el aspecto final del sitio, sino una mera representación gráfica de su contenido.
 
 
'''¿Cuándo se realizan?'''
 
Una vez tengamos delimitados los objetivos del cliente, las necesidades de los usuarios y los contenidos y funciones de la web; antes de empezar a programar y de crear el diseño visual de la página.
Por tanto, antes de hacerlo, es necesario tener todos los requisitos del proyecto: requisitos de negocio, de contenido, de diseño, de ancho de banda, de software, etc.
 
 
'''Ventajas de crear Wireframes'''
 
Hay dos grandes ventajas, por un lado el equipo y el cliente se centra en el diseño de contenidos y no en el diseño visual, y por otro lado, definiendo la organización y estructura en etapas previas al diseño y programación se evitan cambios posteriores más costosos, reduciendo así costes y tiempos.
 
Las principales características o ventajas de los prototipos (se refiere a los prototipos en general, no a los Wireframes en particular) según el doctor Granollers son:
 
* Son formidables herramientas de:
**Comunicación entre todos los componentes del equipo de desarrollo y los usuarios
**Participación, para integrar activamente a los usuarios en el desarrollo.
* Dan soporte a los diseñadores a la hora de escoger entre varias alternativas.
* Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos.
* Permiten evaluar el sistema desde las primeras fases del desarrollo (facilitan la exploración de ideas sobre nuevos conceptos tecnológicos).
* Son esenciales para la documentación, tanto de conceptos funcionales del sistema como de tareas concretas del mismo.
* Son el primer paso para que ideas abstractas sean concretas, visibles y testables.
* Fomentan la iteratividad.
* Mejoran la calidad y la completitud de las especificaciones funcionales del sistema.
* Son herramientas de propósito general, pues sirven para comprobar la fiabilidad técnica de una idea, clarificar requisitos que quedaron “indeterminados” o ver como responde con el resto de la aplicación.
 
 
'''¿Qué información debe contener un Wireframe?'''
 
* '''Inventario de contenido'''. Qué contenido debe estar presente en cada página
* '''Elementos de la página.''' Cabeceras, enlaces, listas, imágenes, formularios, etc.
* '''Etiquetado.''' De vínculos, títulos, etc.
* '''Layout.''' Ubicación, colocación y agrupación de los elementos de la página (cabeceras, pies, navegación, áreas de contenido, titulares, etc.) Muestra la estrategia de navegación y la priorización de contenidos dentro de la página, así como la agrupación en barras laterales, barras de navegación, áreas de contenido, etc.
* '''Comportamiento.''' Mediante notas asociadas a los elementos para indicar cómo se deben mostrar (nº de elementos, visualización por defecto) o definir el comportamiento funcional cunado un elemento se activa (enlace externo, etc.)
 
 
'''
¿De cuántas páginas creamos un Wireframe?'''
 
De la página principal y de los principales tipos de subpáginas o plantillas, entre las que deberán incluirse, una página de formulario, una página de resultado búsqueda y una página de error. Si estamos ante una aplicación deberá incluir una página de ingreso de datos, una página de detalle y una página de listado.
 
 
'''Errores en la creación de Wireframes'''
 
Hay tres errores típicos:
 
* Realizar Wireframes demasiado complejos en su forma
* Realizar Wireframes con algo diseño gráfico
* Incluir un exceso de información
 
 
Para evitarlos es bueno seguir las recomendaciones de Liz Danzico en "The Devil's in the Wireframes"
* Amplifica a través de la simplificación:
**El Wireframe debe ser claro, sin diseño, ni iconos, ni color. Por ello Gene Smith propone usar una única figura, un único color y un único tipo de letra. Tampoco es necesario ser tan estrictos, pero ayuda a entender la filosofía del Wireframe.
* Quita los detalles innecesarios: debe contener el mínimo número de elementos necesarios para que no distraigan la atención.
* Anota cuidadosamente pero sólo lo realmente relevante.
Habrá que tener en cuenta además como se va a presentar, si va a ser un entregable deberá ser autoexplicativo por si mismo, pero si se va a presentar personalmente al cliente (como debería hacerse siempre para evitar interpretaciones subjetivas) no necesitará anotaciones tan detalladas.
 
* Diseño de Interacción
* Diseño de Interacción



Revisión del 18:31 3 ago 2010

Diseño Centrado en las Personas

El Diseño centrado en las personas tiene tres momentos con los cuales genera la propuesta o el objeto de diseño. Estos momentos son:

  • La planificación:
  • La estructura:
  • La producción o construcción:

La planificación

Estrategia

La estrategia es "un conjunto de acciones que se llevan a cabo para lograr un determinado fin. Proviene del griego ΣΤΡΑΤΗΓΙΚΗΣ, Stratos = Ejército y Agein = conductor, guía.

El diseñador es siempre un estratega, un guía que, a través de las acciones que acomete busca lograr una obra final, un puente de comunicación entre otros.

Se basa principalmente en el planteamiento estratégico, que conlleva a un cuestionamiento dado por las preguntas:

  • ¿Qué?
  • ¿Cuando?
  • ¿Quienes?
  • ¿Cómo?

La estrategia está compuesta de:

  1. Brief: Resumen en el cual, la persona con la que trabajaremos, nos dice qué es lo que necesita, éste tiene tres componentes de gran importancia:
    1. Presupuesto (dinero con el que cuenta la persona para el proyecto)
    2. Contra Brief (preguntas que nacen a partir del brief, las hace el diseñador)
    3. Debrief (se ven los objetivos y permite la generación de mecanismos de medición)
  2. Entrevistas Guiadas: conversaciones con usuarios y/o funcionarios con el fin de adquirir más información que ayude al desarrollo del diseño.
  3. Benchmark: análisis comparativo que mide las capacidades de experiencia que hay tras el encargo. También permite tener anotaciones del experto sobre un servicio y generar herramientas de objetivos.


Comportamiento de las Personas

El estudio del comportamiento de las personas, permite comprender tendencias y motivaciones, la manera en cómo interactúan con un sistema. Esto no debe confundirse con el estudio de los sistemas en interacción con las personas, pues en ese caso nos centraríamos en la usabilidad.

Se compone de:

  1. Expert Review: evaluación hecha por expertos
  2. Personas y Escenarios: pensar en el usuario, dónde y en qué condiciones interactúa con un sistema
  3. Evaluación Heurística: análisis de usabilidad
  4. Eyetracking: herramienta de medición

La estructura

Arquitectura de la Información

  • Card Sorting
  • Etiquetado y lingüística
  • Mapas de Navegación
  • Mapas de Interacción
  • WireFrames


WireFrames

Llamamos wireframe a una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios.

Es muy importante aclararle siempre al cliente qué es un Wireframe, estar seguros de que entiende que ese no es el aspecto final del sitio, sino una mera representación gráfica de su contenido.


¿Cuándo se realizan?

Una vez tengamos delimitados los objetivos del cliente, las necesidades de los usuarios y los contenidos y funciones de la web; antes de empezar a programar y de crear el diseño visual de la página. Por tanto, antes de hacerlo, es necesario tener todos los requisitos del proyecto: requisitos de negocio, de contenido, de diseño, de ancho de banda, de software, etc.


Ventajas de crear Wireframes

Hay dos grandes ventajas, por un lado el equipo y el cliente se centra en el diseño de contenidos y no en el diseño visual, y por otro lado, definiendo la organización y estructura en etapas previas al diseño y programación se evitan cambios posteriores más costosos, reduciendo así costes y tiempos.

Las principales características o ventajas de los prototipos (se refiere a los prototipos en general, no a los Wireframes en particular) según el doctor Granollers son:

  • Son formidables herramientas de:
    • Comunicación entre todos los componentes del equipo de desarrollo y los usuarios
    • Participación, para integrar activamente a los usuarios en el desarrollo.
  • Dan soporte a los diseñadores a la hora de escoger entre varias alternativas.
  • Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos.
  • Permiten evaluar el sistema desde las primeras fases del desarrollo (facilitan la exploración de ideas sobre nuevos conceptos tecnológicos).
  • Son esenciales para la documentación, tanto de conceptos funcionales del sistema como de tareas concretas del mismo.
  • Son el primer paso para que ideas abstractas sean concretas, visibles y testables.
  • Fomentan la iteratividad.
  • Mejoran la calidad y la completitud de las especificaciones funcionales del sistema.
  • Son herramientas de propósito general, pues sirven para comprobar la fiabilidad técnica de una idea, clarificar requisitos que quedaron “indeterminados” o ver como responde con el resto de la aplicación.


¿Qué información debe contener un Wireframe?

  • Inventario de contenido. Qué contenido debe estar presente en cada página
  • Elementos de la página. Cabeceras, enlaces, listas, imágenes, formularios, etc.
  • Etiquetado. De vínculos, títulos, etc.
  • Layout. Ubicación, colocación y agrupación de los elementos de la página (cabeceras, pies, navegación, áreas de contenido, titulares, etc.) Muestra la estrategia de navegación y la priorización de contenidos dentro de la página, así como la agrupación en barras laterales, barras de navegación, áreas de contenido, etc.
  • Comportamiento. Mediante notas asociadas a los elementos para indicar cómo se deben mostrar (nº de elementos, visualización por defecto) o definir el comportamiento funcional cunado un elemento se activa (enlace externo, etc.)


¿De cuántas páginas creamos un Wireframe?

De la página principal y de los principales tipos de subpáginas o plantillas, entre las que deberán incluirse, una página de formulario, una página de resultado búsqueda y una página de error. Si estamos ante una aplicación deberá incluir una página de ingreso de datos, una página de detalle y una página de listado.


Errores en la creación de Wireframes

Hay tres errores típicos:

  • Realizar Wireframes demasiado complejos en su forma
  • Realizar Wireframes con algo diseño gráfico
  • Incluir un exceso de información


Para evitarlos es bueno seguir las recomendaciones de Liz Danzico en "The Devil's in the Wireframes"

  • Amplifica a través de la simplificación:
    • El Wireframe debe ser claro, sin diseño, ni iconos, ni color. Por ello Gene Smith propone usar una única figura, un único color y un único tipo de letra. Tampoco es necesario ser tan estrictos, pero ayuda a entender la filosofía del Wireframe.
  • Quita los detalles innecesarios: debe contener el mínimo número de elementos necesarios para que no distraigan la atención.
  • Anota cuidadosamente pero sólo lo realmente relevante.

Habrá que tener en cuenta además como se va a presentar, si va a ser un entregable deberá ser autoexplicativo por si mismo, pero si se va a presentar personalmente al cliente (como debería hacerse siempre para evitar interpretaciones subjetivas) no necesitará anotaciones tan detalladas.

  • Diseño de Interacción

La producción

  • Diseño de Interfaz
  • Diseño de códigos de Interfaz

Páginas en la categoría «Lenguaje Computacional 3»

Las siguientes 46 páginas pertenecen a esta categoría, de un total de 46.