Chulakov Design
Дизайн
Подписаться
Рекомендации по правильному созданию формы сбора контактов

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


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


2. Не больше трех полей. Ограничьте форму тремя полями, и это ограничение увеличит конверсию как минимум на 25%.


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


4. Не пишите на кнопке «Отправить». Вместо этого пишите то, что получит человек, отправив вам свои данные. Например, «Получить чек-лист».


5. Не просите номер телефона. Никто не хочет, чтобы ему названивали по 10 раз в день, поэтому забудьте о номере телефона. Лучше просите у людей их email, а если очень хочется оставить номер, то просто сделайте его вместе с почтой, но пометьте как дополнительное или необязательное для заполнения поле.

Другие статьи канала Chulakov Design

Chulakov Design
Дизайн
Подписаться
UX-раскадровкаОткуда появилась?

UX-раскадровка

Откуда появилась?Аниматоры и режиссеры впервые использовали метод раскадровки. Он предварительно визуализирует фильм или интерактивную мультимедийную последовательность.

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

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

Преимущества метода


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


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


3. ЗапоминаемостьРаскадровки позволяют нам понять пользовательские пути и проблемы с первого взгляда.

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

Chulakov Design
Дизайн
Подписаться
UX-раскадровкаОткуда появилась?

UX-раскадровка

Откуда появилась?Аниматоры и режиссеры впервые использовали метод раскадровки. Он предварительно визуализирует фильм или интерактивную мультимедийную последовательность.

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

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

Преимущества метода


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


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


3. ЗапоминаемостьРаскадровки позволяют нам понять пользовательские пути и проблемы с первого взгляда.

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

Chulakov Design
Дизайн
Подписаться
Проклятие знанияКогда-то был такой эксперимент:

Проклятие знания

Когда-то был такой эксперимент: взяли нескольких людей, разделили их на две группы, одной группе проиграли популярные мелодии («С днем рождения», Jingle Bells и другие) и сказали настучать пальцами эти мелодии перед второй группой. Результаты эксперимента показали, что лишь 2,5% людей отгадали мелодию, а вот вся первая группа отчетливо слышала мелодию.

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

Вот как можно бороться с предвзятостью при разработке интерфейсов.

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

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

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

Chulakov Design
Дизайн
Подписаться
Проклятие знанияКогда-то был такой эксперимент:

Проклятие знания

Когда-то был такой эксперимент: взяли нескольких людей, разделили их на две группы, одной группе проиграли популярные мелодии («С днем рождения», Jingle Bells и другие) и сказали настучать пальцами эти мелодии перед второй группой. Результаты эксперимента показали, что лишь 2,5% людей отгадали мелодию, а вот вся первая группа отчетливо слышала мелодию.

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

Вот как можно бороться с предвзятостью при разработке интерфейсов.

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

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

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

Chulakov Design
Дизайн
Подписаться
Ускоряем принятие решений Часто в коммуникации с клиентом возникают длительные паузы.

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться
Ускоряем принятие решений Часто в коммуникации с клиентом возникают длительные паузы.

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться
Люди не могут сказать вам, чего они хотят

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

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

Chulakov Design
Дизайн
Подписаться
Барьер концепции

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

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

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

Chulakov Design
Дизайн
Подписаться
Темная тема При хорошей проработке темные темы приносят много пользы.

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

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

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

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

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

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

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

Крупные цветовые блокиБольшие блоки цвета отвлекают внимание от самых важных элементов.

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

Избегайте чисто-белого и чисто-черного цветаИстинного черного не существует в нашем повседневном окружении (самый темный объект в мире, еще не получивший названия, разработан в MIT и все еще на 0,005% уступает истинно-черному). Поэтому наше видение адаптировалось к восприятию относительной тьмы как истинной черноты.

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

Chulakov Design
Дизайн
Подписаться

Обратная связь

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

Определитесь, какая обратная связь вам нужнаЕсли не указать конкретно, что именно вы хотите услышать от человека, то вы получите общий положительный комментарий в стиле «Ну вроде норм»

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться
Пользовательский опыт — это не только удобство

Пользовательский опыт
- это не только удобство

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

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

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

Chulakov Design
Дизайн
Подписаться

NASA-TLX

Когда команда SpaceX будет создавать интерфейс для управления полётом и затем тестировать его, она будет использовать метод тестирования NASA-TLX.

Что это такое?NASA-TLX появился в 1980-х годах в результате усилий NASA по разработке инструмента для измерения предполагаемой рабочей нагрузки, необходимой для решения сложных, высокотехнических задач членов экипажей аэрокосмических судов. Он является полезным для изучения сложных продуктов и задач в области здравоохранения, аэрокосмической, военной и других средах с высокой ценой ошибки.

Как работает опросник?NASA-TLX содержит 6 вопросов, на которые пользователи должны ответить по непомеченной 21-балльной шкале, от очень низкого до очень высокого. Каждый вопрос затрагивает одно измерение воспринимаемой рабочей нагрузки:


- умственная нагрузка;

- физическая нагрузка;

- нехватка времени;

- предполагаемый успех выполнения задачи;

- общий уровень усилий и уровень раздражения.

ИспользованиеХотя NASA-TLX часто используется в исследованиях человеческого фактора в сложных критически важных системах, он может также использоваться в исследованиях других типов UX с некоторыми оговорками:


- это относительно сложная анкета, на которую необходимо отвечать после каждой ключевой задачи, что увеличит время (и потенциальную усталость участника) в общем процессе тестирования;


- это может нарушить процесс тестирования и сделать его менее естественным для участников;


- часто исследователь должен объяснять инструмент несколько раз;


- это особенно полезно при изучении ситуаций, когда ошибки человека крайне нежелательны;


- инструментом измеряют субъективное восприятие пользователей, а не объективную производительность;


- эти показатели говорят вам об уровне удовлетворенности пользователя, но не указывают на слабые стороны или сильные стороны опыта;


- как и все количественные показатели, низкие размеры выборки вряд ли дадут значимые результаты.

Chulakov Design
Дизайн
Подписаться
«Все должно влезть в один экран»

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

Возможно, это утверждение работало в 90-х, но на дворе уже 2019 год, и за почти 30 лет люди привыкли скроллить.

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

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

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

Chulakov Design
Дизайн
Подписаться
Научите клиента помогать Часто работа дизайнера выглядит для клиента, как черный ящик.

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

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

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

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

Chulakov Design
Дизайн
Подписаться
«Сделайте логотип побольше»

5 способов сделать так, чтобы правок стало меньше или не было совсем (это возможно).


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


2. Приводите примеры. Лучше если это будут примеры известных компаний. Такие как Apple, Google или авторитетные компании в соответствующей тематике. Приводя пример, расскажите, почему было принято такое решение.


3. Обосновывайте все. Каждое решение должно быть обосновано
- у вас должен быть ответ на расположение каждого пикселя на экране. Показывая что-то, подкрепляйте это результатами аналитических исследований или тем, что данная механика это best practice.


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


5. Выслушайте клиента. Иногда нужно просто спокойно выслушать клиента и понять что он хочет донести. Не воспринимайте все комментарии прямо. Чаще всего клиент не может донести то, чего он хочет добиться. «Уберите эту большую и красивую иллюстрацию»
- говорит клиент. И вроде иллюстрация хорошая, и размещена там, где надо, а просит убрать. Так в чем проблема? А проблема в том, что он беспокоится: иллюстрация перетягивает внимание с текста. Для этого сделайте больше акцента на полезном контенте, вместо того, чтобы убирать изображение.

Если вы воюете с клиентом
- значит вы делаете что-то не так. Как правило, клиент хочет сделать проект лучше, а значит у вас с ним одна цель.

Рейтинг авторов

  • (Не) только немецкий 157 157 157
  • #анямастерконтента 157 157 157
  • #Фудтех 157 157 157
  • 10 идей и трендов дня 157 157 157
  • 100 идей способов рекламы Telegram-каналов 157 157 157
Показать весь рейтинг
Загрузка ...