Talk was given at Berlindroid meetup on April 29, 2020.
Often reordering in mobile apps can be done via drag and drop. This is a familiar pattern to a lot of Android users. However, it presents a barrier for some groups of people. This talk was about the issues experienced with drag and drop and an approach we have taken in Microsoft To Do to improve reordering in our Android app.
2. Drag and drop
• Standard on mobile
• Familiar to many users
• Straight forward UX
• RecyclerView with ItemTouchHelper: a lot of tutorials
@Sigute_K
3. Drag and drop accessibility
problems
• Accurate pointer gestures required
• Not available with non-touch inputs
• Hard to use with Talkback
• Discoverability
@Sigute_K
4. 2 Concepts
• User testing
• Code prototypes
• Decided to
implement first
concept
@Sigute_K
5. ActionMode.Callback {
override fun onCreateActionMode(
mode: ActionMode, menu: Menu): Boolean {
//set adapter to show reorder item state
//hide irrelevant UI
//accessibility announcement, open
}
override fun onDestroyActionMode(mode: ActionMode) {
//set adapter to show normal item state
//show previously hidden UI
//accessibility announcement, closed
}
}
@Sigute_K
If an app supports reordering, it will probably be via drag and drop
Shared pattern on iOS and Android, as well as other devices
UX mimics real life physics
Motor disabilities - might not be able to accurately execute the gesture.
Keyboard or other input device - might not be able to carry out gestures at all. For example, switch access.
Users navigating via Talkback might find it hard to accurately drag an item without seeing where it is going.
Lack of platform familiarity – users simply unfamiliar with drag and drop interaction and not be able to discover it easily when using the app
Considering these issue – we needed a solution which does not rely on complex gestures, is available to everyone, regardless on whether they use touch or input device, and of course Talkback needs to be considered too
Covering concept 1 here, second one explained more in the article
Concept 1 tested better in user testing and was more straightforward to fit into existing codebase and figure out keyboard/Talkback navigation
First: normal mode
Second: adjusted for reorder and better UX
Collapsible toolbar -> make sure it’s collapsed
Add a new item button -> remove to allow user to focus on the main task
User cannot complete the task in reorder mode. Replaced with buttons to introduce clarity and also to reduce complexity of the cell and to make space
Marking task as important -> not the focus here, so kept for information, but not interactable
This makes keyboard and Talkback navigation simpler
Next steps:
Gather more user feedback
Try the app!
Read the article for more information
