ACTIVIDAD GRUPAL

EXAMEN FINAL

ADOLFO PARADA RUEDA

91175441

ERIN HAROLD ERNESTO MANRIQUE

1052378826

CRISTIAN CAMILO VELEZ

1109383715

HECTOR JUNIOR ADARRAGA MEZA

1143135355

EVALUACIÓN DE SOFTWARE

GRUPO 301569_32

PRESENTADO A

GEOVANNI CATALAN

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

INGENIERÍA DE SISTEMAS
 2018

INTRODUCCIÓN

El diseño web consiste en la planificación, diseño e implementación de sitios web y

páginas web. Requiere tener en cuenta la navegabilidad, interactividad, usabilidad,
arquitectura de la información y la interacción de medios como el audio, texto, imagen,
enlaces y vídeo.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la
eficiencia de la web como canal de comunicación e intercambio de datos, que brinda
posibilidades tales como el contacto directo entre el productor y el consumidor de
contenidos, característica destacable del medio.

El diseño de páginas web trata básicamente de realizar un documento con información

enlazada con otros documentos y asignarle una presentación para diferentes dispositivos
de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc).
 OBJETIVOS

Conocer vocabulario y definiciones respecto al concepto usabilidad web.

Comprender los fundamentos del diseño de webs enfocado hacia el usuario y la
arquitectura de la información.
Utilizar criterios de usabilidad en el desarrollo de soluciones web.
 LINK DE LAS BITÁCORAS INDIVIDUALES DE CADA INTEGRANTE
DEL GRUPO

Nombre Estudiante Link (Bitácora Individual)

Adolfo Parada Rueda https://drive.google.com/drive/folders/1Pl_T9Kg41e-gK0TQ5ZMnFWYKNzfR9obM?usp=sharing
Erin Harold Ernesto
https://drive.google.com/drive/folders/1HjOvMuQ5XAen1U5bXBJM5p-ZXUfkTC3O?usp=sharing
Manrique
Cristian Camilo Vélez https://drive.google.com/drive/folders/1JJ9eXtNYAjqF35jBl3exScYDj8BLPvLR
Héctor Junior
https://drive.google.com/drive/folders/1NoPg-EnB6v7gpbC7wuVRnZDU_V230exP?usp=sharing
Adarraga
 INFORME DE CONSTRUCCIÓN GRUPAL

¿Cuáles son aspectos más importantes que se deben tener en cuenta para el
diseño de los sitios Web?
Diseño centrado en el Usuario
Para el diseño de páginas web se tienen en cuenta tres etapas:
 Diseño visual de la información que se desea editar. En esta etapa se trabaja
distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos
multimedia que se consideren pertinentes. Es importante que se realice un bosquejo
o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

 Estructura y relación jerárquica de las páginas del sitio web, una vez que se tiene este
boceto se pasa a 'escribir' la página web. Para manejar los vínculos entre documentos,
se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen
subrayados son hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas
con información relacionada. La importancia de la estructura y arborescencia web
radica en que los visitantes no siempre entran por la página principal o inicial y en ese
caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar
por el sitio.

 Posicionamiento en buscadores o SEO. Consiste en optimizar la estructura del

contenido para mejorar la posición en que aparece la página en determinada
búsqueda.
El HTML consta de una serie de elementos que estructuran el texto y son presentados
en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con
un simple editor de textos (debe guardarse como texto plano, sin ningún tipo de formato
y con extensión .html o .htm). Aprender HTML es relativamente fácil, así que es sencillo
crear páginas web de este modo. Esta era la única manera de generarlas hasta que
aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS
FrontPage y Adobe Dreamweaver.
Fundamentos
Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los
elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro
de los estándares establecidos por la W3C y en lo referente a la web semántica.
La web semántica, por otra parte, aboga por un uso lógico de los elementos según el
significado para el que fueron concebidas. Por ejemplo se utilizará el elemento <P> para
marcar párrafos, y <TABLE> para tabular datos (nunca para disponer de manera visual
los diferentes elementos del documento). En su última instancia, esto ha supuesto una
auténtica revolución en el diseño web puesto que apuesta por separar totalmente el
contenido del documento de la visualización. De esta forma se utiliza el documento HTML
únicamente para contener, organizar y estructurar la información y las hojas de estilo
CSS para indicar como se mostrará dicha información en los diferentes medios (como
por ejemplo, una pantalla de computadora, un teléfono móvil, impreso en papel, leída por
un sintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente la
accesibilidad del documento.

Accesibilidad
El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga
que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas.
Para conseguir estos objetivos de accesibilidad se han desarrollado pautas:

1. Conocer a fondo a los usuarios finales, normalmente usando investigación

cualitativa o investigación cuantitativa
2. Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades,
expectativas y motivaciones
3. Poner a prueba lo diseñado, normalmente usando test de usuario
Arquitectura de la Información

Audiencia
A continuación, se hacen algunas definiciones de audiencia:

• Por capacidad física: la audiencia del sitio incluirá personas con discapacidades
físicas, por lo que una de las metas que debe tener todo sitio es permitir el acceso
de ellos, a través del cumplimiento de las normas de Accesibilidad que se han
recomendado como estándares internacionales.
• Por capacidad técnica: la audiencia que llegue al sitio se dividirá de acuerdo a la
experiencia técnica que tenga; por ello se deben plantear accesos simples
mediante enlaces y otros más complejos, por ejemplo, mediante el uso de
buscador.
• Por conocimiento de la institución: los usuarios del sitio se dividirán entre quienes
conocen la institución y quienes no la conocen. Por lo anterior, los primeros
siempre sabrán dónde buscar lo que necesitan usando la terminología, siglas y
nombres de departamentos internos; los segundos, en tanto, no entenderán nada
de la nomenclatura interna y les será muy difícil acceder a la información que se
les ofrezca de esa manera.
• Por necesidades de información: los usuarios del sitio también se dividirán entre
quienes llegan a buscar contenidos determinados y quienes sólo llegan a ver si
existe algo que les pueda servir en lo que estén realizando.
• Por ubicación geográfica: dentro de la audiencia siempre habrá usuarios que
ingresan al sitio web desde lugares diferentes, por lo que los contenidos deben
responder también a esta diversidad.

Organización de la información
Es la disciplina y arte encargada del estudio, análisis, organización, disposición y
estructuración de la información en espacios de información, y de la selección y
presentación de los datos en los sistemas de información interactivos y no interactivos.
Information Architecture Institute la define como:
 • El diseño estructural en entornos de información compartida.
• El arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en
línea y software para promover la usabilidad y la ubicabilidad (la característica de
ser encontrado a través de las búsquedas en Internet).
• Una comunidad emergente orientada a aplicar los principios del diseño y la
arquitectura en el entorno digital.
Su principal objetivo es facilitar al máximo los procesos de comprensión y asimilación de
la información, así como las tareas que ejecutan los usuarios en un espacio de
información definido. Es un proceso iterativo, transversal, que se da a lo largo de todo el
diseño del sitio y en cada una de sus fases, para asegurarse de que los objetivos de su
producción y del desarrollo de la interfaz se cumplen de manera efectiva.
La Arquitectura de la Información como proceso en general, se encarga, durante el
desarrollo de definir:

• El objeto, propósito y fines del sistema de información o sitio. La definición del

público objetivo y los estudios de la audiencia.
• La realización de análisis competitivos.
• El diseño de la interacción.
• El diseño de la navegación, esquemas de organización y fases de los contenidos.
El etiquetado o rotulado de los contenidos para acceder a la información.
• La planificación, gestión y desarrollo de contenidos.
• La facilidad de búsqueda y el diseño de la interfaz de búsqueda.
• La usabilidad.
• La accesibilidad
• El feedback del resultado y los procesos de reingeniería del sitio.

Sistemas de navegación
El portal debe estar en la capacidad de mostrar en todo momento a los usuarios su
ubicación dentro del sitio, debido a que los usuarios que acceden a una página interna a
través de un motor de búsqueda querrán saber exactamente dónde están. Mostrar de
forma clara al usuario el lugar donde se encuentra depende de varios sistemas de
navegación. En ellos se debe indicar el lugar que ocupa la página actual dentro de toda
la jerarquía de contenidos del portal.

Algunos de los mecanismos de navegación que pueden indicar al usuario en dónde se

encuentra son:
• Navegación global: En esta se debe mostrar la sección principal a la cual
pertenece la página actual.
• Navegación de contexto: En esta se debe mostrar la sub sección o sub
secciones a la cuales pertenece la página actual.
• Ruta de migas: Muestra al usuario el camino que debería recorrer para llegar
desde la página de inicio hasta su ubicación actual.
• URL limpia: Una dirección clara también da una idea al usuario de las secciones
a las cuales pertenece la página donde se encuentra.

Navegación global
Compuesta generalmente por las categorías principales o por el denominado “menú
principal” del sitio web. Esta navegación responde a la necesidad concreta del usuario de
saber a dónde dirigirse y lo que puede hacer dentro del sitio. Al presentar la estructura
de navegación global se debe garantizar su consistencia, que aparezca de la misma
forma y en la misma ubicación a lo largo de todo el sitio web. El ofrecer una navegación
global consistente le permite al usuario contar con un mecanismo de navegación siempre
presente, fácil de recordar y a la mano.

Navegación contextual
Indica al usuario los lugares del sitio a los que se puede dirigir dentro de su nivel de
navegación actual o local. Este menú se presenta cuando el usuario visita las secciones
principales del sitio y muestra las subsecciones o páginas que pertenecen a la sección
principal actual. Un menú de opciones contextuales puede mejorar considerablemente la
experiencia de usuario y hacer mucho más sencilla la exploración del sitio por parte del
usuario.
URL Limpios
El URL es la abreviatura de Uniform Resource Locator (Localizador Uniforme de
Recursos), es el nombre técnico con el que se conoce a la comúnmente llamada
“dirección”.
Un esquema de URL limpios tiene las siguientes características:
• Corresponde a la jerarquía del sitio
• No incluye caracteres especiales como $, &, ?,= entre otros.

Presentar los URL de una manera limpia y ordenada puede ayudar al usuario a reconocer
su ubicación dentro del sitio, incluso puede convertirse en un mecanismo de navegación
que permita al usuario visitar la sección anterior en jerarquía. Un sitio web con URL
limpios en general tiene un mejor aspecto y es un indicador de que el sitio se ha
preocupado por seguir una convención de la web.

Diseño conceptual
El objetivo es definir el esquema de organización, funcionamiento y navegación del sitio.
No se especifica qué apariencia va a tener el sitio, sino que se centra en el concepto
mismo del sitio: su arquitectura de información. Los sitios web son sistemas hipermedia
formados por conjuntos de páginas interrelacionadas por enlaces unidireccionales,
pudiendo cada una de estas páginas contener sub-elementos con entidad propia,
contenidos multimedia y herramientas interactivas. La "estructura" del sitio web se refiere
precisamente a las conexiones y relaciones entre páginas, a la topología de la red de
páginas, así como a la granularidad de los elementos de información contenidos en las
páginas; y la "navegación" a las posibilidades y forma en que cada página presenta las
opciones de desplazamiento hacia otras páginas. La definición de la estructura del sitio
puede hacerse desde dos enfoques diferentes y complementarios: aproximación
descendente y ascendente. En la descendente se trata de estructurar del "todo" a las
"partes", dividir los contenidos en páginas y definir los enlaces entre páginas. En la
Ascendente, por el contrario, se definen los bloques mínimos de información,
estructuración que va más allá de la propia segmentación de información en páginas.
Una vez definida la estructuración del sitio es necesario documentarla, para así tener un
modelo de referencia sobre el que sustentar el desarrollo del sitio. La forma de
documentar arquitecturas se suele hacer a través de grafos y esquemas, con el objetivo
de que sean de fácil y rápida comprensión por todos los miembros del equipo de
desarrollo.

Diseño visual. Página de inicio

En esta fase se especifica el aspecto visual del sitio web: composición de cada tipo de
página, aspecto y comportamiento de los elementos de interacción y presentación de
elementos multimedia. Con el objetivo de evitar la sobrecarga informativa, en el diseño
de cada interfaz se debe tener en cuenta el comportamiento del usuario en el barrido
visual de la página, distribuyendo los elementos de información y navegación según su
importancia en zonas de mayor o menor jerarquía visual - por ejemplo, las zonas
superiores del interfaz poseen más jerarquía visual que las inferiores. Además de la
posición de cada elemento en la interfaz, existen otras técnicas para jerarquizar
información como son: uso del tamaño y espacio ocupado por cada elemento para
otorgarle importancia en la jerarquía visual, utilización del contraste de color para
discriminar y distribuir información, uso de efectos tipográficos para enfatizar contenidos,
rotura de la simetría y uso de efectos de relieve / profundidad para resaltar elementos,
etc. Otro aspecto importante en el diseño visual del sitio es la accesibilidad.

Criterios de usabilidad web

Conceptos generales. Su necesidad en el diseño web
A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios
básicos en los que se basa la usabilidad:

1. Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una

interacción efectiva con el sistema o producto. Está relacionada con la
predictibilidad, sintetización, familiaridad, la generalización de los conocimientos
previos y la consistencia.
 2. Facilidad de Uso: facilidad con la que el usuario hace uso de la herramienta, con
menos pasos o más naturales a su formación específica. Tiene que ver con la
eficacia y eficiencia de la herramienta.

3. Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el

sistema pueden intercambiar información. También abarca la posibilidad de
diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas
anteriores y la optimización entre el usuario y el sistema.

4. Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus

objetivos. Está relacionada con la capacidad de observación del usuario, de
recuperación de información y de ajuste de la tarea al usuario.

Beneficios de la usabilidad
Entre los principales beneficios se encuentran:

• Reducción de los costes de aprendizaje.

• Disminución de los costes de asistencia y ayuda al usuario.
• Disminución en la tasa de errores cometidos por el usuario y del retrabajo.
• Optimización de los costes de diseño, rediseño y mantenimiento.
• Aumento de la tasa de conversión de visitantes a clientes de un sitio web.
• Aumento de la satisfacción y comodidad del usuario.
• Mejora la imagen y el prestigio.
• Mejora la calidad de vida de los usuarios, ya que reduce su estrés, incrementa
la satisfacción y la productividad.

Diseño de página. Separación del contenido y el formato

Si se hace, será fácil modificar o aplicar un nuevo diseño a la web sin tener que cambiar
todas las páginas de la misma. Hay diversas estrategias para independizar el contenido
y el diseño de la web. Veamos algunas:
Usar hojas de estilos CSS
Los navegadores de Internet soportan la utilización de hojas de estilo CSS (Cascade
Style Sheet). Con CSS se puede crear un fichero que incluye todos los formatos que hace
servir nuestra web. De esta manera, concentramos en un único lugar, todas (o casi todas)
las directrices de diseño de nuestra página web. Si hemos aplicado correctamente la
norma de separación de forma y contenido, tendremos la garantía de que cambiando un
determinado formato en la hoja de estilos CSS, el cambio se propagará en toda la web
de forma coherente.

Usar una base de datos para hacer la gestión de contenidos

Si tenemos un sitio web con mucha información y además muy cambiante, una buena
estrategia seria el decidir que el contenido del web se almacene en una base de datos
de la web (por ejemplo en una base de datos MySql). Cuando los usuarios visitan una
página de nuestro web, ésta hace una consulta a la base de datos y muestra el contenido.
Aquí la separación de forma y contenido es muy clara. A estas páginas se les suele llamar
como “páginas dinámicas” y suelen estar programadas en lenguajes de programación
como el PHP. Facilita el mantenimiento del contenido de la web (a través de sencillos
formularios de entrada de información) y sobre todo que permite a usuarios no técnicos
el mantenimiento de la información ofrecida por el sitio web.
Los tiempos de respuestas en un sitio web
Un sitio web que tarda demasiado tiempo en cargar eventualmente puede ser
abandonado por el usuario. La respuesta rápida de un sitio está relacionada con la
necesidad que tiene el visitante de recibir una respuesta a sus acciones en un tiempo
prudente. El rendimiento es también un factor que aporta a la experiencia de usuario. Un
portal rápido es percibido en algunas ocasiones como un portal más fácil de utilizar.
Usabilidad en los enlaces web
Los enlaces son parte esencial de internet. Representan la conexión entre dos páginas o
contenidos y son el principio básico de la navegación. Por su importancia en la
experiencia de usuario, los enlaces deben ser claros, reconocibles y sin lugar a
ambigüedades. Algunas sugerencias a tener en cuenta para garantizar buenos enlaces
son:
Usar títulos de enlaces significativos, que indiquen claramente el contenido al cual
conducen.
• Emplear un lenguaje sencillo y cercano al usuario en la formulación de enlaces.
No usar terminología técnica ni lenguaje especializado.
• No usar palabras como “haga clic”, el usuario ya sabe que los enlaces son para
hacer clic en ellos.
• Utilizar en el enlace las palabras mínimas necesarias para que el usuario
comprenda su propósito. Los enlaces cortos son más fáciles de escanear y leer.

El diseño de contenido
Algunos consejos a seguir en el diseño y redacción de contenidos son:

• Seguir una estructura piramidal: La parte más importante del mensaje, el

núcleo, debe ir al principio.
• Permitir una fácil exploración del contenido: El lector en entornos Web, antes
de empezar a leer, suele explorar visualmente el contenido para comprobar si
le interesa.
• Un párrafo = una idea: Cada párrafo es un objeto informativo. Se deben trasmitir
ideas, mensajes... evitando párrafos vacíos o varios mensajes en un mismo
párrafo.
• Ser conciso y preciso: Al lector no le gusta leer en pantalla.
• Vocabulario y lenguaje: Se debe utilizar el mismo lenguaje del usuario, no el de
la empresa o institución. El vocabulario debe ser sencillo y fácilmente
comprensible.
• Tono: Cuanto más familiar y cercano (sin llegar a ser irrespetuoso) sea el tono
empleado, más fácil será que el lector preste atención.
• Confianza: La mejor forma de ganarse la confianza del lector es permitiéndole
el diálogo, así como conocer cuanta más información posible acerca del autor.
La simplicidad en el diseño web
Para obtener un buen diseño web hay que eliminar los elementos innecesarios tanto de
diseño, contenido como de código. Un diseño basado en la simplicidad tiene las de ganar
frente a uno recargado. Se proponen una serie de consejos para cumplir este objetivo:
• Que el sitio web sea fácil de navegar
• Pocos elementos aumentan la velocidad de carga de la página
• Contenido fácilmente escaneable
• Crea hojas de estilo para el código con estilos optimizados.
• El tamaño de las cosas sí importa.

La usabilidad en el proceso de desarrollo web

El ciclo de vida que se utiliza para el desarrollo de sitios web debe combinar aspectos del
proceso de desarrollo de software, y del proceso de publicación. Las características del
hipertexto establecen particularidades que obligan a tener en cuenta ambos esquemas
al estudiar la usabilidad del web. Las grandes fases en que puede dividirse serían las
correspondientes a Análisis, Diseño, Desarrollo y Mantenimiento.

Fase Tareas Métodos de usabilidad

Análisis de Definición de objetivos del sitio Generación de ideas
requerimientos Creación de modelo de negocio Grupos de enfoque
Definición de audiencias y usuarios Entrevistas
Análisis de necesidades de usuario Cuestionarios
Observación de campo
Estudios previos
Normas y estándares
Diseño conceptual y Análisis de tareas de usuario Análisis de tareas
prototipado Definición de flujos de trabajo Test de prototipos
Definición de arquitectura de la Paseos cognitivos
información Desarrollo de escenarios
Definición de la gestión de Listas de control
Contenidos Evaluación heurística de
Diseño y prototipado de interfaces Expertos
de usuario Test de usuarios
Observación
 Documentación de procesos y Compilación de manuales y normas
manuales internas

Desarrollo Creación de interfaces de Evaluación heurística de expertos

Usuario Inspección (normas, características y
Desarrollo de los consistencia)
componentes de diseño
gráfico
Fase Tareas Métodos de usabilidad
Desarrollo de contenidos Listas de control
informativos
Desarrollo de aplicaciones para
interacción
Mantenimiento Producción de contenidos Control de logs Evaluación
Revisiones heurística por expertos Paseos
cognitivos
Test de usuarios
 CONCLUSIONES

Una página web contiene información capaz de contener texto, sonido, vídeo, programas,
enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web y
puede ser accedida mediante un navegador.
Las páginas Web pueden estar almacenadas en un equipo o un servidor Web.
Un sitio Web es una colección de páginas de internet relacionadas y comunes a un
dominio de internet o subdominio en la World Wide Web en internet.
Una Pagina Web es un documento HTML/XHTML que es accesible generalmente
mediante el protocolo HTTP de internet. Todos los sitios web públicamente accesibles
constituyen una gigantesca World Wide Web de información.
En un navegador Web permite el acceso a internet, interpretando la información de
archivos y sitios Web para que estos puedan ser leídos.
 REFERENCIAS BIBLIOGRÁFICAS

Carrión, H. (2012). Usabilidad y accesibilidad de sitios web. Recuperado de:

http://www.imaginar.org/taller/usabilidad2/docs/manual_cec.pdf

Palacios, E. Rojas, A. Desarrollo Aplicaciones WEB. Recuperado de:

https://sites.google.com/site/elementosbasicosdeunapaginaweb/home