Текст книги "Дизайнер интерфейсов"

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

Текст на кнопках не должен вводить в заблуждение. Например, в форме удаления вместо вариантов «Да» и «Отмена» лучше предложить «Удалить» и «Отмена». Еще несколько примеров: не «Подтвердить», а «Зарегистрироваться», «Войти», «Создать (заказ)», «Оплатить» и т. д.

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

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

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

Кнопки в виде иконки лучше использовать только в том случае, если действие понятно. Например, все знают, что «+» – это «добавить», а мусорная корзина – «удалить».

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

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

Плейсхолдер (подсказка внутри поля формы) в привычных полях не обязателен. Довольно глупо вставлять в поле с заголовком «Имя» плейсхолдер «Иван Иванов» или «Введите ваше имя», так как это очевидно. Но в полях, где могут возникнуть вопросы, не помешает добавить пояснение. Например, если минимальная длина пароля – шесть символов, неплохо бы об этом сообщить. Хороший вариант – использовать плейсхолдер, который плавно становится заголовком.

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

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

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

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

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

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

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

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

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

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

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

И не спрашивайте пароль дважды. Его всегда можно восстановить с помощью почты.

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

Добавляйте «воздуха» между элементами таблицы, иначе ее будет сложно анализировать.

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

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

Не добавляйте в таблицу столбец ID. Чаще всего этот элемент добавляют автоматически на уровне разработки, хотя смысловой нагрузки он не несет (если только это не номер заказа). Многие используют его как ссылку, но почему бы не сделать ссылкой всю строку или первое значение?

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

Цифровые значения в таблице выравнивайте по правому краю, а текстовые по левому. Заголовки выравнивайте соответственно контенту.

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

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

• нажав на иконку крестика в правом углу окна;

• кликнув вне модального окна;

• клавишей «Esc»;

• кнопкой «Отменить».

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

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

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

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

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

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

10. Пошаговый процесс создания сайта

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

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

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

1. Погружение в задачу.

2. Исследование и анализ конкурентов.

3. Продумывание сценариев.

4. Создание фреймворка.

5. Поиск визуального стиля.

6. Дизайн-макет.

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

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

1. Погружение в задачу, или на чем зарабатывает бизнес

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

Как только вы решите разобраться в бизнесе заказчика, в голову начнут приходить идеи. Сразу же фиксируйте их, иначе забудете. При продумывании структуры сайта они вам сильно пригодятся. В текущем проекте мы используем единую базу знаний Confluence. Для небольших проектов я бы выбрал Apple Notes или что-то подобное.

Но подождите. Часто ли мы заказываем такси с сайта? Быть может, лучше акцентировать внимание не на онлайн-заказе такси, а на скачивании приложения? Хм, хороший вопрос. Давайте-ка занесем наши идеи в заметки и продолжим исследование.

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

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

2. Исследование и анализ конкурентов

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

Давайте подумаем, какова последовательность заказа такси. Во-первых, у нас есть человек, который хочет переместиться из одного места в другое. Во-вторых, есть водитель, который готов выполнить это задание. У каких сервисов похожая логика работы? Мне приходит в голову Airbnb, где один человек хочет арендовать жилье, а другой готов его сдать, или фрилансерские ресурсы, например Upwork, где заказчику нужно выполнить какую-либо работу – и он ищет исполнителя. Конечно же, нужно изучить сайты прямых конкурентов: Gett, «Яндекс. Такси», «Ситимобил», InDriver и Wheely. Просматривая их, старайтесь отмечать схожие и различающиеся детали. Например, Wheely с ходу предлагает скачать приложение, отправив на номер телефона SMS, а «Яндекс. Такси» – сделать заказ прямо с сайта.

Есть еще одна деталь, с которой я сталкивался не на одном проекте. Как мы говорили, у нас есть два типа пользователей: пассажир и водитель. Для обеих ролей нужна отдельная страница, так как привлекать их будут по разным каналам. Кому же в этом случае отдать главную страницу? А может быть, стоит сделать одну разводящую? Почти все компании со схожей механикой отводят главную страницу под тех пользователей, которые платят деньги. У Airbnb главная предназначена для путешественников, а страница владельцев жилья спрятана в меню (деньги сервису платят постояльцы). Компания по уборке Qlean, Wheely, Upwork и многие другие сервисы используют ту же стратегию, поэтому и в нашем проекте я бы остановился на ней, то есть главную страницу отвел бы под пассажиров, а в меню добавил страницу «Стать водителем».

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

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

3. Продумывание сценариев или создание

Customer Journey Map

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

В своей практике я использую Customer Journey Map для продумывания сценариев. Суть его работы я уже описывал в предыдущих главах.

В нашем случае сценарий будет небольшой (сайт → приложение), но даже здесь у пользователя могут возникнуть проблемы. Например, он может не проявить доверия к сервису (добавить отзывы, гарантию?) или сайт не будет выглядеть премиальным (изменить визуальный стиль?), не придет код SMS (сделать повторную отправку, добавить онлайн-поддержку?)…

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

4. Создание фреймворка

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

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

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

Что делает посетитель, попадая на сайт? Если сервис ему знаком, то он сразу регистрируется или заходит в аккаунт.

Если же нет, то ему будет интересно изучить главную страницу и убедиться, туда ли он попал. Чтобы пользователь после изучения не потерял форму скачивания приложения, ее лучше продублировать внизу. Давайте вспомним структуру сайта заказа такси премиум-класса: «скачать приложение», «о водителях», «об автомобилях», «страховка», «скачать приложение», «отзывы». Как видите, ключевые действия стоят в начале и конце, чтобы посетитель сайта, просмотрев все блоки, не ушел просто так. Это правило подходит всем.

Основные блоки сайта следует выбирать в зависимости от типа проекта. Сервису заказа такси бизнес-класса необходимо показать статус и отличия от обычных сервисов. Wheely делает это с помощью фотографии водителя в костюме и списка особенностей, например: «встреча с зонтом во время дождя», «учет пожеланий по маршруту и музыке», «встреча в аэропорту с табличкой» и т. д. Если у вас такого нет, можно использовать структуру конкурентов. Допустим, ваш сервис нанимает только водителей-девушек. Это необходимо продемонстрировать, подобрав фотографии и изложив причины, почему водители-девушки – оптимальный вариант (контент обычно предоставляет заказчик).

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

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

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

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

5. Поиск визуального стиля

Об этом этапе мы уже говорили, а потому повторю лишь ключевую идею:

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

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

Во-первых, цвета. Если посмотреть на премиальные бренды, то легко заметить: в основном они используют черный или золотой. Это не догма, тем более что наш главный конкурент – Wheely – уже использует черный. Поэтому, чтобы выделиться, нужно придумать нечто иное: например, добавить дополнительный цвет (золотой, желтый?) или взять красный в качестве основного. Неожиданное решение, но оно может сработать. Так, авиакомпания Virgin Atlantic Airways использует красный, предлагая услуги бизнес-класса.

Во-вторых, изображения. Заходя на сайт Wheely, вы сразу же видите действие – открываются двери черного «мерседеса», сайт сразу вызывает у посетителя нужные эмоции.

В-третьих, инфографика. Порой дизайнеры берут первые попавшиеся иконки, не задумываясь об их визуальном посыле. Посмотрите, какие возможности по кастомизации предлагает Google – вы можете настроить стиль иконок и выбрать наиболее подходящие; также интересные варианты предлагает сайт Flaticon. Основные параметры, с которыми можно поэкспериментировать, – это цвет, заливка или контур, закругленные края и т. п.

В-четвертых, типографика. Шрифт с засечками хорошо подходит для рассказывания историй, поэтому его использует Medium. Для технологической компании он будет неуместным (посмотрите сайты Apple, Microsoft, Amazon).

Итог. Вы должны определить посыл проекта и подобрать под него цвета, стиль изображений, иконки (или обойтись без них) и шрифт.

6. Дизайн-макет

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

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

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

Итог. Дизайн необходимых макетов готов и прошел несколько этапов доработки.