Placeholder or dummy text can be useful in quick mockups to show where information can be inputted. But what if you wanted to place actual, editable input fields in your prototype for user testing purposes?
Input fields in Atomic let you do just this. Add an input field to the area of your prototype you’d like to be editable and choose the input type. This could be text such as their email address, characters for setting a password or numbers for choosing a value.
While these could be static text boxes with pre filled text, inputting your own live data helps make the prototype feel all the more real.
Using text inputs in animation
While input fields are handy for inputting information, animating them brings a whole new level of interaction and activity within Preview.
Text fields can be animated the same as any other element can – by duplicating the page or copying and pasting across – and then altering any of the properties you’d like to change.
Choosing the type of input
Depending on the context of the input field, you may want to specify which type of characters accepted in the field.
For example an email input will bring up the email keyboard on mobile preview, where a password input allows you to input dots to represent a password.
Want the user to type in something in particular? Adding a hint lets you specify some placeholder text that will be replaced when the user types.
Show or hide password
Password fields often include some kind of show or hide functionality. This is a small touch of UX that helps to instil some confidence that the password typed in is what the user intended.
Add a little show or hide icon (or button), and use a hotspot to transition to the state where the password is shown. To do this, just update the text field on the second state from being a ‘password’ field to a ‘text’ field.
Input fields was recently released as part of our 2 day hack-fest.
Have a suggestion for us that we could work on in the next one? Let us know!