Comments 53
По-моему, самое главное в фаормах, да и влюбом интерфейсе — не эстетическая красота, а наглядность и интуитивная понятность.
вот предпоследняя картинка не демонстрирует самый важный параметр полей — обязательность заполнения.
вот предпоследняя картинка не демонстрирует самый важный параметр полей — обязательность заполнения.
Если вы не обратили внимание, то на изначальном варианте тоже нет обозначения обязательных полей. Статья совершенно не про это.
А о чем тогда?
Про это.
Подкрасить оранжевым?
Оригинальная форма удобнее всех представленных ниже вариаций.
Удобнее или привычнее? Обоснуйте, пожалуйста — на самом деле интересно.
вы загнали собеседника прямо в открытый тупик))
Тоже хочется узнать ответ: «Удобнее или привычнее»?
Тоже хочется узнать ответ: «Удобнее или привычнее»?
Проблема в том, что вы меняете визуальное представление элементов управления. Поле для ввода текста не должно выглядеть как элемент оформления.
Как я пойму, что в голубой прямоугольник надо вводить текст?
Как я пойму, что в голубой прямоугольник надо вводить текст?
Прямоугольник стоит прямо напротив лейбла — больше, собственно, вводить информацию некуда. Ну и опять же, все просто привыкли, что поле ввода — это прямоугольник в рамке. Просто потому, что так было всегда.
Я не говорю, что моя концепция однозначно лучше. Мне как раз интересно провести эксперимент и обсудить новый подход.
Я не говорю, что моя концепция однозначно лучше. Мне как раз интересно провести эксперимент и обсудить новый подход.
Ещё можно группы полей визуально разделить, т.е. блок имени отсуп блок адреса ну и так далее.
Предпочитаю делать формы визуально поинтереснее и посвободнее.
Вот недавно была задача нарисовать форму заказа товара для интернет магазина:
(по клику — хайрез)
Вот недавно была задача нарисовать форму заказа товара для интернет магазина:
(по клику — хайрез)
А у вас баг — выбрана EMS, но радиобаттон «наличными курьеру» недоступен, хотя хинт говорит о другом :)
У вас там баг — способ доставки указан EMS, а сопсоб оплаты «наличными курьеру» всё-равно недоступен.
Радиобоксы удобнее.
Все перед глазами, выбор в один клик. Первая особенность на страничке «оплаты» особенно важна, имхо.
Все перед глазами, выбор в один клик. Первая особенность на страничке «оплаты» особенно важна, имхо.
Пришли к выводу, что таким образом больше возможностей для кастомизации, да и как-то нагляднее — сразу видно, что есть, чего нет, что добавилось, какие ограничения. И т.к., способов оплаты сильно больше не предвидится, решили остановится на этом варинате.
кхм…
по-моему, комбобоксы сознательно заменены на радиобоксы.
при небольшом кол-ве вариантов радиобоксы — точно лучше.
по-моему, комбобоксы сознательно заменены на радиобоксы.
при небольшом кол-ве вариантов радиобоксы — точно лучше.
Спасибо. Это как раз основной недостаток, который я вижу. На неконтрастных мониторах возможно будет плохо видно поля. На примере вообще серый фон, что еще сильнее уменьшает контраст.
Да, мы тоже так поиграли в анкете iskariot.ru/portrait/ — чтобы была похожа на анкету. Вот только с селектами не совладали (на комбик не хотелось менять).
Поздравляю, Вы открыли для себя inplace-редактирование.
Однако спешу огорчить, это ни разу не удобнее и тем более не понятнее для пользователя.
Приведу свежий пример, который частично касается предлагаемого решения. Я уже давно пользуюсь Google Contacts и все в нем меня устраивало. Но однажды после редизайна он стал использовать тот самый способ редактирования который предлагаете Вы. В результате теперь, когда меня просят дать телефоны какого-то человека вместо того чтобы выделить часть страницы и скопировать все в аську мне приходится поэлементно копировать каждый телефон, фио, должность, email и т.д.
Формы ввода на то и формы, что они визуально подсказывают что сюда надо вводить данные! Отображать данные нужно в нередактируемых виджетах. А если засунуть включенный утюг в холодильник — получится конечно что-то необычное и инновационное, но вреда будет больше чем пользы.
Однако спешу огорчить, это ни разу не удобнее и тем более не понятнее для пользователя.
Приведу свежий пример, который частично касается предлагаемого решения. Я уже давно пользуюсь Google Contacts и все в нем меня устраивало. Но однажды после редизайна он стал использовать тот самый способ редактирования который предлагаете Вы. В результате теперь, когда меня просят дать телефоны какого-то человека вместо того чтобы выделить часть страницы и скопировать все в аську мне приходится поэлементно копировать каждый телефон, фио, должность, email и т.д.
Формы ввода на то и формы, что они визуально подсказывают что сюда надо вводить данные! Отображать данные нужно в нередактируемых виджетах. А если засунуть включенный утюг в холодильник — получится конечно что-то необычное и инновационное, но вреда будет больше чем пользы.
Не совсем понял ваш пример. Получается же как раз наоборот: если у вас все элементы в отдельных (стандартных) полях, то их надо копировать по одному. В моем примере после заполнения инпуты становятся обычным (но активным) текстом — т.е. их можно скопировать все сразу.
Пример состоит в том, что раньше мухи были отдельно, котлеты отдельно (просмотр и редактирование), а в новом дизайне их смешали. Ровно то же самое предлагаете и Вы.
Мне кажется что если окинуть широким взглядом большинство веб-приложений и сайтов, то мы увидим, что отображение данных требуется намного чаще ввода. Значит ввод все же является более сервисной функцией и логично его вынести в отдельное место.
Мне кажется что если окинуть широким взглядом большинство веб-приложений и сайтов, то мы увидим, что отображение данных требуется намного чаще ввода. Значит ввод все же является более сервисной функцией и логично его вынести в отдельное место.
Это скорее способ быстрее вывести пользователя из себя…
Автор смелый человек, если не боится разрушить устоявшиеся стереотипы. Большинство людей консерваторы, которые ничего не хотели бы менять в вещах, которые используют, они не хотят видеть даже очевидных преимуществ новых решений. Таким людям нужно прививать новое насильно, иначе они никогда не поймут, что лучше. В начале они будут несогласны, но потом, когда осознают, что стало действительно удобней, они будут очень благодарны.
Я не являюсь консерватором и всегда ищу преимущества в новых решениях, однако, Ваше решение для меня, не является удобным. На страницах, где используется подобное, я обычно теряюсь и очень долго соображаю, куда нужно вводить информацию, для меня это не упрощает, а наоборот усложняет восприятие информации.
Я не являюсь консерватором и всегда ищу преимущества в новых решениях, однако, Ваше решение для меня, не является удобным. На страницах, где используется подобное, я обычно теряюсь и очень долго соображаю, куда нужно вводить информацию, для меня это не упрощает, а наоборот усложняет восприятие информации.
Меня смущает, что поля для ввода сливаются с окружающим фоном, хотя, возможно здесь дело в моих настройках монитора. Они выделяются, но плохо заметно, приходится напрягать лишний раз зрение.
На мой взгляд, здесь нужно искать другое решение. Как Вам вариант увеличения прозрачности обводки поля, которое приходит в норму, при клике по нему?
На счет Вашего предложения: интересный вариант, если я, конечно, правильно понял, что Вы имеете ввиду. Думаю, так было бы намного лучше.
На мой взгляд, здесь нужно искать другое решение. Как Вам вариант увеличения прозрачности обводки поля, которое приходит в норму, при клике по нему?
На счет Вашего предложения: интересный вариант, если я, конечно, правильно понял, что Вы имеете ввиду. Думаю, так было бы намного лучше.
С прозрачными краями возникает та же проблема — их будет плохо видно при слабом контрасте. В этом плане заливка с теми же параметрами прозрачности гораздо более заметна. Если же края сделать достаточно непрозрачными, чтоб сразу было видно, возникнет та проблема, от которой я хотел избавиться — огромное количество линий.
Возможно решением будет более темная заливка полей. Надо будет поэкспериментировать.
Возможно решением будет более темная заливка полей. Надо будет поэкспериментировать.
А я на последней картинки увидел только надписи. Поля ввода я вообще не увидел, ну кроме голубеньких разве что
Какая глупая странная статья.
Ну с чего вы решили, что поля ввода без рамочек — это понятно? Их надо лишь слегка аккуратнее сделать, используя стандартные CSS-правила для границ.
Вы очень правильно сами и выразились — «убивание элементов».
Ну с чего вы решили, что поля ввода без рамочек — это понятно? Их надо лишь слегка аккуратнее сделать, используя стандартные CSS-правила для границ.
Вы очень правильно сами и выразились — «убивание элементов».
В целом, первая часть улучшений — скорее дизайнерская. Стандартные элементы — классика, на то и стандартные, чтобы быть компромиссом между удобством ввода и… вывода :) рамочки инпутов, например, правильно выглядят и при печати, в то время как задний фон браузерами обычно удаляется.
Ваш стиль тоже утилитарен, просто по-своему, «нескучное» это для меня что-то вроде такого
dribbble.com/shots/195122-Paper-Login-2
Что касается второй части — интересная идея. И вроде не зависит от первой части. Главное просто сделать индикацию незаполненных/ошибочных полей. Может быть и так:
Мне кажется только ни в коем случае не стоит делать вид что заполненное поле ввода уже не поле ввода.
Ваш стиль тоже утилитарен, просто по-своему, «нескучное» это для меня что-то вроде такого
dribbble.com/shots/195122-Paper-Login-2
Что касается второй части — интересная идея. И вроде не зависит от первой части. Главное просто сделать индикацию незаполненных/ошибочных полей. Может быть и так:
Мне кажется только ни в коем случае не стоит делать вид что заполненное поле ввода уже не поле ввода.
Пардон, вторая картинка отсюда:
dribbble.com/shots/224601-Live-Validation-Progress
dribbble.com/shots/224601-Live-Validation-Progress
Интересные примеры, спасибо.
Во втором мне не нравится, что текст в заполненных полях сливается с фоном. Сложно быстро просканировать взглядом форму на предмет ошибок. Но в целом тоже очень приятные улучшения: убрали все горизонтальные рамки и устранили рябь в глазах.
Во втором мне не нравится, что текст в заполненных полях сливается с фоном. Сложно быстро просканировать взглядом форму на предмет ошибок. Но в целом тоже очень приятные улучшения: убрали все горизонтальные рамки и устранили рябь в глазах.
В приведённом примере индикация заполненного поля не корректна — так должно выглядеть disabled-поле. Недоступное для заполнения. А у нас же оно вполне доступно для редактирования.
Я тоже думаю, что перекрашивание полей формы — не есть улучшение формы. Например, я сатанею, когда какой-то из параметров не введен/введен неверно, форма мне об этом радостно сообщает и возвращает назад к ПУСТОЙ ФОРМЕ, а не предлагает исправить нужный элемент. Вот это улучшение.
Эти замечательные голубые прямоугольники станут невидимыми, если кто-то откроет страницу с такой формой на ноутбуке, сидя на улице в солнечный день. Кроме того, как уже заметили, многие пользователи просто не поймут, что прямоугольники являются полями формы.
Border'ы нельзя скрывать.
Border'ы нельзя скрывать.
Без рамочек не торт. С точки зрения банальной юзабилической эрудиции представление лейблов и полей для ввода в одинаковом виде (без рамок или цветовой дифференциации штанов) — не есть хорошо, мистер Дюк. Бабушка из Сыктывкара не вштырит где там тупо текст от сайта, а где — тот, который она вводила и хочет изменить. Подобные алогичные и излишне вычурные упрощизмы ведут к тотальной дергадации сознания пользователей, и становится уныло.
Sign up to leave a comment.
Нескучные формы