Diseñando interfaces web.

En libro de Designing Web Interfaces de Bill Scott y Theresa Neil hablan de 6 Basicos principios cada uno con patrones ejemplificados con explicación e imagenes.

Los Seis principios que hablan son:

1. Ser directo (Make it direct)

El principio de WYSIWYG  -What you see is what you get- (Lo que tu ves es lo que obtienes) ha sido probado una y otra vez a travez del último cuarto de siglo. Los patrones que cubre este principio son:

• Permitir a los usuarios editar contenido directamente en contexto (Edición en página). ver ejemplos
• Control de interface con Drag and Drop, ver ejemplos y
• Manipulación objetos directamente (Selección directa) ver ejemplos

todos estos patrones trabajan hacia la creación de una interface inteligente.

 2. Mantenerlo ligero (Keep it Lightweight)

Respetar el nivel de esfuerzo del usuario es la llave para producir una interfaz sin esfuerzo.
Entender la intención del usuario y proveer solo la cantidad justa de interfaz (Herramientas contextuales) en el contexto actual es critico para proveer una experiencia ligera.

• Ejemplos de Herramientas contextuales

3. Estar en la pagina (Stay on page)

En lugar de quebrar el flujo de trabajo del usuario con refrescamientos repetidos de paginas, podemos crear una experiencia que se acerque mas al flujo del usuario.
El uso correcto de Overlays, Inlays, Virtual Space, y Process Flows es integral a para asimilar la manera que el usuario quiere trabajar – no la manera en que los forzamos a trabajar en el pasado.

• Ejemplos de Overlays
• Ejemlpos de Inlays
• Ejemplos de Virtual Space
• Ejemplo de process Flows

 4. Proveer una Invitación (Provide an Invitation)

Con un arreglo de interacciones a nuestra disposicion, es mas facil tener la mayoría de nuestras caracteristicas sin que se noten o sin usarse.
Affordance Invitation, Call to Action Invitation, Blank Slate Invitation, Tour Invitation, Hover invitation, Drag and Drop Invitation, Interface invitation y mas Invitaciones de contexto se invita al usuario a explorar nuevas maneras, mejorando su experiencia promedio.

• Ejemplos de invitaciones Estaticas
• Ejemplos de invitaciones dinámicas

 5. Usar Transiciones (Use Transitions)

No solo para los banners, las trancisiones son necesarias para crear una mejor comunicación y relación con los usuario, con una gran cantidad de efectos a nuestra disposicion (Brighten and Dim, Expand/Collapse, Self healing, Animation, Spotlight, Lightbox Effect, Face-plate, Flip, Carousel, Accordion, Slide In and Slide Out, ans Zoom), podemos saturar al usuario con animaciones locas o podemos usar estos efectos para explicar comportamientos, mostrar relaciones, obtener la atención del usuario, mejorar el desempeño, y crear la ilusión de un espacio virtual.

• Ejemplos de Transitional Patterns
• Ejemplos de Purpose of Transitions

6. Ser reactivos (Be reactive)

Para cada acción debe haber una reacción opuesta igual, esa es la física de nuestras interfaces, Proveiendo: Auto Complete, Live Suggest, Live Search, Refining Search, Live Priviews, Progressive Disclosure, Progress Indicators, and Periodic refresh, de herramientas para crear una viva y reactiva interface.

Ejemplos de Lookup Patterns

Ejemplos de Feedback Patterns  

Bien en general esto es lo que cubre el libro explicando a mas detalle cada uno de estos principios, me gusto mucho pueden Ver sitio del libro o pueden ver muchos ejemplos graficos en el sitio de flickr del libro en donde los albums estan organizados por Prinipio y por patron, aparte de que en los albumes finales encontrarán muchos videos adicionales.

Se los recomiendo!