Informe Caso 3:

Aplicacin de Guidelines
de Interfaces
CC5504 - Interface Humano Computador



Integrantes:
Gaete Morales, Alonso Cristin
Meruane Naranjo, Rafael Ernesto
Romo Navarrete, Pablo Sebastin

Profesor de Ctedra:
Jaime Snchez I.

Profesor Auxiliar:
Matas Espinoza

Ayudante:
Demian Schkolnik M.
Introduccin

Luego de realizar un rediseo a la interfaz de Friendbinder, tomando en consideracin
los principios de diseo y los guidelines de interfaces multimediales, se procedi a analizar
profundamente la nueva interfaz considerando los guidelines de interfaces de interfaces. El
resultado del anlisis se expone en este informe detallando las fortalezas y debilidades de
nuestro rediseo para cada una de guideline de diseo de interfaces de software.




Anlisis y discusin de pgina Stream
Se presenta un anlisis de los componentes de vista Stream detectando debilidades y
fortalezas asociadas a los Guidelines de Interfaces.
Simplicidad y Claridad
Fortalezas
Si se aplican los filtros de estrella no se debera presentar informacin irrelevante para
el usuario.
Se presenta la informacin de forma bastante clara.
Los nombres son los mismos usados por otras redes sociales y los que ya el usuario
entiende.
Se presentan varios estmulos visuales como iconos, fotos, etc.
En los updates se presentan previews para los distintos contenidos multimedia a
presentar.
Deblidades
Las estrellas no se entienden mucho.
Sin aplicar los filtros, es muy probable que se presente mucha informacin irrelevante
para el usuario.
No se presentan muchos mensajes, pero esto se hace porque podra hartar al usuario
que siempre se repita el mismo mensaje al ejecutar alguna accin.



Data Display
Fortalezas
Se trata de que cada update tenga la informacin en la misma posicin, a pesar de que
no todos son del mismo tipo o tengan cambios dependiendo de la red social presentada.
Todas las sentencias son afirmativas y explican claramente lo que significan.
Las listas son ordenables por fecha y por importancia respetando el principio de
ordenacin de listas
Hay distintos tamaos de letras en la interfaz:
1. Tamao grande para acciones importantes como: Update your status y Load
More Updates.
2. Tamao normal para filtros y nombres de usuario,
3. Tamao pequeo para acciones particulares de la red social, pero manteniendo
el tamao que tienen en la red social misma.
Para texto normal se usa el color negro y para texto clickeable se usa el color azul, que
generalmente indica que un determinado texto es clickable, en este caso, los nombres
de los usuarios.
Se presenta un aviso animado que va indicando las nuevas actualizaciones que
aparecen en nuestro stream, la idea es que va mostrando el nmero de nuevas
actualizaciones y al posicionarse sobre l cambia su color para indicar que es posible
mostrar aquellas actualizaciones.
La distribucin es similar a lo que los usuarios de redes sociales estn acostumbrados,
primero se muestra la funcin para actualizar estados y ms abajo el stream con las
distintas actualizaciones de estado de los amigos.
Deblidades
Si se toman dos updates distintos, podra ser inconsistente el hecho de que pueden
poseer distintos elementos, pero esto se hace para maximizar la reutilizacin de
elementos que el usuario ya conoce de redes sociales.
Las redes sociales siempre tendrn excesiva informacin, es difcil de evitar eso y en
realidad es lo que quiere el usuario, por eso, se proveen filtros para que aquella
excesiva informacin sea til.
El display es rgido, pero no es definitivo y se tomarn en cuenta el feedback de
usuarios para generar una mejor interfaz.


Feedback
Fortalezas
El feedback es mesurado, se presenta en que parte de nuestra aplicacin estamos con
una pequea pestaa marcada en el men.
Tambin se presenta feedback al cambiar el smbolo del puntero de una flecha a una
mano para objetos clickeables, este cursor es siempre visible en pantalla.
En general, la mayor parte de feedback est presente porque se puede ver
inmediatamente el resultado de una accin.
Considerando que ninguna accin es catastrfica no se presentan advertencias antes
de realizarlas, ya que, podran aburrir al usuario por presentarlas muchas veces.
Deblidades
No se consideran acciones que dependan de apretar alguna tecla en particular, por lo
que, no hay feedback al apretar cualquier tecla porque probablemente no pasar nada,
a menos que sea parte de las acciones del navegador.
Tampoco se consideraron sonidos cuando se realicen acciones, ya que, no son para
nada comunes en redes sociales y podran ser molestos para el usuario.
Control
Hay 3 acciones principales y estas se pueden realizar en cualquier momento:
1. Actualizar su estado
2. Mostrar nuevas actualizaciones
3. Aplicar filtros
Fortalezas
Actualizar su estado: El usuario puede actualizar su estado en cualquier momento y en
las redes que quiera.
Mostrar nuevas actualizaciones: Si van apareciendo nuevas actualizaciones el usuario
debe decidir si quiere verlas o no, esto le da ms control que cargar inmediatamente las
nuevas actualizaciones haciendo que, por ejemplo, pueda perder alguna informacin
que est leyendo o mirando.
Aplicar filtros: El usuario puede filtrar las actualizaciones dependiendo del nivel de
inters que representan sus amigos (estrellas), las redes sociales que quiere ver, las
ltimas actualizaciones ocurridas o las ms comentadas, todos estos filtros se pueden
usar a la vez lo que provee al usuario una gran herramienta de control sobre la
informacin visualizada.
El resto de las acciones son las acciones especficas para contenido de una red social
en particular, estas acciones vienen desde aquellas redes y es lo que el usuario puede
hacer normalmente en esta red, por lo que, es el control usual al que est
acostumbrado.
Deblidades
Actualizar su estado: En esta versin preliminar an no se permite compartir contenido
multimedia, a travs de la actualizacin de estados, pero podra agregarse a futuro.
Aplicar filtros: Un filtro que no se encuentra disponible actualmente es filtrar las noticias
usando una o varias palabras claves, quizs en una versin posterior se podra incluir y
as mejorar los filtros disponibles, no se informa que esta opcin est disponible, pero
tampoco se puede prever o esperar que lo est.

Uso de Color
Fortalezas
El uso de color probablemente no es el ptimo, pero no hay elementos que no queden
visibles a simple vista por malas combinaciones de colores.
Se usa un fondo blanco para el stream y as asegurar una buena visibilidad y contraste
para letras y contenidos.
Se trata de ser consistentes con los colores, usando: blanco, plomo, rojizo y rojo para el
banner.
Tambin se utiliza color para mostrar que un elemento es clickeable, por ejemplo, en el
caso de Load more updates se cambia el color del fondo por uno ms oscuro, para
mostrarle al usuario que este elemento es clickeable.
Deblidades
Quizs seguir utilizando el color rojo para representar a Friendbinder y su barra no sea
la mejor opcin, pero nos parece que es una forma de diferenciar friendbinder del resto
de redes sociales, el nico color que estara quedando libre sera el verde, as que
habra que probar que le parece a la gente identificar FriendBinder con un color verde.
Consistencia
Fortalezas
Primero que todo, se presenta una lista con iconos y al lado un ticket que representan
en que redes sociales uno va a actualizar su estado, todos estos iconos representan
cada uno a una red social y tienen el mismo tamao, adems de estar acompaados de
su respectiva cajita de chequeo, el hecho que todos tengan el mismo tamao y estn
presentados de la misma forma, le dice al usuario que su funcin sera similar, pero
cada uno va a representar a su red social. El espacio entre ellos es razonable y siempre
el mismo.
Por otra parte, tenemos la lista de actualizaciones, todos los elementos se encuentran
delimitados por las mismas lneas, lo que representa que cada objeto encerrado entre
aquellas lneas es una actualizacin, para todos los nombres de usuario se usa el
mismo color que adems indica que es clickeable. Cada uno de estos elementos es
como una plantilla, donde a la izquierda superior se presenta la imagen de usuario, a su
derecha el nombre de usuario, abajo el texto de su actualizacin, al lado extremo
derecho iconos que representan a la red social donde pertenece la actualizacin y abajo
del contenido los botones de acciones de aquella red social. El hecho que se use una
plantilla da un gran valor para la consistencia, ya que, todos los elementos sern
bastante parecidos y cada tipo de dato tiene su posicin, por lo que, se hace simple
para el usuario reconocer esta maqueta.
Deblidades
Un problema de consistencia presente en nuestra vista, es que se presentan distintos
botones con distintas acciones dependiendo de la red social del contenido, entonces, un
usuario podra creer que cada elemento de nuestra maqueta tiene las mismas acciones.
Esta decisin se tom para reutilizar los conocimientos que los usuarios ya posean
sobre las redes sociales que usan y no perder ninguna funcionalidad. Si tomaramos la
interseccin de funciones de todas las redes sociales disponibles y as hacerlo ms
consistente, perderamos muchas funciones y el usuario perdera demasiado control.
Minimalidad de Conceptos
Fortalezas
Se trata de reutilizar todo el conocimiento de los usuarios en redes sociales, por lo que,
a pesar de que pueden estar muchos conceptos presentes en las vistas, estos son
conceptos ya conocidos por nuestros usuarios y probablemente dominados.
El nico concepto algo nuevo que se introduce es el hecho de poder filtrar amigos
dependiendo de la cantidad de estrellas, pero el resto es conocido por los usuarios.
Deblidades
Un problema que tenemos con respecto a la minimalidad de conceptos es que se
asume que los usuarios manejan bien las redes sociales en las que participan, pero
quizs al mezclar los conceptos de todas ellas el usuario se vea abrumado con tantas
funcionalidades disponibles, ac nuevamente se hace un trade-off y se prefiere violar un
poco la minimalidad de conceptos, asumiento que el usuario ya conoce la mayora de
las cosas presentadas y no se ver abrumado para darle mayor control y no perder
tantas funcionalidades que se podan hacer en la red social original.
Comandos Universales
Fortalezas
Se utilizan los comandos estndares de subir y bajar usando tanto teclado y mouse, lo
cual es una funcionalidad provista por el browser.
Se puede copiar y pegar texto, seleccionando el texto y luego presionando Ctrl-C para
copiar y Ctrl-V para pegar, o mediante un click con el botn derecho del mouse sobre el
texto seleccionado, esta funcionalidad la provee el browser.
Deblidades
Debido a que es una plataforma web no se puede explotar en gran medida el uso de
comandos universales propios, ya que el browser es el que provee la mayora de los
comandos.
Ver y apuntar
Fortalezas
Se utilizan pestaas para agrupar contenido comn, se hace buen uso de botones para
apoyar al usuario a realizar las acciones que provee el prototipo.
Se utilizan conos representativos para ayudar al usuario a reconocer y recordar sus
funcionalidades.
Apuntamiento
Fortalezas
Se pueden usar las teclas Shift y Control para seleccionar texto. El cursor cambia de
icono al pasar por sobre un elemento clickeable.
Obtener lo que se ve
Fortalezas
El uso de filtros por red social y por relevancia generan un resulta inmediatamente
visible en la pantalla, por lo que el usuario obtiene exactamente lo que est viendo al
aplicar el filtro.
A travs de las funcionalidades provistas por el browser es posible imprimir la interfaz y
obtener lo mismo que se est viendo.
Error
Fortalezas
Primero que todo ninguna accin del sistema es catastrfica.
Los filtros son fcilmente reversibles.
cualquier seleccin de red social donde se va actualizar el estado tambin es reversible
y deben ser escogidos antes de realizar la accin, por lo que, el usuario podr pensar
bien en cules redes lo har.
Deblidades
Un error que podra ocurrir es que el usuario presione sin querer el botn para mostrar
nuevas actualizaciones, lo que provocar que la informacin que est leyendo quede
mucho ms abajo y no hay manera de volver a su estado anterior, este es un problema
que no es tan simple de resolver y en general en las redes sociales, no hay solucin
para esto.
Tambin sin haber una confirmacin de la accin de actualizar el estado, el usuario
podra haber seleccionado una red en la cul no quera actualizar el estado y despus
ver que se actualiz el estado ah, pero bastar borrar esa actualizacin, lo cual, no es
complejo y el usuario debiese poder realizarlo.
Errores Comunes
Deblidades
Un error comn en este diseo es no usar las estrellas para filtrar las actualizaciones de
amigos, en general, se entiende poco para que podra servir y se debera mejorar su
entendimiento quizs explicando, al entrar por primera vez al sistema, para qu sirven
aquellas estrellas.
intentar acceder a un menu de configuracion de la cuenta a travs de hacer click en el
nombre de usuario que aparece en la esquina superior derecha, no es clickeable pero
por su parecido con los botones del men del lado, puede creerse que si.
Mensajes de Error
Deblidades
Al no haber errores catastrsticos que se puedan cometer no se muestran mensajes de
error.

Ventanas
Fortalezas
El campo para ingresar un nuevo estado se detecta fcilmente al ser un rectngulo de
color blanco con un borde gris que se encuentra al comienzo de la pantalla. El resto de
los componente estn bien distribuidos en la pantalla, con una ubicacin racional.
Controles
Fortalezas
Se hace uso de botones de colores, checkboxes, little arrows y text entry boxes. No fue
necesario el uso de ms controles debido a que con los controles existentes se le
permite al usuario realizar todas las actividades provistas por la plataforma.
Ingreso de Datos
Fortalezas
Con respecto al ingreso de datos, es minimal en esta vista, para lo nico que el usuario
debe ingresar datos es el texto con el cul le gustara actualizar su estado y despus
escoger en que redes desea actualizarlo, las redes escogidas se mantienen visible y as
no necesitar recordarlas antes de presionar el botn actualizar.
Agrupacin de Informacin
Fortalezas
Como se habl en la parte de anlisis de consistencia, la informacin es desplegada
usando una especie de maquetas que permiten desplegar elementos similares en
posiciones similares, por otra parte, los diversos filtros tambin me permiten de alguna
manera agrupar informacin, por ejemplo, si quiero agrupar toda la informacin de
facebook, basta seleccionar la pestaa de facebook en el stream y ver slo
informacin de facebook.
Visibilidad
Fortalezas
Se despliega una gran cantidad de informacin, tal como se hace en otras redes
sociales, pero se hace de manera consistente y clara. Se permiten utilizar filtros para
mostrar informacin ms relevante y hay facilidad de acceso para informacin adicional,
permitiendo hacer click sobre los previews para mostrar el contenido completo o ver
directamente el contenido directamente en la red social correspondiente.
Deblidades
La cantidad de informacin podra abrumar al principio, pero nuestro pblico objeto en
general est acostumbrada a ver tal cantidad de informacin. Quizs no es tan simple
ver el botn que permite ver el contenido en la red social correspondiente.
Mens
Fortalezas
Se utiliza un men, en la parte superior del sitio, donde cada trmino est acompaado
de un icono representativo, los botones cambian de estado al pasar el puntero sobre
ellos lo cual permite una fcil exploracin.
Deblidades
Por otra parte el men slo permite un nivel y no se expande al pasar el cursor sobre l,
para poder mostrar una lista de contenidos.
Presentacin de tems de Secuencia
Fortalezas
Se permite usar dos filtros para la presentacin de los estados: presentar los ltimos
estados o los ms comentados, ambos filtros extrados de lo comn de las redes
sociales. En este caso, la importancia para el usuario puede ser cualquiera de los dos
filtros dependiendo de la ocasin, en algunos momentos para l ser importante ver los
ltimos estados de sus amigos, pero en otros momentos, quizs no es tan importante lo
que est pasando actualmente y se quiere saber lo ms comentado.
Presentacin de Resultados
Fortalezas
Los resultados que se presentan son los que se obtiene una vez aplicados los diversos
filtros, la presentacin de estos resultados es automtica al seleccionar algn filtro y
adems son acumulables. Cada filtro puede ser revertido, de manera simple.
Iconos
Fortalezas
El prototipo tiene una cantidad adecuada de conos, todos representativos y conocidos
smbolos de redes sociales. Para el men de arriba tambin se tratan de usar iconos
representativos, pero adems estn acompaados por un label.
Deblidades
Un punto en contra es que quizs hay muchos iconos que se presentan y podran
repetirse bastante, pero estos iconos son bastante conocidos, por lo que, no requieren
que el usuario los interprete o trate de memorizarlos, ya que, ya debera conocerlos y es
muy probable que as sea.
Tiempo de Respuesta
Deblidades
Para este prototipo no se considera la posibilidad de que las acciones tomen mucho
tiempo, por lo que, para una versin posterior se deberan desplegar algunos elementos
que demuestren de que se estn calculando filtros o quizs se est demorando en
aplicar la actualizacin de estados.

Documentacin
Deblidades
Actualmente no hay documentacin, ni temas de ayuda para el diseo actual de la
aplicacin, pero para versiones posteriores se podra realizar un pequeo tour por el
stream mostrando el uso de filtros y en particular, el filtro de amigos con las estrellas,
adems de una muestra de actualizacin de estado.




Conclusin
En la gran cantidad de fortalezas detectadas se puede apreciar que hubo bastante trabajo en la
mejora de la interfaz original de Friendbinder, cumpliendo con muchos ms guidelines de
interfaces que en esa versin, donde de pasada podemos notar la poca preocupacin que hubo
es aquella versin por generar una buena interfaz y el total desconocimiento de las guidelines
de interfaces de sus creadores.
El hecho de que las fortalezas son muchas ms que las debilidades sirve para identificar que
se tiene un buen estado en el avance de la calidad de la interfaz mirando a este como un
desarrollo incremental de mejora.
Por otro lado, dada la an gran cantidad de debilidades detectadas en la interfaz analizada
podemos decir que queda bastante por trabajar para llegar al ptimo de ella, por lo que se
necesitan ms ciclos de modificacin y realizacin de pruebas de usabilidad.
Tambin es necesario notar que muchas de las desventajas mencionadas son producto de un
trade off con alguna otra fortalezas del sitio, en particular el hecho de haber diseado la interfaz
para que sea ptima para los usuarios habituales de redes sociales introdujo muchos casos de
estos.