ключевых вывода
1. Не заставляйте пользователей думать: дизайн для интуиции и ясности
Если вы не можете сделать страницу самоочевидной, по крайней мере, сделайте её самопоясняющей.
Интуитивный дизайн — ключ к успеху. Пользователи не должны разбираться, как работает ваш сайт. Каждый элемент, от навигации до контента, должен быть сразу понятен. Когда пользователи сталкиваются с чем-то неясным, это создает когнитивное трение, замедляя их и потенциально отталкивая.
Самоочевидный vs. самопоясняющий. В идеале, ваш дизайн должен быть самоочевидным, не требующим размышлений для понимания. Если это невозможно, стремитесь к самопоясняющему, где пользователи могут быстро понять концепцию с минимальными усилиями. Это касается всего, от меток кнопок до общей структуры сайта.
Снижайте умственную нагрузку. Устраняйте вопросительные знаки в головах пользователей. Делайте выбор очевидным, используйте ясный язык и следуйте установленным веб-конвенциям. Чем меньше пользователи должны думать о том, как использовать ваш сайт, тем больше умственной энергии они могут посвятить вашему контенту или продуктам.
2. Пользователи веба сканируют, а не читают: оптимизация для быстрого восприятия
Мы не читаем страницы. Мы их сканируем.
Сканирование — это норма. Большинство пользователей не читают веб-страницы тщательно. Они быстро сканируют, ищут ключевые слова, фразы и визуальные подсказки, которые соответствуют их задаче или интересу. Это поведение обусловлено нехваткой времени, осознанием того, что не нужно читать всё, и многолетним опытом сбора информации "достаточно хорошего" уровня.
Дизайн для сканеров. Используйте техники, которые делают ваш контент легким для быстрого восприятия:
- Четкие, описательные заголовки и подзаголовки
- Маркированные списки
- Короткие абзацы
- Выделенные ключевые слова
- Значимые изображения и подписи
Выносите важную информацию на передний план. Размещайте самый важный контент в верхней части страницы и в начале абзацев. Используйте перевернутую пирамиду из журналистики: начните с вывода, затем предоставьте поддерживающие детали.
3. Создавайте четкие визуальные иерархии и конвенции
Конвенции — ваши друзья.
Визуальная иерархия направляет пользователей. Делайте важные элементы более заметными с помощью размера, цвета, расположения и пустого пространства. Визуально группируйте связанные элементы. Используйте вложенность, чтобы показать, что к чему относится. Четкая визуальная иерархия помогает пользователям понять вашу страницу с первого взгляда.
Используйте конвенции. Веб-конвенции развивались не просто так — они работают. Пользователи привыкли ожидать определенные элементы в определенных местах (например, логотип в верхнем левом углу, поиск в верхнем правом). Придерживайтесь этих конвенций, если у вас нет очень веской причины не делать этого.
Балансируйте инновации и знакомство. Хотя креативность ценна, не изобретайте велосипед для базовых функций. Знакомые шаблоны снижают когнитивную нагрузку. Если вы все же вводите новшества, убедитесь, что новый дизайн настолько интуитивен, что не требует обучения, или добавляет значительную ценность, чтобы оправдать небольшую кривую обучения.
4. Разделяйте страницы на четко определенные области
В идеале, пользователи должны быть в состоянии сыграть версию старого шоу Дика Кларка "$25,000 Пирамида" с любой хорошо спроектированной веб-страницей.
Отдельные зоны помогают восприятию. Разделение вашей страницы на четко определенные области помогает пользователям быстро решить, на какие части сосредоточиться, а какие игнорировать. Это особенно важно, учитывая склонность пользователей сканировать, а не читать тщательно.
Делайте области мгновенно узнаваемыми. Пользователи должны быть в состоянии определить назначение каждой области с первого взгляда:
- Навигация
- Поиск
- Контент
- Реклама
- Элементы брендинга
Используйте визуальный дизайн для усиления разделений. Применяйте такие техники, как пустое пространство, границы, цветовые фоны и единообразный стиль, чтобы разграничить разные области. Эта визуальная организация помогает пользователям строить ментальную модель структуры вашего сайта.
5. Сделайте очевидным, что можно кликать
Поскольку большая часть того, что люди делают в Интернете, — это поиск следующего элемента для клика, важно сделать очевидным, что можно кликать, а что нет.
Четкие возможности взаимодействия снижают разочарование. Пользователи не должны гадать, с чем они могут взаимодействовать. Сделайте ссылки и кнопки заметными с помощью:
- Единообразного стиля (например, подчеркнутый текст для ссылок)
- Цветового различия
- Эффектов наведения
- Кнопкоподобных форм для важных действий
Избегайте ложных возможностей взаимодействия. Не делайте неинтерактивные элементы выглядящими кликабельными. Это создает путаницу и подрывает доверие к вашему интерфейсу.
Учитывайте мобильные взаимодействия. На сенсорных устройствах делайте цели для нажатия достаточно большими и расположенными на достаточном расстоянии друг от друга. Обеспечьте визуальную обратную связь для нажатий, чтобы подтвердить взаимодействие.
6. Устраняйте отвлекающие элементы и беспорядок
Уберите половину слов на каждой странице, затем уберите половину из оставшихся.
Фокусировка имеет решающее значение. Каждый ненужный элемент на странице конкурирует за внимание пользователя. Загроможденные дизайны затрудняют пользователям поиск нужного и понимание вашего сообщения.
Безжалостно редактируйте. Устраняйте:
- Ненужные слова и контент
- Избыточные навигационные опции
- Чисто декоративные изображения
- Чрезмерно сложные макеты
Используйте пустое пространство. Не чувствуйте себя обязанным заполнять каждый пиксель. Пустое пространство помогает организовать контент, улучшает читаемость и дает важным элементам пространство для дыхания.
Приоритизируйте безжалостно. Для каждого элемента на странице спрашивайте: "Поддерживает ли это основную цель этой страницы?" Если нет, рассмотрите возможность его удаления или уменьшения его значимости.
7. Разрабатывайте эффективную навигацию: сделайте её легкой для поиска и понимания
Веб-навигация компенсирует отсутствие чувства места, воплощая иерархию сайта, создавая ощущение "там".
Четкая навигация имеет решающее значение. Хорошая навигация сообщает пользователям, что есть на сайте, как его использовать, и дает им уверенность в создателях сайта. Она должна быть последовательной на всем сайте и предоставлять контекст для того, где пользователь находится в структуре сайта.
Ключевые элементы навигации:
- Постоянная навигация (присутствует на каждой странице)
- Четкие названия разделов
- Ссылка "Главная"
- Функциональность поиска
- Хлебные крошки для глубоких иерархий
Делайте категории самоочевидными. Пользователи должны быть в состоянии предсказать, что они найдут в каждом разделе. Используйте четкие, описательные метки и избегайте умных названий, которые могут быть двусмысленными.
8. Оптимизируйте вашу домашнюю страницу: четкая цель и легкие стартовые точки
Домашняя страница должна удовлетворять всех, что похоже на утверждение "Здесь может припарковаться любой" о единственном парковочном месте.
Мгновенно сообщайте цель. В течение нескольких секунд новые посетители должны понять, о чем ваш сайт и что он им предлагает. Используйте четкий слоган и краткий пояснительный текст.
Демонстрируйте ключевые функции. Сделайте очевидным, как начать самые важные задачи на вашем сайте. Будь то поиск, создание аккаунта или просмотр продуктов, эти точки входа должны быть заметными.
Балансируйте конкурирующие потребности. Домашние страницы часто должны обслуживать несколько аудиторий и бизнес-целей. Приоритизируйте безжалостно и сосредоточьтесь на самых критических элементах. Сопротивляйтесь искушению продвигать всё.
9. Тестирование удобства использования с ограниченным бюджетом: делайте это просто и часто
Тестирование одного пользователя в начале проекта лучше, чем тестирование 50 в конце.
Регулярное тестирование бесценно. Даже небольшое, неформальное тестирование удобства использования может выявить серьезные проблемы. Стремитесь тестировать рано и часто в процессе разработки.
Делайте это просто:
- Тестируйте с 3-4 пользователями за раунд
- Сосредоточьтесь на основных задачах и болевых точках
- Используйте протоколы "думай вслух", чтобы понять мыслительные процессы пользователей
- Ищите шаблоны среди нескольких пользователей
Быстро реагируйте на инсайты. Цель — улучшить дизайн, а не создавать сложные отчеты. После каждого раунда тестирования определите самые критические проблемы и быстро внедрите исправления.
10. Доступность имеет значение: дизайн для всех пользователей
Сделать страницы самоочевидными — это как иметь хорошее освещение в магазине: это просто делает всё лучше.
Инклюзивный дизайн приносит пользу всем. Дизайн для доступности не только помогает пользователям с ограниченными возможностями, но часто улучшает удобство использования для всех пользователей. Это также становится все более важным для соблюдения законодательства и этических бизнес-практик.
Ключевые соображения по доступности:
- Предоставляйте текстовые альтернативы для изображений
- Обеспечьте навигацию с клавиатуры
- Используйте достаточный цветовой контраст
- Создавайте логическую структуру контента
- Делайте формы доступными
Начните с основ. Даже небольшие улучшения в доступности могут иметь большое значение. Сосредоточьтесь на самых значительных изменениях в первую очередь, затем постепенно улучшайте доступность со временем.
11. Пишите для веба: кратко, сканируемо и объективно
"Счастливая болтовня" должна исчезнуть.
Краткость — ключ. У пользователей веба ограничено время и внимание. Убирайте ненужные слова, вводные тексты и маркетинговую речь. Переходите к сути быстро и ясно.
Делайте текст сканируемым:
- Используйте значимые заголовки и подзаголовки
- Применяйте маркированные и нумерованные списки
- Выделяйте ключевые термины и фразы
- Используйте короткие абзацы и много пустого пространства
Будьте объективны и прямолинейны. Избегайте шумихи и преувеличенных утверждений. Пользователи скептически относятся к маркетинговому языку и ценят ясную, фактическую информацию. Пусть ваши продукты или услуги говорят сами за себя.
Последнее обновление:
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.
Отзывы
Не заставляйте меня думать - это незаменимое руководство по удобству использования веб-сайтов, предлагающее практические советы по созданию интуитивно понятных и удобных для пользователя сайтов. Читатели ценят прямолинейный стиль письма Круга, его юмор и использование примеров. Хотя некоторые считают содержание очевидным или устаревшим, многие находят его ценным как для начинающих, так и для опытных дизайнеров. Книга акцентирует внимание на простоте, четкой навигации и дизайне, ориентированном на пользователя. Она также охватывает тестирование удобства использования и доступность. Несмотря на возраст, большинство рецензентов соглашаются, что основные принципы остаются актуальными в современном веб-дизайне.
Similar Books
