TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Ask HN: Examples of Well-Documented UIs?

3 pointsby aarondiaabout 3 years ago
As the developer of Mito [1], I rely heavily on Plotly [2] and pandas [3] documentation. They both have great documentation, IMO, because they have tons of examples with copy and pasteable code. Examples are great because: 1. they&#x27;re easily parsable as the reader of the docs 2. they don&#x27;t just tell me what to do, but they actually give me a starting place<p>I want to create docs for Mito that is as helpful as Plotly &amp; Panda&#x27;s docs. However, Mito is a spreadsheet, which means examples (screenshots) don&#x27;t have the same characteristics as code examples: 1. they take up a lot of space on the page, making it difficult to scan through a page of docs for one that is relevant to the user&#x27;s present problem. 2. you can&#x27;t use the screenshot as a starting place, like you can with code examples. Instead, you need to replicate the screenshot in your own spreadsheet by following the same steps detailed in the screenshot.<p>Both 1 and 2 come together to additionally mean that what you can convey in a code example takes several screenshots to explain, especially when the user needs to pass through a sequence of clicks. For example, to create a graph in Mito, you need to first click on the graph button in the Mito toolbar, then click some more buttons in the taskpane that opens up. This makes using the documentation pretty frictiony.<p>In addition, screenshots are hard to maintain as we&#x27;re constantly evolving our UI.<p>What are best practices for documenting a UI? What products do it best?<p>[1] https:&#x2F;&#x2F;www.trymito.io&#x2F; [2] https:&#x2F;&#x2F;plotly.com&#x2F;python&#x2F;bar-charts&#x2F; [3] https:&#x2F;&#x2F;pandas.pydata.org&#x2F;docs&#x2F;reference&#x2F;api&#x2F;pandas.pivot_table.html

2 comments

InflexHQabout 3 years ago
I follow <a href="https:&#x2F;&#x2F;documentation.divio.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;documentation.divio.com&#x2F;</a><p>&gt; There is a secret that needs to be understood in order to write good software documentation: there isn’t one thing called documentation, there are four. &gt; &gt; They are: tutorials, how-to guides, technical reference and explanation. They represent four different purposes or functions, and require four different approaches to their creation. Understanding the implications of this will help improve most documentation - often immensely.
narushabout 3 years ago
Also a dev on Mito. Would love to hear if anyone has strong opinions on best practices for UI documentation! Thanks a ton :-)