Calificacion: *78/100

Pontificia Universidad Católica Madre y Maestra

Nombre(s):

Oliver J. Pérez R.

José Ml. Martínez G.

Saul E. Feliciano A.

Matrícula(s):

2015 – 0189

2015 – 0378

2016 – 1534

Asignatura​:

Interacción Humano Computador

Profesor:

Máximo E. Pérez M.

Tema:

Parcial I: Prototipado y Mejoras a la Experiencia del Usuario

Entregado en:

09/03/2020
Santiago, República Dominicana.
 1. Análisis detallado interfaz e interacciones.
1.1. Objetivo general (meta) aplicación.
El objetivo general de la aplicación es de que los autores se comuniquen con su audiencia
mediante sus creaciones escritas, las cuales publicarán en su blog, que serán parte de
nuestro servicio, que servirá como huésped de los diferentes blogs creados.
1.2. Perfil de persona / usuarios. Cuales deseos o gustos pudisen presentar personas
La persona que utilizará esto es una persona con
queconocimiento
escriben, porsuficiente
ejemplo,sobre tecnologíapara ayudar
mecanismos
a la concentracion, facilidades
para tomas la decisión de publicar su contenido escrito a una audiencia de un sitiode contador
web. de
palabras, tiempo aproximado de lectura,... (por
Dicha persona se preocupa, tanto por el contenido escrito, como
mencionar por aspectos
posiblea la apariencia
queenimplican
la cual el uso de
aparece su contenido en el blog. la aplicacion para un escritor) ? .... El asunto es llegar
1.3. Descripción de objetivos dea 2concer de los módulos
hasta más de
cierto nivel importantes
profundidad y el o los
usados. Incluir capturas de pantallas de dichos módulos describiendoaplicacion
perfiles de personas a que va dirigida la
porque al fin y al cabo estos son los que la van a
los elementos de interfaz que lo componen.
usar.
1. El primer módulo relevante es la pantalla principal, donde se ven todos los artículos
de un autor, representados con tarjetas. Estas tarjetas tienen imágenes, título, los
primeros setenta (70) caracteres del cuerpo, y etiquetas. El hacerle click para
acceder a estas nos lleva un módulo para leer el artículo.

1
 2. El segundo módulo relevante es el de la redacción de los artículos.

1.4. Evaluación de interfaz e interacciones. Hacer análisis y crítica técnica

de la interfaz e interacciones de los módulos seleccionados.
Fundamentar cada análisis/crítica e incluirla de forma explícita. Para
cada parte del análisis incluir mejores alternativas a cada una de las
debilidades encontradas. Incluir capturas de pantallas que
complementan las descripciones verbales de ser necesario de forma
que comuniquen mejor lo que se quiere comunicar. Ser lo más detallado
posible en este análisis/crítica.

Este análisis se basará en las diez (10) reglas de heurística Nielsen. Nuestro acercamiento
consistirá en realizar el análisis identificando las reglas que se violan, y. seguido, sugerir las
mejoras.

Esta es una interfaz que se caracteriza por ser minimalista. La interfaz está para darle fácil
visibilidad al contenido de los artículos, con el título, parte del cuerpo y una imagen alusiva
al artículo. Sin embargo, existen varias violaciones a las reglas de heurística, de las cuales
podemos resaltar las siguientes:
● “Reconocer en lugar de recordar”: ​Para una persona que no esté familiarizada
con el lenguaje en el cual está el producto, o es, hasta cierto punto,
semianalfabeto/a, es difícil identificar la funcionalidad de los botones que se
encuentran en el navbar (barra de navegación). Para esto, ​recomendamos:
○ Mejorar la ​Iconografía; utilizar íconos relacionados al lado de e texto, o
utilizar íconos y que al pasar por encima de estos íconos se muestran en
texto a función.
● “Estética y diseño minimalista”: ​Existen muchos elementos que carecen de una
estructura visualmente agradable. Además, algunos elementos de la interfaz son
inconsistentes. En cuanto a la ​Visibilidad ​compete ​la aplicación tiene la apariencia

2
 de un documento de escritorio. No hay diferencia entre los colores y es difícil darse
cuenta dónde está cada elemento de la plantilla. Para esto, ​recomendamos:
○ Cambiar el esquema de colores de la barra de navegación, para que se
destaque y sea más fácil de visualizar.
○ Destacar las tarjetas que representan los

2. Mejore los módulos anteriores creando un prototipo que integre las

alternativas propuestas a las debilidades encontradas basado en buenas
prácticas de diseño de interfaz e interacciones tratadas en la asignatura. El
prototipo debe permitir comunicar de forma efectiva la interfaz y su
comportamiento mediante las diferentes interacciones. Haga una descripción
detallada de cada proceso de interacción. Indique los mecanismos de
entrada/salida y describa las principales tecnologías a utilizar. Incluya las
referencias utilizadas para el prototipado. Pruebe la interfaz e interacciones
propuesta haciendo simulaciones donde se puedan observar el
funcionamiento de las mismas. Grabe en vídeo las simulaciones y colóquelo
en una plataforma para ser compartido. Comente de ser necesario el video.

Las interacciones plasmadas en este boceto son las siguientes:

● Las cartas que muestran la información de las publicaciones poseen sombra
para crear un efecto visual de relieve, el cual separa la tarjeta del fondo de la
página. Esta sombra desaparece al ubicar el puntero del ratón sobre la carta,
haciendo un efecto botón, indicando la publicación a la que accedería el
usuario si presiona el botón izquierdo del ratón en ese momento.
● Los elementos de la barra de navegación poseen iconos que referencian la
función que este realiza, otorgando orientación a usuarios letrados, no
letrados y no conocedores del idioma.

Interfaz inicial:

3
 Mejor, pero .... si se supone que
el contenido es lo principal por
que las tarjetas toman tanta
preponderancia y espacio de la
Interfaz con las nuevas interacciones propuestas:
pantalla?

Enlace para la demostración de las interacciones propuestas:

https://drive.google.com/file/d/11Ymcx1pAuItqbMg0HQbZ-x6mEUDzz7Jl/view?usp=s
haring

4
 3. Haga un prototipo de baja fidelidad del módulo principal pensado para trabajar
en un ambiente/plataforma diferente al original. Haga una simulación del
funcionamiento del mismo y grabe en vídeo, similar al punto anterior.

El ambiente/plataforma que elegimos para hacer este prototipo de baja fidelidad fue el
ambiente móvil. Para este caso tomamos en cuenta todo lo analizado anteriormente pero,
una versión más compacta ya que los dispositivos móviles tienen una pantalla mucho más
pequeña. Nos fuimos un poco tradicional con el prototipo pero cumpliendo con una buena
interacción para el usuario. Los cambios sugeridos para la versión móvil fueron:
Buena elemento de
interaccion
● Utilizar un sidebar en vez de un navbar. Para este (facilita...
caso utilizamos un sidebar en vez
esa es la idea).
de un navbar por la falta de espacio que de los dispositivos móviles.
● Otra cosa es que los dispositivos móviles son más orientado a gestos, en donde
incluimos gestos como pulsar el post para ver los tags, pulsar el logo de la aplicación
para ir hacia arriba, entre otras cosas.

En siguiente enlace muestra un poco más lo que es la interacción de nuestra ventana

evaluada:​https://drive.google.com/file/d/1mvcUVpJKjW-qdO1iXwSEf5h7JO80IssO/view?usp
=sharing

5
 4. Implemente mejoras a nivel de un prototipo final semi-funcional
(software/aplicación).

Las mejoras, en un prototipo semifuncional, podemos observarlas en las siguientes capturas

de pantalla:

Como podemos observar, tomamos las observaciones realizadas en el análisis e hicimos

los siguientes cambios:

6
 ● Iconografía: ​Agregamos íconos a la barra de navegación, para que le sea más fácil
al usuario realizar la asociación con la funcionalidad de cada botón.
● Cambio de color de la barra de navegación: ​La barra de navegación, al igual que
otros elementos, no se destacaba del fondo. Por esto cambiamos el color de la
misma para que se entienda que es un elemento distinto y se puedan visualizar
mejor las opciones de navegación.
● Resaltado de las cartas de los artículos: ​Las cartas de los artículos, a pesar de
tener perímetro definido, y elementos distintivos, como una imagen general, un título,
el contenido del texto, entre otros, las cartas comparten el color del fondo de la
aplicación, debido a la sensación de una “hoja de papel” que se le quiere dar al
tema. Por esto decidimos agregar una sombra para destacar ligeramente las cartas y
se note que son elementos diferentes.
Los cambios se limitaron a aspectos
5. Conclusiones-reflexión general del trabajo​. visuales que aunque pudiesen mejorar
por ejemplo la visualizacion, lectura y
comprension los considero de bajo
Las interacciones son una parte fundamental de cualquierimpactoaplicación.
y muyLo limitados.
que nosotros, Si ha esto, por
como usuarios técnicos o “super usuarios” ya damos por sentado debido
ejemplo se alenuestro
hubise ejercicio
podido agregar
académico y profesional a nivel de interacción, son losotras formas
detalles que,dealvisualizar
mejorar las la
publicaciones. ademas de la
experiencia del usuario, retienen a las personas dentro de los productos, aún siendo estos
implementada, como listado columnar
detalles extremadamente pequeños y que, por lo general, no inciden directamente
con capacidad dentro de
de ordenar por diferenrtes
la funcionalidad del producto final. items o el agregar capacidades de
hipertexto, o de diagramacion (otro
ejemplo) para composicion de una
Es por esto que, para demostrar la importancia de los pequeños detalles a nivel de
entrada haciendo mas rico la forma
interacción, tomamos de referencia una aplicación web que comosirve
secomo un servicio
presentan de
las entradas y los
“Blog”: un espacio donde autores y lectores comparten publicaciones
elementosescritas. A pesar
que pudisen de como
incluir
que la interacción, en primera instancia pueda ser mínima,mecanismos de interaccion
debido a la funcionalidad unpara ayudar
al alineamiento de los elementos del
tanto básica de la aplicación, pudimos encontrar detalles pequeños, rigiéndose por las ​10
contenido, inclusion de imagenes,
reglas de la heurística de Nielsen​, que no tomaron una videos,
cantidado enorme
como sedeorganiza
tiempo yel texto y
trabajo para implementar, pero cambiaban la experiencia delpresente
usuario al hacer más
alrededor de fácil la
las imagenes; o
permitir autocorrecion o
interacción con la información y las funcionalidades de nuestro servicio, haciéndolo así más integracion de
diccionarios de terminos paa os lectores,
llamativo a los clientes.
por mencionar algunos casos, entonces
si estuviesemos hablando de una mejora
Por esto, entonces, podemos afirmar que nos llevamos comosignificativa.
aprendizaje que los pequeños
detalles que facilitan y mejoran la experiencia de usuario son aportes que verdaderamente
Para el caso de la version para elefonos
le pueden agregar un porciento mayor de valor a nuestro trabajo, sin invertir tanto tiempo o
moviles en esencia el cambio que se
esfuerzo como para que no valga la pena. Además, pudimos hizo apreciar
fue cómo, a pesar
un cambio dede que
plantilla. El diseno
los ambientes web son “responsivos” no siempre se adaptanpropiobien a es
otros ambientes,
minimo como es una
y en esencia
adecuacion
el ambiente móvil, y en este caso, como el espacio en pantalla basica
es mucho másdevalioso,
un formato Web a
uno de movil onde por ejemplo no se
tuvimos que hacer cambios considerables para el prototipo deevidencia
esta versión.
algunas de las ventajas que
pudiese presentar esta version. En
general muy limitado.