Mobile Textfield UX
Mobile offers up many of its own challenges when it comes to UX design. One of the most obvious design challenges is dealing with the limited screen real estate and the relative inaccuracy of tap and gesture input.
Here are some quick ideas for more effective mobile text entry UX. Let me know your thoughts.
Article Edited — 15 July 2015
Medium user @jackstockholm made a great point in response to this post. To paraphrase,
what happens with a right aligned label when the user input becomes too long? It shouldn’t be cut off by the label, and there should be a clear distinction between the label and the input.
These were great points and I’ve had a go at putting together a prototype that addresses these issues. The result is here:
And of course, here is the live view you can test out for yourself.
Original Article — 14 July 2015
Click here to view a live example of the prototype above.
A Closer Look
This is a big improvement on the original UX. The benefit here is that valuable space is not wasted on the label, which on mobile, is particularly useful.
From a UX standpoint this design is great because the label remains visually close to the actual text value entered. This closely ties label with value.
From a graphic design standpoint the label tends to crowd the value entered. It’s difficult to find a good middle ground with label/value placement which works with both short and long input.
Some might consider the animation slightly gratuitous. This might be remedied with a slightly shorter animation duration.
This is my personal favorite. I think from an end user perspective it affords good usability without the use of overly distracting animation.
One of the earliest examples of space saving label treatment. The major downside is that it necessitates a lot of whitespace above the element. This can create a visually unbalanced feel when not all fields are required, and it also means longer forms.
It’s debatable whether this design offers any benefit above the standard input. The only improvement which I can see is that the user has a larger hit area when initially entering text, although this shouldn’t be an issue since clicks/taps on labels should focus the associated textfield anyway.
As always, happy to hear your thoughts.
Happy UXing,
Sophie.
A quick PS
A number of people have asked about how these interactions were created in UX-App.
For the following interaction
This is the associated action block
Here I’m using the focus and blur events which triggers a hide/show animation on the respective label element.
If you’d like more detail then please let me know!
