Недавно вышла книга Максима Ильяхова «Ясно, понятно». Если вы учились в школах Бюро Горбунова и следите за каналами «Главред» и «Пиши, соблазняй», встает вопрос: будет ли в ней что-то новое? Я купила книгу и не пожалела. В этой заметке рассказываю о своих впечатлениях.

***

Совет о призме Ильяхова

В своем блоге Максим Ильяхов пишет, что люди чаще реагируют на материалы, которые отвечают хотя бы одному из этих критериев:

• прагматика — обещают ощутимую пользу;
• социальное — обещают читателю улучшение позиций в обществе;
• эмоции — обещают яркое переживание.

Можно использовать сразу несколько критериев — тогда продукт привлечет больше читателей. Мне кажется, именно так сделал сам Ильяхов в своей книге. Попробую разложить книгу на составляющие и рассказать о пользе, для кого она подойдет и какие эмоции вызывает.

Прежде чем начать, еще одна ремарка. В этой статье описаны мои впечатления от книги. Скорее всего, у вас они будут отличаться — другие мысли покажутся важными, захочется выделить другие цитаты или даже с чем-то поспорить. Если хотите поделиться — можем обсудить книгу в комментариях 👐

Так выглядит книга. Толстый томик в фирменном оранжевом цвете — легко заметить на полке в книжном магазине

Прагматика — перестать мусолить текст и прокачаться в визуальном повествовании

Многие тезисы из книги действительно оказались уже знакомыми. Например, про анкетность в новостях была статья в блоге, а как не путать картинки и иллюстрации — целая подборка. Проблема в том, что такие материалы попадаются в ленте внезапно: лично я бегло просматриваю статьи, а видео часто откладываю «на потом» и так и не смотрю. В итоге ты вроде что-то слышал, но не дал себе времени обдумать.

Книга помогает разложить знания по полочкам. Структура глав идет от внешнего к внутреннему: контекст → выбор интересной темы → ясный текст → подача и иллюстрации. Так в голове создается четкая структура из правил, примеров и всего, что раньше делал по наитию.

Самой полезной оказалась глава «Подача» — там рассказывается про приемы визуального повествования. Это отлично дополняет Школу редакторов. Но интересные тезисы я отметила в каждой главе. Вот некоторые из них:

• нельзя игнорировать контекст. Нельзя забывать обо всем, что происходит помимо текста: где он опубликован, какая репутация у компании или издания, что происходит в мире и чего ждет от нас читатель.
• чтобы примеры было легче воспринимать, нужно подготовить читателя словами вроде «Допустим, пишем статью из области производства» или «рассмотрим пример из другой области». А если примеров несколько — предупредить об этом.
• стоит подменять местоимения: если что-то хорошее, направить это на «вас», если что-то плохое — это «он, они», в спорных моментах — «мы».
• все, что читатель должен ощутить, выражаем рисунками, схемами, фото и видео, а о чем нужно подумать — текстом, числами, таблицами и перечнями.
• не использовать в схемах реальные цвета. Стандартный цвет — черный, цвет опасности — красный, все отключенное — серое, все хорошее — зеленое, синее или цвета логотипа.
• можно специально конструировать фотографии, чтобы они рассказывали историю. Редактор определяет, какое ощущение нужно создать и какой смысл передать, а фотограф выбирает декорации, ракурс, композицию и свет. Даже огонь в глазах студентов можно сделать вспышкой.

Мой список стал антипримером к правильному перечню, уж слишком много в нем получилось пунктов. Будем считать его иллюстрацией к новому для меня приему «задавить массой» — это когда вместо абстрактного числа вываливают на читателя много пунктов сплошной стеной, чтобы показать масштаб 😀

Отбирать фото для иллюстраций мы вроде бы научились на второй ступени Школы редакторов, а вот схемы — это высший пилотаж. С такой шпаргалкой и примерами из книги придумать хорошую схему гораздо проще

Социальное — почувствовать, что стал круче и профессиональнее

Во введении написано, что «Ясно, понятно» — для тех, кто профессионально занимается текстом. Мне кажется, это не совсем так, ведь не только редакторам и пиарщикам хочется, чтобы их правильно понимали. Просто редактору нужен каждый раздел, условному менеджеру больше пригодится глава про контекст, а дизайнер обязательно должен прочитать про подбор фотографий и схемы.

«Пиши, сокращай» уже давно стала настоящим стандартом для любого автора: про нее пишут в вакансиях и спрашивают на собеседованиях — это база. А вот благодаря «Ясно, понятно» действительно можно перейти на следующий уровень и почувствовать, что готов решать более сложные задачи.

При этом книга не подойдет тем, кто ищет четких инструкций и однозначных правил: так делай, а вот так не делай. Каждая глава — вопрос к размышлению, потому что в одной ситуации приемы сработают хорошо, а в другой уже против вас.

Книга подойдет всем, кто хочет, чтобы его понимали правильно. Для опытных редакторов это повторение, систематизация и более глубокое погружение в тему, а для новичков — отличная база, потому что есть кратко и про контекст, и про текст, и про иллюстрации

Эмоции — насладиться иллюстрациями, версткой и историями

Книгу приятно листать: плотная и приятная на ощупь бумага, продуманная верстка, куча схем и классные иллюстрации — такой подход знаком еще из «Пиши, сокращай».

Зато в этой книге изменился авторский стиль. Я где-то читала, что он проявляется не в словах или каких-то особенно красивых оборотах, а в том, как автор структурирует текст и какие примеры использует. Так вот, на мой взгляд, это круто сработало в «Ясно, понятно». Во всяком случае я кайфанула, встречая цитаты из песен «Машины времени» и «Аквариума», едкие шуточки про инста-копирайтеров и даже историю про «Денег нет, но вы держитесь» в качестве примера. Кажется, что на месте абстрактного «самого известного главреда Рунета» видишь живого и осязаемого человека — так читать интереснее.

Для кого-то, наоборот, это может стать минусом: не все любят русский рок или следят за событиями в мире. Например, Максим рассказывает о разных способах подачи материала на примере «противостояния» Илона Маска и Рогозина из Роскосмоса — для тех, кто ничего о них не знает, пример не будет таким ясным.

Если стало интересно: где купить книгу

Я знаю: чтобы я здесь не написала про книгу, это не заставит никого ее прочитать. Поэтому предлагаю просто полистать и самим принять решение — нужно ли это вам. Тем более, ее легко найти:

• на Озоне. Можно посмотреть фрагмент, а если понравится — купить бумажную книгу с доставкой. Для новичков по промокоду OZON8HNI34 будут 300 приветственных баллов, которыми можно оплатить до 25% от стоимости заказа — тогда книга обойдется в 557 рублей.
• на Литресе. Там тоже можно прочитать фрагмент и купить книгу в PDF за 449 рублей. Кстати, в электронной книге есть ссылки на другие статьи по теме — в бумажной такого нет.
• в любом книжном — книга давно в свободной продаже.

Я купила бумажную книгу в интернет-магазине Альпина Паблишер, но не советую — было много проблем с доставкой.

Анна Акулова приняла вызов Главреда

Джеф Раскин известен как специалист по компьютерным интерфейсам и инициатор проекта Macintosh или Mac — персональных компьютеров Apple. Свой опыт он обобщает в книге «The Humane Interface», которая была издана в 2000 году.

По мнению Раскина, интерфейс считается человекоориентированным, если он отвечает нуждам человека и учитывает его слабости. В книге он говорит, как разрабатывать интерфейсы с учетом принципов когнетики и решить проблемы взаимодействия человека с компьютером.

***

Интерфейс — это то, как вы решаете задачу с помощью продукта. Т. е. это совершаемые вами действия и то, что вы получаете в ответ.

Основные идеи
Простое должно оставаться простым

Установить время на механических часах гораздо проще, чем на электронных. Поэтому их интерфейс лучше.

Какой сложной бы не была система, простые задачи должны оставаться простыми.

Задача — проектирование — разработка

Пользователи не задумываются над тем, как устроена машина, пока она справляется со своими задачами. Им не важен процессор и вся техническая начинка, имеет значение лишь удобство и результат. Но видят они только интерфейс — значит, для них это конечный продукт.

На первом этапе разработки нужно определить, что именно
должен сделать пользователь для получения результата и как система должна отвечать на каждое его действие. В ходе работы определение задачи скорее всего будет меняться.

Определив задачу, для которой предназначен продукт, сначала спроектируйте интерфейс, а потом приступайте к его реализации.

Человек концентрируется только на чем-то одном

Одно из самых важных ментальных ограничений человека — у нас только один локус внимания. Это значит, что из всех объектов или явлений окружающего мира, которые вы воспринимаете с помощью своих чувств или воображения, в каждый момент времени вы можете сконцентрироваться только на одном.

Пользователь, поглощенный своей задачей, не замечает уведомления, подсказки и другие попытки системы пообщаться с ним.

Единственное, чем мы можем помочь — это сделать так, чтобы пользователь не мог совершить ошибок или имел возможность сразу отменить результаты своего действия.

Хороший интерфейс работает независимо от степени поглощенности пользователя. Предупреждения о потенциальных ошибках бесполезны.

Нужно учитывать привычки

При постоянном использовании интерфейса у вас формируются определенные привычки. Любая привычка означает отказ от внимания к деталям. В этом смысле задача дизайнеров заключается в том, чтобы создавать интерфейсы, которые не позволяют привычкам вызывать проблемы у пользователей.

Многие компьютеры перед неизбежным действием задают вопрос: «Вы уверены?» После этого вам требуется ввести либо «Да», либо «Нет» в качестве ответа. Пользователь привыкает отвечать «Да» на любую команду. Из-за постоянного повторения это становится привычным действием и, вместо того чтобы остаться отдельной ментальной операцией, превращается в часть действия по удалению файлов.

Любой запрос о подтверждении, требующий установленного ответа, вскоре становится бесполезным.

Обратной связи недостаточно

Разные режимы ведут к ошибкам. Средств обратной связи и индикаторов текущего положения системы недостаточно, чтобы обеспечить устранение ошибок, вызванных режимами. Потому что это не находится в локусе внимания.

Лучше избегать режимов. Когда появятся привычки в пользовании интерфейсов, не нужно будет задумываться или планировать действие, поэтому внимание будет сосредоточено только на содержании работы.

Не всегда нужны лишние настройки

Большинство пользователей просто хотят выполнить свою работу. Их не волнует, какой шрифт принят по умолчанию и т.д.

Добавляя в программу настройки, мы обременяем пользователя новой задачей: скажем, помимо электронных таблиц, приходится изучать еще и опции по их настройке.

Время, которое тратится на изучение и выполнение пользовательских настроек, — потерянное с точки зрения текущей задачи.

Пользователь слепой

По отношению к тому, что находится вне нашего локуса внимания, мы все в самом прямом смысле слепые. Поэтому элементы интерфейса называют привычными, если ими может пользоваться «слепой» пользователь.

Нажимать кнопку или нажимать и удерживать?

Пользователь должен уделять время содержанию и работе с ним, а не управлению системой. Поэтому квазирежимы (когда нужно удерживать клавишу) должны использоваться для управленческих функций, тогда как для создания содержания должны применяться операции без задействования квазирежимов.

Правильный порядок действий: сначала выбирать объект, потом действие с ним

Модель «существительное-глагол»: сначала выбрать объект (выделить абзац), а потом указать действие (выбрать шрифт).

Модель «глагол- существительное»: сначала выбрать действие (изменить шрифт), потом — объект (абзац).

Подход «существительное-глагол» лучше. Преимущества:

• Уменьшение количества ошибок — команды выполняются сразу, пока еще находятся в локусе внимания пользователя.
• Скорость — не нужно переключать свое внимание с содержания (которое и вызвало необходимость выполнения операции) к самой команде и затем опять к содержанию, чтобы можно было выделить необходимый участок текста.
• Простота и обратимость — чтобы выбрать другой текст, не требуется нажимать кнопку отката или применять какой-либо другой способ отмены действия.

Применение методов «глагол-существительное» должно ограничиваться только выбором из палитр, если они предназначены для непосредственного использования.

Делать объекты состоятельными

Элементы управления считаются состоятельными (affordance), когда по внешнему виду элемента понятно, какая у него функция. Если будет ручка — пользователи будут ее крутить, если кнопка — нажимать.

То, какую состоятельность будет иметь элемент интерфейса, зависит от опыта и знаний пользователя, а также от контекста, в котором он этот элемент встречает. Каждый видимый элемент должен быть состоятельным.

Делать жесты монотонными

Монотонность — это вторая сторона отсутствия модальности. В интерфейсе, который не имеет режимов, данный жест пользователя может иметь один и только один результат: жест g всегда приводит к действию a.

Перед разработчиками интерфейсов стоит задача по поиску монотонного решения, чтобы обеспечить такие преимущества: легкость изучения, простоту внедрения, минимум документации и небольшой размер расходов на обслуживание. Суть монотонности — для вызова одной и той же команды не должно использоваться много жестов.

Дихотомия «новичок-эксперт» — миф

Фаза профессионального владения интерфейсом характеризуется бессознательным использованием его возможностей. Поэтому менять интерфейс на другой при достижении какого-то уровня — раздражать пользователя.

Простота и ясность функций и их видимость важны и для новичков, и для экспертов. Причем переход от одного статуса к другому не должен требовать переучивания.

Двойная «дискликсия»

Интерфейсная техника, называемая «двойным кликом», т. е. двойное нажатие кнопки за короткий временной промежуток и без какого-либо значительного перемещения курсора между двумя нажатиями, имеет некоторые недостатки. То, каким образом двойной клик используется во многих сегодняшних интерфейсах, вынуждает пользователей запоминать не только то, по каким именно элементам можно дважды щелкать мышью, но и то, какой результат возникает в ответ на этой действие по отношению к разным классам элементов интерфейса.

Уменьшать задержки или делать их понятными

Если при использовании какого-то управляющего элемента на экране монитора в течение приблизительно 250 мс ничего не возникает, пользователь, скорее всего, может почувствовать беспокойство, решит сделать еще одну попытку или подумает, что система неисправна.

Если задержки неизбежны, в интерфейсе должна быть обратная связь, которая о них сообщает. Например, индикатор хода задачи (status bar), отражающий оставшееся время. Если неизвестно, сколько времени займет операция, так и скажите пользователю.

Хороший интерфейс выдает сообщение, что информацию от пользователя программа приняла и правильно распознала.

Унифицировать команды

Если сделать во всех приложениях одинаковые команды, можно устранить модальность.

Разработка интерфейсов должна быть основана на идее, что любые объекты, которые выглядят одинаково, одинаковы.

Каталог элементарных действий

Элементарные действия, выполняемые пользователем в различных комбинациях, порождают набор элементарных операций, которые применяются к содержанию и используются почти во всех интерфейсах. Перечислим, какие операции пользователи применяют к содержанию:

• Указание. Указывают на то или иное содержание.
• Выделение. Выделяют какое-то содержание.
• Активизация. С помощью «клика» активизируют содержание.
• Модификация или использование (с помощью команд):
• Генерация. Модификация из «пустого» в «непустое».
• Удаление. Модификация из «непустого» в «пустое».
• Перемещение. Вставка содержания в одно место и одновременное его удаление из другого.
• Трансформация. Преобразование в другой тип данных.
• Копирование. Содержание может быть отправлено или получено от внешнего устройства или скопировано в другую область внутри системы. Например, содержание распечатывают, отправляют по электронной почте, сохраняют на жестком диске, копируют в другой документ.

Подсветка (highlighting) означает, что с помощью каких-либо средств отображенному на экране объекту придается заметное отличие. Когда пользователь наводит курсор на какие-то объекты, они должны быть подсвечены.

Указание (indication) — это подсветка единичного объекта при перемещении курсора без каких-то других действий со стороны пользователя (например, без клика мыши). С помощью указания пользователь может в любой момент знать, на какие объекты он указывает с точки зрения системы.

Выделение (selecting) — это процесс, с помощью которого пользователь указывает, что один или несколько объектов имеют особый статус, который может быть воспринят системой. Как результат процесса получается выборка (selection).

Три недостатка выборок:

1. Команда для создания составных выборок невидимая.
2. Когда создаешь большую выборку, иногда случайно отпускаешь «Shift» и щелкаешь по следующему файлу, — вся выборка отменяется.
3. Механизм — «переключатель»: один и тот же жест отменяет и устанавливает выделение.

Решения:

1. Сделать экранную подсказку.
2. Установить специальную команду, с помощью которой текущая выборка определяется как объединение старого и текущего выделения. Благодаря такой команде пользователь сосредоточился на создании выборки, не заботясь о том, что было выбрано до этого.
3. Сделать разные команды для установки и удаления. Операторы Отменить и Повторить являются основополагающими, и их функция настолько важна, что в будущих системах для них должна быть предусмотрена специальная клавиша.

Когда процессом взаимодействия управляет человек, в фокусе обычно находится текущая выборка. Если же система отвечает на действие пользователя или внешней системы, в фокусе обычно находится результат действия.

Подстраивать команды под естественный язык

Синтаксис, который мы выбираем для написания команд, не должен исключать пробелы или символы новой строки. Любые ограничения, накладываемые на набор допустимых символов, используемых для набора команд, в будущем приведут к проблемам.

Следует сделать так, чтобы машина подстраивалась под нас, а не подстраивать обычаи естественной речи под то, что проще решить с точки зрения программирования.

Не подвергать работу пользователя риску

Человекоориентированный интерфейс никогда не подвергает работу пользователя риску => ввод с клавиатуры не замещает выделенный текст и не отменяет выделение текущей выборки. Случайная потеря хотя бы одного символа может означать потерю части телефонного номера, которая не может быть восстановлена.

Удаление текста должно проходить явным образом по желанию пользователя и не быть побочным эффектом другого действия.

Побочный эффект — это следствие применения команды, при котором изменяется содержание или события, которые не находятся в локусе вашего внимания. В только что рассмотренном случае в локусе вашего внимания находится текст, который вставляется, а побочным эффектом является удаление. Устранение побочных эффектов должно быть одной из целей для разработчика человекоориентированпого интерфейса.

Раскин советует отказаться от функции перетаскивания. Меньшее число ошибок и проблем будет хорошей компенсацией для пользователей, которые привыкли перетаскивать текст.

Отказаться от имен файлов и иерархической структуры

Необходимость давать имена файлам увеличивает ментальную нагрузку на пользователя. Это одна из главных бедствий, которым страдают современные компьютерные системы. Между именем файла и самим файлом не должно быть различия.

Человеческий мозг способен более эффективным образом использовать быструю, полнотекстовую поисковую систему, поэтому любое слово или фраза из файла может служить ключом к нему. Содержание текстового файла — его самое лучшее имя.

Отказ от использования иерархической файловой структуры не означает отказ от структурирования сохраняемой информации. Ничто не мешает вам создавать оглавления и указатели — но тогда структура будет частью вашего содержания, а не интерфейса. Такая структура не будет устанавливаться разработчиками, у которых могут быть другие идеи, отличные от ваших.

Использовать каждый символ

Программа должна взаимодействовать с пользователем на основе наименьшей единицы ввода. Пишешь с клавиатуры — познаково, говоришь голосом — пословно и т.д.

Сделать универсальные команды

Команды, которые должны быть доступны для пользователя в любой момент:

• проверить орфографию в текущей выборке;
• использовать текущую выборку как арифметическое выражение и вычислить его;
• передать текущую выборку по электронной почте;
• передать текущую выборку по факсу;
• перейти по данному URL;
• выполнить текущую выборку как программу, написанную на языке Java или любом другом.

Не увлекаться пиктограммами

Пиктограммы делают интерфейс более привлекательным в визуальном отношении и, при определенных условиях, могут способствовать большей понятности. Но иногда, вместо того, чтобы объяснять, пиктограммы зачастую сами требуют объяснений. К тому же, смысл пиктограмм часто зависит от культуры.

Количество пиктограмм, которые видно одновременно, не должно превышать 12.

Пиктограммы должны:

• визуально отличаться друг от друга
• хорошо отражать соответствующее понятие
• иметь разумно большой размер (обычно больший, чем могла бы быть текстовая надпись).

Пиктограммы нарушают принцип видимости, потому что смысл пиктограмм остается невидимым. Используйте пиктограммы только тогда, когда исследования показывают, что они эффективнее. Не бойтесь использовать текст.

Исключить ошибки, а не предупреждать о них

Когда вы пытаетесь написать текст сообщения об ошибке, пожалуйста, остановитесь и переделайте интерфейс таким образом, чтобы условие, при котором это сообщение об ошибке вызывается, не возникало.

Если отказаться нельзя, то сделайте сообщение об ошибке на полупрозрачном фоне. Так, пользователь увидит его и продолжит работу на компьютере, глядя на экран сквозь выданное сообщение. Сообщение закроется само, когда пользователь выполнит действие (перемещение курсора действием не считается).

Если выдается сообщение, которое не требует ответа от пользователя, оно должно быть устранено.

Пусть потеет машина

Не предоставляйте пользователю тех средств управления, которые должны работать всегда или никогда.

Если пользователь в следующий момент времени может выполнить только одно действие, пусть его выполнит компьютер.

Критика — благо

Если покупатель тратит свое время на тщательный анализ вашего продукта и делает конструктивные предложения для его улучшения, относитесь к этому с вниманием. Это нельзя рассматривать как попытку сделать вам выговор или нанести оскорбление. Этим он демонстрирует лояльность и интерес к вашему продукту.

Упрощать аппаратное обеспечение

Кабели должны присоединяться и отсоединяться от компьютера независимо от того, включен он или нет. Если их нельзя заменить без выключения питания, они становятся модальными.
Кратко не значит понятно

В большинстве современных интерфейсов акцент делается на краткость в ущерб ясности. Почему мы должны заниматься расшифровкой непонятного названия «Список» в выпадающем меню в текстовой программе, когда можно было бы использовать более понятное «Создать указатель или оглавление».

Не следует путать простой внешний вид экрана с простотой использования интерфейса.

Принципы отображения информации по Э. Тафти

Визуальный дизайнер Эдвард Тафт (Edward Tufte, 1983, с. 105) разработал принципы отображения информации, среди которых первыми тремя являются следующие:

• данные следует показывать прежде всего остального;
• следует максимально увеличивать долю чернил, используемых для отображения данных;
• следует максимально уменьшать долю чернил, которые не используются для отображения данных.

Для того чтобы приложить эти принципы к устройствам с дисплеями, требуется всего лишь заменить в них слово чернила на слово пикселы. Серьезный, профессиональный пользователь желает, чтобы экраны были до отказа заполнены полезным содержанием. Экраны должны быть хорошо обозначены, снабжены простыми механизмами для осуществления поиска и получения информации, отражающей суть данного экрана. (В конце концов, раз уж мы сели за компьютер, мы должны извлечь из этого максимальную пользу.)

Законы интерфейса

Первый закон интерфейса

Компьютер не может причинить вред данным пользователя или своим бездействием допустить, чтобы данным был причинен вред.

Второй закон интерфейса

Компьютер не должен тратить впустую ваше время или вынуждать вас выполнять действия сверх необходимых.

Зачем создавать качественный интерфейс?

Тщательное проектирование и детальное определение технических и других требований не замедляют, а, наоборот, ускоряют процесс разработки. Создание качественного интерфейса полезно и с точки зрения долгосрочной перспективы, поскольку в результате приводит к:

• большей продуктивности работы пользователя;
• большему удобству для пользователя;
• большей ценности в глазах покупателя;
• уменьшению расходов на поддержку покупателей;
• ускорению и упрощению процесса внедрения;
• преимуществу перед конкурентами на рынке;
• лояльности к данной марке;
• упрощению инструкций и онлайновой помощи;
• более безопасным продуктам.

Идеальный интерфейс по мнению Раскина

Интерфейс с рабочим столом имеет довольно низкую эффективность, так как, находясь на его уровне, вы не можете выполнять свои задачи. В человекоориентированном интерфейсе, в котором нет ни рабочего стола, ни приложений, пользователь может в любой момент работать с необходимым ему содержимым.

Мы можем отказаться от использования файлов и файловых имен, оставив только одно пространство — пространство содержимого. В такой среде не нужно открывать или закрывать документы — вы просто уменьшаете масштаб системы до их размера и начинаете работать. Вам не нужно открывать приложения — вы просто копируете чистый документ. Игру не нужно запускать, вы просто масштабируетесь до нее.

Интерфейс должен быть по возможности самообучающимся. Это не означает, что интерфейс должен быть интуитивным, а означает, что пользователь может легко найти понятные объяснения или инструкции в тех случаях, когда он в них нуждается. Для упрощения процесса изучения при первой активизации продукта на экране должен отобразиться экран с текстом инструктивного содержания. Учебник и полное руководство по использованию должны быть частью интерфейса, доступной в любой момент.

Книга «Дизайн привычных вещей» впервые вышла в в 1988 году. В ней Дональд Норман — основатель компании Nielsen Norman Group и бывший вице-президент Apple — рассказал о том, как дизайн влияет на жизнь человека. Он привел простые примеры из жизни и описал, как плохой дизайн приводит к роковым ошибкам — авиакатастрофам и авариям на производстве. И дал советы, которые помогут все исправить.

Ниже будут цитаты из книги и мысли, которые я для себя отметила.

***

Фундаментальные принципы дизайна вещей

Наглядность функций

С первого взгляда на устройство можно определить его состояние и возможные будущие действия.

• все детали видны;
• назначение кнопок очевидно;
• действие соответствует результату;

Ясная концептуальная модель

Можно предсказать результат действий с вещью. Модель непротиворечива и понятна пользователю.

Три аспекта ментальных моделей. Пользователь получает все знания об устройстве только через образ системы, поэтому в идеале модель проектируемой системы совпадает с моделью пользователя

Хорошее соответствие

Можно определить взаимосвязь между действиями и результатом, кнопками и их функциями, действительным состоянием устройства и отражением этого состояния.

Элементы управления должны либо находиться на самом объекте, либо быть как-то связанными с ним. Их движение должно по аналогии повторять ожидаемое движение объекта.

Обратная связь

Пользователь получает полную и точную информацию о результате проделанных действий.

***

Процесс выполнения любого действия состоит из четырех этапов:
цель → действие (выполнение — оценка) → изменения в мире → проверка результата

Этапы действия

Этапы действия дают базовые требования к дизайну, чтобы избежать разрывов выполнения и оценки.

Технологический парадокс

С развитием новых технологий устройства становятся проще, надежнее и мощнее. Но потом их стараются сделать еще новее и мощнее, в результате они становятся слишком сложными и их надежность уменьшается.

Но это не оправдывает плохой дизайн.

Задача должна быть простой

Дизайнер должен принимать во внимание психологию человека и возможности его памяти:

• кратковременная память — рабочая, отражает настоящее. Предел — 5—7 единиц.
• долговременная память — для прошлого. Требует времени и усилий для запоминания. Это не запись событий, а их интерпретация.

Информация легко извлекается, если материал осмыслен и близок к тому, что уже известно.

Типы запоминания:

• механическое — информация случайная и не связана с другими фактами (алфавит).
• основанное на осмысленных связях — создает связи с известной информацией.
• основанное на объяснении — не нужно запоминать, можно просто понять.

Хорошее устройство уменьшает умственную нагрузку.

Память объединяет детали похожий ситуаций в единое прототипическое событие и уделяет большое внимание отличающимся от них. Нестандартные события мы помним лучше.
Поэтому в принятии решений мы руководствуемся скорее исключениями, чем правилами.

Как новичок разбирается с предметом

Столкнувшись с новым предметом, как узнать, что с ним делать?

• использовать прошлый опыт, т. е. внутренние знания о назначении предметов.
• использовать внешнюю информацию. Если дизайн дает нам подсказки, можно правильно интерпретировать подсказки.

Назначение предлагает возможности. Ограничители сужают выбор вариантов.

Человек старается объяснить себе все, что видит, основываясь на своем опыте, который может быть неприменим в этой ситуации. Задача дизайнера — сделать так, чтобы эти объяснения были верны.

Если дизайн полагается на подписи, схемы или инструкции, он скорее всего ошибочен. Надписи важны и часто необходимы, но естественное соответствие снижает потребность в них.

В любой ситуации поведение пользователя определяется сочетанием внутренних знаний с внешней информацией и ограничителями внешнего мира.

Мы ошибаемся постоянно

Ошибки — неотъемлемая часть повседневной жизни. Хороший дизайн может свести к минимуму их количество и уменьшить последствия.

Есть два вида ошибок: заблуждения и оплошности.

Заблуждения

Результат сознательных размышлений. Обычно их причина — неправильный выбор целей.

Оплошности

Результат автоматических действий, которыми руководит подсознание. Обусловлены недостатком внимания.

• Заместительные ошибки — когда начинаешь делать одно, а в итоге делаешь что-то другое. У действий, похожих на начальном этапе.
• Описательные ошибки — обычно при неправильном выборе объекта действия, когда предметы рядом и похожи.
• Информационные ошибки — когда влияет информация извне.
• Ассоциативные ошибки — когда думал об одном, а сделал другое, влияют размышления и ассоциации.
• Ошибки памяти — когда забыл, что делал или куда шел.
  Модальные ошибки — когда нет видимых признаков, в каком режиме работает устройство.

Если нет обратной связи, оплошность выявить трудно.

Любое действие можно рассматривать на разных уровнях. Ошибка может быть на любом. Обычно мы начинаем исправлять ошибку с самого низкого уровня, постепенно поднимаясь вверх.

Все люди ошибаются

Исходите из того, что каждая ошибка, которая может быть допущена, будет допущена. Предусмотрите ее. При разработке дизайна важно:

1. Понять причины ошибок и постараться свести их к минимуму.
2. Сделать возможной отмену предыдущего действия или уменьшить вероятность необратимого действия.
3. Облегчить обнаружение и исправление ошибок.
4. Изменить отношение к ошибкам.

Делайте так, чтобы ошибки всегда можно было заметить и исправить.

Предупреждение не всегда работает: на него могут не обращать внимания, отключить или оно будет отвлекать от решения проблемы.

Можно использовать вынуждающие функции — форму физического ограничителя: ошибка на одном этапе действия делает невозможным следующий этап.

Они бывают:

• взаимоблокировка — вынуждает действовать в определенном порядке;
• фиксация — нельзя преждевременно остановить действие;
• блокировка — не дает зайти в опасную зону и предотвращает некоторые события.

Если все остальное терпит неудачу, устанавливайте стандарты

Стандартизируйте действия, результаты, расположение, изображения. делайте так, чтобы родственные действия приводили к одинаковым последствиям. Благодаря этому учить правила придется только один раз.

Стандартизация — вид культурных ограничителей. Для внедрения нужно прийти к общему мнению.

Дизайн должен быть рассчитан на потребителя

• Защитите пользователя от любого несчастья.
• Сделайте действия обратимыми.
• Создавайте максимально дешевую продукцию.
• Не требуйте специальных знаний и перенесите всю нужную информацию в окружающий мир.
• Используйте ограничители, вынуждающие функции и соответствия.
• Сделайте наглядными все действия и результаты.

Дизайнеры — не обычные пользователи

Дизайнеры очень хорошо знают устройство, над которым работают. Пользователи же отлично знают задачу, которую им нужно выполнить с помощью устройства.

Дизайнер становится знатоком продукции, поэтому ее эксплуатация не может у него вызывать сложностей. Все знания у него в голове. Пользователю-новичку приходится полагаться на внешнюю информацию.

Не существует «среднего» человека

Любое решение обязательно будет кого-то не устраивать. Делайте гибкий дизайн: он хотя бы даст таким пользователям шанс.

Внимание избирательно

При появлении проблемы все внимание человека приковано к ней, а остальное вылетает из головы. Дизайнер должен учесть это и сделать упускаемые из виду факторы наглядными или менее необходимыми. Здесь и нужны вынуждающие функции.

Почему дизайнеры сбиваются с пути

Если бы дизайнеры руководствовались принципами эстетичности, жизнь бы стала красивой, но никак не удобной; если бы практичности — она стала бы удобной, но вряд ли красивой. Если за основу берется низкая стоимость и трудоемкость производства, конечный продукт вряд ли будет практичным, привлекательным и долговечным. Естественно, при разработке дизайна все эти аспекты должны быть учтены. Проблемы появляются тогда, когда один из них начинает доминировать.

Соблазны дизайнера

Ползучий функционализм

Стремление (часто беспричинное) расширить количество функций. Программа тогда перестает оставаться практичной и понятной.

Решения:

• оставить только необходимые функции;
• разделить наборы связанных функций (модуляция).

Поклонение ложным ценностям

Стремление к сложности

Компьютерные программы

Самые лучшие программы — те, которые отвлекают внимание пользователя от компьютера и всецело направляют его на решение проблемы.

Если вы хотите упростить систему, сделайте ее такой, чтобы пользователь не боялся экспериментировать и смог исследовать ее возможности методом проб и ошибок.

При хорошем дизайне пользователь не замечает компьютер, потому что внимание нацелено на выполнение задачи.

Главная идея книги: используя любое устройство, пользователь должен знать а) что делать, б) что происходит с системой в данный момент.

Когда просто читаешь книгу, все прочитанное быстро вылетает из головы. Поэтому я решила конспектировать самые интересные и полезные книги, чтобы сохранить важные идеи и возвращаться к ним.

Первый конспект — книга Издательства Бюро Горбунова «Типографика и вёрстка». Многое из нее есть в Советах, поэтому я вряд ли делаю что-то плохое, опубликовав свой конспект :)

Правило внутреннего и внешнего

Внутренние расстояния объектов (букв, строк) должны быть меньше внешних!

Внутреннее ≤ внешнее

В интерфейсе близость — самый естественный способ показать связь =>

• в формах группировать связанные поля
• радиокнопки либо вертикально, либо без кружков
• тулбары делить по смыслу

Правило: наборы элементов интерфейса разделять на смысловые группы

нет: ○ ○ ○ ○ ○ ○ ○

да: ○ ○ ○ — ○ ○ ○ ○

Интерлиньяж

Это функция кегля, длины строки и формата

Правило:

• чем длиннее строка по количеству слов, тем больше должен быть интерлиньяж
• поля вокруг текста больше интерлиньяжа

Принцип модульности

Макет должен быть «нарезан» на аккуратные непересекающиеся прямоугольные модули.

Правило якорных объектов

Любой якорный объект должен тяготеть или располагаться в одном из углов или в центре своего прямоугольника.

Визуальный центр выше геометрического (для подсознательной компенсации гравитации)

С противоположных сторон должен быть «воздух» или менее заметные объекты.

Якорный объект может быть привязан к одной из сторон прямоугольника.

Верхний прямоугольник обычно = формату. Нижний отступ больше верхнего. Вертикальные и горизонтальные поля не должны быть равны друг другу.

Книжный канон Иоганна ван де Граафа (голландский типограф) — книжный канон раннего Возрождения

Базовые элементы

Заголовок

Обычно «накрывает» текстовый модуль.

Если слишком короткий, лучше отделить модули линейкой.

Текст

Кегль экранного текста обычно в диапазоне 12—16 пунктов, интерлиньяж — 1,2—1,4 от кегля.

Иллюстрация

Привлекает внимание быстрее заголовка.

Горизонтальная — естественнее, вертикальная — динамичнее. Квадратные смотрятся беззубо и скучно, но дают модульность.

Если есть направление, картинка должна “смотреть” на текст.

Фотография должна быть четко ограничена собственным фоном или тонкой рамкой => не сливаться!

Элементы управления

Должны быть на расстоянии, чтобы не было ошибочных нажатий.

Между соседними элементами — минимум 2 пробела, между элементами и подписью — минимум 1 пробел.

Кнопки обычно линейный элемент, но важные часто делают большими — тогда они ведут себя как прямоугольники.

Все элементы управления — модульные якорные объекты => их нужно сортировать, отделять, собирать в однородные модули и выравнивать друг с другом.

Подпись

Если подпись к иллюстрации, выносные линии должны быть тонкими — не более 20% черного.

Двоеточия в подписях полей не обязательны.

В конце подписей точка не ставится!

Гиперссылка

Предлоги и союзы всегда включаются в ссылку!

Желательно обходиться без переносов.

Плохо выглядят многострочные ссылки.

Хорошо организованная верстка состоит из однородных блоков подобных элементов.

Модули

Нежелательно разрывать заголовок и начало текста => подписи и теги отправлять в конец.

Каноническая конструкция вертикального текстового модуля. Соответствует естественному порядку чтения

Иллюстрация «в подмышке» может быть только правой:

Фотография не должна отделять заголовок от начала текста

Если заголовок не накрывает картинку, оба варианта приемлемы:

В горизонтальном текстовом блоке иллюстрация может располагаться слева или справа от основного модуля

Ничто не выглядит так уродливо, как обтекание иллюстрации текстом справа => обтекание текстом только слева!

Правильное обтекание текстом

Форма текста и порядок чтения

Человек читает слева направо и сверху вниз:

Естественный порядок чтения

Если текст разорван иллюстрацией, чтение прерывается.

Если это посторонний баннер, читатель может решить, что текст закончился.

Если текст разбит на колонки, дочитав, читатель идет к началу следующей => все колонки должны выравниваться по верху.

Иллюстрации

Положение иллюстрации тоже задает направление => в сложной структуре траектория должна быть простой:

«Траек­то­рия» взгля­да — простая линия без непред­ска­зу­е­мых поворотов

Хороший дизайн создает иерархию, выделяет главное и подчиненное.

Жизнь приходит с разнообразием размеров и формы.

Кирпич из иллюстраций выглядит как… кирпич. Неболь­шой поток воз­ду­ха вокруг фото­гра­фий ожив­ля­ет гале­рею.

Допол­ни­тель­ный воз­дух и под­пи­си «отжи­мать» к кра­ям галереи.

Текстовая страница

Текст, выров­нен­ный вле­во с рва­ным пра­вым кра­ем, дол­жен «дышать» спра­ва, то есть край фор­ма­та или сосед­няя колон­ка не долж­ны под­хо­дить к нему слиш­ком близко.

Подзаголовки

Заголовки второго уровня: кегль увеличен по сравнению с основным текстов. Перед ним — отступ в 2 строки, после — 1 строка.

Заголовки третьего уровня: полужирный основного кегля. Нет отступа перед текстом.

Подзаголовок в подбор к основному тексту: помогает избегать отступов. Полужирный.

Заголовки четвертого уровня не использовать!

Списки

Любой список предваряется обобщающим текстом или заголовком в этой синтаксической роли.

Первый элемент перечня ставится на следующую строку ( без увеличе­ния рас­сто­я­ния меж­ду стро­ка­ми), чтобы подчеркнуть, что это одно предложение. Между элементами — дополнительное расстояние.

Таблицы

По умолчанию все значения выравниваются по верху и по левому краю.

Главная страница

Глав­ная стра­ни­ца сай­та — это его лицо, облож­ка, фир­мен­ный стиль, одеж­ка и квинт­эс­сен­ция. Глав­ная стра­ни­ца объ­яс­ня­ет суть, зна­ко­мит с воз­мож­но­стя­ми, опре­де­ля­ет сце­на­рий и зада­ёт тон.

Виды: лента, плитка, фоторама и рубрикатор. Ино­гда в чистом виде, ино­гда в комбинации.

Лента

Общий принцип устройства — бесконечная средняя часть.

Плитка

Кладка из прямоугольников. Модули плотно упакованы по рядам.

Фоторама

Листалка должна быть информативной — с подписями или миниатюрными картинками.

Кнопок-стрелок или точек чаще всего недостаточно.

Рубрикатор

Рубри­ка­тор чаще все­го име­ет фик­си­ро­ван­ный макет (ино­гда с неболь­ши­ми вари­а­ци­я­ми) и устро­ен по прин­ци­пу «бутер­бро­да», чтобы дизайн не сло­мал­ся при изме­не­нии содержания.