Normas de Diseo

Interfaces Textuales y Visuales

Curso de HCI para sitios Web

Pgina 1

-Interfaces Textuales y VisualesEl Dilogo o Interaccin Hombre-Computadora es el intercambio

observable de informacin, datos y acciones entre un humano y la
computadora o viceversa.
Dilogo o
Interaccin Hombre-Computadora
Bla Bla

Bla Bla

La Interfaz del Usuario es el software y el hardware necesario para

soportar el dilogo y permitir que la interaccin hombre-computadora se
lleve a cabo.

Curso de HCI para sitios Web

Pgina 2

-Interfaces Textuales y VisualesEn una Interfaz del Usuario se debe considerar:

aFormas de visualizar la informacin VisualizacinaModos de manifestar el dilogo InteraccinaMecanismos de programacin Programacin-

El TEXTO como
medio:
Interfaz Textual

La IMAGEN o
PARADIGMAS DE
INTERACCION VISUAL
como medios:
Interfaz Visual

Curso de HCI para sitios Web

Pgina 3

Normas de Diseo
-Interfaces Textualesa Principios de Nielsen
1 Dilogo simple y natural
Control del dilogo por parte del usuario
Distribucin adecuada de la informacin
No mezclar informacin importante con la irrelevante
Prompts lgicamente bien diseados
Escritura correcta, sin errores de tipeo.
Evitar el uso excesivo de maysculas y de abreviaturas.
Uso unificado de las funciones predefinidas
2 Lenguaje del usuario
Usar el lenguaje del usuario.No utilizar palabras tcnicas ni extranjeras
Evitar el truncamiento excesivo de datos
Libertad de accin en las entradas del usuario
Grado adecuado de informacin
3 Minimizar el uso de la memoria del usuario
Informacin de la navegacin y sesin
Visualizacin de rangos de entrada admisibles, ejemplos, formatos
Curso de HCI para sitios Web

Pgina 4

Normas de Diseo
-Interfaces Textualesa Mtricas Generales de Evaluacin: Principios de Nielsen (Cont.)
4 Consistencia
Consistencia terminolgica
Consistencia visual
5 Feedback
Informacin de los estados de los procesos
Informacin del estado del sistema
Utilizacin de aclaraciones, validaciones, confirmaciones y mensajes de cierre
6 Salidas evidentes
Visualizacin evidente de Opciones de Cancelacin, Salidas, de Suspender, de
Deshacer y Modificacin
7 Mensajes de error
Forma de aparicin
Informacin del error, explicar el error y dar alternativas a seguir
Categorizacin
Curso de HCI para sitios Web

Pgina 5

Normas de Diseo
-Interfaces Textualesa Mtricas Generales de Evaluacin: Principios de Nielsen (Cont.)
8 Prevencin de errores
Ejemplificacin y formatos de entrada
Deteccin automtica de posibles errores asociados a una entrada de datos
Flexibilidad en las entradas de los usuarios
9 Atajos
Adaptacin de la navegacin del usuario
10 Ayudas
Tipos de ayudas: generales, contextuales, especficas, en lnea
Contenido de las ayudas: informacin sintctica y semntica
Diseo global de las ayudas

Curso de HCI para sitios Web

Pgina 6

Normas de Diseo
-Interfaces Visualesa Las Normas de Diseo para Interfaces Visuales se aplican de acuerdo a
los Paradigmas de Interaccin Visual empleados
a Los Paradigmas de Interaccin son:
Ventanas
Menes
Feedback Visual
Manipulacin Directa
Gestos
Dependencias
Animaciones
Browser
Cajas de Dilogo
Curso de HCI para sitios Web

Pgina 7

Normas de Diseo
-Interfaces Visualesa Ventanas
Funcionalidades sintcticas de las ventanas
Formas de activacin de las ventanas:

considerar los mismos mecanismos de activacin

de las mismas. Via el tipeo de teclas, eligindola de una lista de ventanas, cliquear directamente sobre
algunas de ellas.

Modo de activacin de la ventana:

considerar si la ventana se abre en modo exclusivo,

donde todos los eventos sern atendidos slo por sta, desactivando todas las dems, hasta que se culmine
el dilogo con la misma.

Ambito de la ventana: si es fija, si es movible pero dentro del espacio de la ventana madre, o si
se abre en modo independiente, formando un ambiente particular que toma vida propia y se independiza de
la ventana llamante.

Dependencia de la ventana:

tener en cuenta la relacin entre esta ventana con la ventana

llamante, o con las ventanas pares o hermanas.

Cierre de la ventana:

considerar dependencias de la misma respecto de la ventana llamante, si

cerrar la hija implica: volver a la madre, cerrar la madre.

Contenido de la ventana: considerar que los elementos constituyentes tengan el mismo nivel de
abstraccin, que estn bien distribudos, que sean fcilmente accesibles.

Anidamiento de ventanas: evitar un excesivo grado de anidamiento que dificulte la interaccin

con el sistema e induzca a la prdida de contexto. Evitar una organizacin de las ventanas desbalanceadas.
Curso de HCI para sitios Web

Pgina 8

Normas de Diseo
-Interfaces Visualesa Menes
Organizacin semntica: que sea adecuada, entendible y conveniente para las tareas del
usuario. La descomposicin jerrquica que sea la ms natural.

Anidamiento del men: que el anidamiento no sea excesivo y engorroso.

Categorizacin: que se realice una categorizacin correctamente, por objeto o por accin.Tener en
cuenta la lgica de la descomposicin.

Descripcin de cada opcin: que las opcions sean claras, colaborando con mensajes asociados
explicativos.

Niveles de abstraccin: que las opciones de cada men deben pertenecer a los mismos niveles
de abstraccin. Que no haya tems muy generales y otros muy especficos.

Acceso a las opciones: analizar las formas de acceso a cada opcin.

Reconfiguracin de las opciones: si se permite en pos a la adaptabilidad modificar la
jerarqua y categorizacin de los menes.

Visualizacin de las opciones: formas de visualizar el tem corriente, el seleccionado, el

deshabilitado, el visitado.

Cantidad de Opciones y Profundidad

Curso de HCI para sitios Web

Pgina 9

Normas de Diseo
-Interfaces Visualesa Feedback visual
Visualizacin del feedback: utilizar formas adecuadas para expresar el estado del sistema,
respetando la homogeneidad.

Informacin del feedback: que sea correcto, adecuado al contexto y til.

Aparicin del feedback: que sea inmediato, que sea una respuesta rpida ante la accin del
usuario. Evitar respuestas lentas, donde el usuario ya comienza a concentrarse en otros objetivos.

La necesidad del feedback: tampoco debe existir una interfaz sumamente cargosa que

confirma cada actividad atmica del usuario. Identificar las actividades a confirmar, validar, rechazar,
corregir, aclarar o que determinan un procesamiento significativo.

Reporte de los errores: como regla general, los errores deben ser reportados al usuario tan
rpido como se haya concretado, efectivamente producido y detectado para facilitar la posibilidad de
reparacin del mismo. No antes.

La necesidad del reporte del error: tampoco debe determinar un interfaz rgida y
controladora.

Feedback preventivo: visualizar el estado de las opciones o funciones -habilitadas o no Feedback que refleje el modo corriente: modo de edicin, de comando, etc
Feedback para las demoras: visualizar el tiempo de procesamiento de las funciones.
Feedback para mapear movimientos de dispositivos de apuntamiento.
Curso de HCI para sitios Web

Pgina 10

Normas de Diseo
-Interfaces Visualesa Manipulacin Directa
Concepto de Unin: Analizar si la representacin grfica es adecuada y permite el reconocimiento
de los objetos representados, aunque no es obligatorio ser una representacin icnica.

Concepto de Distancia: Si disminuye el esfuerzo cognitivo para llevar a cabo la tarea. Si la

manipulacin es costosa de realizar o rgida -por ejemplo requiere mucha puntera- se convierte en obsoleta.

Analizar formas sintcticas: considerar modos para realizar la manipulacin -discriminadas por
mouse y teclado-.

Combinar manipulacin directa con feedback: representar visualmente las

manipulaciones no vlidas, por ejemplo trasladar un objeto sobre otro que se inhiba o realizarla y que
despus el sistema realice la manipulacin inversa.

Que sea obvia: o que venga acompaado de algn mensaje que incite a la realizacin de dicho
movimiento.

Alcance de la manipulacin: si puede sobrepasar una ventana, o un objeto de interaccin.

Curso de HCI para sitios Web

Pgina 11

Normas de Diseo
-Interfaces Visualesa Gestos
Una sesin de entrada en gestos consiste de una secuencia o un camino de
puntos logrado por determinadas acciones que el usuario desempea mediante
dispositivos fsicos, como el teclado o el mouse.
Si el trazo es significativo y representativo: si el empleo de los gestos adecuado, si
corresponde con la accin semntica que est representando.

Si la entrada de trazos y grafismos colabora y simplifica la interaccin

con el sistema.
Modos sintcticos: considerar su eficiencia. Uso del mouse, dedo o lpiz.
Direccin de los gestos: si es el sistema que responde con gestos o no. Por ejemplo que en el
Word ante la correccin de ortografa te subraye o marque los errores ortogrficos o te tache las palabras
que no existen en el idioma y te sobreescriba una parecida.

Funciones para gestos: que se provean funciones sintcticas donde se permita borrar los trazos
realizados, desmarcar, permitir que sean imprimibles, etc.

Alcance de los gestos: si puede sobrepasar una ventana, o un objeto de interaccin compuesto.
Curso de HCI para sitios Web

Pgina 12

Normas de Diseo
-Interfaces Visualesa Dependencias
Una dependencia especifica una relacin causal que debe ser siempre mantenida.
Sucede cuando al manipular un objeto de la pantalla puede significar
consecuencias en la aplicacin que, a su vez, causen efectos directos o indirectos
en la pantalla
Durabilidad de la dependencia: Mantener la dependencia siempre durante toda la sesin del
usuario donde la misma tenga sentido y colabora con la integridad y coherencia del sistema.

Visualizacin implcita de la dependencia: contar con elementos visuales que distingan

los objetos relacionados, usar colores, formas, lugares, expresiones, etc.

Alcance de la dependencia: respetar si la relacin entre esos objetos complejos o no va ms

all de una caja de dilogo, o pertenece slo dentro de una ventana, o entre ventanas.

Configuracin de la dependencia: si se permite o no activar o desactivar esos links entre

objetos.

Curso de HCI para sitios Web

Pgina 13

Normas de Diseo
-Interfaces Visualesa Animacin
La animacin es una tcnica de interaccin que visualiza el proceso interno de un
sistema dinmico. Es una parte integral en la interfaz visual donde los cambios en
el sistema estn provocados por acciones autnomas del propio objeto .
Cuadros de la animacin: si son suficientes para representar el proceso animado.
Velocidad de la animacin: que permita mostrar el dinamismo en una velocidad legible.
Repeticin de la animacin: que cuando termine comience nuevamente para volver a reflejar
el mensaje que representa.

Aplicacin de la animacin: apta para mostrar conceptos dinmicos, feedback, ayudas que

indiquen cmo se hace tal actividad, mensajes de error que repitan tus acciones y marquen dnde y cundo
se efectu el error.

Arranque de la animacin: que no est siempre activada llamando la atencin

permanentemente sino cuando el usuario focalice su atencin en ese objeto, o cuando cliquee en algn
botn.

Funciones sintcticas de la animacin: para que arranque, pare, se repita.

Configuracin de la animacin: permitir al usuario cmabiar parmetros de velocidad y veces
de repeticin.

Curso de HCI para sitios Web

Pgina 14

Normas de Diseo
-Interfaces Visualesa Browsers
Si el contenido es adecuado:

si ayuda a visualizar datos mltiples con descripcin de sus

atributos.

Funciones sintcticas asociadas: permitir ordenacin por determinados criterios, mover

objetos de lugar, permitir copiar y pegar.

Configuracin del browser: permitir cambiar tipos de letras, determinar qu columnas van,
cuntas filas, el criterio a ordenar el listado, la forma de ordenacin ascendente o no.

Configuracin por defecto: contar con configuraciones predeterminadas, permitir setear un

cierto ordenamiento por default, o tipo de letras o cantidad de filas, determinar qu columnas.

Si es editable o no.
Si es de mltiple seleccin o no.
Si rene funciones por atributo, fila o por browser en general.

Curso de HCI para sitios Web

Pgina 15

Normas de Diseo
-Interfaces Visualesa Cajas de Dilogo y elementos de interaccin
La caja de dilogo puede incluir elementos como labels, edit box, combo box,
radio buttons, check box, list box, entre otros.
Distribucin de los objetos de interaccin: no haya superposicin o poco espacio
cuando se requiere ms.

Forma de ordenacin de los elementos: lgica de sectorizacin.

Funciones sintcticas a nivel de la caja de dilogo: ayuda, salida, cancelacin,
movimiento.

Aspectos de visualizacin: eleccin apropiada del fondo, tipografa, botones.

Funciones a nivel de elemento: de validacin, ejemplificacin, valores por defecto.

Curso de HCI para sitios Web

Pgina 16

Problemas de Dilogo simple y natural

Distribucin de la Informacin -En Registracin-

No se entiende el pedido de Provincia y Universidad cuyos datos relacionados fueron

solicitados anteriormente en el sector de Miscelneos
Curso de HCI para sitios Web

Pgina 17

Problemas de Dilogo simple y natural

Distribucin de la informacin
-En Pgina InicialSector de mensajes de
error se encuentra junto
a avisos

Ortografa y Gramtica incorrecta

-En Registracin-

-En Capacitacin-

Curso de HCI para sitios Web

Pgina 18

Problemas de Dilogo simple y natural

Error de Ortografa
-En Admirador Secreto-

Curso de HCI para sitios Web

Pgina 19

Problemas de Lenguaje del usuario

Utilizacin del lenguaje del usuario
-En RegistracinUso de palabras en
ingls

Grado adecuado de informacin

-En MisMateriasNo hay informacin sobre lo que
este servicio ofrece al usuario
Curso de HCI para sitios Web

Pgina 20

Problemas de Lenguaje del usuario

Entradas del usuario
-En Registracin-

No hay forma de pasar libremente de una parte del formulario a la prxima. Hay
controles, validaciones, carga de la pgina entera, entre otros.
Se debe completar y corregir toda la 1parte del formulario para ver la siguiente.
Curso de HCI para sitios Web

Pgina 21

Problemas de Lenguaje del usuario

Entradas del usuario
-En Agenda-

No hay forma de pasar libremente de una parte del formulario a la prxima. Hay
controles, validaciones, carga de la pgina entera, entre otros.
Se debe completar y corregir toda la 1parte del formulario para ver la siguiente.
Curso de HCI para sitios Web

Pgina 22

Problemas de Minimizar la memoria

Informacin de navegacin y sesin
-En Mis Materias-

No hay informacin sobre los pasos realizados anteriormente. Se haba seleccionado

previamente el pas, la universidad y la facultad.
Curso de HCI para sitios Web

Pgina 23

Problemas de Minimizar la memoria

Informacin de navegacin y sesin
-En Mi Universidad-

Se haba seleccionado previamente Mapa Universidad, la facultad, informacin general,

autoridades. Tampoco previene el acceso a informacin faltante.
Curso de HCI para sitios Web

Pgina 24

Problemas de Consistencia
Consistencia terminolgica
-En Mail- El mensaje aclaratorio no coincide con las funciones de la pgina.

-En Mis Materias- El Blanquear limpia los tildes pero no las observaciones.
-En Agenda- El Enviar implica anotar en la agenda y en otros contextos es utilizado
para enviar efectivamente mensajes. El Actualizar no realiza nada.
Curso de HCI para sitios Web

Pgina 25

Problemas de Consistencia
Consistencia terminolgica
-En Mail- Bandeja de Entrada es mencionada como INBOX

En Bandeja de entrada, Direcciones y Carpetas referencia Borrar lo seleccionado

cuando en realidad es lo tildado.

Curso de HCI para sitios Web

Pgina 26

Problemas de Consistencia
Consistencia visual
Distintos formatos y ubicaciones de la opcin Volver en los diferentes contextos.
-En Pasantas-

-En Mis Materias-

-En Agenda-

-En Becas-

-En Mapa Universidad-

-En Foros-

Distintas ubicaciones y tipos de mensajes de error

-En Cartelera-

-En Agenda-

Curso de HCI para sitios Web

Pgina 27

Problemas de Consistencia
Consistencia visual
Distintos formatos de hipervnculos
-En Mis Archivos-

No es cliqueable

S es cliqueable

Curso de HCI para sitios Web

Pgina 28

Problemas de Feedback
Informacin de los estados de los procesos
-En Registracin- Al completar la 1parte del formulario, presions en Continuar y
tarda varios segundos sin ningn tipo de explicacin.
Informacin del estado del sistema
-En Pantalla inicial- Todas las funciones estn deshabilitadas y no hay un aviso
explcito de este estado.

Curso de HCI para sitios Web

Pgina 29

Problemas de Feedback
Utilizacin de aclaraciones, validaciones, confirmaciones y mensajes de cierre
-En Zapping (Tecnologa)- Uno presiona en seleccionar y no hace ni indica nada

-En Mis Materias- Luego de adjuntar las materias tildadas, vuelve al sector de
seleccin de carreras sin ningn mensaje de cierre de transaccin
-En Agenda- Al presionar en el cono adjunto al evento, se borra el mismo sin
mensaje de confirmacin
-En Mail- Al borrar carpetas no te d ningn tipo de aclaracin ni confirmacin
Curso de HCI para sitios Web

Pgina 30

Problemas de Salidas evidentes

-En AgendaNo se puede salir,
deshacer ni cancelar.

-En Registracin- No se puede cancelar o deshacer la parte de formulario escrita.

-En El ArtculoComo en la mayora de los servivios no
se presentan salidas evidentes.
Curso de HCI para sitios Web

Pgina 31

Problemas de Mensajes de error

-En Mi Universidad- Presenta un mensaje de error vago y en otro sector carece de
mensajes de error.

-En Cursos y Congresos-

-En Mapa Universidad-

Curso de HCI para sitios Web

Pgina 32

Problemas de Prevencin de errores

-En Registracin- No realiza validaciones lxicas. No diferencia campos obligatorios
de los que no lo son. Obliga a llenar ciertos campos (Celular) con expresiones rgidas.

-En Cartelera- Si no hay anuncios

para ese sector que directamente no
se haya podido llegar a este punto.
Sucede en varios contextos.
Curso de HCI para sitios Web

Pgina 33

Problemas de Atajos
-En Mis Materias- No considera la
nacionalidad, universidad, facultad que el
usuario ha registrado ya.

-En Buscador- Los resultados no pueden

ser consultados, filtrados ni ordenados por
idioma, tamao, ttulo, contenido.

-En Otras Universidades- No considera

la nacionalidad del usuario. No presenta
bsquedas por lugar, ni por universidad.

-En Novedades- No hay bsquedas, ni

filtros para acceder en forma directa a la
informacin

-En Agenda- No permite bsquedas o filtros por tipo de evento, el cul es cargado.

Curso de HCI para sitios Web

Pgina 34

Problemas de Ayudas
-En Todo el Sitio- No se presenta ningn tipo de asistencia, ayuda contextual ni
general.

Curso de HCI para sitios Web

Pgina 35