Input field interaction

February 26, 2024

I wanted to design an input field interaction for a drawer where the end state didn't necessarily look like an input field. The result is a pattern that is in between a typical input field for a form and a saved state – this works because the affordance is there with helpful placeholder text for the initial state and on hover the input border appears. This was heavily inspired by Cron's input interaction for editing calendar details.

Interactive Prototype

INFO

INFO

Semester

Fall 2028

Fall 2024

Fall 2025

Fall 2026

Fall 2027

Create new semester: “Fall 2028”

Check some boxes!

HUMAN INTERFACE

Web interface

Berkeleytime

GradTrak

Typography

Marqeta

SSO Forms

Bulk-Add /Users

PropertyGuru

Notifications

Web

HUMAN INTERFACE

Web interface

Berkeleytime

GradTrak

Typography

Marqeta

SSO Forms

Bulk-Add /Users

PropertyGuru

Notifications

Web