Since March, I've looked at a lot of documentation. Countless mini projects to develop my technical skills have led me on expeditions upon which I've encountered other's work. Of the libraries, frameworks, plugins, and packages I've either attempted to implement or am working with currently, it's amassed to a great deal of my time spent on making sense of documentation.
From this time spent, I've gathered a number of features from a variety of documentation that have been much appreciated or left me more confused. The following is a collection of those features, particularly those that make the documentation more difficult to follow.
There needs to be some sense of hierarchy in any documentation. Very rarely does one need to go through everything that is written. Rather, developers know what they are looking for and want their eyes to be guided to an answer quickly. Some suggestions to create a hierarchy:
- an introduction for context in case someone came to this code through a random link in the web
- make clear what parts of the page are related with some form of grouping, either with a heading or sectioning off with a divider
- keep things predictable - place recurring elements on the same parts of the page (ex. images always on the right or left)
Show 👏🏽 me 👏🏽 what 👏🏽 you 👏🏽 mean. This is my callout for all things documenting software that involves UI. Provide examples of what your feature looks like in action. If you can't host it somewhere, at least insert pictures of it. Each new section or feature in the documentation should have a clear demonstration of what this should look like if implemented correctly.
Now that we've addressed including examples - don't give just one. It's unlikely the one use case you came up with will fit everyone who uses your tool. It's also impossible to predict all use cases, but it's considerate and awfully helpful to offer at least 1-2 alternate ways of implementing what you've built in situations that differ from what you'd expect. Get creative! Think about how the feature might fit into the header for a website. Will it work well on mobile? How will it be used in React? In plain HTML?
There are so many ways to show what you mean. Don't stick to just text! Express what your code can do through a video tutorial. Show how you can interact with it using a GIF. Embed the tool into a Codepen for others to play around with. Create a template on Glitch that anyone can remix to get a feel for how it works.
Make sure you keep your documentation fresh. At least, as long as you are making changes to a project the documentation should reflect that. Don't let too much time pass between these updates - make it a habit for the changes to happen simultaneously. You don't want to leave a developer confused as to why something didn't behave the way it was outlined to behave when they followed the steps exactly. An argument for stagnancy could come if you're ready to let go of a project or it's reached the peak of its experience. You may not be sure how it can be improved, which leads me to my last point...
Some projects choose to document everything on a ReadMe, some may make a separate site entirely. Whichever the path you choose to take, allowing other devs to submit or at least suggest edits will only lessen the time you have to put into maintaining documentation. The diverse development experiences of others can help you see gaps in your thinking that may not seem immediately apparent. They can shed light for other developers who might be using your feature in similar quirky ways you could never have anticipated for.
These little considerations when added up could make a huge difference for increasing both the quality of your project and the number of people that choose to work with it.
Let's all do our part to make the coding world a little less intimidating by bringing clarity to our work 👩🏽🔧
Cover photo courtesy - Frustrated office worker.