Комментарии 33
Очевидная проблема — пользователь может не догадаться что карту надо перевернуть. Или догадается, но как это сделать не поймет. Карта должна переворачиваться не по наведению мыши, а по enter или tab. Это логично еще и потому, что пользователь только что использовал клавиатуру, а вы предлагаете, чтобы продолжить, воспользоваться мышкой.
Я правильно понял — адаптивности нет? Как это будет выглядеть на узких и высоких экранах смартфонов?
Я правильно понял — адаптивности нет? Как это будет выглядеть на узких и высоких экранах смартфонов?
Я согласен с тем, что если пользователь использовал до этого клавиатуру — то переключение на мышку ломает пользовательский опыт. И кстати, вводит имени необязательное поле, если оно не сильно нужно — то можно его убрать. Тогда мы сможем автоматически переворачивать карту после ввода срока действия карты.
Адаптивность добавляется средствами Axure очень легко и под любые форматы экранов.
У меня одного подобные альтернативные формы, в которые предлагается вводить информацию уровня номера кредитной карты, вызывают скорее недоверие, нежели восторг элегантностью решения?
не волнуйтесь. вбивать лучше абракадабру, для личного спокойствия.
Иными словами, возможность применения этой анимации в реальном проекте исключена изначально?
отнюдь! есть HTML код с полностью интегрируемой анимацией. ссылка в конце поста. однако лишний раз напомню — Axure выдает хоть и валидный, но не очень семантически корректный код, к сожалению
Простите, но вы видимо не так давно работаете с axure. В реальном проекте применение этой, вне всякого сомнения, замечательной программы есть ничто иное как костыль.
Попробуйте, использовав построенный в Axure код позже поправить или внести изменения БЕЗ Axure (мы же о реальных проектах, верно?)
Познаете всю боль поисков описания того или иного свойства во всех файлах, которые акшура тащит за собой в даже самую простую страничку.
К сожалению, Axure это лучшее средство построения полнофункциональных прототипов. Но только прототипов.
Попробуйте, использовав построенный в Axure код позже поправить или внести изменения БЕЗ Axure (мы же о реальных проектах, верно?)
Познаете всю боль поисков описания того или иного свойства во всех файлах, которые акшура тащит за собой в даже самую простую страничку.
К сожалению, Axure это лучшее средство построения полнофункциональных прототипов. Но только прототипов.
С Вами согласен — это сложно, но отнюдь не есть «невыполнимо». У меня в практике сторонние программисты отлично интегрировали этот код, предварительно «причесав». Просто есть ленивый прогер, а есть тот который скажет «о! говнокод это лучше чем psd». Я писал о многой боли по Акшуру и вообще, не так давно https://habrahabr.ru/post/330448/
И конечно жду тот светлый день когда разрабы Акшуры наконец-то докумекают сделать экспорт чистого и валидного кода. Хоть для работы руками, хоть для любой безболезненной интеграции. И их часики тикают… А конкуренты не дремлют!
И конечно жду тот светлый день когда разрабы Акшуры наконец-то докумекают сделать экспорт чистого и валидного кода. Хоть для работы руками, хоть для любой безболезненной интеграции. И их часики тикают… А конкуренты не дремлют!
Мне кажется, что такой код Акшура формирует не просто так, а именно чтобы код не использовали в реальных продуктах.
Для меня причина не использовать его это невозможность нормального скрещивания функций. Приведу пример: допустим есть две схожих по функционалу модели построенных в Акшуре.
Применены одинаковые функции, но реализация — разная. Боль начинается, когда нужно их применить в одном проекте — файлы то с описанием модулей одноименные и названы в коде одинаково. Это жесть( Выход на костылях — если есть исходник Акшуры, совместить их на уровне одного прототипа, родить новый машинный код и вставлять в проект уже его…
+, что очень печально, Акшура не позволяет открыть уже готовый HTML файл и внести изменения.
Короче, пока для меня только как софт для прототипов (хотя, замечу, что я не кодер. я PM, который просто любит добавлять в ТЗ прототипы из Акшуры).
А на счет конкурентов, есть ли что то схожее по функционалу с Акшурой, но уже с возможностью работы с HTML? я бы попробовал…
Для меня причина не использовать его это невозможность нормального скрещивания функций. Приведу пример: допустим есть две схожих по функционалу модели построенных в Акшуре.
Применены одинаковые функции, но реализация — разная. Боль начинается, когда нужно их применить в одном проекте — файлы то с описанием модулей одноименные и названы в коде одинаково. Это жесть( Выход на костылях — если есть исходник Акшуры, совместить их на уровне одного прототипа, родить новый машинный код и вставлять в проект уже его…
+, что очень печально, Акшура не позволяет открыть уже готовый HTML файл и внести изменения.
Короче, пока для меня только как софт для прототипов (хотя, замечу, что я не кодер. я PM, который просто любит добавлять в ТЗ прототипы из Акшуры).
А на счет конкурентов, есть ли что то схожее по функционалу с Акшурой, но уже с возможностью работы с HTML? я бы попробовал…
Очень странная антифича — делать код специально страшным, чтобы пресечь его использование. Наоборот, им стоило бы подумать как его довести до ума, чтобы расширить возможности интегрирования с разработчиками или другими продуктами. Я еще какое-то время буду в Акшуре, тк у меня большинство задач по десктопным интерфейсам. Но если развития чувствоваться не будет — придётся задуматься о Framer'e. Там авось и экспорт в HTML подоспеет. Под мобайл он уже чертовски хорош в плане анимации. И экспорт в xcode это вопрос ближайшего квартала, как мне кажется. Webflow пробовали? Есть схожость с Акшурой, есть экспорт валидного кода, но он онлайновый инструмент.
Зачем?
Мне нужно просто ввести данные. Я не хочу смотреть, какую крутую анимацию мог зафигачить дизайнер.
Кажется, единственный наворот, который нужен — автоперевод имени в капс (и, вероятно, предупреждение, когда вводишь русские буквы).
Вариант дизайна, когда показана лицевая сторона карты и торчит краешек обратной с CVV — на голову превосходит вашу разработку.
Красиво — может быть, на любителя. Но принципиально не удобно: из того, что сразу на глаза попалось, нельзя даже просто вставить готовый номер карты.
Форма ввода платежной карты имеет множество нюансов реализации, без которых она будет работать некорретно.
К примеру, у вас в полях ввода отсутствует атрибут autocomplete=«off», т.е. браузер будет запоминать значения полей карты и может восстанавливать их при повторном открытии страницы.
К примеру, у вас в полях ввода отсутствует атрибут autocomplete=«off», т.е. браузер будет запоминать значения полей карты и может восстанавливать их при повторном открытии страницы.
Красивости и анимации конечно хорошо, но всё же лучше простое решение, вот один из примеров:
P.S. Извиняюсь за изображение в комментарии
P.S. Извиняюсь за изображение в комментарии
Кстати, конкретно это скорее всего не лучшее. Потенциальные проблемы:
- 4 поля для номера — как будет работать paste?
- Как насчёт 20-значного номера карты?
Но заведомо лучше, чем в статье :-)
- С помощью js можно реализовать фичу ctrl + v с последующей вставкой в следующие поля номера карты.
- На сколько много таких карт, и доступны ли этим картам оплата в интернете? (потому что все используют 4x4).
На самом деле всё реализуемо с помощью js, но с точки зрения юзабилити в моём примере без анимации видно, что и где надо вводить, переключаясь обычным Tab'ом.
Одно поле ввода для номера карты решает все проблемы гораздо проще :-)
20-значные — это, к примеру, некоторая часть сберовских momentum. Которые достаточно распространены: во всяком случае, мне однажды довелось столкнуться с проблемой — я не мог человеку заслать денег на такую карту, т.к. в интернет-банке моего банка вводилось только 16 цифр.
Да, и насколько я помню, 20 знаков — в рамках стандартов maestro, это не самодеятельность сбера.
Упс… Перепутал, не 20, а 18-значные. Прошу прощения.
Нет интеграции с автозаполнением реквизитов карты (например из Google Chrome)
Я даю возможность перевернуть карту и заполнить последнее поле только после проверки на ввод хотя бы части имени
1. Можно ввести только cardholder name, и уже появится возможность переворота карты, хотя number и expires не заполнены.
2. Если очистить одно из полей в номере карты, то фокус автоматически сместится на предыдущее поле, причём в этом состоянии (если ничего далее не удалять) заблокирован ввод символов: текущее поле ввода из 4-ёх цифр, фокус на следующее не смещается (даже при нажатии tab).
если длина введенных данных в поле Cardholder name больше или равно 7
7 это много, есть люди для которых это значение равно 2
Подтверждение распространённости проблемы: скрин, ссылка на сайт
НЛО прилетело и опубликовало эту надпись здесь
Выглядит симпатично, но мне кажется, нужно серьезно поработать над доступностью. Лично я, например, подобные формы заполняю только с клавиатуры, и на некоторые (самые отзывчивые) формы платежей у меня уходит порядка 4-6 секунд. Попробовал провернуть такое на вашей демке и с разочарованием обнаружил, что без беспомощного елозенья мышкой обойтись не получится.
Ну вот да, это пожалуй единственное разумное применения для флип-эффекта.
Всё прочее виденное только раздражало.
Всё прочее виденное только раздражало.
Когда столкнулся с надобностью, нашел вот это: https://github.com/jessepollak/card
Работает и красиво. Попробую вашу штуку.
Работает и красиво. Попробую вашу штуку.
Понабежали программисты и всё забраковали) Хороший дизайн. Понятно, что его можно улучшить, но для массового юзера это гораздо понятней, чем статичный дизайн с инструкциями и картинками. Помнится я когда впервые вбивал данные карты в интернете минут 30 параллельно гуглил, что это за циферки и какие же таки нужно вбивать.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Интерактивная кредитка для ввода платежа