Presentaci

1
DISEÑO Y PRODUCCIÓN DIGITAL Sesión 13 Diseño para
Medios Digitales Diseño de usabilidad. Diseño de
interfase. Diseño de Producción y
Evaluación Presenta Lic. Fernando Gutiérrez C.,
MATI, MCE Departamento de Comunicación Instituto
Tecnológico y de Estudios Superiores de
Monterrey, Campus Estado de México
2

• Usabilidad
• Es realmente necesaria la usabilidad?La
  usabilidad es totalmente necesaria ya que lo que
  estamos presentando en el monitor del usuario, la
  interfaz es la cara de nuestro negocio, y esto
  en última instancia es comunicación, aunque sea a
  través de un ordenador. Por consiguiente, si en
  alguno de los canales emisor o receptor falla
  algo, la comunicación se verá afectada.
• El diseño centrado en el usuario, el diseñar con
  él y para él, es la clave del éxito de las
  empresas en la Red.
• La inversión realizada en el estudio de la
  usabilidad, por una empresa se justifica con
  creces ya que entre otras cosas conseguimos (1)
  aumentar la calidad del desarrollo, (2) reducir
  los costes de producción, (3) reducir los costes
  de mantenimiento y apoyo al usuario y (4) reducir
  el esfuerzo en el uso de un site.
• Juan José Rodríguez Soler. Consultor de
  Usabilidad. AGM The Global Company.

3
Por qué se reducen los costos de
producción?Fundamentalmente, porque nos
adelantamos a cambios y/o modificaciones
posteriores, ya sabemos lo que supone el costo de
un rediseño y lo difícil que puede resultar
obtener la benevolencia de nuestros usuarios con
una segunda oportunidad. De igual forma, el
conocer qué es lo que quieren y cómo lo quieren
los usuarios, nos evita inversiones innecesarias
en funcionalidades innecesarias y elementos de
diseño innecesarios.Por qué se reducen los
costos de mantenimiento y apoyo al
usuario?Cuando estudiamos la interacción de los
usuarios en un site, de alguna manera, estamos
estudiando la lógica de navegación de los mismos
y este conocimiento nos ahorra incorporar
estrategias complementarias de reeducación de los
usuarios, apoyadas en sistemas de ayuda, como
puede ser un mapa web, demos, o instrucciones
previas a los procesos implicados.Cómo
reducimos el esfuerzo en el uso de un
Website?Evidentemente, optimizando la relación
entre el número de clicks y el número de errores
cometidos, es decir haciendo eficientes las
secuencias de navegación. Juan José Rodríguez
Soler. Consultor de Usabilidad. AGM The Global
Company.
4
Qué se puede hacer para acelerar y mejorar la
usabilidad de nuestros websites? Hay que empezar
por el contenido, por ejemplo, la CNN, hay un
accidente de avión, y, cómo saben que ésta será
la historia de mayor interés para los usuarios?,
por un lado, porque tienen un montón de
experiencia en historias... Saben que los
accidentes de avión son grandes noticias, también
lo saben por tráfico, analizando las visitas, los
periódicos saben hacer esto durante años, qué
poner en la primera segunda o tercera página y
cómo dirigir la atención del usuario hacia las
noticias que se desea destacar, la portada de un
periódico tiene un diseño de la información
efectivo, orientado por el editor, de manera que
la jerarquía y el número de palabras utilizadas
hacen que el contenido tire del usuario, desde la
portada o la Home, hacia el sitio donde se
encuentra la información relevante.  Jareed
Spool User Interface Engineering
5

• Ingeniería de Usabilidad Simplificada
• El test se realiza con seis participantes porque
  el objetivo es descubrir los principales
  problemas de usabilidad. Con seis participantes
  es posible descubrir un 85-90 de los problemas,
  un número significativo con un ahorro en tiempo y
  dinero importante. (Jacob Nielsen)
• Algunos principios Anticipación, Autonomía,
  Color, Consistencia, Defaults, Eficiencia,
  Interfases explorables, Fittss Law,
  Human-interface objects, Reducción de latencia,
  Aprendizaje, Uso de metáforas, protección del
  trabajo de los usuarios, Readability, Track
  State, Visible Navigation. (Bruce Tognazzini)
• Metodología de Análisis Comparados de Usabilidad.

6

• Diseño de Interfaz
• INTERFAZ La serie de procedimientos que seguirá
  el usuario, durante todo el tiempo que se
  relacione con el programa , detallando lo que
  verá y escuchará en cada momento, y las acciones
  que realizará, así como las respuestas que el
  sistema le dará.

7

• Diseño de Interfaz
• INTERFAZ La serie de procedimientos que seguirá
  el usuario, durante todo el tiempo que se
  relacione con el programa , detallando lo que
  verá y escuchará en cada momento, y las acciones
  que realizará, así como las respuestas que el
  sistema le dará.
• Los gráficos por computadora son muy utilizados
  principalmente para la interacción
  usuario-computadora. La interacción gráfica nos
  provee una comunicación ilustrada facilitando la
  interacción. El usuario controla el contenido, la
  estructura, la apariencia de los objetos y las
  imágenes desplegadas por medio de los
  dispositivos de entrada tales como teclado,
  mouse, y pantallas sensitivas al contacto (touch
  screen).

8

• Diseño de Interfaz
• Los tres estilos más comunes de interfaces
  gráficas hombre-computadora son WYSIWYG (What
  you see is what you get), Manipulación directa e
  Interfases de usuario basados en iconos.
• Las interfaces básicas de usuario son aquellas
  que incluyen cosas como menús, ventanas, teclado,
  ratón, los beeps y algunos otros sonidos que la
  computadora hace, en general, todos aquellos
  canales por los cuales se permite la comunicación
  entre el hombre y la computadora.
• En una interfaz WYSIWYG la representación
  gráfica con la cual los usuarios interactúan en
  la pantalla es esencialmente la misma imágen
  creada por la aplicación. Muchas de la
  aplicaciones gráficas tienen algún componente
  WYSIWYG.

9

• Diseño de Interfaz
• En una interfaz que no utilice WYSIWYG se
  utilizan códigos de control para decir que una
  palabra será bold, itálica o cambiará su tamaño.
  El párrafo siguiente muestra como los códigos de
  control se ven en el editor Aquí se muestra las
  palabras ltBgtbold,lt/Bgt ltIgtitaliclt/Igt, ltfont
  size5gttamaño.lt/fontgt
• Las interfaces WYSIWYG tienen algunas
  desventajas. Elementos como la resolución, la
  intensidad del color y algunas otras
  características no son iguales en una pantalla y
  en un dispositivo de impresión, por lo que es muy
  difícil crear una copia exacta de la pantalla en
  nuestro papel. Otro problema mayor, es que
  algunas aplicaciones no pueden ser implementadas
  con puro WYSIWYG. Consideremos los Procesadores
  de textos, las interfaces más comunes de este
  tipo.

10

• Diseño de Interfaz
• Diferencia entre WYSIWYG (What you see is what
  you get) y WYSIAYG (What you see is all you get).
  
• El proceso de Diseño
• Existen 11 pasos en el proceso de diseño
  centrado en las tareas
• 1.- Entender quién usará el sistema para hacer
  qué.
• 2.- Elegir tareas representativas para el diseño.
  
• 3.- Plagiar o copiar.
• 4.- Bosquejar un diseño.
• 5.- Pensar acerca del diseño.
• 6.- Crear un prototipo.
• 7.- Evaluarla con los usuarios.
• 8.- Repetir.
• 9.- Construirla.
• 10.- Rastrearla.
• 11.- Cambiarla.

11

• El Proceso de Diseño
• 1.-Entender quién usará el sistema para hacer
  qué.
• Este paso es llamado análisis de usuarios y
  tareas. La necesidad de análisis de tareas debe
  ser obvio debido a que si se construye un gran
  sistema que no hace lo que nosotros necesitamos,
  muy probablemente será un fracaso. Pero, más aún
  que un simple haz lo que se necesita, un
  sistema exitoso debe de integrarse fácilmente al
  mundo en donde se encuentra el usuario y a su
  trabajo.
• Es muy importante conocer a fondo a los usuarios,
  ya que ellos responderán a muchas preguntas que
  probablemente se tendrán
• - Qué nombres usar en cada elemento del menú?
• -Qué deben de incluir los paquetes de
  entrenamiento y ayuda?
• -Qué características debe de proveer el sistema?
  

12
El Proceso de Diseño 2.-Elegir tareas
representativas para el diseño. En este paso, el
diseñador deberá identificar varias tareas
representativas que el sistema llevará a cabo.
Los usuarios son los encargados de describir
estas tareas a los diseñadores. Las tareas
inicialmente podrán ser descritas por los
usuarios con unas cuantas palabras, pero
posteriormente deberán de ser detalladas para
resolver preguntas del diseñador o analizar una
interfaz propuesta. 3.-Plagiar o copiar. Esto no
significa plagiar en el sentido legal, pero puede
encontrar y analizar interfaces existentes con
las cuales los usuarios han trabajado y después
tomar y construir ideas para posteriormente
utilizarlas en su interfaz. Esto es práctica y
legalmente posible. Este tipo de copia puede ser
efectiva para un nivel alto de paradigma de
interacción y para un bajo nivel de decisiones de
control y desplegado.
13
El Proceso de Diseño 4.-Bosquejar un diseño. La
descripción del bosquejo del diseño debe de ser
puesto en papel, el cuál fuerza a que se piense
acerca de las cosas. Pero todavía no debe de ser
programado en la computadora, por que el esfuerzo
de la programación, aunque sea un simple
prototipo, compromete al diseñador a tomar
demasiado temprano muchas decisiones. 5.-Pensar
acerca del diseño. Ninguna línea de aviación
diseñaría y construiría un nuevo jet sin hacer
primero un análisis de ingeniería que prediga un
rendimiento y seguridad del avión. El costo de
construcción y el riesgo de fracasar es demasiado
alto. Similarmente los costos para construir una
interfaz de usuario completa y evaluarla sin los
suficientes usuarios que revelen todos los
problemas es realmente inaceptable.
14
El Proceso de Diseño 6.-Crear un prototipo. En
este paso se construirá algo más concreto que un
boceto en unas hojas de papel, algo que pueda ser
mostrado a los usuarios y actuar con una
descripción más detallada para un trabajo más
amplio. No es necesario implantar el diseño
completo en este paso. El esfuerzo inicial debe
de ser concentrado en las partes de la interfaz
necesarias para representar tareas principales.
7.-Evaluar con usuarios. Existen muchos
problemas que solamente aparecerán cuando el
diseño se está probando con los usuarios. La
evaluación debe de ser hecha con la gente cuyo
conocimiento y expectativas se acerquen más a los
usuarios reales. Los usuarios deben de ser
cuestionados en la técnica de pensamiento en voz
alta la cual consisten en que el usuario vaya
narrando todo lo que está pensando al momento de
realizar una tarea.
15
El Proceso de Diseño 8.-Repetir. La evaluación
con los usuarios siempre muestra algunos
problemas con el diseño. El propósito de la
evaluación no es comprobar la interfaz si no
mejorarla. El diseñador debe de ver los
resultados, equilibrar los costos de corrección
comparado con la severidad de cada problema,
entonces revisar la interfaz y evaluarla otra
vez. Varios problemas pueden igualmente requerir
una reexaminación de tareas y usuarios. 9.-Constr
uir el diseño. Este es el momento de tomar su
prototipo y cambiarlo, es decir construir la
interfaz. Trate de anticipar cambios menores o
secundarios con sencillos cambios de variables.
16
El Proceso de Diseño 10.-Monitorear el
diseño. Un principio fundamental en el que se ha
hecho énfasis, es que los diseñadores de la
interfaz no deben de estar aislados o separados
del resto del grupo de desarrollo del sistema. Si
este principio es para mantener el sistema,
entonces el diseñador debe de tener un contacto
con los usuarios después de que el producto ha
sido lanzado a la calle. 11.-Cambiar el
diseño. Hoy en día en el negocio de las
computadoras hay pocos si no es que ningún
producto de software que pueda mantener sus
ventas sin tener que hacer actualizaciones
regulares. No importa que tan bien el producto ha
sido diseñado inicialmente para ajustarse a las
tareas y los usuarios, ya que muy probablemente
será inadecuado en algunos años ya que las tareas
y los usuarios cambian.