I have an edit text and a list showing a set of tags.
When a user enters a tag in the edit text 2 things happen:
First, a request is sent to backend to store that tag.
Second, that tag is added to the list to create a real time experience.

However, there are some circumstances that may confuse the user, for example:
When the user creates a tag,the tag is added to the list, but backend might reject it since it already exists.
In this circumstance, The user is notified that the tag is invalid but that tag already exists on the list until I refetch all tags from backend and replace it with the current list. (The delay between notifying the user and refetching tags from backend may confuse the user)

My question is: What is real time experience approach for user's interaction while there might be some delay between that interaction and processing it? (Please note I don't want to block ui)

  • 1
    Why does it matter if the tag already exists? The user wants that tag. If it doesn't exist, create it and then use it. If it does exist, just use it. Commented Oct 11, 2016 at 18:44
  • because it is an admin area, we define possible tags from there. The user is not supposed to select a set of possible tags, but to create them. Commented Oct 11, 2016 at 19:28
  • @Mehrdad you're setting yourself up for a whole load of tags that all mean the same thing but have slightly different names. Users will always take the shortest path - in this case it's likely to be typing out a new tag rather than looking for one in the list/library/whatever. If the user types a tag that exists, show them the tag. If they type one that doesn't, let them define it. Don't add a layer of admin (notifications, alerts, etc) between the user and their goal. Commented Oct 13, 2016 at 15:25

2 Answers 2


If possible try to avoid any delay in the communication between the client side and the server side. An option for this could be what @mtv.vac proposes in his answer. Having all this data already on the client side should make the confirmation instant. However, depending on the number of users inserting tags at the same time, you might still want to do a server side check.

If loading all the tags is not possible and there will be a delay between the writing of the tag and the confirmation of it, don't confirm the tags as they are written. Let them be "awaiting confirmation".

There should be 3 states for tags:

Waiting to be confirmed: Just-written tags should be in the process of being confirmed.

Valid: The tag was already checked and accepted as it is not already registered.

Unvalid: The tag was already checked and denied due to already registered.

Just make clear to the user in which state the tag is. (The check should be made instantly, without the need to refresh the page).

  • Yeah your answer seems right to me, but please consider adding this section to your answer in order to accept it: One more step to make the app seem real time is to take the validation steps as much as possible from the backend and do it in the client side, this way the user doesn't have to wait for every request he sends to create a tag. Commented Oct 13, 2016 at 14:57

I would recommend implementing a typeahead autocomplete feature on the text input field so that the user will see in realtime if their selection already exists in the database and can select it from there. This will avoid the majority of the scenarios in which a user's input is rejected due to it already existing in the system (in the example you described).

Here's an example: https://twitter.github.io/typeahead.js/examples/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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