Parcial 2 IHM Juan Chacn CI 20.905.500 Roniel Escorcia CI 23.867.919 1.

- Elabore un patrn de diseo de interaccin, con todos sus componentes, que describa la interfaz de usuario correspondiente a escribir en un documento compartido. Esta tarea pertenece a un procesador de palabras colaborativo similar al procesador de Google Drive. (4,5 ptos) Nota: Use Java. La interfaz grfica realizada representa el patrn habitual que presentan los procesadores de textos, contiene todos los componentes grficos que permiten la interaccin sencilla con la aplicacin como los botones de alineado, tamao de texto, tipo de fuente entre otros, con las metforas comunes a cada una de estas acciones con descripcin textual de la accin que cumple y los respectivos mens desplegables donde encontramos muchas otras funcionalidades. rea de trabajo y herramientas

Men desplegable

2.- Buscar dos (2) interfaces (1 ADECUADA y 1 INADECUADA) que utilicen algn tipo de metfora y realizar un comentario crtico de la misma. Si la metfora es adecuada, se indicar el beneficio que su uso proporciona a la interfaz (es decir, cuan intuitiva es y explicar claramente). Si, por el contrario, la metfora resulta inadecuada, se indicar la causa y se propondr una posible solucin al problema (debe redisear la metfora). La interfaz debe ser de una pgina web e indicar claramente el URL. La respuesta la acompaar de imgenes de la interfaz donde se observe la metfora utilizada. NOTA: Revise la gua de estilo de GNOME (acceda al sitio web proporcionado en clases) para la interfaz inadecuada e indique que se est violando y qu debe considerar el diseador para lograr una interfaz adecuada. (2,5 ptos.).

Metfora adecuada: Pgina web seleccionada: Despegar, es un sitio web dedicado a una de las agencias de viajes ms populares en Latinoamrica. En ella se pueden conseguir vuelos, hoteles, alquileres de vehculos entre otros servicios de utilidad para viajeros, disponibles en varios pases Latinoamericanos. URL: www.despegar.com

Inicio de la pgina web:

La metfora a analizar se encuentra en el logo del sitio web, se puede observar un avin que va trazando una ruta, lo que describe que el transporte ya ha despegado y va en movimiento y otra imagen de la metfora es un timbre de hotel o campanilla de recepcin, el cual es utilizado en los hoteles para requerir los servicios de los empleados del hotel. En esta metfora, el usuario al ver el nombre de la pgina y estos dos elementos peculiarmente integrados en el logo del sitio, fcilmente puede interpretar que el contenido del mismo se enfoca en prestar servicios para viajes areos (aeropuertos), as como facilitar el servicio de hospedaje para viajeros en hoteles ubicados en la ciudad de su destino.

Logotipo del sitio Despegar.com

Metfora inadecuada:

Pgina web seleccionada: deviantART, un sitio web que aglutina a una comunidad internacional de artistas en la red, en el que cada usuario puede mostrar su arte y aprovechar las posibilidades de la red para someterlo a los comentarios y criticas de otros artistas miembros de la comunidad devianART. URL: http://www.deviantart.com/

Inicio de la pgina web:

Imagen del men:

Como se puede observar, el men del sitio cuenta con diferentes opciones, las cuales tienen asociada un icono respetivamente segn su accin. Algunos de estos iconos tienen a confundir lo que expresan, con la accin que realmente ejecutan: por ejemplo, la opcin CHAT tiene asociada una cara sonriendo, mientras que la opcin FORUM tiene asociado un globo de dialogo que sera ms adecuado para la opcin CHAT. Tambin en la parte derecha del men, pueden observarse iconos exactamente iguales asociados a acciones similares en contexto, pero distintas en el contenido que muestran, como lo es en el caso de random. Como se explica en las guas de la interfaz humana de gnome, como la regla de oro para las metforas de los iconos, si un icono hace pensar mucho a una persona para encontrar algo, entonces la metfora es muy compleja. Partiendo de lo anterior, en el men se puede observar el icono de lo opcin TODAY tiene asociado un icono que no est bien detallado, ni tampoco sugiere la accin que realmente ejecuta dicha opcin (Mostrar actividades recientes en el dia actual). Claramente se determina que este incumple con las normas segn gnome para el diseo de iconos en los mens: Un icono debe ser indicativo de la funcionalidad con la que estn asociados. Un buen icono debe sugerir al usuario el propsito general de la operacin sin tener que leer el texto que lo acompaa.

Como posible solucin a los fallos de algunas de las metforas en los iconos presentados en el men anterior, se pueden plantear el diseo de los siguientes iconos, basndose en las reglas sugeridas por gnome en su gua de interaccin y en modelos de otros iconos asociados a las mismas acciones o similares, ya estandarizados en la web y conocidos por la mayora de los internautas.

Propuesta de icono para la opcin CHAT:

Propuesta de icono para la opcin TODAY:

Propuesta para la opcin FORUM:

3. Realizar un anlisis detallado (pero preciso) sobre las formas o medios de transmisin de informacin que utiliza la APP socializable Istagram para PC. Se trata de revisar las maneras en las que se transmite la informacin al usuario. Es decir, cmo se representan objetos, acciones, entrada de datos, salida de datos, seleccin de datos entre varios, ejecucin de acciones, etc. Se pueden sealar las metforas utilizadas para transmitir estructuras jerrquicas, actividades a realizar por el usuario, entre otras. (3 ptos).

Instagram es una de las aplicaciones para Smartphones ms famosas y populares del momento, catalogada como una de las favoritas entre los usuarios de estos equipos y situada en los primeros lugares de las apps mviles ms descargadas. Instagram cuenta tambin con un sitio en la web, en donde sus usuarios pueden ingresar tambin desde un computador, aparte de sus telfonos inteligentes. A continuacin se explicar el proceso que lleva a cabo esta versin para PC y los mtodos de interaccin con el usuario.

Primera impresin: La primera vez que se accede al sitio web http://instagram.com/, aparece una ventana bastante sencilla, con los colores caractersticos de la aplicacin (azul y blanco), el logo y nombre de la misma, imgenes de smartphones ejecutando la aplicacin, y un botn llamado ENTRAR, acompaado de un icono cuya metfora es una casa, sugiriendo al usuario que al hacer click all, podr llevarlo al HOME o INICIO de la aplicacin. Con todo lo descrito anteriormente, a primera vista, un usuario regular de la app fcilmente se identifica o familiariza con la interfaz principal, y entiende bien que se trata de un sitio web relacionado con instagram. Aparte de los elementos antes mencionados, posee un breve recuadro de texto, en el que se muestra una especie de eslogan, junto con una descripcin (Aqu el primer aspecto negativo, la descripcin antes mencionada aparece totalmente en ingls, por lo que no existe una armona entre el idioma, pues se observan cosas en ingls y otras en espaol). Cuenta tambin con enlaces para descargar la app para mvil desde la AppStore y desde GooglePlay. En la parte final de esta ventana, aparece una lista horizontal de opciones relacionadas a la aplicacin (Acerca de, Ayudas, Blog, entre otras).

Pgina principal de instagram para PC

Al hacer click en alguna de los links que se muestran en la parte inferior de la ventana, el usuario es llevado a nueva ventana, que muestra los resultados de la opcin seleccionada, pero con un grave problema: todos los resultados de las opciones disponibles estn en el idioma ingls, dando paso a una grave falta en la transmisin de informacin al usuario, pues no todos los usuarios poseen un buen nivel de ingls, o es muy bsico. Esto dificulta la interaccin del usuario con la aplicacin, por ejemplo, un usuario con alguna inquietud, quiere revisar la seccin de preguntas frecuentes (FAQ) y todo el contenido de esta aparece en ingls, obligando al usuario o a quedarse

con alguna duda, o usar agentes externos, como traductores de idiomas, para solucionar su inquietud. Desde la seccin de preguntas frecuentes y otras secciones, la ventana cuenta en la parte superior derecha con otro icono para ENTRAR, pero esta vez es distinto a la casa que aparece en la primera ventana, este nuevo icono posee una metfora, la cual es la silueta de la parte superior de una persona, lo que podra hacer nfasis a ingresar los datos del usuario para entrar a su perfil, sin embargo, al hacer click en el no pasa absolutamente nada, pudiendo causar molestia o confusin en un usuario poco experto, mostrndole una opcin de login que no funciona, haciendo retroceder a la pgina anterior.

Seccin de preguntas frecuentes totalmente en ingls.

Ventana de login :

Una vez presionado el botn ENTRAR ubicado en la primera pantalla que aparece al abrir el link http://instagram.com/, se abre una nueva ventana, ocupada solo por un pequeo formulario de ingreso donde se le pide a la persona su nombre de usuario o ID (tambin se puede

ingresar con el correo electrnico asociado a la cuenta) y su contrasea. Cabe mencionar que en esta versin para PC, el usuario no puede registrarse en la red social, es decir, no puede crearse una nueva cuenta, todo esto da a entender que dicho trmite solo puede hacerse desde un Smartphone, por lo que solo usuarios propietarios de una cuenta pueden hacer uso de ella en el computador. En caso de algn error en el ingreso de los datos, aparece un pequeo mensaje con una tonalidad rojiza en el formulario, indicando al usuario que debe ingresar ambos datos correctos y que el formulario es sensible a minsculas y maysculas. Posee adems un enlace para recuperacin de contrasea, en el cual pide al usuario ingresar su correo electrnico y copiar un captcha para continuar. Una vez ingresados los datos correctos, se abrir una nueva ventana, ya dentro de la cuenta del usuario.

Ventana de inicio de sesin.

Despus de iniciar sesin:

Una vez iniciado sesin, se carga una nueva ventana, con una barra superior en la que se indica que se est en el HOME o INICIO mediante una metfora visual, el nombre de la web (Instagram) y en la parte derecha de la barra, una foto del perfil en miniatura de la persona duea de la cuenta, con su nombre de usuario. En la parte central, creciendo hacia abajo con un scroll, estn todas las publicaciones o post recientes de las cuentas a las que el usuario sigue en la red social, mostrando que cuenta public la fotografa, imagen o video, y hace cunto tiempo. En la parte inferior de cada publicacin, hay un espacio para hacer comentarios, valorar la publicacin, reportarla o ver la pgina completa de la misma.

Pgina de inicio o home, una vez se ha iniciado sesin.

Al momento de valorar las publicaciones esta se usa un icono con una metfora visual, la cual es un corazn, puede causar confusin entre algunos usuarios, pero este icono es para expresar que te gusta la publicacin, similar al LIKE de Facebook. Tambin aparece otro icono conformado por 3 puntos suspensivos, los cuales al hacer click en ellos, despliegan 2 nuevas opciones: reportar como inapropiado, o ir a la pgina de la aplicacin.

El corazn se torna rosado al dar like a una publicacin y los 3 puntos despliegan nuevas opciones

Vista del perfil de usuario:

Al hacer click en la foto de perfil en miniatura, ubicado en la parte derecha de la barra superior, se despliegan una lista de opciones como lo son: Perfil, Editar Perfil, Insignias y Salir. Al hacer click en la opcin PERFIL, se muestra en la ventana una nueva pantalla, donde se observa una especie de collage de fotos publicadas por el usuario dueo de la cuenta, su foto de perfil con un botn para editar el perfil debajo de ella, su nombre de usuario, informacin del usuario, informacin de la cantidad de publicaciones o post que ha realizado, nmero de seguidores de su perfil, y numero de perfiles que sigue la persona. Debajo de toda esta informacin mencionada anteriormente, se observan todas las publicaciones que ha realizado la persona, ordenadas de forma cronolgica.

Pantalla principal de la opcin PERFIL

Al entrar en otra opcin, como lo es editar perfil, se muestran una serie de formularios, con cierta informacin de la persona, pero esta vez te dan la opcin de editar o cambiar ciertos campos, tales como nombre de usuario, correo electrnico, biografa, cambiar la contrasea entre otros. Tambin brinda en la opcin insignias, especies de logotipos para vincular y promocionar tu perfil de instagram, aunque se vuelve al problema del texto inconsistente en ingls y espaol. Por ltimo, la opcin salir, es la que cierra la sesin activa del usuario y lo lleva a la ventana principal de instagram.

Pantalla de la opcin INSIGNIAS.

Como conclusin, se puede decir que el sitio de instagram para PC est muy limitado con respecto a la app mvil en cuanto a su funcionalidad, pues bsicamente solo permite al usuario desde el computador revisar contenidos y publicaciones, mas no crear ni publicar, aspecto que es uno de los fuertes de la aplicacin en los smartphones. Tambin cabe mencionar que para usuarios expertos de la red social instagram, este sitio puede ser muy sencillo y bsico en cuanto a su funcionamiento e interaccin con l, y hasta de fcil adaptacin, sin embargo, no es muy recomendable para nuevos usuarios que quieran iniciar en instagram, pues carece de cierta informacin necesaria sobre las limitantes de esta versin en PC, siendo una de las ms importantes la carencia de un registro a travs de esta, lo que podra causar confusin entre los nuevos usuarios, tal vez ms acostumbrados a las redes sociales como Facebook y Twitter, en las que si hay opcin de registro en sus pginas principales. Lo ms recomendable seria iniciarse en este mundo a travs de los smartphones, pues la aplicacin fue diseada especialmente para ellos, y ver la versin para pc ms como una herramienta para visualizar contenidos recientes de tu cuenta, en caso de no tener tu telfono en un momento determinado, tal vez con el paso del tiempo a esta versin se le aadan nuevas funciones o ms herramientas, pero siempre lejos del objetivo principal de la aplicacin, el cual es aprovechar la cmara del mvil, tomar una foto determinada, editar o aplicar un filtro y compartirla en ese mismo instante con las dems personas.