В чем разница между UI - тестированием и UX - тестированием?

В чем разница между UI - тестированием и UX - тестированием

Это две разные дисциплины в рамках frontend тестирования. За 10+ лет я тестировал обе и вижу четкую границу между ними.

Определения

UI Testing (User Interface)

Определение: Тестирование элементов интерфейса на правильность их функционирования.

UI = Как выглядит и работает

Фокус:
- Кнопка work правильно?
- Форма принимает данные?
- Текст display правильно?
- Цвета правильные?
- Макет responsive?
- Элементы interactive?

UX Testing (User Experience)

Определение: Тестирование того, насколько легко и приятно пользователю использовать приложение.

UX = Как пользователю использовать

Фокус:
- Интуитивно ли?
- Быстро ли выполнить задачу?
- Понятны ли инструкции?
- Доволен ли пользователь?
- Легко ли найти функцию?
- Нет ли фрустрации?

Аналогия

UI = Коллекция компонентов
Как: Отдельные части машины (двигатель, колеса, руль)

UX = Полный опыт вождения
Как: Как ездить на этой машине (удобна ли, безопасна ли, интуитивна ли)

---

UI Testing = "Кнопка работает"
UX Testing = "Пользователю понравилось нажимать кнопку"

UI Testing

Что тестирую

1. Visual correctness
   - Button color: #FF0000 ✓
   - Text size: 16px ✓
   - Alignment: centered ✓
   - Font: Arial ✓

2. Functionality
   - Button click works ✓
   - Form submission sends data ✓
   - Modal opens/closes ✓
   - Links work ✓

3. Responsiveness
   - Mobile: 320px ✓
   - Tablet: 768px ✓
   - Desktop: 1920px ✓
   - Scaling correct ✓

4. State changes
   - Hover state ✓
   - Active state ✓
   - Disabled state ✓
   - Loading state ✓

5. Accessibility
   - Color contrast ✓
   - Alt text ✓
   - ARIA labels ✓
   - Keyboard navigation ✓

Инструменты для UI Testing

- Selenium
- Cypress
- Playwright
- Puppeteer
- Chrome DevTools
- UI Automation frameworks
- Percy (visual regression)

Пример UI Test

def test_ui_login_button():
    # Given
    page = open_login_page()
    
    # When
    button = page.find_element('button[type="submit"]')
    
    # Then
    assert button.is_displayed()  # Visible
    assert button.is_enabled()    # Clickable
    assert button.get_attribute('color') == 'blue'  # Correct color
    assert button.text == 'Login'  # Correct text

UX Testing

Что тестирую

1. Task completion
   - Can user create account? (90% success)
   - How long does it take? (< 2 minutes)
   - Any confusion? (none)

2. Navigation
   - Can user find feature? (easily)
   - Is path logical? (yes)
   - Any dead ends? (no)

3. Feedback
   - Does user know if action succeeded? (yes)
   - Clear error messages? (yes)
   - Loading indicators? (yes)

4. Satisfaction
   - User happy? (scale 1-10)
   - Would use again? (yes)
   - Any frustration? (none)

5. Mental model
   - Matches expectations? (yes)
   - Predictable? (yes)
   - Logical? (yes)

Методы UX Testing

1. User interviews
   - Ask users about experience
   - What was easy/hard?
   - What surprised you?

2. Usability testing
   - Give user task
   - Observe how they do it
   - Record struggles
   - Document findings

3. A/B testing
   - Test design A vs B
   - Measure which better
   - Statistical significance

4. Heatmaps
   - Where users click?
   - Where users scroll?
   - What's ignored?

5. Task analysis
   - How long to complete task?
   - How many steps?
   - Any errors?

Пример UX Test

Task: "Add item to cart and checkout"

Participant:
- User A (developer, tech-savvy)
- User B (non-tech, uses apps rarely)
- User C (moderate tech skills)

Observations:

User A:
- Completed in 45 seconds
- No confusion
- "Very straightforward"

User B:
- Took 3 minutes
- Confused about where to click
- Didn't see "Add to Cart" button
- "Where's the buy button?"

User C:
- Completed in 1.5 minutes  
- Minor confusion
- "Almost there but needs clarity"

Findings:
- "Add to Cart" button visibility issue
- Mobile users struggle more
- Need better visual hierarchy

Сравнительная таблица

Примеры различий

Сценарий 1: Login page

UI Testing

✓ Email field accepts email
✓ Password field masks input
✓ Login button present
✓ Submit works
✓ Error message shows on 401
✓ Colors match design
✓ Mobile responsive

UX Testing

1. User opens login page
2. "Where do I enter my email?" (confusion)
3. Click email field
4. Type email
5. "Is it correct?" (uncertainty)
6. Click password field  
7. Type password
8. "What was my password?" (forgot)
9. Look for "Forgot password" link
10. "Hard to find"
11. Go back
12. Finally logs in

Findings:
- Forgot password link too hidden
- No validation feedback
- Unclear which field
- User frustrated (3/10 satisfaction)

Recommendations:
- "Forgot password?" link below password
- Real-time email validation
- Clear labels
- Better visual feedback

Мой подход при тестировании

Phase 1: UI Testing (Automated)

# Cypress test
describe('Login UI', () => {
  it('should display login form', () => {
    cy.visit('/login')
    
    cy.get('[data-testid="email-input"]')
      .should('be.visible')
      .should('have.attr', 'type', 'email')
    
    cy.get('[data-testid="password-input"]')
      .should('be.visible')
      .should('have.attr', 'type', 'password')
    
    cy.get('[data-testid="submit-button"]')
      .should('be.visible')
      .should('have.text', 'Login')
  })
})

Phase 2: UX Testing (Manual)

1. Recruit 5 users (various skill levels)
2. Give task: "Log in to account"
3. Let them do it WITHOUT help
4. Observe:
   - Do they find login page?
   - Do they understand what to enter?
   - Can they recover from error?
   - Are they frustrated?
5. Ask:
   - What was easy?
   - What was hard?
   - What confused you?
   - Would you use again?
6. Document findings
7. Create recommendations

Инструменты

Для UI Testing

- Selenium
- Cypress (мой выбор)
- Playwright
- TestCafe
- Puppeteer
- Chrome DevTools
- Lighthouse

Для UX Testing

- UserTesting.com
- Hotjar (heatmaps)
- Fullstory (session replay)
- SurveyMonkey (surveys)
- Google Analytics
- Crazy Egg
- Direct user interviews
- Paper prototype testing

Практический пример: E-commerce checkout

UI Testing checklist

✓ Form fields display correctly
✓ Validation works (email format)
✓ Submit button functional
✓ Success message appears
✓ Error messages clear
✓ Required fields marked
✓ Payment button enabled/disabled correctly
✓ Mobile responsive
✓ Color scheme correct
✓ Accessibility: alt text, labels, aria

UX Testing script

Scenario: "Complete purchase for $50 item"

User 1 (E-commerce expert):
- Completed in 1 minute
- "Very easy"
- No issues

User 2 (New to online shopping):
- Took 4 minutes
- Confused about: "What's billing address?"
- Didn't understand: "Why ask for phone?"
- Issues:
  - Terminology unclear
  - Too many optional fields
  - No help text
- Satisfaction: 4/10

User 3 (Mobile only):
- Took 6 minutes
- Mobile form too long
- Can't see full form
- Must scroll constantly
- Satisfaction: 3/10

Findings:
1. Form too long
2. Terminology needs improvement
3. Mobile version needs redesign
4. Help text needed
5. Phone number should be optional

Когда использовать что

UI Testing нужно для

✓ Verify elements work
✓ Check visual correctness
✓ Validate responsiveness
✓ Test state changes
✓ Confirm accessibility
✓ Regression testing
✓ Automated checks

UX Testing нужно для

✓ Understand user behavior
✓ Find pain points
✓ Validate design decisions
✓ Improve user satisfaction
✓ Reduce support tickets
✓ Increase conversion
✓ Discover unexpected issues

Идеальный баланс

80% UI Testing (automated)
- Fast feedback
- Catches obvious issues
- Regression protection
- CI/CD integration

20% UX Testing (manual, user research)
- Finds deeper issues
- Validates design
- Improves experience
- Quantifiable improvements

Oба важны:
- UI без UX = Technical but frustrating
- UX без UI = Nice but broken

Заключение

UI и UX тестирование дополняют друг друга.

UI Testing:
- "Does it work?"
- Technical verification
- Automated
- Fast
- Objective

UX Testing:
- "Is it good?"
- User perspective
- Manual
- Slower
- Subjective

Оба нужны для качественного продукта:
- UI: Убедиться что все работает
- UX: Убедиться что пользователи довольны

Мой совет:
Любое приложение нуждается в обоих видах тестирования.
UI тестирование гарантирует функциональность.
UX тестирование гарантирует пользовательское удовлетворение.

С 10+ летами опыта я видел: приложения с идеальным UI но плохой UX теряют пользователей. Важны оба.