"Live type" / Typewriter animation that looks like user is typing text
...to demonstrate how an interface interacts with text input. Basically would show how a form might be filled out or how search might work
Derek Blancey
shared this idea
12 comments
-
Philip
commented
This would be great as mocking any kind of input/form interaction is a major use case in UI/UX design.
E. g. I'm working on a search bar right now where input.change triggers multiple UI elements to react depending on the input.value string which I cannot mock as XD doesn't support anything like that.
-
Tornike Chkhvimiani commented
Woud be great to see typing function in the prototyping mode. It could be made by combining text boxes and components (By using states). This feature needs some advanced insights to be clearly sorted, but in live, we will use this functionality in our user test.
-
Anonymous
commented
Would Like to know how live typing animation can be done using Adobe XD
-
Samantha Glocker
commented
I think as a first step, and for faster implementation, a "mock" version of simulated typing would be brilliant. One mock I'm working on now really needs simulated typing to make it look and feel real, but it doesn't need more than that.
I think actual text input opens up questions for variables, and reuse of the typed text, and is a much bigger question so an entirely different feature.
So in short: Simulated typing as part of Auto-animate - yes please, ASAP
Text input, variables, and reuse: Might be nice, but later please 😊
-
Rashid Alowaisheer
commented
Animate text/typing for individual text layers. for example when prototyping a form, it would help to animate text-typing as a trigger to change UI element. or like showing a "username is not usable" message while typing it.
-
Paul Seymour
commented
I'm attempting to do this now, to simulate voice dictation (i.e. word by word). Head scratcher. If this was built in, it would be amazeballs.
Which leads me to... I think I might have to try out this AE export thing. Auto-animate is great, but there's just too many things that AE is still better at in terms of creating a stand alone demo movie.
-
Deliutak
commented
Would love this option. Either a blinking text cursor animation or actual text field. I'm creating some "write your notes, write your question, etc" fields on a website and would love something more concrete than my mockup "Text here".
-
Joachim Tillessen
commented
I would find the other functionality Daniel proposed far more useful: enabling the user to input text into form elements of prototypes.
-
I've updated the title & description to clarify based on Derek's response.
Thanks for the feedback!
-
Derek Blancey
commented
Just to clarify, on click in the prototype would display and animate the text that was entered.
-
Derek Blancey
commented
I meant more of a 'typewriter' type interaction so when you're giving a demo and you give focus to an input field you would see the type as far as the designer intended and then perhaps show search results. So while designing the prototype the one artboard would have say, and interactive display of 'Olym' and the next artboard would be designed to show the search results with 'Olympics' as the top entry in the results. Perhaps a separate 'Animated Type' tool. Hope that makes sense...
-
AdminDaniel Wabyick
(Admin, Adobe)
commented
Hey Derek,
Thanks for the suggestion! I can interpret the suggestion in a few different ways, so curious exactly what you're thinking.
To me, 'Live Type' meant that the text-fields in the prototype are actually interactive. While to a coworker it meant a 'Typewriter' type of animation transition similar to keynote.
Would be great to get some more detail on what you meant.
Cheers,
-Daniel
