Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
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 Mar 13 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 Mar 13 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 Mar 13 at 13:00

1 Answer 1

up vote 6 down vote accepted

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

share|improve this answer
    
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 Mar 13 at 12:18
    
@GustavsCirulis Added alternative. –  bendataclear Mar 13 at 12:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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