CC BY
18
Медиасреда. 2023. № 1. С. 19-23. ISSN 2070-0717 (print). Mediasreda. 2023; 1:19-23. ISSN 2070-0717 (print).
Научная статья УДК 004.514
DOI 10.47475/2070-0717-2023-10104
UI/UX ДИЗАЙН В ИНТЕРФЕЙСАХ ПРИЛОЖЕНИЙ
Полина Вадимовна Остапенко
Челябинский государственный университет, Челябинск, Россия, [email protected]
Аннотация: Данная статья посвящена изучению теории UI/UX-дизайна в ключе интерфейсов приложений. В исследовании авторы затронули терминологию, касающуюся данной тематики, изучили разницу между понятиями UI и UX, объяснили значение термина Usability. Также в статье подробно описываются основные элементы интерфейса приложений, такие как кнопки, меню, иконки, цветовая гамма и шрифты. Объясняется, как правильно использовать эти элементы для создания простого и интуитивно понятного интерфейса. Кроме того, авторы статьи делятся своими советами по улучшению UX-дизайна и повышению удобства использования приложений. В статье рассматриваются основные принципы UI/UX дизайна, а также тенденции успешных решений в этой области и распространенные ошибки. Важным аспектом, который подчеркивается в статье, является внимание к пользователю и его потребностям. UX-дизайнер должен понимать, каким образом пользователи будут взаимодействовать с приложением и какие функции им будут нужны. Он должен учитывать контекст использования приложения, например, место и время, в которых оно будет использоваться.
Кроме того, статья подчеркивает значимость дизайна контента. Хороший UX-дизайн должен учитывать не только внешний вид приложения, но и способ представления контента. Дизайнер должен создавать такой интерфейс, который будет максимально эффективно передавать информацию пользователю. В целом, статья представляет собой полезный ресурс для разработчиков и дизайнеров, которые хотят создавать качественные приложения с хорошим UX-дизайном. Она поможет им понять основные принципы UX-дизайна и научиться применять их на практике.
Ключевые слова: дизайн, интерфейс, UI/UX, тенденции, Usability.
Для цитирования: Остапенко П. В. UI/UX дизайн в интерфейсах приложений // Медиасреда. 2023. № 1. С. 19-23. doi: 10.47475/2070-0717-2023-10104
For citation: Ostapenko P. V UI/UX design in application interfaces. Mediasreda. 2023; 1: 19-23. (In Russ.). doi: 10.47475/2070-0717-2023-10104
В настоящее время в современной среде, тесно связанной с дизайном, очень часто употребляются термины UI (User Interface/пользовательский интерфейс) и UX (User Experience/опыт взаимодействия). Также существует термин Usability, означающий «удобство использования» Эти термины были изобретены около 70 лет назад, однако относятся они к идеям, которые были актуальны в течение многих лет, еще до появления данных аббревиатур. Для начала мы разобрались, в чем отличие этих терминов, и как важно для качественного дизайна не забывать ни про UI, ни про UX (Полетова 2018: 248). Е. Н. Головатая расшифровывает термины так:
UI - это внешний вид интерфейса и то, какие он фактические характеристики приобретает. UI-дизайн включает в себя такие элементы, как цвета, типографику, анимацию, кнопки и другие видимые физические характеристики.
UX - опыт взаимодействия пользователя с интерфейсом, он включает в себя спектр всех ощущений пользователя, который он испытывает при контактировании с интерфейсом (Головатая 2018: 109).
Т. А. Недогонова и Л. И. Красноплахтова сошлись во мнении, что UI и UX тесно связаны между собой. Их мнение заключается в том, что использование продукта с недостаточно проработанным интерфейсом приводит к существенному снижению производительности труда и ухудшению пользовательского опыта. Большинство пользователей, испытав негативный опыт взаимодействия с подобным сайтом или мобильным приложением, не возвращаются к нему повторно, чего следует избегать (Недогонова 2019: 174). А. Э. Чаусова и Л. Б. Каршакова имеют схожее мнение и считают, что, создавая какой-либо функционал, необходимо учитывать, что он должен быть интуитивно понятен пользователю и
не вызывать значимых препятствий в использовании. Также они выделяют термин Usability, который мы упоминали ранее, и определяют его как показатель того, как хорошо пользователь разбирается в конкретном продукте, как эффективно происходит взаимодействие с интерфейсом для достижения какой-либо цели (Чаусова 2021: 97).
Итак, мы разобрались, что дизайнер в большинстве своем отвечает за ощущения от использования продукта. Дизайнер обязан создавать не только привлекательный визуальный образ продукта, но и уметь выяснять потребности пользователей с помощью анализа целевой аудитории, составлять визуальное представление последовательности взаимодействий с экраном, проектировать интерфейс. Наиболее удобный интерфейс - это тот, который был разработан на основе исследования мыслительных процессов целевой аудитории и понимания того, какие действия они совершают.
Дизайн, созданный для экрана ПК, и дизайн, созданный для мобильного устройства, - совершенно разные вещи, при путанице которых нарушается сама структура интерфейса, ломается иерархия компонентов. Именно поэтому далее речь пойдет о том, какие принципы, тренды, ошибки существуют в создании дизайна для экранов мобильных телефонов (Айрапетян 2018: 13).
Когда пользователь скачивает приложение, он уже имеет некоторую лояльность: если продукт удовлетворит желание юзера и он достигнет своей цели при его использовании, то существует большая вероятность того, что человек будет возвращаться к приложению снова и снова. Однако в этом содержится ключевое различие UX-дизайна веб-сайтов и приложений, так как в большинстве своем пользователь, не получив нужную информацию или решение своей проблемы, перейдет на другой сайт. При этом в будущем он еще может вернуться к тому сайту, а вот приложение, с которым пользователь испытал негативный опыт, с очень малой долей вероятности будет установлено повторно (Домбровская 2017: 700). Следуя из этого, нужно постараться пресечь распространенные ошибки в создании дизайна приложения.
При создании приложения для мобильного устройства авторы часто стремятся добавить в свой продукт всего и как можно больше, стараясь угодить целевой аудитории. Но это срабатывает наоборот, и все принятые креативные решения лишь перегружают конечный продукт, утверждает Н. Ефимов (Киреев 2017: 194). Создать сложное, объемное приложение - трудная задача, ведь необходимо не забывать и про интуитивность. Именно поэтому мы проанализировали теоретическую базу и выделили перечень ошибок в разработке дизайна приложений:
1) плохая работа с цветом: цвета не сочетаются, либо их слишком много;
2) использование форм как с закругленными, так и с острыми углами на одном экране;
3) нет четкой визуальной иерархии элементов, отсутствует визуальная грань между основным и вторичным призывом к совершению действия;
4) непродуманная навигация, например, включение в дизайн различных видов навигации (гамбургер-меню и панель вкладок);
5) ошибки на этапе планирования: у приложения нет цели, целевая аудитория не исследована, не изучено конкурентное поле;
6) попытка ориентироваться на веб-дизайн;
7) избыток элементов, перегружать приложение лишним функционалом не нужно;
8) слишком мелкие области нажатия: в отличие от курсора компьютерной мыши, человеческий палец нажимает на кнопки с меньшей точностью, так как имеет диаметр примерно 24 пикселя.
Можно выделить еще больше ошибок, но мы попытались структурировать одни из самых распространенных и наиболее грубых упущений при разработке дизайна приложений.
Помимо технических нюансов, существуют модные тренды в сфере дизайна, которым стоит следовать, чтобы приложение выглядело современно и актуально. Наиболее стандартным и популярным, начиная с 2014 года, является Material design, созданный в 2014 компанией Google (не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно). Основная концепция этого типа дизайна заключается в создании единого пользовательского интерфейса на всех устройствах и платформах, независимо от их размеров и характеристик (Костюк 2016: 190). Чтобы разбавить минимализм, можно использовать, например, элементы неоморфизма, глассморфизма и так далее.
Дизайн интерфейса прямо зависит от способа использования устройства, на котором запускается приложение. Мы ориентируемся на мобильные устройства с сенсорными экранами, которые управляются пальцами. Важно учитывать оптимальное использование экранного пространства, размер площади контакта пальца с экраном и другие факторы (Костюк 2016: 191).
Одной из важнейших составляющих в дизайне является цвет. Речь идет не только о грамотном использовании цветов, чтобы их сочетание не вызывало у пользователя боль в глазах, но и о том, что в зависимости от значимости элемента оттенок также может меняться: чем важнее, например, кнопка в данном интерфейсе, тем ярче она будет, или можно выделить элемент, с которым можно взаимодействовать.
Крайне важно обращать внимание на цвета, которые были выбраны для конкретного приложения,
поскольку они могут влиять на настроение, поведение и уровень стресса пользователей и, следовательно, усиливать или искажать сообщение продукта. Кроме того, выбор цветовой схемы является важным инструментом для обеспечения эффективного пользовательского опыта и определяет, насколько хорошо мобильное приложение будет работать. Независимо от того, какие цвета были выбраны - более спокойные или контрастные - в дизайне мобильных приложений необходимо учитывать потребности и предпочтения целевой аудитории, чтобы достичь наибольшей эффективности. Например, если приложение разрабатывается для слабовидящей аудитории, то важно настроить выбор цвета в соответствии с ее потребностями. Цвета должны обеспечивать легкое, приятное и эффективное взаимодействие с интерфейсом (Лавская 2019: 168).
Дизайн мобильного приложения должен быть единообразным во всем. Более того, он не должен ограничиваться иконками, так как и цвета, и шрифты должны быть одинаковыми по своему формату: если кнопки закругленные, то и прочие элементы должны иметь закругленные углы, а иконки должны быть выполнены в идентичном друг другу стиле. Последовательность в дизайне улучшает знакомство с приложением, облегчая пользователям взаимодействие с ним. Также дизайн должен быть таким, чтобы не требовалось много времени на загрузку. Скорость загрузки - один из важнейших аспектов иХ-дизайна. Пользователи не хотят тратить свое время на ожидание загрузки приложения. Увеличение времени загрузки приводит к увеличению показателя отказов от использования продукта, поэтому важно не перегружать дизайн (Зорина 2022: 182).
Содержимое мобильного приложения включает информацию и некоторые визуальные элементы, например, иконки. Дизайнеру необходимо сосредоточиться на визуальном балансе при реализации этих элементов, поскольку цель состоит в том, чтобы привлечь внимание пользователя. Мы выделили 3 способа грамотной компоновки контента:
— включать только самую важную информацию, необходимую для передачи сообщения;
— иконки в приложении должны быть однородными и четкими;
— единообразие имеет решающее значение при создании иконок из-за их формы, толщины и цвета.
Н. Е. Царева, М. В. Фадеева и О. Ф. Абрамова считают, что интерактивное приложение проще в
использовании. Когда создается возможность пользователям взаимодействовать с приложением, между ними устанавливаются связи, благодаря которым продукт будут использовать, ему будут «доверять». Привлекательная платформа с использованием обратной связи обеспечивает плавную и интуитивную навигацию (Ходжатов 2018: 156).
Поскольку бренды выпускают новые смартфоны каждый год, можно отметить постоянное увеличение размеров их экранов. Чем больше телефон (и больше его экран), тем сложнее с ним обращаться одной рукой. В дополнение к утонченному дизайну необходимо убедиться, что движения, выполняемые несколькими пальцами или одним большим пальцем, не вызывают затруднений. Еще одна вещь, о которой следует позаботиться, это йиЛ-мишени: кнопки в приложении должны легко быть задействованы нажатием на них, для чего требуется достаточно места, поэтому такие интерактивные элементы лучше делать в меру крупными (Ким 2015: 480). Другая распространенная проблема возникает из-за меньшего размера экрана мобильных устройств по сравнению с персональными компьютерами. Вписать длинные тексты в небольшой пользовательский интерфейс довольно сложно, поэтому, как мы уже заметили выше, нужно написать для приложения более короткий и легко просматриваемый контент.
А. И. Метляева отмечает, что необходимо сосредоточиться на навигации в приложении, которая просто понятна и доступна: кнопки должны быть четко обозначены, а текстовый контент написан без использования труднодоступного для понимания жаргона. Расположение кнопок также имеет решающее значение, поэтому следует выбрать для них пространство, где их будет легко заметить. Сокращение усилий по поиску помогает пользователям быстрее находить то, что они ищут, а сокращение общего времени на достижение цели приводит к большему удовлетворению юзеров и повышению коэффициента конверсии (Метляева 2017: 34).
«Текст слишком большой», «Слова расположены слишком далеко», «Слова не сочетаются с изображением» - такие комментарии пользователей отмечает А. И. Метляева с тех пор, как обыденный пользовательский опыт зарекомендовал себя как важнейший элемент индустрии дизайна мобильных приложений. Независимо от того, насколько незначительной кажется типографика, всего лишь небольшое в ней изменение меняет общий дизайн (Метляева 2017: 35). Поскольку пользователи проводят большую часть своего дня в приложениях, собирая информацию и взаимодействуя со словами, важность тщательно разработанного руководства по стилю типографики пользовательского интерфейса вышла на первый план.
Итак, на какие элементы типографики стоит обратить внимание? На самом деле разный тип контента требует разного шрифта, потому что шрифт может выражать «ощущение». Например, текст, связанный с женской тематикой, зачастую имеет шрифт с более изогнутыми и тонкими линиями, если текст о науке, то и шрифт будет иметь более остроугольный стиль без засечек. Простота и чистота пользовательского интерфейса, а также использование подходящего стиля шрифтов (обычно не более 1-2 гарнитур в одном
приложении) являются ключевыми факторами, которые помогут создать визуально привлекательный дизайн для пользователей мобильных приложений.
Важно учитывать, что размер шрифта играет важную роль на мобильных экранах, которые имеют ограниченные размеры. Слишком маленький текст может негативно повлиять на зрение пользователей и занимать больше времени на чтение, в то время как слишком крупный текст может быстро заполнить всю область экрана, нарушив связность чтения и забрав место, которое можно было бы использовать для важного контента. В. А. Федотов выделяет термин интерлиньяж - это пространство между строками. Мобильный экран меньше, поэтому интерлиньяж обычно меньше, чем у десктопной версии. Более широкий или более короткий интерлиньяж портит мобильный интерфейс. В дизайне стандартный интерлиньяж должен составлять 120% размера шрифта (Федотов 2021: 31). Подобно иерархии интерактивных элементов, существует также иерархия текста. В мобильной типографике иерархия текста отличается от веб-интерфейсов, где обычно используются три уровня. Из-за ограниченного пространства на мобильных экранах многие дизайнеры ограничиваются двумя уровнями, чтобы выделить ключевые элементы и создать контраст. Заголовка и «тела» достаточно - заголовки должны мгновенно захватить внимание пользователя, а тело сделать легко восприимчивым к чтению. 2-х уровневая система текста может сделать мобильный пользовательский интерфейс чистым и при этом сохранить контраст и иерархию (Курганова 2021: 197).
Подводя итоги, мы можем отметить, что есть множество тенденций, которые можно включить в дизайн пользовательского интерфейса мобильного приложения: специальные эффекты, темный режим, голосовой помощник, искусственный интеллект и так далее. Мы изучили и отобрали наиболее важные факторы, которые необходимо учитывать, а также проанализировали распространенные ошибки, ведь если приложение сделано красиво, но дизайн перегружен различными трендовыми включениями, то он не вызовет у пользователя желание возвращаться к продукту, так как интерфейс будет неудобен и не интуитивен в использовании.
Список источников
1. Айрапетян Г. М. Дизайн мобильного приложения // Молодой ученый. 2018. Т. 48. С. 12-15.
2. Головатая Е. Н. Исследование особенностей UI/UX дизайна мобильных приложений // Альманах научных работ молодых ученых Университета ИТМО. 2018. Т. 7. С. 108-110.
3. Домбровская Е. П. UX/UI-моделирование в проектировании мобильных приложений // Ломоносовские чтения на Алтае: фундаментальные проблемы науки и техники. 2017. С. 696-700.
4. Зорина И. С. Визуальная привлекательность информации в UI-дизайне мобильного приложения // L итоговая студенческая научная конференция УдГУ 2022. С. 281-283.
5. Ким В. Ю. Особенности разработки дизайна пользовательского интерфейса для мобильного приложения // Новые информационные технологии в автоматизированных системах. 2015. Т. 18. С. 479-481.
6. Киреев Д. В. Этапы создания мобильного приложения // Студент и наука. 2017. Т. 3. С. 188-195.
7. Костюк Л. В. Теоретические основы проектирования дизайна интерфейсов мобильных приложений // Дизайн-образование: проблемы и перспективы. 2016. С. 189-193.
8. Курганова Д. А. Значимость UX/UI-дизайна интерфейса в разработке мобильных приложений // Научно-техническое и экономическое сотрудничество стран АТР в XXI веке. 2021. Т. 1. С. 194-197.
9. Лавская Л. В. Анализ тенденций применения UI/UX-технологий к созданию интерфейса мобильного приложения // Альманах научных работ молодых ученых Университета ИТМО. 2019. Т. 1. С. 167-169.
10. Метляева А. И. Мобильный дизайн UX. Ошибки, которых стоит избегать при создании мобильных приложений // Научный журнал. 2017. Т. 7. С. 34-35.
11. Недогонова Т. А. Сущность и значение UX/UI дизайна при создании сайтов и мобильных приложений // Информационное общество: современное состояние и перспективы развития. 2019. С. 172-174.
12. Полетова А. И. Анализ современных подходов к UX-дизайну мобильных приложений // Альманах научных работ молодых ученых Университета ИТМО. 2018. Т. 7. С. 246-248.
13. Федотов В. А. Разработка мобильных приложений // Научный электронный журнал Меридиан. 2021. Т. 2. С. 30-32.
14. Ходжатов Т. Б. Анализ целесообразности проектирования UI для мобильных приложений // Научные горизонты. 2018. Т. 11. С. 154-158.
15. Чаусова А. Э. UX/UI-дизайн мобильного приложения // Инновационное развитие техники и технологий в промышленности (ИНТЕКС-2021). 2021. Т. 4. С. 95-100.
Информация об авторе П. В. Остапенко - студентка факультета журналистики.
Научный руководитель: Панова Елена Юрьевна - кандидат филологических наук, доцент кафедры теории медиа Челябинского государственного университета.
Статья поступила в редакцию 24.04.2023; одобрена после рецензирования 12.06.2023;
принята к публикации 12.06.2023. The article was submitted 24.04.2023; approved after reviewing 12.06.2023; accepted for publication 12.06.2023.
Автор заявляет об отсутствии конфликта интересов. The author declares no conflicts of interests.
