Pull to refresh

Comments 33

Очевидная проблема — пользователь может не догадаться что карту надо перевернуть. Или догадается, но как это сделать не поймет. Карта должна переворачиваться не по наведению мыши, а по enter или tab. Это логично еще и потому, что пользователь только что использовал клавиатуру, а вы предлагаете, чтобы продолжить, воспользоваться мышкой.

Я правильно понял — адаптивности нет? Как это будет выглядеть на узких и высоких экранах смартфонов?
Я согласен с тем, что если пользователь использовал до этого клавиатуру — то переключение на мышку ломает пользовательский опыт. И кстати, вводит имени необязательное поле, если оно не сильно нужно — то можно его убрать. Тогда мы сможем автоматически переворачивать карту после ввода срока действия карты.
Адаптивность добавляется средствами Axure очень легко и под любые форматы экранов.
Я уверен, что адаптивность не должна добавляться разработчиком или его инструментами, об этом должен думать дизайнер, заранее.
У меня одного подобные альтернативные формы, в которые предлагается вводить информацию уровня номера кредитной карты, вызывают скорее недоверие, нежели восторг элегантностью решения?
не волнуйтесь. вбивать лучше абракадабру, для личного спокойствия.
Иными словами, возможность применения этой анимации в реальном проекте исключена изначально?
отнюдь! есть HTML код с полностью интегрируемой анимацией. ссылка в конце поста. однако лишний раз напомню — Axure выдает хоть и валидный, но не очень семантически корректный код, к сожалению
Простите, но вы видимо не так давно работаете с axure. В реальном проекте применение этой, вне всякого сомнения, замечательной программы есть ничто иное как костыль.
Попробуйте, использовав построенный в Axure код позже поправить или внести изменения БЕЗ Axure (мы же о реальных проектах, верно?)
Познаете всю боль поисков описания того или иного свойства во всех файлах, которые акшура тащит за собой в даже самую простую страничку.
К сожалению, Axure это лучшее средство построения полнофункциональных прототипов. Но только прототипов.
С Вами согласен — это сложно, но отнюдь не есть «невыполнимо». У меня в практике сторонние программисты отлично интегрировали этот код, предварительно «причесав». Просто есть ленивый прогер, а есть тот который скажет «о! говнокод это лучше чем psd». Я писал о многой боли по Акшуру и вообще, не так давно https://habrahabr.ru/post/330448/
И конечно жду тот светлый день когда разрабы Акшуры наконец-то докумекают сделать экспорт чистого и валидного кода. Хоть для работы руками, хоть для любой безболезненной интеграции. И их часики тикают… А конкуренты не дремлют!
Мне кажется, что такой код Акшура формирует не просто так, а именно чтобы код не использовали в реальных продуктах.
Для меня причина не использовать его это невозможность нормального скрещивания функций. Приведу пример: допустим есть две схожих по функционалу модели построенных в Акшуре.
Применены одинаковые функции, но реализация — разная. Боль начинается, когда нужно их применить в одном проекте — файлы то с описанием модулей одноименные и названы в коде одинаково. Это жесть( Выход на костылях — если есть исходник Акшуры, совместить их на уровне одного прототипа, родить новый машинный код и вставлять в проект уже его…
+, что очень печально, Акшура не позволяет открыть уже готовый HTML файл и внести изменения.
Короче, пока для меня только как софт для прототипов (хотя, замечу, что я не кодер. я PM, который просто любит добавлять в ТЗ прототипы из Акшуры).

А на счет конкурентов, есть ли что то схожее по функционалу с Акшурой, но уже с возможностью работы с HTML? я бы попробовал…
Очень странная антифича — делать код специально страшным, чтобы пресечь его использование. Наоборот, им стоило бы подумать как его довести до ума, чтобы расширить возможности интегрирования с разработчиками или другими продуктами. Я еще какое-то время буду в Акшуре, тк у меня большинство задач по десктопным интерфейсам. Но если развития чувствоваться не будет — придётся задуматься о Framer'e. Там авось и экспорт в HTML подоспеет. Под мобайл он уже чертовски хорош в плане анимации. И экспорт в xcode это вопрос ближайшего квартала, как мне кажется. Webflow пробовали? Есть схожость с Акшурой, есть экспорт валидного кода, но он онлайновый инструмент.

Зачем?
Мне нужно просто ввести данные. Я не хочу смотреть, какую крутую анимацию мог зафигачить дизайнер.
Кажется, единственный наворот, который нужен — автоперевод имени в капс (и, вероятно, предупреждение, когда вводишь русские буквы).
Вариант дизайна, когда показана лицевая сторона карты и торчит краешек обратной с CVV — на голову превосходит вашу разработку.

Красиво — может быть, на любителя. Но принципиально не удобно: из того, что сразу на глаза попалось, нельзя даже просто вставить готовый номер карты.
Форма ввода платежной карты имеет множество нюансов реализации, без которых она будет работать некорретно.
К примеру, у вас в полях ввода отсутствует атрибут autocomplete=«off», т.е. браузер будет запоминать значения полей карты и может восстанавливать их при повторном открытии страницы.
Красивости и анимации конечно хорошо, но всё же лучше простое решение, вот один из примеров:
image

P.S. Извиняюсь за изображение в комментарии

Кстати, конкретно это скорее всего не лучшее. Потенциальные проблемы:


  1. 4 поля для номера — как будет работать paste?
  2. Как насчёт 20-значного номера карты?
    Но заведомо лучше, чем в статье :-)
  1. С помощью js можно реализовать фичу ctrl + v с последующей вставкой в следующие поля номера карты.
  2. На сколько много таких карт, и доступны ли этим картам оплата в интернете? (потому что все используют 4x4).

На самом деле всё реализуемо с помощью js, но с точки зрения юзабилити в моём примере без анимации видно, что и где надо вводить, переключаясь обычным Tab'ом.

Одно поле ввода для номера карты решает все проблемы гораздо проще :-)


20-значные — это, к примеру, некоторая часть сберовских momentum. Которые достаточно распространены: во всяком случае, мне однажды довелось столкнуться с проблемой — я не мог человеку заслать денег на такую карту, т.к. в интернет-банке моего банка вводилось только 16 цифр.


Да, и насколько я помню, 20 знаков — в рамках стандартов maestro, это не самодеятельность сбера.


Упс… Перепутал, не 20, а 18-значные. Прошу прощения.

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

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

Нет интеграции с автозаполнением реквизитов карты (например из Google Chrome)
Ух ты, а им пользуются люди? Мне вот стрёно и я карты никогда не запоминаю.
даже если не пользуются, это стандарная фича браузера, её нельзя ломать только ради дизайна
Я даю возможность перевернуть карту и заполнить последнее поле только после проверки на ввод хотя бы части имени

1. Можно ввести только cardholder name, и уже появится возможность переворота карты, хотя number и expires не заполнены.

2. Если очистить одно из полей в номере карты, то фокус автоматически сместится на предыдущее поле, причём в этом состоянии (если ничего далее не удалять) заблокирован ввод символов: текущее поле ввода из 4-ёх цифр, фокус на следующее не смещается (даже при нажатии tab).
если длина введенных данных в поле Cardholder name больше или равно 7

7 это много, есть люди для которых это значение равно 2
UFO just landed and posted this here
Выглядит симпатично, но мне кажется, нужно серьезно поработать над доступностью. Лично я, например, подобные формы заполняю только с клавиатуры, и на некоторые (самые отзывчивые) формы платежей у меня уходит порядка 4-6 секунд. Попробовал провернуть такое на вашей демке и с разочарованием обнаружил, что без беспомощного елозенья мышкой обойтись не получится.
Ну вот да, это пожалуй единственное разумное применения для флип-эффекта.
Всё прочее виденное только раздражало.

Когда столкнулся с надобностью, нашел вот это: https://github.com/jessepollak/card

Работает и красиво. Попробую вашу штуку.
Понабежали программисты и всё забраковали) Хороший дизайн. Понятно, что его можно улучшить, но для массового юзера это гораздо понятней, чем статичный дизайн с инструкциями и картинками. Помнится я когда впервые вбивал данные карты в интернете минут 30 параллельно гуглил, что это за циферки и какие же таки нужно вбивать.
Sign up to leave a comment.

Articles