6

I'm working on a WYSIWYG editor, similar to medium.com. We need to support variables inside the editor. For example, you might want to add text: Hi, *|FNAME|* which would be replaced with Hi, Gustavs depending on who views it.

What's the best way to visually present it? Do you know any sites that do that?

We don't want to use *|TagsLikeThis|*, because it doesn't give the impression that it will be replaced with the real content later.

Improve this question
3
  • 1
    How well are the users versed in programming languages? I know some PHP so if dynamic variable would have something like this $FNAME making your tag look like this = |$FNAME| would make me aware that it will change.
    – Igor-G
    Commented Mar 13, 2014 at 12:11
  • I would like to show something different than [[first name]] or *|FNAME|* or anything else like that. I want it to say "Hi, Gustavs", but somehow show that it will change based on who sees it.
    – Gustavs Cirulis
    Commented Mar 13, 2014 at 12:18
  • That was not Igor's question, the question is if your users are going to be people that are familiar with programming languages, or something else that you can use as a syntax hook for them to understand what you want to accomplish.
    – PatomaS
    Commented Mar 13, 2014 at 13:00

2 Answers 2

Reset to default
8

For replacements I always prefer to use double square brackets with natural language:

Hello, [[first name]]

Double brackets rarely appear in normal text but are easy to type and read, natural language removes the need to know/lookup field names.

Alternatively you can use real data with highlighting and some tool-tips, bit trickier to implement but much richer for the user.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • I would like to show something different than [[first name]] or *|FNAME|* or anything else like that. I want it to say "Hi, Gustavs", but somehow show that it will change based on who sees it.
    – Gustavs Cirulis
    Commented Mar 13, 2014 at 12:18
  • @GustavsCirulis Added alternative.
    – bendataclear
    Commented Mar 13, 2014 at 12:20
1

Option 1 - Show variables as in templating languages

enter image description here

For a programmer this is easy to understand, but for a casual user this might be the first time they have ever used a variable. The biggest downside is that users may edit the variable, for example entering {{TMIE}} instead and wonder why it won't work. Another downside is that it looks very technical and might dissuade some users from using the app.

Option 2 - Mimic Facebook tagging

In Facebook if you type the name of a user or a page, the whole mention becomes a tag that can be deleted as a unit. If the cursor is placed after the tag and backspace is pressed, the whole tag is deleted.

enter image description here

In the example case it might appear like this:

enter image description here

This communicates to the user at least that "this is something you can't modify except as a unit". Besides being a lot more difficult to implement, another downside is that this tag should not be possible to delete, as it wouldn't be clear how to add it again.

Option 3 - Split text into before-variable and after-variable

This option looks super ugly, but it has the benefit of making it impossible to mess up the variable AND being very easy to implement.

enter image description here

Improve this answer

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.