Google's smart compose, trying to recreate in Axure. HELP

Hello,
I am designing a searching solution for my product inspired by Google’s smart compose, used in gmail. See below:

I would like advice/help in mocking this. I am starting out with obviously a text field with hint but I am unsure where to go from there. How can I get predictive text INSIDE the text box and not in a dropdown? How can I fake smart suggestions after the user types something?

Fun challenge!

My first idea was to set the value of the text area widget to rich text, and style the hint with gray font color. But, text areas don’t have a “rich text” option like basic widgets have. So, I tried using a rectangle widget to mirror the text of the input widget, and that seems to work pretty well.

Smart Compose.rp (105.2 KB)

Here is the basic approach:

  • There is a Text Area widget (named “Input”) for getting input, and a “mirror” Rectangle widget (named “Suggestion”) of same size, location and styling. The “Suggestion” is hidden and placed behind Input.
  • The Key Up event of Input sets the text of Suggestion widget to match it. So, whatever gets entered is copied to the mirror.
  • The Key Up event also tests for predictive rules to trigger a “smart hint”. It does this with a series of cases that test the last N chars of the input text for a string that is N chars long. (So in your example, if user enters, " at m" that is 5 characters including spaces.) The case looks at the last 5 chars of the input text only to see if it equals " at m" (it also tests both strings as lower case (in most cases!) so that " At m" is treated same as " at m".)
  • When one of these cases is true, it sets the text on Suggestion using the SET TO rich text option. This provides for font styling including color, so it sets the first part of the text value to match the input text (in black), then adds the hint text in gray. It shows Suggestion and brings it to front with the visual effect that the hint text just appears at the end of the input text.
  • To accept the hint, the user presses the Tab key, just like Gmail. What happens in the prototype HTML is the next higher widget in the widget order stack gets focus when the Tab key is pressed in the browser. To handle this, I created a widget (named buttonCompose) and placed it right above the Input widget in the OUTLINE pane. I use its Got Focus event to transfer the text with hint from Suggestion to Input. Then it hides Suggestion and sets the focus to Input again so the user can keep typing.

Also…

  • The Suggestion widget is styled based on how my Google Chrome browser on Win10 styles the Text Area widget. You may need to adjust for your browser and OS.
  • The buttonCompose widget is styled all white with no border so it is not visible on the white page (I could have also just set its opacity to zero.) I can’t just hide it or it won’t get focus, and I can’t place it behind Input or it wouldn’t get next focus after Input. I noticed that when a hint was triggered the buttonCompose would get a faint blue outline–created by the browser to show which interactive element has focus. So I also added an all-white “mask” widget above buttonCompose to obscure it.
  • I’m imagining this demo could be improved by allowing for a table or repeater to serve as a “hint database” with pairs of hint triggers and text suggestions. It could have a “function interaction” to test all of its hint triggers for matches. In this way the page would be much easier to edit and add/change what gets smart composed.
1 Like

WOW awesome work. I’m gonna play around with this, this is super helpful. I am fairly new to Axure so of course I pick a complex beast for my first attempt at prototyping.

Thank you!

great, everything is really possible with this software, really great

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.