I have made a lot of custom #UI components for @SkivvrNoCode. In a #NoCode app #UX is very important, and I am paying a lot of attention to interactions.
What should you remember when building your custom controls? As an example, I would use an input control from Skivvr 🧵⬇️ Image
👉 Different input states
👉 Labels, placeholders, and tooltips
👉 Keyboard interactions
👉 Mouse interactions
👉 Smart behaviours
👉 Autocomplete
👉 Tab order
👉 Hover, Active, Disabled states: how the input will look, when the user interacts with it, or when it's disabled. Defining a style for an Active state is especially important to highlight a focused input. Image
👉 To be clear about the input content, you should use a label, placeholder, or a tooltip, that describes it. Or sometimes even a combination of those.

Skivvr uses either text labels or icon + tooltip. The tooltip has a slight delay, so it will not appear immediately. Image
👉 Keyboard interactions: what should happen if the user presses Escape? Tab? Are there any conflicts with your app's global keybindings? Is the change immediately reflected when you type, or does the user need to press "Enter"?
In Skivvr, you press Enter to "apply" the value. You can cancel a change you made in input by pressing Escape.
Numeric inputs support more interactions. For example, pressing the up arrow will add 1 to the value, and the down arrow will subtract 1. Pressing the Shift + up or down arrow will increase or decrease a value by 10. These changes are immediately applied to the element
Input keybindings should not conflict with global keybindings. For example, in Skivvr, pressing the Delete key will remove the selected element. But if you are editing the value in input, it should not do that.
👉 Mouse interactions
Think about what should happen if the user clicks outside the input after editing the value. Should the value be applied? Or should clicking outside undo an edit?
Do you need any other mouse interactions? In Skivvr, pressing Shift and clicking on the input will reset the input to its default or inherited value.

A nice touch would be to select a value when the user clicks an input the first time.
👉 Smart input options
Some inputs may support additional logic when the user uses them. For example, Skivvr color input supports putting name, HEX, rgba, hsl or hsb values (“red”, “#ff0000”, “rgba(255, 0, 0, 1)”, etc.) Size inputs support values like "10px" or "100%".
👉 Does an input need autocomplete or other select behavior?
Input can be used as a robust control to quickly select some values.
F.e. Font input completes a font name. This input has an arrow as well. Clicking on it will open a list of fonts, to select a font visually.
👉 Tab index:
Pressing "tab" in the input usually switches focus to the next UI control. Sometimes you want to code a specific order for this switching. For shadow selector, the order should be "X", "Y", "Blur", "Spread", not the "X", "Blur", "Y", "Spread" Image
And one more tip. If you use the input to rename something in-place, make sure that the input is correctly positioned, and use the same fonts settings to prevent an interface "jumps".
I haven't covered some points, mostly related to using inputs inside the forms. Feel free to add to this list! And thanks for reading 🙏

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Pavlo Yevsehnieiev

Pavlo Yevsehnieiev Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @PavloDev

6 Jan
1/11 In this and some upcoming threads, I want to share with you some insights I am getting as a solo developer who builds a big product.

First insight: Write unit tests early, but not extensively

#BuildInPublic #webdevelopment #SoloDeveloperInsights
2/11 Since now I am fully responsible for product decisions as well, I am seeing a bigger picture. For example, where and when I need to compromise on code quality to bring an #MVP faster.
3/11 Compromising on the code quality infuriates my inner developer :) So I need a way to calm the beast and make sure that everything will be stable enough to make it to the launch. One way to do that is by writing tests.
Read 11 tweets
5 Jan
How to not get bored with huge tasks? Break those to smaller ones. #GTD #buildinpublic
I am implementing undo and redo functionality. I need to define an undo command for every possible action in the app. Making that in one bunch is pretty monotone and can lead to errors. More⬇️
I created a list of all possible actions and now treat undoing every action as a separate small task. Now I can mix them with other tasks, still keeping track of what should be done for a big “undo” story. ⬇️
Keeping tasks tiny diminishes another problem: context switching. Because there is not much context to switch with small tasks :) ⬇️
Read 4 tweets
4 Jan
Creating a #SaaS #NoCode tool with real-time collaboration possibilities is quite the challenge, and there are a few resources that are helping me.
First of all — an awesome @figmadesign blog. I was thrilled when I read figma.com/blog/how-figma… — it has inspired me to work on a collaborative tool in the first place, and it has been my main source of insight about multiplayer.
Figma though is freer in its data structures since it does not use an existing technology of working with layouts. In my case, I need to comply with HTML and CSS. Some CSS properties, for example, backgroundImage, are not atomic — they could hold multiple values at the same time.
Read 6 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!


0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy


3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!