69. Основы композиции

В этом выпуске рассылки Проектората: о формировании единого с клиентом видения, написании коммерческих предложений, кнопке «Наверх», тёмных паттернах, основах композиции, поиске работы дизайнером в Барселоне.

Если чтива окажется мало, в конце — подборка книг о психологии для проектировщиков.

Материалы Проектората

Как сделать так, чтобы и вы, и клиент пришли в результате проектирования к интерфейсу, который оба представляли одинаково: часть 1-я и часть 2-я.

Как писать коммерческие предложения (КП).

Интересные статьи

Хоа Лорангер из Nielsen Norman Group написала о кнопке «Наверх».

На длинных страницах пользователи возвращаются наверх, чтобы:

  • Выбрать в меню новый пункт назначения;
  • Воспользоваться фильтрацией или сортировкой;
  • Изменить запрос в поле поиска.

Операционные системы и браузеры предлагают способы сделать это:

  • Клавиша Home на клавиатуре;
  • Нажатие на строку состояния в iOS;
  • Полоса прокрутки и сочетания клавиш.

Но большинство пользователей может не знать этих способов. Для них на сайты добавляют кнопку «Наверх».

Как добавить «Наверх» и не облажаться:

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

Альтернативы:

  1. Дублирование навигации в нижней части страницы.
  2. Закреплённые меню.
  3. Кнопка Home на социальных сайтах, например, в Твиттере.

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

Тёмный паттерн (dark pattern) — пользовательский интерфейс, который заставляет вас делать то, чего обычно вы бы не сделали. Например, подписаться на рассылку, купить премиум-версию программы вместо пробной.

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

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

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

Опубликован конспект лекции руководителя отдела веб-дизайна «1+1 медиа» Евгения Демченко об основах композиции.

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

Для правильной подачи контента необходимо:

  1. Определиться с контентом.
  2. Выбрать область композиции, её формат.
  3. Учесть окружающую среду (где будет выставлена композиция).
  4. Учесть условия взаимодействия (сколько времени наблюдатель будет коммуницировать с композицией и так далее).
  5. Изучить особенности потребления.
  6. Учесть другие факторы.

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

Упомянуты законы взаимодействия, например:

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

Чтобы наблюдателю было легче заметить и считать якорный объект, нужно дать объекту больше пространства (white space). Это нужно, чтобы облегчить восприятие элементов мозгом наблюдателя. При помощи увеличения или уменьшения белого пространства можно управлять вниманием наблюдателя. Из этого выведено правило «внутреннего и внешнего».

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

Ольга Шаврина опубликовала продолжение рассказа о поисках работы UX-дизайнером в Барселоне.

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

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

Также в статье:

  • Сервис, где можно потренироваться в ответах на вопросы в псевдоинтервью и посмотреть на себя в видеозаписи.
  • Типовые вопросы (стартовые от HR, общие профессиональные, конкретные профессиональные), чтобы подготовить на них осмысленные ответы.
  • Вопросы, которые можно задать представителям компании по темам: strategy and ideas, company and team, customers, my role.
  • Особенности процесса найма в Испании. Процесс очень долгий, за 2 недели и даже 2 месяца, скорее всего, работу не найти.
  • Разница в менталитете: амбициозность и самоуверенность соискателя не считаются плюсом. «Стала меньше спрашивать о карьерной перспективе и больше о планах и целях самой компании. И вообще меньше говорить о том, как я сейчас приду, начну махать шашкой и всё улучшу».

Разница заметна и в том, как мы задаём вопросы. Можно спросить «Почему у вас однотипные кнопки разного размера?». Звучит, как наезд и обвинение в непрофессионализме.

А можно сказать: «Я заметила, что некоторые кнопки крупнее, чем другие. Вы их специально выделяете? Они более важны с точки зрения конверсии?» Звучит так, как будто вы искренне интересуетесь процессом и априори считаете, что люди исходили из разумного решения.

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

Часть 1:

  • «Думай медленно… Решай быстро», Даниэль Канеман;
  • «Как мы принимаем решения», Джона Лерер;
  • «Мозг и душа», Крис Фрит;
  • «Эмоциональный интеллект», Дэниел Гоулман;
  • «100 новых главных принципов дизайна. Как удержать внимание», Сьюзан Вейншенк;
  • «Визуальное восприятие», И. Б. Аббасов;
  • «Nudge. Архитектура выбора», Ричард Талер, Касса Санстейн.

Часть 2:

  • «Тайны нашего мозга, или почему умные люди делают глупости», Сандра Амодт и Сэм Вонг;
  • «Законы влияния», Сьюзан Вейншенк;
  • «Психология. Люди, концепции, эксперименты», Пол Клейман;
  • «Покупатель на крючке», Нир Эяль и Райан Хувер;
  • «50 идей, о которых нужно знать. Мозг человека», Мохеб Костанди;
  • «Теория поля в социальных науках», Курт Левин;
  • «Индустрия счастья», Вильям Дэвис.

Рассылка Проектората × Заметки UX-проектировщика

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