The Hybrid Object-Task Framework¶

#ux #ui

Target Audience: UX Designers, Product Managers, Frontend Architects

1. The Philosophy¶

We rejects the false dichotomy between “Object-Oriented” and “Task-Oriented” design. Instead, we use a Hybrid Strategy that leverages the strengths of both:

Navigation is Object-Oriented (OO UI): Users navigate to “Things” (Nouns). This matches their mental model of the school (Students, Classes, Grades). This provides stability and findability.
Execution is Task-Oriented: Once a User has found the “Thing,” they execute “Intentions” (Verbs). These are not generic database edits; they are specific, guided workflows.

The Mantra:

“Navigate to the Noun. Trigger the Verb. Complete the Wizard.”

2. The Core Framework¶

Principle: Do not bury objects behind verbs in the main navigation. * ❌ Wrong: Menu $\rightarrow$ Registration $\rightarrow$ New Student * ✅ Right: Menu $\rightarrow$ Students $\rightarrow$ Action: Register New

The Object Dashboard (The Read State):
When a user clicks on an object (e.g., “Student: John Doe”), they should not see a giant input form. They should see a Dashboard that answers: * Identity: Who/What is this? (Photo, Name, ID). * Status: Is it active? Is there an alert? (Red flags, Status pills). * Relationships: What is linked to this? (Parents, Schedule, Medical). * The Action Bar: What can I do to this object?

Phase 2: The Verb (The Trigger)¶

Principle: Actions should be explicit tasks, not generic “Edit” buttons. * ❌ Wrong: A single “Edit” button that makes every field on the page editable. * ✅ Right: Specific action buttons based on intent:
* “Move Household”
* “Log Medical Incident”
* “Promote to Next Grade”

Phase 3: The Wizard (The Write State)¶

Principle: Data entry happens in focused, isolated modes that guide the user.
When a Verb is triggered, the UI enters a Task Mode (Modal, Slide-over, or Focused Page). * Isolation: Hide unrelated navigation. * Guidance: Use “Steppers” (Step 1 of 3) for complex tasks. * Smart Defaults: Pre-fill data based on context (e.g., if clicking “Log Incident” from a Class Roster, pre-fill the Time and Location). * Validation: Validate the business logic (e.g., “Seat Limit Exceeded”), not just data types.

3. The Design Process Checklist¶

When designing a new feature, follow this 4-step process:

Step 1: Noun Extraction (OO UI)¶

Question: What are the “Things” the user is manipulating? * Example: In the “Discipline” module, the Noun is the Referral. * Output: Design the “Referral Detail View” (Read-only dashboard of the incident).

Step 2: Verb Definition (Task Analysis)¶

Question: What are the specific reasons a user touches this object? * Constraint: Avoid “Update” as a verb. Be specific. * Example Verbs: File Referral, Assign Consequence, Notify Parents, Close Case.

Step 3: Workflow Mapping¶

For each Verb, define the flow. Is it simple or complex? * Atomic Action: (e.g., “Unlock Account”) $\rightarrow$ Immediate confirmation toast. * Transactional Form: (e.g., “Update Phone Number”) $\rightarrow$ Simple Modal. * Complex Wizard: (e.g., “New Student Intake”) $\rightarrow$ Multi-step process with “Draft” states.

Step 4: Persona Filtering¶

Adjust the UI density based on who is looking at it. * Admins: Need Bulk Actions and Power Grids. (e.g., Select 50 students $\rightarrow$ “Mass Excuse Absence”). * Teachers: Need Speed and Visuals. (e.g., One-click attendance, color-coded gradebooks). * Parents/Students: Need Simplicity and cards. (e.g., “To-Do List” style).

4. Concrete Example: The “Student” Entity¶

Feature	Old Pattern (CRUD/Anemic)	New Pattern (Hybrid UI Methodology)
Menu Item	“Data Entry”	“Students”
Landing Page	Search Form	Student Collection (Filterable List)
Detail Page	Giant Form with 50 inputs	Student Profile (Read-only view with “Action Zone”)
Changing Address	Click “Edit”, scroll to address, type.	Click “Move Household”. Wizard asks: “Apply to Sibling?”
Medical Info	“Medical” Tab in the form.	“Log Nurse Visit” button. Opens specific log-entry modal.
New Student	“Add Row”	“Intake Wizard” (Step 1: Docs, Step 2: Demographics…)

5. Guardrails for Product Managers¶

No “Mega-Forms”: If a form has more than 10 fields, ask if it represents two different tasks. If yes, split them.
Language Matters: Use the vocabulary of the school, not the database.
- Don’t say: “Create Attendance Record.”
- Do say: “Mark Absent.”
Empty States are Opportunities: When a Noun list is empty, don’t just say “No Records.” Provide the primary Verb.
- Example: “No Referrals found. [File a New Referral]“
Respect the “Read” State: 90% of the time, users are looking for information, not changing it. Optimize the Dashboards for readability (typography, hierarchy, color) before you optimize the Forms.

Page last modified: 2025-11-26 13:50:23