Metodología Diseño de Interfaz

Está es una metodología de un libro de diseño adaptada al diseño de interfaz, acomodé y modifiqué algunos pasos para que se entendiera mejor.
Haz click en Fullscreen para verlo en grande.
Metodología Diseño de Interfaz ">

Sesión 6 REFLEXIÓN

En la clase 6 (el lunes 25) vimos un pequeño resumen de la clase anterior, también vimos lo que es un SaaS (Software as a Service) que ser refiere a un modelo de desarrollo de software por el que un proveedor autoriza una aplicación para los clientes para uso como servicio o demanda. Analizamos 4 tipos de Aplicaciones:
-Publicación: La difusión o comunicación de cualquier información para que sea conocida.
-Transacción: por ejemplo las que usan los bancos.
-Colaboración: se ayuda a lograr un fin dentro de una empresa.
-Proceso Corporativo: para que las empresas cambien información.
Consideramos la diferencia entre CLIENTE y USUARIO:
CLIENTE: Es al que le trabajamos pero no para el que hacemos el diseño.
Ej: Diseñamos una revista en donde la editorial es nuestro cliente y los usuarios vendrían siendo los que leen la revista.
USUARIO: Las personas a las que va dirigido nuestro producto y/o servicio. Los diseñadores trabajamos para los usuarios y para esto tenemos que pensar como ellos.
Por último se detallaron las APROXIMACIONES:
1.- Estética: diseñar la imagen de una Interfaz.
2.- Pragmático: solo busca el negocio, generar cosas de éxito, lo que sirve o funciona. (por ejemplo colocar una imagen impactante como portada de una revista porque sabes que venderá). Estudia el lenguaje en relación con el acto del habla.
3.- Epistémico: conocimiento sobre el conocimiento de tu enfoque.
En cuanto a los comentarios hacia 3 de mis compañer@s decidí esta vez cambiarlos y comentar en los blogs de: Jessica, René y Raúl.

Ventajas de WIKI

Ya analizamos una de las desventajas de wiki , ahora es el momento de analizar las VENTAJAS.
La principal utilidad de un wiki es que permite crear y mejorar las páginas de forma instantánea, dando una gran libertad al usuario, y por medio de una interfaz muy simple. Esto hace que más gente participe en su edición, a diferencia de los sistemas tradicionales, donde resulta más difícil que los usuarios del sitio contribuyan a mejorarlo.
Dada la gran rapidez con la que se actualizan los contenidos, la palabra «wiki» adopta todo su sentido. El documento de hipertexto resultante, denominado también «wiki» o «WikiWikiWeb», lo produce típicamente una comunidad de usuarios. Muchos de estos lugares son inmediatamente identificables por su particular uso de palabras en mayúsculas, o texto capitalizado - uso que consiste en poner en mayúsculas las iniciales de las palabras de una frase y eliminar los espacios entre ellas - como por ejemplo en EsteEsUnEjemplo. Esto convierte automáticamente a la frase en un enlace. Este wiki, en sus orígenes, se comportaba de esa manera, pero actualmente se respetan los espacios y sólo hace falta encerrar el título del enlace entre dos corchetes.

Sesión 5 EXTRACLASE

EXTRACLASE: Customizar 5 aplicaciones y moverle el skin (apariencia, botones, etc.) a 5 aplicaciones diferentes, presento también el antes y el después con los cambios hechos.

• Decidí cambiarle primero el skin a Google Chrome, a pesar de que el diseño de su interfaz es buena, quise darle más vivacidad a la página además de añadirle algunas páginas que uso al Estado Zero. Google Chrome esta hecho en Google Chrome frame el cual leí que esta haciendo un plug-in para Internet Explorer según está página: http://www.rizwanashraf.com también viene un video del Google Chrome Frame.



• Igualmente le cambie el skin a Flash CS3 al modo en que se me hace más fácil usarlo, antes tenía casi todas las herramientas fuera, lo cuál me distrae un poco, por lo tanto decidí acomodar mi espacio de trabajo de una manera más sencilla en donde tengo algunas de las herramientas del lado derecho sin desplegar al igual que las del lado derecho las cuales no modifique por que no las utilizo bastante y no me distraen, la línea del tiempo se encuentra arriba y las propiedades abajo y solo las despliego cuando las necesite. Encontre que Flash CS3 esta compuesto por GAIA el Framework que utiliza Adobe Flash y el fCMS que te permite subir texto e imágenes. No sabía que se podían utilizar ambos.



• Modifique también el skin de mi sistema operativo el cuál estaba un poco desorganizado, pero después hice algunos cambios como el modificar de lugar la barra de los programas que uso (de inferior al costado izquierdo), el tamaño de los iconos, la letra y la preferencia de mostrar el peso de cada documento, al igual que establecí preferencias para ver todas las ventanas que tengo abiertas con tan solo llevar el cursor a la parte superior derecha, entre otras cosas. Así llevo un mejor orden y accedo a las cosas de manera más rápida.



• Mi blog: lo que hice fue cambiar de una plantilla más viva a una un poco más seria, se modificó el lugar en donde tenía ordenadas mis entradas, el color de la tipografía, entre otras cosas, la verdad es que me gusta más como se ve ahora. CMS BLOG.




• Por último modifique el skin de iTunes, este es un caso en el cuál no había experimentado a pesar de que es una plataforma que uso cada vez que enciendo mi computadora, antes usaba el iTunes de manera extendida y me mostraba siempre todos mis artistas favoritos, etc. Después lo cambie de una forma en la que ahora me ahorra más espacio por que es más pequeño y no me estorba cuando estoy trabajando.

Wikis, un pequeño problema los separa de la perfección

Ya vimos lo que son las wikis ( sitios web cuyas páginas pueden ser editadas por múltiples usuarios) ¿Qué tan beneficioso y seguro puede ser esto? El beneficio sería que gracias a enciclopedias en la web como Wikipedia podemos encontrar muchos temas y definiciones de manera muy rápida sin tener que ir a la biblioteca, lo cuál nos ahorra mucho tiempo (aunque sería más apropiado tomar un libro y leerlo por nosotros mismos), la desventaja de una enciclopedia libre en la que todos los usuarios pueden participar es que nunca sabes que tan preparada o informada está la persona que redacto la definición que estás buscando.
Más adelante analizaré por otro lado las ventajas que tienen las wikis.

Reflexión sesión 5

En esta clase analizamos lo que son los tipos de aplicaciones, pero ¿Qué es una aplicación? una aplicación es un tipo de programa informático diseñado como herramienta para permitir a un usuario realizar uno o diversos tipos de trabajo. Vimos lo que son los FRAMEWORK y el CMS, el primero es un soporte integrado con artefactos de software concretos, mediante la cual otro proyecto de software puede ser desarrollado; y el Segundo es un conjunto de procedimientos utilizados para manejar el flujo de trabajo en un entorno de COLABORACIÓN. Estos procedimientos pueden ser manuales o basados en computadoras. Una de la diferencias que destacó el maestro entre ambos es que Framework nos permite hacer cosas más origniles y fuera de lo común y CMS es un poco más ordinario. Dentro de cada uno de estos se despliegan varias aplicaciones de lenguaje de programación que para nosotros como diseñadores pueden ser muy útiles.
Dentro de la clase surgió un n uevo proyecto, el comentar a 3 compañeros diferentes por lo menos 2 veces a la semana, yo comenté en los blogs de Claudia Álvarez, Claudia Gardea y Ana Paula. Los 3 me parecieron blogs muy interestantes y diferentes entre si, no había tenido la oportunidad de checarlos con detalle hasta ahora.

Extra clase y comentario de la clase del lunes 18 de enero

http://www.megaupload.com/?d=NQGSRVCU

La Creación de Wikipedia

En enero de 2001, los fundadores del proyecto de enciclopedia Nupedia (fue una enciclopedia en línea cuyos artículos fueron escritos por expertos y registrados bajo licencia de contenido libre.), Jimbo Wales y Larry Sanger, decidieron utilizar un wiki como base para el proyecto de enciclopedia (Wikipedia). Originalmente se usó el software UseMod, pero luego crearon un software propio, MediaWiki (un motor para la wiki), que ha sido adoptado después por muchos otros wikis. La principal novedad del MediaWiki fue la aparición de un sistema jerárquico de categorías para ordenar las páginas, esta herramienta permite a muchas comunidades de usuarios compartir información importante y de forma colaborativa

¿Cómo se crearon los WIKIS? proyecto de investigación WEB 2.0

- El primer Wiki fue creada por Ward Cunningham un programador de "patterns" (patrones para programación") y del WikiWikiWeb. Se graduó en ingeniería interdisciplinaria (eléctrica y de computación) y tiene una maestría en ciencias de la computación de la Universidad de Purdue. Cunningham explica que el concepto del wiki se le ocurrió al final de los años 1980, el mismo define un wiki como ''la base de datos en línea más simple que pueda funcionar''. La palabra wiki es de origen hawaiano que significa hacer las cosas de forma sencilla y rápida.

COMENTARIOS DE LA CLASE DEL VIERNES 15/ENERO:

La clase abarco la diferencia entre una interfaz de hardware: que son los dispositivos que permiten la interacción con una máquina (teclado, Mouse, etc.) y una interfaz de software: son los programas que permiten expresar nuestros deseos a la máquina y obtener de esta una respuesta.
También vimos lo que son las máquinas de propósito específico (como un teléfono fijo) y las máquinas de propósito general: como lo es una computadora que nos permite hacer varias cosas. Lo que no me quedo muy claro fue la definición del Software embebido. Analizamos el Sistema Operativo desde su definición (software que nos permite comunicarnos con otros softwares dentro de una máquina) hasta las interfaces por las que ha evolucionado, y las diferentes aplicaciones que permite que cargue una computadora contando con sus respectivas interfaces diseñadas para el usuario las cuales separamos en diferentes categorías como:
- de Edición: edición de fotografía, de texto, de video, entre otras.
- Entretenimiento: juegos, dibujo, música,etc.
- Organización
- Manipulación de contenido: como Word
- Para tareas Especificas: como de contabilidad, etc.

EXTRA CLASE: ANALIZAR UNA INTERFAZ DE SOFTWARE

La TAREA consiste en analizar una interfaz de Software tomando en cuenta los requerimientos necesarios para que funcione correctamente según Apple y ver si cumple o no con los puntos estándar para hacer una interfaz.
- El Software que yo escogí fue Adobe InDesign CS3 y acuerdo a las guías de Apple para crear una interfaz, este programa se ajusta a la mayoría de las guías que son las siguientes :
• Los usuarios deberán aprender rápidamente la aplicación si la interfaz luce como las aplicaciones con las que están familiarizados. Definitivamente este programa cumple con lo establecido en este punto ya que sus herramientas son fáciles de aprender y son muy similares a otros programas de la suite de Adobe.
• Los usuarios deberán lograr sus tareas rápido. Gracias a los comandos dentro del programa es sencillo hacer trabajos de forma más eficaz.
Los usuarios con necesidades especiales encontrarán el producto más accesible. En este punto faltaría definir a qué se refiere con ‘’accesible’’
• La aplicación deberá ser al mismo tiempo de apariencia moderna, elegante como las otras aplicaciones de Mac OS X. Adobe InDesign cumple con este punto ya que su diseño es cada vez más vanguardista como los son otras aplicaciones de Mac.
• La aplicación deberá ser fácil de documentar, por que una interfaz con comportamientos estándar no requiere de mucha explicación. Así es como sucede con este programa, podemos documentar archivos y exportarlos de manera sencilla y los pasos son fáciles de recordar y no se necesita de mucha explicación.
• La aplicación debe de ser fácil de localizar.
Ahora presentaré algunos puntos en los que estoy segura de que InDesign en todas sus evoluciones ha cumplido. Estos puntos son los FUNDAMENTOS DEL DISEÑO DE APLICACIONES de Apple que se enfoca en la filosofía y psicología que existe debajo de la creación de los Software de Macintosh:
-Envolver a los usuarios dentro del proceso de diseño: Esta es la mejor manera para segurarte de que tu producto conoce las necesidades de la audiencia a la que va dirigida y esto es exponiendo tus diseños a un examen profundo para los usuarios y ver si hay problemas para después modificarlos en el software.
-Conocer a tu Audiencia: conocer e identificar al público al que va a ir dirigido el software es importante por que te permite entender y diseñar un mejor producto de acuerdo a lo que necesiten. Es importante recordar que no estamos diseñando un Software para nosotros sino para ellos.
-Analizar las tareas del usuario: después de identificar tu audiencia necesitas definir y anañlizar las tareas que tus usuarios podrían realizar.
-Construye prototipos: es una buena manera de verificar que tan bien funcionará el software para los usuarios. Puedes crear prototipos de software para similar cuáles serán las características de tu producto o para demostrar cómo operan. Dentro de esta face no esta de más observar a los usuarios, esto quiere decir cómo es que se desenvuelven con el uso del software y que tan fácil ly cómodo les resulta de operar.
-Tomar desiciones en el diseño: es importante checar algunas cosas como: que tan lento se comportará una aplicación, que la interfaz sea más compleja, etc.
- Elimina cascadas: puede ser muy tentador añadir nuevas herramientas pero ¡ten cuidado! Esto puede hacer que el software sea más lento y difícil de usar por su complejidad solamente añade aquellas herramientas que sean realmente relevantes o que hagan el trabajo más fluido. Recuerda que los mejores productos no son aquellos con más herramientas sino los que brindan más soluciones y son más útiles.
-Aplica la solución del 80%: Si descubres problemas con tu diseño aplica la solución del 80%, esto quiere decir diseñar tu software acuerdo a las necesidades de al menos el 80% de la audiencia a la que va dirigida, es una manera elegante de resolver los problemas. Si tratas de diseñar tu software para un 20% de tu audiencia suponiendo que son tus principales usuarios, tu diseño no será útil para el 80% restante de los usuarios. Aunque se muy probable que ese 20% tenga buenas ideas para tu producto la mayoría de tus usuarios no pensarán de la misma manera. Envolver tu proceso de diseño a ese 80% de los usuarios te ayudará a encontrar el 80% de la solución.

DEFINICIÓN DE WIKI

wiki es un sitio web cuyas páginas pueden ser editadas por muchas personas a través del navegador web. Los usuarios pueden crear, modificar o borrar un mismo texto que comparten. Los textos o «páginas wiki» tienen títulos únicos. Si se escribe el título de una «página wiki» en algún lugar del wiki entre dobles corchetes (...), esta palabra se convierte en un «enlace web» a la página wiki.
La aplicación de mayor peso y a la que le debe su mayor fama hasta el momento ha sido la creación de enciclopedias colaborativas, género al que pertenece la Wikipedia. Existen muchas otras aplicaciones más cercanas a la coordinación de informaciones y acciones, o la puesta en común de conocimientos o textos dentro de grupos.

WIKIS (proyecto de investigación)

‘’Wikis’’: Cuando oí el término de ‘’Wikis’’ pensé inmediatamente en Wikipedia (como la mayoría) pero wikis no es precisamente Wikipedia, mejor dicho esta última forma parte de las wikis. Me di cuenta de la función de las wikis por que en la investigación de una tarea me topé con otra página que usa las famosas WikiAnswers, en donde las respuestas de un tema pueden ser editadas por muchas personas, esto puede ser muy útil por que encuentras la respuesta a lo que estás buscando de una manera mucho más rápida. Por el momento no tengo muy bien definido lo que son las WIKIS pero seguiré buscando otras formas de como definirlas y dejar en claro cómo y para qué se usan.

PROPUESTA DE LA INTERFAZ DE UNA LÁMPARA

PROPUESTA DE LA INTERFAZ DE UNA LÁMPARA
Mi propuesta (como se puede ver en la imagen de arriba) es crear una lámpara más funcional además de darnos luz. Imagine primero una lámpara de buró, la que normalmente tenemos en nuestro cuarto, tomando en cuenta de que esta a un lado de nuestra cama pensé en las funciones que le podía anexar a la lámpara y fueron las siguientes:
- Que tuviera una base con las siguientes funciones:
1.- Un botón giratorio para nivelar la intensidad de la luz.
2.- Un Reloj digital con despertador integrado con 27 tonos diferentes.
3.- La opción de SLEEP para indicar en cuánto tiempo queremos que la lámpara se apague.
4.- Un portaplumas (muy útil para cuando estas trabajando en tu cama, además que evita poner las plumas en lugares diferentes y perderlas).
Por último en el tallo de la lámpara se encuentran 2 botones para subirla o bajarla con 40 centímetros de alto como máximo (esto nos sirve principalmente cuando estamos leyendo y necesitamos que la lámpara nos ilumine de un poco más arriba).

Comentarios de la clase del 11 de enero
En la primera hora checamos el cronograma, el cual incluye lo que estaremos realizando en cada sesión esto nos ayuda a tener un control y llevar un orden. En la segunda hora checamos algunas definiciones como la de interacción e interfaz, la primera es una acción que se ejerce recíprocamente entre 2 cosas, personas, etc; la segunda es la zona en donde se presenta un conjunto de elementos para lograr la interactividad entre el usuario y la máquina. Después vimos los elementos de la interfaz los cuales son: de entrada, de acción y de salida, en un principio no entendí muy bien a lo que esto se referia pero después del ejemplo del coche me quedo claro.
El carro: de entrada: el abrir la puerta con un botón, el acelerador; de acción la radio; de salida el freno de pie y de mano (esto por decir algunos).
Los de entrada se refieren a aquellos elementos que nos introducen con la máquina, los de acción son los que usamos para ejecutar una tarea y losde salidalos empleamos para desconectarnos de la máquina. En mi opinión es bueno presentar varios ejemplos de los temas que vemos para que quede claro como se hizo en la clase anterior.

Trabajo extraclase

Comentarios acerca de las interfaces

que utilice el fin de semana

1.- Mamáquinas (máquinas para el hogar): Son indispensables para realizar tareas de manera más sencilla y rápida, por ejemplo el refrigerador nos ayuda para que se conserven lo alimentos por más tiempo, la estufa para calentar la comida incluso ya existen estufas que no utilizan el fuego y son todavía más rápidas.

2.- Las Onanomáquinas: Estás son la máquinas que nos complacen, es cierto que por una parte la tecnología nos hace cada vez más inútiles ya que nos facilita la vida incluso muchas veces sin necesidad de levantarnos del sillón y solo apretando un botón, pero por otra parte nos ahorra tiempo para que podamos hace otras cosas o incluso hacer 2 o más cosas al mismo tiempo.

3.- Personales: Los artefactos personales están diseñados para que el usuario los lleve consigo y pueda hacer uso de ellos como el celular que nos permite comunicarnos (por medio de una interfaz) con otras personas a la hora que queramos sin depender de un cable o enchufe.

4.- Máquinas Públicas: los cajeros automáticos: nos permiten hacer retiros de dinero sin necesidad de estar formados por cierto tiempo en la fila de un banco, además de que brinda seguridad estando en un espacio cerrado en donde solo se encuentra el usuario y la máquina y la interfaz de esta es muy fácil de usar solo colocas tu tarjeta, tu NIP y la cantidad de dinero que deseas retirar y en cuestión de segundos obtienes tu dinero. Sin duda sin la ayuda de estás máquinas el día no nos rendiría para hacer muchas actividades, no me había dado cuenta ni valorado lo importante que son hasta ahora que lo estoy haciendo de tarea yo creo que nunca lo había valorado porque nunca he tenido la necesidad de hacer fila en un banco para sacar dinero.En cuanto a los semáforos que son máquinas públicas se podría decir que sin estos las vías en las ciudades serían un caos, no habría orden ni respeto por los peatones y los accidentes automovilísticos se darían con más frecuencia. Ahora los semáforos han evolucionado más por ejemplo los que avisan a los peatones cuando pueden cruzar la calle e incluso para la gente que no puede ver se les avisa por medio del sonido, también hay semáforos en los que el peatón solo aprieta un botón para que se ponga en rojo y así poder cruzar las calle.

Interacción con las máquinas el fin de semana:

1.- Onanomáquinas:

- La Radio: el botón para subir el volumen y el 1, 2 y 3 para cambiar la estación.

- Calefactor: el botón de + y – para subir y bajar la intensidad.

-El control del DVD: el botón de STOP y PLAY.

2.- Comunicación 2 vía:

-Teléfono: los botones numéricos.

3.- Mamáquinas (Máquinas para el hogar)

- La licuadora: el botón giratorio para subir la intensidad.

- La máquina de Skimo: para hacer una malteada. Únicamente enchufando la máquina y colocando el vaso.

4.- Personales:

-Laptop: el teclado para hacer la tarea en Word, para usar Messenger y crear mi blog.

- Celular: para escuchar música conectando los audífonos al celular y usando el Touch Media.

5.- Transporte Personal:

-El automóvil: el volante y los botones del estéreo.

Resumen del Dossier:

Primeramente el alumno deberá generar una conciencia acerca de las interfaces con las que interactúa a diario, a partir de esto en el transcurso de las clases aprenderemos cómo crear de una manera dinámica y funcional una interfaz tomando en cuenta algunos conceptos que nos serán de utilidad para comprender los diferentes elementos que la componen. Con esta información seremos capaces de ser críticos en el ámbito del diseño de interfaz pero al mismo tiempo creadores del mismo entendiendo y siendo empáticos con el usuario para poder solucionar problemas y tomar decisiones coherentes haciendo uso de las interfaces.