Files
nofx/web/src/i18n
0xYYBB | ZYY | Bobo 7afe1f1bad improve(web): improve UX messages for empty states and error feedback (#918)
## Problem
User-facing messages were too generic and uninformative:
1. **Dashboard empty state**:
   - Title: "No Traders Configured" (cold, technical)
   - Description: Generic message with no action guidance
   - Button: "Go to Traders Page" (unclear what happens next)
2. **Login error messages**:
   - "Login failed" (too vague - why did it fail?)
   - "Registration failed" (no guidance on what to do)
   - "OTP verification failed" (users don't know how to fix)
**Impact**: Users felt confused and frustrated, no clear next steps.
## Solution
### 1. Improve Dashboard Empty State
**File**: `web/src/i18n/translations.ts`
**Before**:
```typescript
dashboardEmptyTitle: 'No Traders Configured'
dashboardEmptyDescription: "You haven't created any AI traders yet..."
goToTradersPage: 'Go to Traders Page'
```
**After**:
```typescript
dashboardEmptyTitle: "Let's Get Started!"  //  Welcoming, encouraging
dashboardEmptyDescription: 'Create your first AI trader to automate your trading strategy. Connect an exchange, choose an AI model, and start trading in minutes!'  //  Clear steps
goToTradersPage: 'Create Your First Trader'  //  Clear action
```
**Changes**:
-  More welcoming tone ("Let's Get Started!")
-  Specific action steps (connect → choose → trade)
-  Time expectation ("in minutes")
-  Clear call-to-action button
---
### 2. Improve Error Messages
**File**: `web/src/i18n/translations.ts`
**Before**:
```typescript
loginFailed: 'Login failed'  //  No guidance
registrationFailed: 'Registration failed'  //  No guidance
verificationFailed: 'OTP verification failed'  //  No guidance
```
**After**:
```typescript
loginFailed: 'Login failed. Please check your email and password.'  //  Clear hint
registrationFailed: 'Registration failed. Please try again.'  //  Clear action
verificationFailed: 'OTP verification failed. Please check the code and try again.'  //  Clear steps
```
**Changes**:
-  Specific error hints (check email/password)
-  Clear remediation steps (try again, check code)
-  User-friendly tone
---
### 3. Chinese Translations
All improvements mirrored in Chinese:
**Dashboard**:
- Title: "开始使用吧!" (Let's get started!)
- Description: Clear 3-step guidance
- Button: "创建您的第一个交易员" (Create your first trader)
**Errors**:
- "登录失败,请检查您的邮箱和密码。"
- "注册失败,请重试。"
- "OTP 验证失败,请检查验证码后重试。"
---
## Impact
### User Experience Improvements
| Message Type | Before | After | Benefit |
|--------------|--------|-------|---------|
| **Empty dashboard** | Cold, technical | Welcoming, actionable |  Reduces confusion |
| **Login errors** | Vague | Specific hints |  Faster problem resolution |
| **Registration errors** | No guidance | Clear next steps |  Lower support burden |
| **OTP errors** | Confusing | Actionable |  Higher success rate |
### Tone Shift
**Before**: Technical, system-centric
- "No Traders Configured"
- "Login failed"
**After**: User-centric, helpful
- "Let's Get Started!"
- "Login failed. Please check your email and password."
---
## Testing
**Manual Testing**:
- [x] Empty dashboard displays new messages correctly
- [x] Login error shows improved message
- [x] Registration error shows improved message
- [x] OTP error shows improved message
- [x] Chinese translations display correctly
- [x] Button text updated appropriately
**Language Coverage**:
- [x] English 
- [x] Chinese 
---
## Files Changed
**1 frontend file**:
- `web/src/i18n/translations.ts` (+12 lines, -6 lines)
**Lines affected**:
- English: Lines 149-152, 461-464
- Chinese: Lines 950-953, 1227-1229
---
**By submitting this PR, I confirm:**
- [x] I have read the Contributing Guidelines
- [x] I agree to the Code of Conduct
- [x] My contribution is licensed under AGPL-3.0
---
🌟 **Thank you for reviewing!**
This PR improves user experience with clearer, more helpful messages.
Co-authored-by: the-dev-z <the-dev-z@users.noreply.github.com>
Co-authored-by: tinkle-community <tinklefund@gmail.com>
2025-11-11 21:21:07 -05:00
..