martes, 17 de junio de 2008

Diseño iterativo de interfaces / Análisis, (recolección de información)

.................................................

Cuándo vamos a realizar la construcción de una interfaz de usuario debemos tener en cuenta varios puntos importantes, entre ellos la recolección de información donde identificaremos las necesidades de nuestros usuarios finales, Debemos tener presente que el resultado de nuestro producto se va a traducir en una buena experiencia de usuario final.

El desarrollo de una intefaz de usuario pasa por varios ciclos, desde el conocer las necesidades de nuestros usuarios (recolección de información), Diseñar nuestro sitio (diseño de bocetos, metáforas, técnicas), Implementarlo (desarrollo de los prototipos), pruebas (test con usuarios finales), Evaluación y resultados. A todo lo anterior se le llama diseño iterativo de interfaces, cada etapa depende del resultado de la otra, y cada etapa a su vez puede pasar por el ciclo.

En este post o artículo nos centraremos en la etapa de la recolección de información y encontrarán al final unos links recomendados que hablan de algunas técnicas para realizar el análisis y algunos conceptos.

Propondré algunos puntos que desde mi experiencia nos ayudan a recolectar la información de nuestro usuario final, la recolección de ésta información se hace a través de entrevistas que deben estar guiadas de lo general a lo específico, después de la recolección de información se continua con la fase siguiente que es el diseño de bocetos.

Según las necesidades o la cantidad de información éstos puntos pueden disminuir o aumentar, ya les queda de tarea y abierto a comentarios.

Briefing informativo/creativo para una interfaz gráfica
  1. Fecha
  2. Nombre del proyecto
  3. Equipo de trabajo: usuario final, diseñador gráfico, desarrollador, arquitecto, etc.
  4. Tecnologías aplicadas: xhtml, ajax, etc
  5. Resolución: 800*600 , 1024 * 768 ….
  6. Tipo de navegador: IEXX, Mozilla…
  7. Fecha de inicio
  8. Fecha de finalización
  9. Objetivo del proyecto
  10. Quién es el usuario final: conocimiento del usuario
    Ubicación geográfica del usuario, Edad , clase sociocultural, Segmentación sicográfica(descripción del estilo de vida del consumidor, sus hábitos, costumbres en su vida).
    *Es importante conocer el lugar donde nuestros usuarios harán uso de las interfaces gráficas.
  11. Necesidades del usuario: se deben describir de una manera muy explícita para poder dar solución a las necesidades planteadas por el usuario, estas necesidades nos llevarán a conocer y a realizar un respectivo análisis de las tareas para lograr realizar una generación de metáforas adecuada y el análisis del tipo de diálogo que se debe emplear.
  12. Interfaz gráfica
    Estándares graficos
    Identidad corporativa
    Sitios de referencia.
  13. Análisis de la competencia DOFA (Si se requiere)
Ésta es sólo una manera de recolectar información antes de realizar bocetos o prototipos para nuestros usuarios, queda entonces la discusión abierta para retroalimentar la recolección de información inicial.

Herlency Muñoz García.
17 de junio de 2008


Recomendados
http://www.nosolousabilidad.com/articulos/conocer_usuarios.htm
http://www.nosolousabilidad.com/articulos/tecnicas_ai.htm
http://elsaber.files.wordpress.com/2007/02/formato_briefing.pdf
http://es.wikipedia.org/wiki/Briefing
http://www.dii.uchile.cl/~in627/docs/primavera02/Charla%20IO.doc

lunes, 16 de junio de 2008

Accesibilidad / Navegabilidad / Optimización

...................................
Accesibilidad
Existen millones de usuarios que utilizan servidores distintos, con computadoras conectadas con sistemas operativos diferentes (Windows, MacOs, Linux, etc.), de potencias diferentes, con pantallas de resolución distintas, navegando con programas distintos, e incluso si utilizan el mismo navegador, deciden activar, o no, distintas opciones de su programa (como navegar por defecto sin imágenes).


Ante este panorama, resulta imposible diseñar para un solo tipo de usuario ya que dejaríamos fuera al resto. Esto implica que cuando afrontamos el diseño de un sitio web, éste debe ser accesible sean cuáles sean las configuraciones de nuestro cliente.

Por otro lado es también importante la estandarización que este principio supone: muchos de nuestros usuarios no quieren perder su tiempo en bajar un plug-in para ver nuestro sitio web: ¿debemos impedir que vean nuestras páginas sólo por una cuestión tecnológica? Eso no quiere decir que no podamos incorporar nuevas tecnologías, siempre que tengamos en cuenta ofrecer la posibilidad de utilizar opciones desarrolladas para una tecnología anterior. El World Wide Web Consortium (http://www.w3.org) es la entidad encargada de establecer las normas para la estandarización de los distintos elementos usados en la WWW.

Navegabilidad:
La estructura de nuestro sitio web; la facilidad de encontrar la información mediante buscadores o navegación; la consistencia de todos los elementos que lo componen; facilitar múltiples maneras y vías de encontrar la misma información; son elementos importantes.

Optimización:
Mientras el ancho de banda (que deriva en la velocidad en que se transmiten los datos a través de la conexión) siga siendo un problema, debemos tener en cuenta que las páginas deben ser descargadas lo más rápido posible. Por lo tanto debemos optimizar todos los elementos de nuestro sitio, especialmente el tamaño y cantidad de las imágenes para que las páginas tengan poco peso.

Fuentes:

El diseño centrado en el usuario

..................................................

caminando en la internet, naufragando en temas de usabilidad, me encontré un taller muy interesante que habla de el "Enfoque metodológico, gestión de proyecto, equipo de profesionales, estándares y tecnologías", de éste taller tome dos aspectos muy importantes y que fortalecen en cierta medida lo que se ha venido hablando de usabilidad e interfaces de usuarios, estos conceptos están centrados en el diseño de usuario final, espero le presten bastante atención:

La tríada fundamental

La definición del modelo de utilidad + usabilidad se especifica para un determinado tipo de usuario, con determinadas tareas, en un contexto específico.

En el contexto del Diseño Centrado en el Usuario (DCU), la tríada fundamental está compuesta por: usuario, tarea/s y contexto.

Modelo de utilidad + usabilidad

Fuentes:
http://inspiro.com.ar/articulos/bibliotecas.html

Cualquier parecido con la realidad / Usabilidad

Algunos conceptos / Usabilidad

.................................................

Utilidad
La utilidad es la capacidad que tiene una herramienta para ayudar a cumplir tareas específicas. Aunque esta afirmación parece obvia, es importante observar que una herramienta que es muy usable para una tarea, puede ser muy poco usable para otra, aún incluso si se trata de una tarea similar pero no idéntica. Un martillo y una maza son muy similares. Sin embargo, cada uno de ellos es adecuado para una tarea y muy poco usable para otras.

Facilidad de uso
La facilidad de uso está en relación directa con la eficiencia o efectividad, medida como velocidad o cantidad de posibles errores.Una herramienta muy fácil de usar permitirá a su usuario efectuar más operaciones por unidad de tiempo (o menor tiempo para la misma operación) y disminuirá la probabilidad de que ocurran errores.Ninguna herramienta o sistema es perfecto, pero una alta probabilidad de error puede llegar incluso a derivar en una imposibilidad de uso por falta de calificación, según cuáles sean los criterios para evaluar la herramienta o sistema
(3). Un caso especial de estas necesidades extremas son las herramientas de misión crítica como por ejemplo diagnóstico médico y aeronavegación. Son áreas que típicamente suelen requerir altísimos grados de eficiencia y precisión. Una falla en este tipo de aplicaciones puede tener serias consecuencias.Sin embargo, atención: la facilidad de uso no debe confundirse con la facilidad de aprendizaje.

Facilidad de aprendizaje
La facilidad de aprendizaje es una medida del tiempo requerido para trabajar con cierto grado de eficiencia en el uso de la herramienta, y alcanzar un cierto grado de retención de estos conocimientos luego de cierto tiempo de no usar la herramienta o sistema. Si bien la facilidad de aprendizaje suele tener una relación directa con la usabilidad, estrictamente hablando esto no necesariamente es así. La facilidad de aprendizaje debería ser una medida relativa, ya que hay sistemas muy complejos que no pueden ser aprendidos rápidamente. Que un software para control y monitoreo de maquinaria de producción requiera 6 meses de aprendizaje para un usuario típico, no quiere decir que es poco usable. Dada la complejidad del tema, difícilmente podría aprenderse en menos tiempo.Por lo tanto, lo importante es comparar entre varias posibles interfaces y ver cuál es la que requiere menos tiempo y/o queda mejor retenida. Si la versión siguiente, sin aumento en la complejidad del servicio brindado tomara 8 meses de aprendizaje, ahora sí estaríamos frente a un problema de usabilidad.

Apreciación
Es una medida de las percepciones, opiniones, sentimientos y actitudes generadas en el Usuario por la herramienta o sistema; una medida, si se quiere, de su seducción o elegancia. La apreciación es una medida menos objetiva que las anteriores, pero sin embargo, no menos importante. Lo importante de esta medida no es tenerla en forma absoluta sino, otra vez, compararla o analizarla en forma relativa. Esta comparación puede ser contra la competencia, contra la versión anterior del mismo producto, contra otras posibilidades que se estén tomando en cuenta. El otro punto importante respecto de la apreciación es tratar de analizar hasta donde “tiñe” el resto de las medidas. Un usuario al que no le “gusta” una interfaz puede generar mas errores, o tardar más en aprenderla. Debemos aprender a separar las medidas estrictas de las que puedan tener desviaciones debidas a una apreciación negativa.
Fuentes
Eduardo Mercovich
Recomendados

Usabilidad

....................................................

La usabilidad universal (del inglés usability) es la característica de un sistema que pretende ser utilizado por:
el tipo o tipos específicos de usuario/s, la tarea o tareas que para las cuales el sistema se ha hecho, y el contexto en el que se da la interacción.


El "grado de usabilidad" de un sistema es, por su parte, una medida empírica y relativa de la usabilidad del mismo.

Empírica porque no se basa en opiniones o sensaciones sino en pruebas (del inglés tests) de usabilidad, realizadas en laboratorio u observadas mediante trabajo de campo.

Relativa porque el resultado no es ni bueno ni malo, sino que depende de las metas planteadas (por lo menos el 80% de los usuarios de un determinado grupo o tipo definido deben poder instalar con éxito el producto X en N minutos sin más ayuda que la guía rápida) o de una comparación con otros sistemas similares.

Fuentes y recomendados:

http://es.wikipedia.org/wiki/Usabilidad
http://www.sidar.org/recur/desdi/traduc/es/visitable/quees/usab.htm

domingo, 15 de junio de 2008

Diseño de la navegación

.................................................
El diseño de la navegación consiste en definir la arquitectura de nuestro hipermedia: elementos de interacción entre el usuario y el sistema, enlaces y tipos de enlaces entre los nodos, agrupación de los nodos por categorías o propiedades, y respuestas del sistema ante peticiones del usuario.

Mediante diagramas documentaremos el diseño de la navegación: organización de la información en nodos, los enlaces y sus tipos, acciones permitidas al usuario, etc...

Una vez definida la arquitectura, debemos implementar los elementos de interacción en nuestro hipermedia: enlaces, opciones o menús de navegación, componentes de interacción (botones, cajas de texto, ....), etc.

La interacción usuario-hipermedia debe poder realizarse con la menor carga cognitiva para el usuario, por lo que se recomienda:

Evitar la sobrecarga memorística: Los menús o barras de navegación deben contener un máximo de 7 opciones diferentes.

El usuario debe poder predecir la respuesta del sistema ante su acción, para ello el nombre de los enlaces y componentes de interacción debe ser significativo y preciso. Los globos de texto pueden ser de mucha utilidad en este sentido.

Se debe ofrecer asistencia al usuario en procesos de interacción complejos (formularios, etc...).

Los mensajes de error deben ser explicados de forma clara y no alarmista, indicando al usuario vías alternativas para resolver el problema.
Fuentes

Interfaz

...................................................

Como principio, el Diccionario de la Real Academia de la Lengua Española define interfaz como una palabra derivada del término inglés “interface”(superficie de contacto) y la define de la siguiente manera: 1. f. Inform. Conexión física y funcional entre dos aparatos o sistemas independientes.

Por confusión con el término anglosajón "interfazear", "interfasear", "interfacear" suele utilizarse en muchos manuales de motherboard, pero no debe tomarse esto como correcto ya que existe una palabra muy simple de referencia de este artículo.


Además, la palabra interfaz también se utiliza metafóricamente en distintos contextos:

Interfaz como instrumento: desde esta perspectiva la interfaz es una "prótesis" o "extensión" (McLuhan) de nuestro cuerpo. El mouse es un instrumento que extiende las funciones de nuestra mano y las lleva a la pantalla bajo forma de cursor. Así, por ejemplo, la pantalla de una computadora es una interfaz entre el usuario y el disco duro de la misma.


Interfaz como superficie: algunos consideran que la interfaz nos trasmite instrucciones ("affordances") que nos informan sobre su uso. La superficie de un objeto (real o virtual) nos habla por medio de sus formas, texturas, colores, etc.

Interfaz como espacio: desde esta perspectiva la interfaz es el lugar de la interacción, el espacio donde se desarrollan los intercambios.

Las tres facetas de un interfaz:

Conceptualmente, el interfaz de usuario descansa en 3 puntos:

Significado (qué): es la base del interfaz. Recoge el contenido o información de la pantalla. Textos, campos de formularios, botones, menús…

Comportamiento: trata el funcionamiento del interfaz. Cómo se comporta cuando un usuario envía un formulario (validaciones), hace clic en un enlace…

Aspecto: apariencia final de un sistema: colores, tipografía, dispocición de los elemepntos en pantalla (layout).

Fuentes:

http://es.wikipedia.org/wiki/Interfaz

http://www.webtaller.com/maletin/articulos/guias_estilo.php

¿Qué es una Interfaz de Usuario?

..................................

Cuando uno usa una herramienta, o accede e interactúa con un sistema, suele haber “algo” entre uno mismo y el objeto de la interacción.

En un auto, ese “algo” son los pedales y el tablero. En una puerta, es el picaporte. En una máquina expendedora o un ascensor, los botones. En una computadora (atención, que no me refiero a un producto informático sino una computadora), el teclado, el monitor, el mouse, y otros periféricos.

Este “algo” nos informa qué acciones son posibles, el estado actual del objeto y los cambios producidos, y nos permite actuar con o sobre el sistema o la herramienta.

Ese “algo”, que es a la vez un límite y un espacio común entre ambas partes, es la interfaz.
En el caso de productos informáticos, la interfaz no es sólo el programa o lo que se ve en la pantalla. Desde el momento que el usuario abre la caja, comienza a interactuar con el producto y por lo tanto, comienza su experiencia.

A veces, tenemos que tener en cuenta elementos que en sentido estricto, no pertenecen a nuestro producto, por ejemplo, la configuración previa a la instalación. Tengan en cuenta, que aunque esto sea estrictamente cierto, para el usuario no es importante.

Diseño de interfaces (formularios)

Antes de implementar los formularios y los informes, hay que diseñar su aspecto. Es conveniente tener en cuenta las siguientes recomendaciones:

  1. Utilizar títulos que sean significativos, que identifiquen sin ambigüedad el propósito del informe o formulario.
  2. Dar instrucciones breves y fáciles de comprender.
  3. Agrupar y secuenciar los campos de forma lógica.
  4. Hacer que el aspecto del informe o formulario sea atractivo a la vista.
  5. Utilizar nombres familiares para etiquetar los campos.
  6. Utilizar terminología y abreviaturas consistentes.
  7. Hacer un uso razonable y consistente de los colores.
  8. Dejar un espacio visible para los datos de entrada y delimitarlos.
  9. Permitir un uso sencillo y adecuado del cursor.
  10. Permitir la corrección carácter a carácter y de campos completos.
  11. Dar mensajes de error para los valores ``ilegales''.
  12. Marcar los campos que sean opcionales.
  13. Dar mensajes a nivel de campo para explicar su significado.
  14. Dar una señal que indique cuándo el informe o formulario está completo.

Fuente:

http://www3.uji.es/~mmarques/f47/apun/node1.html

Lectura hipertextual

..................................................

En términos de la lectura hipertextual, se podrían mantener estos derechos:

-Derecho a navegar sin leer.
-Derecho a saltar de página en página (zapping).
-Derecho a leer en zigzag (zigzagueo).
-Derecho a releer y devolverse (rolling y scrolling).
-Derecho a navegar sin destino fijo (cliqueo).
-Derecho a inscribirse según los intereses.
-Derecho a navegar en cualquier parte y guardar lo que le gusta.
-Derecho a copiar y editar los textos valiosos (favoritos).
-Derecho a asociar textos.
-Derecho a “plegar” textos (leer solo el inicio y el final)
-Derecho a hacer mapeo.
Recomendados:

Decálogo de un buen lector

.................................................

Daniel Pennac habla del “Decálogo del buen lector”:

-El derecho a no leer. “La libertad de escribir no podría acomodarse a la obligación de leer”.
-El derecho a saltarse páginas.
-El derecho a no terminar los libros.
-El derecho a releer.
-El derecho a leer cualquier cosa.
-El derecho al bovarismo o a sensibilizarse con la lectura.
-El derecho a leer en cualquier parte.
-El derecho a picotear.
-El derecho a leer en voz alta.
-El derecho a callarnos.

Daniel Pennac

Entornos hipertextuales (creación colectiva)

..................................

David Casacuberta propone un decálogo de este tipo de producto cultural (creación colectiva):

  1. No tomar el nombre de los estilos en vano.
  2. Crear productos con objetivos claros y fáciles de usar.
  3. Ajustar las preferencias al público a quien va dirigida.
  4. Trabajar con filosofía GNU y P2P
  5. Evitar el estereotipo del líder de opinión
  6. Evitar la trascendentalización injustificada
  7. No ensalzar lo anodino
  8. No creer en lo digital como un Todopoderoso
  9. Dar créditos a los buenos programadores
  10. Politizarlo todo: facilitar el acceso de todos, darles poder a los otros.

David Casacuberta

http://www.cibersociedad.net/congres2006/comuns/perfil.php?id=14827

http://www.trasversales.net/t01dcasa.htm

http://www.uoc.edu/artnodes/esp/art/dcasacuberta1003/dcasacuberta1003.html

Estructura hipertextual

..................................................


La estructura hipertextual es una estructura bastante compleja que integra en sí misma varios tipos distintos de organización de la información: secuencial, jerárquica y en red. En las siguientes figuras, donde se muestran distintos estilos de estructuración de documentos: secuencial, jerárquica y en red, podemos comprobar que el estilo hipertextual es un tipo de estructura que conjuga todos ellos, es decir, una estructura hipertextual incluye (o puede incluir) tanto estructuras secuenciales, como reticulares y jerárquicas.



La escritura hipertextual tiene claros los siguientes elementos:

-Vínculos
-Nodos
-Anclajes


Estos elementos se integran en una estructura de información que posee también sus propias características: la información se encuentra fragmentada. Cada segmento conforma un nodo.


Los anclajes actúan como broches: se amarran al documento de origen y permiten ir y volver al nodo visitado. El vínculo es el camino que une al anclaje y al nodo. En la estructura de un documento hipertextual, todo nodo puede contener a su vez nuevos anclajes y establecer así vínculos con otros nodos.


Fuentes:
http://www.hipertexto.info/documentos/estructura.htm


Hipertexto

.................................
Es una expresión acuñada por Theodor H. Nelson en los años sesenta. Se refiere a un tipo de texto electrónico, una tecnología informática radicalmente nueva y, al mismo tiempo, un modo de edición. Como él mismo lo explica:

"Con hipertexto, me refiero a una escritura no secuencial, a un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla interactiva. De acuerdo con la noción popular, se trata de una serie de bloques de texto conectados entre sí por nexos, que forman diferentes itinerarios para el usuario".

A partir de la definición original de Ted Nelson han surgido otras propuestas como el documento digital, que se puede leer de manera no secuencial o multisecuencial. Un hipertexto consta de los siguientes elementos: nodos o secciones, enlaces o hipervínculos y anclajes. Los nodos son las partes del hipertexto que contienen información accesible para el usuario. Los enlaces son las uniones o vínculos que se establecen entre nodos y facilitan la lectura secuencial o no secuencial por los nodos del documento. Los anclajes son los puntos de activación de los enlaces.

Los hipertextos pueden contener otros elementos, pero los tres anteriores son los componentes mínimos. Otros elementos adicionales pueden ser los sumarios e índices. En este sentido, se habla, por ejemplo, de hipertextos de grado 1, 2, etc., según tengan la cantidad de elementos necesarios. Actualmente la mejor expresión de los hipertextos son las páginas web navegables.
Fuentes:

Videos Web 2.0

Opinemos sobre Web 2.0

..................................................
Ya que hemos entendido un poco todo el cuento de la Web2.0 (espero hayan leído la entrada anterior y visitado los conceptos básicos), podriamos dar nuestra opinión de si la web2.0 sigue vigente o se está terminando, ha muerto, para ello recomiendo estos artículos.

http://www.igooh.com.ar/Nota.aspx?IdNota=7532
http://www.baquia.com/noticias.php?id=11748
¿hacia la web4.0?

¿Qué es Web 2.0?

.................................
"La Web 2.0 es el resultado evolutivo de la Web formada inicialmente en la década de los 90 hacia una nueva generación de sitios y aplicaciones de Internet en las cuales se ve reflejada una nueva actitud por parte de diseñadores y programadores que busca hacerla más participativa, útil y limpia.”

El termino Web 2.0 fue acuñado por O’Reilly Media en 2004 para referirse a una segunda generación de comunidades de usuarios basada en la Web y una gama especial de servicios, como las redes sociales, los blogs, los wikis o las folcsonomías, que fomentan la colaboración y el intercambio ágil de información entre los usuarios.

Conceptos básicos:

Wikipedia es una enciclopedia de contenido libre basada en la tecnología wiki, la cual permite la edición de sus contenidos por cualquier usuario desde un navegador web. El que sea libre se aplica tanto a su uso como a su edición. Wikipedia es multilingüe y es desarrollada en forma colaborativa por decenas de miles de voluntarios alrededor del mundo y en sus respectivos idiomas. Wikipedia es mantenida y administrada por la fundación sin fines de lucro Wikimedia.


Código abierto (del inglés open source)
http://es.wikipedia.org/wiki/Software_libre

Software libre (en inglés free software)-
http://es.wikipedia.org/wiki/Software_libre

Copyleft o izquierdo de copia -
http://es.wikipedia.org/wiki/Copyleft

El derecho de autor Copyright -
http://es.wikipedia.org/wiki/Derecho_de_autor

weblog o cuaderno de bitácora -
http://es.wikipedia.org/wiki/Blog

Gestores de contenido (en inglés Content Management System abreviado CMS) -
http://es.wikipedia.org/wiki/CMS

redifusión o sindicación RSS
http://www.macrumors.com/2006/09/25/podcast-trademark-controversy/

Hojas de estilo (en ingles Cascading Style Sheets abreviado CSS)
http://en.wikipedia.org/wiki/Css

Posicionamiento en buscadores
http://es.wikipedia.org/wiki/PageRank

El marketing viral y la publicidad viral
http://es.wikipedia.org/wiki/Google_bomb

Motor de búsqueda (En inglés Spiders)
http://en.wikipedia.org/wiki/ActiveX

Scalable Vector Graphics (SVG)
http://es.wikipedia.org/wiki/Scalable_Vector_Graphics

XML, sigla en
inglés de eXtensible Markup Language («lenguaje de marcas extensible»)
http://es.wikipedia.org/wiki/XML

World Wide Web Consortium (W3C)
http://es.wikipedia.org/wiki/Peer-to-peer


Esta es solo una breve lista si sabes de otros terminos, puedes publicarlos como comentarios.

Fuentes:
Módulo prensa Digital
Milian, MarcTorner, Jordi

Bienvenidos

..................................................
Sean todos bienvenidos a mi blog "Definiendo conceptos". El blog lo he creado para ir publicando temas que me apasionan a nivel profesional, lo he llamado definiendo conceptos porque será también una puerta o un abrebocas a varias actividades que realizaré en mi día a día.
Espero que muchos de los que ahora están leyendo éste blog realicen sus comentarios y porque no, desarrollen algunas actividades que voy a proponer.

De nuevo sean todos bienvenidos.