14 UIs that changed the way we design

Every so often, a UI advancement not only changes the way we approach design, but also how we view the possibilities tech provides in the world. Sometimes they teach us a whole new way of thinking. And just like many of the world’s great inventions, they slide so seamlessly into our lives that we forget that we even lived at one point without them.

For this piece, we asked some of the most influential names in design about the UIs that changed the way we think about digital product design—both the big shifts that indisputably rocked the tech world at large, as well as the more subtle shifts that changed a more personal approach.

Google’s search engine results page (SERP)

After years of unsophisticated search engines, Google Beta burst onto the scene in 1998 offering the first true user-friendly option. “It was the first time a search engine had been so simple,” Aarron Walter, vice president of design publishing at InVision, remembers. Bob Baxley, SVP of design and experience at ThoughtSpot, says it was a grounding influence for metrics-based design methodologies: the idea that the digital product shouldn’t always be measured by its aesthetics but rather at how effective it was at moving a specific key figure.

It was a “to-the-point” approach at finding information, Jehad Affoneh, head of design at VMWare, shares. And once you’ve hit the nail on the bullseye, only minor tweaks are necessary: Even 20+ years on, the design essentially looks the same.

Amazon’s navigation tab

The internet’s potential to build a new economic model was a tempting idea to businesses early on—but the translation from storefront to landing page was a tough sell to most consumers. Then Amazon came and changed the e-commerce game in 1998. Drawing inspiration from the portal approaches from Netscape and eBay, the tabbed navigation now directed customers to the shopping categories a website offered, just like aisles in a store. Just like Google’s SERP, the design hasn’t changed drastically since—but it has been improved upon through constant testing, optimization, and interaction over the years.

Mac OS X 10.0

“Speaking for my generation, OS X was one of the biggest leaps in design,” says Federico Holgado, product manager at MailChimp. As perhaps the first mainstream marriage of beauty and functionality, even the most technologically-adverse users could understand how design could make the world of tech less complicated, without sacrificing power. “I remember hacking my Windows desktop to skin it like OS X just because it was so beautiful,” Federico says.

With OS X came the foundation of “likable design” and some of the first platform-wide design standards, creating a closed-system of order in what previously had been a wild-west world of open-source chaos.

Gmail

Did you know that when Gmail was first introduced in 2004, you had to be invited? It was a much coveted invite and people even sold them on eBay for large sums of money. The clamoring for Gmail wasn’t about its look—it still leaned heavily on Google’s efficiency-over-beauty designs, and it wasn’t much unlike other email web interfaces. What made Gmail different was its feel. The experience was faster and smoother than competitors, leveraging then-novel features like search for messages. Not to mention that at the time, 1GB of free storage felt like stumbling upon an undiscovered room in a small apartment. Gmail reminded us that in order to create a good product, it needed to be designed around a lasting customer experience.

Apple’s homepage

If you’ve ever opened up a photo file you downloaded more than a decade ago, you know webpages were designed for slower-than-wished-for internet speeds.. Designers were told to adhere to specs reflecting unfortunate realities, not possibilities. But then Apple took a big swing around 2005 by ignoring bandwidth concerns and posting big, glossy images right on the front page of their website. This revolutionary “be the change you want to see” method established a completely different marketing approach on the web, encouraging a demand for richer experiences.

Nike and other big names took the cue and supplied what their customers wanted, impacting the aesthetics of the web dramatically.

Viddler’s timed comments

Who knew that back in 2006, a company named Viddler would herald the “Pivot to video” phase in, well, just about every digital industry? Not only did they create a brand new way to engage with media by offering comments, tagging, and discussion at specific moments in their videos, but the platform also allowed users to see one another’s comments.

“This layered UI feature is now used across so many media tools and platforms that it’s an expected behavior,” says Ashleigh Axios, chief experience officer at &Partners, and the chair of the national board of directors at AIGA. “It’s now been integrated into video in ways that allow users on platforms like Facebook to react with emojis, share live dialogue or comments, and—if they missed the live event—play back the full experience, reactions and discussion included, at a later time.”

The asynchronicity afforded with the new model allowed designers to more aptly prepare for publishing and integrate an entirely new format resembling real-life dialogue.

Facebook’s News Feed

Remember what you used to spend hours doing on Facebook? Most likely checking sporadically throughout the day to see if anyone poked you or wrote on your wall… which would take about one minute. Then you’d spend the rest of your time culling your friends’ (and frenemies’) profiles to see if anyone had posted anything juicy. That is, until the introduction of News Feed in 2006, which completely changed the way we think about what a social network is—and what it can do. Facebook became less of a message board, and more of a discovery platform, leading to more engaging content from our social circles, and perhaps more strikingly, from brands and news sources. While they weren’t the first to invent endless scroll, they certainly popularized it. Measurements like “engagement” and “time spent on page” became key in our work, because they’d become reflections of how we use the platform in our personal lives.

Microsoft Office’s Ribbon

Microsoft Office traded out a simple toolbar for the compact, complex, and at times, confusing “ribbon” in 2007. Increased functionality in the application took front-and-center placement in the virtual command center. While the design has grown and iterated on the same UI concept for decades, it’s just as prominent today.

Rdio

As mentioned before, in order to get users comfortable enough with the web, designs had to imitate real world experiences as closely as possible. And for a decade or so, every hip web design was influenced by skeuomorphism, until Rdio came along in 2010. With no whimsical icons or ornaments, the simplicity of the text-on-white UI gave designers the permission to grow bolder. The world within the screen was no longer just an extension of life outside of it.

Twitter’s pull to refresh

Twitter’s contribution to the endless scroll went the opposite direction of Facebook’s… literally. When they debuted their “Pull to refresh” feature in 2010, it added the ability for users to request updates on demand in a single swipe. The feature was first developed by Loren Britcher for “Tweetie” a third-party app in 2008. It was then bought by Twitter and shared to the masses, offering them the new option to both scroll down to see older posts, or refresh and see new posts in real time. It made content feel infinite, guling us to our phones and heralding in what we know as the attention economy.

Responsive design

Going on the Internet used to mean sitting down at your desktop in your “computer room”—not quickly checking your notifications during a lull in conversation (and sometimes mid-conversation). But, of course, all of that changed with the advent of the iPhone. With more users accessing sites from mobile devices every year, websites needed a way to create a great experience for everyone accessing sites on a laptop or phone, without additional effort for the user or designer. Enter Ethan Marcotte’s 2010 “Responsive Web Design” which not only coined the term for an adaptable layout, but popularized the concept so much that Mashable called 2013 the “year of responsive design.”

Since then, responsive design has become every bit as integral to our online experience as traditional web design. “It’s ubiquitous and essential to the multi-platform experience that we’re all used to,” Aarron Walter explains.

Squarespace 6

For years, if you wanted your own professional-looking web real estate you had two options. One, you could hire an expensive website developer or company to create one for you, or two, you could begin the arduous process of learning to code yourself. But all that changed with Squarespace. After years of building standard plug-and-play websites, they released Squarespace 6, drastically lowering the barrier to entry for website development. so that a small business or even mode. Finally, the layperson or small business owner could make a personal site that looked like it belonged in modern times. The minimal and flat design trend it heralded in influenced many designers and inspired a whole decade of almost-identical websites.

Snapchat stories

Remember how adults of a certain age used to say “the internet is forever?” Well, Snapchat’s beauty was that it proved otherwise. In a post-Feed world, the rule was engagement—but there was a fine line between keeping abreast of news and being overwhelmed by it. So in October 2013, Snapchat released Stories: striking a balance between a never-ending narrative of posts and the ephemeral nature of navigation that users crave. Soon, basically every social media platform followed suit, adding features that would not only surprise and delight, but also continually engage.

iOS skin tone emojis

White men have dominated the tech world since its inception—not by accident, but on purpose. So it’s not surprising that that worldview has intricately permeated design and product, much like how Kodak’s Shirley card predicated racism in photography for decades. As the Internet linked the world in new ways, it clearly highlighted disparities that had previously been ignored because of physical distance. Diversity, equity, and inclusion conversations began more openly in the workplace, and those working in tech felt like there were small ways they could help create this more equitable future. Enter: The emoji variation in flesh-skin tone colors on iOS in 2015.

“As an African-American, I appreciate the inclusion and challenge of the assumption,” says Natalie Nixon, president of Figure 8 Thinking, LLC. “After all, the global majority are black and brown people. This just makes intelligent business sense.👏🏽”

Not only did this lead to more platforms creating more inclusive graphics, but also a new conversation in the world and among colleagues.

The history of UI design can’t be boiled down to 14 key points…. so… what’d we miss? Tweet at us @InVisionApp with your picks.