Юзабилити для мобильных сайтов


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

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

Названия внутри полей: в чем проблема?

Рассмотрим более подробно, в чем именно заключается проблема. Поле формы (практически любое) представляет собой прямоугольник, который отличается лишь названием, то есть контекстом. Если название убрать, то единственный доступный контекст, который остается – это так информация, которую вводит пользователь, что в свою очередь приводит к серьезным затруднениям как при заполнении полей, так и при исправлении ошибок. 

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

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

ВАЖНО: используйте краткие описания внутри полей. Они позволяют уточнить формат ввода и избавляют обычного пользователя от необходимости внимательно вчитываться в само название. 

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

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

Исключения 

Тем не менее, иногда названия внутри полей вполне уместны. В каких случаях? Тогда, когда пользователь НЕ МОЖЕТ ЗАБЫТЬ названия полей в форме, например логин и пароль в форме авторизации, поле поиска и так далее. В этом случае, если форма включает в себя до 2-3 полей одного формата, подобное решение позволит минимализировать дизайн и при этом пользователь не забудет назначение полей. Но если используется несколько полей (более 3) и все они имеют различный формат, то не рекомендуется размещать названия внутри них, так как это приведет к проблемам. Пример такой проблемы описан выше с поиском по городу «Калининград». 

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

Но с проблемой ошибочного ввода пользователем можно справиться, если вы предложите пример правильного написания. К примеру, в поле для указания мобильного номера можно сразу указать, что «телефон вводится в формате +7 123 456 78 90

Исключения из исключений

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

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

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

Небольшой итог

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

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

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

Реальные отзывы заказчиков о работе с «Профиланс»

star star star star star
оценок: 1889
среднее 4,9 из 5
Работы выполнена качественно и даже раньше ср...
Работы выполнена качественно и даже раньше срока, все доработки выполнены, текст получился отличный!!!!! Рекомендую))))
Виктор
Работы выполнена качественно и даже раньше срока, все доработки выполнены, текст получился отличный!!!!! Рекомендую))))
Виктор
Очередной заказ выполнен быстро и качественно...
Очередной заказ выполнен быстро и качественно. Обязательно ещё обращусь.)))
Виктор
Очередной заказ выполнен быстро и качественно. Обязательно ещё обращусь.)))
Виктор
Очень быстро выполнено задание, все замечания...
Очень быстро выполнено задание, все замечания были оперативно исправлены.
Алексей
Очень быстро выполнено задание, все замечания были оперативно исправлены.
Алексей
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРО...
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРОГО В РАМКАХ ТЕХЗАДАНИЯ!!! Обращайтесь, не пожалеете!!!
Валентина
Отличная работа!!! БЫСТРО, КАЧЕСТВЕННО и СТРОГО В РАМКАХ ТЕХЗАДАНИЯ!!! Обращайтесь, не пожалеете!!!
Валентина
Какой великолепный сайт, благодарна этому са...
Какой великолепный сайт, благодарна этому сайту, тут самые лучшие "фрилансеры"!!! Мария Фрилансер прекрасно и до срочно...
Инна
Какой великолепный сайт, благодарна этому сайту, тут самые лучшие "фрилансеры"!!! Мария Фрилансер прекрасно и до срочно выполнила перевод немецкого языка, быстро и на самую лучшую оценку "5", сразу чувствуется, что знает этот предмет на отлично! Я безмерно счастлива, у меня нет теперь долгов к этой сессии, благодарю Мария Вы супер! С наступающим Новым годом Мария, всех благ, счастья, любви, и все, то, что сами себе желаете!
Инна
Андрей - опытный и исполнительный специалист,...
Андрей - опытный и исполнительный специалист, взявшийся за горящий заказ в Новый Год и выполнивший его блестяще и в срок...
Василий
Андрей - опытный и исполнительный специалист, взявшийся за горящий заказ в Новый Год и выполнивший его блестяще и в срок. Заданием было выставить правильный тайминг готовых субтитров и добавить озвучку перевода документального фильма. Помимо самого задания были устранены шумы, получившиеся при записи озвучки, а также оперативно была исправлена ошибка в озвучке: фрагмент с оговоркой благополучно вырезан и заменен на присланный правильный.
Василий
Работа сделана быстро, единственное хотелось...
Работа сделана быстро, единственное хотелось бы, чтоб оформление было в ворде.
Ирина
Работа сделана быстро, единственное хотелось бы, чтоб оформление было в ворде.
Ирина
Очень быстро и качественно. До работы были за...
Очень быстро и качественно. До работы были заданы все уточняющие вопросы. Выполнено все без замечаний, были предложены н...
Валентина
Очень быстро и качественно. До работы были заданы все уточняющие вопросы. Выполнено все без замечаний, были предложены несколько итоговых вариантов. Очень рада сотрудничеству!!! Обращайтесь
Валентина

Вы заказчик и вам необходимо найти фрилансера?

«Профиланс» — это безопасный сервис для работы с фрилансерами

Вы фрилансер и вам нужны заказы?

Заполните заявку и получите доступ к заказам

Стать фрилансером

Заполните форму
и узнайте цену

Специализация
Специализация
Категория
Категория

Файлы при наличии

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