{"draftJsState":{"blocks":[{"data":{"image":{"id":"680f05d76a4c6418eac9ed3c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"UI/UX тестирование: как убедиться, что интерфейс дружелюбен","type":"atomic:image","key":"aos6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":241,"style":"BOLD"}],"text":"Вам знакомо чувство, когда вы заходите на сайт, а он будто обнял вас мягким пледом? Всё понятно, всё работает, хочется остаться и кликнуть на кнопочки. А бывало ли наоборот — иконки улетели, поля не влезли, шрифт 6px? Добро пожаловать в мир UI/UX тестирования, где цель — сделать так, чтобы пользователь не сбежал в ужасе через 5 секунд.","type":"unstyled","key":"2c0am"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":51,"style":"BOLD"}],"text":"Сегодня мы поговорим, как убедиться, что интерфейс дружелюбен, и покажем это на практике: с примерами, задачками и даже кусочками кода с комментариями.","type":"unstyled","key":"4g0ha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое UI/UX тестирование?","type":"header-two","key":"ahr9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простыми словами:","type":"unstyled","key":"engc8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"UI (User Interface) — визуальная часть: кнопочки, поля, цвета, выравнивание.","type":"unordered-list-item","key":"f8k0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"UX (User Experience) — как пользователь взаимодействует с интерфейсом, удобно ли ему, интуитивно ли, не орёт ли он на экран.","type":"unordered-list-item","key":"ceb4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"UI/UX тестирование — это процесс, в котором мы проверяем, насколько всё это вместе удобно, красиво и работает, как задумано.","type":"unstyled","key":"c7f6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDEE0 Инструменты, которые пригодятся","type":"header-two","key":"2tpqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде чем в бой, вот что может пригодиться:","type":"unstyled","key":"64k8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Figma (для UI-макетов)","type":"unordered-list-item","key":"mj9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Chrome DevTools","type":"unordered-list-item","key":"4posm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Lighthouse (инструмент в Chrome для аудита)","type":"unordered-list-item","key":"cb9lf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Playwright / Cypress (для автоматизации)","type":"unordered-list-item","key":"biida"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользовательское тестирование (люди, к которым вы пристаете: \"ну, нажми сюда, ну пожалуйста...\")","type":"unordered-list-item","key":"21rbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Задача 1 (Новичок): Проверка кликабельности кнопки","type":"header-two","key":"c4jr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Проблема: Пользователь не может понять, кликабельна ли кнопка.","type":"unstyled","key":"4h6db"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Цель: Проверим визуальную обратную связь — есть ли у кнопки :hover, :active, не выглядит ли она как текст.","type":"unstyled","key":"6qh15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"unstyled","key":"201r2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* style.css */\n.cta-button {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 12px 20px;\n font-size: 16px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.cta-button:hover {\n background-color: #0056b3; /* При наведении темнеет */\n}","type":"unstyled","key":"ee7i7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Комментарии:","type":"unstyled","key":"a8v1c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".cta-button:hover — визуальная подсказка пользователю: \"да, на меня можно нажать!\"","type":"unordered-list-item","key":"cjp21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cursor: pointer — классика. Без этого кнопка выглядит как текст.","type":"unordered-list-item","key":"c3elp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transition — делает смену цвета плавной, приятно глазу.","type":"unordered-list-item","key":"9ikum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFAF Тест: Наведите мышку и посмотрите, меняется ли цвет. Если да — интерфейс отвечает: \"Я вижу тебя!\"","type":"unstyled","key":"aemad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Задача 2 (Новичок): Проверка доступности формы","type":"header-two","key":"sg5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Проблема: У пользователя плохое зрение, он пользуется скринридером. Поможет ли ему наш интерфейс?","type":"unstyled","key":"5jju9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fc9db"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Комментарии:","type":"unstyled","key":"20va3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"label связан с input по for и id — скринридеры это обожают.","type":"unordered-list-item","key":"eovpq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"aria-required=\"true\" — доступно сообщает: \"это поле обязательно, дружище\".","type":"unordered-list-item","key":"52lj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFAF Тест: Пройдите сайт с Tab-ом и слушайте скринридер — он должен зачитывать метки.","type":"unstyled","key":"1ov1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Задача 3 (Средний уровень): UI-анализ с Lighthouse","type":"header-two","key":"dn3s3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Проблема: Мы не уверены, насколько хорош наш интерфейс.","type":"unstyled","key":"9qfs4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Решение: Открываем Chrome DevTools → Lighthouse → Генерируем отчёт","type":"header-three","key":"eduof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он покажет:","type":"unstyled","key":"1pq1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контрастность текста","type":"unordered-list-item","key":"fsqsa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование доступных атрибутов","type":"unordered-list-item","key":"b2u44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Время отклика (UX!)","type":"unordered-list-item","key":"14vds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Layout Shift (дергается ли страница)","type":"unordered-list-item","key":"95cls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCCC Пример: Вы узнаете, что зелёный текст на красном фоне — это боль не только глазу, но и Google.","type":"unstyled","key":"7glbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Задача 4 (Продвинутый): Проверка интерактивных элементов через Playwright","type":"header-two","key":"334gd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы хотим протестировать, работает ли кнопка при клике. Пример на JS.","type":"unstyled","key":"da81n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// test/ui.spec.js\nimport { test, expect } from '@playwright/test';\n\ntest('Кнопка работает', async ({ page }) => {\n await page.goto('http://localhost:3000');\n await page.click('text=Купить слона');\n await expect(page).toHaveURL(/checkout/);\n});","type":"unstyled","key":"e7opc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Комментарии:","type":"unstyled","key":"br9pl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"page.goto(...) — открываем нужную страницу.","type":"unordered-list-item","key":"6ocu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"page.click(...) — кликаем по тексту кнопки.","type":"unordered-list-item","key":"as2ee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"expect(page).toHaveURL(...) — проверяем, перенаправило ли нас.","type":"unordered-list-item","key":"c3s0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFAF Тест: Автоматизация помогает прогнать 100 кнопок за 10 секунд.","type":"unstyled","key":"clnmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Задача 5 (Профи): UX-тест с настоящими людьми","type":"header-two","key":"22in8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Проблема: Мы не знаем, что чувствует пользователь.","type":"unstyled","key":"fs2f8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Решение: Проведите 5-минутный тест.","type":"header-three","key":"b0hte"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дайте задание: \"Зарегистрируйся на сайте\".","type":"ordered-list-item","key":"7lnsk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смотрите, куда человек кликает, как долго ищет нужное поле.","type":"ordered-list-item","key":"9pop0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Записывайте, где он замирает — значит, неочевидно.","type":"ordered-list-item","key":"eoikm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFAF Совет: Не подсказывайте! Даже если больно смотреть.","type":"unstyled","key":"d6oe7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83E\uDD16 Бонус: Быстрый чеклист UI/UX тестировщика","type":"header-two","key":"4sagi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопки — интерактивны и имеют визуальную обратную связь?","type":"unordered-list-item","key":"802k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формы понятны, с валидацией?","type":"unordered-list-item","key":"3lh6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контрастность текста достаточная?","type":"unordered-list-item","key":"b5fae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удобно ли на мобильном?","type":"unordered-list-item","key":"eamb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть ли анимации, которые раздражают?","type":"unordered-list-item","key":"4g9so"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно пройти путь без подсказок?","type":"unordered-list-item","key":"1u5v7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCCC Заключение","type":"header-two","key":"dqu8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"UI/UX тестирование — это не только про баги, но и про чувства. Интерфейс должен быть как хороший друг: понятный, отзывчивый, и не бьющий по глазам. Чем раньше начнёте его тестировать, тем меньше боли на проде.","type":"unstyled","key":"dsg30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так что берите Lighthouse, зовите друга потестить вашу форму, и не забывайте: если что-то непонятно — это не UX, это квест.","type":"unstyled","key":"f4u5j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"kZDCuMjCOAYpyx4clTu8"}],"entityMap":{}},"mentions":[]}