Как правильно написать адрес электронной почты (e-mail) ✔, чтобы вам могли на нее отправить письмо.
Доброго дня!
«Почему не отвечаешь?», «Мне ничего не приходило на почту!», «Вы мне не можете скинуть письмо с документами?!» — это всё вопросы и претензии, которые я неоднократно получал как на рабочем месте, так и на этом блоге. 👀
Самое интересное во всем этом — что в этих случаях в принципе нельзя было ответить и отправить e-mail, так как адрес был неправильно написан. И человеку на том конце провода никогда ничего не докажешь.
Собственно, после очередного такого «случая» решил набросать небольшой ликбез по этой теме (теперь будет куда поставить ссылку в случае очередной подобной претензии. 👌).
Как создать электронную почту: e-mail (на портале mail.ru). Настройка почты — [см. пошаговую инструкцию]
Правильное написание e-mail адреса
ШАГ 1: основы
К тому же, написание e-mail должно быть выполнено латинскими буквами (прим.: допускаются цифры, подчеркивания)!
То, что я перечислил выше — это не чье-то требование, а международный формат. Соблюдая его, вам всегда смогут ответить и переслать письмо.
См. в качестве примера скриншот ниже. 👇
Пример e-mail адреса
Пару примеров правильного написания e-mail адресов:
Разберу каждую часть адреса подробнее:
Важно!
Никакие кавычки или дополнительные знаки при написании адреса электронной почты использовать не нужно ( пробелы между собачкой, логином и доменом — не используются)!
Вставка e-mail в форму
ШАГ 2: как завести себе почтовый ящик
Завести почту сегодня можно практически на любом крупном портале (👉 лучшие сервисы электро-почт).
Например, весьма неплохим выбором может стать 👉 почта от Яндекса.
Чтобы завести ящик, нужно-то:
Завести почту на Яндекс
ШАГ 3: как отправить кому-нибудь письмо на e-mail
Так как выше в пример я взял Яндекс-почту, то и здесь уместно показать работу с ней.
После того, как вы заведете себе ящик и войдете в него, пред вами предстанет достаточно простое меню. Для создания письма — достаточно кликнуть по кнопке «Написать» в верхнем углу.
Прикрепление к письму документов
ШАГ 4: как сделать свой номер мобильного адресом почты
Весьма хорошим способом перестать путаться с написанием e-mail может стать одна функция Яндекс-почты — можно свой номер мобильного использовать в качестве адреса электро-почты!
Чтобы включить данную опцию, после регистрации в почте от Яндекса, зайдите в настройки личных данных и используйте функцию «Сделать адресом номер телефона» (см. скрин ниже, стрелками показано, куда нужно нажать). 👇
Сделать адресом номер телефона
После этого, вы сможете получать электронную почту как по адресу 79271234567@yandex.ru *, так и по своему прежнему (т.е., по сути, у вас будет 2 адреса e-mail, письма с которых будут поступать в один ящик!).
На сим сегодня всё. Дополнения приветствуются.
8 октября 2017 | Опубликовано в статьюшечки | 3 Комментариев »
Поле ввода email-адреса при регистрации подвергается исправлениям чаще других. Дело в том, что при его заполнении легко ошибиться, ведь адреса электронной почты состоят из длинного ряда самых разнообразных символов. Часто это приводит к тому, что пользователь, регистрируясь, указывает неверный email.
Проблемы подтверждения адреса
Многие дизайнеры верят, что эту проблему можно решить дополнительным полем — подтверждения адреса. Это может предотвратить некоторые случаи неправильного ввода, но далеко не все, и подчас высокой ценой.
Многие пользователи не вводят адрес еще раз, а копируют его из уже заполненной формы и вставляют в поле подтверждения. Всякий смысл в этом дополнительном поле теряется, потому что копируются и все совершенные ошибки.
Как выявили результаты исследования, в 60% случаев пользователи копируют email из одного поля в другое. Они поступают так, потому что вводить адрес еще раз — слишком долго и сложно. Пользователи также верят что просто не могут неправильно ввести свой адрес, и очень удивляются, когда это происходит.
Итак, поле подтверждения адреса не решает проблему случайных ошибок при вводе. Более того, оно заставляет пользователей делать больше манипуляций, чем им хотелось бы. А в случае если посетитель заполняет оба поля вручную, но допускает ошибки и в одном и в другом, выяснения что к чему могут так вывести из себя, что он просто уйдет с сайта.
Редизайн поля ввода еmail-адреса
Если вы хотите увеличить количество подписок, вам нужно заняться редизайном поля ввода электронного адреса. Нужно изменить расположение, размер и обозначение.
Поместите поле email на первое место
Заполнение форм это рутинное занятие. Пользователи стремятся закончить это дело как можно быстрее, чтобы перейти к следующим задачам. Но больше всего ошибок мы совершаем именно когда мы торопимся.
Размещение поля электронного адреса на первом месте может помочь. Это начало формы и пользователь еще не так торопится. А вот если разместить строку email в середине или в конце формы, ошибок будет больше, потому что на этих этапах посетитель начинает уставать от заполнения, становится все более нетерпеливым и хочет поскорее закончить.
Увеличьте размер поля
В поле заполнения электронного адреса делается больше всего ошибок. Важно сделать поле ввода почты достаточно большим, чтобы помочь пользователям заметить ошибки, которые они могут сделать.
Многие формы используют шрифт слишком маленького размера. И в случае опечатки, это совсем не бросается в глаза, даже если вы видите свой адрес в тысячный раз. Но если шрифт достаточно велик, пользователь хорошо видит все специфические символы. Это помогает распознать ошибку с одного взгляда на введенный адрес.
Вы можете сделать поле для почты больше чем остальные поля. Правда это может лишить последовательности стиль всей страницы. Чтобы избежать этого, сделайте так, чтобы поле увеличивалось в момент его активации для заполнения. Шрифт вводимых символов тоже должен становиться больше. После того как пользователь снимает выделение с поля, оно возвращается к обычному размеру.
Вот пример того как это работает.
Акцентируйте внимание на точности
Большинство дизайнеров подписывают поле электронной почты просто “Email”. Несмотря на то, что это емко, коротко и понятно, такая лаконичность не подталкивает пользователей к проверке введенных данных. Если вы хотите чтобы посетитель проверил то, что ввел, подчеркните это.
Обозначение поля “Email (убедитесь что адрес верный)” напоминает пользователям проверить введенные данные. Важно подталкивать посетителя к проверке, ведь как мы уже говорили, мы не думает что можем неправильно ввести свой адрес, а значит и проверять нет смысла.
Все что вам нужно — ясность
Не все данные для заполнения форм одинаково сложны. Поле электронной почты нуждается в особом подходе, потому что оно сложнее остальных. Оно содержит буквы, цифры и специфические символы, которые легко ввести неправильно.
Пришло время взяться за дизайн этого поля иначе. Выход не в дополнительном поле, а в ясной и четкой подаче существующего. Приоритетное расположение, большой размер и специфическая подпись — вот что вам нужно. Сделав этот выбор, вы раз и навсегда избавитесь от поля подтверждения адреса.
Обязательные поля в формах — отмечать или нет?
Популярный вопрос, часто задаваемый на наших занятиях UX Conference: следует ли отмечать обязательные поля в форме? Как быть, если большинство полей в форме являются обязательными, следует ли их все отметить? (Это же так много отметок, в конце концов.) Короткий ответ — да. И в этой статье я дам объяснение, почему.
Искушение не отмечать обязательные поля
Часто дизайнеры чувствуют, что наличие отметки для каждого отдельного элемента — уродливое повторение, которое занимает слишком много места и, с более длинными формами, даже может выглядеть угнетающе (форма требует от пользователя очень много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:
1. Они дают инструкцию в верхней части формы, говоря, что все поля обязательны для заполнения или все поля обязательны для заполнения, если не указано иное.
2. Они отмечают необязательные поля, так как их обычно меньше.
(В некоторых редких ситуациях они вообще ничего не делают: они просто полагают, что пользователи сами волшебным образом догадаются, какие поля обязательны. Ну а если они этого не сделают, им просто придется иметь дело с возникающей ошибкой.)
Что не так с этими подходами? Тут есть несколько проблем:
• Люди не читают инструкции в верхней части формы.
Это общеизвестный факт, что пользователи не читают инструкции, и наименее вероятнее всего они станут читать инструкции в верхней части формы. В конце концов, поля формы выглядят самодостаточно, каждое поле имеет собственную специфическую «инструкцию» — своё название, зачем вам нужно читать что-то еще, чтобы заполнять поля формы?
Вы можете подумать: если пользователи прочитают инструкцию перед заполнением формы, они не смогут ее забыть — это же так просто? Однако, они забывают — особенно если форма длинная или если они прерываются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя хранить прочитанное в своей рабочей памяти. Другими словами, вы усложняете им задачу. Заполнение формы само по себе вызов для ваших пользователей — зачем вы хотите усложнить этот процесс?
Мы выяснили, что независимо от того, предоставили вы инструкции пользователю в шапке формы или нет, результат, скорее всего, будет одинаковым: их будут игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они понимают, что поле обязательно для заполнения? Наиболее прилежные пользователи будут присматриваться внимательно, пытаясь выяснить это — они просмотрят всю форму и найдут поле, отмеченное как необязательное (иногда для этого необходимо проскроллить страницу, как в примере с AmericanExpressвыше, где первое необязательное поле появляется ниже, за пределами экрана; если они найдут одно такое поле, они будут считать, что все не отмеченные поля — обязательные. Но это взаимодействие потребует времени и усилий — и опять же, зачем вам усложнять для пользователей заполнение формы?
Однако большинство пользователей не будут осматриваться по сторонам — они просто будут строить предположения. Они скажут: «Ну, номер телефона — им же реально не нужен мой номер телефона, не так ли? Оставлю это поле пустым». И даже если они не оставляют это поле пустым, необходимость сделать паузу, чтобы принять решение, нужно ли заполнять поле, замедляет взаимодействие и делает процесс более долгим и утомительным. (Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая будет означать еще больше потраченного времени на решение этой задачи.
Решение простое: отметьте все обязательные поля. Будьте настолько очевидными и прозрачными, насколько это возможно: для каждого обязательного поля, которое необходимо заполнить, поставьте отметку.
Как пометить обязательные поля?
Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».
Должна ли звездочка предшествовать или следовать за названием поля? Вряд ли это будет иметь практическое значение, но одна из причин, по которой его нужно поместить непосредственно перед описанием поля, состоит в том, чтобы помочь глазам легко распознать, какие поля требуются, просмотрев только самый первый символ названия полей.
Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.
Можно ли отмечать необязательные поля?
Хотя это и не обязательно, отметка опциональных полей снижает когнитивную нагрузку пользователя: при отсутствии этого обозначения пользователь должен осмотреть поля и сделать вывод, какие именно из них являются необязательными, если часть из них помечена как обязательные. Если слово «необязательно/опционально» находится рядом с названием поля, эта задача становится немного легче.
Не указать, что поле является необязательным, не является ошибкой, но, если его также отметить — это будет очевидным плюсом.
Как насчет форм авторизации?
Формы авторизации короткие и обычно состоят из двух полей: имени пользователя и пароля, оба из которых всегда обязательны для заполнения. Если вы используете звездочку, возможно необходимость пометки этих полей будет минимальной, однако это не будет ошибкой. Тем не менее, большинство пользователей сталкиваются со множеством форм авторизации, и они знают, что для входа в систему обязательно нужно ввести адрес электронной почты или имя пользователя и пароль. Так что, если вы категорически против звездочки, то можно совсем отказаться от неё в этих формах.
Однако опасно не отмечать обязательные поля в форме регистрации. Формы регистрации сильно различаются на разных сайтах — разные компании требуют разные типы информации при создании учетной записи. Если ваша регистрационная форма похожа на форму входа в систему, то можно безопасно пропустить необходимую информацию. Но если оно включает в себя больше полей, чем имя пользователя и пароль, отметьте все обязательные поля (включая поля имени пользователя и пароля).
Заключение
Формы — отнюдь не забава. Они требуют от пользователей достаточно работы. В реальности, многие формы оказываются брошенными, потому что заполнять их слишком сложно или утомительно. Чтобы повысить шансы того, что ваша форма будет до конца заполнена, минимизируйте усилия, которые придется приложить пользователям, и информацию, которую они должны запомнить. Есть много аспектов, которые способствуют этому, но отметить обязательные поля (и, опционально поля необязательные) — легкое и простое решение.
Как сделать обязательным одно из полей: почта или телефон
Бывают ситуации, когда нужно обязательно получить от пользователя телефон или почту, но не обязательно и то и другое вместе. Из коробки CF7 не даёт такого функционала, поэтому ниже напишем его сами.
Вариант 1: без проверок на форму
Как видно из разметки, поля user-email и user-phone не обязательные. Проверим их в коде ниже.
Если бы они были обязательные, то форма требовала бы заполнения их обоих, а нам нужно: телефон или почта (оба необязательно).
Проверим нашу форму перед отправкой — заполнено хотя бы одно из двух полей:
Этот способ подойдет, если у вас:
Вариант 2: проверка формы по скрытому полю
Чтобы точно знать, что проверяются поля нужной формы, необходимо эту формы как-то вычислить (пометить). В роли метки можно использовать скрытое поле.
Этот способ хорош, но есть маленький недостаток. Бывает формы не создают с нуля, а дублируют уже созданные, а потом редактируют. Есть шанс, что скрытое поле забудут удалить и описанная нами логика проверок может помешать корректной работе продублированной формы. Впрочем, вероятность такого события очень мала и описанный способ подойдёт в 99% случаев.
Вариант 3: проверка формы по переданному в шорткод CSS классу
Этот способ решает недостаток способа описанного выше.
Проблема в том, что при отправке формы мы можем получить на стороне сервера только значения полей этой самой формы. То есть нам не доступны атрибуты шорткода, ведь они используются только при генерации (рендере) самой формы.
Вариант 4: проверка формы по переданному в шорткод своему атрибуту
К коду из прошлого примера теперь нужно дописать поддержку собственного атрибута в шорткоде формы.
Теперь, в отличие от предыдущих способов, мы уберегли себя от случайного дублирования скрытого поля или использования атрибута html_class не по назначению.
В общем, всегда есть какие минусы и плюсы, выбирайте вариант который больше подходит для вашего случая.
Напоследок стоит упомянуть, что передавать значение в атрибут необязательно и можно упростить шорткод:
можно вполне сделать так:
или для понятности так:
Теперь, форма остаётся без изменений, а вот код немного изменится:
Какой из способов вам больше всего понравился? А может вы используете уже готовые решения в виде плагина? Поделитесь своим мнением в комментариях!
Обязательные поля при регистрации
Разрабатывая интерфейс для очередного сайта, основной аудиторией которого будут люди не очень продвинутые технически, я задумался над вопросом об обязательных для регистрации полях и минимизации их количества.
В голову пришли следующие варианты:
0 полей: при загрузке страницы незалогиненный пользователь получает сгенеренный аккаунт, который ему предлагают использовать, вот еще один пример такого подхода.
— удобно для узкоспециализированных задач и мне не подходит. По функционалу уже недалеко от куки, если бы не привязанность последних к конкретному хранилищу в браузере или по 🙂
1 поле: email
Пользователь оставляет email, id создается автоматически, на email он получает пароль, авторизация либо по ID либо по email, username задается пользователем уже в профиле
+ Черт, это все таки одно поле! По умолчанию может быть сгенерен устойчивый к перебору пароль.
± username свободно меняются, и могут оставаться пустыми. Учитывать пользователей по айдишникам мне не хочется
— ЧПУ приобретают вид ufosite.nl/users/18567, скорее всего пользователь захочет сменить свой пароль. При ЧПУ вида ufosite.nl/users/customusername наступает ад для поисковиков. Строить ЧПУ на основе email, который, к тому же, далеко не все захотят публиковать — это подарок спамерам и ЧПУ становятся не совсем ЧПУ.
3 поля: email, пароль с подтверждением
Наследует все от предыдущего подхода, кроме устойчивого пароля и лишних операций по смене его после регистрации.
4 поля: email, username и пароль с подтверждением
+юзернейм фиксирован, нет проблем с ЧПУ вида ufosite.nl/users/username, авторизация по username, email или id
— А ведь есть вариант, где полей меньше в четыре раза.
Ну и как дополнительное поле идет неизбежная капча, либо ее аналог.
Некоторые специалисты по юзабилити рассматривали вариант открытого ввода пароля, либо перевод режима его ввода в закрытый режим с подтверждением по активации чекбокса, но мне это кажется экзотикой.
Быть может, есть какие-то оригинальные решения проблемы минимизации количества полей при регистрации и я буду очень признателен, если вы ими поделитесь.