> For the complete documentation index, see [llms.txt](https://sallyit.gitbook.io/akademiait/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sallyit.gitbook.io/akademiait/obuchenie/den-8/lekcii/ui-ux-dizain.md).

# UI/UX дизайн

<mark style="color:orange;">**Пользовательский интерфейс**</mark> (UI) — это пространство, в котором происходит взаимодействие между пользователем и цифровым продуктом, будь то веб-сайт, мобильное приложение, программное обеспечение и т. д. UI включает в себя все визуальные элементы, с которыми взаимодействует пользователь: кнопки, иконки, текстовые поля, шрифты, цветовые схемы и т.д.

<mark style="color:orange;">**Принципы проектирования пользовательского интерфейса (UI/UX)**</mark>

1. Человек-ориентированность:

* Пользовательский интерфейс должен быть создан с учётом потребностей, желаний и ограничений конечных пользователей. Пользователь должен быть в центре процесса проектирования.

2.Простота и ясность:

* Интерфейс должен быть простым и понятным. Каждая функция должна быть легко доступна, а элементы интерфейса должны быть интуитивно понятными.

3.Последовательность:

* Весь интерфейс должен быть последовательным. Это касается использования одинаковых шрифтов, цветовой схемы, иконок, стилей кнопок и других визуальных элементов. Последовательность помогает пользователям быстрее адаптироваться к интерфейсу.

4.Обратная связь:

* Важный аспект хорошего дизайна — предоставление пользователю обратной связи на его действия. Например, кнопки должны визуально изменяться при нажатии, чтобы пользователь знал, что действие было успешно выполнено.

5.Доступность:

* Интерфейс должен быть доступен для как можно большего числа людей, включая людей с ограниченными возможностями. Это может включать поддержку экранных дикторов, использование контрастных цветовых схем, масштабируемых шрифтов и т.д.

6.Минимализм:

* Удаление всех ненужных элементов и упрощение интерфейса. Это помогает уменьшить когнитивную нагрузку на пользователя и облегчает его взаимодействие с продуктом.

7.Предсказуемость:

* Действия пользователя должны приводить к ожидаемым результатам. Например, нажатие на логотип обычно ведёт на главную страницу.

8.Гибкость и эффективность:

* Интерфейс должен предоставлять различные способы выполнения задач, позволяя как новичкам, так и опытным пользователям работать эффективно. Например, использование горячих клавиш для опытных пользователей.

<mark style="color:orange;">**Примеры хорошего и плохого дизайна интерфейса**</mark>

Пример хорошего дизайна интерфейса:

1. Google Search:

* Простота: Минималистичный интерфейс с одной строкой поиска.
* Обратная связь: Поиск начинается сразу после ввода текста.
* Доступность: Поддержка множества языков и возможностей для людей с ограниченными возможностями.

2.Apple iOS:

* Последовательность: Единый дизайн и логика использования на всех устройствах.
* Интуитивность: Простые жесты и навигация.
* Обратная связь: Анимации и звуки, которые подтверждают действия пользователя.

Пример плохого дизайна интерфейса:

3.MySpace (в поздние годы):

* Перегруженность: Слишком много элементов на экране, что затрудняет поиск нужной информации.
* Недостаток последовательности: Пользователи могли полностью изменять дизайн страниц, что приводило к неконсистентности и путанице.
* Сложность навигации: Непонятная структура и сложная навигация по сайту.

4.Windows 8:

* Непредсказуемость: Пользователи испытывали трудности с переходом между традиционным рабочим столом и новым интерфейсом плиток.
* Отсутствие гибкости: Ограниченные возможности для кастомизации интерфейса.
* Сложность использования: Многофункциональные элементы интерфейса были сложными для понимания и использования новичками.

<mark style="color:orange;">**Анализ usability**</mark>

Usability (удобство использования) — это мера, показывающая, насколько эффективным, действенным и удовлетворительным является интерфейс для пользователей.

<mark style="color:orange;">**Анализ удобства использования включает следующие этапы:**</mark>

1.Тестирование с пользователями:

* Пользователи выполняют определённые задачи, а разработчики наблюдают за их действиями и собирают данные о том, насколько легко и быстро они справляются с задачами.

2.Анализ метрик:

* Включает анализ таких метрик, как время выполнения задачи, количество ошибок, удовлетворённость пользователей и т.д.

3.Оценка интуитивности:

* Проверяется, насколько интерфейс понятен пользователю без необходимости в инструкциях или обучении.

4.Проверка доступности:

* Оценивается, насколько интерфейс доступен для пользователей с различными физическими и когнитивными ограничениями.

5.Исправление ошибок и улучшение

* По результатам анализа вносятся изменения, которые делают интерфейс более удобным и понятным для пользователей.

В результате хороший интерфейс должен обеспечивать пользователям возможность эффективно и без затруднений достигать своих целей при взаимодействии с продуктом, а плохой — создаёт препятствия и приводит к неудовлетворённости пользователей.

&#x20;