Touch experience of IE11 in Win8.1

Resolving touch to achieve hovering operation

With the touch technology and Windows 8, more and more PCs are now equipped with touch screens, bringing a new look to the traditional PC field. Interactive experience —— touch operation. But there is a slightly embarrassing problem: In addition to the Windows 8 applications optimized for touch operations, a lot of traditional operations are based on keyboards and mice, such as our most common Internet access. Almost all of today's websites only consider mouse and keyboard operations, which can lead to operational obstacles when using touch to access websites. Starting from the website, re-creating a web page that is compatible with touch operations is the most thorough solution, but it is more difficult to implement because the number of websites is so much. Another solution is to start with the browser and improve the browser to solve the touch operation problem during the Internet. This method is relatively easy to implement, as long as the browser developer can work hard.

As an Internet Explorer 11 to be released with Windows 8.1, support for touch operations is further enhanced, making it even more convenient when accessing web pages. So what improvements have IE11 made? Let's take a look at it. . .

Simulating mouse hover operations

At present, many websites have the function of “hoverover expansion”, such as major e-commerce websites, which are basically used in the commodity classification block. form. This kind of product classification will not appear too messy and too bloated, and users will find it easy to find the goods they need.
The most common webpage hover expansion operation

But this common hovering operation, I want to achieve recognition problems through touch operation. Because the mouse has a pointer, the webpage can realize the hovering and unfolding operation as long as the pointer is detected, and the touch operation does not have the pointer. If the finger is directly put on, the webpage will only be recognized as “click”. Some people may think of the way to "hold", but the reality is: "press" will be recognized as “open right context context menu instead of hover.

IE11 has made improvements to this problem, so that you can "hover" while holding down ” while retaining the original “press & rdquo; operation to open the right-click menu function. When accessing the above webpage in IE11, press and hold ” to expand the secondary menu. At the same time, if the location of “press "" itself contains "click & rdquo; operations (such as with hyperlinks), then at the bottom of the screen will be additionally displayed & ldquo; right context menu command bar & rdquo; (new window open, copy link Wait for the order).

Hovering menus on several different websites with touch operations

Other touch operation improvements

Improved link highlighting

When on the web When there are more links, opening a link by touch needs to prevent mistakes. If there is a more obvious feedback prompt during the "click" process to help the user confirm the clicked link in real time, the touch operation will undoubtedly be more accurate.

IE11 has now added a feedback prompt. When the user clicks on the link by touch, the gray background is briefly displayed around the link text, highlighting the object that the user clicked.
Link highlighting effect comparison

Sweep left and right to implement backward and forward operations

During web browsing, IE11 (including IE10) will actively hide all function bars in full screen mode. Display the webpage. In this case, the user will often use the “backward” operation, which requires additional steps. First call out the address bar and then click the back button. Frequent use of mobile Internet access should know that many mobile browsers support gesture operations to achieve backward and forward, Windows 8 is no exception. From IE10, when the user browses the webpage, the user directly swipes to the right on the screen to return to the previous page, and swiping to the left is forward.
Sweep left and right to achieve forward and backward

IE11 inherits this gesture and further improves user experience and operational efficiency. When a user switches between different pages, IE11 suspends the previous page and caches it in memory. Once the user swipes back to the previous page, the page will be restored from memory instead of being reloaded. The result of this is that the previous page is loaded in an instant. In addition, when rewinding or advancing, IE11 will display a screenshot of the web page when the page is loaded, so that the user can quickly find the desired content when the page is reached.

Touch implementation of HTML5 drag and drop operation

Maybe HTML5 has a lot to go from large-scale applications, but it is the future trend. IE11 is of course supporting HTML5, and it is the first browser to support HTML5 drag and drop functionality through touch. In IE11, users only need to press and hold to achieve.

In Microsoft's Magnetic Poetry test demonstration, IE10 can use the mouse to implement HTML5 drag and drop operation. Now we can use IE11 to open this demo to experience the touch and HTML5 drag and drop operation.
Magnetic Poetry Demo Page

Access: Magnetic Poetry

Improved Touch API for Implementing Pointer Events

Pointer Events by Microsoft and Other Browser Vendors and W3C A set of standards developed in cooperation, based on the API with vendor prefix introduced by IE10. This API enables websites to support different touch devices including mouse, stylus, multi-touch. IE11 will introduce the updated MSPointer API, and the final official version will support pointer events without prefixes.

Note: Some technical description text screenshots and videos from the article are from the official Microsoft blog.