Stop 06 · Interaction Design & Micro-interactionsTopics · 9/9

Designing for Different Input Methods

In short

Your design might be tapped by a thumb, clicked by a mouse, tabbed through with a keyboard or spoken to. If it only works with one, you're quietly shutting out a lot of people.

The same interface may need to work well with touch, mouse, keyboard, and voice — designing tap targets, focus states, and interaction patterns that accommodate all relevant input methods for your product.

The jaadu happily rides up an escalator next to a ramp and a set of stairs.

Think of it like this

A building with many entrances

A good railway station has stairs, a ramp, a lift and an escalator. Everyone reaches the same platform their own way. Your interface needs the same: touch, mouse, keyboard and voice should all reach every action.

Watch it happen

Mouse vs touch

Mouse

Precise pointer, small targets work
Has hover to preview things
Right-click for extra menus

Touch

Fat finger, needs bigger targets
No hover at all
Long-press and swipes instead

Never put essential info only in a hover tooltip. Design for touch sizes, then add hover as a bonus for mouse users.

The big ideas

What you need to know

Keyboard can reach everything

Every button and link should be reachable with Tab and usable with Enter or Space, in a sensible order.

Visible focus

Keyboard users need a clear focus ring to see where they are. Never remove it without a better one.

Voice needs labels

Voice control users say what they see. A button labelled 'Pay now' should be called 'Pay now' in code too.

Hover is a bonus

Touch screens have no hover. Anything shown on hover must also be reachable another way.

Save yourself the pain

Common mistakes

Oops

Hiding the edit and delete buttons until the user hovers over a row.

Do this instead

Show them always, or behind a visible menu icon, so touch and keyboard users can reach them.

Oops

Removing the focus outline because it 'looks ugly'.

Do this instead

Design a focus style that fits your brand, with strong contrast, instead of deleting it.

Your mission

Unplug your mouse

~20 min

Quick check

Important delivery details appear only when you hover over an order. Who has the biggest problem?

Go deeper

1Test a design's keyboard navigation (tab order, visible focus states) even if primarily built for touch.
2Learn minimum touch target size guidelines (roughly 44x44px) for reliable tapping.
3Consider which input methods are actually relevant for your specific product and audience.