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

Позднее Ctrl + ↑

«Билборд Малевича». Как я придумывала наружную рекламу

Для студентов второй ступени Школы редакторов Максим Ильяхов объявил конкурс. Расскажу о том, как я делала свою работу.

Условия конкурса

3 февраля 2020 года в художественной галерее им. Аси Челован открывается выставка о русском авангарде в изобразительном искусстве. Будут выставлены репродукции Малевича, Кандинского, Татлина и других художников. Будут картины, чертежи, плакаты. Выставка по-нормальному объяснит гостям, в чем крутость «Черного квадрата» и всего прочего абстракционизма и супрематизма. Исторический контекст, народные настроения, революция и всё такое.

Для рекламы выставки бюро закупает в Москве 300 билбордов размером 6 × 3 метра. Билборды будут приглашать на выставку.

Место: Большая Новодмитровская, 36, культурный центр «Куб»
Время: 12:00—22:00, пн—пт
Даты: 3—14 февраля
Билеты и запись на экскурсии: chelovan.ru

Задача

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

Рассуждения

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

Особенности верстки. По условиям билборды будут установлены на оживленных улицах города. Средняя скорость движения автомобиля по городу примерно 60-70 км/ч. Значит, у пассажира есть всего несколько секунд, чтобы рассмотреть и прочитать информацию, а у водителя и того меньше потому, что ему нужно следить за дорогой.

Примерно так водитель видит среднестатистический билборд. Если текста много и нет контраста, прочитать что-то непросто

Из этого следует, что на билборде не стоит:

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

Мне нужно сделать простое сообщение о том, что это за выставка. И придумать простой визуальный образ, который создаст настроение и не будет отвлекать от текста.

Расположение. Не все места одинаково удачны для установки билборда. Во время движения водитель обычно смотрит на дорогу и не отвлекается на всякую ерунду. Соответственно, мне нужно:

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

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

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

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

Ход работы

Изначально я представляла билборд примерно таким:

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

Я долго двигала, меняла и перекрашивала элементы и в итоге пришла к такому варианту:

Результат меня устроил. Человек стоит в углу и становится якорным объектом. Листочек занимает свободное место, поэтому в макете нет дыр. Разделение на две части макета и цветовое выделение позволяет создать связь между словами, чтобы показать — вся информация на сайте. Ну и кажущаяся строгость формы за счет линеек. В общем, я довольна.

И тут я поместила макет на мокап. Сразу видна проблема:

Издалека мой красивый листик кажется странным пятном. Невольно думаешь: это так задумано или баннер грязный? Уберем листик:

Мужик становится чужеродным элементом. Почистим:

Немного скучновато, но ничего не мешает читать. Оставляем.

По условиям конкурса в городе будет установлено 300 билбордов. Есть шанс, что человек увидит несколько наших билбордов. Поэтому делаю несколько макетов в разными слоганами. В них играем на разных чувствах:

  • Социальное — подчеркиваем влияние авангардистов на все искусство.
  • Прагматика — обещаем ответ на главный вопрос «И почему эта мазня так дорого стоит»?
  • Эмоция — вызываем интерес и любопытство с помощью провокационных вопросов вроде «Умел ли Малевич рисовать».

В результате у меня получилась серия из 4 билбордов:

Результат

Задачей было разжечь интерес читателя к выставке — достаточный, чтобы захотелось зайти на сайт. Максим Ильяхов оценивал решение этой задачи по 5 критериям:

  • Полезное действие выставки. Почему человек захочет на нее попасть? Каково число людей, которые захотят попасть, исходя из выбранного вами полезного действия? В ответ на какой стимул мы соберем больше людей — на стимул «деньги» или на стимул «стать более культурным»? Чем более попсовый и массовый мотив вы использовали в подаче рассылки, тем лучше.
  • Ясность. Нужно ли расшифровывать плакат? Есть ли там ребусы, мелкие элементы, нужно ли в него вглядываться? Так как это биллборд, лучше, когда всё ясно и читается издалека. Адрес сайта должен быть большим и мощным.
  • Использование формата. Биллборд висит в городской среде, вокруг что-то происходит. Биллбордов может быть несколько, это может быть серия. Используете ли вы эти возможности, чтобы лучше решить задачу? Серия биллбордов лучше, чем один. В идеале — чтобы биллборд как-то взаимодействовал со средой (этого не было ни у кого).
  • Красота. Красивое лучше некрасивого. Так как мы работаем с картинами, полезно было использовать их красоту на пользу. Если есть красивый супрематизм, его нужно было использовать как элемент дизайна плаката.
  • Шок-фактор. Иногда можно нарушить все правила и сделать просто полную дурь, и это запомнится и сработает.

Я считаю, что неплохо справилась с задачей:

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

Школа редакторов, первая ступень

Прошло уже две недели, как я учусь на второй ступени Школы редакторов, и я наконец собралась с духом, чтобы рассказать о первой. Она длилась четыре месяца. За это время я прочитала тонны лекций и советов, выполнила 14 заданий, сдала 40 тестов и сделала курсовую работу. Об этом и расскажу в этой заметке.

Сразу отмечу: информации о школе много и без меня. Я не буду стараться открыть Америку. Хочу просто рассказать, как это было у нас, что понравилось, а что не очень.

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

Вступительное задание

Чтобы поступить в школу, нужно было сделать одно из трех заданий: сверстать плакат, сверстать главную страницу сайта своего города или собрать статью по истории. Каждый год задание разное.

Я делала вступительное без подготовительных курсов, поэтому получила 4,08 баллов и оказалась на 24 месте в рейтинге. О процессе работы над плакатом я уже рассказывала.

Учеба

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

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

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

Тесты

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

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

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

Задания

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

Ниже расскажу про задания по отдельным предметам.

Управление и результаты

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

Моя осьминожка. Она сильно отличается от той, что я нарисовала за 9 месяцев до этого: во-первых, стала оценивать себя иначе, а во-вторых, рисовала ее сама в Иллюстраторе, а не пользовалась сервисом. Кстати, Иллюстратор я открыла первый раз :)

Текст и редактура

Задания по редактуре были самыми полезными и интересными. Мы искали стоп-слова, редактировали тексты, верстали статью, делали текст для промостраницы.

Задание на параллельное изложение. Нужно было выбрать одну из статей и подготовить ее к печати: отредактировать текст, подобрать иллюстрации и сверстать так, чтобы можно было читать «по диагонали».

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

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

У меня получилась такая промостраница. Верстала в редимаге, на больших разрешениях немного «едет»

Верстка и прототипирование

Мы делали два задания: верстали свое резюме и портфолио. Резюме можно было сверстать на любом конструкторе, а портфолио только в html. Я и то, и другое верстала на Bootstrap.

Интерфейс и информация

Было три задания: мы улучшали формы, таблицы и графики.

Задание на формы. Слева — исходный вариант, справа — то, что у меня получилось. Рисовала в Фигме

Переговоры и отношения

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

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

Курсовая работа

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

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

За курсовую я получила 355 баллов из 500 (самый высокий балл — 465, самый низкий — 245). Убедилась, что теория без практики мертва: старалась применять все изученные принципы, но все равно сделала не так хорошо, как хотелось.

Оценки за мою курсовую работу

Рейтинг

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

Я начала на 24 месте, долго плавала между 17 и 20, а закончила на 29 месте и прошла на вторую ступень.

Мой рейтинг на первой ступени. График с сайта «Кто студент»

Идти или не идти в школу

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

Польза учебы очевидна:

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

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

Школа для тех, кто хочет учиться. И я продолжу на второй ступени :-)

«План победы» на 2020 год

2019 • 2020

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

В целом мне оказалось сложно идти по плану, потому что все время попадается что-то новое и интересное. Прописать все на год вперед сложно, ведь я не могу предсказать, как изменится моя жизнь. Но от самой идеи планов и целей я пока не готова отказаться. Так что попробуем еще раз)

Рабочие цели

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

Управление проектом

— Изучить курс Ирины Усиченко о найме авторов и управлении редакцией
— Изучить «Курс молодого бойца для маркетолога»
— Составить редполитику для своей команды
— Прочитать «Дизайн-мышление в бизнесе. От разработки новых продуктов до проектирования бизнес-моделей» Тима Брауна
— Прочитать «Сделай это завтра» Марка Фроста
— Прочитать «Scrum. Революционный метод управления проектами» Дженни Дули
— Систематизировать и отладить редакционный процесс

Создание продуктов

— Закончить вторую ступень Школы редакторов
— Освежить простого и продвинутого Главреда
— Найти и изучить курс по Adobe Illustrator
— Посмотреть «Введение в продуктовую работу» Школы дизайна Яндекса
— Прочитать «Новую Типографику» Ян Чихольда
— Прочитать «Совершенный код» Стив Макконнелла
— Прочитать «Психологию влияния» Роберта Чалдини
— Прочитать «Живую типографику» Александры Корольковой

Личный бренд (что бы это ни значило)

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

Личные цели

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

Саморазвитие

— Заниматься английским
— Начать рисовать акварелью
— Научиться жить по графику и перестать «задерживаться на работе»

Финансы

— Ежемесячно откладывать деньги
— Постоянно вести учет доходов и расходов
— Увеличить доход на 15-25%

Здоровье

— Ежедневно делать зарядку
— Наладить питание
— Часто гулять

Чек-лист для редактора

Недавно в Школе редакторов опубликовали оценки за курсовую. В комментарии к моей работе Максим Ильяхов написал, что я нарушила некоторые принципы из чек-листа редактора.

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

Проект: страница Лаборатории поисковой аналитики

У нас в «Ашманов и партнеры» есть много крутых собственных технологий. На рынке таких больше нет, и это наше преимущество. Например, есть Лаборатория поисковой аналитики. Она помогает давать рекомендации, основанные на научном подходе к продвижению. Это круто, но никому непонятно, как она работает. Откуда берутся данные? В чем польза для клиента? Нужно об этом рассказать.

На сайте была страница, посвященная Лаборатории. Но она шаблонная и скучная.

Исходная версия страницы

Мы решили сделать редизайн, рассказать о всех направлениях работы, сделать страницу визуально привлекательнее и дать «пощупать» результаты.

Что такое Лаборатория

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

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

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

Гарантий Лаборатория не дает: наличие статистически значимой связи между значением параметра и попаданием в топ или позицией еще не означает, что Яндекс или Google прямо учитывает данный параметр при ранжировании. Но полученные данные позволяют понять, в каком направлении двигаться.

Страница — для маркетологов и SEO-оптимизаторов

Этой страницей мы хотели решить три задачи:

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

Моя задача — подготовить контент и вести проект

Я в «Ашманов и партнеры» занималась сайтом: писала тексты, создавала страницы, ставила задачи на дизайн и разработку. В этот раз все было так:

  1. Я продумала структуру страницы. Для этого собрала всю информацию: изучила отчеты и опубликованные интервью, побеседовала со специалистами Лаборатории, плзнакомилась с интерфейсом. Потом собрала из этого черновик и согласовала: в первую очередь с руководителем Лаборатории, а с нашей стороны — с исполнительным директором.
  2. Поставила задачу на прототип. Мы хотели, чтобы страница выделялась на общем фоне и имела интерактивные элементы, но при этом оставалась в рамках фирменного стиля. Я не специалист по интерфейсам, поэтому обратилась к профессионалам. В процессе обсуждения скорректировала первоначальную структуру.
  3. Поставила задачи на дизайн и верстку. Следила, чтобы все было правильно: дизайн соответствовал логике текста, верстка была точно по отрисованному макету, во всех браузерах страница отображалась верно и не было ошибок. Когда макеты готовы, показала их руководителю Лаборатории.
  4. Подготовила ТЗ на разработку. Чтобы удобно было размещать контент, а некоторые блоки использовать на страницах других технологий, нужно продумать компоненты и решить, что добавлять в шаблон, а что делать статикой. Потом окончательно проверить, что все работает, как запланировано.
  5. Написала окончательный текст и подобрала иллюстрации. Заполнила весь контент на тестовом домене и окончательно согласовала. Проверила страницу на боевом сайте.

Собираю информацию

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

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

Введение к отчету за 2018 год

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

Уже несколько лет Лаборатория делает бесплатные аудиты сайтов для участников конференции Optimization. Они автоматические: специалисты загружают в систему запросы и страницы сайта, а получают документ с рекомендациями. Результаты обсуждают на мастер-классе. Оказалось, что такой же документ генерируют оптимизаторы, когда работают с сайтами клиентов. Я попросила несколько примеров, чтобы их изучить.

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

Интерфейс внутреннего сервиса, актуальный на февраль 2019 года

Так я узнала, что внутренний сервис экономит оптимизаторам много времени:

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

На самом деле, всю эту работу можно сделать и без Лаборатории. Но этим придется заниматься вручную, а это долго и ненадежно — человек всегда может что-то пропустить.

Готовлю структуру страницы

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

  • описание работы сервиса (как работает Лаборатория) и главный вывод, зачем это все нужно
  • описание направлений работы — исследования, аналитика для оптимизатора, отчеты для клиента, задания для копирайтеров. В каждом блоке объяснение, иллюстрация и практическое применение со ссылкой на другой раздел сайта.
  • факты о Лаборатории — как давно существует, сколько параметров отслеживает. Ссылка на интервью с основателем.
  • рейтинг самых главных параметров для поисковых систем, основанный на данных из последнего отчета. На каждый параметр можно кликнуть и узнать подробности. Польза и элемент интерактивности :)
  • все отчеты Лаборатории, которые можно скачать за подписку на рассылку.

Такая структура легла в основу прототипа.

В процессе работы над дизайном мы внесли изменения:

  • полезное действие технологии вынесли на самое заметное место — под заголовком.
  • по просьбе Михаила в блок «Что мы делаем» добавили информацию о сервисах: на данных Лаборатории основаны «Тургенев» и AnalyzeThis.ru.
  • добавили FAQ. Текст этого блока взят из отчета «Факторы ранжирования — 2019. Финансы».

Что дальше

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

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

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

Готовая страница, актуальная на август 2019 года

Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»

Джеф Раскин известен как специалист по компьютерным интерфейсам и инициатор проекта 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. Изменить отношение к ошибкам.

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

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

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

Они бывают:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решения:

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

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

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

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

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

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

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

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

Как я пишу и редактирую кейсы

Пришлось мне недавно общаться с коллегами из Mindbox. И вот они спрашивают: «А как ты с клиентом общаешься, когда кейсы компании пишешь?». А я такая: «Никак. Мы не привлекаем клиента к подготовке кейса». Сейчас раскрою наш редакторский процесс на примере одного текста.

Начинается все с того, что менеджер проекта описывает все своими словами и приносит мне черновик. Я уже докручиваю материал.

Слайд из презентации с кейсом по контекстной рекламе для магазина «Сантехника № 1»

Нахожу тему

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

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

В лиде так и пишем: «Рассказываем, как с помощью „умных“ кампаний мы за три месяца снизили стоимость клика в 3,3 раза в условиях перегретого аукциона».

Строю историю

Любой кейс — это история. Чтобы ее было интересно читать, нужен построенный сюжет. У хорошей истории несколько этапов: событие, план А, план Б, финальная битва — вот это все.

Я пока не научилась использовать в кейсах законы драмы, поэтому придерживаюсь простой структуры:

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

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

Говорим о проблеме: «На этом рынке сильная конкуренция со стороны крупных и мелких игроков. Из-за этого по популярным товарам аукцион „перегретый“ — стоимость клика часто превышает 100 рублей. Каждое обращение получается дорогим даже при хорошей конверсии».

Менеджер дал информацию по двум инструментам: динамические объявления в Яндекс.Директе и Google Smart Shopping. Но использовать именно Smart-кампании начали не сразу. Встраиваем это в общую логику. Теперь у нас есть три инструмента, один из которых не подошел. Читать уже интереснее, а пользы от статьи больше.

Допиливаю буквы

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

Добавляю факты

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

О выручке мы говорить не можем — NDA, а остальные цифры указали. Результаты представили в табличке, чтобы их не надо было искать по тексту.

Добавляю личность

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

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

Оформляю публикацию

В конце добавляем иллюстрации: пояснения-пояснениями, а проще один раз увидеть.

В итоге получился такой кейс.

В драку главное ввязаться

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

В школьные годы считается нормальным пробовать все. А когда ты выходишь на рынок как специалист, почему-то все твердят, что нужно выбрать путь и развиваться в этом направлении. Страх ошибиться теперь сильнее, потому что ставки выше: от твоей работы зависят другие процессы. Но это неправильно. Я уже рассказывала про осьминожку навыков: я не хочу, чтобы у моей осьминожки было 2—4 толстых щупальца — пусть будет десяток разного размера.

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

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

  • Созданием страниц у нас всегда занимался программист, сотрудники отдела маркетинга не трогали код. Но он один, а хотелок много, поэтому процесс был слишком долгим ⇒ я разбираюсь в PHP-шаблонах и учусь делать страницы в Битриксе сама. Теперь рулю всем сайтом.
  • Раньше у нас рассылки делал верстальщик. Но перед Optimization 2018 он был очень загружен, а мне нужно подготовить три рассылки ⇒ я открываю его верстку и делаю такое же письмо под свои задачи. В этом году мне уже не страшно было сделать шаблоны для всех писем с сайта.
  • Клиент хочет текст для лендинга, но простыню текста воспринимать сложно ⇒ я открываю Figma и набрасываю на коленке прототип.
Веду трансляцию конференции «eTarget. Медицина»: управляю четырьмя камерами, модерирую трансляцию в Facebook, переключаю слайды. Пульты и нужный интерфейс видела в первый раз в жизни.

Так к 25 годам я поняла, что могу практически все. Согласна, звучит самонадеянно. Кажется, что девочка-филолог не построит самолет, но нельзя знать наверняка, пока не попробуешь.

Бери и делай

Плакат о правах жильцов. Вступительное в Школу редакторов

Хочу поступить в Школу редакторов Бюро Горбунова. Редактор в понимании бюро — капитан корабля. Его работа — не текстики, а информационные продукты, которые меняют сознание людей. В распоряжении редактора слова, картинки и все шрифты мира. Я хочу научиться управлять всем этим добром.

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

Оценивать работу будут по 4 критериям:

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

Изучила матчасть

Плакат как жанр имеет свои особенности. Рекомендации искала в Советах Бюро и блоге Максима Ильяхова.

В телеграм-канале «Визуальное повествование» (@ilyahov_smotrit) Максим рассказывает, что должен делать хороший плакат:

  1. Говорить о его владельце: «Владелец классный, он в теме, он молодец». Задача «показать, что я классный» хорошо решается плакатами в менторском тоне. Типа «Как правильно верстать».
  2. Запоминаться и привлекать внимание издалека.
  3. Быть либо очень запоминающимся (образно, текстом), либо очень полезным. А лучше и то, и другое одновременно.

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

  1. Где висит плакат? Какие люди его видят?
  2. Кто его туда повесит и почему?
  3. Что в этот момент они делают?
  4. Чего мы от них хотим? Что они должны сделать?

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

Еще я смотрела видео с разбором вступительных заданий прошлых лет. Выделила для себя несколько принципов:

  • Делать вертикальным. Удачных горизонтальных решений пока не встречалось, оставьте этот формат для объявлений и стенгазет.
  • Выбирать простые посылы. Не пытайтесь охватить много тем и засунуть в плакат все знания. Лучше ясно рассказать об одной небольшой проблеме, чем разместить 100500 правил, и никто это не прочитает.
  • Использовать мало цветов. Пестрота мешает восприятию. Делайте плакат контрастным, выбирайте несколько красок и используйте цвет для связей между элементами.
  • Хорошо работаю серии. Лучше сделать несколько плакатов с максимально простой идеей, чем один сложный.

Посмотрела готовые решения

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

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

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

Сделали заголовок заметным. Упростили структуру. Нет смысла делать таблицы — их нужно расшифровывать. Не бойтесь писать просто текст
Плакат был сделан по принципу бутерброда. Таблица в середине давала дыры в верстке. Убрали лишние слои и упростили структуру
Заголовок намекает, что в магазине бывает некачественный товар — кто повесит такой плакат? Блоки схемы разного размера, поэтому кажутся неравнозначными. Много мелкого текста — сложно читать. Цвет бессмысленный. Упростили, заменили заголовок. Добавили яркий фон и рамку
Вступительное с лучшими баллами — серия плакатов. Но и их можно улучшить. Облегчили шапку: логотип убрали совсем, фактоид и контакты переместили. Здорово, что цвет фактида и маечки совпадает — усилили его рамкой
Удачные варианты

Придумала свое решение

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

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

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

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

Итак, нужен простой плакат с полезной информацией для жильцов и яркой иллюстрацией. Не обижаем УК.

Сначала я хотела рассказать о поломках в доме: кто поможет решить проблему и как быстро. Схематично идея такая:

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

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

И тут пришло решение. На самом деле, что делать в общем-то все знают: позвонить в УК, чтобы перекрыли стояк; по возможности собирать воду в емкости; идти к соседям сверху; составить акт. Проблемы начинаются потом, когда вода больше не течет, а ты видишь последствия. Пострадавшего волнует главный вопрос: кто оплатит ремонт? Об этом и расскажу в плакате.

Спойлер: виноваты могут быть не только соседи сверху, но и УК. Ответственность возлагается в равной степени. Плакат никого не обижает: нормально делай — нормально будет.

Приступила к верстке

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

Верстала плакат в Adobe InDesign. Никогда до этого с ним не сталкивалась, поэтому отправной точкой стал вебинар Максима Ильяхова. Советую начинающим редакторам — без него было бы сложно понять общие принципы. Детали и тонкости уже гуглила. Я думала, будет сложнее :)

Текст писала сразу в InDesign. Так проще представлять итоговый вариант — видно, где убрать текст, а где добавить. Эту идею тоже украла у Ильяхова.

Иллюстрацию рисовала сама на бумаге, потом сканировала и раскрашивала уже в Photoshop. С ним пришлось помучиться, но в целом я довольна.

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

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

Фрагмент переписки. Правлю, правлю, правлю)

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

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

Слева — первый вариант, который я показала другу. Справа — итоговая версия, ее я отправила в Бюро

Проверила плакат в деле

По условиям задания, нужно повесить плакат в подъезде и прислать фотографию. Вечером пошли с мужем на дело :)

Вешаем плакат. Муж просит поторопиться с фоточками

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

Убедились — плакат читаемый

Дождалась результатов

Вечером четверга 30 мая я отправила заявку. Ее рассматривают в течение трех рабочих дней. Но уже в воскресенье 2 мая я получила письмо счастья.

Заветное «Да»

Теперь остается три месяца ждать объявления результатов. Интересно, какое место в рейтинге?

***

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

Баллы за вступительное задание

На первой неделе учебы Максим Ильяхов провел разбор вступительных заданий. Краткие выводы по моему плакату:

  • + Рамка. Это простой способ выделить плакат на фоне объявлений в подъезде и сделать его цельным.
  • + Иллюстрация. Она отлично работает на привлечение внимания (правда визуально Максиму не очень нравится, но это уже дело вкуса).
  • Плакат чисто информационный. Не хватает информации о том, куда звонить и что делать.
  • Логика. Нужно идти от проблемы: у меня прорвало трубу в квартире, значит оплатят соседи. А у меня наоборот: соседи оплатят ремонт, если прорвало трубу в квартире. Поэтому лучше переделать плакат так, чтобы заголовки стали выводами.

Следующая цель — не вылететь из тридцатки))

Ранее Ctrl + ↓