Tag Archives: Profesión

Sitio web de la Biblioteca Franciscana

Ahora que la web puede accederse desde una PC, una laptop, un SmartPhone o una tableta, se nos presenta una paradoja a los diseñadores: debemos creer en la estructura semántica del contenido de las páginas, pero también hay que cuidar más que nunca la presentación de la información considerando tanto al usuario como el dispositivo a usar.  Últimamente me ha llamado la atención estos sitios que aprovechan las ventajas del CSS para ajustar sus layouts dependiendo de su resolución, así que aproveché experimentar con un proyecto de rediseño web que tenía  pendiente: La Biblioteca Franciscana.

Mi solución es bastante artesanal y no tiene nada de sofisticada. Aunque hay artículos bastante completos sobre el tema, yo había leído alguna vez que tenía que ver con el viewport, y entre los resultados de mi búsqueda di con el uso del parámetro media y los CSS Media Queries. En los siguientes recursos está cómo emplear diferentes hojas de estilo dependiendo del medio:

http://css-tricks.com/6206-resolution-specific-stylesheets/

http://css-tricks.com/6731-css-media-queries/

http://www.w3.org/TR/css3-mediaqueries/

http://reference.sitepoint.com/css/mediaqueries

http://www.css3.info/preview/media-queries/

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://www.thecssninja.com/css/iphone-orientation-css

En cuanto al diseño web, siempre tuve una preferencia por layouts fijos por tener un mayor control del espacio en ventana y por tomar en cuenta la resolución estándar de un usuario potencial. Nunca me había preocupado porque la información quedara bien acomodada en diferentes resoluciones; es un reto interesante conservar la estética reticular y mantener un flujo de lectura adecuado para cada resolución. Este tipo de soluciones requiere que tengamos una actitud algo quisquillosa y obsesiva, así como trabajar cada layout hasta quedar satisfechos.

Justo por el cambio de "paradigma" de fijo a adaptable, y ante una especie de "bloqueo ante la hoja en blanco", no quedaba conforme en (regresar a) maquetar primero en algún software de diseño, así que lo trabajé directo en pantalla. Un pro de esta decisión es que vas viendo "en tiempo real" como quedan las cosas en diferentes navegadores y resoluciones. Un contra es que podemos perder el control fácilmente —sobretodo si dejamos el proyecto un día o dos. Es importante hacer anotaciones en papel y documentar en las hojas de estilo para que recordemos por qué tomamos ciertas decisiones. En este proyecto, me resultaron —a mi juicio— muchas hojas de estilo y fui redundante en ciertas reglas, dejándolas en cada hoja porque no sabía como iba a verse "el final" en todas las resoluciones; algo así como "un cambio por aquí y luego ajusto por acá".

Con un layout fijo no considero útil que tengamos muchas hojas de estilo, pero dadas las múltiples resoluciones, parece ser necesario un mayor número de "enlaces". Un colega me sugirió hacer importaciones, pero al final descarté esta opción porque según hojeé, afecta el rendimiento:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Otro punto importante es verificar la compatibilidad de los CSS Media Queries. Originalmente estaba muy feliz —tipo the Oatmeal— porque IE se comportaba decente; pero por no leer, me llevo la sorpresa de que fuera de IE 9, simplemente no funcionan:

http://caniuse.com/css-mediaqueries

Ante esta situación, decidí dejarle un layout fijo a todos aquellos usuarios que tuvieran de IE 8 para abajo y tomando como resolución estándar 1024 px de ancho.

Luego está el asunto del iPhone y del iPad. Hay que poner una línea de código que indique qué va a pasar cuando el navegador sea Safari. Esta línea asocia la variable "ancho" empleada en el CSS Media Query con el "ancho" del iPad, iPod o iPhone —según sea el caso. Además, resulta que cuando pasamos de modo landscape a portrait, o viceversa, se hace un zoom medio raro y es posible que los textos se desplieguen de diferente tamaño a como los observamos en una computadora de escritorio. Para validar todo lo anterior está como referencia el siguiente recurso:

http://stackoverflow.com/questions/2977550/iphone-safari-css-rotation-bug

A mi me divirtió mucho esta idea de presentar el mejor layout dado el ancho del iPod, iPhone o iPad. Sin embargo, siendo sinceros y "usables", la desventaja de jugar con diferentes acomodos de la información es que rompemos con la navegación (browsing) del usuario. Cuando alguno de estos dispositivos se rota 90 grados, debido a este re-acomodo, el usuario pierde vista la información de su interés. Lo anterior es más evidente en el caso del iPod/iPhone. Cognitivamente, lo que hacemos es "resetear"  el flujo de interacción; definitivamente algo no bueno para ningún usuario. En este proyecto, la mayoría de la información es estática y aquella que podría cambiar o agregarse durante el año, estará ubicada en la parte superior de las páginas correspondientes.

Una colega me señaló que estos ajustes automáticos no siempre convenían si trabajamos en una computadora de escritorio  —o en una laptop con pantalla grande — porque quizá el re-acomodo de la información podría perjudicarnos cuando llevemos a cabo una tarea más compleja, donde trabajemos con la información proveniente de diversas ventanas. Se me hizo un punto válido; por ejemplo, yo mismo he copiado y pegado información de una página web a Word o Excel. En este tipo de situaciones, debería de haber una opción para "fijar" el layout.

Por último, no olviden visitar http://ciria.udlap.mx/franciscana/ para enterarse de qué conferencias y exposiciones habrá en dicha biblioteca. Saludos :)

¿Saber o no saber? He ahí el dilema

Recuerdo que cuando estábamos en la licenciatura —en Ciencias de la Computación— mis amigos y yo decíamos que era horrible tener materias de relleno. En particular, el tema salió porque cuestionábamos para qué llevar una materia que se llamaba "Relaciones Humanas". Un par de años después en una reunión salió, entre risas, que dicha materia era la única que realmente había servido hasta el momento. Sobretodo, recordando lo primero que puso nuestro profesor en la pizarra: dibujó un círculo y luego lo dividió como gráfica de "pay" señalando que 1% son conocimientos y 99% relaciones humanas.

Es probable que no quedemos satisfechos con lo aprendido en la universidad jamás, no importa la licenciatura que hayamos o estemos estudiando. Parece que el problema es que los cursos universitarios son suficientes desde un punto de vista formativo —te dan las bases para crecer como profesional, como si fuera un trampolín— pero insuficientes desde un punto de vista laboral y práctico —y es que colegas diseñadores me han enseñado y confirmado que sólo haciendo se puede conseguir la maestría sobre alguna rama del diseño.

La idea de escribir este post salió de la discusión con un estudiante de administración de empresas que comentó que los diseñadores deberían de saber sobre negocios y administración; que aquello les daría una buena "arma" para ser competitivos. Yo secundé la idea, y mencioné que esto aplica sobretodo porque somos un mar de personas trabajando en el área. Sin embargo, mencioné que aunque era buena la idea, su insistencia tenía que ver con su formación. Comenté que de igual forma él debería aprender cosas sobre diseño o bien, aprender a hacer investigación y a escribir y publicar artículos, ya que no solo sería bueno para transmitir el conocimiento sino que también sería bueno para saber si ese camino podría ser para él. Aún más, que el mismo razonamiento podría aplicarse si a los diseñadores les enseñaran sobre Economía, Finanzas, Antropología, etc.

Luego, charlando con una colega diseñadora, salió al tema que en la escuela le habían enseñado a ser buena ejecutante gráfica pero que le hacía falta aprender a estructurar sus ideas y que eso era un factor para detener su proceso creativo. En una situación similar, de un colega diseñador he escuchado que su necesidad es tener idea de cómo constituir una empresa y saber asuntos mínimos legales y fiscales asociados a esta tarea.

¿Son estas carencias perjudiciales? No de primera mano. Es verdad que la universidad debe formar sólida e integralmente a un estudiante, pero también es una realidad que no puedes formar "todólogos" con cursos sobre todos temas "por si las moscas", ya que al final los cursos especializados serían muy pocos y entonces no existiría porque otorgar un título indicando la especialización con respecto a  alguna disciplina —sin duda, este es un problema al que se enfrentan los programas de licenciatura transdisciplinares.

Por otro lado, esta "falta de conocimientos" permite la capitalización del mismo: "yo se esto y sobre esto puedo cobrarte". El problema, al menos en el contexto mexicano, es que las empresas con tal de minimizar costos sí exigen "todólogos" y también no hay mucha cultura de trabajar en equipo —hay barreras de lenguaje disciplinar, asuntos de protagonismo, falta de administración de tiempo y objetivos, etc. Quizá la falta de dinero para pagar el conocimiento de cada quién influye mucho. Claro, no todo es "malo". He tenido la oportunidad de presenciar casos y/o situaciones donde "echar mano" y "hacer montón" han derivado en proyectos bien llevados, con resultados exitosos. Lo mejor de estos casos es que son lecciones por si mismos: ayudan a entender cuáles son tus capacidades y cuáles son tus limitaciones, desarrollar habilidades de comunicación, entender la perspectiva de otros perfiles para la solución de problemas, e incluso incrementar los niveles de tolerancia y respeto.

Entonces, el asunto no está en "saber vs. no saber", sino en "hacer y aprender". Y de vez en mucho, o cuando se reconozca que es primordial, entonces admitir que "dos o más cabezas, piensan y ejecutan mejor que una"; o dicho en otras palabras:

1% conocimientos. 99% relaciones humanas.

Saludos.

Redes sociales y la brecha digital

Fue cuando era pequeño que empecé a escuchar el concepto de "brecha generacional" y frases como "los jóvenes de hoy pueden o son más..." — con el fin de demostrar que los "peques" eran más hábiles para configurar una videocasetera que sus propios padres. Actualmente, escucho a más de un miembro de mi generación exclamar "Los niños de ahora vienen adelantados" — como si los recién nacidos vinieran con mouse en mano, que por cierto es un concepto ya obsoleto, ya que debería ser algo touch. Al parecer la brecha generacional, y que ahora más que nunca podría llamarse "brecha digital", es algo constante y que se va "recorriendo" conforme las generaciones avanzan. Y es que de este tema, me ha llamado mucho la atención como las redes sociales son justamente un indicador de dicha brecha, de manera que entre los "jóvenes" y los "adultos" existen ciertos comportamientos contrastantes.

Si le preguntamos a un "jóven", podemos encontrar que ha crecido con un hi5, un mySpace o un MetroFlog. Y que si había carencia en cuanto a la conexión casera a Internet, mínimo contaba con un selecto grupo de su lista de contactos con lo que se enviaba mensajes de texto y últimamente mensajes multimedia (sobretodo fotografías). Siendo Facebook una de las redes más populares de hoy en día, los jóvenes al parecer no tienen ningún conflicto por subir sus fotografías, etiquetar a medio mundo en imágenes o GIFs animados chuscos o compartir videos de alguna celebridad web con la que se sienten identificados.

Existe entonces una aparente transparencia o congruencia entre el yo "digital" y el yo "real". Y aunque lo anterior no sea del todo cierto, el "yo digital" puede tener una fuerte presencia e influencia ante otros, por lo que podríamos considerarlo incluso independiente del yo real. Los jóvenes no se preocupan por si salen en fotos con sus amigos en un bar para demostrar que están in (aunque no tomen alcohol o les moleste ser fumadores pasivos), haciendo una pose tonta (aunque les preocupe su apariencia en el mundo real), o comentando algo con suma ligereza (como si todos entendiéramos el contexto en el que dicha frase podría haberse dicho en el "mundo real"). La privacidad es importante, pero no es algo de lamentar: ante una realidad que produce y produce información y que ha hecho que los jóvenes sean voraces consumidores de ésta,  mientras más expuesto, mayor vigencia del yo "digital".

Las observaciones anteriores abarcan "jovenzuelos" de unos 20 y tantos para abajo. Sin embargo, observando a gente de 40 y tantos para arriba, la cosa cambia. Una persona "mayor" no puede asumir tales riesgos: la información personal debe ser cuidada y el yo "real" debe ser preservado — y esto es porque el yo "real" es en realidad una "máscara" para su otro yo más interior y que los adultos se han esforzado en construir para tener credibilidad y respeto ante sus pares con los que más conviven — los cuales obviamente están en "el mundo real" y no en las redes sociales. En más de una ocasión me han comentado usuarios de este perfil que han decido cerrar sus cuentas porque fueron etiquetados en la foto de un amigo y que no querían que dicha foto sea vista por otras personas. Y en aquellos casos donde los "mayores" no cierran sus cuentas, simplemente producen muy poca o ninguna información — aunque he observado que son unos pillines, les encanta a veces estar mirando qué publican los demás. Existe también una percepción de que las redes sociales son una tontería porque la gente sólo se dedica a "poner" puros comentarios que no son serios o importantes, como mencionar qué están haciendo o cómo se sienten. En general, hay un temor grande a no controlar la información personal y la privacidad es algo delicado para estar jugando con ella: "todo lo que diga, postee, etiquete o suba a la red, puede ser usado en mi contra" — en contra de mi yo "real".

Claro, existen las excepciones para ambos lados de la brecha. Además de que son observaciones en un contexto dado. Quizá alguien "joven" no se dedique a producir tanta información porque simplemente no puede acceder a la tecnología o que un "adulto" intente ser todo un social media expert porque su situación laboral así lo demanda. Al final, ya sea el yo "real" o el "yo" digital, su "conformación", "maduración" y "proyección" involucrarán la producción y consumo de información alrededor de alguno de éstos; no se puede escapar de este hecho, ni aún siendo ermitaño. Y en cuanto a la brecha, creo que nos afecta más cuando llegamos a esos puntos en los que estamos conformes con cómo entendemos el mundo y ya no estamos dispuestos a adoptar "nuevas tecnologías". Como diseñador, lo anterior implica "dar batalla hasta donde el cuerpo aguante", porque a pesar de que los principios del diseño son prácticamente los mismos sin importar la época, la tecnología es un factor clave para la ejecución, porque al igual que la brecha, no deja de avanzar.

 

Tres principios para mejorar el clima organizacional

Desde hace un par de años, por cuestiones de trabajo, he estado involucrado en proyectos de comunicación organizacional y últimamente en asuntos relacionados con el clima organizacional. Aunque admito que soy un neófito en estos asuntos, al discutir con los compañeros por qué no cuajan estos proyectos (después de planearlos) y con colegas de diseño de cómo trabajan en sus despachos, considero que un buen clima organizacional se puede construir a partir de estos principios:

  1. Que la gente sea respetada.
  2. Que la gente sea escuchada.
  3. Que la gente sea retroalimentada.

Que la gente sea respetada

Todos los miembros de una organización somos valiosos por ser nosotros mismos y tenemos un valor añadido por el conocimiento y experiencia aplicado a nuestras áreas de trabajo. Lo anterior es fundamental, sin embargo en la práctica y con la convivencia diaria, no es complicado que la ética de cada quién, la educación, el carácter y otros factores, provoquen que se falte al respeto dentro de la misma organización: dejar de pensar que los compañeros son personas y que merecen ser tratadas como tales. No somos orcos ni robots.

Que la gente sea escuchada

Es importante que la comunicación no sólo sea de arriba hacia abajo sino en dos vías: que no sólo se reciban órdenes sino que se escuchen a quienes las ejecutan. Tengo la conjetura de que cuando la gente no es escuchada, sobretodo a niveles operativos, el desahogo surge en forma de quejas, chismes en radio pasillo e incluso, en bilis derramada por corajes al estar en una posición donde no podemos aportar, transformar o influir en un cambio positivo para la organización. Aún más, creo que cuando hay una comunicación de dos vías, un diálogo, estas quejas pasan a ser comentarios, no tan subjetivos, que buscan dar soluciones a la problemática dentro de la organización y/o áreas de trabajo.

Que la gente sea retroalimentada

Es común que de abajo hacia arriba se realicen reportes de actividades; sin embargo, como sucede con la comunicación, es necesario definir un flujo de información de dos vías: la gente necesita ser evaluada y retroalimentada de cómo se desempeña y progresa dentro de su área de trabajo y en general, dentro de la organización. En México, varias personas con las que he platicado parecen estar de acuerdo o toman como un hecho que dentro de las organizaciones "mientras no des molestias, todo está bien". Lo anterior se traduce fácilmente en "déjame hacer mi trabajo" (desde la perspectiva de nosotros como subordinados) o "te dejo hacer tu trabajo" (desde la perspectiva del jefe). Ciertamente lo anterior no equivale a una evaluación y por ende, no se puede obtener retroalimentación. De todo lo anterior tengo la conjetura de cuando no se evalúa y retroalimenta a los miembros de una organización, la gente se cicla o se envicia, y además se genera un egoísmo con respecto al conocimiento de cómo se trabaja en cada una de las áreas de la organización. Sin embargo, implementar evaluaciones ya sean verticales, horizontales, o incluso de 360 grados, es complicado y que en estos asuntos de clima y comunicación organizacional podría parecer como la pregunta de: ¿qué fue primero, el huevo o la gallina?

Creo que estos principios pueden ayudar al clima organizacional porque ponen en movimiento a la base de cualquier organización: las personas. Claro, no creo que exista una fórmula mágica (al final una organización sí es como un ser vivo, compuesto de órganos independientes pero vitales para que el todo siga funcionando) o que su implementación sea trivial, incluso a un nivel micro como puede ser dentro de un departamento o con los mismos amigos-compañeros-colegas. A mi pasa que a veces me equivoco, y en ciertas ocasiones podría decirse que gravemente, pero sí creo en estos principios ya que tengo la fortuna de contar con gente con la que puede establecer una buena comunicación, obtener retroalimentación (aunque a veces yo haga muecas) y que estamos dispuestos a escuchar.

 

 

 

De la comunicación en una organización

Al estar involucrado en cuestiones de calidad y diagnóstico del clima organizacional en mi trabajo actual, he confirmado que la comunicación juega un papel muy importante en la salud organizacional. En sí, mucha de la "neurosis organizacional" se "calma" si existe una comunicación efectiva.

Dentro de cada área en una organización se realizan actividades, procesos o bien, proyectos. Justo cuando se "ejecuta" (partiendo de una actividad o tarea), se genera información. Esta información puede registrarse formalmente o no, aunque siempre resulta útil para repetir la misma actividad, ejecutar un proceso en general o proponer un proyecto similar. Lo interesante está, que al ser una organización, dicha información también puede fungir como "input" para que otras áreas a su vez ejecuten sus tareas, procesos o armen proyectos. Cuando se alcanza la eficiencia aplicando toda la información generada, cada área ( y podría decirse al final que la organización misma) va generando su conocimiento: el know-how.

Sin embargo, la información no siempre fluye entre las áreas de una organización (o individuos dentro de una misma área). Quizá sea por nuestra naturaleza egoísta, porque no sabemos cómo registrar formalmente la información y gestionar el conocimiento con alguna herramienta, porque puede "dar evidencia" de nuestras fallas en la ejecución (que deberíamos llamar "áreas de oportunidad") o simplemente por desidia. Lo malo dentro de una organización, a mi parecer, es que al final todo proceso o proyecto derivará en resultados que deberán ser evaluados para determinar cómo va dicha organización. En ese momento, lo anterior no parece no importar y los mismos miembros de la organización podrían manifestar que la falta de comunicación provoca que no se pueda "realizar bien" el trabajo.

Complejo. Bueno, todas las organizaciones están conformadas por personas. Quizá sea por eso.

Saludos.

De la Educación en Diseño de Interacción

Hace un par de post ya, escribí algunos pensamientos sobre el diseño de interacción; sobre cuál era mi percepción sobre la disciplina en aquel entonces. Creo que este hecho no ha cambiado mucho en el sentido que no se reconoce el valor del diseño como disciplina (su madurez, aportación en el conocimiento colectivo y la posibilidad de conseguir una buena capitalización del mismo); aún más, no se reconoce como el diseño per se puede tomarse como un eje disciplinar natural en algunas formaciones académicas (me refiero a títulos en ingeniería y ciencias, no sólo a títulos en las "disciplinas proyectuales").

Lo anterior podemos tomarlo como una metáfora de un cono, recorriéndolo de dentro hacia afuera, donde las lineas que van del interior a una de las orillas –donde están "paradas" las disciplinas y su conocimiento construido– muestran el "camino del diseño" (algo así como un design-driven approach). Aunque también podemos tomar una visión contraria: en forma de embudo. Esto es, caminar de fuera hacia dentro, donde lo que queda hasta abajo –y saldría por el embudo– es el diseño derivado de una formación académica especializada.

Con respecto a este último enfoque, considero que esta visión de embudo aplica muy bien para la formación a nivel licenciatura de un Diseñador de Interacción. Don Norman en su artículo ¿Por qué la educación en diseño de cambiar? comenta que:

"Las nuevas áreas (refiriéndose a la formación en diseño) son más como ciencias sociales y del comportamiento aplicadas, y que requieren un entendimiento de la cognición y emoción humana, sistemas sensoriales y de motricidad, y el suficiente conocimiento del método científico, estadística y diseño experimental en la medida que los diseñadores puedan validar, legitimar las pruebas de sus ideas antes de liberarlas…"

Justo este artículo me recordó un correo electrónico que había compartido con un par de colegas en junio de 2010 sobre ¿qué materias podrían ser útiles en un plan de estudios de licenciatura para Diseño de Interacción? – bajo esta visión de embudo– y que quisiera compartir ahora con ustedes (al final del post).De antemano, ofrezco una disculpa por algún error de redacción u ortografía; no quise cambiar nada del correo para no tergiversarlo. Dado el artículo de Norman, considero que faltó de la lista materias como las siguientes: Metodología de la Investigación, Probabilidad, Inferencia Estadística, Diseño de Experimentos, Modelos Probabilísticos, Psicología Cognitiva, Psicología y Emociones, entre otras.

De cualquier forma, el asunto fuerte en este caso es la formación del diseñador de interacción. Es decir, podríamos preguntarnos: ¿cómo en las escuelas se está pensando formar adecuadamente a un diseñador de interacción?, ¿cómo formar a un estudiante con las herramientas para solucionar problemas de interacción en diferentes contextos de uso y con una ejecución adecuada, limpia, profesional?, ¿cómo lograr la integración de este tipo de diseñadores en equipos de trabajo multidisciplinarios? y por último, ¿cómo esa formación derivará en los futuros profesionales y teóricos que concreticen los pilares del conocimiento en Diseño de Interacción?

----- Materias descritas en el correo original – O.S.T. Junio 2010 -------

Fundamentos ==========================================
* Algoritmia.
Teoría: programación estructurada, condicionales, ciclos, recursividad, etc.
Práctica: Diseñar y programar ejercicios relacionados.
Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación estructurada.
* Dibujo
Teoría: Línea, forma, proporción, etc.
Práctica: Representaciones del mundo real.
Objetivo: Adquirir un estándar de calidad en representación visual.
* Introducción al Diseño de Interacción
Teoría: Qué es Diseño de Interacción, Interfaz, Tarea, Usuario, Contexto de Uso, Relación con otras disciplinas, objetivos de un producto de diseño.
Práctica: Elaboración de maquetas físicas, carteles académicos, intervención en espacio (todo análogo, nada electrónico).
Objetivo: Conceptualizar soluciones para resolver problemas del entorno.
* Taller de Diseño Industrial.
Teoría: Volumen, materiales, forma, ergonomía, sustentabilidad, etc.
Práctica: Diseñar y realizar prototipos físicos de herramientas y aparatos como controles de videojuegos, palancas de carro, páneles de control. Evaluación de las propuestas con usuarios.
Objetivo: Entender sobre usuarios y sus necesidades de uso.
* Creatividad
Teoría: Introducción al proceso creativo.
Práctica: Maquetar ideas creativas de problemas de diseño espurios.
Objetivo: Que el alumno tenga inteligencia emocional, un pensamiento creativo y romper paradigmas.
* Investigación Cuantitativa.
Teoría: Metodología de la investigación, estadística.
Práctica: Armar un proyecto de investigación sencillo con recopilación y análisis de datos cuatitativos.
Objetivo: Aprender y aplicar metodología de investigación en la elaboración de proyectos de diseño.
* Investigación Cualitativa.
Teoría: Métodos y procesos de investigación en las ciencias sociales.
Práctica: Trabajo de campo, elaboración de etnografías, observación, entrevistas, etc.
Objetivo: Aprender a cómo levantar requerimientos y necesidades de los usuarios a partir de una investigación cualitativa.
* Diseño visual.
Teoría: Forma, color, composición.
Práctica: Elaboración de mensajes visuales.
Objetivo: Adquirir un pensamiento visual y saber comunicarlo.
* Tipografía y Texto.
Teoría: Fuentes, famila tipográfica, kerning, tracking, composición de textos.
Objetivo: Saber componer un texto adecuadamente para medios impresos.
* Diseño para pantalla.
Teoría: Tipografía para pantalla, color para pantalla, composición en pantalla.
Objetivo: Realizar composiciones de texto e imágenes del estilo de interfaces gráficas de usuario y para lectura en pantalla.
Formación ==========================================
* Programación Orientada a Objetos.
Teoría: clase, objeto, métodos, funciones, etc.
Práctica: Diseñar y programar ejercicios relacionados
Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación OO.
* Diseño de Información.
Teoría: Comunicación, mensaje, introducción a la visualización, introducción a la usabildiad, esquemática, legilidad de mensajes visuales, etc.
Práctica: Diseñar mensajes que muestren la relación enter las variables de un fenómeno, códigos sonoros, diseño instruccional.
Objetivo: Saber cómo diseñar visual, física y auditivamente con fines utilitarios.
* Arquitectura de Información
Teoría: Qué es arquitectura, ejemplos de arquitectura en diseño impreso, arquitectura para medios digitales, sistemas de navegación, sistemas de búsqueda, sistemas de etiquetado, análisis de contenido, tesauros, introducción al modelo entidad-relación y XML para bases de datos, etc.
Práctica: Elaboración de Personas, Card-Sorting, Free listing, Mapas y modelos mentales, Elaboración de Wireframes, Elaboración de escenarios.
Objetivo: Estructurar el pensamiento de una aplicación más allá de pensar visualmente.
* Diseño de Interacción Humano Computadora
Teoría: Qué es HCI, sketching e ideación (Bill Buxton), paradigmas de interacción, estilos de interacción e interfaces (gráficas, tangible, móvil, robótica, táctil, agentes inteligentes, etc), ergonomía de interfaces.
Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.
Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.
* Diseño de Interacción Humano Computadora II
Teoría: Continuar con los temas de estilos de interacción en intefaces (visualización de datos, interfaces hápticas, etc).
Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.
Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.
* Evaluación de Interfaces
Teoría: Pruebas de usabilidad, Ingeniería Semiótica, Grupos Focales.
Práctica: Aplicar una prueba de usabilidad, protocolos y métodos para aplicarse en pruebas de usabilidad, pruebas de comunicabilidad (de la Ingeniería Semiótica), realizar un focus group.
Objetivo: Saber llevar a cabo una evaluación, cómo podría ser documentada, cómo recopilar datos y analizarlos, hacer reporte para propuestas de mejoras.
Web ==========================================
* Diseño web
Teoría: Aprender conceptos de Internet, entender qué es web semántica, qué es separar contenido de presentación, usabilidad para web, prototipeo en papel de sitios web, arquitectura de inforamción para web, etc.
Práctica: XHTML y CSS.
Objetivo: Crear un sitio web estático con buena retícula y arquitectura de información.
* Aplicaciones Web I
Teoría: Interacción en web, diseño de formas/formularios.
Práctica: JavaScript, AJAX y librerías para web interactiva (JQuery, Mootools, etc).
Objetivo: Crear sitios interactivos y con validaciones en formularios, menúes, etc.
* Aplicaciones Web II
Teoría: Conceptos de Base de Datos, Scripting en servidores, servicos web, etc.
Práctica: PHP, MySQL, desarrollo en .net.
Objetivo: Crear un sitio web dinámico.
* Aplicaciones Móviles
Teoría: Diseño de interacción para móviles.
Práctica: XHTML, CSS, JavaScript, AJAX, JQuery, PHP, MySQL, e introdución a plataformas de desarrollo para móviles como Java ME y Objective-C.
Objetivo: Realizar una aplicación web para móviles de forma que se den cuenta que no es lo mismo para pantalla.
Videojuegos ==========================================
* Diseño Videojuegos para la Red
Teoría: Diseño de videojuegos, aplicación de los videojuegos en entretenimiento, capacitación, investigación y ciencia, industria.
Práctica: Aplicar animación, diseño de interacción humano computadora y programación orientada a objetos en el proyecto.
Objetivo: Elaborar un juego de video basado en un browser.
* Diseño de Videojuegos para Consola
Teoría: Lenguaje de programación para una consola.
Práctica: Conocer y aprender lo básico de un lenguaje nativo de una consola.
Objetivo: Lograr ejecutar (quizá mendiante un emulador) lo que se vería en un juego de consola de cierta marca.
* Diseño de Videojuegos para Móviles
Teoría: Repaso de un lenguaje de programación nativo para un móvil (Java ME u Objective-C).
Práctica: Programar y diseñar para una plataforma móvil.
Objetivo:Poner en práctica lo aprendido de programación y elaborar un prototipo de juego para móvil no basado en browser.
Interacción física ==========================================
* Elaboración de prototipos electrónicos.
Teoría: Introducción al cómputo físico.
Práctica: Elaborar prototipos físicos (con Arduino o alguna plataforma similar).
Objetivo: Fomentar el pensamiento creativo a través de la elaboración de prototipos físicos interactivos.
* Interacción física.
Teoría: Complentar conceptos de cómputo físico e interacción tangible.
Práctica:  Elaborar prototipos físicos y aplicar diseño industrial.
Objetivo: Elaborar un prototipo de cómputo que resuelva un problema del mundo real.

Fundamentos ==========================================

* Algoritmia

Teoría: programación estructurada, condicionales, ciclos, recursividad, etc.

Práctica: Diseñar y programar ejercicios relacionados.

Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación estructurada.

________________________________________________

* Dibujo

Teoría: Línea, forma, proporción, etc.

Práctica: Representaciones del mundo real.

Objetivo: Adquirir un estándar de calidad en representación visual.

________________________________________________

* Introducción al Diseño de Interacción

Teoría: Qué es Diseño de Interacción, Interfaz, Tarea, Usuario, Contexto de Uso, Relación con otras disciplinas, objetivos de un producto de diseño.

Práctica: Elaboración de maquetas físicas, carteles académicos, intervención en espacio (todo análogo, nada electrónico).

Objetivo: Conceptualizar soluciones para resolver problemas del entorno.

________________________________________________

* Taller de Diseño Industrial

Teoría: Volumen, materiales, forma, ergonomía, sustentabilidad, etc.

Práctica: Diseñar y realizar prototipos físicos de herramientas y aparatos como controles de videojuegos, palancas de carro, páneles de control. Evaluación de las propuestas con usuarios.

Objetivo: Entender sobre usuarios y sus necesidades de uso.

________________________________________________

* Creatividad

Teoría: Introducción al proceso creativo.

Práctica: Maquetar ideas creativas de problemas de diseño espurios.

Objetivo: Que el alumno tenga inteligencia emocional, un pensamiento creativo y romper paradigmas.

________________________________________________

* Investigación Cuantitativa

Teoría: Metodología de la investigación, estadística.

Práctica: Armar un proyecto de investigación sencillo con recopilación y análisis de datos cuatitativos.

Objetivo: Aprender y aplicar metodología de investigación en la elaboración de proyectos de diseño.

________________________________________________

* Investigación Cualitativa.

Teoría: Métodos y procesos de investigación en las ciencias sociales.

Práctica: Trabajo de campo, elaboración de etnografías, observación, entrevistas, etc.

Objetivo: Aprender a cómo levantar requerimientos y necesidades de los usuarios a partir de una investigación cualitativa.

________________________________________________

* Diseño visual

Teoría: Forma, color, composición.

Práctica: Elaboración de mensajes visuales.

Objetivo: Adquirir un pensamiento visual y saber comunicarlo.

________________________________________________

* Tipografía y Texto

Teoría: Fuentes, famila tipográfica, kerning, tracking, composición de textos.

Objetivo: Saber componer un texto adecuadamente para medios impresos.

________________________________________________

* Diseño para pantalla.

Teoría: Tipografía para pantalla, color para pantalla, composición en pantalla.

Objetivo: Realizar composiciones de texto e imágenes del estilo de interfaces gráficas de usuario y para lectura en pantalla.

Formación ==========================================

* Programación Orientada a Objetos

Teoría: clase, objeto, métodos, funciones, etc.

Práctica: Diseñar y programar ejercicios relacionados

Objetivo: Saber pensar en forma algorítimica y tener fundamentos de programación OO.

________________________________________________

* Diseño de Información

Teoría: Comunicación, mensaje, introducción a la visualización, introducción a la usabildiad, esquemática, legilidad de mensajes visuales, etc.

Práctica: Diseñar mensajes que muestren la relación enter las variables de un fenómeno, códigos sonoros, diseño instruccional.

Objetivo: Saber cómo diseñar visual, física y auditivamente con fines utilitarios.

________________________________________________

* Arquitectura de Información

Teoría: Qué es arquitectura, ejemplos de arquitectura en diseño impreso, arquitectura para medios digitales, sistemas de navegación, sistemas de búsqueda, sistemas de etiquetado, análisis de contenido, tesauros, introducción al modelo entidad-relación y XML para bases de datos, etc.

Práctica: Elaboración de Personas, Card-Sorting, Free listing, Mapas y modelos mentales, Elaboración de Wireframes, Elaboración de escenarios.

Objetivo: Estructurar el pensamiento de una aplicación más allá de pensar visualmente.

________________________________________________

* Diseño de Interacción Humano Computadora

Teoría: Qué es HCI, sketching e ideación (Bill Buxton), paradigmas de interacción, estilos de interacción e interfaces (gráficas, tangible, móvil, robótica, táctil, agentes inteligentes, etc), ergonomía de interfaces.

Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.

Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.

________________________________________________

* Diseño de Interacción Humano Computadora II

Teoría: Continuar con los temas de estilos de interacción en intefaces (visualización de datos, interfaces hápticas, etc).

Práctica: bocetaje de interfaces, elaboración de interfaces y escenarios animados.

Objetivo: Qué el alumnos conozca sobre interacción y adquiera la capacidad de imaginar y luego bocetar y aprender a presentar y vender sus ideas.

________________________________________________

* Evaluación de Interfaces

Teoría: Pruebas de usabilidad, Ingeniería Semiótica, Grupos Focales.

Práctica: Aplicar una prueba de usabilidad, protocolos y métodos para aplicarse en pruebas de usabilidad, pruebas de comunicabilidad (de la Ingeniería Semiótica), realizar un focus group.

Objetivo: Saber llevar a cabo una evaluación, cómo podría ser documentada, cómo recopilar datos y analizarlos, hacer reporte para propuestas de mejoras.

Web ==========================================

* Diseño web

Teoría: Aprender conceptos de Internet, entender qué es web semántica, qué es separar contenido de presentación, usabilidad para web, prototipeo en papel de sitios web, arquitectura de inforamción para web, etc.

Práctica: XHTML y CSS.

Objetivo: Crear un sitio web estático con buena retícula y arquitectura de información.

________________________________________________

* Aplicaciones Web I

Teoría: Interacción en web, diseño de formas/formularios.

Práctica: JavaScript, AJAX y librerías para web interactiva (JQuery, Mootools, etc).

Objetivo: Crear sitios interactivos y con validaciones en formularios, menúes, etc.

________________________________________________

* Aplicaciones Web II

Teoría: Conceptos de Base de Datos, Scripting en servidores, servicos web, etc.

Práctica: PHP, MySQL, desarrollo en .net.

Objetivo: Crear un sitio web dinámico.

________________________________________________

* Aplicaciones Móviles

Teoría: Diseño de interacción para móviles.

Práctica: XHTML, CSS, JavaScript, AJAX, JQuery, PHP, MySQL, e introdución a plataformas de desarrollo para móviles como Java ME y Objective-C.

Objetivo: Realizar una aplicación web para móviles de forma que se den cuenta que no es lo mismo para pantalla.

Videojuegos ==========================================

* Diseño Videojuegos para la Red

Teoría: Diseño de videojuegos, aplicación de los videojuegos en entretenimiento, capacitación, investigación y ciencia, industria.

Práctica: Aplicar animación, diseño de interacción humano computadora y programación orientada a objetos en el proyecto.

Objetivo: Elaborar un juego de video basado en un browser.

________________________________________________

* Diseño de Videojuegos para Consola

Teoría: Lenguaje de programación para una consola.

Práctica: Conocer y aprender lo básico de un lenguaje nativo de una consola.

Objetivo: Lograr ejecutar (quizá mendiante un emulador) lo que se vería en un juego de consola de cierta marca.

________________________________________________

* Diseño de Videojuegos para Móviles

Teoría: Repaso de un lenguaje de programación nativo para un móvil (Java ME u Objective-C).

Práctica: Programar y diseñar para una plataforma móvil.

Objetivo:Poner en práctica lo aprendido de programación y elaborar un prototipo de juego para móvil no basado en browser.

Interacción física ==========================================

* Elaboración de prototipos electrónicos

Teoría: Introducción al cómputo físico.

Práctica: Elaborar prototipos físicos (con Arduino o alguna plataforma similar).

Objetivo: Fomentar el pensamiento creativo a través de la elaboración de prototipos físicos interactivos.

________________________________________________

* Interacción física

Teoría: Complentar conceptos de cómputo físico e interacción tangible.

Práctica:  Elaborar prototipos físicos y aplicar diseño industrial.

Objetivo: Elaborar un prototipo de cómputo que resuelva un problema del mundo real.


La calidad y su impacto en el sistema

En este último año he estado expuesto e involucrado con temas relacionados con la calidad y ambiente organizacional. Este post, en realidad es una anécdota que me hizo llegar a una especie de conclusión rápida de por qué la calidad es importante dentro de un sistema desde los niveles más "abajo". Aquí tomo genéricamente el término de sistema como esa caja negra (incluyendo a las organizaciones) con entradas y que genera salidas (ya sea un producto o servicio):

Tengo una playera polo, roja por cierto, que me gusta mucho. Pero siempre que me la ponía, había algo que me picaba el cuello. Es importante mencionar que en esa misma zona tengo un pequeño lunar. Yo tenía la teoría que era un hilo de nylon (transparente y duro) que estaba salido de la costura y que era eso que me picaba el cuello, donde está mi lunar – me lo imaginaba como cuando rompes esos pequeños hilos con los que "pegan" la etiquetas en las bolsas traseras de un pantalón de mezclilla y que luego arrancas, quedándose la mitad incrustado en la tela–. Y es que pasaba y pasaba los dedos para encontrar la punta de este molesto hilo de plástico y más o menos de "reojo" veía que si dicho hilo estaba "levantado" por ahí donde pasaba los dedos. Nada.

Después de varias ocasiones de estar con la molestia todo el día por usar esta playera, en la última ocasión que la vestí, me detuve, volví a tocar con los dedos y me volví a preguntar: ¿por qué me lastima el cuello? Identifiqué que mi lunar podría tener algo que ver en el asunto. Entonces jale el cuello hacia afuera y decidí darle un vistazo con calma. No era un hilo cortado, era una costura floja, muy pequeña, de un hilo suave (que mis toscos dedos no detectaron) de tal forma que se quedaba como un "horca" floja/volando, de forma que "cachaba" a mi lunar y lo jalaba y raspaba cuando yo movía el cuello. Ya viendo lo que sucedía, decidí terminar con el problema arrancándolo de una vez. La playera no volvió a darme molestias en el cuello de nuevo.

La reflexión:

El sistema es la persona y su salida es el trabajo en un día laboral (por decirlo así) ya sea un producto o servicio, el cual se veía afectado por una pequeña falla, en este caso dentro de la playera y relacionado con la calidad de su acabado. La playera sigue siendo parte del sistema, tomando en cuenta que uno tiene que estar vestido para trabajar. Debido a la pequeña falla derivada de la falta de calidad, las manos se ocupaban constantemente en rascar el cuello y tratar de identificar dónde estaba el hilo, aunque su objetivo resulta otro (ejecutar las tareas para generar el producto o servicio, en este caso diseñar). Por su parte, la cabeza creía saber cual era el problema, sin embargo, no fue hasta cuando la cabeza detectó y caracterizó la falla, ordenó a las manos corregirlas y el sistema siguió funcionando correctamente.

Pequeñas fallas en la calidad, incluso en niveles inferiores, pueden tener un impacto en todo un sistema, de forma tanto los recursos no estén bien dirigidos y que el objetivo para el cual fue establecido el sistema se vea afectado. También, hay que reconocer hasta dónde las manos pueden ayudar a detectar y resolver un problema, cuándo es necesario que la cabeza vea con quietud el sistema y reflexione sobre cómo esta falla afecta al todo; y por último, que dentro del sistema, la cabeza y las manos sepan trabajar juntos para solucionar la falla.

Saludos :)

Rediseño de un formulario web

En el diseño de información, los formularios pueden ser complicados de resolver porque a pesar de parecer aburridos, se necesitan tomar buenas decisiones sobre cómo podría darse el flujo de lectura, el entendimiento de los campos, atender a cuestiones de legibilidad, definir jerarquías visuales, en algunas ocasiones el manejo de color y elementos gráficos, y en general preveer un buen flujo de trabajo (es decir, la "interacción" con el formulario).

En un proyecto reciente, me topé con un formulario web para búsquedas avanzadas. El texto en el formulario ya estaba previamente aprobado. En este caso, mi asignación fue realizar un posible ajuste visual al contenido del formulario.

El formulario original:

Formulario de búsqueda avanzada del catálogo de marcas de fuego de la UDLAP - BUAP antes de su rediseño

El formulario en realidad son dos: uno tiene que ver con la búsqueda por "Procedencia" y/o "Institución" y el otro con la búsqueda avanzada por "Identificador de la marca". Sin duda, una forma directa de resolver esta situación es a través de una "división visual" que rompiera la lectura tan vertical que se tenía originalmente.

La parte de "Procedencia" y/o "Institución" resulta complicada por si misma: ¿cómo sabes qué campo es más importante?, ¿se llena uno? ¿se llenan ambos? Al final se decidió que el usuario, en su curva de aprendizaje, aprendiera a trabajar esta sección sin "ayudas visuales" adicionales — como poner una leyenda al estilo: "A ver mi estimado usuario, o llenas uno o llenas los dos, etc".

De la parte de "Buscar en", "Tipología" y "Ordenar resultados por", me surgió la duda si debía cada sección acomodarse horizontalmente. Eso daría una dinámica de trabajo de ir bajando un renglón/bloque a la vez. Sin embargo, esa opción no podría ser adecuada porque al menos en "Buscar en", las 8 opciones la convierten en impráctica. El cambio que sí se realizó fue que las opciones por defecto en "Búscar en", "Tipología" y "Ordenar resultados por" sean más evidentes para el usuario poniéndolas de primero.

Este es el resultado del formulario:

Formulario de búsqueda avanzada del catálogo de marcas de fuego de la UDLAP - BUAP después de su rediseño

Aunque los cambios realmente no son drásticos, puede observarse que con un acomodo más reticulado y manejo del aire compositivo en adición a las cuestiones planteadas arriba, el formulario se ve más consistente y quizá sea más usable. Afirmación, que por su naturaleza, sólo se puede validar a través de una prueba de usabilidad :)

De arquitectura de información, wireframes y discusión entre expertos

Este post expresa una experiencia similar a la descrita en "El prototipo como herramienta de discusión/diseño", solo que en esta ocasión decidí acudir al wireframe como parte de las herramientas de discusión para que entienda qué debo diseñar de un sitio web, no sólo de su contenido, sino también cómo resulta válida su arquitectura.

Fui invitado a participar en un proyecto sobre un catálogo en línea de un tema del que desconocía todo. En este caso, la gestión de dicho catálogo es posible gracias a un sistema en el que trabaja una colega Ingeniera en Sistemas. En realidad mi participación original era sólo para elaborar un front page, lo cual desde mi punto de vista ya no se estila. Comenté en su momento que el home debe ser más que una carátula con un vínculo hacia un catálogo (lo cual a mi juicio rompe con la consistencia navegacional). Debería ser un punto de partida a la tarea principal del usuario (i.e. navegar el catálogo) o hacia otras tareas que requieran (como en este caso) el consumo de información textual nada más. Pues bien, aunque mi participación no involucra algo complejo como la gestión misma del catálogo, en parte confieso que es un esfuerzo para hacerme más divertido el trabajo.

Boceto de propuesta de home en vez de una carátula simple.

Entonces, en vez hacer un prototipo de baja fidelidad (i.e. el mockup a la photoshop), después de oir en juntas y con mi colega cómo funcionaría el catálogo, idear una arquitectura realmente simple (adecuada en este proyecto) y realizar un boceto que después se convertiría en un wireframe.

Close-up del wireframe

Estos han sido algunos puntos derivados de esta experiencia:

El papel todo aguanta. Los cambios son fáciles de "realizar" durante la discusión en las juntas. Basta con "rayar" directamente sobre el papel.

Resultado de los primeros cambios discutidos en junta.

Discusión sobre contenidos y navegación. Que se tenga sólo un wireframe frío sí evita que las discusiones se vayan a aspectos gráficos como los colores o la estética.

Aprender sobre el tema escuchando. Dado que la mayoría del equipo son los expertos sobre el tema, suelen expresarse con la terminología adecuada y también tener una idea muy marcada de cómo les gustaría que se diera el proyecto. Es conveniente escuchar y preguntar de vez en cuando, al menos para cuestionar la decisiones, tomando en cuenta que lo importante es "si le funciona esa idea/decisión al usuario".

Wireframes impresos para discutir la arquitectura y contenido de las secciones, más allá el home.

Una arquitectura orgánica se puede generar a partir una discusión de expertos. En casos donde la navegación parece sencilla, con wireframe en la mano, se puede ir determinando el esquema de navegación global y local mediante discusión. Esto provoca que los mismos expertos realicen el labeling. Aún más, te permite replantear en la cabeza, como diseñador, el acomodo "visual" de la misma información, conforme se va escuchando lo discutido en las juntas.

"Mapa de navegación" final.

Ya falta entonces, armar el look and feel para la interfaz, comenzar a ensamblar las páginas estáticas y la integración con las páginas dinámicas generadas a partir del sistema seleccionado. Veamos cómo sale. Saludos :)