Just as we did a year ago, I'm kicking off 2014 with a list of design trends I expect to gain ground over the next twelve months. The world of interactive design is an extreme fluid in terms of what's determined as a staple of good design from year to year.
It should go without saying that these are my thoughts as to how design will play out over the course of the next year. I will certainly be wrong on a few of them, but I'm also extremely confident in all of these making some sort of appearance throughout the course of the year, as prominent or short-lived as they may be.
1. Theming Apps
Up until the latest generation of iPhone hardware, the color options were slim. In fact, they seemed to take a page almost straight out of Henry Ford's book allowing customers to have any color they wanted, so long as it was black or white.
But, with the introduction of the gold anodized iPhone, as well as the early iPod-esque color scheme of the iPhone 5C series, the choices have increased exponentially on behalf of the customer. Something Apple doesn't seem to do quite often.
The question now is, how does this increase in color choices for hardware play into app design? Up until now, designers have never really had to deal with making an app match the devices' color. Even a fashion-challenged individual, such as myself knows, black and white can go with – almost – anything. But, this new color scheme, be it the gold iPhone or the vibrant selection of the 5C, makes for a much less simple solution when you're trying to create a more seamless experience.
A great deal of the beauty and ongoing evolution of Apple's iOS devices is making the hardware as invisible as possible when it comes to daily usage. However, they can only do so much when it comes to the users daily experience on the device, as third-party apps are what users are going to be interacting with most of the time. This means the responsibility to continue the invisible experience comes to the designers of the apps. And ultimately there are two options, the latter of which is this trend.
White. Sure, Dribbble has been taken over with a white redesign of every app out there, and my Twitter feed is still filled with people complaining, but it's the most logical solution. A primarily white interface is as agnostic as it gets when it comes to designing for a plethora of colors. Whether it's the gold iPhone Johan van der Smut would trade his collection of epidermis for, or one of the iPhone 5C color choices, which has even the vibrant characters from Yo! Gabba Gabba blushing, white simply works. And it's most certainly a logical choice for the designers of many apps.
The second option is theming. Theming is the solution to making sure apps fit even better within their micro-ecosystem by means of giving various options within the app for the user to select the color scheme of the UI. Right now there are but a few apps which utilize this, but with the redesigns for iOS 7 more and more seem to be offering it.
The two which most notably stick out to myself are Fantastical and Tweetbot 3.0. I'm well aware many apps in the past have offered a "dark" version alongside their more retina-straining counterparts, but never before was it implemented into the app by means of making it better work with a specific hardware color. And even then, both Fantastical and Tweetbot offer only 'light' and 'dark' color schemes.
But throughout the year, I'd like to see designers take this a step further. And I think it's a very likely possibility that some designers will. That is, to create a collection of UI themes within apps which also correlate to the colors of the iPhone 5C (and therefore the iPod Touch series), allowing the application to better be customized to the users hardware. It's definitely much more work on behalf of the designer(s), but it's certainly possible. To take it yet another step further, I would really like to see apps capable of automatically detecting what the color of the device is and implementing it's correlating theme without any action on behalf of the user.
This won't be possible with all apps, as many apps associated with brands would have a difficult time implementing this, but across the board there are more than enough apps capable of utilizing this trend.
2. Color as Affordance
Going hand-in-hand with the above attribute of more applications and websites taking on a very minimal, white UI, color is going to become an even more important tool of affordance.
Color, or more specifically the psychology behind color, is present in every facet of our daily lives. Whether a red stop sign, meant to incite the urgency to stop, or the color-coded circles of the USA Today redesign, meant to train your brain to associate certain colors with certain sections of news, your brain uses colors on both a conscious and subconscious level to make decision–making less resource intensive.
And it's no different in interfaces as it is in the physical world. With the ubiquity and acceptance of digital UIs, the fall of the overly-skeuomorphic designs of the past was inevitable. However, the lack of these physical–reminiscent attributes on screens, without the addition of affordance in other manners, is problematic. So, the natural solution is to use colors more effectively and creatively than ever before, to make sure we don't make cognitively overwhelming apps. Two apps which are already making great use of this trend are Mailbox and Shake.
Mailbox goes about it by means of using colors to indicate the action you're making to an email. When making an action on an email by sliding the preview either to the left or right, you're presented with an option to archive it, delete it, set a reminder to it, or add it to a list. Archiving is green, deleting is red, adding a reminder is yellow, and making a list is brown. With brown being the exception, the green, red, and yellow all make sense in the psychological sense, as over the course of previous UIs, we've come to accept red as the means of getting rid of something, and green as a mean of acknowledging an item or an action and dismissing it.
Elevatr goes about it a slightly different way, albeit reminiscent of what the USA Today redesignhas done. Elevatr is an app meant to help guide you through the workflow from coming up with an idea, all the way to the execution and business side of making said idea become a reality. There are five different steps to the Elevatr process, each of which is associated with a color. As the process moves on: from 'The Idea' to 'Execution', the colors become more demanding of action, going from a light blue to orange, as seen in the image below. It's a simple way to differentiate the different steps, as well as incite action as the final steps become nearer.
There isn't one specific way to implement color as a means of affordance, and yes it's been around in UI for a long time, but more so than ever, color is going to start taking the place of other visual elements across mobile devices and laptop screens in hopes to simplify the experience without diluting the values which make it work on a cognitively efficient level.
3. Layers and Depth Within Apps
Correlating yet again to the changes in iOS 7 – more specifically the visual flattening of the GUI – a trend which is already in affect and one which will continue to take control is the act of creating layers and depth within both iOS 7 and third-party apps.
When working with a two-dimensional display, it's often difficult to show hierarchy within the UI. A loophole around this is to create artificial layers of sort within the UI of the OS or app, as affordance to the hierarchy of elements.
The most obvious example of this is the homescreen of iOS when – the rather controversial – parallax is turned on. It creates a psuedo-3D environment on iDevices two-dimensional display by adding a 'z-axis' just behind the app and folder icons, which mirrors the placement of the UI – on said z-axis – according to the devices orientation in your hand.
If you look extremely close at the homescreen as it's going about it's parallax behavior, you'll notice three layers tied to the z-axis: the wallpaper, the app and folder icons, as well as the notification badges on top of each app/folder. Upon first inspection of iOS 7, I didn't notice the notification badges were on yet another layer on top of the icons, but they certainly are.
There are plenty of uses for creating this type of depth via layers within applications, but with a few exceptions, I'm yet to see any app really make use of it. Since it's only the beginning of the year, let's hope some of you reading this will give me some examples to write about throughout the year.
4. Parallax
Some call it a gimmick, others – myself included – enjoy the possibilities parallax adds to the ongoing designing and development of interfaces.
While many of you will inevitably hound me for separating this and the above trend, there is a stark difference. Adding layers and depth to a UI is a means of creating visual hierarchy and affordance while the actual implementation of the parallax is a means of adding a new way to interact with those layers. It is possible to have one without the other, but when put together, their true potential arises.
Hatch is an app, which through the use of depth in layers as well as parallax, creates a unique environment for your character to exist in, and for you to interact with it through. The blurred background of your Fugu's forest moves in a mirrored fashion to the actual location of where your Fugu is, making the environment where your Fugu exists seem much less stuck on pixels, a la Tamagotchi and much more iOS worthy, by creatively utilizing the use of depth to make the experience more immersive.
The use of parallax between the layers within the app is what makes it work. Why I chose to place Hatch under this, rather than the above trend is due to the fact that certain elements of the game count on your devices parallax abilities. In order to reach certain acorns, fruits, or stickers within the app, you must tilt your phone in a specific manner, to tap on the objects. It's a brilliant way to make parallax far more than a gimmick by making it part of how you must interact with the game itself.
A brilliant web example, although certainly not the first, is Medium 1.0. Websites have long utilized parallax, but never before have I come across an entire ecosystem of content where the movements of the parallax are as smooth and responsive as Medium's. Not only does content seem to glide over the images as you scroll, Medium has managed to incorporate blur as a means of a parallax effect. Blur being the topic of discussion in the trend below.
I expect to see a great deal more of designers and developers make use of the parallax throughout 2014. Sure they will be plenty of people calling it a gimmick, and sure many implementations of it will be poorly done, but it's possibilities are almost strictly limited by designers imaginations of ways to use it to it's greatest potential.
5. Blur. Lots of Blur.
The shortest write-up of all the trends is this one. There isn't even much to explain it, other than it's the process by which certain layers within the UI of applications are more and more commonly being blurred. It's a logical and quite natural solution to keeping the UI minimal while still creating effective hierarchy of elements.
An example of this, which was around well before iOS 7 is, Rdio. The beautiful blur of the album art while on the now-playing screen is the epitome of the effectiveness of using this for both aesthetics and functionality, be it on their website, within their desktop app, or on their respectively native mobile apps.
There doesn't seem to be a consistent means of blurring content, but with the far–reaching capabilities of CSS3, in combination with the limit–pushing minds of developers, adding the blurred effect to interfaces is becoming less and less resource intensive, making for a simple solution which isn't overly resource-intensive.
6. Experimentation with Navigation Systems
Each year it seems a new method of navigation takes the cake and becomes more ubiquitous than ever. Last year it was the 'drawer' in collaboration with the 'hamburger menu icon', and the previous year it seemed to be tabs along the bottom of the application. However, this year, there won't be a consistent manner of navigation systems.
As iOS 7 continues to make it's impact on interface design – although many can and will argue it's not iOS 7, but simply the next logical step in interface design – designers continue to push the limits of creativity, making sure to wring out every bit of control they're given over the UI of their apps. With more effective use of layers, blur, and parallax, as mentioned above, this year will likely be a year of much trial and error, looking to both an aesthetically–pleasing and user–friendly solution to navigation systems, no matter how simple or complex they may be.
7. Experimenting with Transitions
With the use of layers – or simply navigating through an interface – comes the need for clean and simple, yet unique methods of transitioning from one layer or section of the interface to the next. It needs to be smooth, but not feel sluggish. It's a fine balance between the two, even more so when you take into account the desire to stand out amongst the crowd, but such restraints continue to push innovation and creativity.
An app which really surprised me with it's transitions is Squarespace's new Metrics app. As part of their redesigned collection of apps for Squarespace 6, it's extremely simple, but ridiculously smooth transitions blew me away.
When navigating between the various sites you're monitoring or going to the navigation tab, a simple swipe takes you from one tab to the next in an extremely fluid motion. Along with the fluid transition, the screen you're currently on zooms out a bit, giving a subtle hint of affordance. It's hard to explain with words alone, so if you're interested, be sure to go download it and check it out for yourself. It's one thing to talk about a transition as such, but it's another to actually implement it in final product. And sure, it's not exactly unique, but as far as I can tell, it's making great use of the new physics capabilities made available to developers in iOS 7.
I expect much more use of the physics engine in iOS 7, as well as more efficient use of CSS3 when working with these transitions, throughout the year. As with the navigation systems, expect a plethora of new transitions to arise. Who knows, by the end of 2014, maybe we'll have one which becomes a bit more ubiquitous than the rest.
8. Importance in the Details
Oftentimes it's the small, usually overlooked features of a website or app which truly define how well designed it is in terms of UX. We're in a new age of interface design across the board and part of that now is focusing on the user more than ever before, making sure to make interacting with the interface as efficient and pleasant as possible.
There are hundreds of ways to go about this, but there's a specific utilization of a small detail which, for me, completely changed how I go about consuming content as of recently. That is the reading time, which is part of Medium's offerings when perusing through contributors content.
My first experience with such a detail wasn't Medium though, it was the blog of iA, where with each blog post, as you scroll down, a small string of text will pop up along the scroll-bar, notifying you how much longer you have to read – in minutes – until the article is finished. With both iA's and Medium's implementation of a rather small feature, it makes the lives of users and visitors more efficient by allowing them to more effectively chose when to read certain articles. If you're on lunch and care to read one of the Medium posts you have saved, you can easily browse through and see which ones you can read in an effort to maximize the amount of content you're taking in in a small amount of time.
The reading time is but one small detail. There are dozens more currently being used throughout interfaces, and hundreds more to be thought of, but more so in 2014 than ever before, I see the intricate aspects being thought of in hopes to more effectively make the experience as smooth as possible.
9. Content Impermanence
If you're alive, breathing, and reading this article, I hope to sweet–baby–Jesus you've recognized and come to terms with the permanence of essentially anything shared on the web and/or on electronic devices. That embarrassing mirror–selfie you posted to Myspace during your punk stage? Yea, there's a good chance it's still sitting on a HDD somewhere, even if your account is long–gone. And even if that's not the case, have no fear; there's a good chance the NSA has already had a few giggles over it.
The idea of our online interactions being around for as long as there is technology is a scary thought. Especially when we're young and dumb. And while we're never going to eliminate every threat against our information or content being made public, there are plenty of people creating unique ways to make sharing and conversing much more akin to how it is done IRL.
The most obvious app which follows this premise is none other than Snapchat. The concept is simple: snap a photo, add some text if you'd like, set a time-limit for your viewer(s), and send it. Once they open your image, it is shared for the allotted time, before it goes Mission Impossible and self-destructs, sans explosions. Of course, there's the option of taking a screenshot of the image, but your sneaky friends aren't going to get away without you being notified.
Another app which goes along these lines is Skim. The premise is the same, but directed more towards conversation than photos. Set up how long you'd like your text to be able to read for and as the allotted time goes by, your text slowly fades away into non-existence. We don't record every conversation we have in person, or even every phone call we have, so why should all of our text messages have to be saved?
Of course, there's loopholes for all of the current options and there will likely always be loopholes for getting the content, but the sooner the idea of content impermanence is implemented across the board, the better off we are towards playing the cat–and–mouse game of beefing up security. I'm not quite sure where else this could be implemented as far as apps go, but the philosophy and overall idea behind it is one which I anticipate a few more developers to utilize as the year goes on.
10. Better Use of Sensors
With the inclusion of more and more sensors in devices, more data is being provided at faster pace than many developers know what to do with. The iPhone 5S's A7 chip takes mobile computing leaps and bounds into the future and with more companies hopping on the mobile 64-bit architecture, the increase in processing power will only become more ubiquitous.
The app which most notably makes use of this is Moves. Constantly recording your daily activity in the background, moves provides you with a storyline of your day, providing introspective analytics to keep track of. With this information provided, you can begin to better analyze how you go about your day and how to better make small changes to positively impact your health and productivity.
The next step in this is the introduction of smart–watches, which will inevitably be packed with plenty of sensors, feeding the resulting readings to your mobile device, using it almost as a brain of sorts to process the information. Nike and Jawbone have had their versions of this around for quite some time as well, but with the introduction of hardware such as the A7 chip in the iPhone, there might not be a need for as many peripherals.
Only time will tell. And since it's only the beginning, 2014 offers plenty of time for the story to be written.
11. Single-Use Pages
I'm not quite sure when this became a trend, but it's one which seems to have gained an enormous amount of traction and quite honestly, one I'm a big fan of. The idea is that amongst websites which publish a great deal of content, a unique way to set a specific article, essay, or piece apart from the rest, is to give it it's own, separate experience from your other content.
Two prime examples which come to mind are Snowfall, the extremely fun and interactive experience from NY Times, as well as SB Nation in general, as they tend to have a continuouslygrowing collection of single-use pages as a means to present a special, long-form essay.
Throughout the course of the year, I see many more publishers of content going about this method to create "featured" stories and collections. It's a fun way to experiment a bit and get users outside of the normal experience, while keeping them inside the ecosystem of content.
12. Browser's Integration with OSes
With the introduction of OSX Mavericks, an old concept, but new implementation, came to fruition. That is the inclusion of push notifications from websites via Safari. Content creators can now offer up the option for users to receive push notifications when specific content is published.
The only two websites I've seen use it up until now are 9to5 Mac and more recently, the NY Times. Upon their inclusion of the essential elements on the website's side, the next time you're visiting the site, you'll be prompted via a small Safari dialogue as to whether or not you'd like to receive notifications from them. If you'd like to do so, a simple click of agreement is all it takes, with the opposite holding true if you wish to not receive notifications.
It's nothing too special, as it's essentially an OS–level integration of an RSS feed, but it allows for a much more integrated experience, without the need for an extra application. I'm quite excited to see more and more websites make use of this and I have no doubt many will throughout the year.
13. Physical Products Coinciding With Apps
With each consecutive year, it seems as though more and more companies are working on physical products to go hand-in-hand with their apps. While I don't necessarily see a major increase in this, I do believe it is a trend which will continue to grow throughout 2014.
While there is no shortage of options to mention, the one product which has garnished an incredible amount of attention as of late is the Pencil by FiftyThree, which is meant to be used specifically with their Paper app. Pencil is a piece of art on it's own, but when paired with the Paper app, it makes for an entire experience that no other developer or company can compare to.
Proprietary hardware has always been a point of criticism, but there's no doubt that when done with the best intentions and the most thorough thought, the results are nothing short of incredible. After all, what better source of hardware than from the company who has also laid the foundation with their software, as the integration can be much more intimate than with solutions, resulting in a more flawless experience.
Products like the Pencil by FiftyThree don't come around once a month, but there will without a doubt more companies making efforts to create hardware which is integrated better than ever into applications.
14. The Full Experience
To end on a note similar to last year, as controversial as many claimed it to be, this trend isn't so much a trend as it is an overarching philosophy that—more so now than ever—is affecting how designers and developers approach interface design.
Whether the use of visual styles, such as parallax and blur; better integration through sensors and notifications; the implementation of single–use pages; even the inclusion of physical products into the ecosystem of application developers; the idea is to create an immersive experience for the user, from beginning to emd. Just as Apple has been known for it's desire to make hardware disappear with use, this year the goal many start-ups, freelancers, and companies are going to be striving for – as none other than Dieter Rams desired – is for designto disappear.
It's about the experience. Decades from now, it's the experiences we're going to remember and the content we take in and create through said experiences. Thus, to create a sustainable culture for your interface, be it an app or website, the focus needs to be on what the user needs – and arguably more importantly doesn't need – to make an experience over a product. And with that said, I wholeheartedly believe this will be the ultimate trend throughout 2014.
Conclusion
There we go, the 14 trends to keep an eye out for throughout the year. Some pertaining to web design, some to app design, and some to ideas over visual elements, but all coming together to create a nice little summary of what to expect.
I fully expect much debate and discussion to take part as a result of this, so be it in the comments below, a tweet my way, an email in my inbox, or a followup to this list on your own blog, I'm anxiously awaiting to get the conversations rolling. If you go with the latter of the above options, I'd love to have you shoot the link my way so I can take a look at it!
Thanks for reading everyone, and as always, keep designing and pushing the industry forward, learning and challenging yourself along the way.