Войти в систему
Войти с помощью соц. сетей:
Используйте модальные окна только в тех случаях, когда они действительно необходимы. Например, когда вам нужно сообщить важную информацию или потребовать определенное действие. Во многих других случаях, чтобы сообщить какую-либо информацию, будет достаточно всплывающей подсказки.
Дайте возможность закрыть модальное окно любым удобным способом:
• нажав на иконку крестика в правом углу окна;
• кликнув вне модального окна;
• клавишей «Esc»;
• кнопкой «Отменить».
Но если в модальном окне вводится важная информация, то случайный клик может привести к потере данных. Поэтому в данном случае лучше закрывать окно по нажатию на иконку крестика или кнопку «Отменить».
Для создания больших сущностей (проектов, заказов) используйте отдельную страницу. Небольшие же можно создать в модальном окне, не вырывая пользователя из контекста использования сервиса.
Старайтесь избегать наложения одних модальных окон на другие.
Ссылка используется для перехода на другие страницы и представляет собой текст с подчеркиванием или закрашенный определенным цветом, чаще всего синим. При наведении ссылку лучше подчеркнуть.
Если ссылка ведет ко второстепенной информации, то открывайте страницу в новом окне. Если же она продолжает сценарий пользователя, то открывайте новую страницу в текущем. Представим, что вы читаете резюме кандидата, в котором указана ссылка на портфолио. Ее лучше открывать в новом окне, так как портфолио будет справочной информацией, а не продолжением сценария.
Избегайте коротких названий, так как на такую ссылку будет трудно нажать.
По дизайну написаны тысячи статей и записано столько же вебинаров, но начинающих специалистов год за годом заботит один и тот же резонный вопрос: «Так что же мне конкретно делать?»
В этой главе мы на реальном примере рассмотрим, какие действия нужно совершать для создания простого дизайн-проекта, нацеленного на решение задач бизнеса. В качестве примера я выберу транспортную сферу, а точнее – сайт сервиса по заказу такси премиум-класса.
Вариаций возможных дизайн-процессов в интернете много, поэтому я остановлюсь на классическом варианте, который мы обсуждали ранее:
1. Погружение в задачу.
2. Исследование и анализ конкурентов.
3. Продумывание сценариев.
4. Создание фреймворка.
5. Поиск визуального стиля.
6. Дизайн-макет.
Прежде чем приступить, хочу напомнить, что дизайн-процесс – не строгая последовательность действий. Вполне возможно, вам придется несколько раз возвращаться на предыдущие этапы, а может, некоторые и вовсе перемешаются друг с другом.
Ориентируйтесь на описанный процесс, но не будьте его заложником.
Первое, что нужно сделать, – разобраться, каким образом бизнес клиента зарабатывает деньги. Например, такси зарабатывает на комиссии с каждой перевозки, поэтому дизайн должен подводить пользователя к созданию заказа. Мне сразу же пришла идея повесить на первый экран сайта форму заказа такси. Cайт будет не только информационным порталом, но и полноценным сервисом.
Как только вы решите разобраться в бизнесе заказчика, в голову начнут приходить идеи. Сразу же фиксируйте их, иначе забудете. При продумывании структуры сайта они вам сильно пригодятся. В текущем проекте мы используем единую базу знаний Confluence. Для небольших проектов я бы выбрал Apple Notes или что-то подобное.
Но подождите. Часто ли мы заказываем такси с сайта? Быть может, лучше акцентировать внимание не на онлайн-заказе такси, а на скачивании приложения? Хм, хороший вопрос. Давайте-ка занесем наши идеи в заметки и продолжим исследование.
Лучший способ разобраться в бизнесе – обратиться к заказчику. Помимо того что вы сэкономите уйму времени, вам удастся вовлечь клиента в процесс работы, показав, что полученный результат – это не итог сиюминутного вдохновения, а комбинация правильно подобранного визуального стиля и бизнес-логики.
Итог. Вы должны четко понимать, каким образом зарабатывает бизнес заказчика и к какому ключевому действию нужно подвести пользователя. В нашем случае задача – убедить посетителя сайта скачать приложение.
Этот этап проще всего начать с изучения конкурентов, а после – подключить к нему схожие по механике сервисы.
Давайте подумаем, какова последовательность заказа такси. Во-первых, у нас есть человек, который хочет переместиться из одного места в другое. Во-вторых, есть водитель, который готов выполнить это задание. У каких сервисов похожая логика работы? Мне приходит в голову Airbnb, где один человек хочет арендовать жилье, а другой готов его сдать, или фрилансерские ресурсы, например Upwork, где заказчику нужно выполнить какую-либо работу – и он ищет исполнителя. Конечно же, нужно изучить сайты прямых конкурентов: Gett, «Яндекс. Такси», «Ситимобил», InDriver и Wheely. Просматривая их, старайтесь отмечать схожие и различающиеся детали. Например, Wheely с ходу предлагает скачать приложение, отправив на номер телефона SMS, а «Яндекс. Такси» – сделать заказ прямо с сайта.
Есть еще одна деталь, с которой я сталкивался не на одном проекте. Как мы говорили, у нас есть два типа пользователей: пассажир и водитель. Для обеих ролей нужна отдельная страница, так как привлекать их будут по разным каналам. Кому же в этом случае отдать главную страницу? А может быть, стоит сделать одну разводящую? Почти все компании со схожей механикой отводят главную страницу под тех пользователей, которые платят деньги. У Airbnb главная предназначена для путешественников, а страница владельцев жилья спрятана в меню (деньги сервису платят постояльцы). Компания по уборке Qlean, Wheely, Upwork и многие другие сервисы используют ту же стратегию, поэтому и в нашем проекте я бы остановился на ней, то есть главную страницу отвел бы под пассажиров, а в меню добавил страницу «Стать водителем».
На этом этапе я бы начал изучать, какие сущности используют сайты конкурентов, – чтобы в конце исследования выбрать лучшую структуру, которая подходит вашему типу бизнеса. Вот сущности с сайта популярного сервиса заказа такси премиум-класса: «ссылка на приложение», «о водителях», «об автомобилях», «страховка», «ссылка на приложение», «отзывы». Проанализировав таким образом несколько сайтов, вы начнете лучше разбираться в сфере заказчика и подбирать сущности, подходящие вашему проекту. Например, рассказ о новых машинах больше соответствует премиальному сегменту, тогда как сервисам, предлагающим экономкласс, лучше промолчать про качество автомобилей и сделать акцент на выгодной цене. В такси бизнес-класса цена не столь важна, поэтому ее не стоит показывать открыто. Представьте, как странно будет смотреться преимущество «выгодная цена», если сервисом пользуются миллионеры.
Итог. Вы проанализировали более пяти схожих сервисов и выписали, какие сущности используют конкуренты. В идеале хорошо бы пройтись по ключевому сценарию в каждом сервисе, чтобы отделить наиболее рабочие идеи от тех, которые могут вызвать затруднение.
Дизайнер должен думать в рамках сценариев, а не экранов. Не важно, сколько у вас экранов, – важно лишь то, насколько удобно пользователю решать свои задачи при помощи вашего сервиса. Чисто логически кажется, будто удобнее всё делать в рамках одного экрана, но дизайнеры знают, что длинные формы лучше разбивать на несколько шагов. В дизайне нет фундаментальных правил, всё всегда зависит от задачи.
В своей практике я использую Customer Journey Map для продумывания сценариев. Суть его работы я уже описывал в предыдущих главах.
В нашем случае сценарий будет небольшой (сайт → приложение), но даже здесь у пользователя могут возникнуть проблемы. Например, он может не проявить доверия к сервису (добавить отзывы, гарантию?) или сайт не будет выглядеть премиальным (изменить визуальный стиль?), не придет код SMS (сделать повторную отправку, добавить онлайн-поддержку?)…
Итог. Вы должны понимать, какие проблемы могут возникнуть на пути пользователя, и придумать несколько вариантов решений, которые позволят их избежать.
Как мы уже обсуждали, фреймворк – это структура, вокруг которой строятся элементы интерфейса. Например, в почтовом сервисе Gmail есть верхняя строка поиска, левое меню и правая часть, отданная под письма.
Дизайнеры существуют потому, что нет универсального фреймворка. Каждому сервису нужен свой. Конечно, есть верхнеуровневые принципы дизайна (о которых мы поговорим в третьей части книги), однако, если вы чуть углубитесь, будет необходимо придумывать свои решения, иначе пользователь станет решать свои задачи неоптимальным образом. Это всё равно что крутить педали руками: вроде и двигаешься, но не столь эффективно, как если воспользоваться ногами.
В случае с сайтом фреймворк – это последовательно расположенные блоки, собранные из сущностей, полученных на этапе исследования. Если ваш бизнес уникален, то придется придумывать что-нибудь свое, но, как показывает практика, у большинства компаний есть несколько прямых конкурентов, опыт которых можно перенять.
Что делает посетитель, попадая на сайт? Если сервис ему знаком, то он сразу регистрируется или заходит в аккаунт.
Если же нет, то ему будет интересно изучить главную страницу и убедиться, туда ли он попал. Чтобы пользователь после изучения не потерял форму скачивания приложения, ее лучше продублировать внизу. Давайте вспомним структуру сайта заказа такси премиум-класса: «скачать приложение», «о водителях», «об автомобилях», «страховка», «скачать приложение», «отзывы». Как видите, ключевые действия стоят в начале и конце, чтобы посетитель сайта, просмотрев все блоки, не ушел просто так. Это правило подходит всем.
Основные блоки сайта следует выбирать в зависимости от типа проекта. Сервису заказа такси бизнес-класса необходимо показать статус и отличия от обычных сервисов. Wheely делает это с помощью фотографии водителя в костюме и списка особенностей, например: «встреча с зонтом во время дождя», «учет пожеланий по маршруту и музыке», «встреча в аэропорту с табличкой» и т. д. Если у вас такого нет, можно использовать структуру конкурентов. Допустим, ваш сервис нанимает только водителей-девушек. Это необходимо продемонстрировать, подобрав фотографии и изложив причины, почему водители-девушки – оптимальный вариант (контент обычно предоставляет заказчик).
Подобным сервисам никогда не помешают отзывы известных людей и ссылки на публикации в популярных СМИ. Это повышает доверие, столь важное в эпоху интернета. Наглядности добавит блок со скриншотом приложения и описанием его основных функций. Вряд ли к нему будут сильно приглядываться, но его наличие повысит доверие.
Чтобы определить требуемую структуру сайта, достаточно выписать все сущности, которые используют конкуренты, и отобрать наиболее подходящие вашему бизнесу, слегка трансформировав их под свои задачи.
Когда вы наберетесь опыта в определенной сфере, данный этап не придется каждый раз проходить заново и можно будет использовать наработки, периодически их актуализируя. Именно поэтому дизайнеру и студии выгодно специализироваться в какой-либо области.
Итог. Вы должны понимать, какие сущности (блоки) и в какой последовательности использовать в проекте. Лучше всего зарисовать их на бумаге или прописать в текстовом документе.
Об этом этапе мы уже говорили, а потому повторю лишь ключевую идею:
Визуальный стиль должен соответствовать посылу бренда. Это основной критерий вашей работы. Совершенно не важно, каков стиль: он может быть модным, скучным, футуристичным или любым другим. Важно лишь, чтобы он пробуждал нужные эмоции.
Какие эмоции должен пробуждать сайт сервиса по заказу такси бизнес-класса? Логично, что он должен показывать высокий уровень качества и премиальность услуги. Этого можно добиться несколькими способами.
Во-первых, цвета. Если посмотреть на премиальные бренды, то легко заметить: в основном они используют черный или золотой. Это не догма, тем более что наш главный конкурент – Wheely – уже использует черный. Поэтому, чтобы выделиться, нужно придумать нечто иное: например, добавить дополнительный цвет (золотой, желтый?) или взять красный в качестве основного. Неожиданное решение, но оно может сработать. Так, авиакомпания Virgin Atlantic Airways использует красный, предлагая услуги бизнес-класса.
Во-вторых, изображения. Заходя на сайт Wheely, вы сразу же видите действие – открываются двери черного «мерседеса», сайт сразу вызывает у посетителя нужные эмоции.
В-третьих, инфографика. Порой дизайнеры берут первые попавшиеся иконки, не задумываясь об их визуальном посыле. Посмотрите, какие возможности по кастомизации предлагает Google – вы можете настроить стиль иконок и выбрать наиболее подходящие; также интересные варианты предлагает сайт Flaticon. Основные параметры, с которыми можно поэкспериментировать, – это цвет, заливка или контур, закругленные края и т. п.
В-четвертых, типографика. Шрифт с засечками хорошо подходит для рассказывания историй, поэтому его использует Medium. Для технологической компании он будет неуместным (посмотрите сайты Apple, Microsoft, Amazon).
Итог. Вы должны определить посыл проекта и подобрать под него цвета, стиль изображений, иконки (или обойтись без них) и шрифт.
Когда структура и визуальный стиль определены, можно переходить к дизайну экранов. Тут почти нечего сказать, особенно если речь идет о простом сайте. Вам нужно лишь перенести свои идеи в реальность.
Если вы работаете над большим сервисом, то начинать следует с экрана, входящего в основной сценарий. На нем вы можете отработать стиль, структуру и провести первую презентацию заказчику. В случае с сайтом следует начинать с главной страницы и отработать стиль на ней, а после уже использовать его для остальных страниц.
Обычно первые наброски сайта я делаю от руки, а к графическому редактору перехожу только после того, как определюсь со структурой. Сделав один или два экрана, беру паузу, а после пытаюсь найти недочеты. Таким образом, я продвигаюсь до футера, после чего могу сделать еще несколько итераций по улучшению сайта.
Итог. Дизайн необходимых макетов готов и прошел несколько этапов доработки.
Войти с помощью соц. сетей: