Creating A Delightful User Experience with iOS Keyboard Shortcuts

ios keyboard shortcuts

With the release of the new 9.7” iPad Pro with Smart Connector, more and more iOS users are using external keyboards.

As a developer, you always want your user experience to be delightful, which means reaching up and touching the screen as infrequently as possible. A great way to achieve this is by adding a few simple and intuitive keyboard shortcuts to your iOS application. For users, consistency is the key to making your keyboard shortcuts discoverable and intuitive. Not only will you be delighting your users, but as a developer you will get a lot of use out of keyboard shortcuts. When running your app in the simulator, your computer’s keyboard is connected as an external keyboard by default, allowing you to make full use of keyboard shortcuts. While this will make testing during development faster and easier, remember to always thoroughly test your app on physical devices before release.

If those reasons aren’t enough, Apple has been consistently adding additional keyboard shortcuts, causing users to expect them to be more widely available. With the iOS 9.3 update, you are able to launch apps from spotlight search and control the entire news app without ever touching the screen through iOS keyboard shortcuts

Some Examples

ios keyboard shortcuts
Apple’s system apps are a good starting point when thinking about what keyboard shortcuts you should support in your app. Depending on your app, you may use some standard shortcuts like these or have completely custom ones that only fit your domain. But remember, consistency is key and you don’t want to surprise your users.

An app that uses a UITabBarController or a UISegmentedControl should use:

  • 1 for the first tab
  • 2 for the second tab
  • 3 for the third tab
  • 4 for the fourth tab
  • etc.

UINavigationController should use:

to go back in the view hierarchy

UITableView and UICollectionView should use:

  • tab to select the next item
  • shifttab for the previous item
  • return to perform the default action on that cell

For document based applications the standard file shortcuts:

  • New (n)
  • Open (o)
  • Close (w)
  • Save (s)
  • Print (p)

If you have a search bar, f should make it the first responder.

Finally if you have a form with UITextFields, then by default tab/shifttab will select the next/previous UITextField.

How it Works

The way keyboard shortcuts work in iOS is every UIResponder can react to a keyboard shortcut. The UIResponder class has a property keyCommands which is an optional readonly array of UIKeyCommand objects. Since this property is readonly, the only way to register keyboard shortcuts with a UIResponder is to subclass and override its value. To construct a UIKeyCommand, use the following initializer (iOS 9 only):

init(input: String, modifierFlags: UIKeyModifierFlags, action: Selector, discoverabilityTitle: String)

And if your app supports iOS 8 or older, you will have to use this initializer as well:

init(input: String, modifierFlags: UIKeyModifierFlags, action: Selector)

The discoverabilityTitle is used by Discoverability, an iOS 9 feature that lets users see the keyboard shortcuts that are available at any given time by pressing and holding the command key.

Here’s an example of how to add some standard shortcuts to a UITabBarController subclass:

class TabBarShortcutController: UITabBarController {
    override var keyCommands: Array<UIKeyCommand>? {
        return self.tabBar.items?.enumerate().map { (index, item) -> UIKeyCommand in
            return UIKeyCommand(input: "(index + 1)", modifierFlags: .Command, action:#selector(selectTab), discoverabilityTitle: item.title ?? "Tab (index + 1)")
        }
    }

    func selectTab(sender: UIKeyCommand) {
        if let newIndex = Int(sender.input) where newIndex >= 1 && newIndex <= (self.tabBar.items?.count ?? 0) {
            self.selectedIndex = newIndex - 1;
        }
    }
}

Here’s another example for part of a UIViewController subclass that contains a UITableView called tableView and has a data model called dataModel:

let nextObjectCommand = UIKeyCommand(input: "t", modifierFlags: [] , action: #selector(selectNext), discoverabilityTitle: "Next Object")
let previousObjectCommand = UIKeyCommand(input: "t", modifierFlags: .Shift, action: #selector(selectPrev), discoverabilityTitle: "Previous Object")
let selectObjectCommand = UIKeyCommand(input: "r", modifierFlags: [], action: #selector(selectCurrent), discoverabilityTitle: "Select Object")

override var keyCommands: Array<UIKeyCommand>? {
    var shortcuts = Array<UIKeyCommand>()
    if let selectedRow = self.tableView?.indexPathForSelectedRow?.row {
        if selectedRow < self.dataModel.count - 1 {
            shortcuts.append(nextObjectCommand)
        }
        if selectedRow > 0 {
            shortcuts.append(previousObjectCommand)
        }
        shortcuts.append(selectObjectCommand)
    } else {
        shortcuts.append(nextObjectCommand)
    }
    return shortcuts
}

func selectNext(sender: UIKeyCommand) {
    if let selectedIP = self.tableView?.indexPathForSelectedRow {
        self.tableView.selectRowAtIndexPath(NSIndexPath(forRow: selectedIP.row + 1, inSection: selectedIP.section), animated: true, scrollPosition: .Middle)
    } else {
        self.tableView.selectRowAtIndexPath(NSIndexPath(forRow: 0, inSection: 0), animated: true, scrollPosition: .Top)
    }
}

func selectPrev(sender: UIKeyCommand) {
    if let selectedIP = self.tableView?.indexPathForSelectedRow {
        self.tableView.selectRowAtIndexPath(NSIndexPath(forRow: selectedIP.row - 1, inSection: selectedIP.section), animated: true, scrollPosition: .Middle)
    }
}

func selectCurrent(sender: UIKeyCommand) {
    //Perform action on selected object here
}

Adding keyboard shortcuts is easy. For your users who have external keyboards, shortcuts can make all the difference between an app that you use once or an app your users will tap into every day. For more examples, here’s a reference that I find helpful from other apps. Have you added keyboard shortcuts to your iOS application? Let us know in the comment box!

Love the tools you’re learning in iOS development? Check out UIView Transformations and Animations.

Say hello to your new mobile product team.

  • * By filling out this form, I accept stable|kernel’s Privacy Policy.
  • This field is for validation purposes and should be left unchanged.


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *