Simplenote Collapse Keyboard

Screenshots powered by

GetScreenshot Screenshot API

✋ What is it?

Simplenote is a minimalist note-taking app. The app has a design that heavily optimized writing and text entering.

When a user creates or edits a new note the app automatically auto focuses into a writing state (cursor on, keyboard open), however unlike other text entry apps leaving the focus state is possible by tapping a button dedicated to collapse the keyboard.

This mechanism allows the user to go back and forth between editing and preview text very fast, and without guessing implicit touch action to hide the keyboard.

🤲 How does this interaction or solution work?

Simplenote is a minimalist note-taking app. The app has a design that heavily optimized writing and text entering.

When a user creates or edits a new note the app automatically auto focuses into a writing state (cursor on, keyboard open), however unlike other text entry apps leaving the focus state is possible by tapping a button dedicated to collapse the keyboard.

This mechanism allows the user to go back and forth between editing and preview text very fast, and without guessing implicit touch action to hide the keyboard.

🙌 How does this interaction or solution work?

Optimized Real Estate and Discoverability.

Apps that are heavy in text entry tasks like note-taking apps and document processors usually have to deal with the difficulties of limited mobile screen real estate.

A critical part of text entry in mobile apps is the ability to move through text with speed.

This task is particularly difficult to accomplish when viewing long documents since the virtual keyboard covers a significant amount of the screen. Usually, to achieve this, the user needs to leave the keyboard mode, scroll through the content and re-enter into the typing mode.
When leaving a text entry mode, most apps rely on 'out of focus' interactions like tapping a non-text entry area of the screen. This behavior is an incredibly unintuitive solution that can create confusing scenarios for the final user.

Simplenote enhances the switch between modes by showing a dedicated button to collapse the keyboard. This button allows Simplenote to use the full-screen real estate for text entering and document rendering and helps the user to discover very quickly how to move between editing and view modes.


That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.