Logo of UI Challenges
Sign in
Wireframe example for Slide-to-Unlock Control
An example interpretation of the prompt
Icon of target

Slide-to-Unlock Control

Icon of book open

Design the lock screen’s default slide-to-unlock state for mobile. The control sits on top of the lock screen, with a thumb/button that starts at one end of a track and moves to the other end to unlock.

The screen should still read as a locked phone at rest: time, status, and background context can be present, but the slider must be the clearest interactive element. Make the drag path obvious without looking like a tap target.

Focus on the control before the gesture begins. The thumb needs a clear resting position, the track needs a visible destination, and the screen should communicate that dragging all the way across is what completes unlock.

Think through how the control behaves while being held and dragged, but keep the brief centered on the default state. The design should make the action feel deliberate, physical, and hard to mistake for a simple button press.

Icon of book open

Use strong start/end contrast on the track: a distinct thumb at the left and a visible unlock destination at the right make the gesture read instantly.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.