Universidad Autónoma de Ciudad Juárez

Instituto de Ingeniería y Tecnología

Ingeniería en Sistemas Computacionales

Proyecto: RockTech

Carlos Andrés Ochoa Barrera

Matrícula: 169851
Roberto Díaz Rocha
Matrícula: 169968

Interacción humano-computadora
"Por una vida científica, por una ciencia vital"
Proyecto
Mayo de 2018
 Contenido
Introducción ........................................................................................................................................ 2
RockTech(Dreamweaver) ............................................................................................................... 3
Encuesta ............................................................................................................................................ 4
Resultado de la Encuesta ............................................................................................................... 5
Diseño y colores de páginas (justificación) .................................................................................. 6
Boceto Power Point............................................................................................................................. 7
Página en un domino imágenes .......................................................................................................... 7
Estándares analizados .................................................................................................................. 12
Estándares ISO............................................................................................................................... 14
Conclusión Roberto Díaz Rocha .................................................................................................. 15
Conclusión Carlos Andrés Ochoa Barrera ................................................................................. 16
Bibliografía ........................................................................................................................................ 17

1
Introducción
En este Proyecto nos enfocamos en la materia de interacción humano-computadora
en aplicar los conocimientos aprendidos durante todo el semestre para hacer en
esta fase final un sitio web con la profesionalidad en base a el diseño centrado en
el usuario y a las normas ISO para que el sitio sea de primer nivel.
Durante estas tres semanas tuvimos la idea de cubrir una necesidad en
nuestra sociedad de CU, así que definimos que nuestro sitio sería de accesorios
para celulares y laptops ya que estamos en una época donde la tecnología nos llega
a dominar durante todo el día, es decir, siempre utilizamos un aparato tecnológico
en todo momento ya sea para facilitarnos una tarea o para distraernos un rato.
El nombre de RockTech lo escogimos porque queremos darles una idea a
nuestros usuarios de que nuestros productos serán duraderos y confiables,
representando a una roca con esa característica y la otra parte del nombre seria
Tech, representando tecnología y así juntando a los dos obtenemos la idea de
productos tecnológicos duraderos y confiables para nuestros consumidores o
usuarios.
Nuestro lema ¨RockTech, donde si nos importas¨ queremos que los clientes
sean considerados y ayudándoles en todo momento ya que en muchas empresas
o páginas de nuestro país solo les interesa vender, pero no consideran al cliente
como tal, si aparece un problema con el producto muchas de las veces no existen
apoyo por parte de la empresa y menos regresan el costo del producto, en pocas
palabras, no te ayudan a solucionar si se encuentra un problema en algún producto.

2
RockTech(Dreamweaver)
 Tipos de productos que se van a vender.
Accesorios para celulares, laptops y memorias flash.
 Plataforma.
Página web. (https://rock-tech.000webhostapp.com/
 Objetivo.
Dar a los usuarios productos de celular y laptops que sean capaces de
cubrir sus necesidades de manera rápida y segura.
 Tipo de usuario.
Cualquiera edad en la cual sea capaz de entrar al sitio web y entenderlo
 Limitaciones físicas.
No se proporciona ninguna.
 Nivel de educación.
Cualquiera.
 Uso de TIC para manejar la aplicación.
Cualquier dispositivo tecnológico con acceso a internet.
 Motivación para realizar la compra.
Comprar un producto que suplirá las necesidades que tenga, además de
estar seguro y contar con la confianza de haber adquirido un producto de
calidad.
 Nivel social del usuario.
Medio, ya que puede contar con la economía suficiente para adquirir los
productos.
 Actitud esperada en el usuario.
Confianza hacia nosotros y nuestra empresa, así como a los productos,
satisfacción y seguridad al momento de adquirirlos.

3
Encuesta
1. ¿Qué accesorios traes para tu celular o laptop a CU?

✓ ✓ ✓Mouse ✓ ✓Cargador Vidrio templado ✓ ✓ ✓Protector

✓ ✓Audífonos ✓Memoria Flash Teclado MousePad ✓Adaptadores

2. ¿Recogerías el producto o que te lo lleven?

✓ ✓Recoger el Producto
✓ ✓ ✓Llevártelo por un costo adicional
3. ¿Qué opciones de pago prefieres?

✓ ✓ ✓Tarjeta de Crédito ✓Tarjeta de Débito ✓ ✓ ✓Pago en Oxxo ✓PayPal

✓ ✓ ✓Efectivo ✓ ✓Paysafecard ✓Depósito Bancario

4. ¿Te gustaría probar los productos del catálogo?

-Si
-Si
-Si
5. ¿Quisieras tener soporte técnico en línea?

-Si

-Si

-No

6. ¿Compartirías tus reseñas de los productos que adquiriste de otros

usuarios en la página?
-No
-Si
-Si

4
Resultado de la Encuesta
Los resultados obtenidos dan a conocer los productos que tendrían buena compra
por parte de los usuarios, además de que los usuarios están dispuestos a probar
los productos antes de adquirirlos

PREGUNTA 1.
3.5
3
2.5
2
1.5
1
0.5
0
Mouse Cargador Audifonos Protector USB Adaptador

PREGUNTA 2

3
2

RECOGER PRODUCTO LLEVARTE EL PRODUCTO

Pregunta 3
3.5
3
2.5
2
1.5
1
0.5
0
Crédito Débito Oxxo Paypal Efectivo Paysafecard Déposito
Bancario

5
Diseño y colores de páginas (justificación)
 Queremos hacer una página con una base de encabezado, pie de página,
cuerpo y menú desplegable.
 Utilizamos Dorado #FFD700 ya que representa un tipo de sensación como
fascinación y emoción para el usuario
 Utilizamos Negro RGB 131313 para proporcionar elegancia a la pagina que
solo hay productos premium.
 Utilizamos RGB 166 166 166 166 ya que representa estabilidad a los
usuarios.
 En el pie de página colocaremos la información de contacto con un
difuminado de tono claro a obscuro gris.
 La estructura de nuestra página es para no sobrecargar al usuario con
información.
 El fondo es Lavanda #E6E6FA para representar pureza para el usuario.
 El menú se pondrá para cuando las personas entren e identifiquen
inmediatamente el propósito de la pagina o lo que se tiene para ofrecer.
 Los artículos destacados al usuario la gran cantidad de productos que tiene
mas demanda en la página.
 Los tickets para probar productos a los usuarios y se den cuenta de que
compraran un producto de calidad.
 El tipo de letra; al principio habíamos pensado en un formato básico como
lo es el arial 12, pero como los colores que colocamos en la pagina
representan un poco de elegancia, cambiamos el arial por Times New
Roman, aunque no hay mucha diferencia en estas dos fuentes, si ayuda a
que se vea un poco mejor. En los títulos pusimos como defecto la fuente
Times New Roman, pero con un tamaño de encabezado 1 que sería el
tamaño 32 aproximadamente, y los subtítulos colocamos el Times New
Roman tamaño 24 que es lo mismo que encabezado 3.
 El pie de página se colocaron los medios por los cuales se puede contactar
a la empresa de RockTech, por si necesitan un apoyo adicional dentro del
sitio Web color de fondo Negro #0000 y Color de Letra #FFD700 (oro)

6
Boceto Power Point.

Página en un domino imágenes https://mex.000webhost.com/

https://rock-tech.000webhostapp.com/
La página realizada en Dreamweaver se subió a un dominio gratuito mediante un
software externo llamado FileZilla que te facilita la operación de subir todos los
documentos de HTML a un sitio Web.
En la página principal, colocamos un subtítulo movible, para que la pagina
no fuera tan estática.
El sitio Web de RockTech cuenta con 9 paginas para poder navegar por
todo el sitio, el tipo de navegación es de lo mas sencillo y te puedes dirigir a donde
tu quieras desde donde quieras.

7
8
9
10
11
Estándares analizados
H1: Diálogo natural y simple.
Tiene un diálogo simple de entender para los usuarios, ideas claras, la manera
hablada quizás no, es decir, el profesionalismo implicado.
-1
-2
-1
H2: Hablar el lenguaje del usuario
Siempre y cuando sea a nivel nacional; sí.
-1
-0
-0
H3: Minimizar carga cognitiva
La minimiza totalmente.
-0
-0
-1
H4: Consistencia
La página tiene ideas claras.
-0
-1
-1
H5: FeedBack
Carece de retroalimentación, aunque en algunos casos se puede interpretar como
que sí la hay.
-0
-0
-1
H6: Proveer claramente las salidas
Las hay, una, específicamente y se encuentra al inicio de la pantalla.
-0
-0
-0
H7: Proveer Shortcuts
Es lo principal que se alcanza a pareciar.
-1

12
-2
-0
H8: Mensaje de error descriptivos
No presenta ningún mensaje de error en ninguna situación.
-1
-0
-0
H9: Prevención de errores
No tomamos en cuenta esta idea, pero tampoco tiene estructura deficiente como
para tomarla en cuenta.
-1
-1
-0
H10: Asistencia al usuario
Aún no tiene un soporte de ayuda para el usuario, pronto será implementada
aunque, lo que sí tiene es un foro o un sitio donde los comentarios nos llegan de
manera personal para ser evaluados e ir mejorando.
-0
-1
-1

13
Estándares ISO

ISO/IEC9126
Evaluación de productos software – características de calidad y directrices para su
uso.
Creemos que este estándar se encuentra en nuestra página web, ya que
utilizamos un sistema de crítica por parte de los usuarios de la usabilidad de la
página, para así detectar nuestros problemas de usabilidad y que los usuarios se
sientan cómodos en utilizar nuestro sitio web para así satisfacer sus necesidades.

ISO 9241.

En nuestro sitio web existe una ergonomía cognitiva y visual, ya que no existe carga
visual y es simple de manejar, además de los colores utilizados son de los que se
utilizan comúnmente en un sitio web, proporcionando cierta imagen que se siente
profesional para los usuarios, aunque con un software muy viejo como lo él
Dreamweaver cs3.

ISO/IEC 11581.

Tenemos iconos que se usan comúnmente en el comercio para los usuarios que ya
saben como manipular estos iconos e imágenes, por eso los incluimos para que el
usuario llegue a ser fácil para ellos moverse por las páginas de nuestro sitio web,
para hacerlos sentir que tienen el control del sitio.

ISO 13407

Estamos creando un sistema interactivo de un sitio para el usuario y facilitar la

usabilidad para que se sienta cómodo y llegue a utilizar más de una vez nuestro
sitio para comprar los accesorios y cumplir sus necesidades con una página
interactiva y fácil de usar.

14
Conclusión Roberto Díaz Rocha
Durante este proyecto, enfrentamos varios obstáculos con el software que
utilizamos que era Dreamweaver CS3, ya que aunque sabemos HTML yo y mi
compañero, existió varios momentos donde no recordábamos como colocar o
insertar algo y teníamos que volver con ver tutoriales de como hacerlo, para mi en
lo personal este software puede resultarte muy sencillo de utilizar para realizar
paginas simples, pero si quieres crear un sitio web lo mas profesional que se pueda,
en ese momento tienes que saber que si tienes un conocimiento básico de HTML,
vas a tardarte mucho en realizar el sitio además de que necesitaras en algunas
ocasionas ayuda de alguien que tenga un conocimiento más avanzado en HTML,
es decir, apoyarte con videos.
Al momento de hacer la encuesta para saber de qué haríamos nuestro sitio
web, lo llegamos a determinar por nuestras necesidades con la tecnología que
llevamos todos los días a CU, ya que la mayoría de los estudiantes llevan un celular
inteligente y laptops para trabajar en esos ratos libres, pero muchas veces se nos
llegan a olvidar los accesorios indispensables para seguir utilizando este tipo a
aparatos tecnológicos durante todo el tiempo que tu quieras.
Por eso, decidimos que nuestra pagina sería de accesorios para celulares y
laptops pero para saber que productos tomar en cuenta, utilizamos la encuesta y
allí determinamos unos 6-12 productos para empezar nuestra pagina porque
colocar e intentar que se acomoden las imágenes para los productos si te llega a
consumir gran parte de tu tiempo, durante todo este tiempo determinamos que
llevaría un menú desplegable para cambiar de pagina a otra de una manera fácil y
común que ya usan otras páginas, pero además de eso decidimos que el menú
necesitaría se desplegable para darle elegancia al sitio.
Por último, el utilizar los conocimientos teóricos que hemos estado viendo
durante todo el semestre para ya ahora aplicarlos en práctica fue una satisfacción
de aplicar todo pero ahora en un sitio web para usuarios y que puedan evaluar
mediante la heurística nuestro sitio, con sus opiniones constructivas seguir
mejorando las paginas y crear un sitio que vaya acercándose a la excelencia en
cuanto a la usabilidad y la ergonomía para el usuario o consumidor.

15
Conclusión Carlos Andrés Ochoa Barrera
Tras haber realizado el proyecto de la página web he descubierto nuevos métodos
o protocolos que deben seguirse para poder realizar una página web, o bien, un
producto que está dedicado para usuarios dentro del internet.
La parte más importante en el momento de crear una página web es tomar
muy en cuenta al cliente, su manera de pensar, lo que quiere o busca y si se lograrán
satisfacer sus necesidades en cuanto a la tecnología. Por esto mismo, al cliente se
le debe de ar una prioridad, la cual se realizará por mediante un método establecido
por Nielsen, así, podremos eliminar aspectos que lleguen a fatigar al cliente, tales
como reducir la carga mental del usuario y así evitar que se fatigue. Los colores, a
la hora de su elección es un papel si no el más importante, pues estos, tienen un
efecto sicológico en el usuario, por ende, el exceso de estos mismos o la mala
combinación de ellos puede desatar un mal gusto por la página.
Básicamente, para haber sido la primera página hecha tomando en cuenta
los criterios de evaluación por Nielsen, desde la opinión de uno de los creadores,
creo que la página presenta una estructura clara y sencilla que, puede ser entendida
para las personas a la cual va dirigida, claro, no hay que descartar que tiene muchas
mejoras que pueden realizarse, pero sin duda no presenta algún problema grande,
o quizás la falta de un asistente técnico en línea.
Creo que, el aspecto más importante para la creación de una página web es
la información y la estructura con la que esta va a contar pues, las personas que
entren a las páginas web se sentirán familiarizadas con la estructura que está
presente. Es importante para el cliente que un sitio web sea claro y conciso, que no
carezca de información, pero tampoco que la exceda, vaya, que las ideas que se le
deben de transmitir sean claras, así, el usuario no podrá tener un conflicto. Por
último, los colores con los que se juega, es recomendable casi en su totalidad,
personalmente utilizar colores “apagados” o que tiendan a ese efecto, pues son los
que menos fatiga causarán, pues colores vivos como amarillo, rojo, etc. deben ser
contrastados con otros colores y así, no afectar al cliente y no sienta algo que no
debería al estar dentro de las páginas web, deben tener un juego de colores que les
transmita a lo que van, que vaya con la temática de cada sitio.

16
Bibliografía
Balmori, A. y. (06 de 05 de 2018). La Cognición. Obtenido de CognicionCampus:
https://cvdiv.uacj.mx/cvdiv/pluginfile.php/152783/mod_resource/content/1/CognicionCA
MPUS.pdf

Martinez, A. B. (4 de 09 de 2010). Estandarés y Guías. Obtenido de Universidad de Oviedo:

https://cvdiv.uacj.mx/cvdiv/pluginfile.php/156781/mod_resource/content/2/09Estand.do
c

Nielsen. (12 de 03 de 2012). Evaluaciones Heuristicas. Obtenido de Métodos de Inspeccion:

https://cvdiv.uacj.mx/cvdiv/pluginfile.php/156494/mod_resource/content/4/Clase9-
IHCII2012-EvaluacionesHeuristicas_2.pdf

Software, C. d. (3 de Noviembre de 2012). Teoria del color. Obtenido de Teoria del color:
https://cvdiv.uacj.mx/cvdiv/pluginfile.php/155739/mod_resource/content/1/Clase6-
IHCII2012-Color.pdf

17