HCInterface, a fresh mix of Interaction & Interface design. Enjoy the experience!
/ @albertodela_hci


Enlace

Jun 6, 2013
@ 8:46 am
Enlace permanente

Google Visual Assets Guidelines - Part 1 »


Foto

Feb 26, 2013
@ 9:55 am
Enlace permanente
22 notas

uxsux:

Stop interrupting your users on your website. (via xkcd)

uxsux:

Stop interrupting your users on your website. (via xkcd)


Foto

Feb 1, 2013
@ 6:24 pm
Enlace permanente
294 notas

uxrave:

The Disciplines of User Experience Design on FastCoDesign via @aaretz

Esto me recuerda a la epoca de Diseñador Web con Dreamweaver html+css, Flash, Js, Php+mysql, Phyton, Aftereffects, 3D studio, ilustracion, offline e impresion… 21,000.Gracias a dios hemos evolucionado y nos hemos dejado de creer el ombligo del mundo. Creo. Se puede saber de todo, el problema es seguir aprendiendo de todo con el paso del tiempo. Aun asi seguimos queriendo ser navajas suizas multifuncion que para ciertas empresas les viene perfecto pero en entornos mas profesionales no tienen cabida. A ciertos niveles esta el mejor en su materia y punto.

uxrave:

The Disciplines of User Experience Design on FastCoDesign via @aaretz

Esto me recuerda a la epoca de Diseñador Web con Dreamweaver html+css, Flash, Js, Php+mysql, Phyton, Aftereffects, 3D studio, ilustracion, offline e impresion… 21,000.
Gracias a dios hemos evolucionado y nos hemos dejado de creer el ombligo del mundo. Creo.
Se puede saber de todo, el problema es seguir aprendiendo de todo con el paso del tiempo.
Aun asi seguimos queriendo ser navajas suizas multifuncion que para ciertas empresas les viene perfecto pero en entornos mas profesionales no tienen cabida. A ciertos niveles esta el mejor en su materia y punto.


Texto

Ene 31, 2013
@ 10:16 pm
Enlace permanente

Nuevo ING

En esta época en la que baja el volumen de trabajo, los presupuestos se ajustan y las inversiones para nuevos proyectos se reducen es necesario seguir haciendo cosas para no quedarse oxidado.

Llevaba ya tiempo viendo la interfaz de la Oficina virtual de ING y estaba esperando un rediseño porque se notaba que se había quedado anticuado y poco usable. Se puede entender que con ciertos desarrollos y plataformas no se tenga la libertad o agilidad de hacer un rediseño total con el impacto que ello supone.

Si bien estoy casi seguro que el equipo de diseño de ING está en ello, no me he podido resistir a empezar su tarea, no porque no les vea capaces de hacerlo, si no porque me parece un reto muy interesante rehacer una aplicación de tanta relevancia y donde la usabilidad tiene tanto peso. Y porque me apetecía vamos…

Planteamiento

He cogido la estructura de datos actual y he optimizado algunos items/secciones de cara a simplificar al máximo, analizando cuales tienen más sentido y cuáles menos. Seguro que aún se puede entrar más en detalle y seguro que un card sorting orientado podría dar información concreta.

He aplicado de una manera rápida heurísticos de usabilidad que afectan a la interfaz.

Lógicamente recomiendo entrar más en detalle aplicando otra serie de metodologías de análisis de sites, test de usuarios, focus groups, estudio de la analítica, etc.

La propuesta

No me voy a meter mucho en problemas de usabilidad de la interfaz, lo único que sí merece un toque (y por lo que me he decidido a hacer el rediseño)  son estos puntos:

Backbutton: No deshabilitar, nunca, jamás.

Navegación: Se debería revistar la navegación y como se apoya toda la estructura de información, relevancia, jerarquía visual, etc.

Se ha eliminado todo el elenco de opciones de menú (productos) de la parte superior, que igual tiene su sentido desde el punto de vista de Mkt pero no desde el de la usabilidad. Ahora se muestran únicamente los que el usuario tiene contratado.

Inicio: Centralización de los productos en una vista rápida y con diferentes niveles de información en la misma página para mayor agilidad

Formularios: En este tipo de aplicaciones son vitales.  Los de ahora son claros y funcionan correctamente, pero siempre se puede mejorar algo, tamaño, etiquetado, literales informativos, mensajes de error, etc.

Ayuda: En este diseño se propone integrar varios niveles de aprendizaje en el uso. Una vez aprendidas ciertas tareas, los mensajes de ayuda ya no son necesarios.

image

image

image

image

image

El resultado es una interfaz más amable con menos interferencias y donde prima la simplicidad con un claro foco en la usabilidad.


Enlace

Oct 25, 2012
@ 10:32 pm
Enlace permanente
8 notas

Skinny Ties and responsive eCommerce »

thisisresponsive:

This is a fantastic case study for responsive design. After launching their new site they found:

  • 42.4% revenue growth across all channels
  • 377.6% revenue growth for iPhone
  • 13.6% conversion rate increase
  • 71.9% conversion rate increase for iPhone
  • 23.2% bounce rate lowered by
  • 44.6% visit duration increased by

Those are some massive, massive numbers. Great fodder for proving that responsive design works.

Great numbers!


Cita

Sep 14, 2012
@ 1:18 pm
Enlace permanente

People ignore Design that ignores People

— Frank Chimero


Photoset

Ago 9, 2012
@ 6:26 pm
Enlace permanente
70 notas

uxrave:

My favorite @brad_frost slide combo ever! From his presentation at An Event Apart Washington DC - slides and blog post.


Vídeo

Mayo 30, 2012
@ 10:52 am
Enlace permanente

Cooool


Texto

Mayo 12, 2012
@ 11:15 am
Enlace permanente

Great conferences at #UXSP. Siguenos!


Texto

Abr 12, 2012
@ 12:32 pm
Enlace permanente

Estructura de Manual de estilo Web

1. Logo

2. Tipografía

  • Titular 1 <h1>
  • Titular 2 <h2>
  • Titular 3 <h3>
  • Parrafos
  • Listados
  • Lista ordenada <ol>
    Lista desordenada <ul>

3. Formularios

  • Disposición Label + input
  • Campo de texto

    o   Texto interno
    o  
    Información de campo
    o   Estado hover & Estado “foco”
    o   Validación en línea
    - Error de Campo
    Confirmación de campo

  • Campo Desplegable (Selector de fecha)
  • Campo Radio
  • Campo Check
  • Campo Textarea

4. Navegación

  • Menú superior/lateral
  • Pestañas
  • Migas
  • Patrón “Pasapáginas” (linkl - hover-presionado-desactivado)
    • Pagina inicial
    • Pagina +1
    • Pagina final

5. Interacción

  • Botón principal (linkl - hover-presionado-desactivado-cargando)
  • Botón secundario (l-h-p-d-c)
  • Botón error(l -h-p-d-c)
  • Enlaces genéricos (l - h- v)
  • Enlaces secundarios (l - h- v)

6. Tablas

  • Cabecera Tabla
  • Celdas

7. Avisos

  • Error
  • Confirmación
  • Alerta

8. Imágenes y video

  • Formatos de imagen (h) 
  • Formatos de video (h)
  • Iconografía
  • Gráficos genéricos

Capas

  • Capa de ampliación de imágenes
  • Capa de confirmación de acción.
  • Capa de info o ayuda