99. Начинающим проектировщикам

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

Одно текстовое поле

Егор Камелев написал историю про проектирование одного текстового поля.

Буллит в списке

Игорь Штанг написал об использовании буллита как маркера в списке.

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

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

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

Если надо использовать буллит:

  1. Искусственно уменьшить кружок в полтора-два раза. Так он не будет жирнить. В некоторых шрифтах символ сам по себе небольшой;
  2. Сделать буллит цветным или серым;
  3. Оставить как есть или даже увеличить, но поддержать другими жирными элементами. Смотрите пример из книги Ласло Мохой-Надя «Живопись. Фотография. Кино», 1927.

Макетирование книги

Никита Вознесенский написал о макетировании книги.

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

Книжное макетирование отличается использованием красивых чисел, т. е. пропорций, которые могут быть рациональными (например, 3:4) и иррациональными (1:1,618).

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

С чем работает дизайнер книги:

  1. Литера — отдельная буква или знак шрифта. Уже в ней есть пропорция — отношение высоты строчных букв к высоте прописных. Зная её и приняв кегль (размер шрифта) основного текста за единицу, можно назначить непроизвольные размеры шрифта дополнительного текста и разных уровней заголовков;
  2. Строка. Надо гармонизировать соотношение белого внутри литер (внутрибуквенные просветы) с белым вокруг литер (межбуквенные пробелы). Здесь сложно говорить об измеримых пропорциях, действовать приходится на глаз;
  3. Полоса. Надо назначить полосе какую-либо пропорцию, а также выбрать пробелы внутри неё: горизонтальные (например, абзацный отступ) и вертикальные (отбивка над и под заголовками);
  4. Страница. Надо установить размеры страницы, а также пробелов вокруг полосы (полей).

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

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

Пользовательское интервью

Мария Росала написала, как правильно работать с пользовательскими интервью.

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

2. Стейкхолдеры могут не знать, чем отличаются разные методы исследования. Из-за этого — не выделять время на интервью в начале проекта и скептически воспринимать инсайты.

  • Объясните выбор этого метода исследования;
  • Дайте поучаствовать в подготовке: расставить приоритеты в вопросах, предложить свои. Вместе проранжируйте вопросы по важности.

3. Без планирования в интервью могут оказаться плохие, наводящие и закрытые вопросы. В лучшем случае это приведёт к поверхностным выводам.

  • Поймите, что вы хотите узнать;
  • Заранее сформулируйте вопросы, чтобы направлять интервью;
  • Подготовьте общие вопросы, чтобы узнать больше о проблемном месте или опыте. Например: «Опишите типичный день, когда…»;
  • Подготовьте наводящие вопросы. Например: «Можете ли вы привести пример?»;
  • Проведите пилотное интервью и исправьте по итогам список вопросов;
  • При планировании встреч с респондентами учитывайте, что интервью выматывает.

4. В отчёте могут оказаться только запоминающиеся идеи и личные предубеждения интервьюера.

  • Делайте аудиозаписи интервью;
  • Переводите аудиозаписи в текст;
  • Просите команду прочитать транскрипты и выделить важные отрывки.

Начинающий проектировщик

Ольга Коновалова написала, что в «СКБ Контуре» ожидают от начинающего проектировщика. К вопросу о том, какие пригодятся софт-скилы.

  1. Умение объяснять свои решения. Вашим коллегам надо понять, почему надо делать именно так, а не иначе. Никто не хочет делать фигню. Чтобы помочь вам, они могут предложить альтернативные решения;
  2. Умение задавать вопросы, слушать и договариваться. Задача не решена, пока все не сошлись на одном решении. Плохо, когда кто-то говорит «я не согласен, но делайте, что хотите»;
  3. Критическое мышление, чтобы докапываться до сути и решать задачи качественнее. Нормально, если вам не нравятся ваши старые решения. Не ленитесь придираться к своим решениям;
  4. Здоровое отношение к критике. Не бойтесь показывать свои работы и не избегайте критики;
  5. Неравнодушие. Если видите что-то неправильное (в интерфейсе, общении, процессе) — скажите и предложите возможное решение;
  6. Самостоятельность, способность сориентироваться, с чего начать, кому задать вопросы по задаче, как построить свою работу;
  7. Способность представить себе алгоритм решения задачи. С этим помогут готовые чеклисты;
  8. Способность найти разные варианты решения одной задачи. Надо понять их плюсы и минусы, выбирать лучшее и отстаивать его.

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в UX Notes ВКонтакте.)

В продукте

Бывший издатель «Медузы» Илья Красильщик рассказал, что понял после перехода в фудтек-проект «Яндекс Лавка».

1. Непонятно, как сделать правильно.

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

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

В магазине без покупателей всё похожее должно быть максимально далеко друг от друга. Сотрудник должен собирать заказ максимально быстро.

2. Хороший продукт не просто работает, а удивляет.

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

Почему время доставки именно 15 минут, а не 30? Потому что это удивляет человека. Причём это максимальное время, а среднее может быть 8 минут.

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

3. Приходится многое перепридумывать.

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

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

Есть нюансы:

  • Если надо взять 5-литровую канистру воды и ещё 10 товаров, маршрут сборщика должен быть таким, чтобы канистру он взял последней;
  • Надо понимать, что на что нельзя ставить, что бытовую химию нельзя класть с продуктами;
  • Важно понимать, что люди покупают чаще, а что реже. Частые товары должны быть ближе к пункту выдачи, чтобы за ними не бегать;
  • В обычных магазинах на кассы кладут шоколадки. В жизни люди их редко покупают, а воду — чаще. Поэтому шоколадки нужно класть в самый конец, а пятилитровки — ближе.

4. Хочется положиться на показатели.

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

Банковские тёмные паттерны

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

Тёмные паттерны и просто плохой дизайн:

  1. Важные условия и ограничения написаны мелко и малоконтрастно, чтобы человек не обратил на них внимания;
  2. Тарифам даны эмоциональные названия. Например, тариф «Успех» (подороже) и «Лоукост» (самый дешёвый);
  3. Некоторые важные условия тарифа есть только в огромном документе со всеми условиями. Например, показаны только лимиты, но не показано, что будет после их превышения;
  4. Сломана привычная логика отображения информации. Например, показаны сначала свойства тарифа, а потом стоимость. Или показаны тарифы слева направо от большей стоимости к меньшей;
  5. Общие формулировки и канцеляризмы;
  6. Все тарифы показаны на отдельных страницах без единой сводной таблицы.

Как делать:

  1. Расположите тарифы по возрастанию цены и предложения;
  2. Выделите приоритетный тариф с помощью дизайна;
  3. Дайте сравнить, но не больше 4 тарифов в таблице;
  4. Называйте тарифы осмысленно, без манипуляций и оценок;
  5. Чётко прописывайте 4 главных критерия: абонентскую плату, количество бесплатных платежей, комиссии за снятие и пополнение наличных, лимиты и комиссии на переводы физлицам;
  6. Давайте ссылку на подробное описание тарифов;
  7. Отдельно выносите скидки, они интересны только продвинутым пользователям;
  8. Прописывайте пункты на языке пользователя: вместо «платежи» — «платежи юрлицам и ИП»;
  9. Расскажите про превышение лимитов;
  10. Дайте посмотреть цены при ежемесячной оплате и оплате за год вперёд.

Рассылка Проектората × UX Notes

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.