iOS UI Trends in 2014
In the last several years, we’ve seen a rapid shift in software and app interface design, from 3-D and skeuomorphic, to flat and minimal. Creating an effective minimal design is surprisingly challenging. As you strip away common UI tricks (drop shadows, bevels, textures, and the like), you quickly realize how important the few remaining elements become.
In this new flat, minimalistic trend, the idea is to create a finished design which lives in only two dimensions, without losing the functionality that a “regular” interface provides. Once an interface is stripped of its decorations and effects, it becomes harder to define the main actions and elements. This creates a new challenge for the designer.
As designers are challenged to get creative with the current minimalistic restraints, I’ve watched some of my favorite applications evolve to embrace the new flat approach. One of my favorites: Foodspotting. They completely removed the tab bar to create focus on the beautiful, crowd-sourced food photography. A simplified, less cluttered interface features larger icons, more easily accessible than before.
Here are a few more of my favorite trends, currently:
You can easily see how the icons maintain their style and form even though they’re stripped of details, shadows and textures. Flat icon design leverages simplicity to conjure powerful visual impact, focusing on color and shape. Everyone watched Apple change the app icons from iOS 6 to iOS 7; through still recognizable from the first icons, they’ve evolved to be more elegant.
Side Menus & Navigation
One of the most common implementations of menu views has been the “side drawer,” “basement,” or “side menu,” and was made popular in apps such as Facebook and Path. When a user taps the “Hamburger” icon to open a side menu, the main screen slides to the right to reveal the menu.
This works well in iOS 6 and earlier operating systems because the status bar exists in an area isolated from the rest of the application. However, in iOS 7, the status bar is overlaid on the screen below it. In other words, the app and the status bar are no longer two separate worlds, as was seen in iOS 6. This change utilizes more of the screen space, but presents an interesting problem when implementing a side menu.
Here are some great examples of how clever designers used the space to overcome the problem and create a beautiful animation that not only gives the user the “wow-factor,” but gives the design some depth:
- Airbnb‘s app does a great job using a clean, zooming transition with translucency.
- The app called Vu is a great example of thinking outside the box with the navigation. Instead of using the side-menu, they designed layers to stack the content, so that the user can move things around to customize their experience.
The interface should be as intuitive as possible. That’s why I love bold designs with large functionality, like Jukely employs. Their app does a great job of this with the list of cities, and the user knows right away that they are supposed to set their location in order to find tickets for concerts in their area. Fab also uses large buttons, large type, and bright colors so the functionality stands out.
Simplicity is the new paradigm. Alarmik is a beautiful example of this. Within its design is large typography and extra-large buttons, which allow the user to focus on one function, only: setting their alarm clock. The process of simplification will be the only tool we have to make content accessible and readable on the greatest possible number of devices, with the best user experience. As so often happens when new devices and technologies enter the market, we become fascinated by what they can do and how we can advance interactivity. This interface frenzy is usually followed by a return to a focus on content, because we just want the interface to get out of the way.
One of the most beautiful applications that I have ever seen is Sphere. Sphere is for users to essentially “travel remotely” and view places around the world, with a 360 view. With the large button on the home page, users can record their own vacation experience. The style is very “metro” and reminiscent of Microsoft’s new Windows interface design.
Typography is a very important element in flat design. Since the interface is more minimalistic, you can use typography to help you create the style and mood you’re looking for. You can set a mood just by using a custom and specific font with a flat design outline. Since the background is simple, the font will pop out and set the style for itself. A great example of a well-designed app using a clean sans-serif is Kayak. The typography is very professional, legible and neat, making it easy for the user to book a flight or hotel right from their smartphone without confusion.
Gestures & Hidden Functionality
Designers & developers have teamed up to get creative with some of these user interfaces, sometimes hiding functionality to be discovered by the user.
When Pinterest updated their app, I was amazed at the new hidden “tap & hold” gesture they created to easily re-pin, send, or like a pin. Not only is it an intuitive action, but it made the app easier to use, by eliminating steps for the user.
Clear is an app completely based on gestures, used to create lists and organize your to-dos. There are no buttons or forms – just swiping, pulling, and pinching. Since nothing else like this existed at the time it was created, the developers designed a walkthrough for their users.
Another great gesture-based app (which also has large buttons for functionality, if the user doesn’t understand the “swiping gesture”) is Tinder, used for finding single people in your area. If both users happen to swipe right to “like” the person they’re viewing, the app allows them to communicate. If a user happens to swipe left on the person they’re viewing, it hides that person forever, since they probably didn’t find them attractive.
Mailbox is another great example of hidden gestures, as you can swipe left or right on an email to delete, archive, save for later, or add to a list. The designer did something amazing here, as there are two different functions for each swipe….it just depends on how far you move your finger! Depending upon your movement, you can watch the color and icon change to reflect the intended action.
When you design, always keep in mind that a trend is only a trend. A great design is only great if it’s right for your target user. The priority is to create a functional and usable app or website, not a good-looking and trendy application. As Wells Riley said in his post Less Aesthetic, More Design, “Design is a form of problem solving. Never forget that.”Copy Permalink