Семь этапов хорошего дизайна

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

1. определить функцию устройства?
2. указать возможные действия пользователя?
3. определить соответствие намерений и физического действия?
4. выполнить действие?
5. сказать, находится ли система в необходимом состоянии?
6. определить соответствие состояния системы и его интерпретации?
7. сказать, в каком состоянии находится система?

В целом, вопросы для каждого этапа относительно просты. Но все они сводятся к принципам хорошего ди­зайна:

• Наглядность. Уже один взгляд на устройство по­ зволяет определить его состояние и возможные бу­ дущие действия.
• Ясная концептуальная модель. Дизайнер предлага­ ет пользователю ясную концептуальную модель с предсказуемыми функциями и результатами дей­ ствий и непротиворечивым образом системы.
• Хорошее соответствие. Можно определить взаи­ мосвязь между действиями и результатом, между кнопками и их функциями, между действитель­ ным состоянием устройства и отражением этого состояния.
• Обратная связь. Пользователь получает полную и точную информацию о результате проделанных им действий.

Повседневные ограничители

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

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

Использование звука в качестве подсказки

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

• Щелчок, когда захлопывается дверь
• Звук «з-з-з», если застежка-молния работает исправно
• Металлический звук, если дверь закрыта неправильно
• Рев, когда начинает плохо работать глушитель автомобиля
• Дребезжание, если детали плохо закреплены
• Свист, когда в чайнике закипает вода
• Щелчок, когда тосты готовы
• Повышение тона, если забит пылесос
• Неописуемые звуки, когда деталь сложного обору­ дования выходит из строя

Исследуемые системы: призыв к экспериментам

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

1. В любой момент времени пользователь должен ви­деть доступные действия и иметь возможность выполнить их. Наглядность играет роль напоми­ нания о наличии действия и призыва к исследова­нию новых концепций и приемов.
2. Результат каждого действия должен бьггь очевид­ным и легкоинтерпретируемым. Это позволяет изучить последствия каждого действия, создать хо­ рошую концептуальную модель системы и понять причинно-следственную связь между действиями и их результатом. Возможность такого обучения за­ висит в основном от образа системы.
3. Действия не должны наносить вред. Должна су­ществовать возможность отменить действие, кото­ рое приводит к нежелательным последствиям. Это особенно важно для компьютерных систем. Если действие необратимо, система должна предупре­дить пользователя о том, к чему оно может при­вести. Так у него будет достаточно времени, чтобы отказаться от задуманного. Или же это действие следует сделать невозможным Большинство же действий должны быть безопасными, наглядными и обратимыми.

Семь принципов превращения сложного в простое

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

1. Используйте как внешнюю информацию, так и внутренние знания
2. Упростите структуру задачи
3. Сделайте дизайн наглядным: ликвидируйте разры­ вы оценки и выполнения
4. Используйте правильные соответствия
5. Применяйте ограничители — как естественные, так и искусственные
6. Сделайте так, чтобы дизайн позволял совершать ошибки
7. Если все остальное терпит неудачу, устанавливайте стандарты

Резюме

дизайн должен:

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

Другими словами, потребитель должен знать следую­щее: 1) что делать; 2) что происходит с системой в дан­ный момент.

В дизайне должны быть учтены особенности человека и окружающего его мира. Это значит, что в нем должны использоваться естественные взаимосвязи и естественные ограничители. Изучение инструкции или надписей не должно быть обязательным условием для эксплуатации предмета. Любые инструкции или учебные курсы должны быть востребованы только раз, при этом пользователь должен после каждого объяснения сказать про себя: «Конечно» или «Понятно». Если все детали стоят на своем месте и выполняют отведенную им функцию, а результат действий очевиден, то для понимания принципов работы устройства достаточно небольшого разъяснения. Если же все объяснения приводят к вопросу: «Как же все это запомнить?», значит, дизайн ошибочен.

О пользе ведения профессионального блога. Всеволод Устинов о профессиональных блогах: зачем вести, как начать, о чем писать. В инфостиле.

Как разрабатывался шрифт Яндекса. Интервью с Ми­ге­лем Рей­е­сом (Miguel Reyes) и Ильёй Ру­дер­ма­ном о создании Yandex Sans. Це­ли проекта, про­цес­с ра­бо­ты и осо­бен­но­сти вне­дре­ния но­во­го шриф­та в «Ян­дек­се» и его про­дук­тах.

Что делать с таблицами на адаптивных сайтах? Подборка решений.

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

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

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

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

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

Верстка

Типографика

Редактура

Дизайн вещей и интерфейсов

Управление собой

P.S. Список прочитанных и непрочитанных книг веду в Goodreads’е. В 2016 году запланировал прочитать 25 книг. Прочитал 29. Да, я не тот, кто читает по 5 книг в неделю

При работе со всеми текстовыми и графическими редакторами привыкаешь, что комбинация ⌘+Z — отмена предыдущего действия. Нажимаешь еще раз ⌘+Z — двигаешься еще на один шаг назад. Т. е. работает пошаговый откат. А повтор отмененного действия — ⇧⌘Z

Но почему-то в Фотошопе ⌘+Z работает по-другому. Один раз — отмена действия, второй раз — повтор отмененного действия. Это не классическая Отменить—Отменить—Отменить, а Отменить—Повторить—Отменить—Повторить. Неудобно.

Решается просто. Нужно переопределить горячие клавиши. Edit —> Keyboard Shortcuts

Соответственно Step Backward — классический ⌘+Z, Step Forward — ⇧⌘Z. На Undo/Redo можно ставить любую клавишу. Я поставил F1, потому что не представляю когда мне понадобится эта функция.

Я пишу книгу по материалам журнала Everybodystreet — практическое руководство для начинающих стрит-фотографов. По принципу Ильяхова-Сарычевой пишу сразу в Индизайне. Написал черновик и сразу заливаю в макет. В Индизайне окончательно редактирую.

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

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

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

1. Добавим стиль NoBrake в Character Style

Обязательно отметить чекбокс No Brake

2. Добавим стили GREP к Basic Paragraph в Paragraph Style

В Apply Style добавить стиль NoBrake

3. Добавим нужные регулярные выражения

Неразрывный пробел после предлогов
(?<= )((в|во|без|до|из|к|ко|на|по|о|от|перед|при|через|с|у|не|за|над|для|об|под|про|и|а|но|да|или|ли|бы|то|что|как|я|он|мы|они|ни)( |\. |, ))+

Неразрывный пробел после предлогов в начале предложения
((?<= )|(?<=^))((В|Во|Без|До|Из|К|Ко|На|По|О|От|Перед|При|Через|С|У|Нет|За|Над|Для|Об|Под|Про|И|А|Но|Да|Или|Ли|Бы|То|Что|Как|Я|Он|Мы|Они|Ни) )+

Неразрывный пробел перед тире
(?<=) (~=)

Неразрывный пробел в цифрах
(?<=\d)(.)

4. Создадим все остальные стили параграфов на основе Basic Paragraph

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

С помощью GREP можно добавлять стили ко всем e-mail, телефонам, датам или другим повторяющимся единицам в документе. Советую изучить GREPоводство

Прежде, чем сделать что-то в ручном режиме, подумайте: а нельзя ли это автоматизировать? И если можно, то

АВТОМАТИЗИРУЙ

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

Меня выручил Alfred. Альфред — это программа для автоматизации рутинных действий на Маке. Рассказываю и показываю, что я автоматизировал с помощью Альфреда:

С текстом

Типографлю
Превращаю ужасный неоттипографленный текст в конфетку одним нажатием ⇧⌘T.

Скачать

Верстаю
Назначил на горячие клавиши основные теги и верстаю тексты для веба.
⌥⌘1 — обернуть текст в h1
⌥⌘P — обернуть текст в p
итд

Можно пойти дальше. Ваня Сурвилло автоматизировал оформление цитат в блоге.

Меняю регистр
⌃C — верхний, ⌃V — нижний

Скачать

С файлами

Катастрофически не люблю лезть в контекстное меню файла. Там еще нужно что-то в подпунктах выбирать. Проще стразу застрелиться. Или автоматизировать частые операции через Альфреда. Что я и сделал.

Сжимаю
⌥⇧Z — упаковать выделенные файлы в архив

Скачать

Отправляю по почте
⇧⌘E + Enter + имя адресата — вложить выделенный файл в письмо

Открываю в нужной программе
Чтобы открыть файл в Фотошопе ввожу команду «ps»

Скачать

С системой

• Открываю сайты
• Перевожу на английский
• Открываю папки
• Открываю приложения
• Создаю напоминания скачать
• Конвертирую цвета
• Делаю кучу других системных команд

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

Альфред экономит громадное количество времени: 1 секунда тут, 10 секунд там и вот уже за день набегает 2 часа экономии.

Автоматизировать работу просто:

1. Установите Альфреда
2. Купите Powerpack за £19
3. Скачайте Workflows на форуме
4. Запомните правило

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

Библиотека Тринити-колледжа в Дублине.

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

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

• прочитанные книг
• книги, которые хочу прочитать
• просмотренные фильмы
• фильмы, которые хочу посмотреть
• альбомы/исполнители, которые надо послушать
• блюда, которые хочу научиться готовить
• статьи, которые нужно запомнить и перечитывать
• вещи, которые хочу в подарок
• что-то, что нужно погуглить (почему, когда на улице +30, мне жарко, ведь температура тела +36,6?)
• дела на день
• крупные покупки на месяц (планирую бюджет)
• сделать когда-нибудь
• идеи проектов
• идеи для реализации в компании
• идеи постов в блог
• вещи, которые взять в командировку
• что посмотреть в путешествии
• что взять в путешествие
• +∞

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

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

Кинопоиск

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

Goodreads

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

Жду, что когда-то появится аналогичный сервис для музыки.

Pocket

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

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

Можно ставить теги. Удобно создавать списки для чтения и хранения статьей.

Clear

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

Дела, покупки, идеи, хотели отправляются сюда.

Можно ставить будильник и напоминание. Поэтому, если вечером нужно купить лампочки, напоминание спасет.

Evernote

В Эверноте люблю планировать события — поездки, свадьбу. Удобно, что можно создать отдельные блокноты по темам. К блокноту можно подключить любого человека. Это как создать общую папку в Гугл-диске.

Так мы с женой вместе готовимся к отпуску: она пишет заметки, я пишу заметки. Оба можем заметки видеть и редактировать.

Redmine

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

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

При любой возможности заводи список

Делитесь своими инструментами для ведения списков.