MODULO I Continuacion

10
1.4. I mpl i cacion es general es en el di se ñ o de in ter f ace s de usuar i o E s tr u ctu r a y Jer arquía Vis u al en el D i se ñ o La jerarquía visual es la organización de los elementos de una página web at endiendo a su gr ado de importancia. La jerarquía visual supone la manera en la que la página web será leída. El modo normal de ver documentos es de izquierda a derecha y de arriba hacia abajo. Por eso las cosas de mayor importancia deben ponerse en la parte superior izquierda. Sin embargo, cambiando elementos como el tamaño, el contraste o el color, la mirada del usuario se dirige primero a los elementos de mayor de tamaño, de más contraste o de color más llamativo. Así, al estructurar los elementos en la página de forma jerárquica se dota de una importancia relativa a cada uno de ellos. Lo primero que identifica el usuario es la estructura: los bloques de color y el espacio en blanco. En cuanto va enfocando la mirada, identifica algunos gráficos y el texto de mayor tamaño. Es importante que estos elementos que sirven de punto de entrada sean efectivos, atrayendo la atención del lector. De esta forma, lo más relevante siempre irá situado en el punto más destacado de nuestra web, mientras que lo menos importante se situará en zonas menos visibles. El espacio en blanco es el espacio sin textos ni gráficos y juega un papel importante, pues crea la estructura, el contraste, y ayuda a dirigir la mirada entre los diferentes elementos. Existen diferentes técnicas para crear jerarquía visual. Usualmente no sólo se emplea una de ellas sino que se combinan. Básicamente son seis: tamaño, contraste, color, proximidad, alineación y repetición. Esto principios del diseño son tus mejores armas para poder generar jerarquía visual. Tamaño Los elementos de mayor tamaño captan tu atención más rápidamente. Además, el tamaño indica la importancia de cada elemento. Esta técnica es excelente para poder guiar la atención de los usuarios y es una de las más empleadas. Si todos los elementos fueran del mismo tamaño es complicado para el usuario detectar qué elemento es más importante. Sin mencionar que es bastante monótono y aburrido para los usuarios. Contraste El contraste también tiene un efecto en la jerarquía y se puede aplicar contraste en cualquier elemento. El impacto se genera en base a los cambios que existen entre un elemento y otro, mientras más dramático sea este cambio, mejor. Por eso, en un diseño web, se eligen colores que generen contraste a modo de generar impacto y llamar la atención.

Transcript of MODULO I Continuacion

Page 1: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 1/10

1.4. Impl icaciones general es en el diseño de interfaces de usuarioEstructura y Jerarquía Visual en el DiseñoLa jerarquía visual es la organización de los elementos de una página web atendiendo a su grado de

importancia. La jerarquía visual supone la manera en la que la página web será leída

El modo normal de ver documentos es de izquierda a derecha y de arriba hacia abajo. Por eso las cosas de

mayor importancia deben ponerse en la parte superior izquierda. Sin embargo, cambiando elementos como eltamaño, el contraste o el color, la mirada del usuario se dirige primero a los elementos de mayor de tamaño, de

más contraste o de color más llamativo. Así, al estructurar los elementos en la página de forma jerárquica se

dota de una importancia relativa a cada uno de ellos.

Lo primero que identifica el usuario es la estructura: los bloques de color y el espacio en blanco.

En cuanto va enfocando la mirada, identifica algunos gráficos y el texto de mayor tamañoEs importante que estos elementos que sirven de punto de entrada sean efectivos, atrayendo la atención del

lector.

De esta forma, lo más relevante siempre irá situado en el punto más destacado de nuestra web, mientras que lomenos importante se situará en zonas menos visibles.

El espacio en blanco es el espacio sin textos ni gráficos y juega un papel importante, pues crea la estructura, el

contraste, y ayuda a dirigir la mirada entre los diferentes elementos.

Existen diferentes técnicas para crear jerarquía visual. Usualmente no sólo se emplea una de ellas sino que se

combinan. Básicamente son seis: tamaño, contraste, color, proximidad, alineación y repetición. Esto principiosdel diseño son tus mejores armas para poder generar jerarquía visual.

Tamaño

Los elementos de mayor tamaño captan tu atención más rápidamente. Además, el tamaño indica la importancia

de cada elemento. Esta técnica es excelente para poder guiar la atención de los usuarios y es una de las másempleadas.

Si todos los elementos fueran del mismo tamaño es complicado para el usuario detectar qué elemento es más

importante. Sin mencionar que es bastante monótono y aburrido para los usuarios.

Contraste

El contraste también tiene un efecto en la jerarquía y se puede aplicar contraste en cualquier elemento. El

impacto se genera en base a los cambios que existen entre un elemento y otro, mientras más dramático sea este

cambio, mejor. Por eso, en un diseño web, se eligen colores que generen contraste a modo de generar impacto yllamar la atención.

Page 2: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 2/10

Color

El color es una de las maneras más poderosas de captar la atención de los usuarios. No sólo sirve para organizary generar jerarquía visual, sino para darle estilo y personalidad al sitio web. Tal vez por esta razón el color es un

arma de doble filo ya que debes tener en cuenta el público objetivo, mientras que, al mismo tiempo, intentas

generar una combinación de colores armónica

Es probable que la selección de colores sea un proceso bastante largo y se logre mediante ensayo y error. Es

decir, probando cómo lucen los colores uno con otro hasta llegar a la combinación ideal para tu diseño web.

Usualmente, los colores vibrantes suelen destacar, mientras que los colores pastel suelen pasar desapercibidos si

se ponen al lado de un color saturado.

Proximidad

La proximidad es una manera de separar y agrupar elementos. Mientras más próximos estén son considerados

como un grupo y se pueden identificar como sub-jerarquías. La proximidad sirve para agrupar elementos

similares y separar aquellos que son distintos.

Agrupar elementos sirve para organizar el sitio y ayudar al usuario a identificar secciones o zonas comunes. Por

ejemplo, en un blog, la barra lateral suele contener pequeñas aplicaciones (widgets), cada uno con un título y

contenido propio. Cada elemento funciona por separado, pero también se les reconoce como un grupo.

Alineación

La ubicación de los elementos también puede indicar importancia. Los elementos ubicados en la barra lateral

son de menor importancia que los elementos que se ubican en el centro pues ocupan un mayor espacio. De igualmanera, los elementos que se colocan en la parte superior suelen ser de mayor importancia, por eso ese lugar es

el común para la barra de menú y el logo. En una tienda online, el carrito de compras también se suele ubicar en

la parte superior.

Repetición

La repetición es un elemento que también sirve para agrupar elementos. Si tomamos como ejemplo el texto

dentro de una página web vemos que cada párrafo tiene una fuente y una puntaje igual. Esto permite al usuario

reconocer fácilmente los elementos similares.

Page 3: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 3/10

Aunque la repetición es importante, es también esencial saber cómo romper esa repetición para generar interés,

de lo contrario la página se vería demasiado estática y aburrida. Tomando como ejemplo el texto, vemos quecada cierto número de párrafos se coloca un subtítulo, usualmente en mayor puntaje o en negritas o con algún

tipo de formato distinto que el del párrafo.

Presentación del textoConsejos para el buen uso de textos en una página web:

 

 No abusar de las mayúsculas: estas letras poseen un fundamento sintáctico y gramatical propio, peroademás son un elemento idóneo para remarcar ciertas partes de información de la página. Su usoexcesivo mata este factor, convirtiendo un texto interesante en una serie monótona de caracteres que no

dicen nada, y que por lo tanto no captan la atención del visitante. Usa las mayúsculas al principio de

cada frase, los nombres propios, los títulos y subtítulos de la página.

   No usar textos de pequeño tamaño en tipos serif: debido a que este tipo de letras están pensadas para ser

impresas, no para ser contempladas en pantalla, y si son de pequeño tamaño se deforman y se hacen

ilegibles. Esto pasa también con los tipos son Sans Serif de pequeño tamaño.

   No abusar de las letras en cursiva: ya que el texto en itálica es difícil de leer en pantalla, debido a lainclinación del mismo, que provoca un escalonado en los bordes de las letras que las deforma, sobretodo en tamaños pequeños de fuente.

 

 No abusar de los textos en negrita: ya que la misión de este es reforzar la importancia de una parte de lainformación que damos en la página, y se debe usar sólo para este fin. Además ocurre algo parecido al

caso de las cursivas, ya que para pintar en pantalla una letra en negrita lo que hace el ordenador esañadir pixeles adicionales en los bordes de la letra. Si esta es de pequeño tamaño, se produce un

desagradable efecto de borrado, y si es de gran tamaño se produce el efecto de escalonamiento, no

siendo convenientes ninguno de ellos.

   No usar, y menos aún abusar, de los efectos de parpadeo o deslizamiento: como pueden ser textos en

marquesina, en efecto Blink o en desplazamientos mediante scripting, ya que son irritantes y marean y

confunden al usuario.

   No usar demasiados tipos de fuentes ni demasiados colores diferentes: ya que rompen la armonía quedebe haber en el contenido de todo documento, aparte de que corremos el riesgo de que el usuario no

tenga alguna de las fuentes usadas instaladas en su ordenador, lo que hará que éste las sustituya por lafuente estándar, rompiendo con ello todo nuestro esquema de estilo. Conviene usar siempre las fuentes

estándar.

  Cuidar la accesibilidad de la información: ya que si usamos letras de pequeño tamaño, efectos

compatibles sólo con algunos ordenadores o colores que necesiten presentaciones especiales, estamos

eliminando de la lista de nuestros visitantes a aquellas personas que no pueden acceder a este tipo de

contenidos.

  Usar enlaces visualmente independientes: es decir, que los enlaces de la página se distingan claramente

del resto del texto. No todos los visitantes están tan acostumbrados como a navegar por Internet, por loque debemos marcar las diferentes partes de la página de forma clara.

   Presentar el texto de una forma lógica: no olvidemos que al fin y al cabo una página web es undocumento como otro cualquiera, por lo que debe tener una lógica de desarrollo y de presentación si

queremos que cumpla su misión principal, que es facilitar información clara al visitante.

  Usar siempre caracteres compatibles con el estándar: que tradicionalmente ha sido el conjunto decaracteres ASCII, y que incluye las letras, los números, los signos de puntuación y algunos caracteres

especiales como los tabuladores.

  Para evitar contradicciones y malas interpretaciones es conveniente ceñirse casi siempre al juego ASCII

 por lo que si se escribe en castellano, no acentuar las palabras directamente, sino que debemos usar loscaracteres especiales que hay para tal efecto.

Page 4: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 4/10

1.5 Guías para el Diseño de I nter facesReglas de Oro de Diseño de I nterface de SchneidermanPara mejorar la facilidad de uso de una aplicación, es importante tener una interfaz bien diseñada. “Las

ocho reglas de oro del diseño de interfaces” de Schneiderman son una guía para el diseño de una buena

interacción.

1.   Busca la consistencia.Secuencias coherentes de acciones deben ser necesarias en situaciones similares; se debe utilizar

terminología idéntica en avisos, menús y pantallas de ayuda, y los mismos comandos deben ser

empleados en todo el proyecto.2.   Permite que los usuarios frecuentes utilicen accesos directos. 

Con el aumento de la frecuencia de uso también aumentan los deseos del usuario para reducir el número

de interacciones e incrementar el ritmo de interacción. Abreviaturas, teclas de función y los comandosocultos son muy útiles para un usuario experto.

3.  Ofrece retroalimentación informativa.

Por cada acción del operador, debe haber algún tipo de retroalimentación. Para las acciones frecuentes y

de menor importancia, la respuesta puede ser modesta, mientras que para las acciones poco frecuentes eimportantes, la respuesta debería ser más sustancial.

4.   Diseña acciones secuenciales.

Las secuencias de acciones deben organizarse en grupos con un principio, medio y final. La

retroalimentación informativa en la realización de un conjunto de acciones da a los operadores lasatisfacción de haber cumplido, una sensación de alivio y una indicación de que el camino está libre para

 prepararse para el siguiente grupo de las acciones.

5.   Errores simplesEn medida de lo posible, se debe de diseñar el sistema para que el usuario no pueda hacer un error

irreparable. Si se comete un error, el sistema debe ser capaz de detectar el error y ofrecer mecanismos

sencillos y comprensibles para manejar el error.

6.   Fácil reversión de las acciones.Esta función alivia la ansiedad, ya que el usuario sabe que los errores se pueden deshacer, además de

que fomenta la exploración de opciones desconocidas. Las unidades de reversibilidad puede consistir en

una sola acción, una entrada de datos, o un grupo completo de acciones.

7. 

 Apoya al usuario con una interfaz amigable.Los operadores experimentados desean tener la sensación control y que el sistema responda a sus

acciones adecuadamente. Diseñar el sistema para que los usuarios sean los que inicien cada acción y nolos que respondan.

8.   Reduce la carga de memoria.

La limitación humana del procesamiento de información en cuanto a memoria de corto plazo requiere

que las pantallas se mantengan simples, la frecuencia de traslado entre ventana y ventana se reduzca, yel tiempo suficiente de capacitación para que entienda los códigos, datos técnicos y las secuencias de

acción.

Los siete pri ncipios de Norman .

Los principios del diseño ayudan a los diseñadores a explicar y mejorar su trabajo. Tienen su origen en lateoría, la experiencia y el sentido común. Cuando se ponen en práctica para evaluar productos o prototipos se

les denomina principios de usabilidad o heurísticos1.  Visibilidad: Cuanto más visibles sean las funciones, más probabilidad hay de que los usuarios las vean y

usen.

2.  Retroalimentación: Cada acción con el sistema debe tener una clara reacción. Se puede hacer con

sonido, de forma táctil, verbal, visualmente o combinadas.3.  Restricción: Es la limitación de la interacción del usuario en un momento determinado. Las limitaciones

 pueden ser de tres tipos:

-Físicas. Ej.: Una clavija que no encaja.-Lógicas. Ej.: Si pulso un botón, espero una reacción.

Page 5: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 5/10

-Culturales. Ej.: El significado de un color no es igual en todo el mundo.

4. Mapeo: Es la relación entre los controles y su efecto.5. Consistencia: Consiste en diseñar usando operaciones y elementos similares.

6. Claridad: Es el atributo que permite a las personas saber cómo usar un diseño. Puede ser de dos tipos:

-Percibidas, en el caso de una interfaz de un programa, que es virtual.

-Reales, en el caso de los objetos físicos.

7. Topografía (affordance): La “topografía” es la relación entre dos cosas, por ejemplo entre el movimiento

de un volante y el giro de un coche.

1.6. Algunas Herramientas para el Diseño Centrado en el Usuar ioTécnica PersonasSi la audiencia prevista es muy heterogénea, puede resultar muy complejo definir sus patrones de conducta,

objetivos y necesidades. El objetivo de la utilización de personas consiste en que el diseñador tenga en mente aun usuario real con unas características determinadas.

Todas las características de la persona deben ser coherentes con la información obtenida acerca de la audiencia

en la fase de análisis.

Pueden definirse diferentes tipos de personas:

• Focal . Es el principal tipo de usuario al que nos dirigimos, y en cualquier proceso de diseño debería existir a

menos una persona focal. Si existen más de tres personas focales, entonces es recomendable dividir la interfaz,definiendo diferentes perfiles de usuario (por ejemplo, "administrador", "usuario", etc.).

• Secundaria. Los usuarios secundarios también utilizan el producto, y deben usarlo satisfactoriamente, aunque

en caso de conflicto de intereses, se priorizarán las necesidades del usuario focal.• No prioritario. Usuarios infrecuentes, no autorizados o de baja prioridad.

•  Involucrado. No utiliza el producto, pero puede verse afectado por los resultados (por ejemplo, las personas

que conviven en un domicilio pueden implicarse en el resultado de una operación de compra por Internet).

•  Excluido. Usuario para el que no se está diseñando.• Promotores. Pueden generarse mini personas que correspondan a los intereses de los promotores del proyecto

(cliente, inversores, publicistas, etc.), con el objetivo de garantizar que sus requisitos serán tenidos en cuenta.

La descripción de una persona debería incluir los siguientes detalles:• Características fundamentales de la persona, correspondientes a:

 –  Perfil geográfico. Lugar de residencia y de trabajo, y nivel de vida. –  Perfil demográfico. Edad, género, familia, ingresos, ocupación, educación, etc.

 –  Perfil psicosocial. Clase social, estilo de vida, aficiones, características personales.

• Relación entre la persona y el producto.

 – La persona, ¿es un cliente, un empleado o un socio? Puede distinguirse entre el desarrollo de unaintranet o una extranet, o en la definición de diferentes perfiles de usuario.

 – ¿Cuál es el nivel de relación entre la persona y la aplicación? Puede tratarse de un usuario ocasional o

de un usuario frecuente. El diseñador debe definir qué tipo de relación espera que la persona mantenga

con el producto.

 – ¿Qué porcentaje del uso total representa la persona? En economía existe una regla, según la cualgeneralmente un 20% de los clientes de una empresa representan el 80% de las ventas; es importante

conocer qué porcentaje de uso de la aplicación representa la persona.

StoryboardUn storyboard es una serie de dibujos ordenados secuencialmente, que servirá para mostrar cómo se usará un

sistema para la consecución de una tarea específica. Esta es una técnica especialmente útil cuando no existe previamente un sistema que permita realizar las tareas o cuando el nuevo sistema cambiará la forma de realizar

algunas tareas. Para crear un storyboard, primero es necesario identificar la tarea que se representará y luego se

 plantea cómo el usuario usará el sistema para conseguir su objetivo, sin detalles de la interfaz. Por su bajo costo

Page 6: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 6/10

es posible realizar varios storyboards en las primeras etapas del proceso de DCU. La figura muestra un ejemplo

de storyboard en el que se ilustra el uso de un sistema de envío de reportes que se encuentra apenas en la etapade conceptualización, con el cual una persona que no oye ni habla puede notificar a las autoridades pertinentes

de la emergencia que ocurre en su casa.

Un storyboard  navegacional consta de una serie de dibujos que muestran cómo será la navegación en el sistema

Es muy útil para identificar si se está respetando el patrón de navegación que se había adoptado previamente, o para verificar que acceder a cada opción del sistema no requiere más de un número predeterminado de clics. Un

 storyboard  navegacional puede servir para mostrar un escenario particular de uso del sistema, como se muestra

en la figura anterior.

Card Sorting para la arqui tectura de la informaciónCard sorting es una de las técnicas más útiles para definir la estructura de una aplicación interactiva; permite

comprobar cómo tienden las personas a agrupar unidades de información, para desarrollar estructuras quemaximicen la probabilidad de que los usuarios encuentren la información que requieren. Se trata de una técnica

fácil de conducir, de bajo costo, que permite identificar las unidades de información que pueden resultar

difíciles de categorizar y encontrar, y que permite detectar si la terminología es confusa o poco explicativa.

Aunque hay varias maneras de conducir un card sorting, en términos generales se lleva a cabo imprimiendo en

tarjetas individuales los nombres de los ítems que se desea categorizar. Las tarjetas deben ser suficientementegrandes como para que los participantes puedan leerlas a distancia, en una mesa (la tipografía debe ser al menos

de 14 puntos). Se pide a los participantes que agrupen de manera individual los ítems de manera que para ellos

tenga sentido. También se les pide que nombren los grupos resultantes. Una vez que todos los participantes han

completado el ejercicio, se anotan los resultados y se comentan en grupo.

Generalmente existe acuerdo en las agrupaciones, pero si existe algún caso especial en que no haya

consenso, debe comentarse a fondo para decidir si es necesario renombrar el ítem, o si éste debería incluirse en

más de una categoría. Los participantes deberían ser representativos de los usuarios focales de la aplicación

Cuantos más participantes, mejor será el resultado, aunque el número mínimo recomendado es de seis. Puedencolaborar entre sí, es recomendable que los participantes realicen las agrupaciones de manera individual, para

no llegar a conclusiones sesgadas, fruto del consenso general más que de un razonamiento individual. Puedenrealizarse variaciones sobre la técnica básica; por ejemplo, si las tarjetas son lo suficientemente grandes, pueden

añadirse preguntas para saber si el nombre del ítem se entiende claramente, permitiendo al participante sugerir

nombres alternativos, etc.

 Etapas del Card Sorting

  Se agrupan las tarjetas

  Se nombran los grupos

Page 7: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 7/10

  Se anotan los resultados

  Se comentan los resultados

PrototipadoEl prototipo es un elemento clave en el proceso de diseño, puesto que permite detectar en un primer estadio

aquellas cuestiones que deben ser revisadas o corregidas, y revela si es necesario añadir algún elemento que no

se ha tenido en cuenta anteriormente.

 Hay dos tipos de prototipos:1.   Prototipo de baja fidelidad

• Se realiza en un primer estadio. 

• Dista del diseño final. 

• Puede realizarse sobre papel o en ordenador, y esquematiza una propuesta de estructura de pantalla.

• Permite realizar los primeros tests de usabilidad. En entorno de arquitectura de la información, se trabaja con wireframes, prototipos de baja fidelidad que

 permiten organizar los elementos de la pantalla, y evaluar cuál es la mejor solución posible.

2.   Prototipo de alta fidelidad . Se hace por ordenador, y representa un aspecto muy similar al del diseño

final. Prototipos de baja fidelidad (izquierda) y de alta fidelidad (derecha)

 Fases del prototipado

Existen dos fases de prototipo: el prototipo gráfico u horizontal y el prototipo funcional o vertical.

1.   Prototipo gráfico u horizontal: Consiste en la preparación gráfica, en alta fidelidad, de las pantallas claveEn una aplicación normal suelen corresponder al menú principal, a varias pantallas de contenido

(eligiendo las más significativas, como exposición de todas las posibilidades), y al tratamiento de otras

 pantallas que puedan existir, según el caso, como el índice, ayuda, etc.En una web, se acostumbra a preparar la home (página de inicio), el menú principal (si es distinto a la

home), y las pantallas interiores más representativas.

Page 8: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 8/10

  Las opciones suelen representarse tanto en estado normal como en rollover (aspecto de la opción cuando el

usuario pasa el cursor por encima). De esta manera, se obtienen una serie de gráficos que permiten ver si ladistribución de los elementos es correcta, y si puede responder realmente a los contenidos previstos. Un

 prototipo gráfico no implica todavía la integración mediante un sistema de autor o la preparación del código

HTML (o el sistema que se vaya a utilizar en el caso de web).

 Prototipo funcional o vertical: Supone la preparación de una versión temprana y reducida de la aplicación, en

la que se desarrollan los caminos más significativos. El usuario tiene la capacidad de navegar por el sistema

mediante las mismas opciones que contendrá la aplicación final, aunque no puede acceder realmente a todos loscontenidos.

Es importante saber elegir correctamente qué opciones necesitan ser desarrolladas en este prototipo, puesto que

es un medio fundamental para la detección de errores en el diseño funcional.

El prototipo vertical, al igual que el horizontal, permite realizar evaluaciones de usabilidad para detectar

 posibles problemas. Las modificaciones que surjan a partir de los prototipos pueden suponer un retorno al

estadio de análisis de la aplicación. Puesto que el desarrollo se encuentra en un estadio temprano, es importanterealizar una evaluación exhaustiva de los aspectos de diseño, ya que las correcciones efectuadas en estadios

 posteriores suelen resultar problemáticas, llegando a desajustar todas las previsiones de producción. Asimismo

el prototipo funcional se presenta al cliente, que tiene una primera muestra de lo que va a ser la aplicación

mediante la que puede aportar sugerencias o realizar correcciones que en esta fase del proyecto son fácilmenterealizables.

Wireframe(aplicaciones web)Un wireframe para un sitio web, también conocido como un esquema de página o plano de pantalla, es

una guía visual que representa el esqueleto o estructura visual de un sitio web.

  El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendoelementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.

  Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal

objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.

  Se enfoca en “qué hace la pantalla, no cómo se ve.” 

  Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser

 producidos con medios de diseño de aplicaciones de software libre o comerciales.

 Los wireframes se orientan en:

  Los tipos de información que será mostrada

  La cantidad de las funciones disponibles

  Las prioridades relativas de la información y las funciones

  Las reglas para mostrar ciertos tipos de información

Page 9: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 9/10

  El efecto de los distintos escenarios en la pantalla

 Elementos de un wireframeEl esqueleto de un sitio web puede ser dividido en tres componentes: diseño de información, diseño de

navegación y diseño de interfaz. El diseño de la página es donde estos componentes se unen, mientras que un

wireframe es donde se representa la relación entre estos componentes.1.   Diseño de información: es la ubicación en la presentación y priorización de información de manera que

facilite el entendimiento. El diseño de información es un área del diseño gráfico pensada para

representar información de manera efectiva para una comunicación clara. Para sitios web, los elementosinformativos deben estar ordenados de manera que reflejen los objetivos y tareas del usuario.

2.   Diseño de navegación:  el sistema de navegación provee un conjunto de elementos en pantalla que

 permiten al usuario moverse entre páginas del mismo sitio web. El diseño de navegación debe

comunicar la relación entre los enlaces que contiene de forma que los usuarios entiendan las opciones

que tienen para navegar el sitio. A menudo, los sitios web contienen múltiples sistemas de navegacióntales como navegación global, navegación local, navegación suplementaria, navegación contextual y

navegación de cortesía. Este diseño permite dar una vista de manera global, de la ubicación y

desplazamiento a través de las diferentes páginas de un sitio web.3.   Diseño de interfaz: el diseño de la interfaz de usuario incluye seleccionar y ordenar los elementos de la

interfaz para permitir a los usuarios interactuar con la funcionalidad del sistema. El objetivo es facilitar

la usabilidad y eficiencia tanto como sea posible. Elementos comunes que se encuentran en el diseño deinterfaces son los botones de acción, campos de texto, cajas de verificación, botones radiales y menús

desplegables.

Ventajas de usar Wireframes

   Rápidos y baratos de crear: Como son bocetos esquemáticos son rápidos de crear y tienen un costo muy bajo. Esto te permite realizar múltiples versiones hasta encontrar la adecuada sin que ello suponga un

 problema de tiempo o dinero.

   Detectar y corregir los problemas antes: Al ser sencillos y rápidos de realizar te permiten exponerlos

rápidamente a realimentación (feedback) y resolver problemas básicos relacionados con la usabilidad yfuncionalidades propuestas.

 

 Mejoras sencillas: En poco tiempo podrás mostrar los primeros Wireframes a amigos, clientes orepasarlos tu mismo para pulir el diseño, el posicionamiento de los elementos o la estructura de loscontenidos.

   Mejor usabilidad: Planear previamente la estructura y los elementos de la página web te permitirá

ofrecer una mejor usabilidad al no improvisar sobre la marcha y haber definido previamente estos

elementos.

 Herramientas para wireframes

  Wireframes creados a mano:  es la forma más sencilla y económica de crear wireframes. Solo

necesitamos papel y lápiz y un poco de imaginación. No hace falta ser un Picasso, ni siquiera parecerlo

de lejos. Cualquiera sabe dibujar cuatro líneas y dibujar un esquema sencillo como el este ejemplo.

Page 10: MODULO I Continuacion

7/23/2019 MODULO I Continuacion

http://slidepdf.com/reader/full/modulo-i-continuacion 10/10

  Utilizar plantillas imprimibles para wireframes:  esta opción, también barata y muy sencilla esimprimirse algunas plantillas predeterminadas para crear los wireframes. Hay multitud de ellas en

Internet.

  Utilizar un programa o aplicación:  por desgracia algunas de las mejores aplicaciones son de pago.Aunque no muy caras y funcionan de maravilla. Podrás crear unos wireframes para tus páginas web muy

 profesionales y son muy sencillos de usar.