UI/UX принципи десктопних застосунків

UI vs UX: фундаментальна різниця

Чому це важливо розуміти

Терміни "UI" та "UX" часто використовуються як синоніми, особливо у контексті вакансій ("UI/UX Designer") або обговорень дизайну. Проте це два принципово різні аспекти створення програмного забезпечення, і розуміння цієї різниці є критичним для побудови якісних застосунків.

User Interface (UI) — це те, що користувач бачить і з чим взаємодіє. Це візуальний шар застосунку: кнопки, поля введення, кольори, шрифти, іконки, анімації, розташування елементів на екрані. UI — це "зовнішність" програми. Якщо застосунок — це будинок, то UI — це фасад, двері, вікна, меблі всередині.

User Experience (UX) — це те, як користувач відчуває себе під час взаємодії з застосунком. Це емоційна та когнітивна реакція на використання програми: чи легко знайти потрібну функцію? Чи зрозуміло, що робить ця кнопка? Чи швидко завантажуються дані? Чи відчуває користувач контроль над процесом? UX — це "відчуття від проживання у будинку": чи зручно відкривати двері, чи добре освітлені кімнати, чи легко знайти вимикач світла у темряві.

Ключова відмінність: хороший UI не гарантує хороший UX. Застосунок може виглядати приголомшливо (бездоганна графіка, сучасні анімації, стильні кольори), але бути абсолютно незручним у використанні (незрозуміла навігація, повільні операції, відсутність зворотного зв'язку). І навпаки — застосунок з мінімалістичним, навіть "сірим" інтерфейсом може надавати чудовий UX завдяки продуманій логіці, швидкості роботи та передбачуваності.

Приклад: форма входу

Розглянемо просту форму входу (логін + пароль + кнопка "Увійти") з точки зору UI та UX:

UI-аспекти (візуальний дизайн):

• Чи використовується сучасний шрифт без зарубок (sans-serif) для читабельності?
• Чи достатній контраст між текстом та фоном (мінімум 4.5:1 за WCAG)?
• Чи мають поля введення чіткі межі (border) або підкреслення?
• Чи є placeholder-текст ("Введіть email...") сірого кольору?
• Чи змінює кнопка колір при наведенні миші (hover state)?
• Чи використовується іконка "замок" для поля пароля?

UX-аспекти (досвід взаємодії):

• Чи автоматично фокусується перше поле при відкритті форми?
• Чи можна натиснути Enter для відправки форми замість кліку на кнопку?
• Чи показується повідомлення про помилку під полем, де сталася помилка, а не у модальному вікні?
• Чи можна переключатись між полями через Tab?
• Чи є кнопка "Показати пароль" (eye icon) для перевірки введеного?
• Чи блокується кнопка "Увійти" під час запиту до сервера (з індикатором завантаження)?
• Чи зберігається введений логін після помилки, щоб не вводити заново?

Бачите різницю? UI — це "як виглядає", UX — це "як працює і як відчувається". Обидва аспекти критично важливі, і у цій статті ми розглянемо принципи, що стосуються обох.

Фундаментальні закони взаємодії

Перш ніж перейти до конкретних технік дизайну, необхідно зрозуміти психологічні та когнітивні закони, що керують взаємодією людини з інтерфейсом. Ці закони — не абстрактна теорія, а емпірично підтверджені принципи, що використовуються у дизайні кожного успішного застосунку.

Закон Фіттса (Fitts's Law)

Формулювання: Час, необхідний для досягнення цілі (наприклад, натискання кнопки мишею), залежить від відстані до цілі та розміру цілі.

Математична модель:

T = a + b × log₂(D/W + 1)

де T — час руху, D — відстань до цілі, W — ширина цілі, a та b — емпіричні константи.

Практичні наслідки для UI:

1. Великі кнопки натискаються швидше за маленькі. Первинна дія (Primary Action) має бути найбільшою кнопкою на екрані. Наприклад, у діалозі підтвердження видалення — кнопка "Скасувати" має бути більшою за "Видалити" (або принаймні однакового розміру), щоб запобігти випадковому видаленню.
2. Елементи, що часто використовуються, мають бути близько один до одного. Якщо користувач постійно переключається між двома контролами (наприклад, список файлів та панель попереднього перегляду), вони мають бути поруч, а не на протилежних кінцях екрана.
3. Кути та краї екрану — "нескінченно великі цілі". Курсор не може вийти за межу екрану, тому елементи у кутах (наприклад, кнопка "Закрити" у правому верхньому куті Windows-вікна) досягаються миттєво — достатньо "кинути" курсор у кут. Це одна з причин, чому macOS розміщує меню у верхній частині екрану, а не у вікні застосунку.

<StackPanel Margin="20" Spacing="20">
  <TextBlock Text="Первинна дія (Primary) — велика кнопка:"
             Foreground="Gray" FontSize="13"/>
  <Button Content="Зберегти зміни"
          Padding="24,12"
          FontSize="16"
          FontWeight="Bold"
          Background="#3B82F6"
          Foreground="White"
          HorizontalAlignment="Left"/>

  <TextBlock Text="Вторинна дія (Secondary) — менша кнопка:"
             Foreground="Gray" FontSize="13" Margin="0,12,0,0"/>
  <Button Content="Скасувати"
          Padding="16,8"
          FontSize="14"
          Background="Transparent"
          BorderBrush="#6B7280"
          BorderThickness="1"
          HorizontalAlignment="Left"/>

  <TextBlock Text="Деструктивна дія (Destructive) — червона, але не найбільша:"
             Foreground="Gray" FontSize="13" Margin="0,12,0,0"/>
  <Button Content="Видалити назавжди"
          Padding="16,8"
          FontSize="14"
          Background="#EF4444"
          Foreground="White"
          HorizontalAlignment="Left"/>
</StackPanel>

Закон Хіка (Hick's Law)

Формулювання: Час, необхідний для прийняття рішення, зростає логарифмічно зі збільшенням кількості варіантів вибору.

Математична модель:

T = b × log₂(n + 1)

де T — час рішення, n — кількість варіантів, b — емпірична константа.

Практичні наслідки для UI:

1. Обмежуйте кількість опцій у меню та діалогах. Якщо у вас 20 пунктів меню на одному рівні — користувач витратить значно більше часу на пошук потрібного, ніж якби ви згрупували їх у 4-5 категорій по 4-5 пунктів. Це одна з причин, чому сучасні застосунки використовують ієрархічні меню та групування.
2. Прогресивне розкриття (Progressive Disclosure). Не показуйте всі можливі налаштування одразу — приховайте просунуті опції за кнопкою "Додатково" або Expander. Наприклад, діалог "Відкрити файл" у Windows спочатку показує лише основні поля, а кнопка "Параметри" розкриває фільтри та додаткові налаштування.
3. Значення за замовчуванням (Smart Defaults). Якщо 90% користувачів обирають одну й ту саму опцію — зробіть її обраною за замовчуванням. Це зменшує когнітивне навантаження: користувач може просто натиснути "Далі", не аналізуючи всі варіанти.

<StackPanel Margin="20" Spacing="16">
  <TextBlock Text="Основні налаштування (завжди видимі):"
             FontWeight="Bold" FontSize="14"/>
  
  <StackPanel Spacing="8">
    <CheckBox Content="Автоматично зберігати зміни" IsChecked="True"/>
    <CheckBox Content="Показувати сповіщення"/>
    <CheckBox Content="Темна тема" IsChecked="True"/>
  </StackPanel>

  <Separator Margin="0,8"/>

  <Expander Header="Додаткові налаштування" IsExpanded="False">
    <StackPanel Spacing="8" Margin="0,12,0,0">
      <CheckBox Content="Увімкнути телеметрію"/>
      <CheckBox Content="Автоматичне оновлення"/>
      <CheckBox Content="Показувати підказки для початківців" IsChecked="True"/>
      <CheckBox Content="Логування діагностики"/>
      <CheckBox Content="Експериментальні функції"/>
    </StackPanel>
  </Expander>
</StackPanel>

Закон Міллера (Miller's Law)

Формулювання: Середня людина може утримувати у короткочасній пам'яті 7 ± 2 елементи одночасно.

Це не означає, що у меню має бути рівно 7 пунктів — це означає, що людина може активно обробляти обмежену кількість інформації у конкретний момент часу. Якщо ви показуєте список з 50 елементів без групування — користувач не зможе "охопити" його цілком і буде змушений сканувати послідовно.

Практичні наслідки для UI:

1. Групуйте елементи у смислові блоки. Замість списку з 15 налаштувань — 3 групи по 5. Замість 20 кнопок на панелі інструментів — 4-5 груп, розділених Separator.
2. Використовуйте "chunking" (розбиття на шматки). Телефонний номер +380501234567 важко запам'ятати, але +380 50 123 45 67 — легко, бо розбитий на 4 шматки. Те саме у UI: довгі списки розбивайте на категорії, довгі форми — на кроки (wizard).
3. Обмежуйте кількість одночасно видимих елементів навігації. Якщо у вас 30 розділів застосунку — не робіть 30 кнопок у sidebar. Зробіть 5-7 основних категорій, а всередині кожної — підрозділи.

<StackPanel Margin="20" Spacing="20">
  <TextBlock Text="Без групування (важко сприймати):"
             FontWeight="Bold" FontSize="14"/>
  <StackPanel Spacing="4">
    <CheckBox Content="Опція 1"/>
    <CheckBox Content="Опція 2"/>
    <CheckBox Content="Опція 3"/>
    <CheckBox Content="Опція 4"/>
    <CheckBox Content="Опція 5"/>
    <CheckBox Content="Опція 6"/>
    <CheckBox Content="Опція 7"/>
    <CheckBox Content="Опція 8"/>
    <CheckBox Content="Опція 9"/>
    <CheckBox Content="Опція 10"/>
  </StackPanel>

  <Separator/>

  <TextBlock Text="З групуванням (легко сприймати):"
             FontWeight="Bold" FontSize="14"/>
  
  <Border BorderBrush="#374151" BorderThickness="1" Padding="12" CornerRadius="4">
    <StackPanel Spacing="4">
      <TextBlock Text="Група A: Основні" Foreground="#9CA3AF" FontSize="12"/>
      <CheckBox Content="Опція 1"/>
      <CheckBox Content="Опція 2"/>
      <CheckBox Content="Опція 3"/>
    </StackPanel>
  </Border>

  <Border BorderBrush="#374151" BorderThickness="1" Padding="12" CornerRadius="4">
    <StackPanel Spacing="4">
      <TextBlock Text="Група B: Додаткові" Foreground="#9CA3AF" FontSize="12"/>
      <CheckBox Content="Опція 4"/>
      <CheckBox Content="Опція 5"/>
      <CheckBox Content="Опція 6"/>
    </StackPanel>
  </Border>

  <Border BorderBrush="#374151" BorderThickness="1" Padding="12" CornerRadius="4">
    <StackPanel Spacing="4">
      <TextBlock Text="Група C: Експериментальні" Foreground="#9CA3AF" FontSize="12"/>
      <CheckBox Content="Опція 7"/>
      <CheckBox Content="Опція 8"/>
      <CheckBox Content="Опція 9"/>
      <CheckBox Content="Опція 10"/>
    </StackPanel>
  </Border>
</StackPanel>

Закон Якоба (Jakob's Law)

Формулювання: Користувачі проводять більшість свого часу в інших застосунках, а не у вашому. Тому вони очікують, що ваш застосунок працюватиме так само, як ті, до яких вони звикли.

Цей закон сформулював Якоб Нільсен (Jakob Nielsen), один із піонерів usability-досліджень. Суть проста: не винаходьте велосипед там, де існують усталені конвенції. Якщо у 99% застосунків Ctrl + S зберігає файл — не робіть це комбінацією для "Пошуку". Якщо у всіх текстових редакторах Ctrl + Z скасовує останню дію — не змінюйте цю поведінку.

Практичні наслідки для UI:

1. Дотримуйтесь платформних конвенцій. У Windows кнопка "OK" розташована зліва від "Скасувати", у macOS — справа. Кнопка закриття вікна у Windows — справа вгорі (червоний хрестик), у macOS — зліва вгорі (червоне коло). Не порушуйте ці правила без вагомої причини.
2. Використовуйте стандартні іконки для стандартних дій. Іконка "дискета" для збереження, "лупа" для пошуку, "корзина" для видалення, "шестерня" для налаштувань. Навіть якщо дискети вже не існують — користувачі знають, що ця іконка означає "зберегти".
3. Стандартні клавіатурні скорочення. Ctrl + C / V / X для копіювання/вставки/вирізання, Ctrl + F для пошуку, F5 для оновлення, Alt + F4 для закриття вікна (Windows). Не перевизначайте їх.

Принципи візуальної ієрархії

Візуальна ієрархія — це спосіб організації елементів інтерфейсу таким чином, щоб користувач інстинктивно розумів, що є найважливішим, що другорядним, а що — допоміжним. Без чіткої ієрархії інтерфейс перетворюється на "візуальний шум", де всі елементи конкурують за увагу одночасно.

Розмір та вага шрифту

Найпростіший спосіб створити ієрархію — використовувати різні розміри шрифту для різних рівнів важливості. Заголовок має бути більшим за основний текст, підзаголовок — меншим за заголовок, але більшим за основний текст. Це інтуїтивно зрозуміло: більше = важливіше.

Типова шкала розмірів для десктопних застосунків:

<StackPanel Margin="20" Spacing="16">
  <TextBlock Text="Заголовок сторінки (H1)"
             FontSize="28"
             FontWeight="Bold"/>
  
  <TextBlock Text="Це основний заголовок екрану або діалогу. Він найбільший і найжирніший, тому привертає увагу першим."
             FontSize="14"
             Foreground="#9CA3AF"
             TextWrapping="Wrap"/>

  <TextBlock Text="Заголовок розділу (H2)"
             FontSize="20"
             FontWeight="SemiBold"
             Margin="0,12,0,0"/>
  
  <TextBlock Text="Цей текст позначає початок нового розділу або групи контролів. Він менший за H1, але все ще виділяється."
             FontSize="14"
             Foreground="#9CA3AF"
             TextWrapping="Wrap"/>

  <TextBlock Text="Підзаголовок (H3)"
             FontSize="16"
             FontWeight="SemiBold"
             Margin="0,12,0,0"/>
  
  <TextBlock Text="Основний текст (Body)"
             FontSize="14"
             TextWrapping="Wrap">
    <Run>Це звичайний текст для читання. Він має стандартний розмір (14-15px) і вагу Regular. Більшість тексту у застосунку має бути саме такого розміру.</Run>
  </TextBlock>

  <TextBlock Text="Допоміжний текст (Caption): Створено 10 квітня 2026 о 10:08"
             FontSize="12"
             Foreground="#6B7280"
             Margin="0,8,0,0"/>
</StackPanel>

Колір та контраст

Колір — другий за важливістю інструмент створення ієрархії. Елементи з вищим контрастом привертають більше уваги, ніж елементи з низьким контрастом.

Правило трьох рівнів контрасту:

1. Високий контраст (Primary Text): Основний текст, заголовки, важливі дані. Контраст 7:1 або вище (WCAG AAA). Колір: чорний на світлому фоні, білий на темному.
2. Середній контраст (Secondary Text): Підписи, описи, метадані. Контраст 4.5:1 (WCAG AA). Колір: темно-сірий (#374151) на світлому, світло-сірий (#D1D5DB) на темному.
3. Низький контраст (Tertiary Text): Placeholder-текст, відключені елементи, дуже другорядна інформація. Контраст 3:1-4:1. Колір: сірий (#9CA3AF).

<StackPanel Margin="20" Spacing="12">
  <Border BorderBrush="#E5E7EB" BorderThickness="1" Padding="16" CornerRadius="8">
    <StackPanel Spacing="8">
      <TextBlock Text="Назва продукту"
                 FontSize="18"
                 FontWeight="Bold"
                 Foreground="#111827"/>
      
      <TextBlock Text="Короткий опис продукту, що пояснює його призначення та основні характеристики."
                 FontSize="14"
                 Foreground="#374151"
                 TextWrapping="Wrap"/>
      
      <TextBlock Text="Додано: 10 квітня 2026"
                 FontSize="12"
                 Foreground="#9CA3AF"/>
    </StackPanel>
  </Border>

  <TextBlock Text="Пояснення:"
             FontWeight="SemiBold"
             Margin="0,8,0,0"/>
  <StackPanel Spacing="4">
    <TextBlock FontSize="13">
      <Run Foreground="#111827" FontWeight="Bold">■</Run>
      <Run Foreground="#6B7280"> Високий контраст (#111827) — назва продукту</Run>
    </TextBlock>
    <TextBlock FontSize="13">
      <Run Foreground="#374151" FontWeight="Bold">■</Run>
      <Run Foreground="#6B7280"> Середній контраст (#374151) — опис</Run>
    </TextBlock>
    <TextBlock FontSize="13">
      <Run Foreground="#9CA3AF" FontWeight="Bold">■</Run>
      <Run Foreground="#6B7280"> Низький контраст (#9CA3AF) — метадані</Run>
    </TextBlock>
  </StackPanel>
</StackPanel>

Відступи та групування (Proximity)

Елементи, що розташовані близько один до одного, сприймаються як пов'язані. Елементи, що розташовані далеко, сприймаються як окремі групи. Це один із принципів гештальт-психології, що називається Proximity (близькість).

Практичні правила відступів:

• Всередині групи: 4-8px між пов'язаними елементами (наприклад, між Label та TextBox).
• Між групами: 16-24px між різними групами контролів.
• Між розділами: 32-48px між великими розділами екрану.

<StackPanel Margin="20" Spacing="32">
  <!-- Група 1: Персональні дані -->
  <StackPanel Spacing="8">
    <TextBlock Text="Персональні дані"
               FontSize="16"
               FontWeight="SemiBold"/>
    
    <StackPanel Spacing="4">
      <TextBlock Text="Ім'я" FontSize="13" Foreground="#6B7280"/>
      <TextBox Padding="8,6" Text="Іван"/>
    </StackPanel>

    <StackPanel Spacing="4">
      <TextBlock Text="Прізвище" FontSize="13" Foreground="#6B7280"/>
      <TextBox Padding="8,6" Text="Петренко"/>
    </StackPanel>
  </StackPanel>

  <!-- Група 2: Контактна інформація (відступ 32px від попередньої групи) -->
  <StackPanel Spacing="8">
    <TextBlock Text="Контактна інформація"
               FontSize="16"
               FontWeight="SemiBold"/>
    
    <StackPanel Spacing="4">
      <TextBlock Text="Email" FontSize="13" Foreground="#6B7280"/>
      <TextBox Padding="8,6" Text="ivan@example.com"/>
    </StackPanel>

    <StackPanel Spacing="4">
      <TextBlock Text="Телефон" FontSize="13" Foreground="#6B7280"/>
      <TextBox Padding="8,6" Text="+380 50 123 45 67"/>
    </StackPanel>
  </StackPanel>
</StackPanel>

Принципи Гештальту у UI-дизайні

Гештальт-психологія — це напрямок психології, що вивчає, як людський мозок сприймає візуальні об'єкти як цілісні структури, а не як набір окремих елементів. Ці принципи критично важливі для UI-дизайну, бо вони пояснюють, як користувач "читає" інтерфейс.

Принцип близькості (Proximity)

Ми вже згадували його вище: об'єкти, що розташовані близько, сприймаються як група. Це найпростіший і найпотужніший принцип групування у UI.

Принцип подібності (Similarity)

Елементи, що виглядають подібно (однаковий колір, форма, розмір, стиль), сприймаються як пов'язані, навіть якщо вони розташовані далеко один від одного.

Приклад: Якщо всі кнопки деструктивних дій (видалення, скасування) у вашому застосунку червоні — користувач швидко навчиться асоціювати червоний колір з небезпечними діями. Якщо раптом одна кнопка "Зберегти" буде червоною — це порушить очікування і може призвести до помилки.

<StackPanel Margin="20" Spacing="20">
  <TextBlock Text="Правильно: всі первинні дії — синього кольору"
             FontWeight="SemiBold"/>
  <StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="Зберегти" Padding="16,8" Background="#3B82F6" Foreground="White"/>
    <Button Content="Застосувати" Padding="16,8" Background="#3B82F6" Foreground="White"/>
    <Button Content="Продовжити" Padding="16,8" Background="#3B82F6" Foreground="White"/>
  </StackPanel>

  <TextBlock Text="Правильно: всі деструктивні дії — червоного кольору"
             FontWeight="SemiBold" Margin="0,12,0,0"/>
  <StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="Видалити" Padding="16,8" Background="#EF4444" Foreground="White"/>
    <Button Content="Скасувати підписку" Padding="16,8" Background="#EF4444" Foreground="White"/>
    <Button Content="Очистити все" Padding="16,8" Background="#EF4444" Foreground="White"/>
  </StackPanel>

  <TextBlock Text="Неправильно: змішані кольори без логіки"
             FontWeight="SemiBold" Foreground="#EF4444" Margin="0,12,0,0"/>
  <StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="Зберегти" Padding="16,8" Background="#EF4444" Foreground="White"/>
    <Button Content="Видалити" Padding="16,8" Background="#3B82F6" Foreground="White"/>
    <Button Content="Скасувати" Padding="16,8" Background="#10B981" Foreground="White"/>
  </StackPanel>
</StackPanel>

Принцип продовження (Continuity)

Око природно слідує за лініями, кривими та напрямками. Елементи, що розташовані вздовж лінії або кривої, сприймаються як пов'язані.

Приклад у UI: Форма з вертикальним розташуванням полів (Label зверху, TextBox знизу, Label зверху, TextBox знизу) створює вертикальну "лінію читання". Користувач інстинктивно рухається зверху вниз. Якщо раптом одне поле розташоване горизонтально (Label зліва, TextBox справа) — це порушує ритм і змушує користувача зупинитись.

Принцип замкнутості (Closure)

Мозок схильний "добудовувати" неповні форми до цілісних об'єктів. Ми бачимо коло, навіть якщо намальовано лише три чверті кола.

Приклад у UI: Іконка "гамбургер-меню" (три горизонтальні лінії) не є буквальним зображенням меню, але мозок "добудовує" асоціацію з списком. Іконка "лупа" для пошуку — це не буквальна лупа, але форма кола з ручкою миттєво розпізнається.

Принцип фігури та фону (Figure-Ground)

Мозок автоматично розділяє візуальне поле на "фігуру" (об'єкт уваги) та "фон" (контекст). Елементи з вищим контрастом, чіткими межами та меншою площею сприймаються як фігура.

Приклад у UI: Модальне вікно (діалог) з напівпрозорим темним фоном позаду. Діалог — це фігура (світлий, чіткий, у центрі), фон — це контекст (темний, розмитий, неактивний). Це чітко сигналізує користувачу: "зосередься на діалозі, решта зараз не важлива".

<Grid>
  <!-- Фон: напівпрозорий темний шар -->
  <Border Background="#80000000" Opacity="0.6">
    <TextBlock Text="Основний вміст застосунку (неактивний)"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               FontSize="18"
               Foreground="#6B7280"/>
  </Border>

  <!-- Фігура: модальний діалог -->
  <Border Width="320" Height="180"
          Background="White"
          CornerRadius="12"
          Padding="24"
          HorizontalAlignment="Center"
          VerticalAlignment="Center">
    <StackPanel Spacing="16">
      <TextBlock Text="Підтвердження дії"
                 FontSize="18"
                 FontWeight="Bold"
                 Foreground="#111827"/>
      
      <TextBlock Text="Ви впевнені, що хочете видалити цей елемент? Цю дію неможливо скасувати."
                 FontSize="14"
                 Foreground="#374151"
                 TextWrapping="Wrap"/>
      
      <StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Right" Margin="0,8,0,0">
        <Button Content="Скасувати" Padding="16,8" Background="Transparent" BorderBrush="#D1D5DB" BorderThickness="1"/>
        <Button Content="Видалити" Padding="16,8" Background="#EF4444" Foreground="White"/>
      </StackPanel>
    </StackPanel>
  </Border>
</Grid>

Affordance та Feedback: як інтерфейс "розмовляє"

Affordance: "підказки до дії"

Affordance (можливість дії) — це властивість об'єкта, що підказує, як з ним взаємодіяти. Кнопка виглядає як щось, що можна натиснути. Поле введення виглядає як щось, куди можна ввести текст. Повзунок виглядає як щось, що можна перетягнути.

Дон Норман (Don Norman), автор книги "The Design of Everyday Things", розрізняє два типи affordance:

1. Реальний affordance (Real Affordance): Фізична можливість дії. Кнопка у WPF реально може бути натиснута — вона реагує на клік.
2. Сприйманий affordance (Perceived Affordance): Візуальна підказка, що дія можлива. Кнопка виглядає як щось, що можна натиснути (опукла форма, тінь, hover-ефект).

Проблема плоского дизайну (Flat Design): У прагненні до мінімалізму багато сучасних інтерфейсів втратили сприйманий affordance. Коли все плоске — важко зрозуміти, що є кнопкою, а що просто текстом. Рішення — використовувати інтерактивні стани (hover, pressed) для відновлення affordance.

<StackPanel Margin="20" Spacing="16">
  <TextBlock Text="Кнопка з чітким affordance (виглядає клікабельною):"
             FontWeight="SemiBold"/>
  <Button Content="Натисни мене"
          Padding="20,12"
          FontSize="15"
          Background="#3B82F6"
          Foreground="White"
          BorderThickness="0"
          CornerRadius="6"
          HorizontalAlignment="Left"/>

  <TextBlock Text="Текст без affordance (не виглядає клікабельним):"
             FontWeight="SemiBold" Margin="0,12,0,0"/>
  <TextBlock Text="Натисни мене"
             FontSize="15"
             Foreground="#3B82F6"
             HorizontalAlignment="Left"/>

  <TextBlock Text="Гіперпосилання (affordance через підкреслення):"
             FontWeight="SemiBold" Margin="0,12,0,0"/>
  <TextBlock HorizontalAlignment="Left">
    <Hyperlink NavigateUri="https://example.com">
      <Run Text="Натисни мене" FontSize="15"/>
    </Hyperlink>
  </TextBlock>
</StackPanel>

Feedback: зворотний зв'язок

Feedback — це реакція системи на дію користувача. Кожна дія має викликати миттєвий та зрозумілий зворотний зв'язок. Без feedback користувач не знає, чи система "почула" його дію, чи потрібно натиснути ще раз, чи щось пішло не так.

Типи feedback у десктопних застосунках:

1. Візуальний feedback: Зміна кольору кнопки при наведенні/натисканні, анімація завантаження, прогрес-бар, зміна курсору (стрілка → рука → годинник).
2. Текстовий feedback: Повідомлення про успіх ("Файл збережено"), помилку ("Невірний формат email"), попередження ("Незбережені зміни будуть втрачені").
3. Звуковий feedback: Звук при натисканні кнопки, звук помилки (у Windows — "ding"), звук сповіщення. Рідко використовується у десктопних застосунках, але критичний для accessibility (користувачі зі слабким зором).
4. Тактильний feedback: Вібрація (на мобільних пристроях). Не застосовується у десктопних застосунках.

Правило 0.1-1-10 секунд (Jakob Nielsen):

• 0.1 секунди: Межа миттєвої реакції. Якщо дія виконується швидше — feedback не потрібен (користувач відчуває пряму маніпуляцію).
• 1 секунда: Межа безперервного потоку думок. Якщо дія виконується довше — покажіть індикатор "система працює" (курсор-годинник, спінер).
• 10 секунд: Межа утримання уваги. Якщо дія виконується довше — покажіть прогрес-бар з відсотками або часом, що залишився.

<StackPanel Margin="20" Spacing="20">
  <TextBlock Text="Дія виконується < 1 сек — простий спінер:"
             FontWeight="SemiBold"/>
  <StackPanel Orientation="Horizontal" Spacing="12">
    <ProgressBar IsIndeterminate="True" Width="200" Height="4"/>
    <TextBlock Text="Завантаження..." Foreground="#6B7280" VerticalAlignment="Center"/>
  </StackPanel>

  <TextBlock Text="Дія виконується > 10 сек — прогрес-бар з відсотками:"
             FontWeight="SemiBold" Margin="0,12,0,0"/>
  <StackPanel Spacing="8">
    <StackPanel Orientation="Horizontal" Spacing="8">
      <TextBlock Text="Завантаження файлів..." FontSize="14"/>
      <TextBlock Text="67%" FontWeight="Bold" Foreground="#3B82F6"/>
    </StackPanel>
    <ProgressBar Value="67" Maximum="100" Height="8"/>
    <TextBlock Text="2 з 3 файлів завантажено" FontSize="12" Foreground="#6B7280"/>
  </StackPanel>

  <TextBlock Text="Успішне завершення — зелене повідомлення:"
             FontWeight="SemiBold" Margin="0,12,0,0"/>
  <Border Background="#D1FAE5" BorderBrush="#10B981" BorderThickness="1" 
          Padding="12" CornerRadius="6">
    <StackPanel Orientation="Horizontal" Spacing="8">
      <TextBlock Text="✓" FontSize="16" Foreground="#10B981" FontWeight="Bold"/>
      <TextBlock Text="Файл успішно збережено" Foreground="#065F46" VerticalAlignment="Center"/>
    </StackPanel>
  </Border>

  <TextBlock Text="Помилка — червоне повідомлення:"
             FontWeight="SemiBold" Margin="0,12,0,0"/>
  <Border Background="#FEE2E2" BorderBrush="#EF4444" BorderThickness="1" 
          Padding="12" CornerRadius="6">
    <StackPanel Orientation="Horizontal" Spacing="8">
      <TextBlock Text="✕" FontSize="16" Foreground="#EF4444" FontWeight="Bold"/>
      <TextBlock Text="Не вдалося зберегти файл. Перевірте права доступу." 
                 Foreground="#991B1B" TextWrapping="Wrap" VerticalAlignment="Center"/>
    </StackPanel>
  </Border>
</StackPanel>

Доступність (Accessibility)

Доступність — це не "додаткова функція", а фундаментальна вимога до будь-якого професійного застосунку. Приблизно 15% населення світу має ту чи іншу форму інвалідності (за даними WHO). Це означає, що кожен сьомий потенційний користувач вашого застосунку може мати проблеми зі зором, слухом, моторикою або когнітивними здібностями.

WCAG: стандарт доступності

WCAG (Web Content Accessibility Guidelines) — це міжнародний стандарт доступності, розроблений W3C. Хоча він створювався для веб-контенту, його принципи повністю застосовні до десктопних застосунків.

WCAG базується на чотирьох принципах (POUR):

Контраст кольорів

Один із найпростіших і найважливіших аспектів доступності — достатній контраст між текстом та фоном. WCAG визначає два рівні:

• WCAG AA (мінімальний): Контраст 4.5:1 для звичайного тексту, 3:1 для великого тексту (18pt+ або 14pt+ жирний).
• WCAG AAA (розширений): Контраст 7:1 для звичайного тексту, 4.5:1 для великого тексту.

Приклади контрасту:

Клавіатурна навігація

Кожен елемент інтерфейсу, з яким можна взаємодіяти мишею, має бути доступний через клавіатуру. Це критично важливо не лише для користувачів з обмеженою моторикою, а й для "power users", що віддають перевагу клавіатурі.

Основні клавіші навігації:

• Tab — перехід до наступного елемента
• Shift + Tab — перехід до попереднього елемента
• Enter або Space — активація кнопки/чекбоксу
• ↑ ↓ ← → — навігація у списках, меню, слайдерах
• Esc — закриття діалогу, скасування дії
• Alt + підкреслена літера — активація контролу через AccessKey

Порядок фокусу (Tab Order): Елементи мають отримувати фокус у логічному порядку — зверху вниз, зліва направо (для LTR-мов). У WPF порядок фокусу визначається властивістю TabIndex (за замовчуванням — порядок у XAML).

<StackPanel Margin="20" Spacing="16">
  <TextBlock Text="Натисніть Tab для переходу між полями:"
             FontWeight="SemiBold"/>
  
  <StackPanel Spacing="4">
    <TextBlock Text="Ім'я (Tab Index: 0)" FontSize="13" Foreground="#6B7280"/>
    <TextBox TabIndex="0" Padding="8,6"/>
  </StackPanel>

  <StackPanel Spacing="4">
    <TextBlock Text="Прізвище (Tab Index: 1)" FontSize="13" Foreground="#6B7280"/>
    <TextBox TabIndex="1" Padding="8,6"/>
  </StackPanel>

  <StackPanel Spacing="4">
    <TextBlock Text="Email (Tab Index: 2)" FontSize="13" Foreground="#6B7280"/>
    <TextBox TabIndex="2" Padding="8,6"/>
  </StackPanel>

  <Button Content="Відправити (Tab Index: 3)"
          TabIndex="3"
          Padding="16,8"
          Background="#3B82F6"
          Foreground="White"
          HorizontalAlignment="Left"
          Margin="0,8,0,0"/>
</StackPanel>

Практичні завдання

Підсумок

Що ми вивчили у цій статті

У цій статті ми розглянули фундаментальні принципи UI/UX дизайну, що застосовуються до десктопних застосунків.

UI vs UX — це не синоніми: UI — це візуальний шар (що користувач бачить), UX — це досвід взаємодії (що користувач відчуває). Хороший UI не гарантує хороший UX, і навпаки.

Закони взаємодії — емпірично підтверджені принципи, що керують поведінкою користувачів: Закон Фіттса (великі кнопки натискаються швидше), Закон Хіка (більше опцій = довше рішення), Закон Міллера (7±2 елементи у короткочасній пам'яті), Закон Якоба (користувачі очікують стандартної поведінки).

Візуальна ієрархія створюється через розмір шрифту, вагу, колір, контраст та відступи. Три рівні контрасту: високий (основний текст), середній (вторинний текст), низький (допоміжний текст). Групування через відступи (Proximity) — 4-8px всередині групи, 16-24px між групами, 32-48px між розділами.

Принципи Гештальту пояснюють, як мозок сприймає візуальні об'єкти: Proximity (близькість), Similarity (подібність), Continuity (продовження), Closure (замкнутість), Figure-Ground (фігура та фон).

Affordance та Feedback — ключові UX-концепції: affordance підказує, як взаємодіяти з елементом, feedback підтверджує, що дія виконана. Правило 0.1-1-10 секунд визначає, коли потрібен індикатор завантаження.

Доступність (Accessibility) — не опція, а вимога. WCAG визначає стандарти: контраст мінімум 4.5:1 (AA) або 7:1 (AAA), повна клавіатурна навігація, логічний Tab Order, текстові альтернативи для нетекстового контенту.

Що далі

У наступній статті ми перейдемо до Dependency Properties — системи властивостей WPF, що є фундаментом для Data Binding, стилів, анімацій та всього, що робить WPF потужним. Розуміння UI/UX принципів допоможе вам приймати правильні рішення при проєктуванні інтерфейсів на основі цих технологій.