Нескучные формы

[BVN2]

По-моему, самое главное в фаормах, да и влюбом интерфейсе — не эстетическая красота, а наглядность и интуитивная понятность.

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

[j_brewer]

Если вы не обратили внимание, то на изначальном варианте тоже нет обозначения обязательных полей. Статья совершенно не про это.

[sha1dy]

А о чем тогда?

[egetmanenko]

Про это.

[nezloy]

Подкрасить оранжевым?

[Black_Joker]

Оригинальная форма удобнее всех представленных ниже вариаций.

[j_brewer]

Удобнее или привычнее? Обоснуйте, пожалуйста — на самом деле интересно.

[BVN2]

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

[Black_Joker]

Я боюсь даже представить что такое «открытый тупик» :)

[xfather]

Неудачная метафора подобна котёнку с дверцей

[Black_Joker]

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

[j_brewer]

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

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

[Black_Joker]

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

Хочется ответить: Оставьте формы в покое, с ними все хорошо

[j_brewer]

Это на ваш взгляд. У меня, например, всегда рябит в глазах от обилия полосок.

В общем аргументации помимо «мне так не нравится» я пока и не получил.

[homm]

Вы браузер-то обновите, в Опере 10.10 действительно было страшное оформление.

[GearHead]

у вас аргументации кроме «мне так нравится» в общем-то тоже нет

[tzlom]

Ещё можно группы полей визуально разделить, т.е. блок имени отсуп блок адреса ну и так далее.

[beavis_1]

Предпочитаю делать формы визуально поинтереснее и посвободнее.
Вот недавно была задача нарисовать форму заказа товара для интернет магазина:


(по клику — хайрез)

[mark_ablov]

А у вас баг — выбрана EMS, но радиобаттон «наличными курьеру» недоступен, хотя хинт говорит о другом :)

[beavis_1]

и правда)) спишем на издержки производства :D

[stalkers]

У вас там баг — способ доставки указан EMS, а сопсоб оплаты «наличными курьеру» всё-равно недоступен.

[beavis_1]

угу, уже подметили) это всего лишь макет, поэтому и текст-подсказка в полях комментария одинаковый

[nezloy]

Радиобоксы удобнее.
Все перед глазами, выбор в один клик. Первая особенность на страничке «оплаты» особенно важна, имхо.

[beavis_1]

Пришли к выводу, что таким образом больше возможностей для кастомизации, да и как-то нагляднее — сразу видно, что есть, чего нет, что добавилось, какие ограничения. И т.к., способов оплаты сильно больше не предвидится, решили остановится на этом варинате.

[badbojo]

кхм…
по-моему, комбобоксы сознательно заменены на радиобоксы.
при небольшом кол-ве вариантов радиобоксы — точно лучше.

[j_brewer]

Спасибо. Это как раз основной недостаток, который я вижу. На неконтрастных мониторах возможно будет плохо видно поля. На примере вообще серый фон, что еще сильнее уменьшает контраст.

[marapper]

Да, мы тоже так поиграли в анкете iskariot.ru/portrait/ — чтобы была похожа на анкету. Вот только с селектами не совладали (на комбик не хотелось менять).

[dab512]

Кстати, по ссылке врут — «В этой форме нет ни одного обязательного поля!»

Жму отправить и получаю:
«Вы не заполнили ни одного поля в анкете!
Подождите, пока страница обновится сама, или напрямую вернитесь к анкете →.»

[marapper]

Ну а что поделать. Там вообще, написано «почти» (да и сделал бы сейчас все по-другому, совсем).

[zodiak]

Поздравляю, Вы открыли для себя inplace-редактирование.
Однако спешу огорчить, это ни разу не удобнее и тем более не понятнее для пользователя.

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

Формы ввода на то и формы, что они визуально подсказывают что сюда надо вводить данные! Отображать данные нужно в нередактируемых виджетах. А если засунуть включенный утюг в холодильник — получится конечно что-то необычное и инновационное, но вреда будет больше чем пользы.

[j_brewer]

Не совсем понял ваш пример. Получается же как раз наоборот: если у вас все элементы в отдельных (стандартных) полях, то их надо копировать по одному. В моем примере после заполнения инпуты становятся обычным (но активным) текстом — т.е. их можно скопировать все сразу.

[zodiak]

Пример состоит в том, что раньше мухи были отдельно, котлеты отдельно (просмотр и редактирование), а в новом дизайне их смешали. Ровно то же самое предлагаете и Вы.
Мне кажется что если окинуть широким взглядом большинство веб-приложений и сайтов, то мы увидим, что отображение данных требуется намного чаще ввода. Значит ввод все же является более сервисной функцией и логично его вынести в отдельное место.

[dordzhiev]

Это скорее способ быстрее вывести пользователя из себя…

[stykhonko]

Автор смелый человек, если не боится разрушить устоявшиеся стереотипы. Большинство людей консерваторы, которые ничего не хотели бы менять в вещах, которые используют, они не хотят видеть даже очевидных преимуществ новых решений. Таким людям нужно прививать новое насильно, иначе они никогда не поймут, что лучше. В начале они будут несогласны, но потом, когда осознают, что стало действительно удобней, они будут очень благодарны.

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

[j_brewer]

Спасибо за комментарий по делу.

Можно поинтересоваться, что вас смущает в подобного вида решениях? Нестандартность полей ввода?

Если бы поля ввода были стандартными, но после заполнения исчезали, было бы понятнее или тоже смущало бы?

[stykhonko]

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

На мой взгляд, здесь нужно искать другое решение. Как Вам вариант увеличения прозрачности обводки поля, которое приходит в норму, при клике по нему?

На счет Вашего предложения: интересный вариант, если я, конечно, правильно понял, что Вы имеете ввиду. Думаю, так было бы намного лучше.

[j_brewer]

С прозрачными краями возникает та же проблема — их будет плохо видно при слабом контрасте. В этом плане заливка с теми же параметрами прозрачности гораздо более заметна. Если же края сделать достаточно непрозрачными, чтоб сразу было видно, возникнет та проблема, от которой я хотел избавиться — огромное количество линий.

Возможно решением будет более темная заливка полей. Надо будет поэкспериментировать.

[Tishka17]

А я на последней картинки увидел только надписи. Поля ввода я вообще не увидел, ну кроме голубеньких разве что

[Alinaki]

Какая глупая странная статья.

Ну с чего вы решили, что поля ввода без рамочек — это понятно? Их надо лишь слегка аккуратнее сделать, используя стандартные CSS-правила для границ.

Вы очень правильно сами и выразились — «убивание элементов».

[j_brewer]

Какая глупая странная привычка, зачеркивать свою мысль вместо того, чтоб ее стереть. Вы на бумаге пишете?

[Alinaki]

Да.

[denver]

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

Ваш стиль тоже утилитарен, просто по-своему, «нескучное» это для меня что-то вроде такого

dribbble.com/shots/195122-Paper-Login-2

Что касается второй части — интересная идея. И вроде не зависит от первой части. Главное просто сделать индикацию незаполненных/ошибочных полей. Может быть и так:


Мне кажется только ни в коем случае не стоит делать вид что заполненное поле ввода уже не поле ввода.

[denver]

Пардон, вторая картинка отсюда:
dribbble.com/shots/224601-Live-Validation-Progress

[j_brewer]

Интересные примеры, спасибо.

Во втором мне не нравится, что текст в заполненных полях сливается с фоном. Сложно быстро просканировать взглядом форму на предмет ошибок. Но в целом тоже очень приятные улучшения: убрали все горизонтальные рамки и устранили рябь в глазах.

[Wonder]

В приведённом примере индикация заполненного поля не корректна — так должно выглядеть disabled-поле. Недоступное для заполнения. А у нас же оно вполне доступно для редактирования.

[igolovin]

Я тоже думаю, что перекрашивание полей формы — не есть улучшение формы. Например, я сатанею, когда какой-то из параметров не введен/введен неверно, форма мне об этом радостно сообщает и возвращает назад к ПУСТОЙ ФОРМЕ, а не предлагает исправить нужный элемент. Вот это улучшение.

[j_brewer]

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

[lugansk]

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

[j_brewer]

Ну прямо-таки и нельзя? Подобные формы уже давно работают и ни у кого не вызывают спазмов (посмотрите примеры скриншотов выше).

[despoth]

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

[j_brewer]

Насчет бабушки — возможно. Но насчет деградации я бы поспорил. Каким это образом данный подход ведет к деградации?