Les comparto el artículo User Experience Evaluation in Nokia [PDF - 38 KB], en donde esta compañía describe su proceso de desarrollo de productos desde la perspectiva UX, discute los requisitos para una evaluación de UX y presenta los diferentes métodos que usan para evaluar la UX en las diferentes fases de su proceso de desarrollo
.
Como es de esperarse, ellos utilizan desde prototipos en papel, en un proceso que busca tanto diseñar las nuevas experiencias de sus clientes, como mejorar continuamente sus soluciones existentes. Proceso que, además, comienza examinando las necesidades de sus usuarios y sus comportamientos.
Olvídate que Nokia es una empresa que fabrica móviles y aprende de este proceso para los desarrollos Web de tu compañía.
Actualización: Acabo de encontrar el sitio de BetaLabs de Nokia. Precisamente allí podemos descargar, probar y comentar las aplicaciones que están en estado Beta y en las cuales Nokia está trabajando. ¡Esto es lo que se llama inclusión! Todos los usuarios podemos participar del desarrollo e innovación de Nokia.
Gracias a InfoDesign y the product usability weblog.
Experiencia de Usuario en Nokia
lunes, mayo 05, 2008
Videos y Podcasts de IxDA Interaction 08
domingo, mayo 04, 2008
A mediados de febrero te comenté sobre algunos videos de Interaction 08, la primera conferencia organizada por IxDA - The Interaction Design Association (La Asociación de Diseño de Interacción).
Hoy tengo el placer de informarte que ya han publicado oficialmente la mayoría de los Videos y Presentaciones de la Conferencia que reunió muchos de los grandes exponentes del Diseño de Interacción en Estados Unidos.
Gracias a IxDA.
¿Qué es Diseño?
lunes, abril 28, 2008
Artículo Original: What is Design? (Yes, all 10 definitions!)
Author: Frank Spillers, MS
Fecha: 30 de octubre de 2007
Traducido rápidamente por: Gabriel Porras
Visita el artículo original para leer el artículo completo en inglés.
Cuando el término diseño es usado puede significar muchas cosas, dependiendo de quién eres y qué conversación estás teniendo.
Debido a que la palabra “diseño” tiene muchos significados y para mucha gente, vamos a definirlo desde la perspectiva de un consultor de usabilidad, agrupando los “diferentes diseños” en 4 conjuntos:
DISEÑO PARA LA MENTE
Es el diseño que impacta los procesos cognitivos incluyendo la interpretación y entendimiento de la experiencia.
- Diseño de Interfaces de Usuario: Es el diseño y diagramación de las pantallas. Se enfoca en las interacciones del usuario y los comportamientos de la pantalla. Su objetivo es mejorar la “experiencia de usuario” o la usabilidad del diseño.
- Arquitectura de la Información: Es el diseño de esqueletos o “wireframes” con las interacciones en pantalla, de la diagramación, navegación y funcionalidades de un producto. Es usado para reseñar, conceptualizar y probar la funcionalidad inicial.
- Diseño de Interacción: Es el diseño que se enfoca en cómo el usuario interactúa con una página, aplicación o producto. Tiene un acercamiento orientado a la tarea, asegurándose que lo principal sea el flujo de la interacción.
DISEÑO PARA EL CORAZÓN
Es el diseño que impacta los procesos sensitivos incluyendo los sentimientos y la emoción o las cualidades afectivas de la experiencia.
- Diseño Gráfico: Es el diseño del “look and feel”. Se focaliza en mejorar la apariencia de la diagramación, botones, colores, iconos y elementos de la marca, en mejorar o estilizar los aspectos del diseño.
- Diseño Interactivo: Este diseño es una disciplina híbrida que captura un poco de todo. Produce buenas piezas de Flash, animaciones, diseño gráfico y algo de programación con bases de datos o HTML.
- Diseño Emocional: Este diseño viene del campo de la usabilidad y el diseño de productos. Está involucrado con las cualidades sociales, ambientales, personales e íntimas de la experiencia de usuario. Este nos puede informar sobre el resultado de cualquiera de los otros tipos de diseño.
DISEÑO PARA EL CUERPO
Este es el diseño que impacta los procesos antropomórficos incluyendo los contextos sociales y físicos de la experiencia.
- Diseño Industrial: Diseña los productos físicos con los cuales nos relacionamos, por ejemplo los dispositivos móviles. El resultado: productos intuitivos, que se sienten, suenan, se ven y trabajan elegantemente.
METODOLOGÍAS/ENFOQUES INTEGRALES
Este último grupo presenta metodologías que agrupan las anteriores técnicas de diseño.
- Diseño Centrado en el Usuario: Este diseño coloca al usuario en el centro e involucra tres actividades principales: investigación de usuarios, prototipado y evaluaciones de usabilidad. Es iterativo por naturaleza.
- Diseño de Experiencia de Usuario: Un término relativamente nuevo que “mejora” el Diseño Centrado en el Usuario adicionándole un elemento más integral a la experiencia. Este diseño o, lo que es lo mismo, la Experiencia de Usuario, se puede considerar más como un acercamiento general y agrupador. No es un tipo de diseño de por sí, ya que sus entregables son los mismos de los Diseños para la Mente.
- Diseño de Experiencia: Este término es usado comúnmente como el abreviado de Diseño de Experiencia de Usuario, sin embargo es más ampliamente considerado como lo que llamamos Diseño Ambiental o el diseño de la experiencia en ambientes abiertos/públicos o de comercio. De nuevo, el Diseño de Experiencia, es una “sombrilla” que cobija todas las decisiones de diseño pero con una experiencia más vivencial. Este diseño hace uso del contexto, de los fenómenos sociales y ambientales, así como también de los sentimientos, percepciones e intuiciones del usuario.
En resumen: A lo mejor en este punto ya entiendes por qué el “diseño” puede ser tan ambiguo algunas veces. Así que la próxima vez que escuches “diseño”, te sentarás con la persona que hablas y definirás a qué “diseño” se refieren.
Gracias a InfoDesign.
¿Por qué es Exitoso el iPhone?
jueves, abril 24, 2008
¿Por qué es Exitoso el iPhone y en general todos los productos de Apple? Por lo que menciono en mi presentación Sitios Exitosos: Por la Experiencia de sus Usuarios. Y eso lo han corroborado en uiGarden con un Test de usabilidad del iPhone.
En este test: So… Does the iPhone live up to its hype? evaluaron a 5 usuarios con 4 teléfonos: un HTC TyTN, un Sony Ericsson W910i, un Nokia N95 y un Apple iPhone.
Sin lugar a dudas el mejor teléfono fue aquel más fácil de usar, es decir, aquel con el cual sus usuarios tuvieron una mejor Experiencia de Usuario: el iPhone.
Así que recuerda: No basta con que tu sitio funcione bien. Se necesita también que tus usuarios tengan una excelente experiencia. ¡Eso marcará la diferencia!
Gracias al Laboratorio Aragonés de Usabilidad, en donde encontrarás un resumen en español de lo que realizaron en este Test de Usabilidad.
User Interface Workshop Barcelona
miércoles, abril 23, 2008
Para quienes están en Barcelona he aquí un Workshop bien interesante: User Interface Workshop - 6a Edición.El curso está organizado en módulos, con lo que es posible apuntarse solamente a aquellas sesiones que más os interesen
. Adicionalmente lo dictan excelentes expertos, de la talla de Eduardo Manchón y César Martín de Alzado.org.El objetivo del Workshop es proporcionar una base teórica y práctica para el desarrollo de interfaces de usuarios
.La principal novedad respecto a cursos anteriores es la participación del equipo de Panoramio.com (Google): Eduardo Manchón hablará de interfaces para la generación de comunidades on-line y de José Florido impartirá una sesión sobre tagging y sistemas de navegación
.
Gracias a la lista de Cadius y recuerda que pueden encontrar más eventos para España y Latinoamérica en nuestra agenda.
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario
domingo, abril 20, 2008
Comparto mi presentación Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario. Si tu Universidad está interesada en presentar esta charla, se pueden comunicar conmigo que lo haré con mucho gusto (y obviamente sin costo alguno).
¡Comentarios más que bienvenidos!
Cursos Gratuitos en Learning Space
jueves, abril 03, 2008
Gracias a Yusef les comparto otro recurso bien interesante: LearningSpace un espacio web de Open University en el que ofrecen acceso completo a formación virtual.
Dentro de los cursos que nos ofrecen gratuitamente y de nuestro interés están:
- People-centred designing
- Accessibility in interaction design
- Designing the user interface
- Design
- Managing Complexity: A Systems Approach
Actualización: De manos de Usándolo me acabo de dar cuenta de otro curso gratuito, nada más y nada menos que en el MIT: User Interface Design and Implementation.
Nueva Edición de eMinds
viernes, marzo 28, 2008
Gracias a la lista Cadus me entero que acaba de salir la cuarta edición (tercera digital) de eMinds: International Journal on Human-Computer Interaction.
Los artículos de esta edición son:
- Usability Engineering de Anil Kumar y Shampa Chakraverty
- Interface Design Patterns, Languages and Models de Patrícia C. T. Gonçalves y João Manuel R. S. Tavares
- Interfaces for Special User Needs de jue wang y nan Yan
- Augmented and Virtual Reality de Kenji Terabayashi, Natsuki Miyata y Jun Ota
- Semantic Web and Knowledge Management de Christos Fidas, Manolis Maragoudakis y Nikolaos Avouris
- Usability Reports: Internationalization I18n y Shortcuts de Mónica Vázquez-Goyarzu, Martin Gonzalez-Rodriguez, Carlos Tejo-Alonso y José R. Bobes
Propuesta de Rediseño del Home del Sena Virtual
domingo, febrero 24, 2008
Un error común en Internet es crear sitios Web sin pensar en sus usuarios. Los contenidos y la forma de presentarlos se definen con base en las políticas internas de las empresas y algunas veces, por no decir que muchas, es el enfoque errado.
Un sitio Web debe crearse pensando en sus visitantes. Esto es el Diseño Centrado en el Usuario. No es tomar toda la información que la compañía tiene para publicar, sino la que los visitantes necesitan encontrar.
Ejemplos claros de esto se pueden ver en sitios que dan la bienvenida al usuario con imágenes o animaciones, cuando los internautas buscan generalmente es información y servicios. Vemos sitios corporativos con un Home lleno de secciones (encuestas, datos económicos, titulares de prensa, noticias…), cuando el visitante lo que quiere es conocer la empresa y sus servicios.
Hoy quiero plantear el rediseño de un sitio Web. Haremos un rápido análisis del Home actual del Sena Virtual, y elaboraremos una propuesta de rediseño pensando en los posibles visitantes que debe tener este sitio.
¿Sabemos de quién estamos hablando? El Servicio Nacional de Aprendizaje (SENA) es un establecimiento que presta el servicio de Formación Profesional Integral gratuita en toda Colombia, el cual, aprovechando las bondades de Internet, ha ampliado su oferta educativa mediante cursos virtuales, los cuales se ofrecen a través del sitio Sena Virtual.
Este sitio es uno de los merecidos ganadores del Premio Colombia en Línea 2007 como Mejor Sitio de Aprendizaje en Línea en el país y sin lugar a dudas, la labor del Sena es estupenda, toda vez que le lleva educación a toda Colombia gratuitamente.
Ahora, ¿quiénes visitan este sitio? La metodología de “Personas” nos invita a hacer una descripción detallada de los usuarios, pero sin llegar a este análisis, considero que principalmente hay dos tipos de visitantes: los estudiantes actuales y los estudiantes potenciales del Sena Virtual. Seguro hay más visitantes: docentes, empresas interesadas en cursos para sus empleados, entre muchos otros. Pero creo, que las “personas” más importantes y en los cuales deberíamos estar más interesados son los Estudiantes.
¿Qué hacen ellos en el sitio? La metodología de “Escenarios” propone definir tareas comunes de nuestros usuarios (las “personas”). Para este ejemplo las simplificaré en estas tareas:
- Los estudiantes actuales necesitan, principalmente, ingresar al sitio para tomar sus cursos, e igualmente conocer los nuevos y/o próximos a realizarse.
- Los estudiantes potenciales, principalmente, necesitan conocer la oferta educativa del Sena, al igual que conocer el proceso de inscripción en los mismos.
Ahora, basados en los usuarios y tareas que definimos (que supondremos como acertadas), nos debemos preguntar: ¿el home actual del Sena Virtual ayuda a estos usuarios en sus tareas?
Veamos cómo está diagramado:
- Encabezado: Su función es identificar el sitio. Aunque claramente está el logo del Sena y hay un slogan: “Comunidad de Aprendizaje” me parece que se puede mejorar. Primero porque cubre mucho espacio y segundo porque no cumple una buena práctica de-facto en cuanto a ubicación del logo. Actualmente está al lado derecho y debería estar al lado izquierdo.
Así que nuestra propuesta sería reubicar el logo y colocarlo como Sena Virtual (para diferenciarlo del sitio del Sena). Adicionalmente podríamos redefinir el slogan como “La Comunidad Online de Aprendizaje del SENA”. ¿No les parece mejor? Y por último disminuiríamos el espacio que ocupa este encabezado. - Presentación: Aquí simplemente hay unas palabras de bienvenida junto con una imagen decorativa. También presentan el Premio Colombia en Línea que ganaron. ¿Esta información sirve a nuestros estudiantes? Realmente no. Si soy un estudiante activo necesito es estudiar y si soy uno potencial quiero conocer los cursos que me ofrecen. Los expertos en usabilidad recuerdan que es mejor listar los servicios que invitar a conocerlos. Igualmente el logo del Premio no da un valor agregado a los estudiantes.
Así que nuestro rediseño eliminaría las palabras de bienvenida, reubicaría la imagen del Premio fuera de esta sección y aquí podríamos presentar 1 o 2 cursos que queramos resaltar, ya sea porque sean nuevos y/o porque estén próximos a comenzar. ¿Tenemos muchos cursos? Simplemente colocamos aleatoriamente uno de ellos cada vez que ingrese un usuario y colocamos un vínculo a “Cursos que comienzan esta semana” o “Nuevos cursos”. - Noticias: Esta sección me parece válida y aunque no ayuda directamente a cumplir las tareas de nuestros estudiantes, son de esas secciones que no pueden faltar.
Así que en nuestro rediseño simplemente reduciría la cantidad de texto presentado por cada noticia y al final de ellas podríamos colocar un vínculo a “Anteriores noticias” para ofrecer un histórico. - Menú de Servicios: El menú es básico en todo sitio Web, ¿pero el actual está bien concebido? Hay 4 secciones: Aprendices, Biblioteca Virtual, Correo Electrónico y Encuestas.
La primera sección “Aprendices” presenta los ítems que necesitamos: “Nuestros Cursos Ofertados” e “Iniciar Sesión”. Pero también hay un “Ingreso a la Oficina Virtual” y un “Curso de Inducción”, el primero sirve a los estudiantes activos y el segundo a los potenciales.
Este menú podríamos mejorarlo separando los ítems que son para los estudiantes activos y los potenciales, al igual que haríamos una sección aparte para los cursos.
Adicionalmente la “Biblioteca Virtual” y el “Correo Electrónico”, podríamos colocarlo en una categoría de Servicios, en donde seguramente se pueden colocar otros ítems.
La sección de “Encuestas” sobra. Primero, no ayuda a los estudiantes en sus tareas. Segundo, si el Sena desea hacer una encuesta entre sus usuarios, es mejor enviarles un correo e invitarlos a responderla en una página preparada para ello.
Finalmente debemos recordar que este menú nos debe dar acceso a cualquier página del sitio. Por lo tanto faltan ítems tan importantes como Quiénes Somos, Noticias, Herramientas (que actualmente están ocupando toda la columna izquierda), y algo tan importante como Proceso de Inscripción, el cual no encuentro en ninguna parte del Home.
En resumen, en lugar de tener:- Aprendices
- Nuestros servicios ofertados
- Iniciar sesión
- Ingreso a la oficina virtual
- Curso de inducción
- Inglés para todos los colombianos - Biblioteca Virtual
- Biblioteca Virtual Sena - Correo Electrónico
- Correo MiSena
- Reestablecer contraseña - Encuesta
- Colombianos en el exterior
Podríamos tener algo como:- Oferta de Cursos (lo coloco de primero porque sirve tanto a estudiantes activos como potenciales)
- Inglés para todos los colombianos (el cual está muy resaltado en el Home actual).
- Clasificados por Categorías
- Todos los cursos
- Próximos a iniciar
- Nuevos - Estudiantes Activos
- Inicio sesión
- Ingreso a la oficina virtual - Estudiantes Nuevos
- Matrículas
- Curso de Inducción
- Herramientas necesarias (requisitos)
- Información para Extranjeros (Recuerden que estamos en Internet a la vista de todo el mundo. ¿El Sena Virtual ofrece educación gratuita también a extranjeros? Aquí se puede responder esta pregunta. Por lo menos este es un vínculo que nunca falta en las Universidades estado unidenses y europeas). - Sena Virtual
- Quienes Somos
- Noticias
- Contáctenos (¡En el sitio no lo veo por ningún lado!) - Servicios (Lo coloco aparte y no dentro de Estudiantes Activos porque, según leí, también se ofrecen a docentes, proveedores, etc.)
- Biblioteca Virtual Sena
- Correo Electrónico
Este puede ser un mejor menú. ¿El ideal? ¡Definitivamente no! Necesitamos conocer todo el sitio para poder completar los ítems que faltan y verificar que los que están si están bien ubicados. Porque como dijimos anteriormente, éste debe servir para navegar todo el sitio.
Mínimo las 3 primeras categorías son muy acertadas para nuestros visitantes más importantes: los estudiantes (activos y potenciales).
Adicionalmente aunque la agrupación de los ítems puede parecer lógica, sería ideal apoyarnos de una metodología tipo Card Sorting, en la cual son los mismos usuarios quienes nos ayudan a hacer la categorización. Al fin y al cabo ellos son quienes harán uso del mismo.
En cuanto a diseño, es una gran pérdida de espacio el utilizar botones para cada uno de los ítems. Tan sólo observemos que este menú en una pantalla de 1024x768 sólo permite ver 5 opciones. Por lo tanto, es recomendable utilizar un menú que ocupe un espacio menor. - Aprendices
- Enlaces a sitios: Estos vínculos a sitios “amigos” no ayudan para nada en las tareas de nuestros estudiantes. Es otra sección de esas que hay que tener (por lo que he visto en los sitios del gobierno Colombiano) pero definitivamente no deben estar en el menú.
Para este caso en nuestro rediseño los colocaríamos en la parte inferior de la página, como he visto que lo hacen otros sitios del gobierno. - Herramientas: Finalmente esta columna presenta las herramientas necesarias para tomar los cursos del Sena Virtual. ¿Importante? Por supuesto. Pero la pregunta que debemos hacernos es: ¿Deben estar en el Home?
Si miramos desde la perspectiva del estudiante activo: no sirve, porque ya debe tener estas herramientas. Y desde el punto de vista del estudiante potencial esta es una información que sobra si la comparamos contra los cursos, toda vez que él está buscando qué estudiar. Lo que necesita para hacerlo sería posterior.
Así que esta columna la podemos eliminar y su contenido lo podemos colocar dentro de la información para los estudiantes nuevos. Es importante resaltar, adicionalmente, que cada curso debería tener la información de las herramientas que se necesitan para cursarlo.
Hasta aquí el contenido del Home actual. Volvamos a evaluar las tareas de nuestros estudiantes.
- Los estudiantes actuales necesitan, principalmente, ingresar al sitio para tomar sus cursos, e igualmente conocer los nuevos y/o próximos a realizarse.
- Los estudiantes potenciales, principalmente, necesitan conocer la oferta educativa del Sena, al igual que conocer el proceso de inscripción en los mismos.
Para todos los estudiantes (tanto los activos como los potenciales) tenemos en el menú todas las opciones que necesitan (las 3 primeras secciones). ¿Pero es suficiente? ¡No!
Si el Home debe destacar por algo es por hacer más rápidas y fáciles las tareas de nuestros usuarios principales.
La tarea principal del estudiante activo es ingresar a sus cursos, por lo tanto sería ideal, que en el Home tengamos una sección de Login. En cuanto a la oferta de cursos ya mencionamos que en la sección 2 tendríamos 1 o 2 cursos resaltados.
Sólo nos faltaría, para el estudiante potencial, la información sobre cómo matricularse.
Así es que hemos completado nuestro nuevo Home del Sena Virtual así:
- Un nuevo encabezado con logo y slogan.
- Un nuevo menú.
- Una sección con un curso resaltado.
- Una sección de login.
- Una sección con la información para matriculas.
- Una sección de noticias.
- El infaltable pie de página
En cuanto a diagramación se podrían plantear una propuesta como esta:
Esto es un prototipo de baja fidelidad: un primer acercamiento, una versión en borrador del Home.
Es una propuesta, que si nuestra definición de usuarios y tareas está correcta resulta muy válida. Pero, es una propuesta de varias que se pueden generar. Podemos generar otras mostrando las 4 secciones principales en otro orden y en otras diagramaciones.
El proceso continúa, pero el ejercicio que quería presentarles ha finalizado.
Para terminar, ¿qué te ha quedado? Puedes hacer un rápido ejercicio definiendo los usuarios que más usan tu sitio. Luego define las tareas que ellos realizan en él. Ahora pregúntate: ¿mi Home les ayuda a estos usuarios a hacer sus tareas rápida y fácilmente?
Presentaciones de Interaction 08
miércoles, febrero 13, 2008
Interaction 08 es la primera conferencia anual organizada por IxDA - The Interaction Design Association (La Asociación de Diseño de Interacción). Se realizó en Georgia (Estados Unidos) hace tan solo 5 días.
Aunque ya pasó este encuentro, tengo el placer de informarles que acaban de publicar gran parte de los videos de las presentaciones. Así que si te interesa el Diseño de Interacción esta es una gran oportunidad de enterarte de lo que sucedió en la Conferencia.
Gracias a guuui.com.
Funcionalidad No es Usabilidad
lunes, febrero 11, 2008
Artículo Original: Funcionalidad no es usabilidad
Author: Alberto LaCalle
Construir funcionalidades en un producto no garantiza que tus usuarios las utilicen.
Funcionalidad es lo que un producto puede hacer. Probar la funcionalidad significa asegurar que el producto funciona tal como estaba especificado.
Usabilidad es cómo la gente usa un producto. Probar la usabilidad significa asegurar que las personas saben utilizar las funcionalidades para cumplir sus objetivos.
Que un producto funcione correctamente es crítico, pero no suficiente para que ese producto tenga éxito. Un producto por sí mismo no tiene valor. El valor se lo da el uso, y el uso lo dan los usuarios.
La forma en la que el producto es utilizado es una responsabilidad de los diseñadores de producto y desarrolladores.
Qué es usabilidad
Usabilidad significa que las personas al usar un producto pueden hacer sus tareas de forma rápida y fácil. La usabilidad se fundamenta en cuatro puntos:Centrado en los usuarios
Para desarrollar un producto usable, tienes que saber, entender y trabajar con personas que representen a usuarios actuales o potenciales.
Un diseñador, un responsable de proyecto, un supervisor o un cliente sólo se representan a ellos y no pueden sustituir a los usuarios finales.
Productividad
La gente considera que un producto es "fácil de usar y aprender" después de valorar el tiempo que necesita, el número de pasos y el éxito en predecir las acciones adecuadas.
Si quieres diseñar un producto usable debes entender los objetivos de tus usuarios.
Usuarios ocupados
El software es una herramienta de trabajo u ocio, y las personas somos poco tolerantes a dedicar tiempo en aprender y utilizar herramientas.
El usuario decide
Los usuarios, y no los diseñadores o desarrolladores, determinan cuándo un producto es fácil de usar. Cada persona estima el esfuerzo y el tiempo necesario para obtener algo.
Piensa en todas las funciones que tiene tu móvil, ordenador, programa, equipo de música o aparato de tecnología y que NO USAS, y el tiempo que estarías dispuesto a dedicar en aprender a usarlo todo.
Fuente: Introducing Usability , A practical guide to usability.
Capire: Edición Febrero 2008
lunes, febrero 04, 2008
Acaba de publicarse la edición de Febrero 2008 de Capire: Revista de Estrategia e Interacción.
Para esta edición nos traen los artículos:
- El proyecto Charmr por Dan Saffer (Director de Diseño de Experiencia) y Alexa Andrzejewki (Diseñadora de Interacción) de Adaptive Path.
- Mitos y leyendas sobre la Usabilidad por Juan Luis Martínez, Director de la revista.
- Emoción y Goce en el diseño tecnológico por el equipo de Amberlight.
- La apariencia de modernidad en servicios web por Gabriela García Directora de Amable eGobierno.
- Tipología de la Experiencia de Usuario en e-commerce por Jesús Carreras, consultor de DNX Group.
10 Principios para un Diseño Web Efectivo
sábado, febrero 02, 2008
Artículo Original: 10 Principles of Effective Web Design
Author: Smashing Magazine
Fecha: 31 de enero de 2008
Traducido rápidamente por: Gabriel Porras
Visita el artículo original para ver ejemplos de cada principio.
La Usabilidad y la utilidad, y no el diseño visual, son los que determinan el éxito o el fracaso de un sitio Web. Puesto que el visitante de una página es la única persona que hace clic en el mouse y, por consiguiente, decide lo que quiere hacer, el diseño centrado en el usuario se ha establecido como un método estándar hacia el diseño Web comercial y exitoso.
No vamos a discutir los detalles de implementación (por ejemplo dónde debe colocarse la caja de búsqueda), como ya lo hemos hecho en otros artículos, sino que nos centraremos en los principios, heurísticas y estrategias para un diseño web efectivo – métodos que, usados apropiadamente, pueden guiarnos a decisiones de diseño más sofisticadas y a simplificar el proceso de percepción de la información presentada.
¿CÓMO PIENSAN LOS USUARIOS?
Básicamente, los hábitos de los usuarios de un sitio Web son diferentes de los hábitos de los compradores de una tienda. Los visitantes dan un vistazo a cada nueva página, examinan rápidamente algo del texto y hacen clic en el primer vínculo que les llama su atención o se asemeja vagamente a los que están buscando. De hecho, hay muchas partes de la página que ni siquiera miran.
La mayoría de los usuarios buscan algo de su interés (o que les sea útil) y que tenga un vínculo. Tan pronto lo encuentran le hacen clic. Y si en la nueva página no encuentran lo que estaban buscando, hacen clic en el botón Atrás y el proceso de búsqueda continua.
- Los usuarios aprecian la calidad y la credibilidad. El contenido es más importante que el diseño. Es por eso que sitios con muy buen contenido y no tan bien diseños obtienen gran cantidad de tráfico.
- Los usuarios no leen, sino que ojean rápidamente. Buscan puntos fijos que los guíen hacia lo que están buscando.
- Los usuarios son impacientes y quieren resultados instantáneos. Un principio simple: Si un diseño no hace que el usuario encuentre lo que busca, el diseñador falla y hace perder dinero a la empresa. Entre más tenga que pensar el usuario y la navegación sea menos intuitiva, más fácil será que los usuarios busquen otras alternativas.
- Los usuarios no seleccionan lo más óptimo. No examinan la página linealmente ni van de sección en sección buscando lo que necesitan. Por el contrario buscan rápidamente y toman la primera opción que encuentren, en lugar de buscar la mejor de todas las opciones.
- Los usuarios siguen su intuición. La mayoría de las veces los usuarios se las arreglan como puedan, sin siquiera leer la información que el diseñador ha puesto.
- Los usuarios quieren tener el control. Sobre su navegador y esperan que todo el sitio sea consistente. Es por eso que no les gustan los pop-ups ni que el botón Atrás les deje de funcionar. Así que es una buena práctica nunca abrir vínculos en nuevas ventanas.
LOS PRINCIPIOS
- No hagas pensar a los usuarios
De acuerdo a la primera ley de la usabilidad de Krug, la página web debe ser obvia y auto-explicativa. Tu trabajo al diseñar una página es que el usuario no tenga ninguna pregunta. Debes tener una navegación y una arquitectura intuitiva, una estructura clara, ayudas visuales moderadas y vínculos fácilmente identificables. El visitante debe entender qué hace la página, cómo funciona y cómo puede ir a otro lado. De eso se trata que no tenga ninguna pregunta.
Una vez que tus visitantes entiendan de qué se trata tu sitio, les puedes explicar por qué es útil y cómo se pueden beneficiar de él. - No desperdicies el tiempo de los usuarios
Si vas a ofrecer algún servicio o herramienta, trata de tener unos requisitos mínimos. Entre menos necesiten los usuarios para probar un servicio, más fácil lo harán. Ellos quieren “jugar” con él, en lugar de registrarse porque tal vez nunca vuelvan. Déjalos explorar y descubrir cuáles son tus servicios sin pedirles ni el correo.
Un solo registro es suficiente para evitar que tus visitantes naveguen en tu sitio y reducir tu tráfico. - Haz que los usuarios enfoquen su atención
Algunas partes de la interfaz de usuario atraen la atención más que otras. Obviamente las imágenes son más atractivas que el texto y la negrita atrae más que el texto plano. El ojo humano no es para nada lineal y los usuarios pueden identificar instantáneamente bordes, patrones y movimiento.
Así que enfocar la atención del usuario a áreas específicas del sitio mediante el uso moderado de elementos visuales puede ayudar a que fácilmente vaya de un lugar a otro sin siquiera pensarlo. Este visitante estará más orientado y desarrollará más confianza en el sitio, y por ende en la compañía que visita. Entre menos tenga que pensar el usuario, mejor será su experiencia. - Esfuérzate por mostrarte
Los diseños Web modernos son normalmente criticados por guiar a sus usuarios con unos procesos 1-2-3 muy atrayentes y por tener botones grandes con efectos visuales Pero precisamente estas guías son extremadamente útiles, porque guían al usuario de una manera muy amigable y simple.
Dejar ver al usuario claramente las funciones disponibles es un principio fundamental del diseño de interfaces de usuario. No importa cómo se logre, lo que importa es que el contenido sea entendible. - Haz uso de una buena escritura
Como la web es diferente de los medios impresos, es necesario ajustar el estilo de escritura a los gustos y hábitos de los usuarios.
Evita nombres lindos, rebuscados, de mercadeo, específicos de la compañía, técnicos o no familiares. Si quieres que los usuarios creen una cuenta, usa “Regístrate” en lugar de “Comienza ahora”, que es aún mejor que “Explora nuestros servicios”.
Una solución óptima para una escritura efectiva es:- Usa frases cortas y concisas.
- Usa una diagramación que se ojee fácilmente (categoriza el contenido, usa múltiples niveles en los encabezados, usa elementos visuales y listas).
- Usa un lenguaje objetivo y plano.
- Esfuérzate por la simplicidad
El principio “Hazlo Simple” (KIS: Keep It Simple) debería ser el objetivo principal del diseño de un sitio. Los usuarios raramente visitan un sitio por su diseño. Lo que buscan es información o servicios.
Desde el punto de vista del visitante el mejor diseño es uno en sólo texto, sin publicidades. Es por eso que una versión para imprimir de las páginas es esencial para una buena experiencia de usuario. - No le tengas miedo al espacio en blanco
Actualmente es difícil valorar la importancia de los espacios en blanco. No sólo ayudan a reducir la carga cognoscitiva, sino que también mejoran la percepción de la información. Cuando un visitante llega a una página lo primero que intenta hacer es examinar la página y dividirla en secciones y los espacios en blanco son esenciales en esta tarea.
Las estructuras complejas son más difíciles de leer, examinar, analizar y de trabajar con ellas. Las estructuras jerárquicas reducen la complejidad (Ley de Simon): entre mejor logres que tus usuarios encuentren un sentido de jerarquía, tu contenido será más fácilmente percibido. - Comunícate efectivamente con un lenguaje visual
En sus artículos de comunicación visual efectiva, Aaron Marcus declara tres principios fundamentales [en] implicados en el llamado lenguaje visual:- Organiza: dale al usuario una estructura conceptual consistente y clara. Conceptos importantes dentro de la organización son: la consistencia, la diagramación, las relaciones y la navegación.
- Ahorra: haz lo que más puedas con tus elementos visuales. Los cuatro puntos principales a tener en cuenta son: simplicidad (sólo incluye los elementos importantes), claridad (ningún elemento debería presentar ambigüedad), individualidad (debe ser distinguible lo que realmente importa) y énfasis (los elementos más importantes deben ser los que más fácilmente se perciban).
- Comunica: La interfaz del usuario debe mantener un balance en legibilidad, tipografía, simbolismos, visualización y color, para poder comunicarse efectivamente. Usa máximo 3 tipos de letras en cómo máximo 3 tamaños y un máximo de 18 palabras o 50-80 caracteres por línea.
- Las convenciones son nuestras amigas
Las convenciones son muy útiles para reducir la curva de aprendizaje y el tener que pensar cómo funcionan las cosas. Imagínate cómo sería si todos los sitios usaran un icono diferente para sus RSSs. ¡Toda una pesadilla para la usabilidad!
Con ellas ganas la confianza y credibilidad de tus usuarios. Entiende qué es lo que esperan los usuarios de la navegación de un sitio, de la estructura del texto, del lugar de la búsqueda, etc.
Por ejemplo traduce tu página a otro lenguaje como el japonés y pon a prueba el sitio con algunos usuarios. Si las convenciones están bien aplicadas, aunque la página esté en otro idioma, estos usuarios podrán ubicarse en ella. - Prueba temprano, prueba a menudo
Este principio llamado TETO (Test Early, Test Often) debería ser aplicado en todo proyecto, debido a que estas pruebas de usabilidad a menudo dan gran conocimiento sobre problemas y situaciones.
Sólo podrás saber con certeza que un diseño es mejor que otro analizándolo desde un punto específico, es decir: probando con un usuario.
Algunos puntos importantes para que tengas en cuenta:- De acuerdo a Steve Krug, probar con un solo usuario, es 100% mejor que probar con ninguno y probar con uno al principio del proyecto es mucho mejor que probar con 50 al final. De acuerdo a la primera ley de Boehm, los errores son más frecuentes en la etapa de requisitos y diseño y entre más se demoren en removerse serán más costosos.
- Las pruebas son un proceso iterativo, lo que significa que cuando diseñas algo, lo pruebas, lo arreglas y lo vuelves a probar.
- Las pruebas de usabilidad siempre producen resultados útiles. Ya sea porque encuentres problemas que tienes o para ver que no tienes grandes fallas en tu diseño.
- De acuerdo a la ley de Weinberg, un desarrollador no es el apropiado para probar su propio código. Lo que aplica también para los diseñadores. Ya has trabajado mucho en un diseño, lo conoces, lo que hace que no tengas una perspectiva diferente sobre él. Ya sabes cómo se hizo y cómo funciona, así que busca otras personas para que lo prueben.
REFERENCIAS
- Designing Effective User Interfaces por Suzanne Martin
- Summary on Web Design
- UID presentation (Flash)
- Research-Based Web Design & Usability Guidelines
- “The psychology of computer programming” por Gerald Weinberg
- “Designing Web Usability” por Jakob Nielsen [JN / DWU]
- “Prioritizing Web Usability” por Jakob Nielsen
- “Don’t Make Me Think” por Steve Krug
- “Usability for the Web: Designing Web Sites that Work” por Tom Brinck, Darren Gergle, Scott Wood
- A Summary of Principles for User-Interface Design
Número 3 de la Revista e-Minds
miércoles, enero 30, 2008
¡Que bien que cada día salen más y más publicaciones dentro del área de la Interacción Humano-Computador! Primero conocí a Faz, la Revista de Diseño de Interacción, luego a Capire: Revista de Estrategia e Interacción y hoy fue el turno de e-Minds: International Journal on Human-Computer Interaction, publicación anual cuyo objetivo es publicar información sobre la actualidad del área Interacción Humano-Computador.
Dentro de los datos relevantes que puedo darles es que es publicada en inglés por The Human Communication and Interaction Research Group de la Universidad de Oviedo (España) y que recién publican su edición número 3 con los siguientes artículos:
- Application of a Guideline for Design Improvement in Supervisory Control
- A natural interaction between the individual and the computer
- Designing a Smart Shopping-aid System Based on Human-Centered Approach
- Context-Aware Services in Smart Environments
- End User Development in AmI: a user centered design overview of issues and concepts
- Exploring Text-based and Graphical-based Usable Interfaces for Mobile Chat Systems
- Mind tape technique - a useability evaluation method for tracing cognitive processes in cross cultural settings
Gracias a la lista de Cadius.
Experiencia de Usuario 2.0
martes, enero 29, 2008
Jesús Gorriti, Diseñador de Interacción de DNX, estuvo el año pasado en el SIMO. Su ponencia se tituló Experiencia de Usuario 2.0 y la pueden encontrar en su blog, tanto la presentación, vía SlideShare, como su intervención de 40 min., vía Google Video (aunque en este momento dice que no está disponible).
Gracias a HCNet.
Libros de Usabilidad y Diseño de Interfaces
sábado, enero 26, 2008
Otra excelente recopilación la que se han fajado en Smashing Magazine: Usability and Interface Design Books.
En ella recopilan y reseñan estos excelentes libros de Usabilidad y Diseño de Interfaces. A continuación la lista vinculada a Amazon, pero en Smashing encuentran, además de las reseñas, el vínculo a los sitios oficiales.
- About Face 3. The Essentials of Interaction Design por Alan Cooper, Robert Reimann y David Cronin
- Prioritizing Web Usability por Jakob Nielsen y Hoa Loranger
- Designing the Obvious. A Common Sense Approach to Web Application Design por Robert Hoekman, Jr.
- Don’t Make Me Think. A Common Sense Approach to Web Usability por Steve Krug
- The Design of Sites. Patterns for Creating Winning Web Sites por Douglas Van Duyne, James Landay y Jason Hong
- The Design of Everyday Things por Donald A. Norman
- Designing Interfaces: Patterns for Effective Interaction Design por Jenifer Tidwell
- Designing for Interaction: Creating Smart Applications and Clever Devices por Dan Saffer
- Designing Interactions por Bill Moggridge
- Envisioning Information por Edward R. Tufte
- Interaction Design: Beyond Human-Computer Interaction por Jenny Preece, Yvonne Rogers y Helen Shar
- The Humane Interface: New Directions for Designing Interactive Systems por Jef Raskin
- Designing the User Interface: Strategies for Effective Human-Computer Interaction por Ben Shneiderman y Catherine Plaisant
- Thoughtful Interaction Design: A Design Perspective on Information Technology por Jonas Löwgren y Erik Stolterman
¿Qué hace que un sitio Web sea bueno?
viernes, enero 25, 2008
Artículo Original: What Makes a Good Website?
Author: APIS Design
Fecha: 25 de enero de 2008
Traducido por: Gabriel Porras
Ah, si, la pregunta del millón de dólares. ¿Qué hace que un sitio Web sea bueno? ¿Qué hace que sea malo? Todos queremos saberlo. Bueno, la belleza depende del ojo del espectador, por supuesto, pero hay cosas esenciales. Aquí hay 7 para obtener un buen sitio Web:
1. Idea/Objetivo
Esta es la cruz de la que hablamos cuando les hablamos. Nos escucharás usar mucho la palabra “objetivo”. ¿Por qué tienes un sitio Web? ¿Cuál es su propósito? ¿Cómo vas a medir su éxito?
2. Diseño
Aquí hablamos de cosas como la selección de color, alineación, interés visual y metáforas que tengan sentido.
3. Mensaje
El contenido es el rey. Cada página de tu sitio Web necesita un fin. Necesitas entender cuál es tu audiencia objetivo y qué quieres que hagan. Luego dárselos, con la información apropiada y un llamado a la acción que entiendan fácilmente.
4. Arquitectura
¿Cómo están organizadas tus páginas? ¿Son intuitivas? ¿Tu audiencia objetivo las entederá? Piensa en cómo son de diferentes Disney.com de Microsoft.com.
5. Usabilidad y Accesibilidad
El HTML todavía es un lenguaje y necesita estar bien formado y ser accessible. No todas las personas que visitan tu sitio están perfectamente capacitadas. Algunas de ellas tienen discapacidades, algunas tienen conexiones lentas, algunas no podrán instalar el plug-in de Flash. Entender tu audiciencia objetivo y tus objetivos te ayudarán a definer tus estándades de usabilidad y accesibilidad, sin lugar a dudas.
6. Mercadeo Online
Recurrir a los buscadores es todo un juego. Hazlo mal y terminarás prohibiéndote tu mismo en ellos. Hazlo bien y serás premiado con una gran cantidad de tráfico gratuito y del que necesitas. No es difícil, sólo toma experiencia y planeación.
7. Lo técnico
¿Es tu dominio fácil de recordar? ¿Es tu proveedor de Internet confiable? ¿Tienen otros 20.000 sitios hospedados en tu servidor? ¿Soportan las tecnologías que tu sitio necesita para crecer?
Componentes de un Sitio Web Exitoso
Son más numerosos de lo que crees. Y por eso hemos diseñado un diagrama para ilustrar algunos de los componentes importantes de un muy buen sitio Web.
Versión original en inglés:
Versión traducida al español (gracias a disacido):
Si deseas conocer algunos casos de estudio (en inglés) visita:
Gracias a Anieto2k.
Actualización: Otro gráfico titulado El iceberg de la experiencia de usuario, que muestra esta misma idea, lo acaban de reseñar en el blog de UsoLab.
User Experience Barcelona 2008 Workshop
martes, enero 22, 2008
Para quienes están en Barcelona he aquí un Workshop bien interesante: User Experience Barcelona 2008 Workshop.
El evento está dirigido a Profesionales del sector (Consultores de Experiencia de Usuario, Consultores de Usabilidad, Diseñadores, Programadores, Psicólogos, Arquitectos de Información…) y estudiantes interesados en éstas disciplinas.
La sesión está limitada a 15 plazas y tiene un costo de 550 € (hay descuentos) por los dos días (incluye desayuno y almuerzo).
El objetivo del Workshop es introducir nuevas metodologías centradas en la percepción del usuario para definir requisitos de diseño de producto. Las técnicas se mostrarán principalmente con una base práctica realizada en las mismas instalaciones del Laboratorio.
Gracias a la lista de Cadius y recuerden que pueden encontrar más eventos en España y Latinoamérica en nuestra agenda.
Manifiesto 2008 de la Experiencia de Usuario Móvil
sábado, enero 19, 2008
A finales de mayo de este año se realizará en Londrés la Conferencia MEX 2008: Mobile User Experience.
Para ella han publicado un interesante Manifiesto que deseo compartir con uds:
1. El contenido por sí mismo será la interfaz del futuro
Creemos que los iconos están muertos y el contenido por sí mismo será la nueva interfaz. Eliminando la confusión y el desorden de los elementos tradicionales como menús y barras de scroll podemos usar las fotos, la música y el video como el centro de la experiencia de usuario.
2. El teléfono ya no es sólo para la mano
Creemos que el papel de los dispositivos móviles se está expandiendo más allá de la mano. De hecho, los teléfonos están menos tiempo en ellas y están encontrando un lugar en el centro de nuestro cuarto. Esta tendencia representa un reto nuevo y mayor para la experiencia de usuario y requerirá que pensemos nuevas maneras de interactuar con los dispositivos móviles.
3. La fragmentación es el enemigo de la innovación
Creemos que la estructura actual de la industria está matando el desarrollo de aplicaciones. Hay una nueva ola de contenidos y servicios innovadores esperando a ser lanzados si construimos un entorno empresarial que le permita a estas nuevas compañías hacer dinero desde los móviles.
4. La moda/estilo es un mayor motivador que la funcionalidad
Creemos que la moda/estilo es un mayor motivador que las mismas características del producto. El color, la forma, la textura y el empaque juegan un papel importante a la hora de influenciar la decisión de compra de un móvil, más aún que la lista de especificaciones. Los márgenes más altos en el negocio de los teléfonos se logran gracias a dispositivos que se retrazan un poco en tecnología pero invierten en marca y en una mejor experiencia en las tiendas.
5. Los países en vía de desarrollo son la nueva frontera para la experiencia de usuario móvil
Es responsabilidad de la industria entregar comunicación y conectividad con Internet a estos desconectados de tal manera que sea relevante, usable y beneficioso localmente.
6. Las búsquedas requieren una estrategia radicalmente diferente en el ambiente móvil
Para encontrar respuestas los usuarios están buscando en el tiempo que les quede disponible. Los usuarios móviles necesitan acceso a un rango más amplio de técnicas de búsqueda, pero siendo suministradas dentro de una interfaz sumamente limitada.
7. Las listas de contactos inteligentes serán el centro de la interfaz de usuario futura
Creemos que la mensajería cambia la dinámica de la comunicación móvil. El punto focal natural para la próxima generación de interfaces de usuario es una lista de contactos inteligente. Mejorar la información y los servicios que puedan ser compartidos a través de redes centradas en la gente serán la mejor manera de motivar el uso de los servicios de voz, de mensajes y de datos.
8. Los pagos vía móvil predicen el próximo cambio generacional
Creemos que las aplicaciones de pago vía móvil guiarán el próximo gran salto en las comunicaciones inalámbricas, cuando nuestras interacciones con las máquinas comiencen a superar nuestras interacciones con la gente. Usar nuestros teléfonos móviles para pagar por bienes y servicios en el mundo real requiere un modelo de interacción y una interfaz de usuario de asombrosa simplicidad. El dinero y las tarjetas de crédito representan un punto de referencia impresionante – sólo cuando entregamos beneficios únicos y más allá de las soluciones existentes, los cuales explotarán los pagos vía móvil.
9. Los usuarios como personas: excepcionalmente complejo y contradictorio
Creemos que los clientes no pueden ser definidos por números o segmentos o datos demográficos. Cada usuario es excepcionalmente complejo y contradictorio. Si vamos a diseñar experiencias que identifiquen a los clientes como individuos, debemos desarrollar herramientas de investigación y técnicas de análisis que nos permitan vivir y respirar el mundo como los usuarios lo hacen.
10. El potencial de los servicios de voz inteligentes
Creemos que los amores de la industria con todas las cosas 2.0 nos están cegando a la realidad de que los usuarios están consumiendo más tiempo que nunca haciendo llamadas de voz. Hay una gran cantidad de funcionalidades potenciales y novedosas para los servicios de voz, que van desde las llamadas en conferencia y las llamadas en espera, hasta los mensajes para rechazar llamadas, los cuales están decayendo en uso por su pobre experiencia de usuario.
Gracias a InfoDesign.
IX Congreso de Interacción Persona-Ordenador
jueves, enero 17, 2008
¡Ya comienzan los preparativos de Interacción 2008! La IX edición del Congreso de