"Powering Great Commerce" News

The Anatomy of iOS Drag and Drop

Posted by Charles Williams on September 5, 2017

Drag and drop seems like it should be a fundamental command of ecommerce. The ability to use a computer mouse to "pick up" an object and move it to another virtual location has become second nature. The action is so simple we don't even think about it. But, as system engineers try to replicate the function on mobile, it can be a lot more complicated than we think.

Four Components of Drag and Drop

As Apple prepares to release a new iPhone and iOS 11 emerges from beta, we explore four components to every drag and drop: Navigate, Grab, Drag, Drop. These are the actions that the user takes, but the operating system has to understand these actions and respond properly. Here is a very brief glimpse at what the OS has to do and how designers should consider it in good web design.

Grab and Drag

Determine the file type, show the appropriate thumbnail, follow the cursor or finger and, while hovering over another object, determine whether that object can use the file during a drag.

Drop

Determine if the location for the drop can use the file. If moving into an application, the application has to determine what type of file it is being handed and then choose how to handle the file. It then must accept the file and use it in the determined way.

apple-iphone-x.jpgDrag and Drop Multi-Touch

When Apple decided to include drag and drop functionality in iOS 11, it didn't just want to move the same system onto the new platform. It wanted to maximize the multi-touch operations of the iPad and create a smarter system. With multi-touch capabilities, Apple allows users to grab and drag objects and hold them while doing other operations. For example while grabbing an object, users can switch applications, find other objects to add to the drag or use multiple fingers to hold multiple drops.

Apple didn't stop with the user interface, however. To create a smarter system, it had to think of how the drop would work when dealing with multiple types of files. There are hundreds of types of document and image file formats. When drops happen, the software needs to know how to best handle those files.

Apple created a smart fallback system that looks at the file type and where it is potentially being dropped. It then determines if and how that file type can be used by the application accepting the drop. If that file type can't be used, it uses a different file type that the application can use but is comparable to the original. For example, if a user attempts to drop an .svg vector image file and the application can't accept it, then it might import another type of vector file or, worst case, fallback to a jpeg file. In this way, drops don't fail because the app doesn't support a particular type of file.

Moving from a 30-year-old system to a completely new version of drag and drop is not something to take lightly. There are security concerns, compatibility issues and doing it in a way that the user can easily adapt to and understand. Adding drag and drop to the mobile user experience was a huge task but it significantly adds to the user experience.

You could collect multiple photos from multiple apps and drop them in a photobook app, or drag products from multiple webpages into your shopping cart. From research to ecommerce shopping, multi-touch drag and drop is almost here.

Full Service Ecommerce Solutions - One Click Away

Onestop Internet is curating ecommerce technology solutions that take full advantage of the latest mobile devices to deliver a frictionless user experience for internet shoppers.

Sources:

https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/drag-and-drop-overview
https://www.relay.fm/canvas/41

Topics: UX, Apple, user experience, web design

Subscribe to Email Updates

Popular Posts

Posts by Topic

see all