Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us…

Follow publication

Icons for Windows 10 and Mac OS X

This is a non-comprehensive review for some of the most-commonly used icons in Windows 10 and MacOS X.

As an old Windows user who has been using this system for over ten years, I recently decided to purchase my very first Mac. While there are many differences in their designs between these two systems, which confuse and surprise me no less than the culture shock I experienced when seeing people use the sauce pan instead of a rice-cooker to cook rice. As I’m still trying to get more familiar with the new system, here are some commons and differences I noticed between icons for these two.

Using a different operating system is like using a different method to cook rice

Some categories of icons

There are many methods to categorize icons. According to Jakob Nielsen, there could be 3 broad categories of icons:

Resemblance icons: direct representation of a physical object. Eg. clock icon for time-related functions, such as alarms.

Reference icons: representation of an analogy or reference to the object. Eg. clock icon for history viewing, a broken glass cup for fragile object.

Arbitrary icons: shapes with meanings that have to be learned, with no direct relation to the object being represented. Eg. traffic signs, alphabet letters.

1. Email/Mail

Email, or mail, as indicated, is the application that allow users to receive and send digital letters to each other through the internet.

Windows chooses to use a white envelope icon, while MacOS uses a stamp icon.

The reasonings behind each icon is straightforward. Both are resemblance icons. Envelope and stamp are both important parts of a letter in the physical world; thus, the connections between the graphic symbol and using email is naturally learned by users.

Windows VS MacOS: Email

2. File explorer/ Finder

Windows uses a yellow folder with a blue bookends as the representation for where users can access their documents and files. This is a resemblance icon as people still use the paper folders to store their documents in the physical world.

MacOS on the other hand, uses its special “two-face” icons, which might be pretty confusing for new mac users, as they are looking for somewhere to locate their files but end up clicking on a icon that looks has nothing to do with the concept of “file”. While the meaning behind this icon is unsure, one popular belief is that it is inspired by the artwork of Picasso, and therefore to represent different viewpoints of a same subject at once. The connection between this icon and its reasoning of design needs to be told instead of being picked up naturally, so it’s an arbitrary icon.

Windows VS MacOS: file explorer

3. Files and documents

Windows and MacOS use icons in the similar manner for this type, both are resemblance icons. A yellow folder and a piece of text-filled paper are used to represent document files for Windows, and a blue folder and a piece of blank paper are used for MacOS.

Windows VS MacOS: documents

4. Window zoom

For both systems, the meaning of a “X”, “ —”, and maximizing icon represented in either way, need to be learned; therefore, both are arbitrary icons. While Windows uses the classical linear icons for minimizing, zoom and close, MacOS uses a stretch arrow for zoom in/out, and colors are used to help identifying their functions.

Windows VS MacOS: window zoom, close

5. Web browser

Windows’ own internet browser is Microsoft Edge, represented with its famous blue “E” logo, an arbitrary icon.

MacOS safari is represented with a compass-looking icon. It makes sense with its name “safari”, which means “to explore, to travel, to navigate”, and in this case, is to navigate through the internet. Thus, although the compass-looking-icon seems to be a resemblance icon, the safari icon should be a reference icon based on what it refers to .

Windows VS MacOS: web browser

6. Launchpad

And here comes to the special features from MacOS — the launchpad. It was really confusing when the first time I use mac and found this icon on the left lower corner. “Is it a game logo?” is the first thing came to my mind after seeing this rocket icon. But after clicking on it, the purpose of it was clear: another screen of applications was shown, which resembles a typical screen of smartphone or tablet.

MacOS: launchpad

Although the rocket icon is clearly associated with its name “launchpad”, which refers to the platform where rockets launch, what it refers to here in the mac has to be learned. Therefore, this icon could be a reference icon that refers launching apps as launching a rocket, or a arbituray icon if such association doesn’t relate in users’ mental model.

There are no absolute “good” or “bad” icons. Different users may feel differently based on their own mental models. The purpose of icons is to guide users to move through the product smoothly and effectively, and to provide important information in an understandable manner.

The Widely use of some current icons doesn’t mean they are 100% perfect representations of target objects or concepts, and creation of new icons that aren’t familiar enough to users also doesn’t mean they are terrible designs. Usability test is always important to test if users can understand the icon.

Users can always learn to understand a new icon, or new idea, but you really need to be cautious and try hard to let them understand.

Reference:

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Avery Ao

A food lover. Dietetic student. Traveler. Aspiring UX designer.

No responses yet

Write a response