Владимир Завертайлов

Рисованные элементы
в веб-дизайне
(перевод + наши кейсы)


Автор статьи — Сабина Айдлер, коммьюнити- и контент-менеджер, а также юзабилити-специалист. Работает в Usabilla. Живет в Амстердаме.

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

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

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

Самобытность и аутентичность

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

Внешний вид и настроение

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

Интерфейс инструмента для прототипирования макетов Balsamiq.

Узнаваемость

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

Логотип Notepad++ своеобразен и легко запоминается.

Индивидуальность

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

Доска MathBoard (приложение для iPad) выглядит индивидуально и ей просто пользоваться.

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

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

Объяснение особенностей

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

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

Визуализация рабочих процессов

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

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

Руководства для пользователей

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

Презентация команды

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

Вызывайте симпатию

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

Вызывайте доверие

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

Будьте реальными

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

Сторителлинг

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

Развлечение

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

Пример из нашей практики: даже в такой, казалось бы, «серьезной» тематике, как кредитование, можно найти место рисункам.

Объяснение

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

Иллюстрации с сайта signnow.com

Вовлечение

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

«Привлекатели внимания»

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

С помощью вручную нарисованных элементов можно приглашать пользователя совершить действие:

Дразнить его любопытство:

Указывать на важные детали:

Не перестарайтесь

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

Заключение

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

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


 

Что еще почитать по этой теме

Ланч-тайм 113: краткий перевод свежих статей о digital
19 Августа 2016
В номере: как сделать ориентированный на человека дизайн, повысить продуктивность в компании и не перебыковать при сборе лидов.
Mobile First: причём тут котики?
18 Августа 2016
Выясняем, в чём преимущества и недостатки подхода Mobile First, чем он лучше адаптивного дизайна и как связан с котами и слонами.
Ланч-тайм 112: краткий перевод свежих статей о digital
12 Августа 2016
В номере: улучшаем навыки слушания, ищем вдохновение в печатной продукции и выясняем, почему истории в Инстаграме лучше, чем в Снэпчате.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

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