Nordic Design - El blog de Alex Lillo
Aplicaciones para prototipar en un iPad
22 / Jun / 2010
¿Es un tablet el dispositivo adecuado para crear prototipos? Personalmente tengo mis dudas de poder definir correctamente una interfaz sin un ratón, pero todo puede depender del uso que se le quiera dar. Para un primer contacto con el cliente, para pensar ideas mientras estas en el taxi/tren/avión puede ser una buena opción.
Desde luego las compañías ya se están poniendo las pilas, y hay disponibles varias aplicaciones para bocetar/prototipar en el iPad:
- iMockups. Quizás la que primero probaría. Económica, pensada para esbozar las ideas que tengas en mente, que posteriormente finalizarás en un ordenador. Ver la reseña en appolicious.
- OmniGraffle for the iPad. A pesar de que las reviews lo ponen muy bien, usuarios de OmniGraffle para Mac no opinan lo mismo. Desde luego un programa que cueste $50 deberá dar un muy buen resultado para compensar el gasto. ¿Ventaja? Que luego puedes seguir trabajando tu prototipo en el OmniGraffle de siempre.
- Keynote. Nunca he sido fan de hacer prototipos con Keynote/Powerpoint, pero obviamente se puede. Si ya lo tienes en tu iPad para preparar las presentaciones, prueba a esbozar tus ideas con él.
Os dejo con un video del iMockups que muestra muy bien el tipo de cosas para las que sería útil un tablet.
Published in: Usabilidad, Diseño
* * *
Guía de referencia - pantallas táctiles, gestos y prototipos
09 / Jun / 2010
El mundo de las aplicaciones táctiles todavía es relativamente nuevo, y por desgracia muchos de nosotros tenemos escaso contacto con ellas en el trabajo diario de una agencia de experiencia de usuario.
Para aquellos que se enfrenten a ello y tengan dudas sobre cómo explicar en papel los diferentes gestos que debe realizar el usuario sobre la pantalla, esta guía de referencia de gestos táctiles (PDF) le puede ser muy útil.
Hay más información sobre qué suele hacer cada gesto en los diferentes dispositivos (iPhone, Android, Windows Phone 7, etc.) en el post de Luke Wroblewsky Touch Gesture Reference Guide.
Hay templates para uso rápido en los siguientes sabores:
Vía Wireframes
Published in: Usabilidad, Diseño
* * *
Si tu usuario está comprando, ¡no le distraigas!
26 / Sep / 2009
El proceso de compra en una web es algo muy crítico. Aunque año tras año la gente va tomando confianza y compra más online, debes cuidar mucho que nada les suponga un impedimento o abandonarán (y tú tendrás una venta menos).
Es sorprendente como en muchos sitios web, al llegar al proceso de compra lo encontramos repleto de promociones, enlaces a otros lugares de la web y muchos otros elementos que distraen la atención de lo que queremos que haga el usuario: comprar.
Mi consejo para cuando te enfrentes a la tarea de diseñar un proceso de compra es que para cada elemento te preguntes: ¿Es esto útil para que el usuario termine la compra?
Si la respuesta es no, quizás sea mejor eliminarlo. Esto incluye menús, banners promocionales, enlaces transversales a otras secciones, etc.
Elementos que sí son interesantes incluyen teléfonos de ayuda, productos extras a añadir en la compra (upselling)… y no mucho más. Es probable que el resto sólo sirva para crear ruido, y hacerte perder una venta.
Published in: Usabilidad,
* * *
Notepod, un bloc para esbozar aplicaciones de iPhone
16 / Sep / 2009
Me ha parecido genial este bloc de notas con tamaño y forma de iPhone / iPod Touch, idea para esbozar las ideas que se te ocurran en el momento, de la manera más precisa posible.
Lo venden en packs de 3 en su web por $17.95, apenas algo más de 12€ al cambio de hoy (gastos de envío incluidos). Pena que no me dedique a ese tipo de interfaces, porque si no me compraba dos.
Vía @albertosanjose
Published in: Usabilidad, Diseño
* * *
Silverlight 3 y la usabilidad en las RIA
20 / Mar / 2009
Nota: Artículo publicado originalmente en el blog de Xperience Consulting: Happyuser
Este miércoles pasado Microsoft presentaba en el MIX09 la versión 3 de Silverlight, su alternativa al Flash de Adobe. Cargado de muchas e interesantes novedades, me incita principalmente a pensar en las diferencias innatas que presentan las RIA (Rich Internet Aplication) frente la web tradicional.
Y es que frente a una web estática formada por texto, enlaces e imágenes, nos encontramos con la posibilidad de introducir nuevas formas dinámicas de interacción con el usuario, video en alta definición o aplicaciones sincronizadas en la web y en escritorio, por poner un ejemplo.
Este abanico de posibilidades hace necesario pensar en la usabilidad de forma diferente, revisando si los conceptos clásicos siguen siendo útiles, o si es necesario abrir nuestra mente a nuevas formas de interacción, centrándonos más que nunca en el usuario desde el sentido común.
Personalmente creo que las RIA son el futuro que ya está aquí, aunque todavía tengan muy poca penetración en el mercado. Muchos no las necesitarán, y no creo que lleguen (en un futuro cercano) a sustituir a la web tal y como la conocemos.
Simplemente están para cubrir necesidades distintas.
Más información:
- Nota de prensa
- Explicación de las nuevas características, por Tim Heuer
- Videos y ejemplos de código. Para desarrolladores.
Published in: Usabilidad, Internet
* * *
El coste de que te hagan caso
17 / Mar / 2009
Durante el pasado UXbookclub surgió por parte de Eusebio una interesante cuestión: ¿Te hacen más caso como experto en usabilidad si eres más caro?
El hecho es que en el libro No me hagas pensar de Steve Krug se cuenta una situación muy idílica. Te llaman como consultor experto en usabilidad, haces tu trabajo, lo tienen en cuenta y te vas a casa.
La realidad es muy distinta. El cliente casi nunca acepta lo que le cuentas a la primera y gran parte de tu trabajo es de evangelización, explicando el porqué lo que tu le muestras es más adecuado que sus ideas (a veces disparatadas). Hay días que los convences, y otros que al final desistes y entras en una espiral de muerte y destrucción, modo quieres aquí un botón, pues lo ponemos.
Published in: Usabilidad,
* * *
Interfaz de Android G2
19 / Feb / 2009
Publican en Gizmodo un video de la versión 2 de Android, que se está presentando en Barcelona estos días. La verdad es que el HTC Magic tiene una pinta estupenda, tanto en lo que se refiere a interfaz como en aspecto del terminal.
¿Podrá luchar de tú a tú con el iPhone?
Android G2: HTC Magic Hands ON from Gizmodo on Vimeo.
Vía Reaction
Published in: Usabilidad, Diseño
* * *
Consejos para el diseño de formularios
17 / May / 2007
Pocas cosas gustan menos en Internet que rellenar un formulario, y más si este es largo y caótico. Mucho se ha escrito al respecto, pero me encanta el trabajo de Luke Wroblewski para el IA Submit 2007: Best practices for form design.
Apoyándose en los resultados de un estudio de eyetracking en formularios publicado en UX Matters, propone las mejores opciones según el tipo de formulario que tengamos que rellenar. En concreto:
- Si tenemos que rellenar datos que son familiares (y no son muchos): Etiquetas en vertical encima del campo.
- Cuando necesitemos ajustar el espacio vertical: Etiquetas a la izquierda del campo, alineadas a la derecha.
- Hay que ajustar el espacio vertical, y los datos no nos son familiares o son complejos: Etiquetas al lado del campo, alineadas a la izquierda.
Etiquetas en vertical
Esta opción es la que provoca menos movimiento ocular al usuario, así como un menor esfuerzo mental. Si los datos son familiares verá la pareja etiqueta-campo de un solo vistazo sin tener que pensar qué es lo que debe rellenar.
Como problema, crea formularios excesivamente largos, y hay que asegurarse de la correcta separación visual para comprender la asociación de las etiquetas a los campos.
Asimismo se recomienda que las etiquetas estén en negrita, y los campos no tengan bordes muiy fuertes.
Alineadas a la derecha
Con este formato ganamos mucho en espacio vertical, y además el usuario casi no tiene que hacer esfuerzo mentar para asociar las etiquetas con los campos.
Alineadas a la izquierda
Aquí puede darse el caso en que exista una excesiva separación entre etiqueta y campo, dando lugar a mayores tiempos para asociar ambos, parándose más a leer cada una de las etiquetas.
Por esto mismo esta organización es interesante cuando los datos a rellenar son complejos, ya que el usuario se parará más a pensar (si bien esto puede aumentar los ratios de abandono).
Podéis ver más sobre el tema en las slides de la charla (3.9 Mb PDF), que para ser una presentación está bastante completa y se entiende.
Published in: Usabilidad,
* * *
Command links
16 / May / 2007
En el último alertbox de Nielsen habla sobre los command links que introduce Vista :
Para los que no los conozcan, ahí os dejo una captura:
En resumen, habla de la conveniencia de botones vs. vínculos según si utilicemos una web o una aplicación, de cómo las diferencias entre ambas se han ido reduciendo paulatinamente. Dice que sigamos utilizando botones para las acciones importantes y vínculos para la navegación, pero que a medida que los usuarios utilicen Vista en el día a día, verán los command links como algo normal. Ve positivo su uso pero teniendo en cuenta:
- Que dejen claro en el texto que vas a realizar una acción.
- Que las acciones no sean de vital importancia, para que si se confunden que no suponga un grave problema. Además podría ser que no lo entiendan, así que para las acciones principales hay que continuar utilizando botones de los de toda la vida.
Como ventajas:
- Permiten incluir un texto más largo que un botón estándar (aunque hay que ir con cuidado con la longitud del texto, ya que los usuarios escanean).
- Puedes añadir una descripción de qué vas a hacer (en la parte inferior y a menor tamaño).
Published in: Usabilidad,
* * *
Cómo convertir a aquellos que escanean webs en lectores
05 / Mar / 2007
Leo en Digital Web Magazine un artículo sobre cómo convertir a aquellos que escanean en lectores. En GUUUI lo resumen en los siguientes puntos (traducidos rápidamente):
- Dale a los textos espacio para respirar incrementando los márgenes y eligiendo párrafos cortos y concisos.
- Organiza la información en secciones con titulares para que sea fácil decidir qué parte leer y cuál ignorar.
- Separa tus páginas utilizando imágenes relevantes e ilustraciones.
- Utiliza comillas para resaltar las líneas importantes de texto.
- Incluye entradillas (descriptive blurbs) debajo de los titulares para explicar de qué trata el texto.
- Utiliza iconos para señalar ciertos elementos del sitio, y separa las páginas con excesivo texto (break up, entiendo que se refiere a paginar).
- Dale un estilo a los vínculos que sea fácil de reconocer, aunque no estén leyendo el texto.
- Utiliza listas para extraer la información esencial.
Published in: Usabilidad, Diseño
* * *
Intranet Fundación Chile
27 / Jan / 2006
No hay que perderse las capturas que nos muestra Jorge Barahona presentando la Intranet de la Fundación Chile. Un excelente trabajo de Diseño de Interfaz, Usabilidad, AI.
Felicidades por un trabajo bien hecho, y espero que otros clientes siguan el ejemplo.
Published in: Diseño, Usabilidad
* * *
Rediseños – Azahar Airlines
28 / Aug / 2004
Comienzo hoy una nueva sección, dedicada a los rediseños. El primero del que quiero hablar es Azahar Airlines, una página personal dedicada a una aerolínea virtual.
Realicé este diseño allá por noviembre de 2003, y en aquella época a pesar de ya usar bastante las hojas de estilo, todavía trabajaba con una mentalidad basada en tablas. A si que el paso medio año después, fue cambiar todo el código, eliminando todas las tablas que me fueron posibles, dejando el estilo de la página lo más igual posible.
Podéis ver la antigua página siguiendo este enlace.
A destacar, pues la pelea habitual con el IE6 para poder posicionar las cajas en su sitio, por culpa del bug del modelo de caja. Al final consigo engañarlo y hacer que cada cosa quede en su sitio, pero tuve que cambiar el pie de página, y quitar el fondo gris porque no había manera de ponerlo en su sitio.
Además, incluí un truco leído en A List Apart, para hacer que una tabla tenga el color de fondo alternativo, sin necesidad de ponerlo a mano, una maravilla realizada con CSS y javascript. Podéis verlo en la plantilla. Comprobaréis que es mucho más claro de leer que no la antigua versión.
¿Objetivos conseguidos? El peso de la página no ha variado en general, algunas páginas son algo más ligeras, y otras un poco más pesadas, aunque el contenido no es el mismo, con lo que no es justa la comparación.
Ahora se muestra más correctamente en Opera y Firefox/Mozilla, ya que antes el fondo se mostraba incorrectamente (se cortaba cuando bajabas el scroll).
Y lo más importante, he sepadado el contenido del diseño. Ahora puedo actualizar rápidamente la imagen de la web, modificando casi únicamente los gráficos y la hoja de estilo.
En breve más rediseños, pero esta vez de antiguas páginas web que tenía colgadas en Internet, y que están ya desfasadas.
Published in: Diseño,
Comentarios [3]
* * *
2004-2012 - Alex Lillo. Publicado bajo Licencia CreativeCommons. Mantenido con textpattern. 