Хороший пользовательский интерфейс

gif_animaton[1]

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

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

2

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

3

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

4

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

5

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

6

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

7

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

8

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

9

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

10

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

11

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

12

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

14

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

13

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

15

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

16

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

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

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

19. Попробуйте прямые операции вместо бесконтекстных меню.
Иногда имеет смысл позволить осуществлять действия с отдельными элементами интерфейса напрямую, без списков несвязанных общих действий. При отображении списка каких-либо позиций, к примеру, мы обычно хотим предоставить пользователю инструменты для осуществления операций с такими элементами. Очень удобно при наведении курсора или клике понять, возможно ли проведение различных манипуляций с отдельным элементом (удаление, переименование и так далее). Еще одним примером прямого управления является нажатие на позицию в списке (скажем, текстовый адрес), который затем превратится в редактируемый текст. Создание возможности таких взаимодействий уменьшает необходимое количество шагов, в сравнении с осуществлением таких же действий обычным способом без контекстного меню, так как о выборе за Вас уже позаботились. Запомните, конечно же, что нет ничего плохого в бесконтекстных меню для выполнения заурядных действий.

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

21

21. Попробуйте переходы вместо незамедлительного отображения изменений.
Элементы интерфейса зачастую появляются, исчезают, движутся и изменяются в размерах. Т.к. элементы постоянно реагируют на наши действия, зачастую гораздо проще понять, что произошло, если немного «поиграть» со временем. Преднамеренная задержка анимации или перехода предоставляет пользователям время для осознания того, что только что произошло. Запомните, однако, что при увеличении продолжительности таких задержек (более 0.5 сек) может возникнуть ситуация, при которой посетителям сайта будет некомфортно работать с интерфейсом. Слишком долгая задержка станет неудобством и для тех, кто привык к быстрой работе с сайтом.

22

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

23

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

24

24. Попробуйте продавать выгоду, а не особенности.
Кажется, это из «Marketing 101». Как правило, людей интересуют скорее не особенности, а выгода, которую они извлекут из этих особенностей. Выгодой легче измерить ценность чего-либо. В книге «The$100 Startup» пишется о людях, которые хотят любви, денег, признания и свободного времени, избегая конфликтов, стресса, неопределенности и ссор. Демонстрируя особенности (а я действительно считаю, что для них все же есть место), привязывайте их к определенной выгоде.

25

25. Попробуйте изменить «нулевые страницы».
Бывает так, что на экране Вы увидите 0, 1, 10, 100, или 10,000+ элементов различной информации. Однако зачастую мы забываем надлежащим образом оформить самый первый вариант развития событий, при котором нечего отображать на экран в принципе, что сильно отталкивает пользователей. Мир «нулевой страницы» — это холодное место. Когда новички впервые используют Ваше приложение и видят лишь чистый лист без каких-либо намеков на подсказки, то есть большой шанс потерять многих из них. Страницы без каких-либо опций – это отличное место для того, чтобы показать пользователям следующий шаг.

26

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

27

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

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

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

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

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

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

Дата30.12.2013

1 Комментарий

  1. 1 мая!

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

Оставить комментарий

Top