Mapping Actions to Secondary Interactions

One of the most powerful tools in a good iPad app is support for multiple input mechanisms; the device is built upon multitouch input, but it’s also used by people with a keyboard, and trackpad. So when we look at the actions in an iPad app, it’s often a good idea to support secondary interactions that allow easier access to them.

I wanted to share how I went about designing the interactions for multiple input methods.

Defining the actions

LookUp’s information structure can simply be defined around two components. Words and Collections of Words.

The anatomy of LookUp
Actions associated with each component of LookUp

Each Word is linked to a definition that can include several parts: Meaning, Origins, Similar Words, Opposites, Wikipedia excerpts, Usage Notes and more. A user, when presented with a word, can perform three key actions: Like a word, or add it to a collection, or pronounce the word.

Each collection is a list of words that can be added or removed from it. The user can take a quiz on a collection, or share it as a PDF.

The primary interaction for the actions associated with words and collections in LookUp. Simply tap on the respective buttons to perform the action.

Touch: Drag and Drop

Drag and Drop is a powerful tool, it’s a natural mode of interaction for touch screen users on the iPad. Here are some ways in which drag and drop is used in LookUp:

Adding words into a collection:

This interaction is designed to be consistent across the app. You can simply start by dragging in a word of the day too.‌‌

The drag and drop interaction is a quick way to add multiple words into a collection. Simply startp picking words and drop them into a collection.

Opening a new window: You can drag out a word, or a collection to create a new window.‌‌

This interaction also works with sidebar items.

Reordering a list: This is one of the most natural interactions one can think of when supporting drag and drop in a list. Simply move an item up by dragging it into a list.‌‌

A little detail: You can actually drag a collection from the collection list view and drop into it into a position in the sidebar, and it’ll still rearrange.‌‌

Pointer: Contextual Menus

Contextual menus have always been useful on iOS as a place for secondary actions, but with the advent of pointer interactions in iPadOS, the contextual menus have become essential for users who use their iPad with a trackpad or mouse.

The mental model of right clicking a button to see actions is one that’s carried over seamlessly from the desktop to iPadOS

Contextual Menus for words:‌‌

Contextual menu for a word shows all the actions associated with it.

Adding a word to a collection‌‌

Contextual Menus for collections:

Contextual Menu for Collections shows all the actions associated with it, including some important actions such as delete and rename. The groupings provide a relevant demarcation between each category of actions.

Opening new windows through contextual menus:‌‌

Keyboard: Keyboard Shortcuts & Navigation:

So this is how I mapped the key actions in my app to relevant secondary interactions that allow users to quickly perform the tasks. New users to the app can easily discover these actions but power users can find ways to quickly perform them through the different ways such as keyboard shortcuts, contextual menus and drag and drop.

Single Key Commands provide a quick way to access key actions, and they're easy to memorise and build into your workflow too.