Gmail Microinteractions
Enhancing Gmail message review for a faster and more intuitive inbox experience.
The Brief
This project focuses on improving the message review experience in desktop web-based email clients. Rather than adding new features, the goal is to refine essential UI interactions. Specifically, how emails load into the interface, how message state is communicated, and how users interact with multiple messages during review.
01. The Research
I conducted a detailed analysis of message review interactions across leading desktop email clients. This research focused on how emails load, how read/unread state is communicated, and how users interact with message selection. By documenting each interaction and system response, I identified opportunities to improve clarity, responsiveness, and perceived speed.
SWOT Analysis
To understand the current landscape, I conducted a SWOT analysis of four major email clients. The focus was on how each platform handles loading performance, message state transitions, and selection interactions.
Key insights:
Gmail uses progressive loading and real-time state syncing but suffers from a cluttered UI and inconsistent message hierarchy.
Outlook preloads content for fast access but can feel rigid, with abrupt state transitions and slow bulk action response.
Yahoo Mail is simple and visually clear but lacks modern interaction design and feedback loops for bulk actions.
Apple Mail provides a smooth, minimalist experience but offers limited feedback for hover states, selection, and message state changes.
Comp Analysis
To refine my approach, I analyzed other applications that handle the same tasks well. This included both email clients and adjacent tools that showcase strong interaction design.
Key insights:
Superhuman optimizes sped, but relies heavily on keyboard shortcuts.
HEY integrates smooth animations into message state changes, making transitions feel intentional.
Notion uses skeleton loading and real-time updates to reduce perceived wait time.
Slack ensures continuous loading with clear read state indicators but becomes UI-dense for high-volume messages.
Figma provides excellent real-time feedback and interaction predictability, but some UI states remain hidden until directly manipulated.
02. The Approach
For the appraoch, I focused on three foundational microinteractions tied to the task of reviewing and managing messages inside the inbox. Each was visualized through flowcharts and modeled in system-level UML sequence diagrams to map user input, visual feedback, and interface response.
Flow & UML Diagrams
Each interaction was explored through two layers: Flowcharts to define the visible UI states, transitions, and user decisions, UML Sequence Diagrams to illustrate how system components handle each interaction behind the scenes
1. Email Loading Feedback: Focused on making the inbox feel responsive and intentional. The staggered skeleton screen, cascading message load animation, and error-recovery flow create a more transparent and informed loading experience.
2. Read/Unread State Transition: Clarified how message states update visually and functionally. A wipe transition, bold indicators, and hover cues reinforce clarity while syncing with the backend read state.
3. Selection Feedback: Defined how inbox mode shifts into a bulk-selection state. Checkbox behavior, toolbar transitions, and visual contrast create a stronger sense of control when selecting and managing multiple messages.
.jpg)
03. The Design
Email Loading
View Mode & Bulk Move
Multi-select items
04. Slides
