Words that Shape UX
The Fascinating History of Digital Terms
The realisation struck me as I examined the two drawers filled with metal letters. A grin spread across my face as the connection clicked: “So that’s why they are called ‘uppercase’ and ‘lowercase’!” But let’s rewind a bit.
Etymology in the Letterpress Studio
Stepping into the letterpress studio felt like entering a different era. Sunlight streamed through narrow windows, casting a warm glow on the room filled with the scents of ink and aged paper. Shelves lined with meticulously arranged typefaces surrounded me, each drawer a trove of letters waiting to breathe life into the blank pages they would decorate.
This was the place where my journey into the origins of our UI language began, unexpectedly and yet fittingly.
Many years ago, I enrolled in a typography course to uncover the secrets behind our everyday letters. One day we got to explore a letterpress studio, where we chatted with the artisan about the origins of “Uppercase” and “Lowercase.”
In the days of the printing press, small letters were kept in a lower wooden case within easy reach, while larger letters were stored in an upper case.
This explanation offered a glimpse into how the physical constraints of early technology shaped our language. I had never questioned these terms before; I simply accepted them. This newfound knowledge ignited my curiosity to delve deeper into the origins of words and expressions in our digital world, understanding not just their meanings but the rich stories they carry.
Have you ever wondered why your digital desktop feels so intuitive? It’s all about blending history with design. By using real-world analogies, known as skeuomorphism, digital interfaces mimic physical objects, making them more engaging and user-friendly. You can learn more at the end of this article.
But enough of the theory talk — let’s dive into the fun stuff you came here for!
Print, Photography & Art
Now, with the ambiance of the letterpress studio surrounding us, let’s explore additional terms that trace their origins to the realms of printing and advertising.
1. Above the Fold
Origin: The term “Above the fold” originates from newspapers, where crucial headlines and stories were positioned on the top half of the front page, visible when the paper was folded and stacked.
Digital Use: In UX design, “above the fold” refers to the portion of a webpage or app interface visible without scrolling. Like in newspapers, designers prioritise placing essential content above the fold to immediately engage users and encourage further exploration.
It seems you’ve delved deeper, well below the fold! Bravo! This proves once again that users do indeed scroll, and your curiosity has led you to uncover more valuable content. Keep scrolling, there’s more to discover!
2. Scroll
Origin: The term “scroll” originates from the ancient practice of unrolling parchment or paper scrolls to read written content. Before books were invented, scrolls were the primary method for recording and accessing information, requiring sequential unrolling to reveal the text.
Digital Use: The physical action of unrolling a scroll inspired the digital concept of scrolling, allowing users to navigate through webpages or documents. Although books replaced scrolls, the digital age has revived scrolling as a flexible way to access information.
And that’s why we scroll.
3. Margin
Origin: In traditional print and paper formats, “margins” refer to the blank spaces around the edges of a page, ensuring content does not run to the edge. I came across an intriguing story claiming margins were invented to protect book contents from rat bites, but this turns out to be a myth. In reality, margins were created for more practical reasons, focusing on readability and aesthetics.
Digital Use: In web design and digital documents, “margins” refer to the spacing around elements and text blocks. This digital margin helps structure the content, improve readability, and create a visually appealing layout by ensuring that text and elements are not crammed to the edges of the screen.
While the rat-protection myth surrounding margins is intriguing, their true origins are more practical and less dramatic. Nicely done, we’ve caught the rat here!
4. Lightbox
Origin: A lightbox in photography is a box with a light source that provides uniform illumination for viewing slides or negatives. This device, essential for photographers, ensures that images are evenly lit and details are clearly visible.
Digital Use: In web design, a “lightbox” overlays images or videos on the current page with a dimmed background, focusing user attention on the content.
Shine bright like a lightbox!
5. Leading
Origin: Originating from the practice of hand typesetting, leading (/ˈlɛdɪŋ/ LED-ing)— derived from the insertion of thin strips of lead between lines of metal type — increases vertical spacing, aiding readability and visual appeal in typography.
Digital Use: In the digital type, the leading/line height is measured from the baseline of one line of text to the baseline of the next line, maintaining the typographic tradition of enhancing readability and visual balance through adequate spacing.
What better way to conclude this chapter than with another revelation from the letterpress studio? Now, let’s lead (I hope you read that right) the way to a speed round of terms and then to the next chapter.
Speed round
Here are a few more terms originating in Print, Photography & Art:
- Palette: Originating from the artist’s palette, in UI design, it refers to a range of colours used in a project to maintain consistency and evoke certain emotions.
- Canvas: Stemming from the physical canvas used by artists, in UI design, it represents the digital space where designers create layouts and arrange elements.
- Hero: Derived from the concept of a protagonist in storytelling, in UI design, it refers to the prominent section of a webpage, often featuring key content or imagery to capture attention.
- Placeholder: The term “placeholder” draws its origins from the practice of placing temporary blocks of text or images in a layout during the printing or typesetting process. These blocks indicated where the final content would be inserted, similar to how placeholders are used in digital UI design today.
Food & Cooking
Ready for seconds? Excellent! Let’s take a culinary journey through the origins of some tasty UI terms. Join me as we uncover the flavourful stories behind these seemingly ordinary terms that season our digital landscape, revealing why these real-world analogies are the secret ingredients to crafting exceptional user experiences. Bon appétit!
6. Cookie
Origin: The term “cookie” finds its roots in early computer science, particularly in UNIX programming, where it symbolised a small line of unaltered data passed between programs — a concept akin to a hidden message inside a fortune cookie. Additionally, a simpler explanation is that “cookie” derives from the notion of a manageable piece of data, akin to a bite-sized biscuit.
Digital Use: In the digital realm, “cookie” transcends its culinary connotation, signifying a small data piece stored on users’ devices during web browsing. This term has become integral to modern web technology, facilitating personalised and user-responsive online experiences.
So then, take a bite, and — with your cookie consent — let’s raise a toast to the next origin story.
7. Toast
Origin: The term “toast” in UI originates from the concept of a pop-up notification resembling a slice of bread popping out of a toaster. This metaphorical association likely emerged due to the brief and transient nature of toast notifications. BTW, “Toast” also serves as the inspiration behind Megan Ng’s article.
Digital Use: The metaphor of toast popping up from a toaster was adopted by mobile operating systems, where notifications emerged from the bottom of the screen. They provide feedback or information to the user, designed to appear momentarily and then disappear, minimising disruption to the user’s workflow.
When done right, toasts serve up a delightful user experience as smooth as butter on warm toast. Would you like to see the menu?
8. Hamburger Menu
Origin: The “hamburger menu” icon, created by Norm Cox in 1981, originates from the layers of a burger between its buns. Another interpretation suggests its three parallel horizontal lines represent abstract menu items, effectively reminding users of a list.
Digital Use: The ubiquitous hamburger icon, with its three parallel horizontal lines provides a sleek solution for navigating content on compact screens. There are a variety of other food-related menu names out there, like the Kebab, Döner, or Meatball menus discussed in this article.
Feeling hungry? Let’s unpack the Bento Box together!
9. Bento Box
Origin: The concept of the Bento Box has its roots in Japan, where it was originally devised as a convenient way for farmers and merchants to transport their meals while working in the fields, a practice that continues to this day for those taking lunches to work or school.
Digital Use: In 2023, the Bento UI trend has gained traction, particularly for its efficiency in displaying significant information within a compact space, making it ideal for dashboards or mobile applications. Its adoption demands a deliberate approach to guarantee clarity and user-friendliness, ensuring that each design element serves a purpose akin to the precision of arranging a Bento meal.
If you’re still navigating the culinary maze we’ve explored, fear not! Here’s a trail to guide you forward:
10. Breadcrumbs
Origin: The term “breadcrumbs” in UI design borrows from the Brothers Grimm’s tale of Hansel and Gretel, where the children leave a trail of breadcrumbs to find their way back home. Although the breadcrumbs are eaten by birds in the story, the metaphor aptly describes a navigational aid in web design. But is the web version of breadcrumbs any better at aiding navigation?
Digital Use: Breadcrumbs in UI design provide users with a hierarchical trail of links, showing their path from the homepage to the current page. This visual cue, often placed below the main navigation bar, helps users maintain spatial orientation and navigate websites or apps more easily.
And now, just follow the digital breadcrumbs — no birds to worry about this time!
Speed round
Here are a few more terms originating from Food & Cooking:
- Snackbar: Originating from the concept of a snack bar, a place for quick and easy food, a snackbar in UI design is a brief, temporary notification that appears at the bottom of the screen, providing users with simple feedback or action prompts without interrupting their workflow.
- Byte: Despite the myth that “byte” comes from “bite” (a small portion of food), it actually originates from a deliberate misspelling to avoid confusion in early computing. In the digital world, a byte is a fundamental unit of information, usually consisting of eight bits, used to represent everything from text to multimedia files.
- Spam: Named after the canned meat product made famous by a Monty Python sketch, spam in the digital world refers to unsolicited, often irrelevant, or repetitive messages sent over the internet, typically for advertising purposes, cluttering users’ inboxes and online spaces.
- Honeypot: Borrowed from the idea of a pot of honey used to lure and trap, a honeypot in cybersecurity is a decoy system or network set up to attract and detect malicious activity, helping to monitor, analyse, and counteract cyber threats by deceiving attackers.
Architecture
Having traded my drafting pencils for pixels, I’ve journeyed from the drafting table to the interface, but the principles of design remain etched in my architect’s heart. Let’s unravel a few hidden connections between the structures of architecture and the innovations of the digital age, discovering how ancient foundations shape the modern skyline of UI/UX.
11. Wireframe
Origin: The term “wireframe” in UI design originates from architectural and engineering practices, where it was used to describe a bare-bones, blueprint-style 3D model depicted in a 2D medium. The term “wireframe” comes from the appearance of these models, which resembled wire structures due to their line art representation.
Digital Use: In UI/UX design, a wireframe is an early-stage sketch used to visualise and communicate the structure and layout of a website or application, focusing on functionality and navigation without detailed visuals.
So now you know about wireframes: the digital equivalent of architectural blueprints, but without the need for hard hats and scaffolding.
12. Dock
Origin: The term “dock” for ships derives from Old English “docce” or “dolc,” denoting a trench. It later evolved to represent an artificial basin for ship loading, unloading, and repair, serving as vital infrastructure in maritime trade.
Digital Use: In UI/UX design, a "dock" usually denotes a user interface element for storing and arranging frequently used tools or shortcuts. Like physical docks for ships, digital docks provide a convenient spot for users to access essential tools or apps.
Ahoy, mateys! As we sail away from the docks, let’s delve into the mysterious world of digital cache. Prepare to uncover the hidden treasures of data storage!
13. Cache
Origin: The term “cache” traces its origins to French architecture, where it referred to a hidden storage space or hiding place, often concealed within the structure of a building. These caches were used to store valuables, documents, or provisions, offering security and protection from theft or intrusion.
Digital Use: In user interface design, a “cache” functions as a temporary storage system for frequently accessed data, like images or files, to boost loading speed and overall performance.
Now, let’s shift our focus from optimising data retrieval with caches to safeguarding digital perimeters with firewalls.
14. Firewall
Origin: The term “firewall” originates from the construction industry, where it refers to a physical barrier built to prevent the spread of fire between buildings or sections of a building. Initially, firewalls were literal walls made of fire-resistant materials like brick or concrete, strategically placed to contain fires and protect adjacent structures.
Digital Use: In UI design, a “firewall” serves as a protective barrier against unauthorised access or malicious attacks on digital systems. It controls data flow, preventing unauthorised users from accessing sensitive information, and is crucial for maintaining the security of software applications and networks.
Question: Why did the firewall refuse to let the window into the conversation? Because it heard it was a pane in the glass!
15. Window
Origin: The term “window” originates in ancient Roman architecture as simple openings for light and ventilation. Advancements in glassmaking led to transparent windows, revolutionising architectural design by integrating indoor and outdoor spaces with natural light.
Digital Use: In user interface design, a “window” is a graphical area displaying the contents of documents, applications, or operating systems, allowing users to interact with digital content. Inspired by their architectural counterparts, digital windows serve as virtual portals for multitasking and navigating between different software interfaces.
And fortunately, when these windows crash, there’s no need to call a glazier—just a quick reboot should do the trick!
Speed round
Here are a few more terms originating from Architecture:
- Sandbox: Originating as a children’s play area, a “sandbox” finds digital usage as a controlled environment for software experimentation, providing a contained space for exploration and creativity, much like its physical counterpart.
- Repository: From a physical storage place, “repository” has become a digital hub for storing and managing files, code, and assets, a concept akin to a centralised archive or library.
- Grid: From architectural blueprints where intersecting lines form squares, a “grid” now serves as a structured layout framework in digital interfaces, providing a systematic approach to organising content and elements.
- Framework: Derived from the supportive structures in building construction, a “framework” offers developers standardised tools and conventions for building applications efficiently, providing a scaffold for software architecture.
- Foundation: Derived from architectural support structures, a “foundation” in software development denotes core components shaping an application’s architecture, akin to the foundational elements that support physical structures.
- Partition: From the Latin for division, “partition” in computing refers to a logical division of storage space on a disk drive, similar to how physical partitions divide space in buildings or rooms.
- Blueprint: Originally architectural drawings, a “blueprint” now guides digital product development, outlining layout, functionality, and interactions, reminiscent of architectural blueprints that detail the construction of buildings.
Transportation
Hop aboard the UI Express as we traverse the digital landscape and roads paved with transportation terms. Buckle up and enjoy the ride as we navigate the exciting intersection of design and transportation terminology.
16. Dashboard
Origin: The term “dashboard” originally comes from the horse-drawn carriage era, where a “dashboard” was a wooden board that protected passengers from mud and debris “dashed up” by the horses’ hooves. This term evolved into the automotive world, where it refers to the panel in front of a vehicle’s driver, housing controls, and instruments.
Digital Use: In UI/UX design, a “dashboard” consolidates key information on a single screen, providing an overview of metrics and data points for efficient monitoring and analysis. Much like its automotive counterpart, a digital dashboard enhances productivity and decision-making by presenting essential data in a user-friendly format.
But if you prefer going in circles rather than getting straight to the point, you’re going to love the next chapter.
17. Carousel
Origin: The term “carousel” originates from the carnival ride that features a rotating platform with seats, typically shaped like horses or other animals, that moves in a circular motion for entertainment. Additionally, the term can refer to a rotating device used for displaying slides on a projector, showcasing a series of images in succession.
Digital Use: In UI/UX design, a “carousel” is a dynamic interface element that displays a rotating selection of images or content, often used on websites to highlight multiple pieces of information within a single, space-efficient component.
And now, for those who enjoy making decisive choices without spinning around, let’s tune in to the radio buttons!
18. Radio Buttons
Origin: The term “radio button” originates from the physical buttons on old car radios, which allowed users to select a single station from multiple options; pressing one button would pop out the previously selected button, ensuring only one button was engaged at a time.
Digital Use: In UI/UX design, a “radio button” is a graphical control element that allows users to select a single option from a predefined set of options.
With your radio channel set, you’re all ready to watch the landscape through the viewport.
19. Viewport
Origin: The term “viewport” originally refers to the small windows or openings on vehicles, ships, or other transportation means through which one views the outside. Historically, these portholes provided a crucial vantage point for navigation and observation, allowing operators to see and respond to their environment.
Digital Use: In UI/UX design, a “viewport” refers to the visible area of a web page or application that a user can see on their screen. It plays a crucial role in responsive design, determining how content is displayed across different devices and screen sizes, ensuring a seamless and accessible user experience.
Having enjoyed the view, it’s time to plan our next journey.
20. Roadmap
Origin: The term “roadmap” originates from the physical maps used in navigation, providing detailed routes and directions for travellers on roads. These maps were essential for planning journeys, ensuring travellers knew their path and key waypoints along the way.
Digital Use: In UI/UX design, a “roadmap” refers to a strategic plan that outlines the vision, direction, and progress of a product or project. It helps teams visualise the development process, set priorities, and communicate milestones and goals to stakeholders, ensuring a coordinated and efficient workflow.
Think of a roadmap as a project’s navigation app, except it won’t keep telling you to make a U-turn.
Speed round
Here are a few more terms originating from Transportation:
- Slider: In UI/UX design, the term “slider” originates from the sliding controls used in car radios for adjusting volume or tuning frequencies, now used in digital interfaces to allow users to adjust settings like volume and brightness by moving an indicator along a track.
- Beacon: Derived from navigational beacons used in transportation to signal or guide, in digital terms, it refers to a device that broadcasts signals to nearby devices for location-based services.
- Hover: From the aviation term where a helicopter stays in one place in the air, it now refers to moving a cursor over an item on a screen without clicking.
Nature
In this chapter, we explore how computing terminology has grown from the soil of biology. From bugs to viruses and neural networks, these terms draw inspiration from the natural world. Let’s explore the organic roots behind familiar digital concepts.
21. Bug
Origin: The term “bug” in computing is often traced back to an incident in 1947 when engineers found a moth causing a malfunction in the Harvard Mark II computer. However, this might be a myth, as the term was used earlier in engineering to describe mechanical malfunctions, and its use in computing likely evolved from this broader context.
Digital Use: In UI/UX design, a “bug” refers to any flaw or glitch in the software that causes it to behave unexpectedly or incorrectly.
If you think bugs are bad, wait until you meet their more sinister cousin: the virus. While bugs are just annoying little glitches, viruses are the ones that show up uninvited, make a mess, and refuse to leave—kind of like the worst house guests ever.
22. Virus
Origin: The term “virus” in computing borrows from the medical field, where a virus is a harmful agent that infects living organisms. The analogy was first used in the early 1980s to describe malicious software that spreads by inserting copies of itself into other programs, thereby “infecting” them.
Digital Use: In UI/UX design, a “virus” refers to malicious software that can disrupt the functionality of a user interface, compromise security, and degrade the overall user experience.
Let’s move on to something you actually want to move around: the mouse.
23. Mouse
Origin: The term “mouse” in computing originates from its physical resemblance to the rodent, particularly with its cable resembling a tail and its movement across surfaces mimicking that of a mouse scurrying. The concept was introduced by Douglas Engelbart and his team at the Stanford Research Institute in the 1960s as part of their pioneering work on human-computer interaction.
Digital Use: In UI/UX design, a “mouse” refers to the pointing device used to interact with graphical user interfaces. It allows users to navigate through digital interfaces, click on elements, drag objects, and perform various other actions, contributing significantly to the user experience.
And now, from the humble mouse to the vast expanse of the digital sky that you feed with more than just cheese: the cloud.
24. Cloud
Origin: The term “cloud” in UI originates from the metaphor of cloud computing, which refers to the delivery of computing services over the internet. This metaphorical association likens the abstract nature of remote computing resources to the nebulous and pervasive nature of clouds in the sky.
Digital Use: In the digital realm, “cloud” typically refers to cloud storage services or cloud-based applications accessed via the internet. These services and applications offer users flexibility and accessibility from anywhere with an internet connection.
From the vast expanses of the digital cloud, let’s zoom in again into something a bit more tangible: the cell.
25. Cell
Origin: The term “cell” in UI draws inspiration from its biological origins, where it refers to the basic structural and functional unit of living organisms. Coined by Robert Hooke in the 17th century, the term “cell” originally described the microscopic compartments he observed in cork under a microscope.
Digital Use: In the digital world, particularly in UI design, a “cell” refers to a discrete unit or compartment within a grid layout. Cells are commonly used to organise and present data in tables, spreadsheets, and various user interfaces, providing a structured and easy-to-navigate format for displaying information.
Hold onto your brain cells, because we’re about to take a whirlwind tour through the UI jungle, where terms multiply quicker than bacteria in a petri dish! Get ready to exercise those neurons as we sprint through another speed round!
Speed round
Here are a few more terms originating from Nature:
- Viral: The term "viral" originates from the rapid spread of biological viruses and was later applied to content that rapidly propagates across digital platforms, signifying widespread online circulation.
- Phishing: A term akin to fishing, describes fraudulent attempts to acquire sensitive information, such as passwords or credit card details, by posing as a trustworthy entity in electronic communication.
- Neural Networks: Modelled after the structure and function of biological neural networks in the brain, artificial neural networks are computational models used in machine learning and AI to recognise patterns and make predictions.
Desk & Office
In this chapter, we’ll go on a journey through the cubicle of UI terminology, where the desktop isn’t just for your coffee mug anymore. Let’s explore how the clipboard, folders, and tooltips made the leap from physical to virtual, shaping our modern user interfaces.
26. Desktop
Origin: The term “desktop” in UI derives from the physical desktop workspace, reflecting the layout and functionality of a traditional office desk where work is conducted.
Digital Use: In the digital world, the desktop serves as a virtual workspace, providing users with easy access to files, programs, and system tools through a graphical user interface (GUI).
As we exit the familiar landscape of desktops, let’s dive into the digital toolbox and explore the versatile world of clipboards, where snippets of information await their moment to shine.
27. Clipboard
Origin: The term “clipboard” goes back to its physical counterpart — a portable writing surface typically made of wood, used to hold papers in place for writing.
Digital Use: In the digital realm, a clipboard refers to a software feature that temporarily stores data that has been copied or cut. It allows users to transfer content between different applications or within the same application, facilitating tasks like copying and pasting text or images.
As we copy and paste our way through the digital landscape with a clipboard in hand, let’s organise our digital treasures into neat folders.
28. Folder
Origin: The term “folder” originates from its physical manifestation — a folded piece of cardboard used for organising documents.
Digital Use: In the digital world, a folder serves as a visual representation of a directory or container that holds files and other folders. It allows users to organise and manage their digital content in a hierarchical structure, facilitating easy navigation and retrieval of files.
From neatly organised folders to helpful tooltips, our journey through digital organisation continues, with every detail enhancing the user experience.
29. Tooltip
Origin: The term “tooltip” likely draws its origin from the physical world, where a tool or object might have a label attached to it providing additional information.
Digital Use: In the digital context, tooltips serve a similar purpose, offering brief snippets of information when users hover over or interact with interface elements.
Next, let’s talk about tabs: the unsung heroes of digital organisation, keeping your content in line and your browser from going tab-rrifically chaotic.
30. Tab
Origin: The term “tab” originates from physical filing systems, where tabs are used to label and organise documents within a folder or binder.
Digital Use: In user interfaces, tabs are graphical elements that represent different sections or content views within an application or webpage.
Now, let’s speed through a roster of office-born terms that keep our digital world running smoother than a freshly-oiled chair wheel!
Speed round
Here are a few more terms originating from Desk & Office:
- Toggle: Originating from physical switches or toggles, the term “toggle” in the digital world refers to a graphical element that allows users to switch between two states, such as on/off, often used for settings.
- Accordion: Originating from the musical instrument, the term “accordion” in digital design refers to a graphical user interface component that expands or collapses sections of content in a vertically stacked manner, providing a space-efficient way to display information hierarchies.
- Checkboxes: Originating from the physical checkbox used to mark items on a list, checkboxes in the digital world are interactive elements that allow users to select multiple options from a list of choices. They are commonly used in forms, settings, or selection menus to enable users to make multiple selections simultaneously.
- Card: Inspired by physical index cards or playing cards, the term “card” in digital design refers to a modular container for content, typically presented as a visually distinct and self-contained unit. Cards are widely used in user interfaces to present bite-sized information, such as articles, images, or product listings, in an organised and visually appealing manner.
Mythology & Stories
In this chapter, we unravel the mystical origins of familiar digital terms, where ancient tales intertwine with modern technology. From the guiding hand of the wizard to the gateways of portals, these concepts draw inspiration from the realms of myth and legend. Let’s explore the enchanted landscape where avatars roam and daemons lurk, bridging the gap between ancient stories and digital realities.
31. Portal
Origin: The term “portal” in UI design originates from the concept of a gateway or entrance, often associated with grand architectural structures or mystical gateways in folklore and mythology. It embodies the idea of a central access point or doorway that leads users into a digital space or experience.
Digital Use: In the digital world, a “portal” refers to a user interface element or web page designed to serve as a gateway to various resources, services, or information within a larger system or network. They act as centralised hubs that enable users to access relevant content or perform specific tasks efficiently, thereby enhancing usability and accessibility.
From gateways to the unknown depths of digital realms, our journey takes a sharp turn, from portals of exploration to the lurking dangers of Trojans waiting to infiltrate.
32. Trojan
Origin: The term “Trojan” originates from the ancient Greek myth of the Trojan Horse, where Greek soldiers used a deceptive wooden horse to infiltrate and conquer the city of Troy. This story symbolises cunning and trickery, as the Trojans unknowingly brought their enemies within their walls.
Digital Use: In the digital world, a “Trojan” refers to malicious software that disguises itself as legitimate or harmless to deceive users into installing it. Once inside the system, Trojans can execute harmful activities such as stealing data, damaging files, or creating backdoors for further attacks, much like the deceptive strategy used in the myth.
From the shadows of deceptive Trojans to the vibrant personas of avatars, our path twists from fake identities in cyberspace to virtual personas in the digital realm with avatars.
33. Avatar
Origin: The term “avatar” in UI design traces its origins back to Hindu mythology, where it refers to the earthly incarnation of a deity.
Digital Use: In the digital world, an “avatar” is a graphical representation or character that represents a user within a virtual environment, such as a video game, social media platform, or online forum. Avatars allow users to personalise their online identities, express themselves visually, and interact with others in virtual spaces.
As we exit the virtual realms of avatars, let’s plug back into the wired world of Ethernet connectivity, where the real magic of digital networking awaits.
34. Ethernet
Origin: In ancient Greece, "aether" symbolised the sky, likened to the air surrounding us. It was believed to fill the upper atmosphere and be the breath of gods, originating from primordial chaos. It also represented the air we breathe and the vastness of the heavens.
Digital Use: In the digital world, “Ethernet” refers to a family of wired networking technologies used to establish local area networks (LANs). It serves as the foundation for many modern wired networking solutions, offering high-speed, reliable connectivity for devices such as computers, printers, routers, and switches.
And just like Gandalf — who is never late, nor is he early, he arrives precisely when he means to — our journey from the realms of Ethernet connectivity to the enchanting world of digital wizards reaches its magical conclusion.
35. Wizard
Origin: The term “wizard” in UI design draws its inspiration from the concept of a magical wizard or sorcerer, known for guiding and assisting individuals on their quests or journeys.
Digital Use: In the digital world, a “wizard” refers to a user interface element or interactive feature that guides users through a series of sequential steps to complete a task or achieve a goal. Wizards are commonly used in software applications, websites, and digital platforms to simplify complex processes, such as software installation, account setup, or form submission, by breaking them down into manageable and intuitive steps, thereby enhancing the user experience and reducing errors.
And with that, may your Ethernet cables be untangled and your wizards always spell-checked!
Speed round
Here are a few more terms originating from Mythology & Stories:
- Daemon: Stemming from Greek mythology, daemons were supernatural beings thought to be intermediaries between gods and humans, with computing adopting the term to represent background processes.
- Java: Named after the Indonesian island, it’s a widely used programming language known for its portability and versatility in web development.
- Easter egg: Inspired by a tradition of hidden surprises, it refers to concealed features or messages intentionally hidden within software by developers.
- Bluetooth: Named after King Harald Bluetooth of Denmark, it’s a technology standard for short-range wireless communication between devices, facilitating data exchange over short distances.
- Icon: With roots in ancient Greek culture, an icon originally referred to a sacred representation of a deity or revered figure. In the digital realm, icons have evolved to symbolise intuitive navigation and user interactions, serving as visual cues that enhance the user experience and accessibility.
UI Analogies and Their Practical Applications
And there you have it. I found many fascinating origin stories for terms we regularly use in our digital world. As a UX/UI designer, I often use terms with rich histories, unaware of their true origins.
Skeuomorphism
We have to be aware that while these discoveries are fun and enlightening, they also hold deeper significance. This connection between the physical and digital worlds is crucial; when our interfaces mimic real objects and interactions, they become more intuitive and engaging. Understanding the legacy of our language can enhance our approach to creating digital experiences that resonate deeply with users, blending the old with the new in meaningful ways.
There’s even a term for this: Skeuomorphism, the art of borrowing from the tangible world to inform digital design. By mimicking the look and feel of physical objects, such as buttons that look like they can be pressed or switches that flip, skeuomorphism helps users understand how to interact with digital elements based on their real-world experiences. You can learn more in this article about skeuomorphism by NN/g.
Building Bridges Between Familiarity and Functionality
The use of real-world metaphors in UX and UI design closely relates to several principles outlined by the Nielsen Norman Group, particularly Jakob Nielsen’s heuristics for user interface design. Among them, these are the most relevant for this topic: ‘Match Between System and the Real World’, ‘Recognition Rather Than Recall’ and ‘Consistency and Standards’.
Modern design often uses a mix of flat and skeuomorphic elements, known as “Neumorphism”. This style maintains some of the depth and realism of skeuomorphism but with a more subtle and modern aesthetic.
History of UI Components
While doing my research for this list, I stumbled upon an engaging article by Megan Ng titled “Why do we call it breadcrumbs? Diving into the history of UI components”, where she humorously explores the origins of various UI terms as well. Her witty and concise approach is definitely worth checking out. While I touched on a few terms she covered for completeness, I’ve also unearthed alternative origin stories for some of them.
Biomimicry
Some time ago, while listening to the podcast “30 Animals That Made Us Smarter,” I was inspired by how technology often mimics nature. The examples of biomimicry in the podcast were fascinating, and you should definitely give it a listen. Writing this article reminded me of the stories I heard there, and it made me realise that, just as nature inspires technological advancements, familiar real-world concepts can inspire intuitive digital designs.
Final thoughts
Who knew that diving into the history of UI could be so fascinating? Like a well-crafted design, it’s all about making connections—whether it’s with users or with history.
Let’s continue to create interfaces that are as delightful as they are functional.
Happy designing!
