Improve Interface

[I7T5]

Esse has become one of my must-have tools these days, but as person very concerned with aesthetics, it's irritating every time I see the outdated clipboard icons and the command palette. Would you consider redesigning the interface a bit so that it's more modern, and hopefully more macOS native?

This is the only reason why I might turn to TextBuddy.

[melonamin]

Yes, I'm in the same boat as you, they UI hurts my feelings even more because I'm respobsible for that 😭

Let me ask, do you think you can help with a mock? I'm not talking about a pixel perfect UI design, just a general idea what it could look like? This would help to unblock me.

[I7T5]

@melonamin I'm only a code hobbyist (somehow familiar with basic Python, HTML&CSS, and is very interested in Swift developing), but, I can definitely try to learn some UI skills, though the learning process might be slower than it should because I'm still in high-school. Anyways, what could/should I do?

[melonamin]

I’m not talking about code, more like a hand drawing of what the ui should look like :)

[I7T5]

Personal Preference Proposal

The following is what I would like Esse to look like, personally. (Made along with ChatGPT)

Search Bar

• The search bar is always shown in this interface. The user can type directly into the search bar to look for a transformation. Once a transformation is chosen with selection & Enter or Cmd+Enter, it would be listed in the search bar, like when adding people when creating a new group chat in Microsoft Teams, but it could definitely look better.
  • By "better looking" I mean neater, more perfectly pill-shaped, like Obsidian tags, but each with possibly a leading icon and a trailing "x" on the right edge.

Search Results: Right Sidebar

• Because I don't like the idea of a menu directly dropping down from the search bar temporarily blocking out the input and output texts, I placed the search results list in a right sidebar.
  • Another advantage of search results listed in right sidebar: It's possible for the user to preview the output of the transformation selected (but not chosen, that is, it isn't listed in the search bar yet).
  • The sidebar is by default visible, but you can toggle it with the command button on the right (or should I just do a right sidebar button?).
• Save custom commands using the save circle. I've never saved one myself so I didn't do anything with it.

I think the interface could be even more sleekly designed, but it's all I can come up with for now. The interface is heavily inspired by CotEditor.

Refined Original Design Proposal

If you just want to improve on top of the original design, here are a few verbal suggestions (instead of scratchy drawings):

I. Toolbar

Get rid of all the buttons in the toolbar, and possibly the toolbar itself. You can move the share button to the bottom right of the Results field.

II. Input & Result

Make Input and Result visible only when the user hasn't typed any text into either field. But you could make it look similar to DeepL where there's no line between Input and Result but there is one below them. This way the logic is clearer. I guess you can also add the two-way arrow.

III. The Command Pallet

1. Make the animation more simplistic / less "bouncy" lol
   
2. Make it more Apple Spotlight-ish. Refer to TextBuddy's implementation.
   
   (I think TextBuddy's Spotlight would look better without the horizontal traffic lights, if that what ppl usually call those...)
   
3. Consider replacing command icons with Lucide Icons or other modern alternatives, or just remove them altogether.
   

IV. the f(x): "command line" in the bottom

1. Make the commands look more like tags: pill-shaped backgrounds with an x.circle on the right edge. Refer to the Microsoft Teams and Obsidian tags images above.

2. Make the Save button more modern, esp. in light mode (refer to bootstrap buttons? idk)
   

V. Default Window Size

And maybe you can also make the default window size shorter, so that, the window's length:width ratio looks nicer.

Hope that helps!!!

[melonamin]

Yes, thank you, this helps a lot and gives me quite a bit of food for thought. Let me prototype a bit, I'll be back when I have something to show

[melonamin]

Good news I've put together new interface, bad news - I may require macOS Sonoma for this release. Or at list the inspector(right most pane) would be available only on the latest macOS.

[I7T5]

Oooo this is nice! Even though I think having f(x) at the top would save the user's eyes from looking up and down, but that's not a big issue. Ok with upgrading to Sonoma :)

[melonamin]

Had some time to work on it, really early beta