SlideShare a Scribd company logo
1 of 52
Download to read offline
Оригинал: Goodui
Перевод статьи: ADV
Подбор примеров: Proactivity Group
Статья на CMSmagazine: http://www.cmsmagazine.ru/library/items/usability/186846/
Хороший пользовательский
интерфейс. Часть 1
Введение
Хороший пользовательский интерфейс обладает высокими показателями
конверсии и прост в использовании. Другими словами, он хорош как для
бизнеса, а так и для людей, которые им пользуются. Ниже вашему вниманию
предлагается ряд практических идей, которые вы можете попробовать
применить.
http://www.cmsmagazine.ru/library/items/
usability/186846/
1. Старайтесь использовать макет с одной колонкой
вместо многоколоночного
Макет с одной колонкой позволяет лучше контролировать повествование. Он сможет направить ваших
пользователей наиболее предсказуемым путем — сверху вниз. Многоколоночный подход допускает
риск того, что пользователь может отвлечься от основной цели страницы. Направляйте людей с
помощью рассказа с обязательным призывом к действию в конце.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://mesto.in/Workplace.html
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://gacbottle.com/
http://www.cmsmagazine.ru/library/items/
usability/186846/
2. Старайтесь сделать подарок, не завершайте
продажу сразу
Дружественный жест, такой как сделать подарок покупателю, именно то, что нужно. Если смотреть
глубже, то подарки — это еще и эффективная тактика убеждения, основанная на принципе взаимности.
Как бы очевидно это не звучало, но небольшие знаки признательности окупятся сторицей.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
https://rocketbank.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://knopka.com/#order
http://www.cmsmagazine.ru/library/items/
usability/186846/
3. Старайтесь объединять схожие функции
и не дробить интерфейс
В ходе работы можно непреднамеренно создать несколько разделов и элементов, которые выполняют
одну и ту же функцию. Это обычная энтропия, когда система становится беспорядочной с течением
времени. Не используйте разные названия для одинаковых функций, чтобы не увеличивать
информационную нагрузку на ваших клиентов. Чем больше фрагментирован пользовательский
интерфейс, тем более крутой становится кривая обучения и тем сложнее клиенту вникнуть в суть того,
что от него требуется. Проведите рефакторинг пользовательского интерфейса и объедините сходные
функции вместе.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
https://disk.yandex.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
https://cloud.mail.ru/home/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 3.
https://cloud.mail.ru/home/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 4.
https://cloud.mail.ru/home/
http://www.cmsmagazine.ru/library/items/
usability/186846/
4. Старайтесь использовать социальное доказательство
вместо того, чтобы рассказывать о себе самом
Социальное доказательство является еще одной тактикой убеждения, которая позволяет увеличить
конверсию.
Рекомендации о вас и вашем предложении могут побудить пользователя к действию, Убедитесь, что
данные рекомендации или мнения присутствуют.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://www.mann-ivanov-ferber.ru/promo/presents-b2b/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://enimotors.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
5. Старайтесь повторить главный призыв к действию,
вместо того, чтобы показывать его один раз
Повторение призыва к действию больше применимо к более длинным страницам или же используется
повторение через несколько страниц. Конечно, вы не хотите, чтобы предложение показывалось 10 раз
на одной странице и раздражало людей. Длинные страницы стали нормой и попытка уместить все в
первый экран уже не является хорошей идеей. Нет ничего страшного в том, чтобы сделать один призыв
вверху страницы, ненавязчиво напомнить в середине и закрепить в конце. Когда люди достигают конца
страницы, они останавливаются подумать, что сделать дальше, и тут самое время сделать предложение
или завершить сделку.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://franshiza-expedition.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://cactussoft.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
6. Старайтесь усиливать различия в стиле между кликабельными и
выбранными элементами, а не размывать их
Выразительные средства, такие как цвет, глубина и контрастность, могут быть использованы в качестве
надежных маркеров, отражающих фундаментальный язык навигации по интерфейсу: где я, и куда я могу
перейти. Чтобы четко донести эту идею до пользователей, нужно использовать различное визуальное
оформление для элементов разного назначения (ссылок, кнопок, выбранных элементов и контента), эти
различия должны быть явно выражены, и следует использовать их одинаковым образом во всем
интерфейсе.
На картинке приведен пример, где синий цвет выбран, чтобы отметить все, что может нажиматься, а
черный для всего, что было выбрано или указывает на то, где мы. При правильном применении, людям
будет гораздо легче ориентироваться среди таких подсказок. Не усложняйте жизнь пользователям — не
нарушайте смысловое кодирование.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://www.people4people.ru/shop/women/coats
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://stok-stolnik.ru/catalog/bluzki
http://www.cmsmagazine.ru/library/items/
usability/186846/
7. Попробуйте рекомендации вместо показа
равнозначных вариантов
В случаях, когда показывается несколько предложений, выделенная рекомендация продукта может быть
хорошей идеей, потому что некоторых людей нужно немного подтолкнуть. Есть некоторые
психологические исследования, которые предполагают, что чем шире выбор, тем меньше шансов, что
решение вообще будет принято и реализовано. Чтобы не допустить такой аналитический паралич,
старайтесь подчеркивать и выделять одни варианты на фоне других.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://handyhat.ru/catalog/girls/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
https://dodopizza.ru/Syktyvkar
http://www.cmsmagazine.ru/library/items/
usability/186846/
8. Попробуйте отмену действия вместо запросов
на подтверждения
Представьте, что вы только что нажали на действующую кнопку или ссылку. Отмена действия уважает
изначальное пользовательское намерение, позволяя действию произойти сразу, с возможностью
отмены. Запросы на разрешения действия, напротив, внушают пользователю, что он или она не знают,
что они делают, подвергая сомнению их намерения. Действия человека чаще всего отражают его
действительные намерения, и только в редких ситуациях они случайны. Неэффективность и убожество
подсказок особенно очевидны, когда пользователи должны выполнять действия повторно, и подсказки
будут появляться много раз, снова и снова: это плохой опыт. Попробуйте дать вашим пользователям
больше возможностей контроля: отменить действие и не спрашивать подтверждения там, где это
возможно.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
https://elba.kontur.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
https://vk.com/
http://www.cmsmagazine.ru/library/items/
usability/186846/
9. Объясните, для кого предназначен продукт.
Не пытайтесь адресовать сообщение всем подряд
Вы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии
заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда
вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет
общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск
такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть
потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает
доверие.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://s5.molodost.bz/otdel_prodazh/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://crocotime.com/ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
10. Говорите прямо вместо предположений
Вы можете обратиться к людям с неуверенной дрожью в голосе или можете сказать то же самое
уверенно. Если вы заканчиваете каждое предложение вопросительными знаками, используете слова
вроде «возможно», «было бы здорово», «вам интересно?» или «не хотите попробовать?», тогда у вас
есть все возможности добавить вашему сообщению убеждение. Кто знает, быть может, иногда стоит
подсказать людям следующий шаг на пути оптимизации конверсии?
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://potolok.ru.com/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://клинингбург.рф/
http://www.cmsmagazine.ru/library/items/
usability/186846/
11. Больше контраста вместо однородности
Чем более явно и резко выделяются призывы к действию среди остальных элементов страницы, тем
лучше будет работать ваш интерфейс, тем он сильнее. Контраст основных целевых действий можно
усилить с помощью множества способов. Используя насыщенность, вы можете делать некоторые
элементы темнее на фоне светлых, с помощью глубины вы заставляете предметы казаться ближе на
фоне остального контента, который выглядит более отдаленным (используйте тени и градиенты).
Наконец, вы можете подобрать дополняющие цвета из цветового круга (например, желтый и
фиолетовый) для еще большего усиления. Однако не стоит чрезмерно увлекаться: контраст между
контентом и основным действием должен быть сбалансирован.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://team-course.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://leol.pro/
http://www.cmsmagazine.ru/library/items/
usability/186846/
12. Покажите место происхождения продукта
вместо обобщений
Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с
клиентом. Хороший способ рассказать о себе — упомянуть страну, штаты или город происхождения. Если
вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным.
Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более
высокого качества продукта.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://rigasoap.com/ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://simterminal.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
13. Сокращайте количество полей, не спрашивайте
слишком много
Люди по своей природе не любят трудоемкие задачи, и это в полной мере относится к заполнению
полей формы. Каждое поле, которое требует ответа от пользователя, может спровоцировать его к уходу
со страницы. К тому же, не все устройства позволяют быстро набирать текст, особенно трудно это делать
на мобильных устройствах. Постарайтесь оставить только необходимые поля, и удалить столько полей,
сколько возможно. Если необходимых полей действительно много, то заполнить их будет лучше после
отправки основной формы на отдельной странице или при помощи дополнительной формы. Расширить
форму несложно, но меньшее количество полей позволяют увеличить конверсию.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://www.kuvalda.ru/promo/automower/#order
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://www.bringo247.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
14. Раскройте все опции сразу
Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется
дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь
совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте
сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от
пользователя: в выборе даты и времени (например, календари) или географического расположения.
Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь
должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов
на пути основного повествования.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://bodyboss.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://monko.net/
http://www.cmsmagazine.ru/library/items/
usability/186846/
15. Предлагайте последовательность вместо страниц
с двойным дном
Страницы с двойным дном — убийцы конверсии. Да, все уже привыкли скроллить длинные страницы,
но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это
произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой
ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими
разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные
зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств).
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://lingualeo.ru/ru
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
http://slovoych.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
16. Сохраняйте фокус, не злоупотребляйте ссылками
Нет ничего сложного в том, чтобы расставить побольше ссылок в разных местах страницы в надежде
удовлетворить как можно больше нужд потенциальных клиентов. Однако, когда вы создаете
повествовательную страницу, предназначение которой в том, чтобы подвести пользователя к
определенному целевому действию, подумайте дважды. Не забывайте, что любая ссылка перед
основным целевым действием увеличивает риск ухода пользователя со страницы и отвлекает от того,
что вы от него ждете. Следите за количеством ссылок и по возможности соблюдайте баланс между
разводящими страницами (с немного большим количеством ссылок) с «тоннельными» страницами с
меньшим количеством ссылок и большей конверсией. Чистка от ненужных ссылок наверняка увеличит
шансы добраться до важной кнопки.
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 1.
http://www.tripinsurance.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/
Пример 2.
https://cherehapa.ru/
http://www.cmsmagazine.ru/library/items/
usability/186846/

More Related Content

What's hot

Fi h9shja audit_arma-torg
Fi h9shja audit_arma-torgFi h9shja audit_arma-torg
Fi h9shja audit_arma-torgAuditorr
 
V xtd2vsk audit_pmk-armatura
V xtd2vsk audit_pmk-armaturaV xtd2vsk audit_pmk-armatura
V xtd2vsk audit_pmk-armaturaAuditorr
 
Слава Кутовой "Главные ошибки юзабилити интернет-магазинов"
Слава Кутовой  "Главные ошибки юзабилити интернет-магазинов"Слава Кутовой  "Главные ошибки юзабилити интернет-магазинов"
Слава Кутовой "Главные ошибки юзабилити интернет-магазинов"SEO.UA
 
Arkona tlt
Arkona tltArkona tlt
Arkona tltAuditorr
 
аудит атмосфера пенза
аудит атмосфера пензааудит атмосфера пенза
аудит атмосфера пензаAuditorr
 
22 ошибки в юзабилити российских (и не только) интернет магазинов
22 ошибки в юзабилити российских (и не только) интернет магазинов22 ошибки в юзабилити российских (и не только) интернет магазинов
22 ошибки в юзабилити российских (и не только) интернет магазинов"Rating Runet"
 
ППО (предпроектное обследование) от WebProfy.ru
ППО (предпроектное обследование) от WebProfy.ruППО (предпроектное обследование) от WebProfy.ru
ППО (предпроектное обследование) от WebProfy.ruWebProfy.ru
 
20+ сервисов для SEO-специалиста
20+ сервисов для SEO-специалиста20+ сервисов для SEO-специалиста
20+ сервисов для SEO-специалистаНетология
 
J y1rfhvi audit_vaidiri
J y1rfhvi audit_vaidiriJ y1rfhvi audit_vaidiri
J y1rfhvi audit_vaidiriAuditorr
 
Анастасия Пареха «Решение маркетинговых задач посредством Wordpress»
Анастасия Пареха «Решение маркетинговых задач посредством Wordpress»Анастасия Пареха «Решение маркетинговых задач посредством Wordpress»
Анастасия Пареха «Решение маркетинговых задач посредством Wordpress»Клуб Интернет-Маркетологов
 
оптимизация интернет магазинов
оптимизация интернет магазиновоптимизация интернет магазинов
оптимизация интернет магазиновАлексанр Рудык
 
Как создать идеальное объявление (сплит-тестирование)
Как создать идеальное объявление (сплит-тестирование)Как создать идеальное объявление (сплит-тестирование)
Как создать идеальное объявление (сплит-тестирование)Павел Бесхитров
 
Дмитрий Кондрюк «Лендинг на ВП - быстро, дешево, НО сердито!»
Дмитрий Кондрюк «Лендинг на ВП - быстро, дешево, НО сердито!» Дмитрий Кондрюк «Лендинг на ВП - быстро, дешево, НО сердито!»
Дмитрий Кондрюк «Лендинг на ВП - быстро, дешево, НО сердито!» Клуб Интернет-Маркетологов
 

What's hot (20)

Fi h9shja audit_arma-torg
Fi h9shja audit_arma-torgFi h9shja audit_arma-torg
Fi h9shja audit_arma-torg
 
V xtd2vsk audit_pmk-armatura
V xtd2vsk audit_pmk-armaturaV xtd2vsk audit_pmk-armatura
V xtd2vsk audit_pmk-armatura
 
Teplodom
TeplodomTeplodom
Teplodom
 
Слава Кутовой "Главные ошибки юзабилити интернет-магазинов"
Слава Кутовой  "Главные ошибки юзабилити интернет-магазинов"Слава Кутовой  "Главные ошибки юзабилити интернет-магазинов"
Слава Кутовой "Главные ошибки юзабилити интернет-магазинов"
 
Arkona tlt
Arkona tltArkona tlt
Arkona tlt
 
аудит атмосфера пенза
аудит атмосфера пензааудит атмосфера пенза
аудит атмосфера пенза
 
Presentation webpromoexpert
Presentation webpromoexpertPresentation webpromoexpert
Presentation webpromoexpert
 
22 ошибки в юзабилити российских (и не только) интернет магазинов
22 ошибки в юзабилити российских (и не только) интернет магазинов22 ошибки в юзабилити российских (и не только) интернет магазинов
22 ошибки в юзабилити российских (и не только) интернет магазинов
 
Brelok
BrelokBrelok
Brelok
 
ППО (предпроектное обследование) от WebProfy.ru
ППО (предпроектное обследование) от WebProfy.ruППО (предпроектное обследование) от WebProfy.ru
ППО (предпроектное обследование) от WebProfy.ru
 
Lampalux
LampaluxLampalux
Lampalux
 
20+ сервисов для SEO-специалиста
20+ сервисов для SEO-специалиста20+ сервисов для SEO-специалиста
20+ сервисов для SEO-специалиста
 
J y1rfhvi audit_vaidiri
J y1rfhvi audit_vaidiriJ y1rfhvi audit_vaidiri
J y1rfhvi audit_vaidiri
 
Базовая SEO оптимизация интернет магазина. Запуск магазина без помощи SEO-спе...
Базовая SEO оптимизация интернет магазина. Запуск магазина без помощи SEO-спе...Базовая SEO оптимизация интернет магазина. Запуск магазина без помощи SEO-спе...
Базовая SEO оптимизация интернет магазина. Запуск магазина без помощи SEO-спе...
 
^5(2)
^5(2)^5(2)
^5(2)
 
Анастасия Пареха «Решение маркетинговых задач посредством Wordpress»
Анастасия Пареха «Решение маркетинговых задач посредством Wordpress»Анастасия Пареха «Решение маркетинговых задач посредством Wordpress»
Анастасия Пареха «Решение маркетинговых задач посредством Wordpress»
 
оптимизация интернет магазинов
оптимизация интернет магазиновоптимизация интернет магазинов
оптимизация интернет магазинов
 
Как создать идеальное объявление (сплит-тестирование)
Как создать идеальное объявление (сплит-тестирование)Как создать идеальное объявление (сплит-тестирование)
Как создать идеальное объявление (сплит-тестирование)
 
Продающие тексты для лендингов: типичные ошибки и их решение. Вебинар WebProm...
Продающие тексты для лендингов: типичные ошибки и их решение. Вебинар WebProm...Продающие тексты для лендингов: типичные ошибки и их решение. Вебинар WebProm...
Продающие тексты для лендингов: типичные ошибки и их решение. Вебинар WebProm...
 
Дмитрий Кондрюк «Лендинг на ВП - быстро, дешево, НО сердито!»
Дмитрий Кондрюк «Лендинг на ВП - быстро, дешево, НО сердито!» Дмитрий Кондрюк «Лендинг на ВП - быстро, дешево, НО сердито!»
Дмитрий Кондрюк «Лендинг на ВП - быстро, дешево, НО сердито!»
 

Viewers also liked

Payler. Интерфейс личного кабинета.
Payler. Интерфейс личного кабинета.Payler. Интерфейс личного кабинета.
Payler. Интерфейс личного кабинета.Payler
 
designing UI past and future
designing UI past and futuredesigning UI past and future
designing UI past and futureallileja
 
презентация Microsoft office power point
презентация Microsoft office power pointпрезентация Microsoft office power point
презентация Microsoft office power pointterrybuth
 
Command Line Interface - Control Chamber
Command Line Interface - Control ChamberCommand Line Interface - Control Chamber
Command Line Interface - Control ChamberWorachart Pirunruk
 
Record. Интерфейс
Record. ИнтерфейсRecord. Интерфейс
Record. ИнтерфейсRafael Valiullin
 
Пользовательский интерфейс - передний край битвы
Пользовательский интерфейс - передний край битвыПользовательский интерфейс - передний край битвы
Пользовательский интерфейс - передний край битвыUIDesign Group
 
Проектирование пользовательских интерфейсов
Проектирование пользовательских интерфейсовПроектирование пользовательских интерфейсов
Проектирование пользовательских интерфейсовEkaterina Mironova
 
WEKA:The Command Line Interface
WEKA:The Command Line InterfaceWEKA:The Command Line Interface
WEKA:The Command Line Interfaceweka Content
 
WEKA: The Command Line Interface
WEKA: The Command Line InterfaceWEKA: The Command Line Interface
WEKA: The Command Line InterfaceDataminingTools Inc
 
The linux command line for total beginners
The linux command line  for total beginnersThe linux command line  for total beginners
The linux command line for total beginnersCorrie Watt
 

Viewers also liked (11)

Payler. Интерфейс личного кабинета.
Payler. Интерфейс личного кабинета.Payler. Интерфейс личного кабинета.
Payler. Интерфейс личного кабинета.
 
designing UI past and future
designing UI past and futuredesigning UI past and future
designing UI past and future
 
презентация Microsoft office power point
презентация Microsoft office power pointпрезентация Microsoft office power point
презентация Microsoft office power point
 
Command Line Interface - Control Chamber
Command Line Interface - Control ChamberCommand Line Interface - Control Chamber
Command Line Interface - Control Chamber
 
Record. Интерфейс
Record. ИнтерфейсRecord. Интерфейс
Record. Интерфейс
 
Пользовательский интерфейс - передний край битвы
Пользовательский интерфейс - передний край битвыПользовательский интерфейс - передний край битвы
Пользовательский интерфейс - передний край битвы
 
Проектирование пользовательских интерфейсов
Проектирование пользовательских интерфейсовПроектирование пользовательских интерфейсов
Проектирование пользовательских интерфейсов
 
WEKA:The Command Line Interface
WEKA:The Command Line InterfaceWEKA:The Command Line Interface
WEKA:The Command Line Interface
 
Aruba OS 6.4 Command Line Interface Reference Guide
Aruba OS 6.4 Command Line Interface Reference GuideAruba OS 6.4 Command Line Interface Reference Guide
Aruba OS 6.4 Command Line Interface Reference Guide
 
WEKA: The Command Line Interface
WEKA: The Command Line InterfaceWEKA: The Command Line Interface
WEKA: The Command Line Interface
 
The linux command line for total beginners
The linux command line  for total beginnersThe linux command line  for total beginners
The linux command line for total beginners
 

Similar to Хороший пользовательский интерфейс. Часть 1

Триггеры – «спусковые крючки» принятия решений
Триггеры – «спусковые крючки» принятия решенийТриггеры – «спусковые крючки» принятия решений
Триггеры – «спусковые крючки» принятия решений"Rating Runet"
 
44 идеи для тестирования продающих сайтов
44 идеи для тестирования продающих сайтов44 идеи для тестирования продающих сайтов
44 идеи для тестирования продающих сайтовИгорь Назаров
 
Анализ блога
Анализ блогаАнализ блога
Анализ блогаDmitry Dychek
 
Реклама в коммуникационном процессе. Модуль 3.
Реклама в коммуникационном процессе. Модуль 3.Реклама в коммуникационном процессе. Модуль 3.
Реклама в коммуникационном процессе. Модуль 3.Usanov Aleksey
 
News roll по пятницам - №11
News roll по пятницам - №11News roll по пятницам - №11
News roll по пятницам - №11MedMarketing
 
40 способов увеличить продажи с вашего сайта
40 способов увеличить продажи с вашего сайта40 способов увеличить продажи с вашего сайта
40 способов увеличить продажи с вашего сайтаTask & Solution
 
Юзабилити сайта
Юзабилити сайтаЮзабилити сайта
Юзабилити сайтаDmitry Satin
 
Юзабилити Сайта
Юзабилити СайтаЮзабилити Сайта
Юзабилити СайтаDmitry Satin
 
Как увеличить продажи в интернет бизнесе?
Как увеличить продажи в интернет бизнесе?Как увеличить продажи в интернет бизнесе?
Как увеличить продажи в интернет бизнесе?Андрей Андрюшков
 
КЕЙСЫ ДЛЯ БИЗНЕСА. КАК РАССКАЗАТЬ О ВАШЕМ ОПЫТЕ И ПРИВЛЕЧЬ КЛИЕНТОВ В СЕТИ - ...
КЕЙСЫ ДЛЯ БИЗНЕСА. КАК РАССКАЗАТЬ О ВАШЕМ ОПЫТЕ И ПРИВЛЕЧЬ КЛИЕНТОВ В СЕТИ - ...КЕЙСЫ ДЛЯ БИЗНЕСА. КАК РАССКАЗАТЬ О ВАШЕМ ОПЫТЕ И ПРИВЛЕЧЬ КЛИЕНТОВ В СЕТИ - ...
КЕЙСЫ ДЛЯ БИЗНЕСА. КАК РАССКАЗАТЬ О ВАШЕМ ОПЫТЕ И ПРИВЛЕЧЬ КЛИЕНТОВ В СЕТИ - ...Exiterra Digital Agency 360º
 
Советы по интернет-магазинам с сервисами
Советы по интернет-магазинам с сервисамиСоветы по интернет-магазинам с сервисами
Советы по интернет-магазинам с сервисамиMike Myatov
 
Выдержка презентации тренинга Эффективное продвижение в Интернете
Выдержка презентации тренинга Эффективное продвижение в ИнтернетеВыдержка презентации тренинга Эффективное продвижение в Интернете
Выдержка презентации тренинга Эффективное продвижение в ИнтернетеRoman Vasilyev
 
"Предпринимательский образ мышления" Часть 6. Бизнес-модели!
"Предпринимательский образ мышления" Часть 6. Бизнес-модели!"Предпринимательский образ мышления" Часть 6. Бизнес-модели!
"Предпринимательский образ мышления" Часть 6. Бизнес-модели!Angel Relations Group
 
Курс по предпринимательству ideaPerm. Part III
Курс по предпринимательству ideaPerm. Part IIIКурс по предпринимательству ideaPerm. Part III
Курс по предпринимательству ideaPerm. Part IIIAngel Relations Group
 
Социальные сети для малого бизнеса
Социальные сети для малого бизнесаСоциальные сети для малого бизнеса
Социальные сети для малого бизнесаSvetlana Kotlukova
 
Universepack
UniversepackUniversepack
UniversepackAuditorr
 
SMM 2020: Что внедрить для продвижения.
SMM 2020: Что внедрить для продвижения.SMM 2020: Что внедрить для продвижения.
SMM 2020: Что внедрить для продвижения.ADINDEX.ua
 

Similar to Хороший пользовательский интерфейс. Часть 1 (20)

Триггеры – «спусковые крючки» принятия решений
Триггеры – «спусковые крючки» принятия решенийТриггеры – «спусковые крючки» принятия решений
Триггеры – «спусковые крючки» принятия решений
 
44 идеи для тестирования продающих сайтов
44 идеи для тестирования продающих сайтов44 идеи для тестирования продающих сайтов
44 идеи для тестирования продающих сайтов
 
Анализ блога
Анализ блогаАнализ блога
Анализ блога
 
Реклама в коммуникационном процессе. Модуль 3.
Реклама в коммуникационном процессе. Модуль 3.Реклама в коммуникационном процессе. Модуль 3.
Реклама в коммуникационном процессе. Модуль 3.
 
News roll по пятницам - №11
News roll по пятницам - №11News roll по пятницам - №11
News roll по пятницам - №11
 
Damplast
DamplastDamplast
Damplast
 
40 способов увеличить продажи с вашего сайта
40 способов увеличить продажи с вашего сайта40 способов увеличить продажи с вашего сайта
40 способов увеличить продажи с вашего сайта
 
Как увеличить продажи без дополнительных вложений в рекламу?
Как увеличить продажи без дополнительных вложений в рекламу?Как увеличить продажи без дополнительных вложений в рекламу?
Как увеличить продажи без дополнительных вложений в рекламу?
 
Юзабилити сайта
Юзабилити сайтаЮзабилити сайта
Юзабилити сайта
 
Юзабилити Сайта
Юзабилити СайтаЮзабилити Сайта
Юзабилити Сайта
 
Как увеличить продажи в интернет бизнесе?
Как увеличить продажи в интернет бизнесе?Как увеличить продажи в интернет бизнесе?
Как увеличить продажи в интернет бизнесе?
 
КЕЙСЫ ДЛЯ БИЗНЕСА. КАК РАССКАЗАТЬ О ВАШЕМ ОПЫТЕ И ПРИВЛЕЧЬ КЛИЕНТОВ В СЕТИ - ...
КЕЙСЫ ДЛЯ БИЗНЕСА. КАК РАССКАЗАТЬ О ВАШЕМ ОПЫТЕ И ПРИВЛЕЧЬ КЛИЕНТОВ В СЕТИ - ...КЕЙСЫ ДЛЯ БИЗНЕСА. КАК РАССКАЗАТЬ О ВАШЕМ ОПЫТЕ И ПРИВЛЕЧЬ КЛИЕНТОВ В СЕТИ - ...
КЕЙСЫ ДЛЯ БИЗНЕСА. КАК РАССКАЗАТЬ О ВАШЕМ ОПЫТЕ И ПРИВЛЕЧЬ КЛИЕНТОВ В СЕТИ - ...
 
Советы по интернет-магазинам с сервисами
Советы по интернет-магазинам с сервисамиСоветы по интернет-магазинам с сервисами
Советы по интернет-магазинам с сервисами
 
Выдержка презентации тренинга Эффективное продвижение в Интернете
Выдержка презентации тренинга Эффективное продвижение в ИнтернетеВыдержка презентации тренинга Эффективное продвижение в Интернете
Выдержка презентации тренинга Эффективное продвижение в Интернете
 
"Предпринимательский образ мышления" Часть 6. Бизнес-модели!
"Предпринимательский образ мышления" Часть 6. Бизнес-модели!"Предпринимательский образ мышления" Часть 6. Бизнес-модели!
"Предпринимательский образ мышления" Часть 6. Бизнес-модели!
 
Курс по предпринимательству ideaPerm. Part III
Курс по предпринимательству ideaPerm. Part IIIКурс по предпринимательству ideaPerm. Part III
Курс по предпринимательству ideaPerm. Part III
 
Vobox
VoboxVobox
Vobox
 
Социальные сети для малого бизнеса
Социальные сети для малого бизнесаСоциальные сети для малого бизнеса
Социальные сети для малого бизнеса
 
Universepack
UniversepackUniversepack
Universepack
 
SMM 2020: Что внедрить для продвижения.
SMM 2020: Что внедрить для продвижения.SMM 2020: Что внедрить для продвижения.
SMM 2020: Что внедрить для продвижения.
 

More from "Rating Runet"

Итоги конкурса «Рейтинг Рунета – 2017»
Итоги конкурса «Рейтинг Рунета – 2017»Итоги конкурса «Рейтинг Рунета – 2017»
Итоги конкурса «Рейтинг Рунета – 2017»"Rating Runet"
 
Спонсорские пакеты и опции для рейтинга разработчиков мобильных приложений
Спонсорские пакеты и опции для рейтинга разработчиков мобильных приложенийСпонсорские пакеты и опции для рейтинга разработчиков мобильных приложений
Спонсорские пакеты и опции для рейтинга разработчиков мобильных приложений"Rating Runet"
 
200+ лучших кейсов по интернет-маркетингу в Рунете
200+ лучших кейсов  по интернет-маркетингу в Рунете200+ лучших кейсов  по интернет-маркетингу в Рунете
200+ лучших кейсов по интернет-маркетингу в Рунете"Rating Runet"
 
Итоги конкурса сайтов «Рейтинг Рунета – 2015»
Итоги конкурса сайтов «Рейтинг Рунета – 2015»Итоги конкурса сайтов «Рейтинг Рунета – 2015»
Итоги конкурса сайтов «Рейтинг Рунета – 2015»"Rating Runet"
 
10 инструментов для создания инфографики и визуализации данных
10 инструментов для создания инфографики и визуализации данных10 инструментов для создания инфографики и визуализации данных
10 инструментов для создания инфографики и визуализации данных"Rating Runet"
 
Итоги конкурса сайтов «Рейтинг Рунета – 2013»
Итоги конкурса сайтов «Рейтинг Рунета – 2013»Итоги конкурса сайтов «Рейтинг Рунета – 2013»
Итоги конкурса сайтов «Рейтинг Рунета – 2013»"Rating Runet"
 
Итоги конкурса сайтов «Рейтинг Рунета – 2012»
Итоги конкурса сайтов «Рейтинг Рунета – 2012»Итоги конкурса сайтов «Рейтинг Рунета – 2012»
Итоги конкурса сайтов «Рейтинг Рунета – 2012»"Rating Runet"
 
Презентация для интенсива в British higher school
Презентация для интенсива в British higher schoolПрезентация для интенсива в British higher school
Презентация для интенсива в British higher school"Rating Runet"
 
Разработка сайта: особенности регионального ценообразования
Разработка сайта: особенности регионального ценообразованияРазработка сайта: особенности регионального ценообразования
Разработка сайта: особенности регионального ценообразования"Rating Runet"
 
Технологические аспекты выбора CMS
Технологические аспекты выбора CMSТехнологические аспекты выбора CMS
Технологические аспекты выбора CMS"Rating Runet"
 
Комплексное исследование рынка веб-разработок
Комплексное исследование рынка веб-разработокКомплексное исследование рынка веб-разработок
Комплексное исследование рынка веб-разработок"Rating Runet"
 

More from "Rating Runet" (11)

Итоги конкурса «Рейтинг Рунета – 2017»
Итоги конкурса «Рейтинг Рунета – 2017»Итоги конкурса «Рейтинг Рунета – 2017»
Итоги конкурса «Рейтинг Рунета – 2017»
 
Спонсорские пакеты и опции для рейтинга разработчиков мобильных приложений
Спонсорские пакеты и опции для рейтинга разработчиков мобильных приложенийСпонсорские пакеты и опции для рейтинга разработчиков мобильных приложений
Спонсорские пакеты и опции для рейтинга разработчиков мобильных приложений
 
200+ лучших кейсов по интернет-маркетингу в Рунете
200+ лучших кейсов  по интернет-маркетингу в Рунете200+ лучших кейсов  по интернет-маркетингу в Рунете
200+ лучших кейсов по интернет-маркетингу в Рунете
 
Итоги конкурса сайтов «Рейтинг Рунета – 2015»
Итоги конкурса сайтов «Рейтинг Рунета – 2015»Итоги конкурса сайтов «Рейтинг Рунета – 2015»
Итоги конкурса сайтов «Рейтинг Рунета – 2015»
 
10 инструментов для создания инфографики и визуализации данных
10 инструментов для создания инфографики и визуализации данных10 инструментов для создания инфографики и визуализации данных
10 инструментов для создания инфографики и визуализации данных
 
Итоги конкурса сайтов «Рейтинг Рунета – 2013»
Итоги конкурса сайтов «Рейтинг Рунета – 2013»Итоги конкурса сайтов «Рейтинг Рунета – 2013»
Итоги конкурса сайтов «Рейтинг Рунета – 2013»
 
Итоги конкурса сайтов «Рейтинг Рунета – 2012»
Итоги конкурса сайтов «Рейтинг Рунета – 2012»Итоги конкурса сайтов «Рейтинг Рунета – 2012»
Итоги конкурса сайтов «Рейтинг Рунета – 2012»
 
Презентация для интенсива в British higher school
Презентация для интенсива в British higher schoolПрезентация для интенсива в British higher school
Презентация для интенсива в British higher school
 
Разработка сайта: особенности регионального ценообразования
Разработка сайта: особенности регионального ценообразованияРазработка сайта: особенности регионального ценообразования
Разработка сайта: особенности регионального ценообразования
 
Технологические аспекты выбора CMS
Технологические аспекты выбора CMSТехнологические аспекты выбора CMS
Технологические аспекты выбора CMS
 
Комплексное исследование рынка веб-разработок
Комплексное исследование рынка веб-разработокКомплексное исследование рынка веб-разработок
Комплексное исследование рынка веб-разработок
 

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

  • 1. Оригинал: Goodui Перевод статьи: ADV Подбор примеров: Proactivity Group Статья на CMSmagazine: http://www.cmsmagazine.ru/library/items/usability/186846/ Хороший пользовательский интерфейс. Часть 1
  • 2. Введение Хороший пользовательский интерфейс обладает высокими показателями конверсии и прост в использовании. Другими словами, он хорош как для бизнеса, а так и для людей, которые им пользуются. Ниже вашему вниманию предлагается ряд практических идей, которые вы можете попробовать применить. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 3. 1. Старайтесь использовать макет с одной колонкой вместо многоколоночного Макет с одной колонкой позволяет лучше контролировать повествование. Он сможет направить ваших пользователей наиболее предсказуемым путем — сверху вниз. Многоколоночный подход допускает риск того, что пользователь может отвлечься от основной цели страницы. Направляйте людей с помощью рассказа с обязательным призывом к действию в конце. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 6. 2. Старайтесь сделать подарок, не завершайте продажу сразу Дружественный жест, такой как сделать подарок покупателю, именно то, что нужно. Если смотреть глубже, то подарки — это еще и эффективная тактика убеждения, основанная на принципе взаимности. Как бы очевидно это не звучало, но небольшие знаки признательности окупятся сторицей. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 9. 3. Старайтесь объединять схожие функции и не дробить интерфейс В ходе работы можно непреднамеренно создать несколько разделов и элементов, которые выполняют одну и ту же функцию. Это обычная энтропия, когда система становится беспорядочной с течением времени. Не используйте разные названия для одинаковых функций, чтобы не увеличивать информационную нагрузку на ваших клиентов. Чем больше фрагментирован пользовательский интерфейс, тем более крутой становится кривая обучения и тем сложнее клиенту вникнуть в суть того, что от него требуется. Проведите рефакторинг пользовательского интерфейса и объедините сходные функции вместе. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 14. 4. Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом Социальное доказательство является еще одной тактикой убеждения, которая позволяет увеличить конверсию. Рекомендации о вас и вашем предложении могут побудить пользователя к действию, Убедитесь, что данные рекомендации или мнения присутствуют. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 17. 5. Старайтесь повторить главный призыв к действию, вместо того, чтобы показывать его один раз Повторение призыва к действию больше применимо к более длинным страницам или же используется повторение через несколько страниц. Конечно, вы не хотите, чтобы предложение показывалось 10 раз на одной странице и раздражало людей. Длинные страницы стали нормой и попытка уместить все в первый экран уже не является хорошей идеей. Нет ничего страшного в том, чтобы сделать один призыв вверху страницы, ненавязчиво напомнить в середине и закрепить в конце. Когда люди достигают конца страницы, они останавливаются подумать, что сделать дальше, и тут самое время сделать предложение или завершить сделку. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 20. 6. Старайтесь усиливать различия в стиле между кликабельными и выбранными элементами, а не размывать их Выразительные средства, такие как цвет, глубина и контрастность, могут быть использованы в качестве надежных маркеров, отражающих фундаментальный язык навигации по интерфейсу: где я, и куда я могу перейти. Чтобы четко донести эту идею до пользователей, нужно использовать различное визуальное оформление для элементов разного назначения (ссылок, кнопок, выбранных элементов и контента), эти различия должны быть явно выражены, и следует использовать их одинаковым образом во всем интерфейсе. На картинке приведен пример, где синий цвет выбран, чтобы отметить все, что может нажиматься, а черный для всего, что было выбрано или указывает на то, где мы. При правильном применении, людям будет гораздо легче ориентироваться среди таких подсказок. Не усложняйте жизнь пользователям — не нарушайте смысловое кодирование. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 23. 7. Попробуйте рекомендации вместо показа равнозначных вариантов В случаях, когда показывается несколько предложений, выделенная рекомендация продукта может быть хорошей идеей, потому что некоторых людей нужно немного подтолкнуть. Есть некоторые психологические исследования, которые предполагают, что чем шире выбор, тем меньше шансов, что решение вообще будет принято и реализовано. Чтобы не допустить такой аналитический паралич, старайтесь подчеркивать и выделять одни варианты на фоне других. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 26. 8. Попробуйте отмену действия вместо запросов на подтверждения Представьте, что вы только что нажали на действующую кнопку или ссылку. Отмена действия уважает изначальное пользовательское намерение, позволяя действию произойти сразу, с возможностью отмены. Запросы на разрешения действия, напротив, внушают пользователю, что он или она не знают, что они делают, подвергая сомнению их намерения. Действия человека чаще всего отражают его действительные намерения, и только в редких ситуациях они случайны. Неэффективность и убожество подсказок особенно очевидны, когда пользователи должны выполнять действия повторно, и подсказки будут появляться много раз, снова и снова: это плохой опыт. Попробуйте дать вашим пользователям больше возможностей контроля: отменить действие и не спрашивать подтверждения там, где это возможно. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 29. 9. Объясните, для кого предназначен продукт. Не пытайтесь адресовать сообщение всем подряд Вы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает доверие. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 32. 10. Говорите прямо вместо предположений Вы можете обратиться к людям с неуверенной дрожью в голосе или можете сказать то же самое уверенно. Если вы заканчиваете каждое предложение вопросительными знаками, используете слова вроде «возможно», «было бы здорово», «вам интересно?» или «не хотите попробовать?», тогда у вас есть все возможности добавить вашему сообщению убеждение. Кто знает, быть может, иногда стоит подсказать людям следующий шаг на пути оптимизации конверсии? http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 35. 11. Больше контраста вместо однородности Чем более явно и резко выделяются призывы к действию среди остальных элементов страницы, тем лучше будет работать ваш интерфейс, тем он сильнее. Контраст основных целевых действий можно усилить с помощью множества способов. Используя насыщенность, вы можете делать некоторые элементы темнее на фоне светлых, с помощью глубины вы заставляете предметы казаться ближе на фоне остального контента, который выглядит более отдаленным (используйте тени и градиенты). Наконец, вы можете подобрать дополняющие цвета из цветового круга (например, желтый и фиолетовый) для еще большего усиления. Однако не стоит чрезмерно увлекаться: контраст между контентом и основным действием должен быть сбалансирован. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 38. 12. Покажите место происхождения продукта вместо обобщений Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с клиентом. Хороший способ рассказать о себе — упомянуть страну, штаты или город происхождения. Если вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным. Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более высокого качества продукта. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 41. 13. Сокращайте количество полей, не спрашивайте слишком много Люди по своей природе не любят трудоемкие задачи, и это в полной мере относится к заполнению полей формы. Каждое поле, которое требует ответа от пользователя, может спровоцировать его к уходу со страницы. К тому же, не все устройства позволяют быстро набирать текст, особенно трудно это делать на мобильных устройствах. Постарайтесь оставить только необходимые поля, и удалить столько полей, сколько возможно. Если необходимых полей действительно много, то заполнить их будет лучше после отправки основной формы на отдельной странице или при помощи дополнительной формы. Расширить форму несложно, но меньшее количество полей позволяют увеличить конверсию. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 44. 14. Раскройте все опции сразу Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от пользователя: в выборе даты и времени (например, календари) или географического расположения. Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов на пути основного повествования. http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 47. 15. Предлагайте последовательность вместо страниц с двойным дном Страницы с двойным дном — убийцы конверсии. Да, все уже привыкли скроллить длинные страницы, но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств). http://www.cmsmagazine.ru/library/items/ usability/186846/
  • 50. 16. Сохраняйте фокус, не злоупотребляйте ссылками Нет ничего сложного в том, чтобы расставить побольше ссылок в разных местах страницы в надежде удовлетворить как можно больше нужд потенциальных клиентов. Однако, когда вы создаете повествовательную страницу, предназначение которой в том, чтобы подвести пользователя к определенному целевому действию, подумайте дважды. Не забывайте, что любая ссылка перед основным целевым действием увеличивает риск ухода пользователя со страницы и отвлекает от того, что вы от него ждете. Следите за количеством ссылок и по возможности соблюдайте баланс между разводящими страницами (с немного большим количеством ссылок) с «тоннельными» страницами с меньшим количеством ссылок и большей конверсией. Чистка от ненужных ссылок наверняка увеличит шансы добраться до важной кнопки. http://www.cmsmagazine.ru/library/items/ usability/186846/