Usabilidad- Philips (sense and simplicity)

philips

La tecnología debería ser tan sencilla como la caja que la contiene.

Creemos que la tecnología puede ser muy avanzada y sencilla al mismo tiempo.

Debe ser fácil de utilizar y diseñada para todos. La sencillez debe ser su objetivo principal.

Para Philips lo es. Tiene sentido.

Reflexiones:
Esta publicidad me encanta. En pocas palabras explica la importancia de lo usable para una empresa importante como Philips.

Usabilidad – Climalis, consulta web

Hablando con el propietario

Cuando conocí a Tomás el propietario de la tienda Climalis.
Unos de los aspectos que más me llamo la atención es su filosofía de venta, caracterizada por un gran factor humano entre vendedor y cliente.

Los productos de esta tienda son eminentemente técnicos y por lo tanto necesitan de una ayuda especializada a la hora de su elección.

Su objetivo no es simplemente vender un producto de gran calidad, es también realizar la difícil tarea de consultor y acompañar el cliente en todos los pasos para la realización de la compra.

Hablando por teléfono, me comentaba que la tienda online no quería ser una web de comercio cualquiera, su finalidad es ser una exposición de productos, para que los clientes llamar para obtener asesoramiento sobre sus necesidades. La tienda busca tener productos que difícilmente el cliente encontrara en la calle, producto en su mayoría técnicos que de otra forma han de ser comprados a profesionales.

Importante también es el argumento del precio, se hacen descuentos a partir de 2 o 3 unidades.

Lo especial de los productos lo indican que la mayoría se fabrican por pedido y suelen tardar unos 15 días.

Target

El tipo de “target” es un cliente que le gustan las cosas bellas y exclusivas, que no tiene miedo a gastar para un producto verdaderamente bueno.

Revisando la web

Esta es la captura de la web actual, puede que desde que publico este articulo la web valla cambiando.

Climalis web
Empezando a estudiar la web en seguida noté algunos puntos flacos:

Problema 1

Los detalles de las imágenes tienen un malo acabado, de esa forma bajas la calidad global de la web, unas de las cosas que resalta estos defectos es el color de fondo de la web en contraste con los banners publicitarios y los contenidos.

Problema 2

Dentro de la cabecera está poco estructurado las opciones de compra y el cuadro de búsqueda

Problema 3

Poner informaciones de promociones de la web a modo gif animado es una desventaja porque parece un banner publicitario externo y además el gif en cuestión no teniendo espacio entre lineas y una fuente de tamaño tan grande dificulta la lectura del mensaje.

Problema 4

Los productos vienen presentados en la web con poco importancia, cuando son el elemento más importante, equivocación en la jerarquía visual, se da más importancia al precio que no al nombre del producto

Problema 5

Nos es aconsejable dar un mensaje de bienvenida repitiendo la ruta URL de la web, es demasiado redundante.

Problema 6

Quitando la imagen del centro no me trasmite ser una página de inicio, en una página de inicio, tienes que trasmitir a tus clientes, tus puntos fuerte, porque tiene que comprar en tu tienda, esa pagina no me trasmite nada de eso

Problema 7

El píe de página pasa por desaparecido y tiene algunas funciones importantes.

Solucionando los problemas

Esta es mi versión para la web.

Namron Climalis
Propuesta para corregir los puntos débil de la web:

Problema 1

  • Dato que toda la web se estructura sobre la plataforma Magento, u intentado realizar los mínimos cambios posible en la estructura de la web.
  • Simplemente le y puesto un fondo blanco con un pequeño degradado gris en la parte de arriba, de esa forma los contenidos que se cargan en la página, no parecen como algo pegado artificialmente y se integran de forma mejor.

Problema 2

  • Maquetado de forma más simple las opciones de compra.
  • Simplificado algún nombre de las etiquetas (de las opciones de compra), (el nombre elegido habrá que utilizarlo en toda la web, los nombres no deberían superar 4 palabras para ser fácil da localizar y memorizar, un ejemplo es “Mi lista de artículos de interés” que yo cambié por “Artículos de interés”).
  • Realizado un cambio en la búsqueda, lo puse de la forma más optima, formulario izquierda y botón derecha.

Problema 3

  • Quitado los banners que había y realicé algunos nuevos que se integran con el diseño de la web.

Problema 4

  • Aumentado un poco el tamaño de las imágenes de los productos (120px | 120px).
  • Creado capturas del producto que no pierdan fuerza a verlos pequeños.
  • Realizado una jerarquía funcional para identificar de un simple vistazo los producto:
    “Nombre producto” en azul e tamaño grande,”Que es” en azul tamaño normal, “Precio” en gris tamaño mediano negrita, “Productor” en gris tamaño normal.
  • Añadido un icono representativo por cada “función de compra” que aparece abajo del producto (añadir al carrito, Añadir a Comparar Prd., Añadir Art de Interés).

Problema 5

  • Cambiado la imagen.
  • Cambiado el mensaje, el mensaje debería representar en pocas lineas el porque las personas tienen que comprar en esta web.

Problema 6

  • Puesto en el menú principal la opción “inicio”, porqué non todas las personas saben que pinchando en el logo de la empresa vuelves a la página de inicio.
  • Marcado de forma evidente la opción activa del menú, para que se vea claramente donde estamos.
  • Cambiado el tipo di letra del menú para una fuente más pequeña, así queda más fino y elegante, “nos es el tamaño de letra que facilita la lectura, es el contraste es su colocación”.
  • Cambiado el tamaño de fuente del titular de la categoría “Nuevos Productos” por un tamaño más grande, tiene que verse con claridad el identificador de un bloque de contenido.

Problema 7

  • Cambiado diseño del píe

Comparar propuestas

Climalis Namron

Ilustraciones

Unos de mis hobby, desde que tengo el uso de la razón es el dibujo.

Cuando el tiempo me lo permite y tengo de mano un boli o un lápiz, cojo un trozo de papel y comienzo a dibujar.

Estos son algunos de los resultados obtenidos, poco a poco empezaré a escanear más dibujos para compartirlos.

Al principio pensé dar un explicación de cada dibujo, tenía pensado hacer un pequeño articulo por cada dibujo, para explicar un poco el estado de animo de cuando se realizo o la edad, pero al final me decante de subirlo sin más, los dibujos hablan de por sí, solos

Clasicismo

Clasicismo_0001
Clasicismo_0002

Fantasy

Fantasy_0001
Fantasy_0002
Fantasy_0003

Ángeles

Angel_0001
Angel_0002
Angel_0003

Iconografía

Iconos Velneo V7

Estos iconos se realizaron para la plataforma de desarrollo Velneo V7.

Para saber más sobre la empresa y los productos, podéis ir a esta web velneo.es.

Desafío del proyecto

Muchos iconos

Uno de los problemas que encontramos en este proyecto fue el elevado número de iconos da realizar, más de 500, teniendo en cuenta que cada icono hay que crearlo de diversos tamaños en base a las necesidades.

Coherencia entre ellos

Otra cosa complicada fue mantener un estilo visual coherente en los iconos. Por eso realizamos una especie de guía cromática e intentamos no añadir nunca nuevos colores a los nuevos iconos. Así, a pesar del tiempo transcurido durante la realización del trabajo, los iconos siguen manteniendo relación entre ellos.

Conceptos novedosos

La plataforma donde se utilizan los iconos es única en su género, y uno de los aspectos que la caracterizan es poder desarrollar aplicaciones de forma visual. Entonces tuvimos que comprender el lenguaje que utilizan los desarrolladores y dar vida a iconos que representaran conceptos complicados y difíciles de expresar.

Iconos para ejecutables de aplicación


NAM_ejecutables

Iconos para objetos


NAM_objetos

Iconos principales


NAM_principales

Iconos para asistentes de fórmulas


NAM_asistente_de_formulas

Iconos para controles


NAM_controles

Iconos para editor de imágenes


NAM_editor_de_imagenes

Iconos para listas


NAM_listas

Iconos para sub-objetos


NAM_subobjetos

Iconos para carpetas – comandos de instrucciones


NAM_carpeta_com_inst

Iconos para comandos de instrucciones


NAM_com_inst

Iconos para administración


NAM_administracion

Iconos globales


NAM_globales

Iconos para carpetas proyectos


NAM_carpetas_proyectos

Derechos reservados

© 2009, Velneo S.A. Todos los derechos reservados