The touch experience of IE11 in Win8.1

Resolve Touch Implementation Hover operation

With the help of touch technology and Windows 8, more and more PCs are now equipped with touch screens, bringing a new interactive experience to the traditional PC field-touch operation. But there is a slightly embarrassing problem: In addition to the Windows 8 apps that are optimized for touch operations, a large number of traditional operations are based on keyboards and mice, such as our most frequent internet access. Almost all of today's web sites consider only mouse and keyboard operations, which can lead to operational hurdles when accessing a Web site using touch control. Starting from the website, the redesign of compatible touch operation of the Web page is the most thorough solution, but the difficulty is relatively large, because the number of sites is so much. Another solution is to start from the browser, through the improvement of the browser to solve the Internet touch operation problem, this approach is relatively easy to achieve, as long as the browser developers to work hard.

As an Internet Explorer 11, which will be published with Windows 8.1, it further enhances support for touch operations and is more handy when accessing Web pages. So what improvements have IE11 made? Let's take a look at it together ...

Simulate Mouse hover operation

At present, there are many sites have "hover" function, such as the major electric network, in the commodity classification blocks are basically used in this form. This product classification will not appear too messy too bloated, users can easily find the goods they need.

The most common Web page hover expansion operation

But this kind of common hover operation, wants to realize through the touch operation can encounter the recognition problem. Mouse because there is a pointer to the existence of the Web page as long as the pointer can realize the operation of hover, and touch operation does not have the pointer, directly put the finger up, the page will only be recognized as "click." One might think of the "hold" approach, but the reality is that the "hold" operation is recognized as "open the contextual menu on the right" instead of hovering.

IE11 for this problem has been improved, so that "hold down" can also achieve hover operation, while retaining the original "hold down" operation of the Open right-click menu function. When you visit the above page in IE11, press and hold the finger to expand the level two menu. Also, if the "hold" position itself contains a "click" action (such as a hyperlink), the "Right-click context menu command bar" (new window open, copy link, and so on) is displayed at the bottom of the screen.

Manipulating the hover menu on several different Web sites through touch controls

Other touch-control operation improvements

Improve link highlighting

When there are more links on the Web page, it is necessary to prevent errors by touching a link open. If there is a more obvious feedback prompt in the "click" Process to help users confirm the clicked link in real time, the touch operation will undoubtedly be more accurate.

IE11 now adds a feedback tip that when a user clicks on a link, the text around the link will briefly display a gray background highlighting the object that the user is clicking on.

Link highlighting effect comparison

Left-right light sweep to achieve back and forward operation

In the process of browsing the web, IE11 (including IE10) will actively hide all the function bar to display the Web page in full screen, in which case the user will often use the "back" operation will take additional steps, first call out the address bar, and then click the Back button. Often use mobile phones to surf the internet should know that many mobile browsers support gesture operation to achieve backward and forward, Windows 8 is no exception. From the IE10, when browsing the Web page, the user directly finger on the screen to the right to sweep the back to the previous page, the left sweep is moving forward.

Right and left sweep hands to achieve forward and backward

IE11 inherits this gesture operation and further improves the user experience and operational efficiency. When a user switches between different pages, IE11 hangs the previous page and caches it in memory. Once the user is swept back to the previous page, the page is restored from memory rather than reloaded, which results in an instantaneous load of the previous page. In addition, when you step back or forward, IE11 displays a screenshot of the page to the user when the page is loaded so that users can quickly find what they want when they reach the page.

Touch implementation HTML5 Drag-and-drop operation

Maybe there are still a lot of ways to go in HTML5 distance, but it is the trend of the future. IE11 is of course to support HTML5, and it is the first browser that supports the HTML5 drag-and-drop functionality through touch-control. In the IE11, the user can only be implemented with a long press.

In the Microsoft Magnetic Poetry Test Demo, IE10 can implement HTML5 drag-and-drop operation through the mouse, now we can open this demo with IE11 to experience touch implementation HTML5 Drag-and-drop operation.

Magnetic Poetry Demo Page

Visit: Magnetic poetry

Improved touch APIs to implement pointer events

Pointer events are a set of standards developed by Microsoft and other browser vendors and the consortium, based on IE10 's introduction of APIs with vendor prefixes. This API enables Web sites to support different touch devices including the mouse, stylus, multi-touch, and more. IE11 will introduce the updated Mspointer API, and the final official version will support pointer events without prefixes.

Note: Some of the technical notes in the text screenshots and video from the Official Microsoft Blog.