Draw a C-based Android-based navigation fragmentation solution on the screen

This is an exciting essay by Greg Nudelman, an Android expert who put forward the idea of ​​"C-Gesture" navigation instead of existing Android navigation in the text, and did not mean offering two designs A detailed explanation of the key code. "C gesture" is the author's solution to solve the Android navigation fragmentation program. Emphasize that "invoking contextual navigation from any area of ​​the screen at any time, when needed, is a functional model for any touchscreen device." That is, a type of "Hidden Swiss Army knife-style." The author believes that "C gesture" is the most natural and most ergonomic gesture, which can well make up for the inconvenience of navigating large-screen touch-screen devices. As the author put it, the solution mentioned in the article is not perfect, he just provides a way to solve the problem, and this idea is the essence of this article.

Original link: http://mobile.smashingmagazine.com/2013/03/25/c-swipe-navigation-on-android/#top

As many as 3,997 devices currently on the market using Android (http://opensignal.com/reports/fragmentation.php). Your product may run on multiple devices, so you have to think about cross-platform navigation issues. Fortunately, "C-Swipe" can help you: it's an innovative alternative to the current navigation methods for tablets and mobile devices (not used in Android device sinks) This gesture), ergonomics (maximum reduction of finger strain) and regional (at any time on the screen can be called at any time) features. This article describes in detail the design of this navigation method and code, and provides a downloadable applet, you can pro test, try "C gestures" is suitable for your product.

Increasing size and complexity Increasing number of touch-screen devices, new devices, new features with each passing day. If you usually concerned about the development of the Windows OS, we can easily find such a trend: more and more touch-screen devices. At present, 12-inch, 15-inch and 21-inch touch screens have appeared in the Android device army; the application in the touch screen device is more and more complicated and the function is getting more and more complete. Even the standard version of Microsoft Office applications are optimized for touch operations. If the latest Chromebook (with a 12.85-inch, 2560x1700-pixel touch screen) shows some signs, it must be that Google is equally happy to integrate touch operations into larger hardware.
This is just a matter of time, only waiting for the Andriod system to catch up. However, it is impractical and ergonomic to adapt all devices and applications by scaling the current Action Bar of Android 4.x (4.0, 4.1, 4.2 ...) systems.
I suggest using "C Gesture" as an alternative to the navigation of the operation bar, which is based on the natural human ergonomics of hand. With C gestures you can invoke a contextual menu anywhere on the screen, and all you have to do is draw a semi-circular arc on your screen with your thumb. This gesture looks like the letter "C" when you operate it with your right hand - so I name it "C-Swipe." When you operate with your left hand, you can call it "anti-C Gesture ", Reverse C).
Content Is King
Imagine applying features and navigation to your mobile device or tablet by filling in the entire screen with a thumbnail that naturally draws a semicircle anywhere on the screen. The user can do this in any position, at any angle, such as holding the device with both hands, placing the device square on the table, while reading in bed, and so on.
Sliding the thumb on the screen triggers a semicircular context menu. When the menu appears, the most commonly used features are at the top, which is where the thumb can reach in its natural state. Icon and text on the thumb will not block the place. Users can click on their target options, click or tap the rest of the screen, the semicircle menu will disappear.
See easy, click hard
Flipboard is a great app that has won a lot of loyal fans with its premium UI design and content navigation. However, there are some options for the Flipboard details page - Back, Favorite, and Like - are placed in the top action bar.
(figure 1)
The top action bar in Andriod 4 is a must for navigation and feature options, and the Andriod 4 design guidelines also suggest navigation and feature options here. The top bar position helps find the application's features: At the top bar, the buttons are easily visible and never hidden by the user's hand.
However, placing the button on top of the screen is actually a double-edged sword: for some devices, the top bar is hard to reach with your finger. It takes a lot of effort even on small devices. If the device is a bit older (like the popular Galaxy Note), you have to use the other hand in order to click the button in the top bar. As a result, multitasking or casual use can get tough.
Moreover, the operation bar occupies a very important position at the top of the screen. When users learn to use this application, the visible function options can provide them with effective help. Unfortunately, once a user learns how to use it, the top bar becomes "visual noise," wasting the most compelling and valuable location on the screen.
Navigating everywhere If there is a way to make the entire screen display 100% of the content while allowing users to effortlessly invoke the feature menu (no matter where the finger is on the screen) and it's easy to click on any option, This method is not good? Yes, this is what "C gestures" have to do.
(figure 2)
Draw a semicircle anywhere on your screen with your thumb to call a hidden menu with the same options as in the top bar. After the menu appears, clicking the desired option with the same finger is also an easy task.
Two Menu Designations The "C-Gesture" that I introduced has two different but equally important options: "swipe and release" and "swipe only". The two programs call the menu is not the same in the form, you need to choose a suitable. The Slider-Loosen scenario places the icon inside the menu options, as shown in Figure 2 above.
The user who uses this scheme can draw a semicircle on the surface of the screen first, then move the finger away from the screen. Remove your finger here is necessary, because the icon in the menu options, do not remove your fingers most of the options will be covered, it will cause inconvenience to use.
The second option only needs to be swipe, without removing your finger. As shown in Figure 3 below. The system recognizes gestures in the same way as above. However, the menu now appears on the screen as the finger slides (it does not pop up). Since the thumb blocks some of the options, the icon needs to be displayed outside of the options to ensure its visibility.
(image 3)
Which type of interaction should you choose?
The "slide only" solution allows the thumb and device to be in contact at any time, triggering the menu instantly. This ensures navigation efficiency: in theory there is no "no wasted motion". However, many of the users under test prefer icon design in the menu. Try the applet in the applet, choose your own choice. The applet applet is a fit between the two: it uses a "swipe-release" gesture, but puts the icon outside the menu options. So you can feel both options at the same time.
Tip: Keep in mind that the swipe gesture we've provided for the applet's call menu is as simple as painting a small semicircle on the screen, perhaps much smaller than you might think. I hope this simplest demo can run on any device, regardless of whether the screen is large or small, this program can be applied. (We hope that 3997 kinds of screens can be perfectly applied). The reason for drawing small semicircles is out of the consideration of human anatomy: the big palm of a person painting a small semicircle is far easier to draw than the small palm of a person.
Replacement of the operation bar Basically can use "C gesture" to replace all the current Android navigation menu. In other words, the navigation bar can be replaced by "C gesture." As I mentioned in a forthcoming book (Android Design Patterns: Interaction Solutions for Developers), this nice "C gesture" is the lights-out mode , Do not show navigation controls, ie hidden Swiss Army Knife style navigation) is the forerunner of the upcoming trend.
Another important point is that "C-Gesture" can be expanded almost indefinitely: it accommodates many more options than what can be displayed on the screen, possibly more than the sum of Level 1, Level 2, and Level 3 menus. The inner part of the semicircular menu can be used as a toggle button. Click to see more options. As shown in Figure 4, click the center button to display more options in the outer circle of the semicircle menu. Click again to return to the initial menu interface. In this way, users can easily access 8-12 highest priority features.

(Figure 5)
The top row of the figure shows how to slide-release the sub-menu. Click the "Favorite" option, a bunch of star buttons appear on the outer circle of the menu. The user can move the thumb to see the options on the submenu, then click on the desired button.
The second row shows how to "slide-hold" the sub-menu, which works somewhat similar to the previous one. Thumbs draw "C" on the screen, keep your finger touching the screen, swipe your finger over the target option (such as "Favorite") after the menu appears, and release your finger to replace the original main menu with the submenu.
The point is that there are many versions of "C gestures", and the submenu is neither semi-circular nor semicircular. It can be a series of texts or icons, or it can be a specific bookmark. Just make sure the submenu appears near the "C Gesture" menu.
Why use "C gesture"?
"C gesture" has many advantages:
1, to provide immersive experience (Immersive Experiences)
This model is highly immersive and all the function buttons are hidden until you need it. It takes 100% of the Android device's screen (including all 3997), providing an immersive experience for shopping, reading, watching videos, virtual reality, and more.
2, to minimize arm strain (Arm Strain)
The "C-Gesture" is especially suited for large-size touch-screen devices, such as the upcoming 15-, 17-, 21-inch tablets. In the current Andriod 4 system navigation mode, clicking on the top or bottom operating bar requires more substantial arm movements and will quickly cause arm fatigue. In contrast, "C-Gesture" allows the menu to appear near the area where the finger touches, and does not require significant arm movement.
3, in line with Fitts Law (Fitts'Law)
Fitz's Law states that the speed and ease of clicking a button are related to the size of the target and the distance to the target. In other words, clicking a small button on a big screen tablet must have been a very painful thing. In contrast, "C Gestures" is unique: it navigates anywhere on the screen, and the menu appears always near where your finger is placed. As a result, the time to locate the options is reduced and the click action is more accurate and natural.
4, the only trigger action Now it seems "C gesture" has not been used in other functions (the author of the article, 2013.3.25). Therefore, using "C Gestures" does not result in conflicts of use, and it is equally easy to click anywhere except the menu (to cancel the action of the menu).
To emphasize, when the operation with the left hand, trigger action as "anti-C hand gesture." The following source code and applets support left-right hand operation.
Other suggestions "C gestures" may not be triggered at the edge of the screen. When the user stands using a large screen device, he may need to tilt the screen to find a comfortable posture. At this point, the user can draw a semicircle with "C-Gesture" navigation anywhere on the screen with his / her finger. Usually, the user can use any one finger, such as the index finger, to complete this action.
C-Gesture is unique because the menu appears with "natural" animation transitions. As your thumb crossed across the screen, a semicircular menu was immediately followed by the thumb across the area, which is very natural.
Warning "C gestures" hidden deep, not easy to be found. But this shortcoming can be remedied by adding watermark animation or using other elegant ways as a guide. Some tips to the user such as: "With your finger anywhere on the screen to draw a" C "." Or watermark animation tips in different positions of the screen several times to help users find the mystery of this gesture.

When users find this gesture, the watermark animation can disappear forever. "C-Gesture" is very easy to learn because we are very familiar with this gesture and use arms and fingers to relax.
Some people think the downside of the "C gesture" is that it is ergonomically fit to the user's requirements and does not map real things in the real world, such as reels or woks. Many designers love the Windows modern UI design, which uses "larger gestures". They really like the feeling of sliding the whole arm from left to right. Still others prefer to use the alternative "big hand gestures": a special multi-touch gestures - such as five fingers, or pinch together.
I disagree with this point of view despite the many proposed navigation methods, and each promises to be useful. But I still think "C gesture" is the most natural, most real, most economical touch action. It's a natural act, just as the user flicks or crawls the content on the screen.
Regardless of the device in what attitude, in what kind of task scenarios, this sliding action can be easily done with one hand. In order to verify the correctness of this view, we also need to expand the scope of the measured user to do more tests.
But one thing is clear: whatever contextual gestures change, contextual navigation from time to time on the screen is always available as a functional model for any touchscreen device - so my biggest advice is to never forget that important trend.
The source code explanation Imagine this function is really complicated, the following code is just a rough preview, look at the time focus is good.
To do a complete application, you need to record a custom "C gesture" with GestureBuilder in the Android SDK. Detailed steps to view Micha Kops's article: "Creating a Simple Gesture App With Android"
Then, in the CSwipeActivity class, load a custom "C gesture" from the library:
// Load gestures library
mGestureLib = GestureLibraries.fromRawResource (this, R.raw.gestures_cswipe);
if (! mGestureLib.load ()) {
// Show toast if gestures library could not be loaded
Toast.makeText (this, R.string.KMsgErrLoadingGestures, Toast.LENGTH_SHORT) .show ();
}
Next, create a listener to monitor the target gesture (recognize the "C gesture"):

// Register gestures listener
mGestureOverlayView.addOnGesturePerformedListener (new GestureOverlayView.OnGesturePerformedListener () {
@Override
public void onGesturePerformed (GestureOverlayView gestureOverlayView, Gesture gesture) {
onGesture (gestureOverlayView, gesture);
}
});
OnGesture () can be used to determine if the gesture satisfies the "C gesture" condition when performing any gesture. You can judge whether the user's gesture meets the requirement by comparing whether the predicted value is higher than some predetermined value. In the demo we provided, we set the predetermined value to a middle-of-the-road value of -3D, which is experimentally determined. If the value is too low, a simple slip may accidentally trigger This feature, if the threshold is too high, this gesture is very difficult to be triggered. When the correct gesture is detected, the app calls a special semicircle menu and populates the preset options:
if (prediction.score> 3D) {
// Switch content from gesture overlay view to original content view
mGestureOverlayView.removeView (mContentView);
setContentView (mContentView);
// Inflate the CSwipe control view
final View cSwipePopupContentView = getLayoutInflater (). inflate (R.layout.view_cswipe, null);
mCSwipe = (CSwipe) cSwipePopupContentView.findViewById (R.id.cswipe);
We provide a demo app that supports "C gestures" in both directions: left and right. You can use the following code to determine, and then set the menu anchor point direction:
// Check the orientation of the CSwipe control based on the selected gesture prediction
final String predictionName = prediction.name;
CSwipe.Anchor cSwipeAnchor = CSwipe.Anchor.RIGHT;
if (predictionName.equals (GESTURE_CSWIPE_LEFT_MARGIN)) {cSwipeAnchor = CSwipe.Anchor.LEFT;}
else if (predictionName.equals (GESTURE_CSWIPE_RIGHT_MARGIN)) {cSwipeAnchor = CSwipe.Anchor.RIGHT;}

// Set the CSwipe control anchor according to the selected gesture prediction
mCSwipe.setAnchor (cSwipeAnchor);
Let the menu appear as close as possible to the anchor of the gesture so that a visual appearance of the menu appears smooth with the gesture:

// Show the CSwipe control popup window as close as possible to the gesture bounding rectangle
final RectF gestureBoundingRect = gesture.getBoundingBox ();
mCSwipePopupWindow.showAtLocation (mContentView, Gravity.NO_GRAVITY, (int) gestureBoundingRect.left, (int) gestureBoundingRect.top);
Use CSwipe class to start this special semicircle menu defined by the outer circle and the inner circle. You can find the complete CSwipe.java code in the Widget folder:
public CSwipe (Context context, AttributeSet attrs, int defStyle) {
super (context, attrs, defStyle);

final TypedArray attributes = context.obtainStyledAttributes (attrs, R.styleable.CSwipe);

mInnerArcRadius = attributes.getDimensionPixelSize (R.styleable.CSwipe_innerArcRadius,
(int) TypedValue.applyDimension (TypedValue.COMPLEX_UNIT_DIP, DEFAULT_INNER_RADIUS_DP, getResources (). getDisplayMetrics ()));
mOuterArcRadius = attributes.getDimensionPixelSize (R.styleable.CSwipe_outerArcRadius,
(int) TypedValue.applyDimension (TypedValue.COMPLEX_UNIT_DIP, DEFAULT_OUTER_RADIUS_DP, getResources (). getDisplayMetrics ()));

to sum up:
Dear reader, the rest of the task to you. You can continue polish the code to provide more enhancements: to improve the response speed; to create a smooth transition effect; to debug to determine the initial value of the gesture; and even to re-write the gesture detection algorithm over time in learning to maximize Match a variety of device models and user palm size. Now, it's time to take a look at the demo we've provided, and I think it should have the potential of "C-Gesture" navigation.
Attached: demo Download: (installation method with ordinary Android APP)

http://media.smashingmagazine.com/wp-content/uploads/2013/02/CSwipeDemo2.zip

Author: Greg Nudelman translation: Wang Lin (Ryan)

Weibo original UDC microblogging, please indicate the source