Home » Is Markdown Friendly Enough for Non-Technical Users?

Is Markdown Friendly Enough for Non-Technical Users?


I know I’m coming to this thread rather late, but I actually have run usability tests comparing a WYSIWYG editor (iWeb) to a non-WYSIWYG editor based mostly on markdown.

Here’s what I’ve found that users struggle with when using markdown:

  • Tags that require character-level precision. For example, a user’s inclination is to put a space between the square brackets and parentheses when making a link–but that doesn’t work. Likewise, lists only work when there is a space after the asterisk or dash.
  • They get paragraphs fine, but users are often inclined to use a single linebreak (when formatting an address, for example) and these are ignored if you don’t add two spaces to the line before. Not intuitive, and those two spaces are invisible.
  • More complicated tags, like for links and images, slow them down more than simple ones (like for strong and em)–but they can eventually get it if there’s a helpful guide.
  • Users are often not confident that X will work or unsure of exactly what it will do.
  • Users don’t always understand paths, directories, files, file extensions, URLs, etc. This makes making links and images difficult.

Here’s what I’ve found helps:

  • Provide a clear and explicit guide to markdown
  • Tell them they are using a markup language
  • Style the text field so that it doesn’t look like a WYSIWYG field (eg: use a fixed width font)
  • Consider syntax highlighting
  • Be clear about any situations that are counter-intuitive or require attention to detail
  • Provide a preview option (it doesn’t have to be real-time, but it must be easy and unobtrusive)
  • Depending on the application, consider tweaking it slightly (like allowing a URL like www.example.com and adding http:// automatically)
  • At the very least, provide buttons for the more complicated tags like images and links. It’s trivially easy for the programmer to make a little dialog box that asks for the URL and the link text and inserts the code automatically. Consider making the language easy to understand. Instead of asking for the URL, ask “What web address would you like to link to?” Take a look at how Javascript WYSIWYG editors use non-technical language here.
  • Give them an idea of why this is important. Explain that semantics and presentation are separated in web design, and that computers generate bad code–so they are helping the program understand the semantic structure of the document.

I was surprised to find that people were mostly getting it, with no guidance from me and just a short guide to the markup language. In a study with 22 total users, the average satisfaction was slightly lower for iWeb than with my application.

If you’re talking about an entire WYSIWYG web design program, not just a little widget for text entry–they’re not as usable as you’d think. There are so many little details, and so much can go wrong, even when the interaction is supposed to be intuitive.

Caveat: my participants were all college students of varying technical skill levels, but they were all more tech-savvy than the average user. They were also being compensated for their time, which may account for their interest in the task.

Edit Almost all of the above issues have been improved by the stuff in the second list. The only one I’m still really struggling with is the single linebreak problem.

Unfortunately not.

When you say non-technical: there’s a huge difference between non-programmer and 90% of the non-technical users out there.

A surprising number of users (I think it’s around a third of everyone on the web) can’t scan text – they will use their finger on a page to read and will lose their place if forced to scroll.

These users will struggle with even simple WYSIWYG, never mind any sort of markup.

A good article on the issue is: http://www.useit.com/alertbox/20050314.html

I’d recommend taking a look at that site for most usability research like this.

If a user is struggling to understand the I-bar and caret they’re never going to understand any sort of meta-information.

On a largeish project, I thought textile would be simple enough for non technical users. It turns out I was wrong, and my clients just couldn’t cope with it at all. The problem eventually became so severe that they replaced my whole system. The system I spent 8 months building.

Live and learn. To be honest, I don’t think Markdown is easy enough for TECHNICAL users. The problem is it gets applied to content entry forms without informing the user that it’s going to be filtered through markdown. Text gets mangled, and there’s no way to know what happened unless your eyes are sharp enough to notice some tiny note somewhere.

There’s a dozen of these different markupish languages with slightly differing semantics, and each one is a whole new set of things to learn. You come to a comment form, and who the hell knows what’s going to happen? is it textile, markdown, bbcode, how on earth do I make a link? It’s a mess.

Well there you go. Two data points. A client couldn’t cope with it. I can’t cope with it. The only reason I have any idea what’s going on here on stackoverflow is the gui buttons. and the realtime preview.

@tj111 a cheat sheet helps me, but it didn’t seem to help anyone else. I’d even pointed it out numerous times, but it just didn’t seem to take hold. I ended up doing all the textile myself.

Related Solutions

Performance issue with this code [closed]

In short: You should create,open,use,close,dispose Connections where you're using them. The best way is to use the using-statement. By not closing the connection as soon as possible, the Connection-Pool needs to create new physical connections to the dbms which...

Compare a pointer to an integer in C [closed]

Here's what I think you meant to post, it still doesn't compile though, since you can't compare a pointer to a char /* *Description: Construction of a social network */ #include <stdio.h> #include <strings.h> #include <stdlib.h> #define SIZE...

Autocomplete json in textbox

If you are using jQuery UI, the jQuery documentation on autocomplete is straightforward. Put your array as the source: and it should work automatically. IMHO, You seriously need to spend some time for googling and looking into the documentations. jQuery UI...

having all my scores and names in one big array

You need to initialize your array outside of your loop: name_arr = [] while int(students)>int(student): name = input ("what is your name ") score = input ("what is your score ") student = student + 1 name_arr.append(name) name_arr.append(score)...

pacman “exists on filesystem” error

After pacman finally deprecated the --force option and made the surrogate --overwrite option work as expected, the following usage pattern should be noted. A command to reproduce the --force option that blindly overwrites anything that conflicts is this: sudo...

How to determine the maximum number to pass to make -j option?

nproc gives the number of CPU cores/threads available, e.g. 8 on a quad-core CPU supporting two-way SMT. The number of jobs you can run in parallel with make using the -j option depends on a number of factors: the amount of available memory the amount of memory...

Number of Nearest ‘True’ in a matrix or list of list

Definitely not the best way to do it, but it's one that works: import numpy as np mas1 = np.array([[True, False, True], [ False, True, True], [ False, True, False]]) mas_answer = np.ndarray(shape=mas1.shape) for i in range(mas1.shape[0]): for j in...

Trying to display Json data from a web url into a table

You can take this json and put it in the loop through length of the json and show data into the table. This is how i solved it <?php try{ $url="the json url goes here"; // path to your JSON file $data = file_get_contents($url); // put the contents of the...

View v is unreachable statement

Anything else is written after the return keyword it's unreachable. Remove return super.getView(position, convertView, parent); from the first line of your function. This is a warning, telling you that static analysis of the code shows that some of your code...

index out of range but is in fact in range [closed]

Well try to debug your code by yourself first. Anyhow for your question Why is this happening? : It gives you error in postCode = split_address[4] because your list has 4 elements 0,1,2,3 and you are accessing the 4th element which is not present.. you don't...

Ubuntu update error: “waiting for unattended-upgr to exit”

I would first try a softer way. Stop the automatic updater. sudo dpkg-reconfigure -plow unattended-upgrades At the first prompt, choose not to download and install updates. Make a reboot. Make sure any packages in an unclean state are installed correctly. sudo...

how to Styling classes with the same name in a file css [closed]

You need to use :nth-of-type(n) selector. // For First Right Class Div #container .right:nth-of-type(1) { } // For First Left Class Div #container .left:nth-of-type(1) { } Hence for every div you need to change n value. Your question is extremely unclear but I...

Java – different parameters resulting to different outputs

What I think you're trying to achieve is that when you call your method "horn" with some parameter it has to either use "Beep!" or "Boop!". First of: void horn(a,b) Is not a valid function signature in Java, in a java function you always have to specify what...

Cannot use method returned value into another method

Using @super's suggestion and a little warning fixing. The two important changes are in the line as suggested by @super: printf("r=%.3f; phi=%.3fn",distanta(),phi()); The variables 'r' and 'unghi' are both variables local to member functions and cannot be...

Class has no member speak? [closed]

void::speak(); //THE GLOBAL SCOPE HAS NO SPEAK It's interpreting this as void ::speak() where leading an identifier (a name) with :: indicates to C++, "Look in the global scope of all names". :: is the "scope resolution operator" In the header file, you should...

Convert code with multiple lines into one line

Read the docs! A simple statement is comprised within a single logical line. Several simple statements may occur on a single line separated by semicolons. Search Stack Overflow! How to put multiple statements in one line? Or google, to find converters for more...

How to POSITION my Marker to Always Follow the Slider-Handle?

Youc can set a position to image using Jquery See fiddle //set a begining position to img var slider = $(".slider")[0]; var sliderPos = slider.value / slider.max; var pixelPostion = slider.clientWidth * sliderPos; $(".img").css("left",pixelPostion-7 + "px");...

css nth-child() check board pattern [closed]

This is pretty simple, as the pattern is repeated over 2 rows of 4, you just need to apply styles to 8n + i for the chequered pattern: .flex { display: flex; width: 400px; /* width of four squares */ flex-direction: row; flex-wrap: wrap; } .square { width:...