Diagrama de navegabilidad

Es un documento utilizado para plasmar la estructura de la navegación del entorno. Este

diagrama nace del diagrama de contenidos, permite desplegar de forma gráfica las

principales categorías conceptuales relacionadas con los sistemas de la navegación

correspondiente y los diferentes tipos de páginas en Sitios Web. Para lograr este objetivo,

básicamente el sitio web debe proporcionar los recursos y estrategias de navegación

necesarias, diseñados para conseguir un resultado óptimo en la localización de la

información y en la orientación para el usuario.

Para la elaboración del diagrama es importante tener en cuenta que cada diagrama debe

estar correspondido con la pantalla así que, si el proyecto o donde se desee aplicar el

diagrama es extenso, se tendrán en cuenta varias pantallas. Es importante que cada

sección dentro del diagrama desde estar bien definido, se deben reflejar los títulos de

cada sección, las referencias o el guion que se vaya a aplicar y tener muy claras las

relaciones de cada sección ya que si no es definido este ítem podría haber consecuencias

al momento de registrar los iconos en la página.

El diagrama de flujo representa la navegabilidad en nuestro proyecto y las relaciones

entre las diferentes pantallas.

Los componentes según metodología UWE nos podemos encontrar con memorias tipo

Compact Flash o el uso de la memoria RAM como un dispositivo de almacenamiento

permanente parecido a un disco, en cuanto a la parte externa se pueden encontrar los

dispositivos de entrada y salida están condicionados por el tamaño del equipo en el que

se vaya a aplicar, los periféricos son reemplazados por pantallas táctiles lo que promueve

la ejecución de forma más ágil las aplicaciones donde se describen textos cortos, para

textos largos el proceso si se afecta levemente.

Dentro del enfoque del desarrollo de la aplicación se ve reflejado en los elementos de

navegación, o las mismas funcionalidades en todos los dispositivos. Brindando la

posibilidad que los contenidos sean capaces de ser adaptados al contexto y a las

interfaces de acceso y sean basada en los estándares web para su creación.

Dentro del desarrollo de páginas mediante estándares web se transforma en una ventaja

competitiva, que agrega valor, posicionamiento y rentabilidad, logrando que un sitio tome

fuerza dentro de este nuevo contexto mundial apoyado en la arquitectura del desarrollo de

aplicaciones, claros ejemplos de esto son HTML (lenguaje utilizado para la creación y

construcción de páginas web) y XML (formato que permite la lectura de datos a través de

diferentes aplicativos. Es un lenguaje parecido a HTML, pero su objetivo fundamental es

describir datos y no mostrarlos).

Coherencia: implica que todos los elementos de tu página web formen un conjunto lógico;

esto implica que el estilo debe seguir un patrón en cada una de las páginas de forma que

el usuario tenga siempre la sensación de estar navegando por el mismo sitio web. Una

web coherente facilita el proceso de aprendizaje del usuario, el cual se familiariza antes

con sus elementos y le es más fácil desplazarse por la misma.

Adicional, se debe tener en cuenta la estructuración interna de todo sitio web ya es

fundamental para optimizar el proceso de navegación del usuario, la jerarquía que es la

forma en la que se prioriza el contenido dentro de nuestro sitio web así se podrá guiar al

usuario dentro de los contenidos y la localización donde el usuario todo el tiempo pueda

identificar en que sección se encuentra dentro de la interfaz de una forma más sencilla y

eficaz.
Modelo de presentación

El modelo de presentación define la apariencia que pueden tomar los modelos de

navegación. Este modelo describe estructuras de objetos en base a clases especializadas

que conforman las páginas Web. Las clases de presentación representan páginas Web

que están compuestas de elementos de IU y otras clases de presentación. Por otro lado,

también en estas clases pueden definirse varias propiedades físicas de apariencia que

incluyen ordenamiento de los elementos del modelo y la definición de propiedades CSS

(Cascading Style Sheets).

MOCKUPS

El Mockup se construye una vez se tenga la estructura de nuestra solución de diseño,

normalmente a través del wireframe que es una forma para estructurar y diseñar

proyectos. En el Mockup se pueden comunicar las decisiones visuales, es decir, todo lo

relacionado con los estilos, los colores, así como la vista final de la estructura y sus

funcionalidades.

Aplicaciones

Balsamiq: es una de las prototype tools más populares del mercado, cuya atención se

centra, principalmente, en el wireframing. Con ella, los usuarios se benefician de una

amplia selección de elementos básicos. Junto a los elementos de navegación, de las

áreas de video e imagen, de los formularios entre otros.

Axure: es apta tanto para la creación de wireframes sencillos como para la de prototipos

detallados, está considerada como una del mockup tools más profesionales y los

principiantes que la utilicen deben tener en cuenta que necesitarán un período de

adaptación hasta que hayan descubierto todas sus funciones.

Pencil: es un proyecto de código abierto gratuita, Aunque el programa puede usarse

libremente y sin derechos de autor, este pone a disposición de sus usuarios todas las

funciones importantes que son necesarias para crear un mockup profesional.

Moqups: es una posibilidad rápida y efectiva para crear mockups online. Al abrir la

aplicación creada con HTML5, el usuario se encuentra de inmediato en el entorno de

trabajo y ya puede ponerse manos a la obra. También en este caso, la presencia de un

menú sencillo, de una estructura clara y de un editor con la función “arrastrar y soltar”

permite familiarizarse rápidamente con el programa.

Mockingbird: Se trata de un programa ideal con el que incluso los usuarios con menos

experiencia pueden crear mockups, no requiere instalación y permite arrastrar los

elementos dentro del programa para facilitar el proceso.