La creación de una guía de estilo puede ser una actividad central de un equipo de diseño integrado que incluya la documentación, el desarrollo, la usabilidad, la accesibilidad, el diseño gráfico, el marketing, etc. En las guías de estilo se tratan temas como las pautas, directrices y normas de calidad en el diseño de interfaces de usuario de forma que se garantice la coherencia de un producto o sitio web. Pueden abarcar cualquier cosa, desde el uso de los colores y de elementos de diseño, a las prácticas y estándares de desarrollo utilizados.
Una guía de estilo para las interfaz de usuario sirven como:
- Una herramienta para garantizar la coherencia a través de un conjunto de productos o dentro de las distintas partes de un producto
- Una manera de conseguir que los distintos grupos involucrados en el desarrollo de uns aplicación o sitio web puedan trabajar juntos y con las mismas pautas
- Depósito de las directrices de diseño y estándares aplicables
- Una ayuda a la formación de los nuevos miembros del equipo de desarrollo del producto
El objetivo de todas las guía de estilo en el diseño de interfaces es hacer cumplir la coherencia. Parte del diseño inicial de la guía de estilo debería ser un debate sobre el término “coherencia”. La coherencia es un concepto complejo. La siguiente es una lista de los diferentes tipos de coherencia que deben ser considerados:
- Coherencia con las expectativas del usuario
- Coherencia en todas las aplicaciones que están relacionadas
- Coherencia en todas las aplicaciones que no están relacionados pero que provienen de la misma empresa
- Coherencia con múltiples guías de estilo
- Coherencia con las normas de facto (por ejemplo el uso de enlaces azules para denotar los enlaces no visitados)
- Coherencia de la terminología
- Coherencia de la interacción
- Coherencia visual
- Coherencia entre las páginas / diálogos / ventanas
- Coherencia dentro de las páginas / diálogos / ventanas
- Coherencia en el uso de los icono
- Coherencia de los mensajes de error
En la página User Interface Style Guides es posible encontrar una interesante recopilación de recursos que han sido utilizados para el desarrollo de importantes sistios web (por ejemplo, la Guía de estilo utilizada por la BBC).
Beneficios del uso de guías de estilo:
Gale (1996) proporciona una lista de las prestaciones desde diferentes perspectivas. Esta lista puede ser útil para justificar el tiempo y el dinero gastado en una guía de estilo. Los principales beneficios son:
| Para los usuarios finales | Para los desarrolladores | Para el negocio |
| Reducción de errores | Mantener el control sobre el “look and feel” de la interfaz | Producir sistemas utilizables que reducen los gastos de soporte y aumentar la satisfacción de los usuarios |
| Menos frustración | Minimizar las necesidades de rediseño | Aumentar el conocimiento del mercado |
| Aumento de la moral | Capitalizar el aprendizaje | Aumentar el conocimiento del producto |
| Mejora de la eficiencia | Producción de software reutilizable | Reducir los costes de formación |
| Aumento de la confianza | Reducir el tiempo de desarrollo | Mejorar la retención del personal |
| Reducción de la resistencia al uso de las nuevas tecnologías | Reducir las decisiones de diseño | Aumentar la aceptación de los usuarios de los nuevos sistemas |
Recursos sobre guías de estilo, usabilidad y accesibilidad:
- “Escribiendo una guía de estilo de interfaz de usuario”: Writing an Interface Style Guide (Jina Bolton)
- “Orientación sobre guía de estilo (STC) “: Guidance on Style Guides, by STC.
- Ejemplos y casos de estudio:
- Guías de estilo editorial:
- Apple Human Interface Guidelines
- Windows Vista UX Guidelines
- Windows XP Design Guidelines
- Usability.gov Research-Based Web Design and Usability Guidelines
- GNOME Human Interface Guidelines 2.2
- KDE 4.0 Visual Guide
- Java Look and Feel Design Guidelines
- Android User Interface Guidelines
- iPhone Human Interface Guidelines
- Nokia UI Style/Visual Guidelines
- WebOS User Interface Guidelines
- UI Design and Interaction Guide for Windows Phone 7 Series
- Guías de estilo y usabilidad del Portland User Interface Special Interest Group:
- Guías de usabilidad para desarrollos en AJAX
- Guías de usabilidad de Apple
- Guías de interfaz de usuario de Apple iPhone
- iPad SDK / iPad Human Interface Usability Guidelines(requiere ser miembro)
- see: iPad User Experience Guidelines
- Java Look and Feel Guidelines (Versión 1)
- Java Look and Feel Guidelines (Versión 2)
- Java Look and Feel Guidelines: Advanced Topics
- A Java Swing GUI Framework
- Sun Java Look and Feel Class Reference
- Creating a Custom Look and Feel with Java Swing
- Using Java Swing’s Pluggable Look and Feel
- Motif Style Guide
- KDE User Interface Guidelines
- Gnome Human Interface Guidelines 1.0
- Ubuntu 8.10 (Intrepid Ibex) “Guide” Wiki
- MITRE Guidelines for Designing User Interface Software (US Airforce)
- Research based Web Design and Usability Guidelines (US Dept. of Health and Human Services)
- Usability.gov – Usability Guidelines
- Canadian Command Decision Aiding Technology (COMDAT) Operator-Machine Interface (OMI) Style Guide: Version 1.0 (PDF)
- Nokia Top 10 Usability Guidelines for Games
- Nokia Top 10 Usability Guidelines for Enterprise Applications
- Android (Droid) User Interface Guidelines
- Openwave Top 10 Usability Guidelines for WAP Applications
- Blackberry UI Developers Guide (PDF)
- BlackBerry UI interface simulator
- W3C Mobile Web Best Practices 1.0 User Interface Guidelines
- Windows Mobile User Interface Guidelines
- Symbian User Interface Style Guide
- Ubuntu Mobile User Interface Guidelines
- Palm webOS for Palm Pre
- The Challenge of Designing Interfaces for the Tablet PC
- Eight Essentials of Tablet User Interface Success
- Eight More Rules of Tablet UI Success
- Introduction to Web Accessibility
- W3C Web content Accessibility Guidelines 2.0
- Section 508 overview of the legal requirements
- Section 508 Checklist
- Flash Accessibility guidelines
- W3C Accessibility Rich Internet Application guidelines
- Silicon Graphics Indigo Magic User Interface Guidelines
- Smith and Mosier HCI Guidelines
- User Interface Design and Usability
The Guías de estilo para diseño de interfaces web by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.
[...] This post was mentioned on Twitter by Llorenç Sabaté, aws. aws said: Guías de estilo para diseño de interfaces web http://goo.gl/fb/ym33N #accesibilidad #diseñoweb #usabilidad [...]