martes, 30 de septiembre de 2008

Prototyping for Tiny Fingers

This technique, building prototypes on paper and testing them with real users, is called low-fidelity prototyping or “lo-fi” for short. Value is not always gained in practice.
Paper prototyping is potentially a breakthrough idea for organizations that have never tried it, since it allows you to demonstrate the behavior of an interface very early in development, and test designs with real users. Lo-fi prototyping is a technique that can dramatically increase quality; it allows a team to try far more ideas than they could with high fidelity prototypes. To get a good idea, gets lots of ideas.

The problems with HI-FI.
· Hi-fi prototypes take too long to build and change: you can´t evaluate an international design until after it is built, but after building, changes to the design are difficult. Paper prototypes, on the other hand, are extremely fast to develop and the technique is very easy to learn.
· Reviewers and testers tend to condiment on “fit and finish” issues: with a slick software prototype, developers easily become obsessed with the prettiness power of a good tool, and spend their hours choosing colors instead of coming up with new ideas.
· Developers resist changes: they would be less hesitant to suggest redrawing a sketch that looks an hour to create.
· A prototype in software can set expectations that will be hard to change.
· A single bug in a hi-fi prototype can bring a test to a complete halt: even with the coolest of high-level tools, we all know how hard it can be to get all the bugs out of a program.

A Trojan Meme.
A meme is an idea, the mental equivalent of a gene, and selfish ones try to replicate themselves in as many minds as possible. Within days of designing an interface, they saw exactly how their work was perceived by people just like those who will eventually be using their product. Two important laws: “know your user” and “you aren´t your user”.
Lo-fi prototyping works because it effectively educates developers to have a concern for usability and formative evaluation, and because it maximizes the number of times you get to refine your design before you must commit to code.

Building a Lo-Fi prototype.
1. Assemble a kit:
o While, unlined, heavy paper that is bigger than letter size.
o Hundreds of 5-by-8-inch cards.
o Various adhesive.
o Various markers.
o Lots of sticky note pads.
o Acetate sheets.

2. Set a deadline.
o Obligate yourself so you are forced to take a preliminary crack at every important aspect of your problem.

3. Contract models, not illustrations.
o Make what you need to simulate menus dropping down, dialogs propping up, selection highlights and so forth.

Preparing for a test.
1. Select your users: you should do enough user and task analysis to understand he people who will b using your software, their educational and training background, knowledge of computers, their familiarity with the domain, typical tasks involved in their job, and so on.
The people testing your prototype are the same people who will be using the final product. You can often get by with, “surrogate users”, people who fit the same profile as your actual clients, but free from whatever association that prevents you from testing with the clients themselves.

2.Prepare test scenarios: write a set of scenarios, preferable drawn from task analyisis, describing the product during use in a typical work situation. Design your prototype to support a few of these scenarios.

3.Practice: conduct several dry runs before you test with people from outside your team.

Conducting a test.
· Greeter: welcomes users and tries to put them at ease.
· Facilitator: giving the user instructions, encouraging them to express his or her thoughts during the test, and making sure everything gets done on time.
·Computers: on team member acts as a computer.
·Observers: the rest of the team members quietly take notes.

Evaluating results.
Recommended changes to the design. Constructing the revised prototype becomes a process of taking each component, and following the recommendations that were stuck to it.

Try it.
Hix enter the first lo-fi exercise with skepticism. After trying it they invariably say something to the extent of “I can believe how
much we learn”.

Aprendiendo a usar Flash ....


Vocabulario de Nuevas Tecnologías.

Los medios masivos de comunicación tienen un uso diferente; sin embargo alguno de ellos comparten lenguajes y algunos no, por esto mismo el vocabulario técnico puede variar en cada medio.
Layout: Se refiere a la ubicación espacial de las palabras e imágenes dentro de una página web. La intención es que cada uno de estos elementos tenga coherencia al ser leído. Para poder lograrlo se hace uso de márgenes y número de páginas que dividen al sitio web, dándole un lugar específico a cada elemento, lo que provoca que exista una separación espacial de los elementos.

Navegación: La navegación es la forma en que el usuario experimenta la página web.

Imágenes: Las imágenes son ilustraciones que son parte de la página web. Pueden ser fotografías, videos, películas o imágenes en 3D.El uso de imágenes permite ilustras las ideas que se expresan de manera escrita y cuando la imagen es en si el medio por el que se transmite el discurso puede ser acompañado de una breve explicación.

Color: El color es un elemento importante para el diseño de una página web ya que esta determina la forma en que el usuario percibe el mensaje. Para poder hacer un buen uso del color es importante tener en cuenta la teoría del color.

Secuencia: La secuencia es la coherencia que se produce al unir dos o más elementos. La secuencia va ligada al discurso que se desea trasmitir. Generalmente se maneja como secuencia a la relación entre imágenes dentro de una película y para lograr esto siempre es de gran ayuda el uso de un storyboard.
Continuidad: La continuidad se refiera al uso de los mismos elementos a lo largo de la secuencia. La continuidad permite que las imágenes, sonidos u otro elemento se entendido a lo largo de su exposición. La continuidad controla la secuencia.

Sonido: El sonido es importante ya que refuerza el mensaje que se trasmite a través de las imágenes o los textos. El sonido puede tener el formato de música o de un elemento que acompaña una acción ejecutada dentro de la página web.


Movimiento:El movimiento ser refiere al cambio espacial de un elemento. El movimiento conjugado con el sonido tiene un efecto con niveles de persuasión alto.

Asociación:La asociación se refiere a la agrupación de ideas, imágenes, sonidos u otros elementos. La asociación es realizada por el usuario. La asociación es la relación entre los elementos que el usuario encuentra en la página con los que ya ha experimentado previamente en su vida.

Interpretación:La interpretación es el significado que el usuario le da a los elementos que encuentra dentro de una página.

Prototipo: El prototipo se refiere a las formas anteriores a lo que se pretende obtener. Por ejemplo para la realización del un sitio web se puede hacer un prototipo de cómo quedara el sitio.

Guía de estilo: Es un documento donde se muestra la forma en que como se organizara la información. Una guía de estilo puede ser la programación en HTML donde el diseñador programa la estructura y agrega los documentos de el sitio web que se está diseñando.

Usabilidad: Se refiere a la manipulación adecuada de los elementos que integran la página web para que el usuario pueda conseguir el fin que desea.

The design process: En el diseño se establece la relación que habrá entre los distintos elementos. La relación del diseñador y el cliente establecerá el camino que seguirá la producción.
The desing briefEs importante el papel del cliente ya que este determinará como será el producto final. En esta parte de la producción se establece lo que el cliente desea obtener. Comercial web desingEste término se refiere al uso de los sitios web como forma de vender un producto o de hacer publicidad a un producto.

The creative process: Tiene que ver con la forma en que se establecerá la comunicación entre el diseñador y el usuario para la trasmisión de un masaje persuasivo. El diseñador hace uso de softwares diversos para lograr crear un buen diseño visual. En el proceso creativo se desarrolla el proyecto, ya no hay planeación sino ejecución
.

Diseño de usabilidad en la interfaz gráfica de usuario.

Diseño de usabilidad en la interfaz gráfica de usuario
El espacio donde el diseño formaliza el lenguaje para facilitar el uso es la interfaz. La interfaz es el area de comunicación entre el hombre y la maquina. La interfaz se genera entre el ser humano y un artefacto virtual o entre el hombre y un artefacto real.

Los diseñadores digitales son herederos del diseño editorial en tanto éste ha sido el encargado de organizar y presentar la información para la tecnología impresa, siendo los diseñadores de interfaz los encargados d formalizar y presentar la información en la tecnología digital. El diseño digital y el diseño de la interfaz grafica de usuario es una disciplina en sí misma, hija directa del diseño industrial, del diseño de señalización espacial, del diseño editorial y del diseño de la información.
La labor principal de un diseño responsables que los artefactos sean “usables”. La usabilidad, o capacidad y facilidad de uso de un artefacto, una aplicación, un formulario o una web es una característica implícita del ámbito del diseño.

El diseñador digital debe conocer arias disciplinas, las interioridades del diseño de la usabilidad y el diseño visual e la interfaz grafica de usuario; además debería intentar mantener una mirada inocente y primeriza hacia los artefactos tecnológicos.

Fundamentos del diseño de usabilidad.
La Organización Internacional para la Estandarización (ISO) propone dos definiciones:

· La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones especificas de uso.
· Usabilidad es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso especifico.

La usabilidad depende de estos tres factores:
1. El usuario
2. El artefacto
3. El contexto

El usuario usa herramientas y genera espacios para el diseñador, este diseña la interfaz a partir de la tecnología que genera experiencias para el usuario. Este proceso se lleva a cabo dentro de un contexto. Es un esquema de la relación entre el diseñador, la tecnología y el usuario, dentro de un contexto determinado.

Las posibilidades de acción y de uso que el diseño de la interfaz debería dar al usuario las resume Donald Norman en cuatro puntos fudamentales:
· Facilitar la determinación de qué actos son posibles en cada momento.
· Hacer que las cosas sean visibles, comprendiendo el modelo conceptual del sistema, los diversos actos posibles y los resultados de estos actos.
· Hacer que resulte fácil evaluar el estado actual del sistema.
· Seguir las topografías naturales entre las intenciones y los actos necesarios, entre los actos y el efecto consiguiente, y ente la información que es visible y el estado del sistema.

Estas leyes serán las condiciones sobre en las que se fundamentará el diseño de la funcionalidad de cualquier interfaz grafica de usuario para los medios digitales (ciberespacio).
Los tres actores que van a configurar la experiencia de usuario: el usuario mismo, la tecnología y el diseñador digital.

El usuario se conecta al ciberespacio para realizar acciones. Todas estas acciones se pueden dividir en dos grupos diferentes: las acciones cotidianas y las acciones ociosas. Esta diferenciación va a determinar cómo se diseñará la inervas de cada una de ellas.

En el ciberespacio: el usuario querrá tener una experiencia más cotidiana o más ociosa en función de la tarea que realice y de su objetivo. Habrá sistemas que deberemos diseñar con el formato de tarea o de acción cotidiana, otras con el formato ocioso, y por ultimo híbridos que permitan realizar una u otra acción.

Para las tareas cotidianas el usuario necesitará una estructura somera o estrecha. La estructura somera dispone de muchas posibilidades de acción.
Una estructura estrecha y profunda tiene una o dos posibilidades que van profundizando de una acción sin más posibilidades. (Acción de pago con tarjeta).

Para las tareas ociosas empleamos ancas y profundas. Es un sistema de posibilidades de acción amplio (ancho) con una gran profundidad espacial. (Videojuegos)


Modelos mentales.
Un modelo mental es el reconocimiento que un usuario hace de los elementos que aparecen representados en un entorno determinado. El usuario obtiene diferentes tipos de información:

· Información perceptiva: los elementos visuales color, tipografía e identidad del sistema.
· Información funcional hipertextos, iconos, botones, imágenes, textos, banners, etc.
· Información jerárquica: la barra de menú.
· Información secuencial: va en función de la secuencia, su entorno se establece como secuencia.

El modelo mental desempeña varias funciones: ser un mecanismo de comprensión del medio, una guía para la ejecución de acciones del usuario, una orientación en la atención sobre las cosas que tienen más interés para el usuario y una forma de almacenar información.

Usuarios.
El usuario promedio no existe, nadie es un usuario promedio. En realidad una web ha de diseñarse para un usuario concreto sacado de la realidad porque los usuarios reales tienen unos conocimientos, comportamientos, objetivos y necesidades concretos, y el usuario promedio obtenido de un estudio de mercado es demasiado vago para ser útil.

Accesibilidad.
Consiste en el acceso a la información sin limitación alguna por razón de deficiencia, dicpacidad o minusvalía. La accesibilidad mejora el acceso a la web en general.
La tendencia del diseño digital es la de integrar la tecnología para todos los usuarios en cualquier nivel de percepción o situación perceptiva.


La experiencia del usuario.
La finalidad de un diseño de interfaz (diseño de usabilidad mas diseño visual) es obtener una experiencia de usuario exitosa. La experiencia de usuario es el conjunto de sensaciones, valoraciones y conclusiones que el usuario obtiene de la utilización de un artefacto.

Las variables culturales del usuario dependerán del conocimiento que éste tenga en el uso de artefactos similares al sistema que le planteamos. El usuario recupera conocimientos de su propia cabeza y el mundo para interactuar con el sistema.

Norman establece tres tipos de memoria diferentes:
· Memoria de cosas arbitrarias: esta memoria es la que recoge los conocimientos y datos que no tienen una relación semántica con otros. Depende completamente de un aprendizaje forzado.
· Memoria de relaciones significativas: es l que utiliza recursos de significado que ya se encuentran en la memoria para integrarlos en otros adquiridos recientemente y de esta forma interpretar con mas facilidad un sistema.
· Memoria mediante explicación: ésta será posiblemente el tipo de memoria más potente; es la base de la consolidación de los modelos mentales.



Factores para mejorar la usabilidad:
· Fomentar la anticipación: evitar que el usuario pierda tiempo buscando opciones o pasos obvios. Es importante conocer cuáles son las posibilidades del sitio web y cuáles son las expectativas del usuario.
· Dar autonomía al usuario: controlar un espacio abarcable, no infinito.
· Sensación de estabilidad: el usuario necesita puntos de referencia. Es importante saber qué objetos son o no son susceptibles de ser seleccionados y con cuáles podemos realizar acciones. Al igual que es importantes conformar un espacio limitado, también lo es diseñar un espacio de posibilidades y de acción limitados.
· Evitar los problemas con el color: ser cuidadoso con los contrastes de color y la lección de los colores que aparecerán en nuestro sitio web.
· Consistencia: se consigue cuando facilitamos que los conocimientos adquiridos por el usuario en la utilización de determinadas herramientas puedan ser transferidos a la utilización en otro programa sin ningún problema.
· Elementos “por defecto” coherentes: es necesario dar opciones por defecto adecuadas, de tal forma que sean las más corrientes. También es importante que se puedan sustituir de forma sencilla y clara, describiendo además que son opciones comunes y que puedan restablecer en un momento dado.
· Aumentar la eficiencia del usuario: centrarse en la productividad de sus tareas, no en las del sitio web. Unificar acciones posibles, ordenarlas en el sentido adecuado y lógico para el usuario.
· Diseñar interfaces verdaderamente explorables: señalizar de forma clara las posibles acciones que puede desarrollar el usuario en nuestro sitio web para que su recorrido sea lo mas rápido y cómo posible,
· Manipulación directa: permite a los usuarios sentir un control directo sobre los objetos representados en el ordenador. Las acciones que realiza el usuario deben ser inmediatamente visibles sobre la pantalla.
· Mirar y apuntar: todas las acciones que son posibles con el objeto seleccionado están en los menús; así, cuando el usuario no está del todo segurp de las posibilidades que tiene, puede recurrir a repasar los menús y ver las posibilidades de acción con las que cuenta.
· “Feedback” y dialogo: cuando un usuario inicia una acción, indicada por un signo visual o auditivo, este debe tener conocimiento, aunque sea de manera superficial, de lo que está ocurriendo, así como del tiempo que falta para que la acción termine.
· Proporcionar reversibilidad: es una de las características mas importantes del ciberespacio, su capacidad para retroceder en el tiempo de las acciones, permitir equivocarnos y poder corregir nuestras acciones.
· La ley de Fitts: el tiempo para alcanzar un objetivo con el ratón en la interfaz depende de la distancia y del tamaño del objetivo.
· Reducir los tiempos de espera: es proporcionar al usuario cias alternativas de acción.
· Reducir la curva d aprendizaje: diseñar una interfaz donde los pasos que tiene que seguir el usuario sean claros y escalados. El objetivo es que puedan ser fácilmente utilizados desde el primer momento.
· Usar adecuadamente las metáforas: puede ayudar a que la curva de aprendizaje sea menor. Las metáforas generan modelos mentales que pueden ser aplicables posteriormente a otras metáforas.

domingo, 21 de septiembre de 2008

SEGUNDO PARCIAL

Un nuevo proyecto nos han pedido. Tenemos que realizar una página web con el tema que nos haya tocado, usando programas como Flash y Fotoshop. El tema que abordaremos será: el cuidado del agua.

jueves, 4 de septiembre de 2008

Proyecto

Inicio:
El tema trata sobe mi vida, quién realmente soy. También hablaré sobre mis gustos, disgustos, mi familia y amigos.
La idea es que las personas que entren a mi blog conozcan una parte de mí, que sepan quien realmente es Cristina. Daré a conocer las características que me describen, lo que pienso, lo que siento y lo que veo.

Qué necesito:
· Necesitare fotos de mi familia, amigos y mi persona; así como también imágenes que proyecten mis sentimientos y mis gustos.
· Este proyecto se llevará a cabo en el programa “I movie”; también utilizaré fotoshop para modificar unas fotografías.
· La música que usare será de: Barry White, Coldplay, Micheal Jackson y tonos que ofrece el programa “I movie”.

Cómo lo haré:
Este proyecto lo haré mediante un compilado de fotos sobre mi infancia, mi familia, mis amigos, mis sentimientos y gustos. Usaré diferentes canciones que vayan acorde a las fotos que esté presentando.
Las fotos tendrán el siguiente orden:
· Primero presentaré fotos sobre mí, desde que era pequeña.
· Luego presentaré fotos con mi familia.
· Después aparecerán las fotos de mis amigos.
· Aparecerán fotos de ¿Quién es Cristina?:
1. en el cual saldrá la música que más me gusta,
2. después saldrán fotos de mi bailando en diferentes escenarios,
3. y por último los valores, sentimientos que me describen como persona.