New to Axure, looking to recreate a "minimal form" interface

Hey all — I’m new to Axure, having added it to our team’s toolkit so we can do some more realistic prototyping of forms (compared with Sketch+InVision).

We’re looking to build out a concept that’s based largely on this minimal form interface. Importantly, I want the ENTER or RETURN key to proceed to the next field — after validating the current one, and I want an animation on the progress bar (I have a hunch that’s important for communicating what it does, more than animating the question text, etc.). Field placeholder copy should change on focus, and a “press ENTER” message should show up on the right once it’s focused.

Overall I want to keep people on the keyboard, flying through this mighty form.

Does this seem feasible? Any hints/tips are greatly appreciated! Thank you!

Yes, you can use an OnKeyUp interaction to detect whether the key that has been pressed is a Return, then use that to check conditions on the field and fire show/hide on a validation message or move the focus to the next field.

1 Like

For Text Field and Text Area widgets, you can assign a “Submit button” (right-click the widget and select “Assign Submit Button” or click the three-dot menu to right of the widget name in the Interactions pane.) The Click or Tap event of this button will be fired when the Enter key is pressed while the field is in focus. Use this submit button to validate your field’s contents and set the focus to the next field. The “submit button” can be any widget, it does not need to be an actual “Button” widget, and it can be hidden.

Your example has an arrow which would be appropriate to use for the submit button, as the user could either click on it or hit Enter on the keyboard. I’ve done some questionnaire prototypes similar to this, so I adapted one to use the behavioral styling of your example in this demo:

minimal form survey.rp (127.4 KB)

So, each question gets its own state in a dynamic panel. I put the questions and answers in separate dynamic panels because your example had nice transition animations. Each answer state has a Text Field and arrow “button” in which the field uses the arrow as a submit button. The arrow validates the text field with a simple “blank or not” test, and if non-blank it sets the answer to the next state. (You can add more cases to make the validation more robust.) When the “answer” dynamic panel changes state, it tests which state and sets the focus on the appropriate text field, changes states of the question and step-number panels and sets the size of the progress bar with an “ease in” animation.

Editing the questions is easily done in the OUTLINE pane by double-clicking on the text object in each state. You can add questions by right-clicking on the panel state and duplicating the state, then likewise add states for the answer and step number. Of course, you could simplify this by placing the questions, answers and step numbers all in the same dynamic panel. If you don’t need to retain the answers (or move backward through the survey) you could also have a single question widget and single text field widget and simply change the text of those as the arrow button is clicked.

4 Likes

Thanks @mbc66, I didn’t know the submit button function could be used like that.