Transition Page Recycler using Animated Recycler View

Mobile GUI Design Trends Changes Over Time

When the point of contact between the product and the people becomes a point of friction, then the industrial designer has failed.

Stop reading. Take a moment to think back, and ask yourself, which was the last app you used? And no, using Chrome to read this doesn’t count. Now, focus on the app. What made you choose it over other similar apps? What was the first thing that made an impact on you and drew you towards it?

Did it live up to your expectations? Was the userflow smooth and seamless? Was the layout intuitive and aesthetically pleasing? Were you able to accomplish your purpose without any hiccups? Were there any animations that caught your eye?

While your responses would be most welcome in the comments section below, the conclusion drawn from answering these questions is that in a world where the tiniest of factors can prove to be the difference between a good and a bad experience, pleasing the user subsequently becomes the pivotal point that dictates whether or not a product is successful. Was it always like this? Was this user-first, design-centric approach prominent from the beginning? The answer is a resounding and rather disappointing ‘no.’

Early Stages

Like most technological developments, the idea of a User Interface was thought of light years ahead of its time, in an age where digital computers were large mainframes, which required pre-programmed and scheduled punch cards for even the simplest of interactions. Douglas Englebert, an electrical engineer who worked as a radar operator in World War II, envisioned a CRT display system that showed users graphical information, his ideas fueled by a paper on the subject written in the 1930s. Englebert eventually went on to display text and lines on a CRT screen in 1968, taking the first step towards the evolution of user interfaces and opening the world’s eyes to what the future looked like — a completely digital, paperless world.

This vision of things to come caused Xerox, a company that made its fortune selling photocopiers, to balk and take the reins. The company launched PARC (Palo Alto Research Center), a forward-thinking unit that encouraged visionaries to come there and work on a five-year plan — moonshots of that era, if you may. The PARC team ended up doing just that, launching the Xerox Alto with a 606*808 raster display, roughly the same size as a sheet of paper, with a file manager and bitmap creator inbuilt. A few years down the line, Smalltalk, a development environment for the Alto was launched, and it was this program that first introduced concepts like windows to separate tasks, icons to depict programs, dropdown menus, radio buttons and scrollbars.

Apple’s Contributions to the Development of User Interfaces

With user interfaces poised to make a widespread commercial influx, it was none other than Apple that led the charge. Building on the success of the Apple II, which displayed both text and graphic albeit through a command line interface, Wozniak and Jobs, aided by former PARC engineers, set about to recreate the work done on the Alto, manifesting its forward-thinking interface concepts in the form of the UI for Apple’s next-gen Lisa computer. The Lisa built upon Smalltalk’s interface, introducing new interface standards like universal icons and disabled items, and went on to introduce some of the first experience-driven standards like double clicking, drag-and-drop, and keyboard shortcuts. The Lisa’s sales figures were low due to its high price tag and complex code mechanism, but it sparked the idea of the Macintosh in Jobs’ mind, giving rise to an entire lineup of relatively affordable, yet powerful and easy-to-use computers which persists unto this day. It was around this time that Bill Gates, spurred on by his time at Apple and the efforts of other companies like VisiCorp, went on to create and launch the prequel to Windows, dubbed Interface Manager.

Design in the 90s

The 90s marked the period that ultimately defined modern user interfaces, with numerous companies throwing their hats into the ring, coming up with and ultimately launching software sporting variants of the window pattern created by Xerox and popularized by Apple. While most of the contenders during this period were ultimately phased out, each fork sported some unique features that make appearances in interfaces to this day, such as Commodore’s Amiga Workbench, that featured stacked windows, Acorn, which introduced proportionally-sized scrollbars and a dock at the bottom, and NeXTSTEP, which sported a floating dock on the side and an X button to close a window.

As time passed, Windows and X Window System became the frontrunner interfaces, with Windows developing into a successful line of operating systems and X Window System becoming the open source Linux solution that gave rise to projects like GNOME and KDE.

Evolution of Design Patterns

As the end of the millennium rolled around, the spotlight shifted away from desktop operating systems, with the World Wide Web taking center stage. Since website layouts and components relied on familiar patterns like menus on the top, checkboxes, et al, designers focused on styling these components, marking a paradigm shift from the creation of design to the refinement of it.

Due to the commercial advent of the personal computer, an increasing majority of users accessing software programs and websites were average consumers, lacking in technical skills. The new digital interaction model and absence of familiarity caused the onboarding and subsequent task flows to suffer, giving rise to user dissatisfaction and high drop-off rates. Designers took it upon themselves to remedy this, creating a visual style called “skeuomorphism”, which is “the design concept of making items represented resemble their real-world counterparts.” Skeuomorphic design spread like wildfire, with Apple being one of the frontrunners in its expansion, giving a paper-like look to its Notes app, a leather finish to its Wallet app, and so on. The trick worked, and bred a sense of familiarity among users, easing the transition to the digital interaction model. As time passed, however, personal computers (and subsequently, laptop computers) become a common possession, and the need for a real world-resembling visual language passed.

At this point, designers unanimously decided to unite at the other end of the spectrum, taking advantage of the lack of boundaries in the digital world,  quickly developing and spreading the “flat design” trend. Flat design sported vivid colors, thin and futuristic fonts, plenty of whitespace and a stark, minimal look with a signature lack of detail. While the skeuomorphic trend still persists albeit faintly, flat design has gained a monopoly on the web and some operating systems like Windows 8, only to be recently challenged by Google’s Material Design.

Handheld Devices and the Intentions Behind Their Design

When handheld devices first became popular in the early 2000s in the form of Windows Mobile handsets, iPods, MP3 players, et al, designers everywhere agreed that the desktop point-and-click metaphor simply could not apply to this category of digital systems. Led by Apple once again, mobile designers adopted a post-WIMP style of interaction, where content selection was initiated either by a touch or button press. This style worked well and became the standard for handheld interaction, going on to become the universally accepted approach to designing for anything that could fit in the user’s hands, including tablets.

Handhelds quickly spread among consumers, becoming an unquestioningly necessary accessory and augmenting human culture in never-before-seen ways. While desktop computers remained stationary and laptop computers were relatively bulky, smartphones and tablets allowed a level of portability that made them more than just computers, going on to become devices of leisure and real-time entertainment. The increasing reliability of users on this class of devices and their unprecedented spread among consumers sparked the first serious User Experience revolution, which continues unto this day. UX has become an important standard in design, encompassing UI design as well as giving rise to subcategories like interaction design, and it is good UX design that augments and vivifies our handheld experience.

Current Trends

As technology matured, design took on numerous forms, with design teams everywhere adding their own flavor and spin to the accepted trends. Each subsequent update, be it an operating system, an app or a website, saw yet another mutation towards the final form that the team behind the product envisioned, and clear distinctions and uniqueness arose.

Microsoft worked outside the box for a few years up until the ‘Aero’ glass-like look of Windows 7, after which it went the completely flat route for both its desktop as well as its mobile operating systems, characterized by large colorful tiles, an elegant and thin typeface, and a monochromatic color scheme within apps, calling this style “Metro UI.”

Apple built on its Lisa operating system, maintaining the underlying look and experimenting with trends along the way. Right up until OS X Mavericks and iOS 6, Apple’s software was prominently skeuomorphic, using real-world finishes and gradients across the operating system as well as the apps. From OS X Yosemite and iOS 7 onwards, things changed to reflect flat design, keeping Apple’s unique flavor in the form of subtle yet delightful gradients, and elegant type across its range of products, even extending to the buttons on its Macbook lineup.

Linux distros, due to their varying nature and host of interface managers lack a unified look, with Ubuntu, sporting the side-dock from NeXTSTEP gaining favor among end users for its simplicity and similarity to Windows.

Google stayed on the fence for many years, flirting with both ends of the spectrum by using plenty of whitespace, and subtle gradients as decor. This lack of a complete commitment eventually led to the formation of Material Design, Google’s flat design language augmented by skeuomorphic metaphors like paper and ink, which has taken the software design industry by storm as of late, making its way from Android to the web, and even to other platforms.

What Lies Ahead

With experience design (UxD) and interaction design (IxD) occupying the forefront of designers’ minds in the current age, what do the years to come hold for the never-ending evolution of design? Two clear camps are forming around Augmented Reality and Virtual Reality. While the latter will still rely on interface and perhaps borrow from existing trends as early adopters like Google Cardboard are doing, the former mostly constitutes of a natural and intuitive experience that lacks an interface. UI may quite possibly be taken out from the AR equation altogether, but suppositions are just that and only time will reveal its mysteries.