Добавляем индивидуальность в дизайн

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

Индивидуальность поможет вашему бренду оставить позади ваших соперников и будет способствовать вашей связи с необузданной аудиторией.
– Аарон Уолтер

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

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

Отличительные черты и оригинальность

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

Наглядность и восприятие

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

Наглядность и восприятие Balsamiq – аутентично и характерно.

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

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

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

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

Редактор исходного кода ,a href=”http://notepad-plus-plus.org/”>Notepad++ имеет характерный нарисованный от руки логотип. Маленький хамелеон не только отражает функциональность программы (изменение кода), но еще и забавен и привлекает внимание. Эскизный стиль также отражает креативную природу того, что вы сможете сделать с помощью редактора Notepad++, и гарантирует то, что вы не перепутаете его с другими инструментами редактирования.

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

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

Mathboard выглядит индивидуальным и простым в использовании.

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

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

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

Объяснение возможностей

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

Стикеры волшебным образом преобразуют идею презентаций. (Источник изображения: TestFlight)

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

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

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

Этот нарисованный от руки рабочий процесс показывает креативность и тщательный рабочий процесс. (Источник изображения: Alex Faure)

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

Направляйте пользователей

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

Мы скорее воспримем руководство со стороны человека (Изображение: Stamped)

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

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

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

Нравьтесь

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

Мы больше хотим поверить тому, кто нам нравится. (Источник изображения: Knock Knock Factory)

The Knock Knock Factory приглашает посетителей посмотреть очень персональную и симпатичную презентацию своей команды. Пиктограммы, набросанные мелом на школьной доске, многое говорят о Кейте, «бесстрашном лидере». Компания явно считает важным дать ясную картину того, с кем предполагается иметь дело. Это бросается в глаза и дает посетителям положительные ощущения даже перед тем, как они просмотрят остальную часть веб-сайта. Это создает мгновенную личную связь и дает посетителю ощущение того, что он желанный гость на этом веб-сайте.

Будьте достойны доверия

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

Мы чувствуем себя увереннее в обществе людей, которым доверяем. (Источник изображения: Polecat)

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

Будьте настоящими

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

Очень важно показать подлинность команды. (Источник изображения: Grove)

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

Истории

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

Развлекайте

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

Рисунки создают близкое и человечное взаимодействие. (Источник иображения: Axure)

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

Объясняйте

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

Рисунки, нарисованные от руки, обращаются напрямую к нашим эмоциям. (Источник изображения: SignNow)

Приложение SignNow использует нарисованные от руки рисунки для разъяснения основных преимуществ прямо на домашней странице. Способ, которым они подчеркивают преимущества, соединенные «летающими» документами, создает целый рассказ. Глядя на картинку, даже не читая описание под ней, вы как будто слышите, как кто-то ее объясняет. История увлекает читателя, поэтому за ней легко проследить.

Вовлекайте

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

Веб-сайт, которому удалось вовлечь нас, уже сделал большой шаг в направлении создания положительного впечатления. (Источник изображения: TouristEye)

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

Привлечение внимания

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

Приглашайте

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

Мы с большей охотой ответим на сообщение, адресованное лично нам. (Источник изображения: Weezbe)

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

Заинтересуйте

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

Нарисованные вручную элементы могут вызвать у посетителя любопытство. (Источник изображения: Radley Yeldar)

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

Выделите детали

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

Выделенные элементы считаются важными. (Источник изображения: Orbit)

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

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

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

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

Излишне ручные рисунки делают кнопки назойливыми и бесцеремонными. (Изображение: Джошуа Кинз)

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

Заключение

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

Это перевод статьи под названием “Adding A Personal Touch To Your Web Design” от Sabina Idler. Перевели в компании UXDepot с одобрением издания Smashing Magazine.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂