This article is about the not so difficult way of developing interactive elements almost immediately in the browser, if you are not a developer.



Interface animation is now in trend. There are several reasons: improved usability and increased attractiveness of the product as a whole. And the third is the development of tools for animating in the global IT market. Now there are so many different utilities to revive any design / prototype that it would be strange to pass by such a movement, you need to acquire skills. Tools set, I will not list all. But I will mention one specific ...
')
I work at Axure. The most significant plus for me was in it due to the ability to create interfaces almost immediately in the browser. I see all the elements, fonts, indents at once in “alert”, barely having time to bring them into the layout. I know that their developers will see the same. I know that in 99% nothing “breaks” in the design.

Today we are talking about how to make a simple interactive / animated form of billing data entry. I must say that the creation of animation in Axure is not quite standard. There is no usual timeline with projection on layers, such as in After Effects. There is only a sequence of events that runs at a certain action. Between them, you can insert timings "Delay" and specify a pause in milliseconds. Animation in Axure seems a bit geeky: you can figure it out only if you penetrate deep into the process itself.

See how it works:


LIVE DEMO : www.cardinteractive.pro/demo

I invented this task myself, in the framework of the acquisition of skills. I got a flip effect and searched for objects from the real world that best suit this kind of animation. What do we most often have in our hands to see the contents of the back side? Credit card fits great. We enter data from the front side, then turn it over to enter the CVC code. I have long held the position: animation on electronic devices must be based on real-world physics. Then we like it and not annoying. We hardly notice it, everything happens by itself. And from working with the product remains a warm feeling. So usability works well-thought-out animation. That is why it is important and why it is in trend.

Case : online credit card data entry form
The task : to make a convenient browser version of the credit card with all the necessary inputs, transitions between them, understandable animation to improve usability.
Bonus : Axure source in the form of * .rp file can be found at the very end

Action plan:

• make a simple and attractive design
• simulate the definition of the card type after entering the first 4 digits (for example, Mastercard)
• automate the refocusing between different data entry fields (for example, the Cardholder input focus after entering the card validity period)
• promptly suggest entering the CVC code on the reverse side, after entering the full name
• try to get rid of possible unnecessary actions by the user (for example, fewer clicks in obvious places)

General concept

The source is based on a dynamic panel consisting of 3 states. The front side (State1), reverse (2), and additional side (3) with confirmation that the data is accepted. Inside each nested group State1 ... 3 contains design elements.

Design

For web interfaces, I always use a 10px grid - it's more convenient for me to read indents and dimensions. So I tried to make them multiples of 10. The logo is temporary, I did not want to resort to the name of the existing banks. The card casts a shadow down at an angle of 90 to add a bit of a sense of space. Shadow options: x = 0, y = 25, blur = 45, # 000000, alpha = 0.35

Obverse (State1)



Contains graphics, hidden Mastercard logo, hidden card reversal button for entering CVC code (8). These two objects will appear under certain conditions. And the condition check will be tied up with events. For example, if the length of the entered data in the Cardholder name field is greater than or equal to 7, then we show the reversal and CVC input button on the reverse side. Of course, in real life, the developer will check the completeness of all the fields, but in my case this is excessive perfectionism.

Input fields (1-7) are two-component. A little bit strange, but Axure doesn’t allow us to really get around with CSS for html inputs. It's good that you can turn off the border and give it a more modern look. Therefore, an additional white rectangle passes under the inputs, and they themselves take precedence over and with the “Hide border” checkbox. This rectangle will change the style at the moment of onFocus on the input, so no one will guess about the use of two related objects.

Reverse (State2)



Everything is simple here. The “magnetic” strip is drawn for more realism using the same rectangle drawer. Of the important controls, only the CVC field is here. The payment confirmation button is cleverly hidden behind the card body. She leaves with a bounce effect (in fact, a simple ease would be enough) only after checking the condition “Characters in the CVC field> = 3”.

Confirmation Party (State3)



And the simplest is the “3rd party”. When the card is turned back, it seems to be back, but the contents are different. This is the side of confirming a positive experience. Everything went well. Items at least. There are no functions or events. Such an effect should add attractiveness to the overall composition, in addition to the positive impact on the user experience.

By the way, if you use Figma , I recommend paying attention to our ready-made design systems . They help freelancers complete more orders per month, programmers can create beautiful applications on their own, and the Timlids run sprints faster using ready-made design systems for teamwork.

And if you have a serious project, our team is ready to deploy a design system within the organization based on our developments and tailor it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken

Map Type Definition

This is an imitation of recognition of the payment service after entering the first 4 digits. Since this is only a prototype, I use the onLostFocus function for the first input of the card number + content check. If “content = true” and the focus moves to the next 4 digits, then display the logo.

Refocus on the next input

Occurs due to the onTextChange function. After each entered number we check the number and if there are already 4, then a space is between them. Visually, this is how it looks, but technically everything had to be very complicated. Why, you can find out below in Known bugs. I think there is something to improve, but the overall look will not change. Considered that the potentially spent time is not worth it. On the basis of onTextChange, transitions are also made between the other fields (for example, a jump from the date to the full name).

Reverse and CVC input

I give the opportunity to flip the map and fill in the last field only after checking to enter at least part of the name. I check the onKeyUp function. That is, whenever we release the button on the keyboard, the condition check is started and if something is entered, the card flip button appears. Ideally, of course, also check the clearing of the Cardholder field and then hide the button. But we agreed: without perfectionism.

Ux

• I refused to click on the reversal button of the card. I believe that if the user reached out for her, it means that she reports that the rest is filled correctly. The button will work on hover.
• Similarly, a click is not needed to focus on the CVC field. Enough to hover the cursor. The solution is not perfect. The reason described below ...
• The payment confirmation button “flies” to the right of the card. Thus, the animation shows a causal relationship and a smaller cursor path from the CVC input to the button.

Known bugs

• If you drive in the card number very quickly, then the autofocus will start jamming on the next 4 digits. Similarly with the removal. The solution would be to leave only one input and somehow teach Akshur to put a space after the introduction of every 4 digits of the card number, but I did not succeed. Therefore, the 4th independent inputs were used only for the convenience of entering numbers due to breaks.
  
  
• I could not do autofocus on CVC when the card was flipped. I could not manage to bind the onPanelStateChange function synchronously with checking that we are now in State1 (and only in the state). Ideally, I would like to do this: check that there is a coup to State2, wait for delay = 100, and then autofocus the CVC field, but alas. As a half measure, the focus only works when onHover. But I still commit to drag there with the mouse.

Download RP source for Axure 8 @Gumroad • Live demo