Please enable JavaScript.

Coggle requires JavaScript to display documents.

UX / UI - Coggle Diagram

- - - - Индикатор загрузки: Полоса прогресса при установке программы или загрузке файла.
      - Сообщение об успешном действии: Надпись "Черновик сохранен" или зелёная галочка после отправки формы.
      - Отображение местоположения: Хлебные крошки на сайте, показывающие, в каком разделе находится пользователь (Главная > Электроника > Смартфоны).
      - Курсор-песочница или "загрузка": Меняющийся вид курсора, когда система занята.
    - - Иконка корзины/мусорного ведра: Понятная метафора для удаления файла.
      - Значок дискеты для сохранения: Хотя дискеты уже не используются, эта метафора стала настолько привычной, что продолжает работать.
      - Естественный язык в ошибках: Вместо "Ошибка 404: Not Found" лучше написать "К сожалению, эта страница не найдена. Возможно, она была удалена или вы ошиблись в адресе".
      - Иконка лупы для поиска: Все понимают, что она означает "найти".
    - - Кнопка "Отмена" в диалоговом окне.
      - Кнопка "Назад" в браузере.
      - Функция "Отменить" (Undo) в текстовых редакторах или графических программах.
      - Корзина в компьютере: Удаленный файл можно восстановить, так как он сначала попадает в корзину.
    - - Подчеркнутый синий текст почти всегда означает ссылку.
      - Логотип сайта в левом верхнем углу обычно кликабелен и ведет на главную страницу.
      - Иконка "шестеренки" обычно ведет к настройкам.
      - Кнопка "Сохранить" и "Отмена" располагаются рядом, и их внешний вид соответствует ожиданиям.
    - - Подтверждение деструктивного действия: Всплывающее окно "Вы уверены, что хотите удалить этот файл?" перед безвозвратным удалением.
      - Валидация форм на лету: Сообщение "Пароль слишком короткий" появляется сразу при вводе, а не после отправки всей формы.
      - Неактивные кнопки: Кнопка "Отправить" неактивна, пока не заполнены все обязательные поля.
    - - Значки с подписями: Вместо того чтобы заставлять пользователя запоминать, что означает абстрактная иконка, рядом с ней есть текст.
      - История поиска и ранее посещенные страницы: Выпадающий список в поисковой строке.
      - Хлебные крошки: Показывают пройденный путь, не требуя от пользователя его запоминать.
      - Меню в программах: Все функции видны в меню, их не нужно держать в голове и вводить с клавиатуры (как в командной строке).
    - - Горячие клавиши: Ctrl+C / Ctrl+V для копирования и вставки.
      - Возможность настроить панель быстрого доступа в программах вроде Microsoft Word.
      - Шаблоны и предустановки, которые экономят время на повторяющихся настройках.
    - - Поисковая система Google: На главной странице почти ничего нет, кроме логотипа, строки поиска и двух кнопок. Это сфокусировано на одной задаче.
      - Чистые и простые формы без визуального шума и рекламы, мешающей заполнению.
      - Скрытие сложных настроек под кнопкой "Дополнительно", чтобы не перегружать новичка.
    - - Плохо: "Ошибка 0x80070005".
      - Хорошо: "Недостаточно прав для сохранения файла в эту папку. Сохраните файл в другую папку или обратитесь к администратору для получения прав."
      - Сообщение в форме: "Введен некорректный адрес электронной почты. Проверьте, есть ли в адресе символ @
    - - Контекстно-зависимая справка: При нажатии на кнопку "Справка" или F1 открывается статья, относящаяся к тому экрану, на котором находится пользователь.
      - Часто задаваемые вопросы (FAQ) и база знаний с пошаговыми инструкциями.
      - Чат-бот или служба поддержки, интегрированные прямо в интерфейс продукта.
  - - - 1. Воспринимаемость (Perceivable)
        — информация доступна всем органам чувств
        
        У всех изображений, иконок, графиков должен быть заполнен атрибут alt. Для декоративных картинок он должен быть пустым (alt="").
        
        Все видео должны иметь субтитры, а аудио-контент (подкасты) — текстовую расшифровку.
        
        Контент можно представить в разных форматах без потери информации (например, изменить цветовую схему, увеличить текст, использовать скринридер).
        
        Цвет не должен быть единственным способом передачи информации.
        Плохо: "Обязательные поля выделены красным".
        Хорошо: "Обязательные поля отмечены красным цветом и звездочкой".
      - 2. Управляемость (Operable)
        — можно использовать с клавиатуры
        
        Весь функционал сайта должен быть доступен с помощью клавиши Tab, Enter, Пробел и стрелок.
        
        Должен быть визуальный :focus-индикатор для текущего элемента.
        
        Если на сайте есть карусель, всплывающие окна или ограничения по времени на заполнение формы, пользователь должен иметь возможность приостановить, остановить или скрыть их, а также увеличить лимит времени.
      - 3. Понятность (Understandable)
        — интерфейс предсказуем
        
        Указывайте язык страницы в HTML (<html lang="ru">), чтобы скринридеры могли правильно его озвучить.
        
        Навигация по сайту должна быть последовательной. Элементы, которые выглядят одинаково, должны вести себя одинаково.
        
        Формы должны иметь четкие и понятные labels (подписи).
        
        Сообщения об ошибках должны быть конкретными и объяснять, как их исправить.
      - 4. Надёжность (Robust)
        — работает на разных устройствах
        Код должен быть "чистым" и соответствовать стандартам, чтобы современные и будущие технологии (особенно скринридеры) могли его правильно "прочитать" и интерпретировать.
        
        Использование семантического HTML (<header>, <nav>, <main>, <button>, <article>). Кнопка должна быть тегом <button>, а не <div> с кучей JavaScript.
        
        Правильное использование ARIA-атрибутов (Accessible Rich Internet Applications) там, где семантического HTML недостаточно. ARIA помогает описать роль, состояние и свойства элементов интерфейса для скринридеров.
        Пример: <div role="alert" aria-live="assertive">Ваше сообщение успешно отправлено</div> — скринридер сразу же объявит это сообщение, даже если оно появилось динамически.
- - - - Click maps — где кликают
      - Move maps — как двигают мышь
      - Scroll maps — докуда доскролливают
      - Attention maps — на что смотрят (eye tracking)
    - - Hotjar
      - Crazy Egg
      - Яндекс.Метрика (Вебвизор)
      - Microsoft Clarity (бесплатно!)
  - - - Движения мыши
      - Клики и тапы
      - Скроллинг
      - Заполнение форм (без паролей!)
      - Переходы между страницами
    - - После обнаружения аномалий в метриках
      - Высокий bounce rate на странице
      - Низкая конверсия в воронке
      - Много обращений в поддержку
    - - Rage clicks (яростные клики)
      - Короткие сессии с уходом
      - Незавершённые покупки
  - - - On-site surveys — опросы на сайте
      - Feedback widgets — кнопка "Оставить отзыв"
      - NPS surveys — оценка лояльности
      - Exit surveys — почему уходят
    - - Максимум 3-5 вопросов
      - В нужный момент (не при входе!)
      - Конкретные вопросы
      - Возможность пропустить
    - - Survicate
      - Qualaroo
      - Google Forms (бюджетно)
      - Typeform (красиво)
- - - - Математическая модель Якоба Нильсена:
        Формула обнаружения проблем: Found = 1 - (1 - L)^n
        где L — вероятность обнаружения проблемы одним пользователем (~31%), n — количество пользователей.
      - Почему именно 5:
        • 1 пользователь = ~31% проблем
        • 2 пользователя = ~55% проблем
        • 3 пользователя = ~70% проблем
        • 5 пользователей = ~85% проблем
        • 15 пользователей = ~100% проблем
      - Экономическая эффективность:
        После 5 пользователей каждый новый находит всё меньше уникальных проблем. Лучше провести 3 итерации по 5 человек, чем одну с 15.