Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Веб-формы

Спросить имя, чтобы обратиться по имени

Проектировщики часто ставят в формах поле «Имя», а на вопрос «зачем?» отвечают: «Чтобы можно было обратиться к клиенту по имени».

Приятно же, когда к тебе обращаются по имени. Приходишь в кофе-бар, а тебе: «Привет, Илья» — и делают флетвайт, не спрашивая про сахар и сироп. Чувство, что другим на тебя не наплевать, согревает. Хочется ходить в такой кофе-бар. Обращение по имени помогает удержать клиентов.

Да нихрена! В Старбаксе тоже обращаются по имени. У тебя его спрашивают, переспрашивают, потом пишут на стаканчике, и потом кричат. Это такой стандарт. Всем плевать, как тебя зовут. Обращение по имени не влияет на удержание клиентов.

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

Уберите лишнее поле и просто обращайтесь на вы: «Здравствуйте, вы только что сделали заказ на сайте таком-то...». «Здравствуйте, вы вчера писали в поддержку того-то по такому-то вопросу». Лучше пусть оператор искренне попытается помочь, а не по имени из шпаргалки обращается. При этом если в ходе разговора я назову своё имя, а вы его запомните, это будет хорошо.

 230   2017   веб-формы   студентам

Вертикальное выравнивание заголовков полей форм

Заголовки полей форм ставятся на базовую линию с текстом в самих полях:

Заголовки полей форм ставятся на базовую линию с текстом в самих полях

Если заголовок выровнять вертикально по центру поля, он сползёт при переносе:

Если заголовок выровнять вертикально по центру поля, он сползёт при переносе

Тому, кому нравится, что такой заголовок «как раз» выровнялся по высоте с полем, предлагаю ужаснуться виду трёхстрочного заголовка:

Предлагаю ужаснуться виду трёхстрочного заголовка

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

Первая строка заголовка должна всегда оставаться на месте:

Первая строка заголовка должна всегда оставаться на месте

То же самое с многострочными полями:

Первая строка многострочного поля должна всегда оставаться на месте

Форма — редактируемая таблица, поэтому в ней работают законы вёрстки таблиц.

 296   2014   веб-дизайн   веб-формы   дизайн сайтов

Лейблы контролов на форме

На дверях не пишут: «Чтобы пообщаться с Абрамом Моисеевичем, зайдите в этот кабинет».
Или «Зав. терапевтическим отделением:». Или: «Посетите туалет».

На дверях пишут: «Иванов Абрам Моисеевич», «Зав. терапевтическим отделением»,

Туалет

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

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

Синтаксис элементов интерфейса

Помню, как готовил самую первую версию этой таблицы в Матвеевском в 2007 году, за вот этим столом.

Учимся делать веб-формы

Влад Головач утверждает, что сайт uimodeling.ru дивен. Давайте вместе подивимся тому, как люди не умеют делать веб-формы:

Веб-форма с сайта uimodelling.ru

Кто посчитает, сколько тут левака? Я сходу насчитал 5.

Добавлено 15 июля в 17:02: Влад развёрнуто и интересно отвечает мне (нет, не на вопрос из предыдущего абзаца).
 33 комментария    106   2009   веб-формы   дизайн