1

I am working on a text editor (web app) which will provide powerful, customizable functionality, but in a minimal (requirement) appearance.

One of the functions is: "create new snippet". I want this function to be applicable to either:

  • a chunk of selected text inside the current document, meaning that a new snippet will be created containing the selected text
  • the whole text, meaning that a new snippet will be created containing the whole text contained in the current document
  • empty content, meaning that an empty new snippet will be created

I have a few other functions that need similar behavior (regarding applicability to selected text, to the whole document, and/or to empty content), so, I really need a smart, minimal, coherent solution to this.

My question is: What kind of UI interface should I provide to satisfy the aforementioned requirements, in the most intuitive and frictionless way possible?

Some of the solutions I am considering (but I am not totally happy with):

  • When a user selects (highlights) some text, a toolbar pops up (similar to medium.com's one) showing the applicable actions to the selected text (in the form of labelled icons). The user then clicks on the "create snippet" labelled icon and a new snippet is created containing the selected text. If the user simply clicks inside the text without selecting any text and without the intention to change the caret position, (i.e. she clicks on the caret once), the aforementioned toolbar pops up, but when the user clicks on the "create snippet" labelled icon, an empty snippet will be created. In order to create a new snippet containing the whole text, a user simply selects all the text of the document. (This solution, obviously, tries to use the pop up toolbar as the only interface through which the user will communicate her intentions, AKA: uber minimal, which is a plus)

  • Same as above, but, without allowing toolbar pop up when a user simply clicks inside the text. In order to provide the "create empty snippet" functionality, provide a labelled "create snippet" icon in a hideable sidebar. (This solution provides two interfaces for serving different needs: a pop up toolbar and a sidebar)

  • Do not provide a toolbar that pops up upon text selection at all. Instead, only provide an icon labelled "mark snippet" in the hideable sidebar, that when clicked, it will change the cursor icon to a new one, indicating that the user must select which part of the text should be. There will also be another icon labelled "create new snippet", which will create a new empty snippet. (This solution uses the sidebar as the only interface through which the user will communicate her intentions)


What would your suggestion be?

Please don't focus too much on the "snippet" concept. I need other functionalities as well, such as: "share a part, or the whole of the text" on social media, etc.

Note: I really like the pop up toolbar (medium.com style) because it is minimal (i.e. doesn't clutter the editor window by being visible all the time) and also it is quick, because it appears very close to where the user's mouse pointer is located. Its drawback is probably the fact that new users might miss it (and users have very little patience with discovering the functionality of something new).

  • If the feature is a core function then you could have persistent buttons in the UI for all of these features. Context menus can be added to make the features more efficient for more advanced users. But it all depends on what problem you're trying to solve – Klewless Lewis Apr 19 '14 at 20:02
  • Thank you Lewis. Yes, those features I'm talking about are core functionalities. Do you think it is good practice to provide the same functionality through two different paths? I am also wondering if there is any successful paradigm where core functionality is offered through context menus in an obvious-to-the-user way... – Alexandros Apr 20 '14 at 10:40
1

Have it be based on selected text.

  • No selection = new snippet
  • all selected = snippet with everything
  • selected segment = snippet with selected segment

You can provide a selector by hijacking the right click functionality to provide the menu, or simply provide it on hover. You should always have at least 2 means of accomplishing a task depending on the UI paradigms your user base is used to. If it is a core feature, then there is precedent for it to be available on a menu bar or similar.

While a minimal UI is ideal, never forget that affordability is also desired. You never want your design to be so minimal that the affordances of your application are lost.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.