TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: Examples of Well-Documented UIs?

3 点作者 aarondia大约 3 年前
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 条评论

InflexHQ大约 3 年前
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.
narush大约 3 年前
Also a dev on Mito. Would love to hear if anyone has strong opinions on best practices for UI documentation! Thanks a ton :-)