Módulo 3.

Prototipos

En la presente lectura abordaremos con mayor detenimiento en qué consiste la arquitectura de la información y a qué se denomina
vocabulario visual. Luego, abordaremos en qué consiste el concepto de usabilidad y cuáles son los principios heurísticos básicos de la
misma, para concluir con la técnica de prototipado.

Video de inmersión

Unidad 3.1. Arquitectura de la información y vocabulario visual

Unidad 3.2. Reglas, arquitectura y sistemas

Video de habilidades

Cierre

Referencias

Descargá la lectura
Lección 1 de 7

Video de inmersión

Verify to continue
We detected a high number of errors from your connection. To
continue, please confirm that you’re a human (and not a
spambot).

I'm not a robot

reCAPTCHA
Privacy - Terms
Lección 2 de 7

Unidad 3.1. Arquitectura de la información y vocabulario visual

3.1.1 Arquitectura de la información

Arquitectura de la información: concepto y características

Se refiere a la estructura, organización y etiquetas de los elementos que conforman los entornos informacionales para facilitar, de esta manera, la localización
o acceso a la información contenida en ellos y mejorar, así, su utilidad y su aprovechamiento por parte de los usuarios (Pérez-Montoro, 2010).

También, puede definirse como el diseño estructural del espacio de información para facilitar el acceso intuitivo al contenido (Garret, 2000).

En este sentido, del concepto de arquitectura de la información se desprende el de arquitecto de la información y su función dentro del proyecto. Este tiene la
responsabilidad, como lo explica Jesse James Garrett, de reconocer los objetivos del proyecto y las necesidades de los usuarios, detallar las utilidades y
requisitos de la aplicación web, precisar y esbozar los sistemas de navegación, organización, etiquetado y búsqueda y, finalmente, realizar el prototipado de la
aplicación.

Así, si se piensa en la construcción de una casa, por ejemplo, nos encontramos con un escenario semejante. Antes de comenzar a construirla tendremos que
contratar a un arquitecto para que haga los planos y la maqueta de la misma. Del mismo modo, el arquitecto de la información tendrá que diagramar y
prototipar el proyecto de la aplicación web antes de que se construya, con el objetivo de definir la organización, estructura, navegación y funcionamiento de la
misma.

En consecuencia, el arquitecto de la información tiene a su cargo la ejecución de determinadas tareas inherentes a su función:

Clarificar la misión y visión del sitio, haciendo un balance entre las necesidades de la organización que lo impulsa y las necesidades de
sus audiencias.

Determinar el contenido y funcionalidad que el sitio va a tener.

Especificar cómo buscarán información en el sitio los usuarios, mediante la definición de sus sistemas de organización, navegación,
etiquetado y búsqueda.

Proyectar cómo el sitio se acomodará al cambio y crecimiento en el tiempo.

Figura 1. Mapa del sitio de Nielsen Norman Group

 Fuente: [Imagen intitulada Mapa del sitio de Norman Group]. (s. f.). Recuperada de https://goo.gl/L7C992

Usuarios: necesidades y estrategias

Puesto que es indispensable que el producto satisfaga las necesidades de los usuarios, la concepción del mismo debe partir, indefectiblemente, de las
necesidades reales e intereses de sus usuarios.

En consecuencia, si son las necesidades del usuario las que ocasionan el uso del producto, deben ser estas las que influyan y determinen su diseño. Por
medio de la observación, investigación e indagación del usuario (actividad, entorno y contexto de uso), es factible descubrir y examinar estas necesidades.

No obstante, ponerse en el lugar del usuario no es una tarea fácil como tampoco lo es el descubrir aquello que éste necesita. Por tal motivo, los diseños
deben alinearse con aquellas necesidades y propósitos más factibles, dejando de lado los factores contextuales que puedan cambiar la relevancia de las
cualidades del diseño tendientes a satisfacer la experiencia de uso.

Figura 3. Relación diseñador – usuario

 Fuente: [Imagen intitulada Relación Diseñador - Usuario]. (s. f.). Recuperada de https://goo.gl/lziYIv

En este sentido, los tipos de necesidades pueden clasificarse de la siguiente manera:

1 Necesidad de información concreta (NIC)

“¿Cuál es el valor de este producto?”

2 Necesidad de información orientada a problemas (NIOP)

“¿A cuántos le pasó lo mismo que a mí?”

3 Necesidad de información exploratoria (NIE)

“¿Dónde puedo ir de vacaciones?”

4 Necesidad de información sobre búsquedas previas (NIBP)

“Recuerdo haberlo visto en…”

Por ende, las estrategias que se utilizan para satisfacer estas necesidades son:

1 Búsqueda

Lo primero que hace es utilizar el buscador, por ejemplo.

 2 Navegación

Explora a partir de los diferentes links de la web.

3 Ayuda

Ya sea por comodidad o desesperación, reclama orientación sobre el contenido que busca.

El modelo berrypicking o recolección de bayas se pone en marcha cuando el usuario utiliza una o todas estas estrategias para localizar información que
asimila y evalúa para reformular o refinar su necesidad, hasta que considera que ha quedado resuelta (Bates, 1989).

3.1.2 Arquitectura de la información y diseño centrado en el usuario: vocabulario visual

Características

Jesse James Garrett, cofundador de AdaptivePath, empresa de estrategia y diseño de experiencias de usuario en 2001, y cofundador del Instituto de
Arquitectura de la Información (http://www.jjg.net), comenta que los diagramas de los sitios involucran a la arquitectura y al diseño, pero que cada uno posee
objetivos levemente diferentes.

En los dos casos, este diagrama se enfoca en una macro-estructura y da un detalle que permite a los miembros del equipo ver el panorama. Así, será el
arquitecto quien determinará el nivel apropiado de detalle para lograr el objetivo y el detalle específico a nivel de cada página, estará en otros documentos.

De este modo, al momento de armar la arquitectura, el diagrama enfatizará la estructura conceptual y organización del contenido.

El objetivo del diagrama de arquitectura de información no es entregar una especificación de navegación completa; este detalle es mejor puesto en otros
documentos, donde cause menos riesgo de confundir y distraer.

Así, a la hora de realizar la diagramación de una aplicación web lo más importante es que la misma sea comprensible, clara y que refleje de manera confiable
la estructura, el flujo de navegación y la relación entre los elementos, independientemente de la propuesta que se elija para diagramar. Con el fin de sumar a la
comprensión de la misma, se recomienda incluir una leyenda con los símbolos utilizados.

Desde el diseño de interacción, el diagrama enfatizará en cómo el usuario fluye a través de tareas definidas y pasos discretos. Tal como sucede con la
navegación, los detalles de interfaz no van a aparecer en el diagrama, ya que no hay que detallar en exceso.

Este modelo conceptual hace que:

El sistema le presente al usuario caminos.

El usuario se mueva a través de estos caminos mediante diferentes acciones.

Las acciones del usuario causen resultados.

Conceptos básicos
 Puesto que los diagramas de Arquitectura de Información tienen como objetivo la creación de una reseña visual de la estructura, distribución e interacción a
nivel de página, seguidamente, se detallarán algunos conceptos básicos aplicables a los mismos.

Elementos Simples
–

Páginas. La unidad básica de la experiencia de usuario es la página, teniendo en cuenta que es una unidad de presentación, no de implementación.

Archivos. Entregados al usuario para su uso fuera de un ambiente de navegador web o browser como, por ejemplo, videos, PDFs o ejecutables, etc.

Pila. Indica un conjunto de páginas funcionalmente idénticas. Tiene una forma parecida a la de una pila de documentos y se la utiliza para representar a un grupo de
documentos que reciben idéntico tratamiento de navegación y que se clasifican como una entidad única, por ejemplo, una librería de manuales PDF.

Etiquetas. Se utilizan para identificar páginas y archivos. Deben ser únicas para cada elemento del diagrama y poseer identificadores y designaciones de tipo, para
poder seguir el rastro de páginas y documentos en los diagramas.

Conexiones
–
Las relaciones conceptuales se transformarán inevitablemente en relaciones de navegación, conectando y definiendo direcciones.

Flechas y Conectores.
Indican cómo el usuario se moverá dentro del sistema siguiendo tareas particulares y una dirección probable, conocida como el "camino feliz". Pueden tener diferentes
direcciones.
En el caso de no querer que el usuario vuelva hacia atrás se utiliza una barra cruzada, para demostrar que no está permitido.
Las flechas y los conectores también serán etiquetables con el fin de clarificar la información, pero cuidando de no sobrecargar el diagrama. En estos casos se podrán
agregar notas al pie.

Todos Unidos
–
Conjuntos concurrentes
Se utiliza un gráfico de semicírculo para mostrar, por ejemplo, que una acción genera múltiples resultados.

Separando los Tantos

–
Puntos de continuación
En diferentes dispositivos, es muy común encontrar diagramas de gran tamaño que complican, tanto la impresión como la lectura de los mismos.
Para separar los diagramas en secciones fáciles de digerir, se utilizan los puntos de continuación. Gráficamente son paréntesis que sirven para unir los vacíos entre las
páginas y que indican que algo continúa, desde o hacia un sentido.

Elementos Comunes
–

Áreas. Las áreas se utilizan para mostrar que una o varias páginas utilizan atributos comunes, ya sea un diferencial de diseño o por ejemplo una nueva ventana.

Áreas Iterativas. Para aquellos casos en donde existen elementos de igual funcionalidad, se utilizan las áreas iterativas que pueden ser representadas por una pila o
conjunto de elementos.
Figura 4. Diagrama de Yahoo Mail de James Garrett

Fuente: [Imagen intitulada Diagrama para Yahoo! Mail de James Garrett]. (s. f.).
Lección 3 de 7

Unidad 3.2. Reglas, arquitectura y sistemas

3.2.1 Usabilidad y principios heurísticos básicos de usabilidad

Usabilidad: definición, características y conceptos relacionados

Si bien en castellano usabilidad se refiere a la capacidad de algo de ser usado o no, en este caso nos basaremos en la concepción inglesa del término
usability, con la que se describe la forma de medir qué tanto un producto o servicio puede ser empleado por un usuario para alcanzar un fin específico.

Asimismo, aunque la usabilidad alude a la característica de facilidad de empleo aplicada al software, su uso no se restringe solo a este campo, sino que es
relevante para cualquier aparato humano. Básicamente, un producto o aplicación es simple de utilizar cuando responde positivamente al trabajo para el que se
lo empleó.

Sin embargo, la definición esbozada con anterioridad no es más que una explicación operativa y poco nos dice sobre su cualidad empírica, dependiente,
relativa y ética.

Como ya se dijo, dado que el concepto de usabilidad tiene una naturaleza empírica, la misma puede medirse y evaluarse. Los componentes que sirven para
medirla son (Nielsen; 2003):

Facilidad de Aprendizaje

¿Cómo de fácil resulta para los usuarios llevar a cabo tareas básicas la primera vez que se enfrentan al diseño?

Eficiencia

Una vez que los usuarios han aprendido el funcionamiento básico del diseño, ¿cuánto tardan en la realización de tareas?

Cualidad de ser recordado

Cuando los usuarios vuelven a usar el diseño después de un periodo sin hacerlo, ¿cuánto tardan en volver a adquirir el conocimiento
necesario para usarlo eficientemente?

Eficacia

Durante la realización de una tarea, ¿cuántos errores comete el usuario?, ¿cómo de graves son las consecuencias de esos errores?,
¿cómo de rápido puede el usuario deshacer las consecuencias de sus propios errores?

Satisfacción

¿Cómo de agradable y sencillo le ha parecido al usuario la realización de las tareas?

Por otra parte, lo que motiva el uso de un producto o aplicación no es su usabilidad sino su utilidad, en el sentido de provecho, beneficio e interés que produce
su uso (Hassan-Montero; 2006). Dicho de otro modo, el usuario es incentivado por la aptitud que percibe en el producto de satisfacer sus necesidades o
deseos.

La relación entre utilidad y usabilidad es de mutua dependencia y no puede hablarse de ellos como elementos aislados, tal cual lo indica Dillon y Morris
(1999): “la usabilidad representa el grado en el que el usuario puede explotar la utilidad”.

Cabe destacar que esta relación dependiente que se establece entre un concepto y el otro, se produce en ambos sentidos. Así, un producto o aplicación será
usable, siempre y cuando, el beneficio obtenido como resultado de su uso (utilidad), justifique el esfuerzo requerido para usarlo (aprendizaje). La ecuación es
simple y sin secretos: a mayor beneficio percibido, mayor resistencia ante la frustración y la tolerancia por el esfuerzo de uso.

Asimismo, la usabilidad no posee carácter universal, ya que los productos o aplicaciones son creados para satisfacer las necesidades de una determinada
audiencia. Como se desprende de este concepto, la usabilidad no sólo concierne a los usuarios de los productos, sino también al uso (objetivos y contextos)
que estos hacen de los mismos. Además, aún, cuando el producto es usado conforme a los objetivos y contextos previstos, estos determinarán el grado de
importancia de su usabilidad.

Finalmente, el objetivo último del diseño usable es contribuir a la mejora de la calidad de vida de las personas. De este modo, si un diseño usable es aquel
que se adapta a sus usuarios, se entiende que no basta con el hecho que estos entiendan la forma de usar el producto, sino que también se los debe proteger
de deducciones discriminatorias o malas interpretaciones.

“Si la facilidad de uso fuera el único criterio válido, las personas se quedarían en los triciclos y nunca
probarían las bicicletas” (Engelbart, 2001, https://goo.gl/Mt9WD8).

Principios heurísticos básicos de usabilidad

La evaluación heurística implica el estudio y la evaluación de la interfaz y es realizada en base a reglas y principios de usabilidad, establecidos con
antelación. Este proceso es llevado a cabo por los expertos en usabilidad, quienes observan y analizan el diseño en busca de posibles inconvenientes de
usabilidad y para verificar el efectivo cumplimiento de los principios indicados con anterioridad.

En 1995 Jakob Nielsen, el “Gurú de la Usabilidad”, expone 10 principios generales sobre diseño de interacción que servirán de base para la evaluación
heurística. Los nombra Heurísticos, ya que no son reglas específicas sino directrices generalizadas que instituyen requisitos a cumplir en el diseño, con el fin
de facilitarle al usuario final su comprensión y uso.

Figura 5. Principios heurísticos básicos de usabilidad

 Fuente: [Imagen intitulada Principios Heurísticos Básicos de Usabilidad]. (s. f.). Recuperada de https://goo.gl/FOZcCC

1 Visibilidad del estado del sistema

El sistema (web, aplicación) debe mantener siempre informado al usuario de lo que está ocurriendo y brindarle una respuesta en el menor
tiempo posible, deberá generar con el usuario un feedback constante. Podemos tomar como ejemplos a las barras de progreso de subida
de archivos, los pasos de un proceso de compra, o los mensajes de los formularios.

Figura 6. Visibilidad del estado

Fuente: [Imagen intitulada Visibilidad del Estado]. (s. f.). Recuperada de t.ly/WGA9

Relación entre el sistema y el mundo real

2
 El sitio web o aplicación debe manejar el mismo lenguaje del usuario, con expresiones y palabras que le sean familiares, ordenando la
información de manera lógica y natural. Las imágenes asociadas a las acciones a realizar o a la forma de presentar la información, son
ejemplos claros a tener en cuenta.

Figura 7. Relación entre el sistema y el mundo real

Fuente: [Imagen intitulada Relación entre el Sistema y el Mundo Real]. (s. f.). Recuperada de https://goo.gl/87vgAw

3 Libertad y control por parte del usuario

En caso de elegir alguna opción por error, el usuario debe tener a la vista una “salida de emergencia” para poder, así, abandonar el estado
no deseado. Debe lograr deshacer o repetir la acción realizada. Si el usuario “siente” que tiene el control tendrá una experiencia agradable.

4 Consistencia y estándares

Los usuarios no deben preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. El sistema deberá seguir
estándares consistentes, teniendo en cuenta la jerarquía en los elementos, los estándares de navegación, ubicaciones, interacciones, etc.

Figura 8. UI Kit

Fuente: [Imagen intitulada UI Kit]. (s. f.). Recuperada de https://goo.gl/36aq1Z

5 Prevención de errores
 La idea es eliminar todo tipo de condición que haga que el usuario cometa errores, presentando opciones de confirmación antes de que
existan acciones. Por ejemplo, realizar validaciones en tiempo real indicando que lo ingresado no es correcto, campos con autocompletar,
solicitudes de confirmación, etc.

Figura 9. Autocompletar para minimizar errores

Fuente: [Imagen intitulada Autocompletar para Minimizar Errores]. (s. f.). Recuperada de https://goo.gl/cLxqcp

6 Reconocer antes que recordar

En todo momento el usuario debe tener la información a mano, ya que es de suma importancia hacerle la tarea fácil. Hay que mostrarle
las acciones y opciones, para que no tenga que recordar decisiones entre distintas secciones o partes del sitio web o aplicación.

Figura 10. Sugerencia de palabra incorrecta

Fuente: [Imagen intitulada Sugerencia de Palabra Incorrecta]. (s. f.). Recuperada de https://goo.gl/NnFuet

7 Flexibilidad y eficiencia en el uso

Los aceleradores como atajos de teclado, los accesos desde la página principal, los mensajes de instalación avanzada, hacen más rápida
la interacción de los usuarios expertos. El sistema deberá ser útil tanto para los usuarios básicos como para los avanzados.

8 Diseño estético y minimalista

 Las páginas no deben contener información innecesaria. Cada información extra que se muestre en el sistema o sitio web, compite con la
información relevante y disminuye su visibilidad. En este sentido, la priorización se vuelve un jugador clave, por lo que tanto los
contenidos como la interface deberán ser claros y enfocados a las metas y acciones necesarias.

Figura 11. Acceso claro a la información desde la página de inicio

Fuente: [Imagen intitulada Acceso Claro a la Información desde la Página de Inicio]. (s. f.). Recuperada de https://goo.gl/WQta84

9 Ayuda a reconocer, diagnosticar y recuperarse de los errores

Los mensajes de error deben estar redactados con un lenguaje simple y accesible para el usuario. Así, se debe indicar cuál es el
problema y ofrecer alternativas para solucionarlo, cuestión que el usuario pueda continuar su experiencia en la web.

Figura 12. Página de error Airbnb

Fuente: [Imagen intitulada Página de Error Airbnb]. (s. f.). Recuperada de https://goo.gl/q9qzmb

10 Ayuda y documentación

Aunque es mejor que el sistema se pueda utilizar sin ayuda, puede ser necesario proveer cierto tipo en algunos casos. Esta ayuda debe
ser fácil de localizar, no ser muy extensa y por sobre todo orientada a tareas concretas. Se debe evitar que el usuario lea contenidos que
no le interesan para resolver su problema.

Figura 13. Página de ayuda de YouTube

 Fuente: [Imagen intitulada Página de ayuda de YouTube]. (s. f.). Recuperada de https://goo.gl/6UtaZn

3.2.2 Técnica de prototipado

Los resultados obtenidos a partir del análisis de usuarios y de la descripción de sus requisitos, permiten la definición de perfiles de usuario, modelos de
personas y escenarios. Con estas definiciones realizadas, se cuenta con la información necesaria para dar comienzo a las actividades de diseño propiamente
dichas.

No obstante, es importante destacar que antes de empezar a prototipar es preciso contar con la especificación de los objetivos del cliente, las necesidades
de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web.

Por otra parte, las técnicas de prototipado son ejecutadas por expertos en DCU con la asistencia de los perfiles encargados del desarrollo.

Concepto y características

Los prototipos son uno o más modelos diferentes de un producto o servicio web o aplicación. Estos simulan partes del sistema final y sirven para hacer
pruebas que, de otro modo, no serían factibles de realizarse hasta que el proyecto estuviera completado. En otras palabras, tienen la finalidad de simular
testeos tangibles de los conceptos que hasta el momento eran abstractos y no incluyen elementos artísticos de diseño.

No obstante, estos modelos no están pensados para reproducir el lugar web o el sistema en su totalidad, ya que se realizan a manera de esquemas
simplificados y tienen por objetivo la discusión y el acuerdo sobre la ubicación de los elementos claves del proceso o los que presentan una especial
complejidad. Normalmente estos son realizados por un diseñador y nacen como algo pequeño, con ciertas zonas claves identificadas, y van creciendo en
paralelo a la realización de diversas iteraciones en las áreas necesarias, hasta que el prototipo es concluido y entregado para dar inicio al desarrollo del
producto final.

Asimismo, estos esquemas muestran contenidos y comportamientos que permiten explorar aspectos de usabilidad, accesibilidad y funcionalidad, permitiendo
al equipo (cliente, diseño, y desarrollo) comunicarse, discutir, testear y proponer mejoras en fases tempranas del desarrollo. Además, mejoran la calidad y
claridad de las especificaciones funcionales de un sistema y promueven la iteración e información necesaria en los proyectos. Las interaciones generadas se
dan con una velocidad indiscutible, que abarcan desde cambios en tiempo real hasta ciclos de algunos días.

Por el contrario, la desventaja de prototipar reside en que al trabajar sobre partes incompletas de un todo puede que existan aspectos que no se puedan
evaluar.
Si bien el prototipado presenta alguna que otra desventaja, los beneficios obtenidos por el uso de los mismos son incuestionablemente mayores. A
continuación, un detalle de las principales ventajas derivadas del proceso de prototipado:

Ayuda a definir contenidos, estructuras y funcionalidades antes de comenzar con el diseño y desarrollo.

Da la posibilidad a usuarios y clientes de involucrarse de manera activa en el desarrollo.

Permite explorar diferentes conceptos de forma rápida y temprana, antes de tomar la decisión final.

Clarifica a los diseñadores la elección de varias alternativas, permitiendo avanzar sobre terreno seguro.

Deja llevar a cabo pruebas con anterioridad al desarrollo final ahorrando, de este modo, tiempos y costos.

Tipología

Como ya se expuso, los prototipos tienen por objetivo la formación de una referencia visual de la estructura, organización e interacción a nivel de página y se
clasifican principalmente en:

1 Prototipos de Baja Fidelidad o Estáticos

Se trata de dibujos estáticos.

Sketch. Es el boceto más rápido como también el más informal, ya que no precisa de detalles. Se realiza en
lápiz y papel, transmite ideas y conceptos claros y no incluye diseño visual ni funcionalidades.

Wireframe. Es más elaborado que el anterior y se enfoca en la estructura y jerarquía del contenido. Contiene
un catálogo de contenido, o sea, una descripción del tipo de contenido que debe almacenar cada página,
como así también, de los elementos, etiquetas y comportamientos incluidos en esta. Se entrega en escala de
grises o sin color, salvo los links, y es necesario explicarlos personalmente.

Storyboard. Es una secuencia de wireframes donde se muestran los diferentes pasos a realizar de una
tarea, de principio a fin.

2 Prototipos de Alta Fidelidad o Dinámicos

También llamados funcionales, maquetas o mockups, permiten detallar el proceso interactivo de una o varias tareas. Son prototipos o
maquetas dinámicas, normalmente en HTML, que simulan o poseen partes del sistema final a desarrollar.

Mockup. Es un prototipo de alta calidad que se enfoca en comunicar y probar una parte concreta del diseño
y su funcionalidad. Es una forma precisa para obtener resultados en los tests de usuarios.

Figura 14. Sketch inicio web

 Fuente: elaboración propia.

Figura 15. Wireframe inicio

Fuente: elaboración propia.

Figura 16. Storyboard inicio, detalle, imagen

Fuente: [Imagen intitulada Storyboard Inicio, Detalle, Imagen]. (s. f.). Elaboración propia.
Figura 17. Mockup

Fuente: [Imagen intitulada Mockup]. (s. f.). Elaboración propia.

Lección 4 de 7

Video de habilidades

¿Cuál es el principio heurístico que permite a los usuarios deshacer y rehacer acciones, y tener siempre a la vista una salida de

emergencia?

Visibilidad del estado del sistema.

Relación entre el sistema y el mundo real.

Libertad y control por parte del usuario.

Prevención de errores.

Reconocer antes que recordar.

SUBMIT
¿Cuál de estos principios heurísticos no es tal?

Visibilidad del estado del sistema.

Ayuda y documentación.

Bueno, bonito y barato.

Flexibilidad y eficiencia de uso.

Diseño estético y minimalista.

SUBMIT

El principio heurístico de seguir normas y convenciones dice que:

La idea es eliminar cualquier condición que haga que el usuario cometa errores.

En todo momento el usuario debe tener información a mano, es importante facilitarle las tareas.

Los aceleradores o atajos de teclado hacen más rápida la interacción a usuarios expertos.

Aunque es mejor que un sistema se pueda utilizar sin ayuda, puede ser necesario proveer cierta información en
algunos casos.

Los usuarios no deben preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Se deben
seguir estándares.

SUBMIT
El principio heurístico "documentación y ayuda" plantea que las páginas no deben contener información innecesaria. Cada información

extra compite con la información relevante y disminuye su visibilidad.

Verdadero.

Falso.

SUBMIT

El principio heurístico _______________ dice que el sistema debe mantener siempre informado al usuario de lo que está ocurriendo y

brindarle una respuesta en el menor tiempo posible, como por ejemplo barras de progreso, los diferentes pasos de compra, etcétera.

Escriba su respuesta aquí

SUBMIT
Lección 5 de 7

Cierre

Arquitectura de la información
–
Se refiere a la estructura, organización y etiquetas de los elementos que conforman los entornos informacionales para facilitar, de esta manera, la localización o acceso a la
información contenida en ellos y mejorar, así, su utilidad y su aprovechamiento por parte de los usuarios (Pérez-Montoro, 2010).El arquitecto de la información tiene a su
cargo la ejecución de determinadas tareas inherentes a su función:

Clarificar la misión y visión del sitio, haciendo un balance entre las necesidades de la organización que lo impulsa y las necesidades de sus audiencias.

Determinar el contenido y funcionalidad que el sitio va a tener.

Especificar cómo buscarán información en el sitio los usuarios, mediante la definición de sus sistemas de organización, navegación, etiquetado y búsqueda.

Proyectar cómo el sitio se acomodará al cambio y crecimiento en el tiempo.

Usuarios: necesidades y estrategias

–
Los tipos de necesidades pueden clasificarse de la siguiente manera:

1. Necesidad de información concreta (NIC)

2. Necesidad de información orientada a problemas (NIOP)

3. Necesidad de información exploratoria (NIE)

4. Necesidad de información sobre búsquedas previas (NIBP)

Por ende, las estrategias que se utilizan para satisfacer estas necesidades son:

Búsqueda. Lo primero que hace es utilizar el buscador, por ejemplo.

Navegación. Explora a partir de los diferentes links de la web.

Ayuda. Ya sea por comodidad o desesperación, reclama orientación sobre el contenido que busca.

Vocabulario visual
–
A la hora de realizar la diagramación de una aplicación web lo más importante es que la misma sea comprensible, clara y que refleje de manera confiable la estructura, el flujo
de navegación y la relación entre los elementos, independientemente de la propuesta que se elija para diagramar. Con el fin de sumar a la comprensión de la misma, se
recomienda incluir una leyenda con los símbolos utilizados.

Desde el diseño de interacción, el diagrama enfatizará en cómo el usuario fluye a través de tareas definidas y pasos discretos. Tal como sucede con la navegación, los
detalles de interfaz no van a aparecer en el diagrama, ya que no hay que detallar en exceso.

Usabilidad
–
Dado que el concepto de usabilidad tiene una naturaleza empírica, la misma puede medirse y evaluarse. Los componentes que sirven para medirla son (Nielsen; 2003):

Facilidad de aprendizaje

Eficiencia

Cualidad de ser recordado

Eficacia

Satisfacción

Principios heurísticos básicos de usabilidad

–
La evaluación heurística implica el estudio y la evaluación de la interfaz y es realizada en base a reglas y principios de usabilidad, establecidos con antelación. Este proceso
es llevado a cabo por los expertos en usabilidad, quienes observan y analizan el diseño en busca de posibles inconvenientes de usabilidad y para verificar el efectivo
cumplimiento de los principios indicados con anterioridad.

Técnica de prototipado
–
Los prototipos son uno o más modelos diferentes de un producto o servicio web o aplicación. Estos simulan partes del sistema final y sirven para hacer pruebas que, de otro
modo, no serían factibles de realizarse hasta que el proyecto estuviera completado. En otras palabras, tienen la finalidad de simular testeos tangibles de los conceptos que
hasta el momento eran abstractos y no incluyen elementos artísticos de diseño. Estos se pueden clasificar en:

1. Prototipos de baja fidelidad o estáticos

2. Prototipos de alta fidelidad o dinámicos

Lección 6 de 7

Referencias

[Imagen intitulada Página de ayuda de YouTube]. (s.f.). Recuperada de https://goo.gl/6UtaZn

[Imagen intitulada Acceso Claro a la Información desde la Página de Inicio]. (s.f.). Recuperada de https://goo.gl/WQta84

[Imagen intitulada Página de Error Airbnb]. (s.f.). Recuperada de https://goo.gl/q9qzmb

[Imagen intitulada Sugerencia de Palabra Incorrecta]. (s.f.). Recuperada de https://goo.gl/NnFuet

[Imagen intitulada Teclas de Acceso Directo de Facebook]. (s.f.). Recuperada de https://goo.gl/HYKWTS

[Imagen intitulada UI Kit]. (s.f.). Recuperada de https://goo.gl/36aq1Z

[Imagen intitulada Autocompletar para Minimizar Errores]. (s.f.). Recuperada de https://goo.gl/cLxqcp

[Imagen intitulada Relación entre el Sistema y el Mundo Real]. (s.f.). Recuperada de https://goo.gl/87vgAw

[Imagen intitulada Posibilidad de Deshacer una Acción]. (s.f.). Recuperada de https://goo.gl/h8Kp31

[Imagen intitulada Principios Heurísticos Básicos de Usabilidad]. (s.f.). Recuperada de https://goo.gl/FOZcCC

[Imagen intitulada Visibilidad del Estado]. (s.f.). Recuperada de https://goo.gl/JvFYhL

[Imagen intitulada Mapa del sitio de Norman Group]. (s.f.). Recuperada de https://goo.gl/L7C992

[Imagen intitulada Mapa de un sitio]. (s.f.). Recuperada de https://goo.gl/NGMIDt

[Imagen intitulada Relación Diseñador - Usuario]. (s.f.). Recuperada de https://goo.gl/lziYIv

Carreras, O. (2011). Arquitectura de información. Fundamentos. Recuperado de https://goo.gl/qxbfyU

Engelbart, D. (2001). Experiencia de Usuario: Motivación y Frustración. Recuperado de https://goo.gl/Mt9WD8

Morville, P. y Rosenfeld, L. (2006). Information Architecture for the World Wide Web. 3rd Edition. O'Reilly Media.

Nielsen, J. (2005). 10 Usability Heuristics for User Interface Design. Recuperado de https://goo.gl/YUVJ3o

Pérez-Montoro Gutiérrez, M. (2010). Arquitectura de la información en entornos web. EdicionesTrea.