How to Use The History of User Interfaces for Learning or Design Reference

Updated

The History of User Interfaces (history.vpon.me) is a reference site for the evolution of user interfaces, and you can use it in two main ways: as a self-study timeline for understanding how UI conventions developed, and as a citation or inspiration source when you need historical grounding for a design decision, article, or class. It works best as a starting point and orientation tool rather than a deep technical archive — treat it as a map of the field, then follow the specific eras or interface types that matter to your project.

What the site gives you

Based on the site's own framing, it presents the history of user interfaces as its subject. That means the value is in the sequence and the connections: which interface types came when, and what replaced what.

Two things to confirm early, since the available page evidence doesn't spell them out:

  • Coverage — which time periods and interface types are actually included. Check the site's own navigation or index before you plan around it.
  • Depth per entry — whether each era gets a short summary or a detailed write-up. This determines whether you cite it directly or use it to find better primary sources.

If you need a specific era (for example, command-line interfaces, the desktop metaphor, touch, or voice) and it isn't covered, the site still helps by showing you where that era sits relative to what is covered.

Using it for self-study

A workable sequence:

  1. Skim the full timeline first. Get the overall arc before diving into any single period. This prevents you from over-weighting one era.
  2. Pick two or three adjacent periods and compare them. The useful question is not "what did this interface look like" but "what constraint changed to make the next one possible" — input hardware, screen resolution, network speed, or user expectations.
  3. Write a one-line cause for each transition you study. If you can't state the cause, you've memorized a date, not learned a mechanism.
  4. Verify anything you plan to rely on. Cross-check specific dates and attributions against a second source, since a single reference site can carry errors or simplifications.

A concrete study task

Take one interface convention you use daily — say, the desktop folder — and trace it backward through the periods the site covers. Note what problem it solved when it appeared and what it replaced. That single exercise usually teaches more than reading the whole timeline passively.

Using it as design reference

For design work, the site is most useful for justifying a choice rather than generating one.

  • When proposing something familiar: show that the convention has a long lineage and users already have a mental model for it.
  • When proposing something new: show what changed in the underlying constraints that makes the old convention unnecessary now.
  • When something feels arbitrary: check whether it's a leftover from a hardware or software limit that no longer exists. Many "standard" UI patterns are exactly this.

Be careful with the inspiration use case. "This looked good in 1995" is not an argument. The defensible version is: "This worked under constraint X; constraint X no longer applies, so we can do Y instead."

Citing it in class, articles, or projects

  • Attribute the site by name and URL when you use its framing or sequence.
  • Don't cite it for facts it doesn't state. If the site doesn't give a date or a source, you don't have one yet.
  • Prefer primary sources for specific claims. Use the site to locate the era, then cite the original paper, product documentation, or contemporaneous review for the detail.
  • For teaching: the timeline structure works well as a lecture spine, with your own examples filling in each period.

Common pitfalls

Pitfall What to do instead
Treating the timeline as complete Check coverage explicitly; fill gaps from other sources
Assuming newer always means better Ask what constraint changed, not what year it is
Copying an old interface style literally Extract the principle, not the pixels
Citing the site for precise dates Verify against a primary or secondary source first
Reading passively end to end Study two adjacent periods and explain the transition

Quick decision guide

  • You want orientation on UI history → use it as a timeline and skim first.
  • You need a specific era in depth → use it to locate the era, then go to primary sources.
  • You need to justify a design choice → use it for lineage and constraint arguments, not aesthetics.
  • You're writing or teaching → use its structure as a spine, cite it by name, and verify specifics elsewhere.