94 lines
1.4 KiB
Markdown
94 lines
1.4 KiB
Markdown
|
# UX Writing Patterns
|
||
|
|
|
||
|
|
## Button Labels
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Bad: Vague
|
||
|
|
<Button>Submit</Button>
|
||
|
|
<Button>OK</Button>
|
||
|
|
|
||
|
|
// Good: Verb + Noun, shows outcome
|
||
|
|
<Button>Create Account</Button>
|
||
|
|
<Button>Save Changes</Button>
|
||
|
|
<Button>Start Free Trial</Button>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Error Messages
|
||
|
|
|
||
|
|
Formula: What happened → Why → How to fix
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Bad
|
||
|
|
"Invalid input"
|
||
|
|
"Error 422"
|
||
|
|
|
||
|
|
// Good
|
||
|
|
"Please enter a valid email address"
|
||
|
|
"Password must be at least 8 characters"
|
||
|
|
```
|
||
|
|
|
||
|
|
## Empty States
|
||
|
|
|
||
|
|
Formula: Headline → Explanation → Action
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
<EmptyState
|
||
|
|
title="No results found"
|
||
|
|
description="Try adjusting your search or filters"
|
||
|
|
action={<Button>Clear Filters</Button>}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Form Labels
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
<Label>
|
||
|
|
Email Address
|
||
|
|
<HelpText>We'll never share your email</HelpText>
|
||
|
|
</Label>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Loading States
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Bad: "Loading..."
|
||
|
|
// Good: "Creating your account..." / "Uploading (2/5)..."
|
||
|
|
```
|
||
|
|
|
||
|
|
## Success Messages
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
<Toast
|
||
|
|
message="Post published!"
|
||
|
|
action={<Button>View Post</Button>}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Tooltips
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Bad: Repeats label
|
||
|
|
<Tooltip content="Click to delete">
|
||
|
|
|
||
|
|
// Good: Adds context
|
||
|
|
<Tooltip content="This action cannot be undone">
|
||
|
|
```
|
||
|
|
|
||
|
|
## Confirmation Dialogs
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
<Dialog
|
||
|
|
title="Delete this post?"
|
||
|
|
message="This will be permanently deleted."
|
||
|
|
confirmButton="Delete Post"
|
||
|
|
variant="destructive"
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Placeholder Text
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// Bad: "Enter value"
|
||
|
|
// Good: "e.g., john@example.com"
|
||
|
|
```
|