Проектирование пользовательского опыта на примере открытой библиотеки материалов

Создание контентаПод контентом понимают любую информацию, размещенную на сайте.По формам контент разделяют на информационный («О продукте», FAQ, описания к товарам или файлам, новостные страницы), коммерческий, имиджевый, развлекательный и пользовательский. Matlibзадумывалась как библиотека PBR-материалов(физически корректных), построенных с помощью графов стандарта MTLX, поэтому это наполнение – ключевой параметр полезности.По сути все представленные на сайте библиотеки материалы, являются пользовательскими: то есть разработанными самими пользователями для общего свободного потребления.Также можно разделить контент по видам. Первый это текстовый контент. Сюда можно отнести ключевые слова и категории материалов. В качестве полезного текстового контента выступает инструкция для пользователей, описывающая шагидля публикации новых архивов.Пример инструкции по добавлению контента размещен на рисунке 3.4.2.1:Рис. 3.4.2.1 Размещение контента Второй вид – графический. В данном случае это рендеры материалов на нескольких видах мэша: сфере, плоскости и цилиндре, чтобы пользователи могли посмотреть, как материал отображается на поверхностях с разным искривлением. Другие виды мэша и освещения пользователи смогут увидеть открыв 3д-вьюер. Пример сочетания графического, текстового и пользовательского контента представлен на рисунке 3.4.2.2Рис. 3.4.2.2 Размещение контентаЗдесь присутствует название материала, сегментация по категории, формату, типу, и лицензии. Пользователь может оценить размер и битность скачиваемого файла. Недостаток: в нижней части некоторых окнах с материалами не указаны ключевые слова, которые облегчают поиск для посетителей. Для запроса редактирования пользователь может воспользоваться функцией жалобы в верхнем левом углу модального окна.3.4.3 СтруктураСледующая вещь после описания требуемой функциональности - это информационная архитектура и дизайн взаимодействия.Информационная архитектураОна должен быть разработан после того, как будет получено представление о том, каким будет содержание. Необходимо правильно организовать весь контент и данные, чтобы помочь клиентам быстро и логично, с их точки зрения, достичь всего, что им нужно. Информационная архитектура должна быть способна адаптироваться к будущим структурным изменениям и масштабированию продукта (новые категории продуктов, новый раздел контента и т.д.).Дизайн взаимодействияРечь идет о том, как клиенты взаимодействуют с системным интерфейсом и как система реагирует. Это должно помочь клиентам достичь своих целей и предотвратить вредные действия. Интерфейс должен быть простым для понимания и, по возможности, без какой-либо необходимой документации. Действия пользователя должны сопровождаться системной обратной связью (т.е. Создавать, обновлять, удалять что-либо). Другими словами, система всегда должна реагировать на действия пользователя.Этот уровень очень важен по нескольким причинам:Структура продукта определяет его внешний вид. Гораздо проще изменить структуру на этом уровне, чем позже, когда функциональность будет разработана.Клиенты привыкают к структуре продукта. Например, если вы обновите навигацию, пользователям может быть очень трудно изменить свои привычки, даже если предыдущая версия навигации была неверной или сложной в использовании.Уровень структуры описывает, как, где и для чего клиенты взаимодействуют с продуктом. Основная цель - создать правильную структуру продукта, которая визуализирует функциональность, размещение контента и логические связи между его различными частями. Одним из наиболее полезных инструментов для работы на этом уровне являются пользовательские потоки. Пользовательский поток описывает путь клиента при взаимодействии с продуктом для достижения его или ее целей.В результате структура продукта должна быть простой и интуитивно понятной, проверенной на реальных клиентах и отражающей их предпочтения.Наиболее важными вопросами, на которые необходимо ответить, являются:1. Как клиент может достичь поставленной цели с максимальной эффективностью?2. Понимают ли клиенты навигацию по продукту и соответствует ли она их ожиданиям?3. Сможет ли продукт расширяться или изменять свою структуру в будущем без необходимости серьезной дополнительной разработки?Вывод из этой части – необходимо увеличить размер шрифта равномерно во всем сайте. Настоящий вид показан на рис. 3.4.3.1Рис. 3.4.3.1 – Масштаб текста3.4.4 КомпоновкаИмея отличную структуру для продукта, мы переходим к развитию его функциональности. На этом уровне мы лучше понимаем, как будет выглядеть продукт, исходя из того, как он работает. Информация должна быть представлена клиентам в правильном и полезном виде и отражать все их потребности на данный момент. Она не должна быть ни избыточной, ни недостаточной.По словам Джесси Гарретт, дизайн делится на три компонента:1. Дизайн интерфейса. Описывает, как визуальные элементы будут размещены и показаны клиентам, как клиенты будут взаимодействовать с ними.2. Дизайн навигации. Описывает структуру навигации, больше похожую на часть информационного дизайна.3. Информационный дизайн. Описывает, как информация должна быть представлена в интерфейсе для лучшего понимания клиентом.Обычно на этом уровне различные прототипы тестируются на реальных клиентах, чтобы найти оптимальное решение. В результате мы получаем каркасы, полезные для дальнейшей разработки.Наиболее важными вопросами, на которые необходимо ответить, являются:1. Помогает ли прототип клиентам достичь своих целей?2. Прост ли прототип в использовании без дополнительных пояснений к функциональности?3. Проста ли структура навигации и позволяет ли клиентам быстро перейти на нужную страницу? Как клиенты будут ориентироваться в продукте?4. Есть ли что-нибудь важное, что еще можно было бы улучшить?5. Легко ли поддерживать и улучшать решение в будущем?6. Четколипредставленконтент?На этом этапе выявлен недостаток – рендеринг 3д модели оказывается слишком долгим, несмотря на качество изображения. Хорошим решением будет добавить в верхний правый угол окна опции с параметрами графики – например, высокий/средний/нижний. Исходное окно представлено на рисунке 3.4.4.1.Рис. 3.4.4.1. Карточка материала с кнопкой вызова рендеринга.3.4.5 ПоверхностьУровень поверхности является наиболее важным, поскольку он определяет внешний вид продукта. Именно здесь создаются элементы пользовательского интерфейса и общий дизайн (т.е. шрифты, цвета, макет). На этом уровне все идеи, описанные и проясненные на предыдущих четырех уровнях, сливаются в форму.В основном речь идет о визуальных и эстетических аспектах, помогающих выразить бренд, объединяя все компоненты продукта в одно цельное решение, привлекательное для покупателей.Наиболее важными вопросами, на которые необходимо ответить, являются:1. Решает ли продукт проблемы клиентов?2. Соответствует ли это целям, поставленным на первом уровне (Стратегия)?3. Соответствует ли продукт всем запланированным функциональным требованиям?4. Нравится ли клиентам продукт и хотят ли они возвращаться к нему снова и снова?Единственное требование, которое ощущается необходимым сделать – это наполнить сайт содержанием. То есть привлекатьисполнителей – в основном дизайнеров.ВыводВсе уровни пользовательского интерфейса (UX), используемые в дизайне продукта, направлены на разработку хорошего решения, полезного для клиента. При работе с любым цифровым инструментом всегда необходимо учитывать пользовательский опыт, поскольку существует множество конкурентов. Те, кто добивается успеха, - это те, кто обеспечивает лучший пользовательский интерфейс, кто более эффективно решает проблемы клиентов.5 уровней помогают деконструировать процесс работы над UX, обеспечивая пошаговый процесс проектирования, переходя от основ к деталям. Этот метод помогает создать надежный продукт, который отвечает всем требованиям клиентов и бизнеса.4 ЭКОНОМИЧЕСКОЕ ОБОСНОВАНИЕ ЗАТРАТ НА РАЗРАБОТКУ ПО4.1 Затраты на оплату трудаЗатраты на оплату (ЗОТ) труда: Таблица 1Категории работников- исполнителейработТарифная ставкаруб./чел.-чКоличество рабочих часовВсегоАрхитектор программного обеспечения427,43UX – дизайнер (инженер)394,755019 737,5Аналитик программного обеспечения361,22Специалист -тестировщик328,54Администратор баз данных295,85Веб-программист238,0210023802IT-администратор213,72ИТОГОх∑t =150Зосн =43 539,5Дополнительная заработная плата составляет 20% от основной заработной платы, рассчитывается по формуле (1):Здоп = (20 /100) ⋅Зосн, (1)Здоп = 8 707,9Затраты на оплату труда разработчика ПОв рублях (ФОТ - фонд оплаты труда) представляет собой сумму основной и дополнительной заработной платы и рассчитывается по формуле (2):ФОТ = Зосн + Здоп, ФОТ = 52 247,4 (2)Страховые взносы с зарплатыОтчисления от фонда оплаты труда включают страховые взносы: Таблица 2ВзносыСтавка Пенсионное страхование 22%Социальное страхование 2,9%Медицинское страхование5,1%Всего30 %Отчисления от фонда оплаты труда рассчитываются по формуле (3):ОФОТ = (30 / 100) ⋅ ФОТ, (3)ОФОТ = 15 674,22 Затраты на оплату труда разработчика ПО рассчитываются по формуле (4):ЗОТ = ФОТ + ОФОТ, (4)ЗОТ = 67 921,624.2 Эксплуатационные затраты на оборудованиеСуммарная годовая стоимость эксплуатационных затрат Cэз рассчитывается по формуле (5):Cэз = СТО +СМК +СЭЭ + Агод, (5) где СТО - затраты на техническое обслуживание и ремонт оборудования, руб.,СМК – затраты на материалы и комплектующие, руб.,СЭЭ - годовая стоимость электроэнергии, руб.,Агод - годовые амортизационные отчисления, руб.Затраты на техническое обслуживание и ремонт (СТО) составляют 3 % отстоимости оборудованияпо формуле (6):За Собор примем ноутбук Lenovo стоимостью 29999 р.СТО = 0,03 ⋅ Собор, (6)Собор = 29999СТО = 8 999,7 Затраты на материалы и комплектующие принимаются в размере 2% от стоимости оборудования по формуле (7):СМК = 0,02 ⋅ Собор, (7)СМК = 599,98 Амортизационные отчисления производятся по установленным нормам амортизации, выражаются, в процентах к стоимости оборудования и рассчитываются по формуле (8):Агод = Собор ⋅ (НА / 100), (8) Агод= 5 999,8где Cобор – стоимость компьютера;НА – норма амортизации, которая рассчитывается по формуле (9):НА = 100 / Тнорм(9), гдеТнорм – нормативный срок службы (для персонального компьютера Тнорм = 5 лет)Стоимость электроэнергии вычисляется по формуле (10):СЭЭ = M ⋅kз⋅ Fэф⋅Сквт.ч⋅ КС, (10)СЭЭ = 0,5 ⋅ 0,8 ⋅ 1976 ⋅ 1,05 ⋅ 4,82 = 4 000 руб. где M – мощность компьютера, Квт (емкость аккумулятора);kз – коэффициент загрузки, учитывающий использование оборудования по времени (0,8);Fэф – эффективный фонд рабочего времени;Cквт.ч – стоимость 1 квт-час электроэнергии (от 6,76 - 7,03- 8,84 - 9,2 руб./квт по состоянию на март 2022 года);КС - коэффициент, учитывающий потери в сети (Kc=1,05).Fэф – эффективный фонд рабочего времени, рассчитывается по формуле (11):Fэф= Дном ⋅ d ⋅ (1 – (f / 100)) (11)Fэф = 247 ⋅ 8 ⋅ (1 – (0.02/100))Fэф = 1 975,6Дном = 247 – номинальное число рабочих дней в году при пятидневной рабочей неделе;d = 8 – продолжительность рабочего дня, час; f = 2% – планируемый процент времени на ремонт оборудования. Рассчитываем суммарную годовую стоимость эксплуатационных затрат Cэз используя формулу 5:Cэз = СТО +СМК +СЭЭ + АгодCэз = 8 999,7 + 599,98 + 4 000 + 5 999,8Cэз = 19 599,48Cэз - суммарная годовая стоимость эксплуатационных затрат, вычисленный по формуле (5).Полученная стоимость эксплуатационных затрат – это значения годовых расходов. Необходимо их скорректировать в соответствии с временным коэффициентом (так как оборудование будет эксплуатироваться не весь год, а только в течение времени Σt смотреть табл 1) который определяется исходя из суммарных годовых эксплуатационных затрат, которые рассчитываются по формуле (5):Эз = ∑t х (Сэз / Fэф), (12) Эз = 150 х 9,92Эз = 1 488где Эз - стоимость эксплуатационных затрат;Fэф – эффективный фонд рабочего времени, вычисленный по формуле (11); Σt – общее время использования оборудования для решения задачи (см. таблицу 1).4.3 Затраты на материалыРасчет затрат на материалы осуществляется по формуле (13):ЗМ = (Vк х Н) / 100, (13) ЗМ – затраты на материалы, руб.;Vк - общий объем количества строк на листе;Н – норматив затрат на материалы в расчете на 100 строк, руб. Возможен расчет затрат на материалы (ЗМ) прямым счетом (по факту).Таблица 3: Расчет затрат на материалы МатериалыКоличество, шт.Цена за единицу, руб.Всего, руб.Оплата услуг провайдера124805760Итого(ЗМ): 5760Накладные расходы, связанные с управлением, организационными расходами и прочими дополнительными затратами, составляют 40% от фонда оплаты труда, вычисляются по формуле (14): Cнакл = 0,4× ФОТ, (14)Cнакл = 20 898,96 4.4 Себестоимость разработки программного обеспечения и расчет экономического эффектаТаблица 4: Стоимость программного обеспеченияНаименование статей затратОбозначениеСумма, руб.Затраты на материалыЗМ5760Эксплуатационные затраты (ф.12)Эз1 488Фонд оплаты труда (ф.2)ФОТ52 247,4Отчисления от фонда оплаты труда (ф.3)ОФОТ15 674,22Накладные расходы (ф.14)Cнакл20 898,96Себестоимость ПОбез учета расходов на сопровождение и адаптациюп.1+п.2+п.3+п.4+п.596 068,58Расходы на сопровождение и адаптацию10% от п. 696 06,8Полная (плановая) себестоимость ПОСпол.= п.6 + п.7105 675,38Экономический эффект у разработчика программного обеспечения. Заказчик оплачивает разработчику всю сумму расходов по проекту (полная себестоимость ПО из таблицы 4 с учетом прибыли разработчика и налога на добавленную стоимость с учетом качества, потребительских свойств продукции (ПО) и конъюнктуры рынка. Таким образом, в дипломном проекте отпускная цена программного обеспечения, представляет собой не цену за единицу продукции, а цену проекта вместе с его исходными кодами и документацией, за которую его можно продать и получить определенную выгоду. Прогнозируемая отпускная цена ПО (ЦПО) с учетом НДС рассчитывается по формуле (15):ЦПО = ЦПО = ЦПО =154707,6 , (15)где ЦПО -отпускная цена программного обеспечения;Сполн – полная (плановая) себестоимость ПО, руб., (из таблицы 4); П – прибыль разработчика ПО, руб.; СТНДС – ставка налога на добавленную стоимость (=20%), в %.Прибыль закладывается в цену исходя из уровня рентабельности (устанавливается студентом самостоятельно), расчет производится по формуле (16):П = , П = П = 23248,5836 (16)гдеП – прибыль, руб;R – уровень рентабельности, % (в рамках дипломного проекта рекомендуемый уровень рентабельности ≈ 15-20-30%). R примем 22%.Сполн – полная (плановая) себестоимость ПО, руб., (из таблицы 4).Ввиду того, что программное обеспечение разрабатывается для одного объекта, в качестве экономического эффекта разработчика от реализованного программного обеспечения можно рассматривать чистую прибыль (ЧП), которая рассчитывается по формуле (17):ЧП = , ЧП = ЧП = 18 598,4 (17) гдеЧП - чистая прибыль, руб.;П – прибыль, руб;СТП – ставка налогообложения прибыли составляет 20%. Вывод: Таким образом, разработчик программного обеспечения может продать заказчику программное обеспечение по рассчитанной цене (формула 15), что покроет затраты на разработку ПО (таблица 4) и обеспечит получение чистой прибыли при его реализации заказчику (формула 17).ЗАКЛЮЧЕНИЕВ ходе выполненного дипломного проекта была проведена исследовательская работа по изучению и проектированию пользовательского опыта интерфейса. Цель ВКР заключалась в описании проектирования UXна примере открытой библиотеки материаловMaterialX. Также были описаны общие принципы проектирования пользовательского опыта бля любых систем.В ходе работы были поставлены и достигнуты следующие цели.Рассмотрены теоретические аспекты и методы UX/UI-дизайна, изучены интерфейсы и опыт взаимодействия с ними.Проанализированы особенности проекта и целевую аудиторию, а также проведен конкурентный анализ.Спроектированафункциональная архитектура сайта.Внесены рекомендации по улучшению сайта – а именно:Улучшить качество и количество размещения контента;Обеспечить пользователю выбор качества рендеринга;Дополнить базу материалов.Составлено экономическое обоснование разработки, которое доказывает целесообразность создания такой системы пользовательского опыта.В результате работы был полностью исследован предмет - архитектура пользовательского опыта на примеревеб-сайтабиблиотеки материалов открытого стандарта MaterialX. Задача по исследованию и разработке UXвыполнена.СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВStone, D. MaterialX: An Open Standard for Network-Based CG Object Looks — Version 1.38, 2021. — 74 p. 80lv, URL: https://www.textures.com/ (датаобращения: 04.06.2022)Figma – уроки на русском, плагины, макеты [Электронный ресурс]. – URL: https://figma.center/ GPUOpenMaterialX Library, URL: https://matlib.gpuopen.com/ (датаобращения: 22.05.2022)Poliigon, URL: https://www.poliigon.com/ (датаобращения: 22.05.2022)Polyhaven, URL: https://polyhaven.com(датаобращения: 22.05.2022)Stone, D. MaterialX Physically Based Shading Nodes — Version 1.38, 2021. — 16 p. Textures, URL: https://www.textures.com/ (датаобращения: 03.06.2022)Гарретт Дж.Веб-дизайн. Элементы опыта взаимодействия». – Пер. с англ. –СПб.: СимволПлюс, 2008. – 192 с.: ил.Гринберг, C. UX-дизайн. Идея - эскиз - воплощение / Гринберг C.. - М.: Питер, 2014. - 581 c.Как построить CJM: 3 способа разработки карты взаимодействия с потребителем [Электронный ресурс]. – URL: https://chernobrovov.ru/articles/kak-postroit-cjm-3-sposoba-razrabotki-karty-vzaimodejstviya-s-potrebitelem.html/(датаобращения: 04.06.2022)Сидоренко И. Дизайнер интерфейсов. Принципы работы и построение карьеры / И. Сидоренко – М.: Олимп-Бизнес, 2019 – 200 с.Унгер, Расс UX-дизайн. Практическое руководство по проектированию опыта взаимодействия / Расс Унгер. - М.: Символ-плюс, 2014. - 120 c.Устин Композиция в дизайне. Методические основы композиционно-художественного формообразования в дизайнерском творчестве / Устин, Виталий. - М.: АСТ, 2004. - 240 c.