HEU

A R Q U I T E C T U R A 2 7 D E

D E L A O C T U B R E

I N F O R M A C I Ó N 2 0 1 7

RIST
aluación

ICA
Ev

S T E F A N I A G R I M A L D O M O N T E N E G R O
 EVA
LUA
CIÓN
Heurísticas de Nielsen
Stefania Grimaldo Montenegro
Octubre 27 de 2017

INTRODUCCIÓN
Esta evaluación tiene el fin de encontrar y resaltar aspectos esenciales de
usabilidad en la página web de interacpedia. En este caso la evaluación busca
identificar los 10 principios de usabilidad aplicados a la página para descubrir
problemas de usabilidad que dificultan la interacción de los usuarios con el
sistema y así, poder tenerlos en cuenta para mejorar en este y otros sistemas. 

METODO

Se evaluaron los 10 principios de usabilidad de Nielsen aplicados a eventos

particulares que se realizan constantemente en a página web, esto
respondiendo a las siguientes preguntas:

¿El principio es aplicado?¿Cómo?

¿El principio es violado?¿Cómo?
¿Cómo esta regla puede mejorar la usabilidad, la utilidad y el atractivo?
 RESULTADOS
PRINCIPIOS DE USABILIDAD INTERACPEDIA

EVALUACIÓN
Los principios de usabilidad de Jakob Nielsen
fueron aplicados a la página en los proceso de
inicio de sesión, cambio de una actividad a otra,
subir un archivo y agregar contenido a la página de
forma general.

VISIBILIDAD DEL
ESTADO DEL
SISTEMA
En los pasos básicos de la página, como pasar de
una opción a otra, el sistema muestra
retroalimentación al usuario para que espere, sin Gif Cargando
embargo, esto no se presenta en toda la página.

En los cambios de página aparece un gif que

simboliza que el sistema esta cargando la
información.
Cuando el usuario sube un archivo no hay
feedback que le asegure que el archivo fue
subido exitosamente.
En los campos de texto que ellos proponen no
hay botones para aceptar y tampoco
retroalimentación del éxito de la operación.
¿Cómo puede esta regla mejorar 

la usabilidad, utilidad y
atractivo?

Al mejorar el feedback que tiene el usuario se previene que

abandone la página creyendo que no carga o esta dañada.

Al tratarse de una página en la que su mayoría son

estudiantes, poder ver el estado del sistema permite al
estudiante estar seguro de que entrego sus trabajos.

El usuario no abandonará el proceso, que finalmente podría

generar que cuente su experiencia a otros posibles usuarios
que tendrían predisposición a usar la página, señalandola
como "mala" sin haberla usado.
SISTEMA &
REALIDAD

El uso de iconografía de la página es básico y usa

símbolos comúnmente aceptados para referirse a
las cosas, por lo cual el principio es usado.

En general, los símbolos se conservan en todas

las pantallas de la misma forma, entre ellos
botones e iconos representativos.
Los iconos utilizados son una campana para
representar notificaciones y un sobre para
representar una bandeja de entrada de
mensajes.
El chat es un botón flotante que esta presente
en todo momento y se presenta como un globo
de texto, conservando efectivamente el
significado de chat ya establecido socialmente.
No se propone iconografía nueva.
¿Cómo puede esta regla mejorar 

la usabilidad, utilidad y
atractivo?

El general, la página conserva la relación con la realidad de

su página a través de su iconografía, lo cual hace que las
personas sepan claramente antes de hundir el botón cual es
la página que sigue después de generar la acción.

El uso de simbología y formas estilizadas en sus imágenes

hace que sea clara la idea que quieren expresar en cada
botón, generando que el usuario no se sienta perdido.

Conservar la realidad en la página web hace que el usuario

sienta que están hablando el mismo idioma y genere
finalmente un sentimiento de acogida.
CONTROL &
LIBERTAD
La página ofrece la libertad suficiente para interactuar
por los distintos niveles de actividad de la página,
incluyendo a los usuarios normales y los avanzados,
controlando que se modifiquen cosas.

El usuario puede explorar libremente la página sin

restricciones iniciales.
Cada etapa del proceso, conocidas como Conncet,
Fly, Dive, Land y Enjoy, permiten ser exploradas y
modificadas sin necesidad de ser completadas
completamente.
Se pueden ver los equipos formados por los
estudiantes, y restringe que se puedan modificar
aspectos de los grupos que no sean el del usuario, a
pesar de esto, le permite explorar el equipo, ver sus
integrantes y dejar comentarios sin modificar
aspectos internos.
¿Cómo puede esta regla mejorar 

la usabilidad, utilidad y
atractivo?

Restringir la interacción en algunos casos permite prevenir

errores y complicaciones como lo son borrar información de
otros equipos o modificar aspectos esenciales del
funcionamiento de un proyecto.

La libertad al momento de explorar hace que el usuario no se

frustre ante las restricciones que hay, debido a que si se
presentan demasiadas, el usuario se sentiría cohibido.

Permitir explorar la página sin muchas restricciones hace que

quieran conocer con que más cosas se pueden encontrar, sin
permitir modificaciones graves.
CONSISTENCIA
& ESTANDARES
La página conserva en todo momento el mismo
estilo gráfico generando uniformidad.

Los iconos usados son siempre rellenos y con

colores sólidos.
Los espacios en blanco, títulos, párrafos,
botones, entre otros conservan su estilo en cada
una de sus páginas.
Hay uniformidad en el uso de fuentes
tipográficas.
Los filtros de las imágenes conservan el mismo
estándar con gradientes y usando el icono de el
logo.
Un factor negativo es que la página usa dos
idiomas al mismo tiempo, Ingles y español.
¿Cómo puede esta regla mejorar 

la usabilidad, utilidad y
atractivo?
Usar dos idiomas al mismo tiempo puede generar problemas
para las personas que no saben alguno de los dos idiomas,
por lo cual, la uniformidad en este caso es muy importante.
Puede existir un modo en ingles y en español de la página,
pero deberían conservarse por separado.

El hecho de que la página conserve su estilo gráfico en todo

momento hace que el usuario no sienta que ha sido sacado
de la página forzadamente y sepa manejar la iconografía y
saber que hacer en cada momento.

Los botones conservar los colores y se muestran de un color

más oscuro cuando se pasa el mouse por encima, mostrando
al usuario que claramente es un botón.
PREVENCIÓN
DE ERRORES
La página no previene errores que pueden ser muy
graves debido a que se encuentran en partes
fundamentales del funcionamiento de la página.

Al inicia sesión el usuario puede escoger si

inicia con su correo o con redes sociales, sin
embargo, si el usuario se equivoca e intenta
retroceder, se genera un aviso rojo que indica
en ingles: "Whoop, looks like something went
wrong", sin embargo, el usuario no puede
recuperarse de esto y tiene que regresar el
inicio de nuevo.
El usuario no sabe si ya subió el video porque
no hay retroalimentación y tampoco se
convierte en un link, por tanto, puede o no
subir el video.
Un aspecto positivo es que no permite
modificar aspectos de otros equipos de
trabajo.
¿Cómo puede esta regla mejorar 

la usabilidad, utilidad y
atractivo?
Cuando el error se da al iniciar sesión de una forma tan grave
como la mencionada, el usuario puede desertar de su intento
de unirse a la página.

Prevenir y ayudar al usuario a salir del error de forma

victoriosa hace que el usuario no tenga que intentar las
mismas cosas varias veces.

Evitar modificaciones graves en el sistema por parte del

usuario genera una sensación de seguridad en los usuarios,
pensando que su información esta segura en la página y no
buscando otras opciones para guardar su información.
 RECONOCIMIENTO
- RECUERDO
La página conserva los iconos y su estilo gráfico, por lo que es más sencillo reconocer las cosas
dentro de la página.

Permite al usuario recordar su cuenta al

iniciar sesión.
Conserva su iconografia.
Es difícil para el usuario saber que hacer
en cada una de las etapas propuestas
por Interacpedia, debido a que la
explicación esta en un video y no en la
página en si.
Conserva el estilo gráfico haciendo que
sea fácil familiarizarse con la página y no
perderse.
FLEXIBILIDAD &
EFICIENCIA
El uso de shortcuts es escaso en la página, por lo cual, para acceder a cada una de las
secciones de interacpedia: Connect, Fly, Dive, Land y Enjoy; es necesario que el usuario
acceda directamente a "Empieza a Co-Crear" aunque esta debería ser la opción principal y
global de la página.

Acceder a un modulo es tardío, debido a que,

aunque es parte principal de las funciones de
interacpedia, no se encuentra en el landing
page, sino que, para acceder a estas hay que
primero acceder a "Empieza a Co-Crear".
La interfaz es limitante, debido a que no
permite que el usuario la personalize con
atajos, elementos recientes o más visitados.
Las interacciones se reducen a las opciones
que se derivan de otras, por tanto, para
entregar a un trabajo hay un profundidad de
más de 6 pasos.
 ESTETICA & DISEÑO
MINIMALISTA

La página conserva los iconos y su estilo gráfico, por lo que es más sencillo reconocer las cosas
dentro de la página.

Los iconos y contrastes permiten al usuario navegar si

perderse, encontrando espacios similares.
Los botones son iguales en todas las interfaces.
Cuanto el usuario deja el mouse sobre una imagen, en
algunos casos, se despliega un vector blanco con opacidad
que deja ver la información de la imagen.
RECUPERACIÓN
DEL ERROR

Es muy difícil recuperarse de los errores en

interacpedia, porque generalmente no los previene
efectivamente.

En la interfaz se ofrece la ayuda al usuario

explícitamente por medio de un botón con el
símbolo de interrogación.
No permite al usuario recuperarse
efectivamente del error cuando inicia sesión
mal, en este caso, el usuario debe presionar el
botón "Iniciar Sesión" Antes de que le
adviertan el error.
Algunos errores muestran "Whoops, Looks
like something went wrong", sin embargo, no
permite al usuario solucionarlo y tampoco le
indica cual fue el motivo que produjo el error.
AYUDA AL
USUARIO

La página ofrece ayuda por medio de animaciones para que la persona pueda familiarizarse
con el estilo y la iconografía que maneja interacpedia.

En la parte superior derecha de la pantalla hay

un símbolo de interrogación que permite al
usuario familiarizarse con la interfaz y conocer
los espacios y funciones que ofrece interacpedia.
Por medio de videos enseña al usuario en que
consiste cada etapa del proyecto, sin embargo,
es necesario ver el video para saber en que
consiste.