En esta clase vimos en lo que se basa la metodología del User Centered Design y la metodología de Jesse J. Garrett. UCD trata de analizar a profundidad las necesidades, las limitaciones y lo que nuestros usuarios quieren conseguir de una interfaz.
En cuanto a Garrett, la metodología que propone es muy sencilla y está basada en el UCD, es una forma ordenada de saber cuáles son las necesidades de nuestro ususario, contiene una estrategia, un enfoque, estructura, esqueleto y surface, que sería como la cara, lo que el usuario va a ver. Esta estructura está muy bien hecha y explicada, además de sencilla.
El parcial de este mes fue enviado por correo y todos lo contestamos y lo enviamos al maestro. En lo personal la clase me cuesta trabajo al momento de realizar los trabajos o comprender algunos terminos pero creo que al final siempre termino entendiendo.
El examen, pues... no estudié... por lo tanto no espero obtener una excelente calificación, aunque creo que me sirvió todo lo que estuve viendo durante el mes.. contesté más de lo que pensé y aqui me doy cuenta de lo que he aprendido.
STRATEGY User Needs: “What do our users want to get out of it?”
Debemos satisfacer las necesidades de nuestro cliente (poniendonos del lado en que estamos creando su página web) siempre y cuando él tenga bien definido que quiere transmitir o lograr con ciertos detalles, colores, palabras y de mas elementos utilizados para armar su página. En este punto es muy importante pensar también en los usuarios de nuestro cliente, ya que de esto dependen las ventas del cliente.
En la página que me tocó analizar (pri.org.mx) las necesidades de nuestro cliente son: Informar, a todo tipo de gente, sobre los nuevos cambios, noticias, lo que pasa últimamente, lo que ha estado resonando durante el tiempo. Más que nada mantenerse a la vanguardia, por medio de la tecnología y llegar a todo tipo de comunidad manejando una herramienta que se encuentra al alcance de todos y que en estos tiempos es indispensable vivir sin ella, el Internet. Esto va de la mano con mantener una buena imagen distinguirse de los demás competidores, mantenerse como un partido que está al margen en todos los aspectos y que piensa en sus seguidores y los toma en cuenta.
Site Objectives: “What do we want to get out of this site?”
Siempre se debe de tener en cuenta hacia qué esta encaminada la página, no debemos desviarnos de los objetivos principales de esta.
En este caso pri.org.mx mantiene los objetivos de crear una mejor imagen y mantener a la gente informada sobre noticias, convocatorias y comités estatales, de esta forma ellos podrán localizar de manera sencilla el de su localidad y participar en las campañas, que es un punto muy importante, reunir gente, lograr ser el partido más seguido y reconocido principalmente a nivel nacional.
SCOPE
Content Requirements: definición de los elementos del contenido requeridos en el sitio para ayudarnos a definir las necesidades del usuario. En este aspecto la página cumple con el enfoque sobre el contenido, la información es clara y concisa, muy explicativa, en algunos casos (dependiendo de la necesidad) por ejemplo en la historia, el texto es poco para lo que en verdad es el tema, pero está muy bien explicado y resumido.
Con esto nos damos cuenta que la página piensa en su usuario. A nosotros como usuarios nos gusta entrar a ver una página que atraiga, tiene que captar nuestra atención y cuando por fín lo hace, nos gusta explorarla y al hacerlo queremos ver información o contenido que no sea tedioso, y que este bien separado, es decir, haciendo buen uso de los espacios en blanco, esto nos provocará leer o por lo menos tratar de ver de qué se trata.
Functional Specifications: lista descriptiva de la funcionalidad que el sitio debe incluir para cumplir las necesidades del usuario.
Bueno, para empezar, el sitio incluye un mapa de sitio que ayuda a que el usuario localice con mayor facilidad las secciones incluídas en la página y pueda participar en la mayoría de estas, que es lo más importante, ya que la página esta creada para que el usuario indague en ella y encuentre todo lo que necesita rapidamente, en lugar de estar haciendo llamadas telefónicas o visitando instancias gubernamentales para atender sus dudas.
Además de que el sitio incluye el mapa, el diseño, y la forma de navegación e interacción es sencilla; el diseño es estructurado y lineal, las pocas imagenes estan distribuidas en puntos especificos que no estorban a la vista, además de mantener la variación de colores usados por el PRI y ser resaltados.
STRUCTURE Interaction Design: “La forma en que el usuario interactúa con la página” La página debe tener una estructura diseñada bien definida para que así el usuario pueda interactuar de manera correcta y sobre todo sin problemas o como en la mayoría de los casos pasa, haciendolo sentir estúpido.
En esta página podemos ver que la forma de navegar es muy sencilla, ya que ayudan (saliéndome del tema) los colores que tienen de fondo y en las letras, el fondo es blanco por lo tanto aparenta un lugar limpio, las letras son blancas, negras o grises dependiendo del color de fondo o el lugar y la importancia de las mismas. Ej. La barra principal de navegación.
Information Architecture: “Diseño estructural de la información Trata de diseñar una estructura del espacio de la información para facilitar su acceso.
En esta sesión terminamos de ver el tema de page layouts, patrones y principios. Muchos terminos son parecidos pero ya siendo explicados con ejemplos es mucho más fácil distinguir cuál es cual.
Los page layouts son enfocados a la forma en que se estructura el contenido en una página, la alineación de los textos, fuentes, colores, tamaños, los espacios en blanco que son muy importantes para marcar un equilibrio, y otro concepto importante es los contrates de la página, todo esto tiene que ir de acuerdo a la imagen de la misma, para generar congruencia.
Normalmente cuando una persona va a ver algún escrito o lo que sea, empieza de izquierda a derecha de arriba a abajo, es por eso que esta categoría es llamada "esquina superior izquierda" porque se podría decir que un punto principal es este y debemos colocar algo que haga que el usuario se interese, o por lo menos hacer un buen uso de los elementos y los colores.
Ej. Reserved es una página muy interesante, es muy simple, pero hace que el usuario se mantenga entretenido, en la página principal aparece solamente el nombre de la empresa que es Reserved y en el espacio sobrante aparece un video, las imágenes son muy buenas, asi es que probablemente cuando la persona este viendo el video y no conozca la empresa va a buscar algo que le diga más de ella, y casi inconcientemente colocará el cursor encima del nombre y de ahí se desprende el menú.
Subordinación
Aquí se acomodan de manera jerarquica los elementos, normalmente esto sucede con los menús. Acomodandolos con diferentes tamaños y colores según corresponda.
Ej. En MoCoLOCO (que no tiene nada que ver con mocos ni con locos), una página que trata temas sobre arte y arquitectura moderno, se muestra del lado izquierdo el panel con las opciones,que tienen una lista desplegable con letras de diferente tamaño y estilo dandole enfoque al tema principal, ademas de cada uno contener un cículo de color diferente para distinguirlos.
Formas y Grupo
Para mantener cierto orden la página respeta una estructura y con esta se distribuye de mejor manera el contenido.
Ej.La página CAT sobre arte y tecnología muestra de forma clara su estructura.
Fuentes Congruentes
Se trata de colocar textos y fuentes de acuerdo al estilo de la página, si el estilo de esta es muy formal no se puede mezclar cualquier tipografía, también se tiene que tener en cuenta la leibilidad y legibilidad.
Ej. Esta página del festival indie 2010, tiene una estructura bien definida, al igual que el estilo, porque las letras son del mismo tipo, existen diferentes tamaños, para destacas lo más importante, en este caso el título (izq. arriba) y los grupos que se presentarán (primeros del lado derecho).
Espacio en Blanco
El espacio en blanco también es una técnica de atracción al público, siempre y cuando se sepa manejar correctamene, es necesario dejar ciertos espacios vacios para generar estabilidad en el diseño. Esto lo utilizan muchas páginas (más que nada las que son más elegantes).
Ej. SieteRayas presenta estos espacios en blanco que generan armonía y aún colocando estos espacios se logra mantener el estilo de la página.
Colores y Contraste
Consiste en poner de diferentes colores algunas partes de la página para destacar o señalar la parte en la que nos encontramos, siempre y cuando se respete el contraste para no hacer confuso el contenido.
por ejemplo, cuando queremos resaltar unas cosas de otras. Como en esta página de la fotógrafa Stella Alesi, contiene mo esencial, y la tipografía concuerda con el estilo serio de la página, y por lo que se destaca este punto es por los colores que se utilizan , el menú, el nombre de ella, y lo que estamos viendo son los que tienen un color verde, en cambio para diferenciar de lo demás, que en este caso serían otros lugares que contiene la página pero que no estamos utilizando se usa un color blanco, el fondo también es muy importante, de este dependen los colores que se usarán en la tipografía.
En este patrón se diseña cada página con el mismo estilo, colores y elementos adaptando los diferentes contenidos de cada una a este tipo de alineamientos.
Ej. en la página Hellcats Records se muestra el mismo diseño en cada una de las páginas a las que entramos, como: noticias reciente, fotos, videos, artistas, etc.
Center Stage
El contenido se encuentra agrupado en el centro de la página.
Ej. La página Lush Designs maneja center stage toda centro por medio de un rectángulo el encuentran temas lado izquierdo y la detallada del es muy obvia esta en este ejemplo porque se pueden apreciar a simple vista que los lados están vacíos.
PATRONESDINÁMICOS
Liquid Layout
Se refiere a las páginas que al momento de reducir su tamaño todo el contenido y los elementos se van adaptando al tamaño, de manera que, de alguna forma (nada práctica) se pueda seguir navegando en ella. Ej.La página de Wikipedia mientras vamos cerrando la ventana poco a poco se puede apreciar cómo los elementos se van acomodando y adaptando a la forma de la ventana, ya sea cuadrada o rectangular.
Responsive Disclosure
La aplicación responde de acuerdo a lo que el usuario selecciona.
Ej. Al abrir la página de Emily Haines nos aparece, antes que nada, la opción de suscribirte y la opción de entrar a la página oficial. Si seleccionas la opción de suscribirte se abre una nueva ventana en la que se ingresan los datos, aquí es cuando la página responde a nuestra petición. Del mismo modo si queremos ir directamente a la página sólo damos click en la otra opción y ya está.
Responsive Enabling
Cuando, generalmente en los programas te dan a elegir entre varias opciones y al deseleccionar alguna, por consiguiente se desactivan las que estan relacionadas.
Ej. En las aplicaciones como Word al abrir el menú de preferencias, como se muestra en las imagenes de a bajo, deseleccioné la opción de “usar copiar y pegar” y como consecuencia se desactivó la opción de configuración, ya que etá relacionada con la opción que desactivé.
PATRONES DE FLUJO
Left/Right Alignment
Es la forma en que el texto va a ir justificado en la página (izquierda o derecha) y si eso tiene que ver con el contenido. Ej. La página typoberlin (asi como la mayoría en la Web) utiliza la alineación hacia la izquierda, pero lo que no todas manejan es el alineamiento de los elementos o de las noticias más importantes, por ejemplo en esta página, utilizan bien los puntos áureos además de que es más cómoda para el usuario, ya que no contiene scroll down, es una página que está bien hecha y tiene buen balance en color e imágenes.
Diagonal Balance
Se refiere al balance de color de una página, que debe ser en forma diagonal (si estamos viendo el espectro de colores) para que esté equilibrada. Ej. En la opción "curvas" del menú "imágen>ajustes" de photoshop podemos observar la línea diagonal de cada color la cual aparece diagonalmente, como la imágen de abajo.
Si esta línea diagonal se modifica, dependiendo la dirección todos los colores cambiarán, como en la imagen.
------------------->
PATRONES DE AGRUPACIÓN
Titled Sections
Cuando nos exponen los temas que contiene la página y cuando seleccionamos alguno se abre una lista con los subtemas.
Ej. En la página de KERRANG! se muestra el menú y al seleccionar un tema principal enseguida se extiende un panel con los temas relacionados.
Closable Panels
Cuando la página nos muestra varios paneles con información diferente y el usuario puede abrirlos y cerrarlos por separado.
Ej. En cualquier blog de Blogspot aparece en cualquiera de los lados un panel con la fecha en que han sido las publicaciones, por ejemplo:
Movable Panels
Cuando la aplicación te permite mover los panels y acomodarlos donde te guste más o te sea más fácil localizarlos.
Ej. Facebook, no necesitas entrar al modo "editar" o algo así, basta con colocar el mouse encima del panel a modificar para que aparezca una mano, que indica que puedes moverlo, y sólo dando click y arrastrando puedes modificar la ubicación del panel, como se muestra en la imagen a la derecha.
Card Stack
Reúne información diferente en cada ventana o pestaña y únicamente se puede abrir y ver el contenido de uno a la vez.
Ej. En la página de Apple se muestran estas pestañas, el usuario puede seleccionar sólo una de ellas, se pueden agupar como "Titled sections" mas no tienen esta capacidad de abrir varias al mismo tiempo.
Esta empresa tiene bien definidas su misión y su visión. Los empleados están concientes de su papel y los objetivos de la empresa debido a que los directivos se encargan de trabajar con gente que al igual que ellos se encuentre comprometida con su trabajo.
El servicio que ofrece esta empresa es la venta y renta de equipos análogos y digitales en el área de copiado, impresión, escáner, fax, blanco/negro y color, mediante las marcas: CANON y RISO. Además de realizar una investigación sobre las necesidades del cliente y crear de acuerdo a esta un paquete adecuado.
Sus principios y valores están enfocados en la buena calidad y excelente trato y servicio que ofrecen al cliente.
Estos patrones son los que definen la acomodación y la estructuración de la página. Dentro de este tipo de patrones se subdividen 3 categorías:
Jerarquía, que es cuando acomodamos los elementos, con los espacios requeridos, fuentes, colores y formas de modo que generen armonía.
Agrupación, como su nombre lo dice se trata de agrupar la información o los elementos utilizados dentro de la página, existen varias formas de agrupación, entre las cuales se encuentra similitud, que consiste en que todo debe cuadrar de acuerdo al diseño o al modo de trabajar con la página.
Y, por último, Flujo visual, que se encarga de que la página mantenga las caracteristicas necesarias que probablemente harán que el usuario pueda navegar sin problemas através de ella.
En esta clase la exposición trató de los programas especializados en comunicación para grupos de trabajo vía Internet, llamados "groupware".
Existen compañeros de trabajo que pueden vivir en ciudades, incluso en paises diferentes y están tan al pendiente de sus proyectos y su trabajo colaborativo como si vivieran en el mismo lugar y se vieran todos los días, pero con los "groupware" no es necesario verse todos los dias o vivir en el mismo lugar para acordar o continuar con el desarrollo de algún proyecto.
Estas aplicaciones se caracterizan por brindar gran cantidad de servicios a la vez en uno solo, que, más que nada, es cómodo, ya que permite comunicarte con tus colegas de distintas formas: audio, video, mail, conversaciones escritas. También, por lo mismo de tener el usuario la necesidad de estar guardando o enviando y compartiendo todo tipo de contenidos, permite almacenar y enviar cierta cantidad, que comparada con el mail convencional es mucho más poderosa, esto y muchas cosas más nos ofrece este tipo de servicios.
Creo que estas aplicaciones son muy convenientes y cómodas para las personas que se encuentran lejos y además nos permite experimentar la comunicación de diferentes formas, podemos hasta trabajar para una empresa japonesa y nunca haber visitado Japón, se adquieren experiencias de otro tipo al interactuar por medio de una máquina para llegar a otra en la que otra persona hace lo mismo.
Después de la exposición un Diseñador nos dio una plática acerca de su experiencia y los puntos más importantes para la realización de un diseño. Esta persona pasó por muchos procesos para llegar a ser lo que es ahora, primeramente estudió diseño gráfico (tal cuál), después y con forme cambiaban las necesidades en la gente y las tecnologías decidió aprender por su propia cuenta diseño relacionado con la Web.
Nos mostró un par de páginas que diseñó y nos explicó su metodología o por lo menos lo que él ha descubierto que es necesario seguir para concretar un proyecto, primeramente hay que buscar una necesidad, después generamos la idea para satisfacer esta necesidad, a esto le añadimos los recursos que utilizaremos dentro de nuestro rango, viendo también nuestras limitaciones, que pueden agravarse si se les añade un FT (factor terrorífico: algo que nuestro cliente desea pero que interrumpe y entorpece nuestro diseño, además de no satisfacer las necesidades del cliente de mi cliente).
Su plática me pareció muy interesante y estoy muy de acuerdo con su forma de ver el diseño. También hay que saber decir cuando no queremos hacer algo, o no estamos de acuerdo con algún trabajo que nos propongan, hay que saber imponer nuestros principios o creencias.
Esta vez me gustaría analizar la página del Festival Ethno Port de Poznán ya que me parece muy llamativa, me gusta en cuestión de contenido y me parece interesante la manera en que el usuario interactúa directamente con ella sin necesidad o "maña" de usar el navegador.
Festival Ethno Port de Poznán
La página está constuída como CMS porque controla de manera independiente el contenido y el diseño. De esta manera se pueden crear sitios web más dinámicos y creativos, como lo es la página.
La finalidad de esta página es dar información y noticias sobre este festival de música al cual asisten grandes figuras entre las que se encuentran: Mari Boine, Iva Bittowa & Lisa Moore, Transglobal Underground, Taraf De Haidouks , Djivan Gasparyan, Habib Koité & Bamada i Houria Aïchi & L’Hijâz’Car, Joanna Słowińska, Żywiołak and Alamut. Este festival, a parte de presentar artistas que continúan interpretando de distintas formas la música y el sonido puro y austero que se había tenido desde hace muchas generaciones, nos invita a conocer el Viejo Canal del Río Warta.
Patrones de uso
Safe exploration: Existe un menú muy fácil de comprender y por medio de este podemos avanzar o regresar cuantas veces queramos sin problema alguno.
Instant gratification: Aunque la plataforma sea CMS no tarda en cargar, debido a que no está saturada de información, todo lo tiene muy bien distribuido y resumido, resaltando puntos esenciales.
Satisfacing: Con el hecho de ser un CMS nos anuncia que la propuesta es creativa, no está retacada de imagenes o de texto, el contenido esta bien distribuido, excelente manejo de animaciones (discretas mas no simples), buenos contrastes y gráficos, agradable a la vista, interfaz interactiva. Changes in midstream: La interfaz es sencilla y permite al usuario interactuar con ella sin problemas sobre cómo hacer alguna acción.
Deferred choices: No pide llenar formatos para poder acceder a ella.
Keyboard only: Ya que es muy dinámico el usuario requiere utilizar el mouse.
Patrones de Taxonomía
Lista de acciones: Muestra al usuario una lista con opciones para que elija la que más le convenga.
Lista de temas: La interfaz basa el contenido de la información en secciones, cada una de estas nombrada de cierta manera. Estos temas son expuestos al usuario en la página principal.
Patrones de estructura
One-window paging: Todo el contenido se muestra en una sola ventana.
Patrones de organización de contenido
One-window drill down: porque cuando estas leyendo algún articulo aparece a la derecha, en la misma página una barra de desplazamiento que tienes que mover hacia abajo para terminar de leer la información.
Patrones de navegación
Clear entry points: La página inicial solo muestra algunos temas, dependiendo de qué necesite el usuario se abrirán más para especificar su búsqueda, aún asi, la interfaz permanecerá sencilla.
Global navigation: Esta página me parece muy interesante ya que a pesar de que te vayas adentrando cada vez más en ella puedes retroceder las páginas que quieras o conectarte con otros temas (de la misma aplicación) debido al dinamismo de esta y todo desde donde te encuentres sin necesidad de usar los menús del buscador, lo más extraño es que aunque quieras usarlos no puedes, se encuentran deshabilitados como si nunca hubieras entrado a la página.
Pyramid: Al inicio se muestran los temas esenciales y cuando colocas el cursor sobre algunos enseguida se abren más opciones referentes a este.
Modal Panel: Ya que como se muestra en algunas fotos de arriba, antes de entrar a la página inicial aparece un panel del cual el usuario tiene que elegir una opción. En este caso son 2 idiomas; ingles y polaco.
Color-coded section: Se juega con los colores. Los puntos esenciales aparecen con cierto color (rojo) al desglosarlos abren temas con un color diferente (azul) para distinguir cada uno.
Annotated scrollbar: Cuenta con su propia barra de desplazamiento para dar libertad al usuario de manejar y de interactuar más con la interfaz.
En cuanto a las transiciones contiene "animated transitions" porque al hacer una acción con el mouse, como dar click o ponerlo sobre un elemento, la imagen o el texto se mueven y dan origen a otra acción.
Patrones de navegación . Aplicaciones para compartir contenido
Durante esta clase vimos más tipos de patrones que entran en la clasificación de los de navegación:
Transiciones
Animated transition: Esta categoria es poco común y muy llamativa al público. Puede ser que al momento de abrir una ventana o al hacer click en una opción salte de pronto un menú o una nueva ventana de manera animada.
Scaped hatch: Este patrón se vale de un "truco" o una opción para salir, por ejemplo en una página web, cuando aparece un recuadro el cual no te permite continuar a menos que presiones la opción "cancel".
Señales
Breadcrumbs: Cuando se muestran los sitios que hemos recorrido a lo largo de nuestra búsqueda por orden, en algún lugar de la pantalla, el cual siempre permanece visible.
Secuence: Cuando se nos dan fácilmente los pasos a seguir, puede ser, en la mayoría de sitios visitados, números de páginas que hay por ver y flechas que nos permiten ir a la siguiente o ver la anterior.
Color-coded section: Para hacer referencia a que (dentro de una misma página) nos encontramos en otro tema diferente la pestaña o la nueva ventana cambia de color.
Annotated scrollbar: Cuando la interfaz de la página tiene la opción de navegar dentro de ella y no haciendolo por medio del browser. Este patrón se caracteriza por contener textos o imagenes de un tamaño específico que no nos es posible apreciar completamente si no que tenemos que utilizar las barras de desplazamiento que contiene la página para poder ver completo el contenido.
La exposición trató de las diferentes aplicaciones que utilizamos para compartir contenido, entre las cuales se encuentran con las que se comparten video; youtube, vimeo, tu.tv y vblogging (que es un concepto poco utilizado por la gente y, sin embargo, muy conocido en la red).
Las que comparten conversaciones de audio y video (puede ser al mismo tiempo), este servicio (VoIP) tiene un máximo exponente y que, sin dudas, sobre pasa al teléfono convencional, Skype.
Los servicios FTP y P2P sirven, tanto para compartir archivos, documentos, presentaciones, como para compartir videos y música. Son los más utilizados en la red, FTP permiten acceder directamente al link y descargar el archivo a tu ordenador, mientras que los P2P necesita la interacción entre usuarios para poder descargar los archivos, algunos ejemplos: programas de música; eMule, Vuze.
También durante esta presentación vimos temas como el Internet en sus inicios, cómo revolucionó la vida y las relaciones humanas, qué es lo que sucede en estos días y qué es lo que más se estima que pasará en algunos años, con la gente, el Internet y la Web 3.0.
