157 lines
3.5 KiB
Markdown
157 lines
3.5 KiB
Markdown
# IGNY8 UX Guidelines
|
|
|
|
**Last Updated:** December 25, 2025
|
|
|
|
---
|
|
|
|
## Design Principles
|
|
|
|
### 1. Concise Labels
|
|
|
|
**Navigation & Tabs:** Keep labels short (1-2 words max)
|
|
- ✅ Good: `Queue`, `Drafts`, `Images`, `Review`, `Published`
|
|
- ❌ Bad: `Ready to Write`, `Finished Drafts`, `Review Before Publishing`
|
|
|
|
**Section Headers:** Use simple, consistent terminology
|
|
- ✅ Good: `SETUP`, `WORKFLOW`, `ACCOUNT`, `SETTINGS`
|
|
- ❌ Bad: `GET STARTED`, `CREATE CONTENT`, `MANAGE ACCOUNT`, `CONFIGURATION`
|
|
|
|
### 2. Consistent Terminology
|
|
|
|
Use the same term throughout the system:
|
|
|
|
| Concept | Correct Term | Avoid |
|
|
|---------|--------------|-------|
|
|
| Content measurement | "Content pieces" | "Credits" |
|
|
| Sidebar modules | Module name only | Verbose descriptions |
|
|
| Page titles | Match tab name | Flowery language |
|
|
|
|
### 3. Page Titles
|
|
|
|
Page titles should be:
|
|
- Short and descriptive
|
|
- Match the sidebar navigation
|
|
- Consistent with tab labels
|
|
|
|
```
|
|
Dashboard (not "Your Content Creation Dashboard")
|
|
Keywords (not "Your Keywords")
|
|
Drafts (not "Your Articles" or "Finished Drafts")
|
|
```
|
|
|
|
### 4. Descriptions & Helper Text
|
|
|
|
- Keep descriptions **short** (under 10 words)
|
|
- Put longer explanations in tooltips or Help pages
|
|
- Dashboard cards: 3-5 word descriptions maximum
|
|
|
|
```tsx
|
|
// ✅ Good
|
|
<ComponentCard title="Workflow Progress" desc="Track your content pipeline">
|
|
|
|
// ❌ Bad
|
|
<ComponentCard title="Your Content Journey" desc="Track your content creation progress from ideas to published articles">
|
|
```
|
|
|
|
### 5. Workflow Pipeline Labels
|
|
|
|
For pipeline stages, use arrow notation:
|
|
- ✅ `Keywords → Clusters`
|
|
- ❌ `Organize Keywords`
|
|
|
|
---
|
|
|
|
## Navigation Structure
|
|
|
|
### Sidebar Sections
|
|
|
|
```
|
|
Dashboard (standalone)
|
|
|
|
SETUP
|
|
├── Add Keywords
|
|
├── Sites
|
|
└── Thinker
|
|
|
|
WORKFLOW
|
|
├── Planner
|
|
├── Writer
|
|
├── Automation
|
|
├── Linker
|
|
└── Optimizer
|
|
|
|
ACCOUNT
|
|
├── Account Settings
|
|
├── Team
|
|
├── Plans & Billing
|
|
└── Usage
|
|
|
|
SETTINGS
|
|
├── Profile
|
|
├── AI Models
|
|
├── Publishing
|
|
└── Import / Export
|
|
|
|
HELP
|
|
└── Help & Docs
|
|
```
|
|
|
|
### Module Tab Labels
|
|
|
|
**Planner:** `Keywords` | `Clusters` | `Ideas`
|
|
|
|
**Writer:** `Queue` | `Drafts` | `Images` | `Review` | `Published`
|
|
|
|
**Thinker:** `Prompts` | `Author Profiles` | `Strategies` | `Image Testing`
|
|
|
|
---
|
|
|
|
## When to Add Explanatory Text
|
|
|
|
### DO add explanations for:
|
|
- Help & Documentation pages
|
|
- First-time user onboarding flows
|
|
- Error messages and empty states
|
|
- Tooltips on hover
|
|
|
|
### DON'T add explanations to:
|
|
- Navigation labels
|
|
- Tab labels
|
|
- Page headers
|
|
- Card descriptions on dashboards
|
|
|
|
---
|
|
|
|
## User-Facing Terminology
|
|
|
|
### Content & Pricing
|
|
|
|
| Internal (Backend) | User-Facing (Frontend) |
|
|
|-------------------|------------------------|
|
|
| `credits` | "content pieces" |
|
|
| `credits_remaining` | "X remaining" |
|
|
| `plan_credits_per_month` | "monthly allowance" |
|
|
| Purchase Credits | Upgrade Plan |
|
|
| Credit Balance | Content Usage |
|
|
|
|
### Actions
|
|
|
|
| Internal/Old | User-Facing |
|
|
|--------------|-------------|
|
|
| Generate | Create |
|
|
| Execute | Run |
|
|
| Configure | Set up |
|
|
| Insufficient credits | Content limit reached |
|
|
|
|
---
|
|
|
|
## Change History
|
|
|
|
| Date | Change |
|
|
|------|--------|
|
|
| Dec 25, 2025 | Reverted verbose navigation labels to concise terms |
|
|
| Dec 25, 2025 | Fixed Dashboard progress item descriptions |
|
|
| Dec 25, 2025 | Fixed Writer module tabs (Queue, Drafts, etc.) |
|
|
| Dec 25, 2025 | Fixed Planner module tabs (Keywords, Clusters, Ideas) |
|
|
| Dec 25, 2025 | Restored original Automation pipeline stage names |
|