Embrace gesture-driven interface design

As a visual or UX designer for mobile products, you might think Apple's iPhone was released just like yesterday. The iPhone certainly opens the door to a new world of touch-centric interaction for the most personal and intimate device and is well-deserved creator of the rules of the game.

Nowadays, it seems natural for children to grow up in such an environment surrounded by a touch screen. Parents wonder how their children are seeing incredible speed and understanding how tablets and smartphones work. This phenomenon shows that there is great potential for the way touch and gesture interaction brings convenience and fun to the mobile experience.

Challenge Bars and Buttons

Apple's Human Interface Guidelines and the Apple's App Review Board have a huge impact on mobile application quality. They help a lot of designers and developers understand the core mobile UI elements and modes of interaction. For example, how to use UITabBar and UINavigationBar controls is based on Apple's most well-known design guidelines, and we've all followed similar design guidelines in practice.

In fact, if your first iPhone app did not use any top or bottom bar elements, please take a screenshot and get in touch with me and I can invite you to drink and be happy to announce that you are ahead of the time you were there .

My biggest opinion about top and bottom bar is that they account for almost 20% of the screen area (for iphone5 phones). Designing on such a small "canvas," we should exhaust every possible pixel to focus on the expression of content, since, ultimately, content is really a big part.

In this dynamic industry, mobile designers need more time to explore how to design more innovative and original interfaces. Even Apple's frustrating exclusion toward "crafting" App brings some light to the original with the successful launch and acclaim of well-tested UI and UX applications like Clear and Rise. Perhaps their interface looks very extreme, and focused on the concept of advanced users or explorers, they still show you unlimited potential for gesture-driven interface design. The figure below is based on the pull-down operation of the interface design.

Gesture-driven interface with huge energy

For more than two years, I've been exploring what gestures bring value to the user experience of mobile apps. The most important criterion for me is that the interaction must be intuitively felt. That's why Loren Brichter's Pull Down Refresh (ISUX Article: Fun Pulldown Refresh) is the industry standard for the first time. Brichter's drop-down refresh design in the iPhone's Tweetie created a gestural action for the application based on the list content and abandoned the original refresh button to solve the refresh requirement intuitively and easily.

Remove UI interference

A good way to start designing a gesture-driven interface is to use your main screen only as a rendering area of ​​the core content. Do not feel obliged to keep important navigation elements on the home screen. Instead, consider navigating your own location and space. Here we can consider a new dimension of virtual 2D or 3D that places the navigation below the body, behind, front, top, or hidden in the head. At this point, the gesture of dragging or stroking is a great way to evoke these UI elements. Of course, in the App you are free to define and design these interactions.

Below is the Facebook and Gmail iOS application interface, the respective way to achieve the "sliding" menu (Translator: This form was first caused by the Path iOS version of the popular, currently can navigate in a large number of complex application App to see ). This UI concept is very easy to understand and apply as the user slides left and right across the view to reveal and hide the navigation elements on the left. This not only makes the App appear more content-centric, but also gives the user the freedom to enter any application's functionality in two or three touch operations. Many apps with complex navigation levels are far less convenient and faster!

In addition to user interface navigation, your app may also need to support some contextual interactions. For example, adding two or three identical buttons to all of your content will often cause interface disruptions. (Translator: In many feeds we often see comments, forwarding, likes Button). Of course the buttons are very useful and easy to use, but the gestures are more intuitive and interesting to interact with. So do not hesitate to use simple gestures such as tap, double tap, tap on important interactions. Instagram uses a simple double click to perform an important operation on the content - marking "like" and "dislike" of a piece of content. In the future, I would not be surprised if I saw other apps integrating this shortcut into their own apps.

Suitable interface

When designing an innovative mobile product, predicting user behavior is more difficult. When we were designing for the Public Radio project in Belgium, my team was struggling with the visual balance between music visualization and real-time news. Because each user uses a different contextual context of the App, it's hard to decide on a broader and more applicable UI. So in the end we decided to integrate a simple drag gesture to decide how to show the balance between the two, as shown below, the user can decide for himself which content to focus on in the current context, whether the music is either news. Rather than passively accept a design made by the designer for compromise in most situations.

Consider the factors of time, dimension and animation

What happens when a user clicks on an element? How to express this feedback in a visual way? How fast is a particular UI element rendered to the view? Is it 5 seconds after disappearing automatically on the screen?

This trend of touchscreen-based gesture-driven devices has dramatically changed the way we design interactions. It turns out that we think more about how to render on a computer screen or on a web page, and now we need to think more about time, dimensions, and animation. You may find it difficult to show and adjust interaction designs to colleagues and users with static wireframes and screen shots because it is often difficult to see, understand, and feel clicks, hold, drag, or stroke What happens after

Prototype tools like Pop and Invision might help build a live wireframe prototype. They are very useful for the user to be able to be the cardholder for the process used to test the application and pinpoint where. In addition to simple forward and backward, your application often has a lot of navigation elements, so you need to check and locate the interface as soon as possible or potentially confusing users. Of course we do not want these errors to be pointed out by developers, right!

If you want to be more creative and experimental, first communicate with your customers and explain to them that traditional wireframes are not the best user experience design deliverables. And show them the value of interactive prototypes, encouraging them to use it in the development process. It may increase project time and budget, but I believe these increases are acceptable if clients want more. I often provide concept videos of my app interface to my clients because they are aware of the details of the various interactions, but often they also need to think of their inner stakeholders for something more sexy.

When designing gesture-based interactions, keep in mind that learning curves increase each time you remove some interface interference. When there is no visual cue, the user can also be confused and do not know how to interact with the application. A simple comment is acceptable so that the user should know where to start. Many apps will show you a strategy or tutorial the first time you open it, but I agree with Max Rudberg's point of view - the tutorial only needs to explain the most important interactions - do not explain everything at once, because if both are complicated and lengthy, the user Will skip it.

However, why not challenge yourself, and gradually introduce a creative UI guide in the use of the application! This type of guide is often referred to as a progressive discovery, which shows only information about the user to the current activity. As shown in the following figure, for example, the YouTube Capture app only tells the user to rotate the device to get a horizontal angle when the user first turns on the camera.

Adding visual guidance to the user interface is not the only option. In the Sparrow app, the search bar first appears from above, and retracts after a few seconds, like a subtle form saying "I'm waiting to be pulled down."

The iPhone revolutionized our interactive communications, and in just five years touch screen devices were ubiquitous, and interactive designers are redefining how people and digital content are used.

We need to understand and explore the potential of touch-based and gesture-based user interfaces and start thinking more about time, dimensions, and animation. With some innovative applications we can see that gestures are a great way to make App more content-centric, original and fun, even though many gesture-based interactions may at first glance be too experimental rather than very intuitive.

If you want a more complete understanding of the application of gestures for more mainstream mobile platforms, you can refer to the reference sketch of Like Wroblewski's touch gestures, hoping to inspire you to explore the gesture-based human-computer interaction mode after reading this article , And start your mobile interface design adventure. Do not be afraid of detours, with the help of an interactive prototype, you can try again and again to get the best experience. So, let's talk about this and start acting now!

Original Author: Thomas Joos

Original link: http://uxdesign.smashingmagazine.com/2013/05/24/gesture-driven-interface/

Thank you for reading, this article by ISUX ISUX Copyright, reprint, please indicate the source, offenders must, thank you for your cooperation.
Indicate the source format: Tencent ISUX (http://isux.tencent.com/embracing-gesture-driven-interface.html)