Universidad Autónoma de Ciudad Juárez

Instituto de Ingeniería y Tecnología

Ingeniería en Sistemas Computacionales

Reporte

Ricardo Meléndez Gutiérrez

Matrícula: 169936
Carlos Yair Camacho Guillén
Matrícula: 169863

Interacción Humano Computadora

Proyecto
Mayo del 2018
Tipo de productos que va a vender plataforma en la que debe estar la
aplicación funcionando:

Libros.

Objetivo:

Hacer una biblioteca en línea, donde los usuarios puedan rentar o adquirir sus libros de
entretenimiento (no académico), de acuerdo a sus gustos o preferencias.

Tipo y edad de usuarios que espera:

Esperamos lograr tener un público muy variado, desde niños (6-12 años), como
adolescentes y jóvenes (13-25años), hasta un público adulto.

Limitaciones Físicas:

Problemas en la vista.

Nivel de educación:

Para usar la plataforma solamente se necesita saber leer, conocimiento básico de

computación (no es necesario un nivel educativo especifico).

Uso de que TIC para manejar la aplicación:

Plataforma en línea (PC) y, aplicación para celulares (iOS, Windows Phone, Android).
Motivación para realizar la compra:

Promociones, una plataforma atractiva y fácil de usar, además de tener un buen

contenido.

Nivel social del usuario y actitud que esperamos tenga:

Lo necesario para tener una computadora y acceso a internet.

Encuesta

1. ¿Cuál de estas opciones de tiempo para una renta de libro se te ajustaría

mejor?
a) 1 semana.
b) 2 semanas.
c) 1 mes.
d) 2 meses.
2. ¿Cuál de estas promociones consideras mejor?

a) En la compra de 2 libros el 3ro a mitad precio.

b) Acumular puntos en compras y rentas para una próxima compra.

3. ¿Usaría más una aplicación para celular o para PC?

 4. Considera necesario tener un establecimiento (1-5, sea 5 muy necesario)

5. ¿Cuál de estas opciones le parece mejor para un soporte a cliente?

a) Correo electrónico.
b) Teléfono.
c) Msj desde la misma aplicación.
d) Centro de atención.

6. ¿Cuál considera una mejor opción para hacer una búsqueda rápida de un
libro?
a) Autor y año.
b) Tipo libro.
c) Genero.

Resultados

En base a los resultados de la encuesta nos dimos cuenta que en la primera pregunta
le gustaba más la opción de 1 mes de renta, después en la segunda pregunta ningún
entrevistado escogió la opción (b), todos votaron por la opción (a), en la pregunta tres
la gente votaba en su mayoría por la opción del celular, en la cuarta pregunta casi la
mayoría de la gente estaba entre 3-4 (entre algo necesario y necesario), en la pregunta
cinco había una opinión dividida entre el teléfono y un msj de la misma aplicación y por
último en la pregunta seis la gente prefería más la opción de ordenar por año y autor
aunque también por el género votaron.

Tipo de navegación

Planteamos usar la navegación de tipo multinivel, debido a que esto es una página
web, fundamentado en el archivo de “patrones de navegación” ya que en este artículo
se menciona que las páginas web utilizan la navegación multinivel, ya que podremos
conectar las paginas principales solamente entre ellas y a las subpáginas entre ellas y
aparte a la página principal de la que vienen.

Color

Utilizaremos para el diseño de la página un contraste simultaneo, cambiando los

colores con una tonalidad más oscura a un contraste en el cual se utilicen diferentes
tonos más bajos del mismo color.

En este caso el color principal seleccionado es:

002F2E (color digital).

Y en base a este color, aplicando transparencia para que se vea ligeramente lo de

atrás.

También utilizaremos un fondo blanco para hacer más contraste.

Tipografía

Para los títulos utilizamos una letra muy grande (Fuente: Lucida Bright, Tamaño: 96)
para que el usuario vea claramente y no tenga problema alguno para saber dónde se
encuentra.

El color de fuente para los títulos es: EFECCA (Color digital).

Para subtítulos utilizamos otro tipo de letra y tamaño diferente, ya que si utilizamos el
mismo muy probablemente se confundan y no sabrán cual es título y cual es subtitulo
(Fuente: Calibri (Cuerpo), Tamaño: 40).

El color de fuente para los subtítulos es: EFECCA (Color digital para fondo en azul) y
negro (Para fondo en blanco).
Para el texto en general utilizamos letras no tan pequeñas, pero si mucho más pequeña
a comparación de los títulos y subtítulos (Fuente: Leelawadee UI Semilight, Tamaño:
32-40).

Botones

Para los botones utilizamos unos recuadros con esquinas circulares y de un tamaño
decente a la vista, estos botones nos permiten aceptar diferentes cosas en nuestra
página web, como podría ser: Aceptar el método de pago, crear una cuenta, darle
buscar en el buscador, botón de regreso de página, el botón para cerrar la pestaña de
inicio de sesión o método de pago.

Barra de búsqueda

Añadimos una barra de búsqueda, ya que para un catálogo de libros es muy necesaria
al momento de buscar algo por su nombre, así pues solucionando el problema de
buscar las cosas de página en página.
 Conclusión 1:
La interacción hombre maquina es el medio en el cual interactuamos con los softwares
mediante interfaces, este medio busca como fin que sea lo más sencillo posible para el
usuario, busca solucionar problemas de usabilidad para generar que cualquier persona
pueda usarlo, además de hacerlo adaptable a las diferentes caracterizas de acorde al
usuario.

En el proyecto, se buscó hacer una interfaz atendible que sea visualmente agradable
en al usuario, que sea fácil de entender y de usar, y que no se cargue con mucha
información al usuario. Nos dimos cuenta de que la interfaz debe ir enfocada en las
necesidades que el usuario requiera, tratar de conseguir aligerar la carga, conseguir
satisfacer o beneficiar una necesidad de los usuarios y reducir los posibles errores de
usabilidad para que más personas puedan usarla, abarcando a un gran número de
personas buscando un bien común con la mayoría de los usuarios.

Existen elementos de la interfaz que son muy importantes para que el sistema funcione
de una mejor manera y más clara. Uno de esto es el uso de colores adecuados para
enfocar a algo que se quiere trasmitir. Por ejemplo, en nuestra página de libros
buscamos que tuviera un tono formal y a la vez juvenil, pero también que trasmitiera
alegría, para eso una tipografía simple pero diferente y el color vivo ayudan a que la
interfaz tengo el tono o temática que estamos buscando. Además, los iconos, las
representaciones, los textos ayudan a que el usuario sepa con facilidad las tareas que
se pueden realizar, además ayuda a no saturar la información, con esto el usuario
además de estar en una interfaz agradable, se conseguirá que sea más sencilla que
aprender a usarla.

Lo importante es que los sistemas o interfaz se pueda aligerar las cargas de trabajo al
usuario, incluye mejorar un servicio una tarea, todo enfocado en el usuario y lo que se
desea trasmitir a este, si una interfaz es difícil de usar para un grupo de personas, no
hay una buena interacción hombre maquina en cambio si el usuario le es fácil usarla,
entendible, le trasmite acerca del tema que abunda se puede decir que hay una buena
interacción hombre máquina.
 Conclusión 2:
Es realmente necesario intentar llevarnos bien con las computadoras, tener un tipo de
comunicación para poder estar en contacto con estas, para poder llevar a cabo esto es
necesario tener un poco de confort al momento de utilizar algún software o hardware,
para esto se utiliza la interacción humano computadora (IHC).

A lo largo de este proyecto nos dimos cuenta que el hacer un programa agradable no
es del todo fácil, de hecho, es bastante difícil tener a los usuarios contentos, al
momento de estar haciendo la página web agradable para el usuario nos surgían dudas
y cambiábamos casi totalmente la página, ya que nosotros mismos decíamos “esto no
es agradable para la vista” o “esto es demasiada información para una sola parte”, pero
a pesar de eso, a mi parecer, tenemos una página web de una biblioteca online buena
y agradable para el usuario.

En este proyecto siempre se tuvo como objetivo que sea juvenil, ya que los colores que
decidimos utilizar causan esa sensación, la tipografía es una tipografía formal pero con
un tono un tanto diferente para que no parezca aburrido de solo verlo, utilizamos
tamaños diferentes para que el usuario en todo momento tenga esa sensación de
saber done y que está haciendo, el tener unos textos no tan largos y de buen tamaño
sirven para que el usuario no se sienta con esa carga de tener que leer mucho para
poder ver algún libro en específico.

Cada uno de los softwares que utilizamos están diseñados diferentes para beneficio del
usuario, pero si algo tienen en común es que la mayoría están basados en las reglas
de oro para el diseño centrado en el usuario (DCU), ya que esto es indispensable para
la creación de dichos software, sin este diseño no “pegaría” ningún software ya que
esto es con fin de que el usuario se sienta cómodo y por lo tanto le guste el software.

En base a esta clase pudimos concretar nuestro proyecto con una buena interfaz, esto
se pudo lograr tanto como por la maestra, como por los libros que se nos fueron
entregados en pdf para poder tener una base de cómo crear interfaces para los
usuarios.
 Bibliografía
Diseño de interfaz de usuario:
https://cvdiv.uacj.mx/cvdiv/pluginfile.php/153912/mod_resour
ce/content/1/disenodelainterfazdeusuario.pdf

Patrones de navegación:
https://cvdiv.uacj.mx/cvdiv/pluginfile.php/156485/mod_resour
ce/content/2/Unidad_6.pdf

Evaluación Heurística:
https://cvdiv.uacj.mx/cvdiv/pluginfile.php/156494/mod_resour
ce/content/4/Clase9-IHCII2012-EvaluacionesHeuristicas_2.pdf

Teoría del color:

https://cvdiv.uacj.mx/cvdiv/pluginfile.php/155739/mod_resour
ce/content/1/Clase6-IHCII2012-Color.pdf