Extra Depth of Interaction: 3D Touch Icons for iOS
--
Each year brings its new trends and techniques. Whereas the website design sphere is obsessed with Material Design and Cards, the mobile app community talks about 3D Touch, the pioneering technology that is available only for lucky owners of iPhone 6s and 6s Plus.
Its aim is to add a new level of depth to interactions. It allows you to achieve two different results when you press the Call To Action. You can either launch an application or avoid this resource-consuming process and take the advantage of shortcuts that help you to fulfill tasks in a short order.
The so-called ‘quick actions’ take you to specific parts avoiding all the unnecessary movements. Some operations can be even speeded up to only one touch. Though there are some cases when it does not make any difference, for example Twitter’s ‘New Tweet’ action. Whether you use a regular way to reach it or the brand new one this takes up two taps. So that not everyone are managed to derive benefits from it.
Today we focus on examples that make good use of 3D Touch technology.
1. Apple App Icon 3D Touch
By Roman Wagner
This is a great example that demonstrates the technique pretty effectively. Roman Wagner supplies the standard icon with extra possibilities, giving users quick access to such vital options as ‘new post’, ‘my likes’ and ‘search’. These functions are placed in a small pop-up window that appears when you push the button harder than usually. The backdrop becomes slightly blurred, offering the panel a stark contrast.
The developer makes a careful choice of shortcuts that seem to be pretty popular, and pleasant aesthetics.
2. 3D Touch Animated Mockup
By Boris Borisov
Much like the previous example, this animated mockup perfectly grasps the concept and formulates its doctrine in a visual manner. It allows you to either enter the application and dive in its environment or complete the task by using 3D Touch features. The latter smoothly emerges from the icon and is shaped like a classic vertical neatly ordered list. Each option is described with the help of a title and supporting icon. As befits, the backdrop withdraws into the shadows thereby transforming the component into an obvious focal point.
The template looks nice, sleek and polished. It‘s simple yet universal. It’s created in line with rules and gives you just the right result.
3. IMG Upload — 3D Touch and Multi-Selection
By Leo Leung
Leo Leung goes a bit further with the high-end technology. Not only does the artist understand its purpose and principles but he also is managed to get the most out of it. When 3D Touch is activated, you are welcome to make a multi-selection. You can scroll through a gallery and mark all the required images by drawing a line with tiny circular bullets. When you’ve finally done, all the pictures are assembled into one vertical pile. An accompanying animation ties everything together and makes the project feel complete and enjoyable.
This interesting take on 3D touch is unique and original. It is sophisticated and at the same time intuitive and handy.
Do you like what you see? That’s what UpLabs does best: find the best resources to help you create awesome apps and sites, daily. Check out today’s showcases on UpLabs!
4. 3D Touch Music App
By Alejandro Vizio
Alejandro Vizio demonstrates how a typical music application can benefit from the top-notch attribute inherent to the latest Apple devices. It enables users to sort and reorganize album covers in an elegant and intuitive way. After that you can open the screen with extra information that is linked to each item. The process is reinforced with some fancy transitions.
The interpretation of 3D Touch possibilities is clear and understandable. It’s not intended to impress, yet it certainly strengthens a comfortable user experience.
5. LinkedIn Networks
By Anthony Daniel II
The aim of the artist was to improve interactions and make them more accessible and handier to users. As a result, the project has got a helping hand from the ‘forced-click’ approach that provides an extra dimension of functionality. Each category has one quick action that displays a list of members as a collection of avatars arranged in a line. The result should be generated by metadata. You can surf through the collection or pick up the desired option. The design is sleek and eye-pleasing.
This is one of those cases when 3D Touch is one of the few tools that can help to bring the idea to life.
6. Megap — iOS 9 App Template
By Michal Kozina
Michal Kozina has crafted a set of PSD interfaces that satisfy iOS9 requirements and magnetize with some cutting-edge features such as 3D Touch. The design is pixel-perfect and simply beautiful. The project feels approachable and looks stylish thanks to Material design traits. Several buttons are improved with deep interactions, offering users quick ways to complete the mission. These tiny enhancements can greatly contribute to user experience.
It’s really impressive that even on early stages such as that (the product is a simple starter kit) every vital detail and function were taken into account.
7. 3D Touch
By Ilya Prukko
Ilya Prukko has produced a fantastic prototype that lifts the veil from the 3D Touch. This short merely schematic walkthrough is overpopulated with modern details. Each tab is enhanced with a ‘forced-click’ action. You can peek under it and choose among such options as fav, emailing or uploading. The functions are illustrated as delicate line-styled icons that are carefully arranged along the box. What’s more, even floating action button that sits in the lower right corner reveals an extra menu under a firm pressure of your finger.
The idea is ingenious, and realization is clever. It has some interesting takes that may come in handy for numerous projects.
8. Advanced Control Center (iOS 10)
By Sam Beckett
We want to complete our collection with an incredible concept of Sam Beckett. Presented as a video it sheds the light on a sophisticated Control Center in iOS, showing it in all its glory and partially unlocking its huge potential. It includes integration of 3D touch, shortcuts, some extra improvements and dark mode. Everything looks gorgeous and pixel-perfect. Watch the video and tell us what you think?
In conclusion
Although the technology was firstly introduced in 2014, it’s relatively raw and crude. Despite being a promising feature that should enrich user experience, it’s still difficult to find real examples — only Goliaths of industry such as Twitter, Ted or Google have afforded such an extravagance. We hope that these amazing prototypes will be brought to life shortly and please users with faster and more efficient work with programs.
If you created or stumbled upon a stunning example 3D touch you’d like to see here, share it on UpLabs!
