1. Гость, Нет времени набирать посты, чтобы открыть HIDE ? Теперь есть решение, станьте Членом Клуба!
  2. Новые покупки

    09.01.2017: Быстрый заказ для OC 2.x 1.7.3

    08.01.2017: Софт для накрутки Андроид инсталлов (установок)

    05.01.2017: Распродажа курсов Маматова "Мужской комплект"

    05.01.2017: Как обрести мощную эрекцию и здоровую простату, используя секреты китайских Императоров

    05.01.2017: Нашумевший курс про Же*нщину-плю*с

    05.01.2017: Тренер знаменитостей, диетолог, фитнес-модель Nike, Adidas...Книга о наборе мышечной массы

    05.01.2017: от 100$ в месяц на дорвеях Вконтакте

    03.01.2017: [Бизнес Молодость] Бизнес под ключ

    02.01.2017: [Udemy.com] Стать Суперучеником 2: Научитесь скоростному чтению и улучшению памяти

    02.01.2017: [Udemy.com] Рисование и Скетчинг для Начинающих

    02.01.2017: [Udemy.com] Twitter маркетинг в 2016 году: Получайте Новых Подписчиков Ежедневно

    02.01.2017: [Udemy.com] Instagram для художников

    02.01.2017: Практический видеокурс "Простатит - секретные материалы+бонус - запись вебинара

    02.01.2017: Техники эффективного обучения - Распродажа 95%

    02.01.2017: Медитация и осознанность. 10 минут в день, которые приведут ваши мысли в порядок

    02.01.2017: [Бизнес Молодость] Выбор ниши

    02.01.2017: Громов Андрей, курс "Адаптивный Мини Интернет Магазин с корзиной заказов и простой CRM"

    02.01.2017: Сборник из 8 онлайн курсов всего за 5 900 вместо 22 990

    02.01.2017: Джон Ассараф - Выиграй денежную игру[3]

    02.01.2017: Джон Ассараф - Выиграй денежную игру[2]

  3. Нужен организатор

    05.01.2017: Распродажа курсов Маматова "Мужской комплект"

    05.01.2017: Как обрести мощную эрекцию и здоровую простату, используя секреты китайских Императоров

    05.01.2017: Нашумевший курс про Же*нщину-плю*с

    05.01.2017: Тренер знаменитостей, диетолог, фитнес-модель Nike, Adidas...Книга о наборе мышечной массы

    05.01.2017: от 100$ в месяц на дорвеях Вконтакте

    03.01.2017: [Бизнес Молодость] Бизнес под ключ

    02.01.2017: [Udemy.com] Стать Суперучеником 2: Научитесь скоростному чтению и улучшению памяти

    02.01.2017: [Udemy.com] Рисование и Скетчинг для Начинающих

    02.01.2017: [Udemy.com] Twitter маркетинг в 2016 году: Получайте Новых Подписчиков Ежедневно

    02.01.2017: [Udemy.com] Instagram для художников

    02.01.2017: Практический видеокурс "Простатит - секретные материалы+бонус - запись вебинара

    02.01.2017: Техники эффективного обучения - Распродажа 95%

    02.01.2017: Медитация и осознанность. 10 минут в день, которые приведут ваши мысли в порядок

    02.01.2017: [Бизнес Молодость] Выбор ниши

    02.01.2017: Громов Андрей, курс "Адаптивный Мини Интернет Магазин с корзиной заказов и простой CRM"

    02.01.2017: Сборник из 8 онлайн курсов всего за 5 900 вместо 22 990

    02.01.2017: Джон Ассараф - Выиграй денежную игру[3]

    02.01.2017: Джон Ассараф - Выиграй денежную игру[2]

    02.01.2017: Джон Ассараф - Выиграй денежную игру[1]

    01.01.2017: Доступ к базе коммерческих фото Shutterstock

ТОП-10 рекомендаций по улучшению юзабилити веб-форм

Тема в разделе "SEO и Раскрутка сайтов", создана пользователем allnulled, 4 июл 2016.

  1. allnulled

    allnulled Администраторы Команда форума Администраторы

    Регистрация:
    2 фев 2015
    Сообщения:
    16.936
    Симпатии:
    1.149
    vbrTgTOl-8A.jpg

    Конкретная реализация той или иной веб-формы зависит от ряда факторов — количества полей, контекста и собираемых данных. Тем не менее, это не является оправданием для игнорирования основных принципов юзабилити. В качестве отправной точки используйте следующие рекомендации:
    1. Придерживайтесь короткой длины веб-форм. Как однажды сказал известный математик Блез Паскаль (Blaise Pascal): «Это письмо получилось таким длинным потому, что у меня не было времени написать его короче». Каждый раз, когда вы убираете очередное поле или вопрос из вашей формы, вы увеличиваете его коэффициент конверсии. Удалите поля для сбора той информации, которая может быть получена каким-либо другим способом, собрана позже или просто опущена.

    2. Метки (labels) должны быть расположены в непосредственной близости от описываемых ими полей. Избегайте двусмысленности, когда метки находятся на одинаковом расстоянии от нескольких полей, и обязательно используйте атрибут label для скрин-ридеров.

    3. Если ваша форма затрагивает две разные темы, разделите ее на две отдельные группы полей (и пометьте их для скрин-ридеров).
    Располагайте поля формы в одну колонку. Наличие нескольких колонок прерывает привычное направление взгляда человека на сайте сверху вниз. (Исключения из этого правила: короткие и/или логически связанные поля, такие как Город, Область и Индекс — могут быть расположены на одной строке).

    4. Соблюдайте логическую последовательность. Этот принцип относится как к полям веб-формы (например, номер кредитной карты, срок действия, код безопасности), так и к переменным значениям (например, стандартная доставка, доставка в течение 2-х дней, доставка сегодня). В последнем случае стоит также принимать во внимание частоту использования значений, и по возможности первыми в перечень включать наиболее популярные из них. Не забудьте протестировать навигацию с помощью клавиши Tab, чтобы убедиться в правильной последовательности полей.

    5. Избегайте замещающего текста. Дизайнеры любят плейсхолдеры (placeholder text), или текст-подсказку для элементов ввода, так как они способствуют устранению визуального беспорядка. Однако он также становится причиной многих проблем с юзабилити, и потому его лучше избегать.

    6. Сочетайте поля по типу и размеру вводимых данных. Избегайте раскрывающихся меню, когда имеется лишь 2 или 3 варианта, которые могут быть отображены в виде радиокнопок (radio buttons). Текстовые поля должны быть такой длины, чтобы пользователи могли видеть введенную информацию целиком.

    7. Разграничивайте обязательные и необязательные поля. Устраните как можно больше последних (см. первую рекомендацию выше), ограничив их количество до 1-2. При использовании обязательных полей не забудьте пометить их звездочкой (*).

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

    9. Избегайте кнопок «Сброс» (Reset) и «Очистить» (Clear). Риск случайного удаления пользователем введенной им информации весьма велик. В формах, собирающих конфиденциальные данные, такие как финансовая информация, предусмотрите кнопку «Отмена» (Cancel) для тех случаев, когда передумавший заполнять форму пользователь захочет удалить введенные им сведения. Убедитесь, что кнопка «Отмена» визуально отличается от кнопки «Отправить» (Submit), дабы избежать ошибочных нажатий.

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

    Похожие темы Форум Дата
    VIP SEO старт: ТОП-10 за 60 дней SEO и Раскрутка сайтов 3 дек 2016
    Раздача SEO старт: ТОП-10 за 60 дней Курсы по SEO и SMM 4 сен 2016
    Активно SEO старт 2.0: Продвинуть сайт в ТОП-10 Яндекса за 60 дней (2016) Курсы по SEO и SMM 23 июн 2016
    ТОП-10 кириллических шрифтов Google fonts Флудилка 2 апр 2016
    Скрипт рекомендаций Free Subscribers Скрипты PHP 15 июн 2016

Пользователи, которые прочитали эту тему (Всего: 0)