Victor Profile picture
23 Apr, 17 tweets, 14 min read
How user interface evolved for the past 40 years โœจ

Visual Thread ๐Ÿงต
Xerox 8010 Star, released in 1981

It was the first commercial personal computer that had
such things as

- window-based graphical user interface
- icons
- folders
- mouse (two-button)
- Ethernet networking
- file servers
- print servers
- e-mail.
Apple Lisa Office System 1. Released on January 19, 1983.

It is one of the first personal computers to present a graphical user interface (GUI) in a machine aimed at individual business users.
VisiCorp Visi On. Released on December 16, 1983

VisiCorp Visi On was a short-lived but influential graphical user interface-based operating environment program for IBM-compatible personal computers running MS-DOS.
Mac OS System 1.0. Released on December 29, 1984

The Macintosh "System 1" is the first version of Apple Macintosh operating system and the beginning of the classic Mac OS series.
Amiga Workbench 1.0, released in 1985

Workbench is the graphical file manager of AmigaOS developed by Commodore International for their Amiga line of computers.

Workbench provides the user with a graphical interface to work with file systems and launch applications.
Windows 1.0, released in 1985

In this year Microsoft finally caught up with the whole graphical user interface craze and released Windows 1.0, its first GUI based operating system.
Windows 2.0, released in 1987

In this version, the actual management of the windows had significantly improved. The windows could be overlapped, resized, maximized and minimized.
OS/2, released in December 1987

OS/2 is a series of computer operating systems, initially created by Microsoft and IBM under the leadership of IBM software designer Ed Iacobucci.
Win 3.0, released on May 22, 1990

Windows 3.0 is the third major release of Microsoft Windows, launched in 1990.

Like its predecessors, it is not an operating system, but rather a graphical operating environment that runs on top of DOS.
Mac OS System 7, released on May 13, 1991.

System 7, codenamed "Big Bang", and also known as Mac OS 7, is a graphical user interface-based operating system for Macintosh computers and is part of the classic Mac OS series of operating systems.
Windows 95, 1995.

The user interface was completely re-designed since version 3.x. This was the first Windows version where a small close button was added to each window.

This was a huge step forward for Microsoft regarding the operating system itself and the unified GUI.
KDE 1.0, 1998 & Gnome 1.0, 1999.

Both KDE and Gnome are desktop environments for unix-like operating systems.
Mac OS X, 2001

In early 2000 Apple announced their new Aqua interface and in 2001 the company released it with their brand new operating system called Mac OS X.
Windows XP, 2001

As Microsoft tends to change their GUI completely with every major operating system release, Windows XP was no exception.

The GUI itself is skinnable, users could change the whole look and feel of the interface.
Mac OS X Leopard, 2007

The basic GUI is still the Aqua with its candy scroll bars and platinum grey, blue colors.

The new GUI features a more 3D look, with the 3D dock and lots more animation and interactivity.
The current state of user interfaces.

- Gnome 40. March 24, 2021
- KDE Plasma 5. 15 July 2014
- Windows 10. July 15, 2015
- macOS Big Sur, November 12, 2020

โ€ข โ€ข โ€ข

Missing some Tweet in this thread? You can try to force a refresh
ใ€€

Keep Current with Victor

Victor Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @vponamariov

22 Apr
What to do if

- you start a side project
- you are a developer
- you don't have a designer? ๐Ÿค”

๐Ÿงต Practical guide
1/9

First of all.

Check your competitors. I had 170+ competitors in the market.

There are for sure plenty of similar products, at least with similar features.

Make a list of them. Take screenshots of their pages. And put all this in a single place (Figma/Sketch)
2/9

Now, let's be honest. You don't have money for paying UX research for building

- wireframes
- informational architecture
- personas
- doing research
- making customer journey maps etc

Admit it. You're a side hustler and you probably don't want to spend years and $$$.
Read 10 tweets
21 Apr
How to make this hover effect with CSS only ๐Ÿ‘‡
First, you need an SVG with such a curved line.

You can create one in any vector editor.

So here is an example of HTML you can have.
Next, the CSS part

1. The SVG should be positioned absolutely, below the link

2. The path should have `stroke-dasharray` and `stroke-dashoffeset` properties.

3. Apart from that it should have transition settings so that the animation would be smooth
Read 5 tweets
21 Apr
If you're a solo founder or developer, you might actually don't need a designer.

Here is why ๐Ÿงต
1/7

There is the Pareto principle that says that you can achieve 80% of the result, making 20% effort.

You might not have a perfect design, but it'll be 80% good if you follow some basic principles of design.
2/7

These design principles are not hard to learn.

Most of them are UX gestalt principles, UI patterns, common sense.

It'd be enough to read a @refactoringui book, for example, that will level up your skills dramatically
Read 8 tweets
20 Apr
10 really DARK & TRICKY UX patterns you should never use ๐Ÿ˜ˆ

๐Ÿ‘‡
1. Forced Continuity

There is a popular joke: "Why do you need my credit card if it's a free trial?"

The trick is that when your trial ends, you start getting charged.

Usually without reminders, and without an easy way to cancel the subscription.
2. Price Comparison Prevention

The retailer makes it hard for the user to compare the price of an item with another item, so they cannot make an informed decision.

For example, it's hard to compare weight (kg) and the package of pears (without knowing the package weight)
Read 11 tweets
19 Apr
20 UX Laws & How to apply them (illustrated) ๐Ÿ‘‡
The rule of the first impression

It takes a fraction of a second to make a good/bad first impression.

Things that users see when they start interacting with your product will shape their opinion.

That's why I'm starting this thread with this rule & attaching a nice video
Picture Superiority Effect

Pictures and images are more likely to be remembered than words.

Use visual storytelling in your products.

By pairing text with images, you increase the chance that users will remember the information.
Read 21 tweets
16 Apr
9 Tricks to control user attention ๐Ÿ˜ˆ๐Ÿ‘‡
1. Motion

It is a proven method of getting user attention for a short period of time.

An awesome example I like very much is how @JoshWComeau used this fellow guy gently jumping in when you read his blog article.

He got thousands (!) of subscribers just because of this trick
2. Size

One of the basic ideas for moving user attention to the thing you want is simply increasing its size.

The bigger the object is, the more attention it gets.
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!