Puntos clave
1. No Hagas Pensar a los Usuarios: Diseña para la Intuición y la Claridad
Si no puedes hacer que una página sea evidente por sí misma, al menos debes hacerla autoexplicativa.
El diseño intuitivo es clave. Los usuarios no deberían tener que averiguar cómo funciona tu sitio web. Cada elemento, desde la navegación hasta el contenido, debe ser inmediatamente comprensible. Cuando los usuarios se encuentran con algo poco claro, se genera fricción cognitiva, lo que los ralentiza y puede alejarlos.
Evidente vs. autoexplicativo. Idealmente, tu diseño debería ser evidente, sin requerir pensamiento para entenderlo. Si eso no es posible, apunta a que sea autoexplicativo, donde los usuarios puedan captar rápidamente el concepto con un esfuerzo mínimo. Esto se aplica a todo, desde las etiquetas de los botones hasta la estructura general del sitio.
Reduce la carga mental. Elimina los signos de interrogación en la mente de los usuarios. Haz que las elecciones sean obvias, utiliza un lenguaje claro y sigue las convenciones web establecidas. Cuanto menos tengan que pensar los usuarios al usar tu sitio, más energía mental podrán dedicar a tu contenido o productos.
2. Los Usuarios de la Web Escanean, No Lee: Optimiza para la Comprensión Rápida
No leemos páginas. Las escaneamos.
Escanear es la norma. La mayoría de los usuarios no lee las páginas web a fondo. Escanean rápidamente, buscando palabras clave, frases y señales visuales que coincidan con su tarea o interés. Este comportamiento está impulsado por la presión del tiempo, el conocimiento de que no necesitan leer todo y años de experiencia con la recopilación de información "suficientemente buena".
Diseña para escaneadores. Utiliza técnicas que hagan que tu contenido sea fácil de ojear:
- Encabezados y subtítulos claros y descriptivos
- Listas con viñetas
- Párrafos cortos
- Palabras clave destacadas
- Imágenes y leyendas significativas
Prioriza la información importante. Coloca el contenido más crucial en la parte superior de la página y al inicio de los párrafos. Utiliza el estilo de pirámide invertida del periodismo: comienza con la conclusión y luego proporciona detalles de apoyo.
3. Crea Jerarquías Visuales Claras y Convenciones
Las convenciones son tus aliadas.
La jerarquía visual guía a los usuarios. Haz que los elementos importantes sean más prominentes a través del tamaño, color, posicionamiento y espacio en blanco. Agrupa visualmente los elementos relacionados. Utiliza la anidación para mostrar qué forma parte de qué. Una jerarquía visual clara ayuda a los usuarios a entender tu página de un vistazo.
Aprovecha las convenciones. Las convenciones web han evolucionado por una razón: funcionan. Los usuarios han aprendido a esperar ciertos elementos en ciertos lugares (por ejemplo, el logo en la parte superior izquierda, la búsqueda en la parte superior derecha). Adhiérete a estas convenciones a menos que tengas una muy buena razón para no hacerlo.
Equilibra la innovación y la familiaridad. Si bien la creatividad es valiosa, no reinventes la rueda para funciones básicas. Los patrones familiares reducen la carga cognitiva. Si decides innovar, asegúrate de que el nuevo diseño sea tan intuitivo que no requiera curva de aprendizaje, o que aporte un valor significativo que justifique una pequeña curva de aprendizaje.
4. Divide las Páginas en Áreas Claramente Definidas
Idealmente, los usuarios deberían poder jugar una versión del antiguo programa de juegos de Dick Clark, $25,000 Pyramid, con cualquier página web bien diseñada.
Las zonas distintas ayudan a la comprensión. Dividir tu página en áreas claramente definidas ayuda a los usuarios a decidir rápidamente en qué partes concentrarse y cuáles ignorar. Esto es especialmente importante dado que los usuarios tienden a escanear en lugar de leer a fondo.
Haz que las áreas sean instantáneamente reconocibles. Los usuarios deberían poder identificar el propósito de cada área de un vistazo:
- Navegación
- Búsqueda
- Contenido
- Publicidad
- Elementos de marca
Utiliza el diseño visual para reforzar las divisiones. Emplea técnicas como el espacio en blanco, bordes, fondos de color y un estilo consistente para delinear diferentes áreas. Esta organización visual ayuda a los usuarios a construir un modelo mental de la estructura de tu sitio.
5. Haz Obvio lo Que es Hacible
Dado que gran parte de lo que la gente hace en la web es buscar la próxima cosa en la que hacer clic, es importante hacer obvio lo que es clicable y lo que no.
Las affordances claras reducen la frustración. Los usuarios no deberían tener que adivinar con qué pueden interactuar. Haz que los enlaces y botones se destaquen a través de:
- Estilo consistente (por ejemplo, texto subrayado para enlaces)
- Diferenciación de color
- Efectos al pasar el cursor
- Formas similares a botones para acciones importantes
Evita las falsas affordances. No hagas que los elementos no interactivos parezcan clicables. Esto crea confusión y erosiona la confianza en tu interfaz.
Considera las interacciones móviles. En dispositivos táctiles, haz que los objetivos de toque sean lo suficientemente grandes y estén espaciados adecuadamente. Proporciona retroalimentación visual para los toques para confirmar la interacción.
6. Elimina Distracciones y Desorden
Deshazte de la mitad de las palabras en cada página, luego deshazte de la mitad de lo que queda.
El enfoque es crucial. Cada elemento innecesario en una página compite por la atención del usuario. Los diseños desordenados dificultan que los usuarios encuentren lo que buscan y comprendan tu mensaje.
Edita sin piedad. Elimina:
- Palabras y contenido innecesarios
- Opciones de navegación redundantes
- Imágenes puramente decorativas
- Diseños excesivamente complejos
Abraza el espacio en blanco. No te sientas obligado a llenar cada píxel. El espacio en blanco ayuda a organizar el contenido, mejora la legibilidad y da a los elementos importantes espacio para respirar.
Prioriza sin piedad. Para cada elemento en la página, pregúntate: "¿Esto apoya el objetivo principal de esta página?" Si no, considera eliminarlo o hacerlo menos prominente.
7. Diseña una Navegación Efectiva: Hazlo Fácil de Encontrar y Entender
La navegación web compensará esta falta de sentido de lugar al encarnar la jerarquía del sitio, creando una sensación de "aquí".
La navegación clara es crucial. Una buena navegación le dice a los usuarios qué hay en el sitio, cómo usarlo y les da confianza en los creadores del sitio. Debe ser consistente en todo el sitio y proporcionar contexto sobre dónde se encuentra el usuario dentro de la estructura del sitio.
Elementos clave de navegación:
- Navegación persistente (presente en cada página)
- Nombres de secciones claros
- Un enlace a "Inicio"
- Funcionalidad de búsqueda
- Migas de pan para jerarquías profundas
Haz que las categorías sean evidentes. Los usuarios deberían poder predecir lo que encontrarán en cada sección. Utiliza etiquetas claras y descriptivas y evita nombres ingeniosos que puedan ser ambiguos.
8. Optimiza Tu Página de Inicio: Propósito Claro y Puntos de Inicio Fáciles
La página de inicio tiene que acomodar a todos, lo que es como decir "Cualquiera puede estacionar aquí" sobre un solo espacio de estacionamiento.
Comunica el propósito al instante. En segundos, los nuevos visitantes deberían entender de qué trata tu sitio y qué les ofrece. Utiliza un eslogan claro y un texto explicativo conciso.
Muestra funciones clave. Haz obvio cómo comenzar las tareas más importantes en tu sitio. Ya sea búsqueda, creación de cuenta o navegación de productos, estos puntos de entrada deben ser prominentes.
Equilibra necesidades competidoras. Las páginas de inicio a menudo tienen que servir a múltiples audiencias y objetivos comerciales. Prioriza sin piedad y concéntrate en los elementos más críticos. Resiste la tentación de promocionar todo.
9. Pruebas de Usabilidad con Presupuesto: Manténlo Simple y Hazlo Frecuentemente
Probar a un usuario temprano en el proyecto es mejor que probar a 50 cerca del final.
Las pruebas regulares son invaluables. Incluso las pruebas de usabilidad a pequeña escala e informales pueden revelar problemas importantes. Apunta a probar temprano y a menudo a lo largo del proceso de desarrollo.
Manténlo simple:
- Prueba con 3-4 usuarios por ronda
- Concéntrate en tareas y puntos críticos
- Utiliza protocolos de pensamiento en voz alta para entender los procesos de pensamiento de los usuarios
- Busca patrones entre múltiples usuarios
Actúa rápidamente sobre los hallazgos. El objetivo es mejorar el diseño, no crear informes elaborados. Después de cada ronda de pruebas, identifica los problemas más críticos e implementa soluciones de inmediato.
10. La Accesibilidad Importa: Diseña para Todos los Usuarios
Hacer que las páginas sean evidentes por sí mismas es como tener buena iluminación en una tienda: simplemente hace que todo parezca mejor.
El diseño inclusivo beneficia a todos. Diseñar para la accesibilidad no solo ayuda a los usuarios con discapacidades, sino que a menudo mejora la usabilidad para todos los usuarios. También es cada vez más importante para el cumplimiento legal y las prácticas comerciales éticas.
Consideraciones clave de accesibilidad:
- Proporciona alternativas de texto para imágenes
- Asegura la navegación por teclado
- Utiliza un contraste de color suficiente
- Crea una estructura de contenido lógica
- Haz que los formularios sean accesibles
Comienza con lo básico. Incluso pequeñas mejoras en accesibilidad pueden marcar una gran diferencia. Concéntrate en los cambios más impactantes primero y luego mejora la accesibilidad gradualmente con el tiempo.
11. Escribe para la Web: Conciso, Escaneable y Objetivo
La charla feliz debe morir.
La brevedad es clave. Los usuarios de la web tienen tiempo y atención limitados. Elimina palabras innecesarias, texto introductorio y lenguaje de marketing. Ve al grano de manera rápida y clara.
Haz que el texto sea escaneable:
- Utiliza encabezados y subtítulos significativos
- Emplea listas con viñetas y numeradas
- Destaca términos y frases clave
- Usa párrafos cortos y mucho espacio en blanco
Sé objetivo y directo. Evita el bombo y las afirmaciones exageradas. Los usuarios son escépticos ante el lenguaje de marketing y aprecian la información clara y factual. Deja que tus productos o servicios hablen por sí mismos.
Última actualización:
FAQ
What's "Don't Make Me Think" about?
- Web Usability Focus: "Don't Make Me Think" by Steve Krug is a guide to web usability, emphasizing the importance of intuitive design that doesn't require users to think too much.
- Practical Advice: The book provides practical advice on how to create user-friendly websites by focusing on design principles rather than technology.
- User-Centric Approach: It stresses the importance of understanding how users interact with websites and designing with their needs in mind.
- Second Edition Updates: The second edition includes updated examples and additional chapters on accessibility and usability testing.
Why should I read "Don't Make Me Think"?
- Improve Usability Skills: It offers valuable insights into making websites more user-friendly, which is crucial for anyone involved in web design or development.
- Practical and Concise: The book is known for its brevity and practical approach, making it easy to read and apply the concepts quickly.
- Widely Respected: Steve Krug is a respected figure in the field of usability, and his book is considered a classic in web design literature.
- Broad Audience: Whether you're a designer, developer, or project manager, the book provides relevant advice for improving web usability.
What are the key takeaways of "Don't Make Me Think"?
- First Law of Usability: Krug's first law is "Don't make me think," emphasizing that web pages should be self-evident and intuitive.
- User Behavior Insights: Users scan pages rather than read them, and they often satisfice, choosing the first reasonable option rather than the best one.
- Importance of Testing: Regular usability testing is crucial, even if it's informal and involves just a few users.
- Clear Navigation: Effective navigation is essential for a good user experience, and it should be consistent and easy to understand.
How does Steve Krug define usability in "Don't Make Me Think"?
- Ease of Use: Usability means ensuring that a person of average ability can use a website for its intended purpose without frustration.
- Common Sense Approach: Krug advocates for a common-sense approach to usability, focusing on making things obvious and self-explanatory.
- User-Centric Design: The design should prioritize the user's needs and minimize the cognitive load required to navigate the site.
- Iterative Testing: Usability is best achieved through iterative testing and refinement based on user feedback.
What is Krug's First Law of Usability?
- "Don't Make Me Think": The first law is that web pages should be self-evident, meaning users should understand them without having to think.
- Obvious and Intuitive: The design should be obvious and intuitive, allowing users to navigate without confusion or hesitation.
- Reduce Cognitive Load: By minimizing the cognitive load, users can focus on their tasks rather than figuring out how to use the site.
- Ultimate Tie Breaker: This principle serves as the ultimate tie breaker when deciding if a design works or not.
What are some best practices for web navigation according to "Don't Make Me Think"?
- Consistent Navigation: Use persistent navigation elements that appear on every page to provide a consistent user experience.
- Clear Visual Hierarchy: Create a clear visual hierarchy to help users understand the relationships between different elements on a page.
- Use Conventions: Take advantage of web conventions to make navigation intuitive and reduce the learning curve for users.
- Highlight Current Location: Use "You are here" indicators to show users their current location within the site.
How does Krug suggest handling usability testing?
- Start Early and Test Often: Begin testing early in the design process and continue testing iteratively to catch issues before they become ingrained.
- Simple and Inexpensive: Usability testing doesn't have to be expensive or complicated; even testing with a few users can provide valuable insights.
- Focus on Key Tasks: Test key tasks that users are likely to perform on the site to ensure they can complete them easily.
- Observe and Adjust: Watch users interact with the site, note where they struggle, and make adjustments based on these observations.
What role do taglines play in web design according to "Don't Make Me Think"?
- Convey Site Purpose: Taglines should clearly convey the purpose of the site and what makes it unique or valuable.
- Positioning: They are typically placed near the Site ID to immediately inform users about the site's mission.
- Brevity and Clarity: Effective taglines are concise, usually six to eight words, and provide a clear benefit or differentiation.
- Avoid Jargon: Taglines should avoid vague or generic language that doesn't add value or clarity.
What are some common usability issues highlighted in "Don't Make Me Think"?
- Unclear Navigation: Users often struggle with navigation that isn't intuitive or consistent across the site.
- Excessive Text: Pages with too much text can overwhelm users; Krug advises cutting unnecessary words.
- Hidden Information: Important information, like contact details or pricing, should not be hidden or difficult to find.
- Complex Forms: Forms should be simple and only ask for necessary information to avoid user frustration.
How does Krug address accessibility in "Don't Make Me Think"?
- Part of Usability: Accessibility is an integral part of usability, ensuring that all users, including those with disabilities, can use the site.
- Simple Adjustments: Implementing basic accessibility features, like alt text for images and keyboard navigation, can significantly improve usability.
- Cascading Style Sheets (CSS): Using CSS can help create accessible designs by allowing for flexible layouts and text resizing.
- Right Thing to Do: Beyond legal requirements, making a site accessible is the right thing to do as it can dramatically improve some users' lives.
What are some of the best quotes from "Don't Make Me Think" and what do they mean?
- "Don't make me think!": This quote encapsulates the book's core message that web design should be intuitive and self-evident.
- "Get rid of half the words on each page, then get rid of half of what's left.": This emphasizes the importance of concise content that doesn't overwhelm users.
- "Usability testing on 10 cents a day.": Krug highlights that usability testing can be simple and inexpensive, yet highly effective.
- "The Farmer and the Cowman Should Be Friends.": This chapter title suggests that different stakeholders in web design should collaborate despite differing perspectives.
How does "Don't Make Me Think" address the balance between design and functionality?
- Design for Users: The book stresses that design should prioritize user needs and ease of use over aesthetic appeal alone.
- Avoid Over-Design: While visual appeal is important, it should not come at the expense of functionality or user experience.
- Iterative Improvement: Design should be refined through iterative testing and feedback to ensure it meets user needs effectively.
- Balance Sizzle and Substance: Krug advises against adding unnecessary "sizzle" that can detract from the site's usability and purpose.
Reseñas
No me hagas pensar es aclamado como una guía esencial para la usabilidad web, ofreciendo consejos prácticos sobre cómo crear sitios web intuitivos y amigables para el usuario. Los lectores valoran el estilo de escritura directo de Krug, su humor y el uso de ejemplos. Aunque algunos consideran que el contenido es obvio o está desactualizado, muchos lo consideran valioso tanto para principiantes como para diseñadores experimentados. El libro enfatiza la simplicidad, la navegación clara y el diseño centrado en el usuario. También aborda la realización de pruebas de usabilidad y la accesibilidad. A pesar de su antigüedad, la mayoría de los reseñadores coinciden en que los principios fundamentales siguen siendo relevantes en el diseño web moderno.
Similar Books
