05 Diseno Del Sistema Multimedia

Diciembre de 2013 [5.
DISEÑO DEL SISTEMA MULTIMEDIA]
5. Diseño del Sistema Multimedia

Tiene por finalidad la realización del proyecto, considerando los aspectos internos de su construcción para
lograr un diseño atractivo y funcional.
5.1 Arquitectura del Sistema Multimedia
Diseño arquitectónico: actividad de Ingeniería del Software cuyo propósito es obtener una descripción de alto
nivel de los elementos hardware y software del sistema proyectado, así como de las relaciones entre los
mismos.
La arquitectura mencionada abarca cuatro componentes, a saber: software, hardware, datos y personas.
UNITEC Campus Marina | Maestría en Sistemas Multimedia 1

Diciembre de 2013 [5. DISEÑO DEL SISTEMA MULTIMEDIA]
Hardware Multimedia
Incluye:
a) Estructura de una computadora multimedia.
b) Dispositivos de almacenamiento.
Se debe tomar en cuenta la capacidad de almacenamiento.
- Discos magnéticos
Almacenamiento de flujos accedidos con frecuencia
Servicio concurrente a usuarios
- Discos ópticos
Servicio de flujos únicos,
DVDs para vídeo y CD-ROMs para audio
- Unidades de Cinta
Almacenamiento masivo del material poco accedido
- Memorias Flash
Uso masivo en dispositivos de captura, PDAs y teléfonos móviles
Cada vez más una alternativa a los discos duros
c) Arquitectura de entrada y salida.
- La información multimedia es:

Leída de disco / recibida desde la red
Almacenada temporalmente en memoria
Procesada
Transmitida hacia la red / escrita en disco
- La estructura del sistema de E/S condiciona la velocidad de transmisión de datos:
Desde y hacia los dispositivos de almacenamiento
Desde y hacia la red

d) Arquitectura del procesador.
El procesador es el cerebro de una computadora. Dependiendo del tipo de procesador y su velocidad se

obtendrá un mejor o peor rendimiento. Hoy en día existen varias marcas y tipos, ejemplos:
- Pentium-75 ; 5x86-100 - Cyrix 686-133 (PR-150) ; - Pentium II-233

(Cyrix y AMD) AMD K5 P150 - Cyrix 686MX (PR-266);
- AMD 5x86-133 - Pentium-150 AMD K6-266
- Pentium-90 - Pentium-166 - Pentium II-266
- AMD K5 P100 - Cyrix 686-166 (PR-200) - Pentium II-300
- Pentium-100 - Pentium-200 - Pentium II-333
- Cyrix 686-100 (PR-120) - Cyrix 686MX (PR-200) - Pentium II-350
- Pentium-120 - Pentium-166 MMX - Pentium II-400
- Cyrix 686-120 (PR-133) ; - Pentium-200 MMX - etc.
AMD K5 P133 - Cyrix 686MX (PR-233)
- Pentium-133 - AMD K6-233
Software Multimedia
- De imagen,
- De audio,
- De video,
- De integración,
- Bases de datos:

Diseño de Sistemas Multimedia
Los sistemas multimedia realizados con prisas y sin esquemas efectivos, impiden a los usuarios interactuar
efectivamente con la información. La arquitectura de la información (AI) se entiende en usabilidad como la
forma en la que el espacio informativo está estructurado.
Una puerta puede permitir empujar o tirar, dependiendo la dirección en que se abra. Cuando una
persona puede ver con antelación como abrirla, significa que es una buena interfaz de usuario (Norman, 1998)
Al momento de hacer la estructura de navegación se deben considerar los siguientes puntos:

 Esforzarse por conseguir consistencia: en mensajes, menús, pantallas de ayuda, color, composición,
mayúsculas, fuentes y otros objetos.
 Atender a la usabilidad universal. Las diferencias principiante-experto, rangos de edad, discapacidades y
diversidad tecnológica.
 Ofrecer realimentación informativa.
 Diseñar diálogos para conducir a la finalización.
 Prevenir errores. Por ejemplo, deshabilitar los elementos no adecuados y no permitir caracteres
alfabéticos en campos de entrada numéricos. En caso de un formulario conservar la información y pedir
que sólo se llenen los espacios mal contestados.
 Flexibilidad para el control del usuario de la entrada de datos.
 Permitir deshacer acciones de forma fácil.
 Reducir la carga de la memoria a corto plazo. Los humanos pueden recordar “siete más/menos dos
elementos” de información, por ello, las visualizaciones deben ser simples.
 No basarse únicamente en la estructura organizacional pues, aunque resulte familiar para la
organización, puede no tener sentido para los usuarios.
 Evitar nombres inventados, de lo contrario es mejor explicar su significado.
 No se deben usar instrucciones genéricas del tipo “haga clic aquí” o “más” como nombres de enlace, es
mejor decirle al usuario qué obtendrá.
 El azul subrayado puede considerarse estándar en una liga, por lo que se sugiere no usarlo para otra
cosa.

 Los enlaces directos simplifican la navegación para operaciones de alta prioridad. Se sugiere restringir
los elementos de tres a cinco.
 Evitar las páginas huérfanas, es decir las que no cuentan con enlaces a algún sitio.
La ley de Fitt sobre los tiempos de clic, asegura que cuanto más lejos esté algo, más tiempo llevará hacer clic
en ello y, cuanto más grande sea algo, menos tiempo lleva hacer clic en ello, porque no se necesita precisión.
Por ello se recomienda hacer enlaces directos al menú principal. (Fitt, 1954)
Utilizar las “migas de pan” como navegación alternativa es una forma de facilitar la navegación porque su
camino siempre incluye enlaces a las páginas principales y usa nombres como texto anclaje.
A menudo, un diagrama de flujo o uno de transición ayuda a los diseñadores a registrar y expresar las
secuencias de posibles acciones; la abundancia de líneas de conexión indica la frecuencia de las transiciones.
5.2 Descripción de Contenidos
El estar en contacto con los intereses, cultura, necesidad y limitaciones de los usuarios facilita poder escribir
para ellos.
Multimedia es un medio dirigido por el usuario, por lo que deben adoptarse estrategias de búsqueda de
información para ahorrar tiempo. Los usuarios no suelen buscar información de forma lineal. En vez de eso,
confían en las pistas visuales que les den señales claras de que la respuesta está cerca. Dirigen su atención hacia
estas áreas e ignoran todo lo demás.
Es conveniente mantener una redacción sencilla y concisa por respeto al tiempo y las facultades lectoras
del usuario; es adecuar la redacción a su nivel de lectura para asegurar la máxima comprensión. Dar preferencia
a palabras cortas siempre y cuando se entiendan.
El símbolo “copyright” se refiere a la propiedad intelectual. Tan sólo se debe usar cuando existan
derechos de autor. Si se utiliza una imagen u otro tipo de información que no sea la propia se debe hacer
referencia al autor y pedirle consentimiento especificando el uso que se daría a su obra.
Entre los errores más comunes al momento de redactar la información se pueden notar:
 Léxico propio de una empresa: puede resultar confuso para usuarios externos.
 Acrónimos: suele exagerarse su uso en sitios gubernamentales donde dan por sentado que su audiencia
sabe lo que significan.
 Sarcasmo: los juegos de palabras sutiles y los chistes como “feliz como una lombriz” o “con las manos en
la masa” distraen al lector.
 Verborrea publicitaria: en lugar de descripciones precisas de sus productos y servicios.
 Anonimato en la información.
 Palabras inventadas: éstas perjudican la optimización de los motores de búsqueda porque, obviamente,
los usuarios no buscarán palabras que no utilizan.
 Mayúsculas equivalen a gritos: es muy molesto leer todo un texto en mayúsculas o en cursivas, lo
mismo sucede con las negritas.
 Mensajes de “en construcción”: esto era mal visto desde los 90, hoy para fines de urgencia se
recomienda usar la palabra “próximamente”. A los usuarios no les gusta hacer clic en vano pero resulta
peor enfatizar que lo han hecho.
Recomendaciones para capturar el interés de los usuarios:

 Comenzar con la conclusión y revelar después los hechos que los sustentan (pirámide invertida).
 No fragmentar el contenido tanto como para que parezca desunido.
 Mantener la información relacionada dentro de la misma página antes que obligar a dar un salto de una
parte incompleta a otra.
 La cantidad de palabras utilizadas para el contenido debería ser casi la mitad de las utilizadas en la
redacción convencional.
 Usar palabras clave resaltadas ya que pueden atraer la atención del lector hacia áreas específicas de la
página.
 Los títulos y encabezados deben ser tanto concisos como descriptivos.
o Los encabezados principales deberán ser más grandes y gruesos que el cuerpo del texto.
o Los encabezados subordinados deberán ser más pequeños que los principales pero resaltando
del resto.
 Listas con guiones y pasos numerados. Tienen más espacio en blanco alrededor de los elementos, dando
pausa al ojo y haciendo que cada parte resalte por sí misma. Las listas con guiones, cuando los
elementos no requieran un orden en particular, y las numeradas para instrucciones paso a paso,
elementos secuenciales y elementos referenciados por números.
o Las listas convienen cuando se tienen cuatro o más elementos de lo contrario resultan
exageradas.
o Sangrar las listas verticales y comenzar los saltos de línea bajo el texto, no bajo el guión.
o No dejar demasiado espacio entre el guión y el comienzo del texto.
o Cuando sea posible, omitir artículos como “un”, “una” o “el/la” y palabras repetitivas en los
comienzos.
 Los párrafos cortos rodeados de espacio en blanco parecen más accesibles que en un bloque sólido de
texto.
 Firmar y fechar un documento transmite fiabilidad al usuario, puesto que podrá saber quién lo ha
realizado. También podrá ponerse en contacto para cualquier cosa que pudiera necesitar.
5.3 Diseño del Tratamiento del Contenido
En esta fase se precisa la colaboración de los expertos en pedagogía e informática, de modo que el primero
elabore el diseño pedagógico o comunicacional del multimedia y el segundo el diseño técnico, planteando la
viabilidad de las propuestas pedagógicas y el lenguaje o sistema de autor que sería conveniente utilizar.
El diseño pedagógico ayuda a establecer:

- Las líneas pedagógicas o comunicacionales del multimedia, el modelo de aprendizaje en que se va a basar
la aplicación, la finalidad y objetivo general de la misma.
- Diseño de contenidos en el que se establecerán los objetivos específicos de la aplicación (conceptuales,
procedimentales y actitudinales) y las unidades didácticas adecuadas para la consecución de estos objetivos.
Para cada una de estas unidades didácticas se establecerá: el contenido temático, las actividades, la
evaluación, las fuentes documentales y los recursos multimedia que se van a utilizar.

- Interactividad del programa, para ello se confeccionará el mapa de navegación en el que se indicarán
gráficamente los itinerarios que el usuario puede seguir en el programa cuando busca información,
señalando los vínculos entre pantallas y los vínculos entre eventos.
El contenido del diseño técnico dependerá del diseño pedagógico, de los requerimientos técnicos y de los
lenguajes o sistemas utilizados para desarrollar la aplicación. Los aspectos que se trabajan en el diseño
técnico son:
- Los elementos multimedia, esto es el material audiovisual que va a implementarse en la aplicación. Su
diseño tendrá siempre presente el resultado final que se desea obtener.
- El Interface del usuario. Para algunos autores como D. Insa y R. Morata el interface del usuario es "el
espacio de trabajo, es decir la pantalla del ordenador, en el que el usuario encontrará los elementos que le
van a permitir interactuar con el sistema informático" (1998: 96). Sin embargo, esta definición es algo
restrictiva ya que únicamente atiende a la interface gráfica de comunicación, a ésta habría que añadir,
como indica Alcantud (1999) todos aquellos elementos del ordenador que el usuario utiliza para
relacionarse con el programa (pantalla, ratón, teclado, etc.). Esta distinción es de gran importancia ya que
nos permite tener una visión más amplia sobre el modo de comunicación entre usuario y programa.
Composición
Para diseñar, lo primero que se debe establecer es, qué parte del área de diseño deben ocupar los elementos y,
por el contrario, qué espacios quedarán ausentes de elementos. Se deben considerar las líneas (títulos, textos) y
las formas (fotografías, ilustraciones, gráficos) combinados en un mismo espacio para crear composiciones
alternativas.
Los errores más comunes en los diseños de página incluyen:

- Páginas no estructuradas en orden prioritario
- Interacciones complejas sin ayuda ni guías
- Áreas relacionadas sin agrupar en lugares cercanos
- Elementos no alineados debidamente para crear orden
- Elementos no colocados en los lugares que el usuario espera
- Demasiados elementos en una página
Los usuarios no pueden prestar atención a todo lo que hay en la pantalla. Adoptan estrategias para
ayudarse a separar la información útil de la que no lo es y, al centrarse en áreas que tienen más rastros de
información, ignoran el resto. La gente suele mirar justo al centro de la página, luego a la parte superior
izquierda para verificar la navegación. Rara vez miraran hacia el margen derecho para comprobar si existe una
barra de desplazamiento. Suelen ignorar los elementos de la parte inferior a menos que algo les indique qué
existe continuación. Tampoco se debe caer en el extremo de no poder desplazarse en las páginas.
Para asegurar la eficacia del desplazamiento se deben tomar en cuenta los siguientes factores:
- Si los usuarios esperan que algo se encuentre en un lugar determinado, no lo buscarán en otro lado ni
se desplazarán por la página para encontrarlo.
- Si hay un espacio en blanco en la parte inferior del área visible de la pantalla, se tiende a asumir que es
el final de la misma y no se realiza desplazamiento, aunque la barra indique lo contrario.

- Los usuarios interpretan los elementos similares a la publicidad que aparecen inmediatamente por
encima de la línea de corte como el final de la página.
- Situar indicadores como encabezados o contenido justo por encima de la parte baja de la pantalla
sugiere que hay más contenido a continuación.
- Hay situaciones en las que las páginas largas resultan mejores que las cortas y fragmentadas. Presentar
el artículo de una sola vez hace que la información parezca más coherente y mitiga el trabajo
innecesario.
- Si la interacción requiere de múltiples pasos entonces se debe guiar al usuario por un proceso lineal, sin
darle tantas opciones que finalmente puedan confundirlo. Un proceso estructurado ayuda a evitar
errores tales como saltarse pasos.
- Agrupar los elementos asociados asegura su percepción. Buscar objetos relacionados dentro de una
misma área es un comportamiento común. Cualquier cambio en la información que tenga lugar fuera
del área ampliada pude ser fácilmente ignorada.
- El espacio en blanco de una página es importante porque ayuda al usuario a procesar la información en
unidades manejables.
- Para que el usuario tenga la opción de imprimir el sitio y verlo en su totalidad se debe considerar el
ancho de la página.
- Si, aún bien estructurado, un texto tiene muchos enlaces, entonces provoca una constante invitación a
salir de él.
Tan importante es lograr un diseño funcional como lo es llegar al agrado de quienes lo utilizan, por ello es
importante describir tres niveles de relación con el diseño:
- Visceral. Es el más inmediato y está dominado por la apariencia. Los objetos suaves o redondeados
tienen connotaciones agradables; los objetos afilados o puntiagudos tienen connotaciones de miedo o
peligro. Las emociones más viscerales se relacionan y desencadenan inmediatamente porque están
basadas en las ventajas evolutivas y principios de supervivencia. Los diseños con muchos gráficos
intentan operar en el nivel visceral, evocando emociones positivas a primera vista.
- Comportamental. Está basado en el uso del objeto, cómo se siente el cliente al usarlo, si es agradable o
desagradable. Por ejemplo: los tiempos de respuesta del sistema.
- Reflexivo. Está basado en la forma en la que se piensa o reflexiona sobre un objeto. Si tiene
connotaciones positivas o prestigiosas, si hace recordar algún momento feliz. Por ejemplo, en la entrada
a un sistema por nombre de usuario y contraseña, incluir el texto siguiente: “Bienvenido Lic. Carlos
Pérez”. (Norman, 2002)
Existen dos opciones posibles dentro de la composición que son el contraste y la armonía. Si se escoge esta
última la solución es más sencilla de establecer con reglas visuales para seguir sin problemas la resolución de la
composición visual, aunque la previsibilidad de los resultados compositivos y el exceso armónico pueden
generar aburrimiento inhibiendo la sorpresa del espectador. El contraste, por el contrario permite excitar y
atraer la atención del receptor, dramatizar mediante la utilización de diferentes contrastes (de color, textura,
tamaño y otros), da un mayor significado a la comunicación e incluso un aspecto más dinámico al diseño.

Color
El utilizar demasiados colores confunde al visitante ya que no sabe a dónde mirar, por esto es mejor definir tres
o cuatro como base y experimentar con sus combinaciones de tono. Si se trata de un objeto pequeño no
necesita mucha coloración.
Es posible usar colores en los textos combinándolos con el fondo, pero si el documento se va a imprimir,
éstos no deben ser luminosos ya que, por ejemplo, el amarillo, verde limón, gris claro, celeste y similares son
prácticamente imposibles de leer cuando el documento se envíe a una impresora a blanco y negro. El celeste es
el color que peor se lee en una pantalla de ordenador.
No se debe abusar del color rojo y verde ya que algunas personas tienen problemas para distinguirlos.
Los ancianos pierden capacidad de recepción del color lo que hace necesario un contraste en las diversas
estadías de información.
Las combinaciones con mayor grado de legibilidad son:

- Blanco: con negro, azul, rojo fuerte y verde oscuro.
- Amarillo: con negro, azul oscuro y rojo inglés.
- Negro: con amarillo y blanco.
- Verde oscuro: con blanco.
- Rojo: con blanco y amarillo.
El color gris es neutro y metálico, crea compensación entre los otros, por ello se usa por defecto en la
mayoría de los visualizadores. Para que el fondo de un sitio facilite la lectura, es mejor basarse en colores
planos.
Para programación web se usan códigos de color hexadecimal es decir de seis dígitos. El término “rrggbb”
designa dicho código, para los tonos rojo (rr), verde (gg) y azul (bb), que, combinados, definen los códigos de los
demás colores. Estos códigos van siempre entre comillas y precedidos por el signo “#”. Ejemplo: “#FFFFFF” para
el color blanco. Afortunadamente la paquetería existente permite tomar el color deseado sin tener que tomar la
combinación ya que éste se indicará dentro del código de manera directa.
Tipografía
La tipografía vista a través del monitor varía mucho con respecto a la impresa. Es más difícil de leer debido a la
baja resolución del monitor, además de que éste emite luz que llega directamente al ojo, lo que hace más
cansada la lectura. De hecho, para el usuario es más sencillo imprimir el texto en papel y después leerlo.
Se calcula que leer desde una pantalla de ordenador reduce un 25% la velocidad de lectura, por lo que
un usuario no habituado se salta palabras cuando lee desde esta plataforma. Es difícil encontrar algo interesante
escrito en la mayoría de los documentos Web, por lo que siempre suele imperar una rápida lectura a modo de
“barrido visual” o “escaneo”.

Cuando el texto de una página es excesivo lo primero que capta el ojo humano es la llamada “mancha
gris”. Se ve primero una textura gráfica y después se empiezan a rastrear y decodificar las palabras al igual que
otros elementos tanto tipográficos como visuales. Si esta mancha gris es homogénea y organizada a lo largo de
las páginas, ayuda al lector a establecer más rápido una localización y aumenta la legibilidad del documento.
Las cajas de texto no deben ser muy largas o cortas y no es propicio intercalar los tamaños, los textos
más legibles son los justificados en un bloque o a la izquierda. Los centrados o a la derecha deben ser de muy
poco texto y en casos especiales, ya que obliga al ojo a mantener una posición diferente para comenzar a leer
una línea, lo que produce fatiga e incomodidad en la lectura, así como sensación de inestabilidad. A distancias
normales de lectura, el rango de movimiento del ojo es de ocho centímetros aproximadamente, las columnas
más anchas de esta medida requieren que el lector mueva su cabeza ligeramente o fuerce los músculos del ojo
para cubrir una distancia mayor.
Los textos se pueden incluir de dos formas, como html y como imagen. Con esta última opción se da
mayor peso a la página y la información no es seleccionable, a los usuarios les gusta copiar un área del
documento y pegarla en un programa para futuras referencias o reimprimirlo. También es común copiar una
dirección e insertarla en un programa de mapeo para conseguir itinerarios. Por todo lo anterior es
recomendable usar gráficos sólo en casos necesarios.
Casi todas las fuentes se diseñaron originalmente para ser impresas, por lo tanto la tipografía digital no
tiene un correcto espaciamiento entre las lecturas en diferentes tamaños. Las letras generalmente se tocan
entre sí, especialmente en tamaños pequeños. Las fuentes con patines, hablando de los medios impresos, se
vuelven más legibles entre más se van alargando; pero en el monitor, esto no sucede. Por este motivo Microsoft
encargó al diseñador Mathew Carter crear dos familias tipográficas especialmente para monitores, la “Verdana”
y la “Georgia”. Ambas tienen mayor altura en “x”, logrando que ciertas combinaciones como “fi”, “fl” y “ff” no
se toquen. Los caracteres ascendentes son un pixel mayor que sus contrapartes descendentes a ciertos tamaños
de pantalla lo que aumenta la legibilidad. Nielsen también recomienda el uso de la Serif y la Sans Serif.
Al escoger la fuente se debe pensar en aquellas que están disponibles en los ordenadores y navegadores
de los usuarios. Si no es así el sistema utilizara una fuente por defecto y el resultado no será el esperado. Se
debe incluir una lista de fuentes alternativas en orden de preferencia.
El tamaño de la tipografía puede definirse ya sea por pixeles o por porcentaje. Si se escogen medidas
fijas, en el caso del Internet Explorer, se le limita al usuario la posibilidad de aumentar o disminuir el tamaño de
la fuente. Para el caso del Mozilla, esto no sucede pues aumenta la pantalla de manera proporcional (“zoom”).
Si el sitio atiende a personas mayores con visión restringida, es conveniente ofrecer una forma evidente
de ajustar el tamaño del texto. Para esto se incluye un botón visible que cambie el tamaño.

Recomendación de tamaños de texto con medida de pixeles:
Tipo de público Puntos

Público general 10-12
Tercera edad y personas con problemas de 12-14
visión
Niños y otros lectores principiantes 12-14
Adolescentes/jóvenes 10-12
Nielsen recomienda no utilizar más de cuatro tamaños de fuentes en una misma página. Es permitido
saltarse las reglas un poco y utilizar un tipo más pequeño en las áreas de menos interés como términos de uso,
red afiliada, “copyright” y avisos legales.
El “anti-aliasing” es una acción que suaviza los bordes dentados de las formas y el texto basados en
vectores. Los diseñadores suelen usarlo para que los objetos parezcan más pulidos o refinados, pero puede
hacer que el texto se vea borroso. Es mejor evitarlo para textos pequeños. Además aumenta el tamaño de los
archivos de imágenes e incrementa el tiempo de descarga.
Los fondos con múltiples texturas o imágenes dificultan la lectura, por lo tanto se sugiere que sean lisos
y de un solo color. El texto en movimiento marea y dificulta la lectura, no se debe abusar de él.
Menús
Para la realización de menús es necesario considerar los siguientes aspectos:

- Mantener los nombres de los enlaces breves y específicos.
- No alterar la navegación de forma drástica de una página a la siguiente pues el usuario debe cambiar su
atención, de utilizar el sitio a investigar cómo utilizarlo. Es un error común en sitios grandes compuestos
de sub-sitios o sitios afiliados en donde cada uno suele estar creado por grupos diferentes y tener su
propio aspecto y organización.
- Si la navegación es dinámica necesita ser fácil de manejar. Los menús demasiado sensibles pueden ser
incómodos al grado de entorpecer el uso de las personas mayores, con discapacidades y usuarios
novatos.
- Los menús desplegables verticales no deben ser muy largos pues se vuelven más difíciles de controlar.
Es posible dejar un encabezado principal que lleve a otra página en la que figuren claramente las
opciones con sus correspondientes descripciones.
- Utilizar menús horizontales con moderación y con no más de dos niveles. Los menús dinámicos no
deben ser más largos que la página para ayudar al usuario a realizar la selección.
- Resaltar el texto cuando el puntero pasa sobre él no debe ser el único indicio pues si al usuario no se le
ocurre mover el “mouse” puede no distinguirlo.
- Es factible usar las negritas como enlaces.
- Los elementos gráficos de interfaz que aparecen en relieve o resaltados también indican ser enlaces.
- Evitar introducir diseños propios para elementos de diálogo estándar como los botones y las barras de
desplazamiento. Todo esto causa desconcierto en el usuario quien está acostumbrado a un estándar y
puede no saber dónde dar clic o como desplazar texto.
Se debe pensar que la interfaz puede cambiar cuando el cliente principal no es estable o se va viendo el
cambio de estructura a medida que progresa, para ello, los botones se trabajan más con textos que con
imágenes lo cual permite su ágil actualización.
5.4 Diálogos humano – sistema interfaz
El diseño de una interfaz debe incluir usabilidad, universalidad y utilidad. Las interfaces efectivas generan en la
comunidad de usuarios sensaciones positivas de éxito, competencia, dominio y claridad. No son un estorbo para
los usuarios ya que pueden predecir qué ocurrirá en respuesta a cada una de sus acciones.
Se recomienda establecer objetivos explícitos para poder alcanzarlos posteriormente que incluyan una
ingeniería de sistemas bien definida y objetivos de factores humanos medibles. El estándar U.S. Military
Standard for Human Engineering Design Criteria (1999) establece los siguientes propósitos. (p.13)
- Lograr el rendimiento exigido por el personal de operación, control y mantenimiento

- Minimizar los requisitos de conocimientos y habilidades del personal en tiempo de formación
- Lograr la fiabilidad exigida en las combinaciones personal-equipamiento/software
- Fomentar la estandarización del diseño dentro del sistema y entre diferentes sistemas.
5.5 Descripción de los Medios a Emplear
Entre los medios que podemos utilizar para la realización de nuestro multimedia tenemos tres:
1) Las Imágenes. En nuestro material vamos a poder incorporar diferentes tipos de imágenes: fotografías,
dibujos, símbolos, esquemas, mapas, gráficos, cuadros, tablas, animaciones, vídeos, imágenes tridimensionales.
Es importante que al incorporar los elementos gráficos lo hagamos de acuerdo a los gustos y características de
los destinatarios, siguiendo un criterio de coherencia y funcionalidad.
Es decir, a nivel general deberemos considerar un estilo en la selección de las imágenes que dé una
coherencia interna al material (si estamos elaborando un producto donde aparecen varias imágenes de
animales no podemos combinar los estilos: reales junto a dibujos realistas, de cómic, etc., y con gran variedad
de colores). Además, y en relación a cada pantalla deberemos considerar la función de esta imagen en la
composición: motivar, ilustrar, explicar, organizar el espacio, como base para la actividad.
2) El sonido. Del mismo modo que en la imagen deberemos considerar la necesidad de inclusión de sonido y su
funcionalidad. Qué tipo de sonidos necesitamos (locuciones, música, efectos sonoros…); cual va a ser su función
en esa determinada pantalla: lectura, diálogos, narración, motivación, manifiesta el error, música de fondo,
efectos sonoros; y en qué momento se activará (al llegar a la pantalla o a elección del usuario y cuando éste lo
necesite).

En cualquier caso es importante no abusar de los efectos sonoros, y cuando los utilicemos deberemos
intentar que no sean excesivamente repetitivos.
3) El vídeo es la reproducción de una sucesión de imágenes estáticas por segundo, esto crea la sensación de
movimiento en una determinada frecuencia, y el framerate es la velocidad a la que se muestran estas imágenes
o también llamadas frames, este Framerate se expresa en frames por segundo (fxs).
 La señal de vídeo analógico es la conversión de los cambios de la intensidad de la luz en señales

variables de intensidad eléctrica, en materiales fotosensibles. Es decir, para plasmar la realidad
mediante señales electromagnéticas en una cinta.
 El vídeo digital es la conversión de la imagen real en el lenguaje binario (unos y ceros) para que sea
comprensible en una computadora.
5.6 Hardware y Dispositivos Físicos de Interacción
Ver 5.1
5.7 Software a Emplear
 Imágenes: Photoshop, Fireworks.

 Audio: Sound Forge.
 Video: Premier, Windows Movie Maker, Imovie (de Mac)
 Integración: Flash, Director, Dreamweaver, After Effects.
5.8 Diseño de Controles
Sistema de control del usuario. Diseñar el control que el usuario tendrá sobre el sistema nos lleva a tener en
cuenta los movimientos y posibilidades que el interesado esperará sobre el material. Esto es considerar que el
usuario debe saber que esa zona activa lo es y presuponer qué ocurre cuando la activa, ofrecer segmentos de
orientación, movilidad y variedad de elementos, poder imprimir, tomar notas, añadir elementos, etc.
Uno de los principales problemas de los materiales multimedia es la desorientación y la sensación de

pérdida de tiempo. ¿Cómo evitarlo?: Logrando que las zonas activas sean claras e inequívocas. Cada uno de los
botones o zonas activas de la pantalla deben presentarse de forma clara, haciendo evidente al usuario que
aquello es una zona activa. Para ello podemos utilizar un color distinto o que, al pasar por encima, la zona activa
cambie de color o de imagen. Si utilizamos íconos para expresar zonas activas, deberemos asegurarnos que el
usuario, desde sus diferencias contextuales y culturales, entienda perfectamente que esa imagen significa lo que
nosotros pensamos que significa. O previamente haber realizado una asociación entre el gráfico y la actividad.
Por ejemplo, para volver a la página de inicio podemos utilizar un ícono que reproduzca el diseño de esa página
inicial y así el usuario reconoce fácilmente a dónde le llevará ese botón.

Es importante que el usuario entienda la interfaz, su estructura y organización, para ello debemos ofrecer
pistas con las que el usuario intuya que allí existe una zona activa y qué va a pasar cuando la active. Algunas
recomendaciones son:
1. Cuando el usuario selecciona una zona activa debe ocurrir algo rápidamente. Si no es así puede pensar que
se ha equivocado, que no funciona y seguramente intentará acceder a otra zona activa.
2. Ofrecer ayudas a la navegación. Podemos utilizar diferentes sistemas de ayuda o control de la navegación
para evitar que el usuario se sienta perdido o desorientado en mar de pantallas que le proponemos. Algunos
ejemplos son:
i. Utilizar colores, símbolos, títulos o encabezados para identificar cada uno de los bloques o
subdivisiones temáticas del material.
ii. Diferenciar con colores las zonas por donde el usuario ya ha pasado de las que aún quedan
pendientes.
iii. Ofrecer un mapa de navegación completo (mapa conceptual, índice) donde el interesado
pueda ver la estructura completa del material.
iv. Las zonas de navegación comunes deben acompañar al visitante en todas las pantallas.
v. Los botones de navegación deben estar en las mismas coordenadas de la pantalla.
vi. Mantener la coherencia de estilo y temas.
3. Evitar callejones sin salida y recorridos inútiles. Evitar que para volver a un punto de inicio, mapa general
de contenidos o bloque de actividades, tenga necesariamente que retornar sobre los pasos andados. Es
importante que cada pantalla presente los elementos de navegación precisos que permitan al usuario
moverse de forma rápida entre los bloques, partes del material o al salir.
5.9 Elaboración de Prototipo
Un PROTOTIPO es una visión preliminar del modelo futuro, es operable, fácilmente ampliable y modificable, que
contiene todas las características propuestas, pero realmente es un modelo básico para ser mejorado
posteriormente. Por tanto, un procedimiento para el desarrollo de prototipos puede resumirse en los cinco
pasos siguientes:
1. Identificar los requerimientos de información que el usuario conoce.

2. Desarrollar un prototipo utilizable.
3. Someterlo a la práctica y determinar las modificaciones.
4. Realizar los cambios pertinentes.
5. Repetir los pasos anteriores hasta que sean satisfechas las necesidades del usuario.
Existen algunas concepciones erróneas en relación al desarrollo de los prototipos, tales como pensar que
representa una actividad trivial, que sólo son aplicables para aplicaciones pequeñas de poca complejidad y que
la participación del usuario en su obtención es simbólica.
Una vez seleccionada la estrategia de trabajo (desarrollo de prototipos), el paso siguiente es establecer las
directrices de trabajo imprescindibles por parte del nivel de dirección facultado para ello.

Modalidades o tipos de productos que se pretenden desarrollar: videos, discos compactos, presentaciones
en formatos electrónica, ficheros para descargar, en este caso especificando el formato de los mismos: páginas
MULTIMEDIA (HTML), ejecutables (exe), etc.
Un prototipo Multimedia es un modelo inicial a partir del cual se empieza a concebir y desarrollar la idea
original del diseño. Es más sencillo y económico hacerlo ajustándolo gradualmente hasta lograr el mejor modelo
posible, que hacer un diseño multimedia real y luego modificarlo hasta alcanzar lo que se busca.
Existe “software” y aplicaciones para hacer prototipos multimedia, orientados a

diseñadores/desarrolladores. Para el usuario sin conocimientos que necesita "hacerse entender", debe lograr
transmitirle a su desarrollador multimedia lo que requiere de la manera más clara posible. Se puede recurrir al
papel y lápiz o, en su defecto, un prototipo realizado digitalmente con algún editor gráfico (Photoshop,
Fireworks, Flash, Director, In Design, entre otros.)
El prototipado de un multimedia resuelven básicamente los siguientes aspectos:

 Qué elementos deben conformar la interface gráfica (de cada sección).
 Cuántos elementos deben conformar la interface gráfica para que haya suficiencia en la
información/interacción pero evitando la saturación de elementos (de cada pantalla).
 Cómo debe organizarse la jerarquía visual (en qué orden y disposición van los elementos).
 Qué extensión (superficie visual o tamaño) adecuado deben tener aprovechando eficientemente el
espacio bidimensional disponible.
 Cómo “modularizar” la interface gráfica.
 Qué patrones de deben respetarse para estandarizar el diseño de interfaces.
 Otros aspectos técnicos y de usabilidad/accesibilidad.

05 Diseno Del Sistema Multimedia

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

05 Diseno Del Sistema Multimedia

Cargado por

Copyright:

Formatos disponibles

Diciembre de 2013 [5.

DISEÑO DEL SISTEMA MULTIMEDIA]

5. Diseño del Sistema Multimedia

5.1 Arquitectura del Sistema Multimedia

UNITEC Campus Marina | Maestría en Sistemas Multimedia 1

a) Estructura de una computadora multimedia.

Se debe tomar en cuenta la capacidad de almacenamiento.

c) Arquitectura de entrada y salida.

- La información multimedia es:

UNITEC Campus Marina | Maestría en Sistemas Multimedia 2

d) Arquitectura del procesador.

El procesador es el cerebro de una computadora. Dependiendo del tipo de procesador y su velocidad se

- Pentium-75 ; 5x86-100 - Cyrix 686-133 (PR-150) ; - Pentium II-233

UNITEC Campus Marina | Maestría en Sistemas Multimedia 3

Diseño de Sistemas Multimedia

Al momento de hacer la estructura de navegación se deben considerar los siguientes puntos:

UNITEC Campus Marina | Maestría en Sistemas Multimedia 4

5.2 Descripción de Contenidos

Recomendaciones para capturar el interés de los usuarios:

5.3 Diseño del Tratamiento del Contenido

El diseño pedagógico ayuda a establecer:

UNITEC Campus Marina | Maestría en Sistemas Multimedia 6

Los errores más comunes en los diseños de página incluyen:

UNITEC Campus Marina | Maestría en Sistemas Multimedia 7

UNITEC Campus Marina | Maestría en Sistemas Multimedia 8

Las combinaciones con mayor grado de legibilidad son:

UNITEC Campus Marina | Maestría en Sistemas Multimedia 9

UNITEC Campus Marina | Maestría en Sistemas Multimedia 10

Recomendación de tamaños de texto con medida de pixeles:

Tipo de público Puntos

Para la realización de menús es necesario considerar los siguientes aspectos:

5.4 Diálogos humano – sistema interfaz

- Lograr el rendimiento exigido por el personal de operación, control y mantenimiento

5.5 Descripción de los Medios a Emplear

UNITEC Campus Marina | Maestría en Sistemas Multimedia 12

 La señal de vídeo analógico es la conversión de los cambios de la intensidad de la luz en señales

5.6 Hardware y Dispositivos Físicos de Interacción

5.7 Software a Emplear

 Imágenes: Photoshop, Fireworks.

5.8 Diseño de Controles

Uno de los principales problemas de los materiales multimedia es la desorientación y la sensación de

UNITEC Campus Marina | Maestría en Sistemas Multimedia 13

5.9 Elaboración de Prototipo

1. Identificar los requerimientos de información que el usuario conoce.

UNITEC Campus Marina | Maestría en Sistemas Multimedia 14

Existe “software” y aplicaciones para hacer prototipos multimedia, orientados a

El prototipado de un multimedia resuelven básicamente los siguientes aspectos:

UNITEC Campus Marina | Maestría en Sistemas Multimedia 15

También podría gustarte