How can I make my website more "self explanatory"

Question

I built the following website MyChessNotebook some months ago. The purpose is simple: it is a text editor where a user can insert some pictures of chessboards easily.

I use it and find it super easy to work with, but I coded it... When sending the URL to some friends, they told me they did not had a clue about how to use it. I added some short GIF recordings about the website in action (like the one below), I included some mock content by default, but still, they are confused.

What would be the simplest measures to make it more friendly?

Answer 1

I think what you're building is a really cool idea, and it's great that you're getting user feedback.

There are a few reasons why your friends might not have a clue how to use it.

1. First: were your friends the correct target audience? Do they understand what FEN and PGN mean, etc.? I think your first step would be to decide whether your test group was right for the system, or if your system needs to adapt to work with the people you tested with. You'll want to try the next steps with 5 - 12 people who are specifically in your target audience.

2. Does your system have a clear "why" or "job to be done"? Can you articulate that in a sentence (or a few sentences)? Example: "As an intermediate chess player, I want to be able to record my moves so I can study them later in the hope of winning a tournament." That last part is super-important. Next thing I'd do is validate that with the ideal test audience. Show them the system unguided, let them try it out without telling them what to do, and ask them what they think they could do with it, and why they might use it. This is often a very eye-opening part of the design process!

3. If things aren't quite syncing up with how you imagined them to be, that's okay. Then you might take a step back and go watch a bunch of chess players who take notes and observe what they're doing with some follow-up interviews to learn what they're using for the notes, when they're taking the notes, why they're taking the notes... gathering that observational feedback is very helpful.

4. If things are going relatively well with your concept, then you could dig in with some task testing. "How do you think you'd record the next step?" See where users struggle, and where they don't.

You might want to provide a little more wayfinding in the final design through instructional text and onboarding for first-time users, but if you've created something intuitive that matches your users' mental model, you'll be able to keep that to a minimum.

Also - it looks like you're going to be charging for this product, so don't forget to ask your target audience how much they'd be willing to pay to use this system! Every user test you do could provide valuable market research as well.

Answer 2

I echo Izquierdo's general advice, including what a cool tool this seems to be. Here are some concrete suggestions for the UI/UX:

1. You have what looks like a lot of text. Really it's not a lot of reading, but for an app you want people to feel is modern and unsable, it looks like it's either for programmers (like a Github readme.md rendering!) or quite old (like this).

2. You have a big gif of the game front and centre. This is deeply confusing because I can't tell at first whether it's interactive or not. I can only be frustrated by trying to interact and failing.

3. To actually use the tool, I have to locate an indistinct HTML <a> tag called "here" — not even "start" or "create", but "here", so I have to read the whole sentence to know that this link, out of the 8 I can see, is the one I want. I'm pretty likely to feel frustrated before I find that "here".

4. A few elements are very high-contrast, e.g. the "hide" button and the glowing "export PDF" button. These draw a huge amount of my attention but are not core functionality.

5. When opening the app, I have to mentally answer the question "What is this tool?" This type of basic tutorial should be presented only once, or available via a menu item, not the first thing I see if I ever want to use this tool more than once. Also, for some reason the home is a tutorial but there's also a "How to use?" button, so I'm not sure which one I would want to read if I did need to learn.

6. Minor: The sidebar is not sticky, so I lose sight of it when scrolling on the "How to use?" page, for example.

OK, all that aside: The "Editor" page (should be called "Notebook" if that's what this is?) is quite nice. I don't think it's the main problem here. But it could still be more usable with a few adjustments:

1. Button title text. I actually don't know what "Reverse" means with 100% certainty until I try it. Similarly, you can't expect the user to guess what that button to the right of the checkmark does, nor the checkmark itself, for that matter.

2. More consistent disabling. You have the undo/redo buttons disabled at logical times. But when I try the checkmark button, it has no effect. When I click the button to its right multiple times, the same text is copied into the log, which would seem to be illogical.

3. The Free Mode / Add Piece lines have to be reworked. It takes quite a bit of thinking to understand that there's a causal relationship between the state of that button and which things are available to me in that area. That's not because your text isn't clear; it is: "Free mode must be enabled first." It's because my brain is fighting established patterns of UX that tell me "All these enabled fields don't depend on that button." So I get confused. Also, the placement of the piece is mildly confusing; I would suggest some way in which I can click on the board to place the new piece, much as I can click to move existing pieces (which is done nicely, by the way).

Overall, I would suggest your user flow be something like this: I open the website and I'm directly in the editor. I have a sticky sidebar that includes a big "How to Use" or "Tutorial" button. Perhaps if it's my first time and I don't have a cookie set, I get a modal that highlights certain elements (overlay tutorial) or directs my attention to the sidebar button. There, if I want, I can read text and see large gifs. In fact, you could even reassure me that the editor state is intact by having the tutorial be a large 80% opaque box over the editor instead of a separate page.