1

Suppose an application where you work with text snippets. You can search for and reuse existing snippets as well as create and edit new snippets.

Thus, we basically have two modes:

  • A search mode and
  • An edit/create mode

It might look something like this mockup:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

A bit more details:

  • All of this interaction takes place in a dialog positioned above a main text editing document (not shown in mockup).
  • You can search in both text snippet contents and their keys. However, only the contents are displayed in the Text-field (see mockup above - here the text key field is not shown).
  • New snippets are saved, when the "Create new text" button is clicked.
  • If a suggestion is selected, the user can reuse this text with the "Reuse text button. Also, the user can return to the search field and enter a new query - or choose to create a new, edited text
  • (Obviously) not all search queries have matches.
  • Formatting should not be lost when switching between the modes
  • Preferably, there should be no modes at all: Perhaps by being able to just press Enter key to add a newline. However, a multiline text edit field with search suggestions is an unfamiliar, probably hard-to-understand new type of widget
  • The search includes the text formatting. So, the longer and more heavily formatted text, the less likely there are any search suggestion matches.

The resulting interaction design conundrum is:

  • How to combine/switch between these two modes: Search and edit?
  • Do you search a snippet by name or do you search in the content? And is the snippet saved when switching to another one, or do users have to submit it manually first? – jazZRo Dec 7 '15 at 10:52
  • Possible duplicate of Adding items to dropdown list on-the-fly? – Midas Dec 7 '15 at 11:03
  • Thanks for the feedback. I have added more details to (hopefully) clarify. – agib Dec 7 '15 at 11:36
  • Is it correct to understand this - Lets say I search for a snippet, "Some suggestion.." and few search results some up. I select one, and view/edit that - later save (as new snippet post editing) or cancel that and resume my search if needed? – Amit Jain Dec 7 '15 at 11:53
  • @Amit Jain, I'm not sure, I understand your last sentence (from "I select one..."), could you please elaborate? – agib Dec 7 '15 at 11:59
2

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You search and the snippets that contain the search term pop up. You can see a preview of their content. You can copy them to your clipboard by pressing the first button, edit them with the second and delete them with the third. The button in the top right corner allows you to create a new snippet.

If you click the create button or an edit button the window changes to the right mockup. If you are done and click the create / update button or if you click the cancel button you get back to the previous window.

  • Thanks. What happens, more specifically, when the user clicks the plus icon button to create a new snippet? And how can one return to search from that? – agib Dec 8 '15 at 9:00
  • 1
    @agib added that – Larivact Dec 8 '15 at 19:52
1

Your proposed tool slightly reminds me of the styles palette in Word.

Style palette in Word

The similarity is that there is a "search" mode (the ability to select a pre-existing style) and an "edit" mode (the ability to add your own style, or customise an existing style and save it as a new style.

If you use the Word styles palette as a design pattern, maybe that would help, as it moves fairly seamlessly from search mode to edit mode.

When you click on "Save selection as a new Quick Style", it gives you the option to modify it. "Edit mode"

So you could start with a palette of snippets (maybe with icons for a bulleted list, a numbered list, etc) or a list of snippets if a palette isn't feasible, and offer the option to create a new snippet based on an existing one.

  • Interesting comparison. I can't quite figure out, if I can apply this pattern to my situation... – agib Dec 7 '15 at 14:58
1

Situation one: You cannot both search and edit at the same time. First user can search and after that user can edit it.

Situation two: User is already editing and meanwhile user wants to search something and edit again.

Show some of the text snippets with a search bar. User can search and enter some text. The file icons are filtered and user can click on them. Editing functions can be visible. When you don't have any matching query, creating a new one can be promoted.

You can show the relevant snippets with file metaphor. Like:

enter image description here

For the second situation purposes, you can place search box on the right top of your solution.I hope that it helps.

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.