Interface Design driven by embracing gestures

Challenge Bars and Buttons

Apple's User Interface Design Guide Human Interface Guidelines) and the App Review Board Apple's App Review Board have a huge impact on the quality of mobile apps. They help a lot of designers and developers understand the core mobile user interface elements and interaction modes. For example, how to use the UITabBar and UINavigationBar controls to count Apple's most basic and most famous design guide has followed similar design guidelines in actual design.

In fact, if the first iPhone app you designed didn't use any bar element at the top or bottom, contact me, I can invite you to drink and happily announce that you are much ahead of your age.

My biggest comment on the bar at the top and bottom is that they accounted for about 20% of the screen area for iPhone 5's mobile phones ). To design on such a small "canvas", we should use every possible pixel to focus on content expression, because, after all, content is really important.

In this innovative industry, mobile designers need more time to explore how to design more creative and original interfaces. Even if Apple is frustrated with the App, the successful installation and praise of experiment-filled UI and UX application designs like Clear and Rise bring some light to originality. Maybe their interfaces seem extreme and focus on advanced users or explorers. They show everyone the unlimited innovation potential of gesture-driven interface design. There are two interfaces based on the drop-down operation.

Huge energy of gesture-driven interfaces

Over the past two years, I have been exploring what gesture operations bring value to the user experience of mobile apps. The most important criterion for me is that interaction must be intuitively felt. This is exactly why "pull-down refresh" like Loren Brichter can become the industry standard in the first place. The pull-down refresh Design of Brichter in iPhone Tweetie creates a gesture operation for applications that are presented based on the list content and discards the original refresh button, it can easily meet the needs of refresh.

Remove interference from the UI

A good way to start designing a gesture-driven interface is to use your main screen only as the presentation area of the core content. Do not feel obligated to present important navigation elements on the home screen. On the contrary, consider navigation your own location and space. Here we can consider a new virtual 2D or 3D Dimension, which can place the navigation below, behind, behind, front, top, or hidden in the header. In this case, the drag or touch gesture operation is a very good way to evoke these UI elements. Of course, you can freely define and design these interactions in the App.

It is the iOS application interface of Facebook and Gmail. It implements the "slide" menu translator in their respective ways: This form was first popular by the Path iOS version, currently, you can see it in a large number of apps with complicated navigation ). This UI concept is easy to understand and apply. You can slide left and right throughout the view to reveal and hide the navigation elements on the left. This not only makes the App look more content-centric, but also allows users to freely access the functions of the application in two to three steps of touch operations. Many apps with complex navigation levels are far from convenient and fast!

In addition to user interface navigation, your App may also need to support interactive operations in some context. For example, adding two or three identical operation buttons to all the content will often cause interface interference: in many feeds lists, we often see the comment, forward, and like buttons Under each feed ). Of course, buttons are very useful and easy to use, but it is very promising to make gestures more intuitive and interesting in content interaction. Therefore, do not hesitate to use simple gestures such as touch, double-click, and click on important interactions. Instagram uses a simple double-click to perform an important operation on the content-mark the content as "liked" or "dislike ". In the future, I will not be surprised to see other apps integrate this shortcut into their own apps.

Suitable interaction interface

It is difficult to predict user behavior when designing a creative mobile product. When we were designing for Belgium's Public Radio project, my team was arguing about the visual balance between music visualization and real-time news. Because each user uses different App context scenarios, it is difficult to choose a more extensive and perfect UI. Finally, we decided to integrate a simple drag gesture to let ourselves decide how to display the balance between the two, as shown in, you can decide which content you want to focus on in the current situation, music or news. Instead of passively accepting a design designed by the designer to compromise the majority of scenarios.

Time, dimension, and animation considerations

What feedback will be triggered when a user clicks an element? How can we express this feedback in a visual way? How fast is a specific UI element presented to the view? Will it automatically disappear to the screen in five seconds?

This touch screen-based gesture-driven device trend dramatically changes the way we design interactions. We used to think more about how to present data on a computer screen or webpage. Now we need to consider more time, dimensions, and animations. You may find that it is not easy to show and adjust the interaction design to colleagues and users using static lineframes and screens, it is often difficult to fully view, understand, and feel what will happen after clicking, holding, dragging, or stroking.

Prototype tools like Pop and Invision may help build a live wiremap prototype. They are useful for the process used to test the application and to precisely locate where the user may be stuck. In addition to simple advances and retreats, your applications often have a lot of navigation elements, so you need to check and locate interface errors as quickly as possible or potentially confusing users. Of course, we don't want these errors to be pointed out by developers, right!

If you want to become more creative and experimental, You can first communicate with your customers and explain to them that the traditional line diagram is not the best user experience design deliverables. And show them the value of the Interactive Prototype and encourage them to use it during the R & D process. It may increase the project time and budget, but I believe that the increase is acceptable if the customers want more. I often provide conceptual videos of application interfaces for my customers at the same time, because although they know the details of various interactions, they often need to think of their internal stakeholders to present some more attractive results.

Learning Curve

When designing a gesture-based interaction, you must note that every time you remove some interface interference, the learning curve will rise. Without visual prompts, users are confused and do not know how to interact with the application. A simple comment is acceptable, so that users can know where to start. Many apps will present a strategy or tutorial when they open it for the first time, but I agree with Max Rudberg's point of view-the tutorial only needs to explain the most important interaction-not to explain everything at once, because if it is complex and lengthy, the user will skip it.

However, why don't you challenge yourself and gradually introduce creative UI guidance during application usage! This mode is often called progressive discovery. It only displays information about the current activity to the user. As shown in, for example, the YouTube Capture application only tells the user to rotate the device to obtain a horizontal angle when the user opens the camera for the first time.

Adding visual guidance to the user interface is not the only option. In the Sparrow application, the search results will appear first from the top, and then scale back in a few seconds. It is like a subtle way to say "I'm waiting to be pulled down ".

Let's get started.

The iPhone once brought us a revolution in interactive communication. Just five years later, touch screen devices were everywhere, and Interaction designers were redefining how people and digital content were used.

We need to understand and explore the potential of touch-and gesture-based user interfaces and start to consider more time, dimensions, and animations. Through some innovative applications, we can see that gestures are a good way to make apps more content-centric, original, and interesting, even though many gesture-Based Interactions may be too experimental rather than intuitive at first glance.

If you want to have a complete understanding of the gesture application opportunities for more mainstream mobile platforms, you can refer to the overview of the Like Wroblewski touch gesture reference, I hope that after reading this article, I will inspire you to explore the gesture-based human-computer interaction mode and start your exploration of mobile interface design. Don't be afraid of detours. With the help of an interactive prototype, you can try again to get the best experience. So, let's get started right away!