Share your repls and programming experiences

← Back to all posts
💡 UI Repl
moudy (106)

The real problem with the interface is that it is an interface.

– Don Norman

I've been thinking about how to improve on the UX of traditional forms. For users, they can be confusing and overwhelming to use. For engineers, they can become tedious to build and maintain. Plus, it's hard to get the design just right in the first place.

I ended up with a UX that feels a lot like being in a terminal session but more visual and less intimidating. I'm calling the pattern "UI Repl" (in my head). I think this approach has potential in a number of ways...

  • gradually building the UI as info is being entered makes the UI less overwhelming than seeing it all at once
  • you can still scroll back and edit previous fields so the UX isn't too different one some data is entered
  • it's flexible. more complex UI elements can be used when needed
  • scales down well for small screens
  • easy to prototype new ideas with
  • potential for console-based power-user features
  • are easy to group and split apart when they are too small/big

I think a good use for a "UI Repl" is a discrete task that has multiple steps. I like the spacial metaphor of progressing downward with the UI as you work through the steps. Also, creating this timeline of edits clearly communicates to the user the effects of their interactions.

This seems like a well-explored UX pattern but most of what I could find is either too much like a terminal or to too much like a digital assistant (where you are mainly in the chat UI). I think there could be a good middle ground that is friendlier than a terminal but also avoids the uncanny valley of digital assistants.

I'm curious what others think (try it on your 📱phone!).

Commentshotnewtop
21natzil (906)

Very nice, it feels really clean!

William3 (10)

After the confirm the new password, you can spam enter and it will keep adding the "All set!"

moudy (106)

@William3 just making sure you get the message that you're "all set" :)

mkhoi (203)

I don't think the browse button work because i press it and i can't select any files 🤷‍♂️

moudy (106)

@mkhoi yeah I just put that the as an example. you can hit "skip"