Система проектирования интерфейсов мобильных приложений

Актуальность данной дипломной работы заключается в том, что в наше время большинство людей не умеют планировать свой день. Поэтому большое количество времени уходит на ненужные вещи, которые оказались не особо важными. Все это происходит из-за отсутствия плана на день, неделю, месяц. А ведь именно из-за этого человек теряет время, которое мог бы использовать с пользой. Сегодня эффективное планирование времени - залог успеха современного человека. Поэтому этот вопрос начали изучать и разрабатывать подходы к тому, как структурировать день, чтобы помимо дел даже оставалось свободное время. Именно поэтому в 21 веке, веке технологий, люди начали создавать всевозможные календари, планеры, органайзеры, с помощью которых можно удержать всю эту информацию. Раньше для планирования времени использовались физические носители, в которых велись записи предстоящих дел, сейчас же на их место приходят современные технологии, в которых появляется все больше новых возможностей для этого. Списки дел в электронном виде удобно сортировать, распределять по категориям и присваивать им метки, а также настраивать напоминания. Списки дел, которая упрощает повседневную жизнь. Люди 21 века проводят все свое время в смартфонах, поэтому и все свои планы они ведут в них. Согласно опросам, пользователи смартфонов предпочитают использовать мобильные приложения, а не мобильные версии сайтов. Среди 3.5 тысяч респондентов из разных уголков мира, участвовавших в опросе, 85% утверждают, что мобильные приложения намного удобнее и функциональнее, чем мобильные версии сайтов. К целевой аудитории мобильного приложения можно отнести как семейные пары, так просто мужчин и женщин в возрасте от 20 до 35 лет. Таким образом, целью дипломной работы является систематизация проектирования интерфейсов мобильных приложений в технологиях планирования времени. Объектом исследования данной работы является процесс разработки методики для создания UI / UX электронных изданий типа органайзер для удобного планирование времени. Предмет исследования – подходы к оценке качества интерфейсов мобильных приложений, методы экспертного оценивания. Задачами данной дипломной работы будут являться: - изучение базовых подходов проектирования интерфейса мобильных приложений на примере органайзеров; - анализ существующих критериев и показателей качества интерфейсов мобильных приложений; - разработка методики проектирования интерфейса органайзера; - оценка эффективности методики. Так, мобильное приложение должно быть функциональным и привлекательным, а этого можно достичь с помощью использование новейших технологий и современного дизайна. Выбор оптимального варианта дизайна реализовано с помощью метода экспертного оценивания. 1 АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ РАЗРАБОТКИ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ 1.1 Анализ рынка мобильных приложений С каждым годом люди все больше времени проводят в интернете, и смартфоны - один из главных способов оставаться в сети и чем-то себя занять. Пару лет назад статистика говорила, что люди проводят в смартфонах 5 часов в сутки, однако уже в 2020 году эта цифра приближалась к 8 часам [1]. Рынок мобильных приложений развивается быстрыми темпами, по прогнозам ведущих компаний рост будет увеличиваться. Появляется все больше разработчиков, компаний и самих приложений. Растет конкуренция и среди сервисов с одинаковыми. Анализ рынка мобильных приложений показывает, что в 2022 году доходы от приложений достигнут 189 миллиардов долларов [2]. Ожидается, что к 2027 году объем мирового рынка программного обеспечения для управления производительностью достигнет 102,98 млрд долларов США, согласно новому отчету Grand View Research, Inc., который будет расти среднегодовым темпом на 13,4% за прогнозный период [3]. Как показано на рисунке 1.1, в марте 2022 г., по всему миру, на 28% вырос спрос на развлекательные программы (например, Netflix, Disney + и Twitch), если сравнивать с февральским периодом, а это 132 млн. загрузок приложений. Количество загрузок в категории «Книги» увеличилось на 21%. В категории «Музыка» количество загрузок выросло лишь на 13%. Быстро растущими категориями также стали: новости (загрузка выросли на 66%), Health & Fitness (загрузки выросли на 46%) и производительность (загрузки выросли на 38%). Рисунок 1.1 – Аналитика мобильных приложений по категориям Бизнесы, делающие ставку на мобильные приложения, добиваются больших успехов и, соответственно, доходов. Три крупнейших IPO 2021 года осуществили компании, для которых мобильная составляющая бизнеса-ключевая. В сумме по итогам года оценка компаний, для которых мобильные разработки – основа бизнеса, достигла 544 миллиарда долларов США [4]. Далее рассмотрим примеры органайзеров, используищихся в образовательной сфере. Приложение «Class Register» можно скачать с сервиса цифрового распространения «Play Market» и запустить на операционной системе Android. При первом запуске приложение отображает страницу от которой предлагается перейти к авторизации и регистрации нажав единую кнопку на экране, рисунок 1.2. Дизайн первой страницы примитивен, а кнопка для перехода к следующему экрану считается ненужной. Рисунок 1.2 - Первая страница приложения «Class Register» Для авторизации предлагается страница со стандартной формой для заполнения, а именно поле электронной почты и пароль, что удобно и просто, рисунок 1.3. Также, имеется возможность перехода к странице регистрации. Кроме того, есть возможность восстановить пароль через электронную почту в случае его потери. Для регистрации предлагается форма с полями имени, фамилии, электронной почты и пароля, рисунок 1.4. После регистрации пользователь сразу переходит к главной странице, а само меню приложения для дальнейшей навигации. Хоть письмо со ссылкой для подтверждения созданного аккаунта пришел на электронный ящик, об этом не сообщается пользователю и он имеет доступ к приложению без подтверждения оставляет его без доступа к некоторым функциональным возможностям. Рисунок 1.3 - Страница авторизации приложения «Class Register» Рисунок 1.4 - Страница регистрации «Class Register» Меню выглядит многофункциональным на первый взгляд, хотя есть довольно перегруженным, рисунок 1.5. После перехода к странице самых главных функциональных возможностей, а именно функций органайзера, рисунок 1.4, приложение снова требует информацию для авторазиции к аккаунту, то есть адрес электронного ящика и пароль, рисунок 1.5. Другие опции главного меню тоже не дают доступа к функциональной возможности создания любых сущностей и измений времени. Рисунок 1.6 - Страница главного меню приложения «Class Register» Рисунок 1.7 - Страница для информирования обучающихся об изменениях в расписании «Class Register» Рисунок 1.8 – Модальное окно формы авторизации при переходе до этой страницы приложения «Class Register» Вывод от анализа данного приложения - этот программный продукт не является независимой системой, позволяющей любому пользователю в любое время и в любом месте получить доступ к функциональным возможностям планирования времени. Кроме того, приложение нарушает несколько паттернов UI / UX, что еще больше отталкивает потенциального пользователя. Приложение «Easy Attendance» можно скачать с сервиса цифрового распространения «App Store» и запустить на операционной системе iOS. При запуске приложение отображает страницу авторизации, от которой также предлагается перейти к регистрации нажав кнопку «Register now» на экране, рисунок 1.9. Для авторизации предлагается стандартной формой для заполнения, а само поле электронной почты и пароль. Кроме того, есть возможность восстановить пароль через электронную почту в случае его потери. Страница регистрации имеет стандартные поля полного имени пользователя, его электронной почты и пароль, подтверждение пароля, что является хорошим примером хорошего UX, рисунок 1.9. Стоит отметить, что приложение предлагает быструю регистрацию с помощью уже существующих аккаунтов «Google» и «Facebook», что является очень удобным и быстрым способом начать пользовательскую сессию при этом не создавая отдельный аккаунт. Представлены страницы имеют красивый дизайн и имеют удобные в пользовании функциональные возможности. После авторизации пользователь может пользоваться навигацией приложения с помощью нижней панели навигации, что является стандартным, однако удобным методом. Одна из вкладок на панели навигации называется «Add/View», рисунок 1.10, и дает возможность пользователю добавить новый курс определенного предмета, рисунок 1.11, если он нажмет кноку «Add Course». Во вкладке контроля событий «Take» и во вкладке «Add/View» появляется созданное событие, рисунок 2.11. Если пользователь нажимает на поле с именем события в вкладке "Add/View", появляется страница, где он может добавить необходимую заметку, заполнив отдельную форму. Если пользователь нажимает на поле с именем курса во вкладке «Take», он имеет выбрать дату, когда будет проведено занятие, или другое событие рисунок 1.12. После этого, пользователь оказывается на странице посещения и имеет возможность ввести группу, время и прочую информацию, относящеюся к этому курсу, рисунок 1.13. Рисунок 1.9 – Страница авторизации приложения «Easy Attendance» Рисунок 1.10 – Страница регистрации приложения «Easy Attendance» Рисунок 1.11 – Страница добавления событий приложения «Easy Attendance» Рисунок 1.12 – Страница просмотра событийприложения «Easy Attendance» На первый взгляд приложение «Easy Attendance» выглядит неплохо, пользовательский интерфейс не перегружен и имеет более удобный пользовательский интерфейс, чем «Class Register». Рисунок 1.13– Список созданных событий приложения «Easy Attendance» Рисунок 1.14 – Интерфейс выбора даты проведения мероприятия приложение «Easy Attendance» Рисунок 1.15 – Страница контроля проведения мероприятия приложения «Easy Attendance» Однако, стоит отметить, что в данном приложении сделано много UI ошибок, например, верхняя панель управления пустая, а вместо нее создана отдельная дополнительная панель управления. Программа имеет широкие функциональные возможности, однако они не являются очень нужными и трудно доступными для пользователя. Приложение «Attendance taker» можно скачать с сервиса цифрового распространения «Play Market» и запустить на операционной системе Android. При запуске, приложение сразу изображает главную страницу, с тремя вкладками. То есть, все данные заполненные пользователем хранятся в физическом устройства и нет возможности доступа к ним с другого устройства. Главная страница имеет верхнюю панель навигации по трем доступным вкладкам, что является менее удобным способом навигации, чем нижняя панель навигации, рисунок 1.16. В первой вкладке под названием «Class» пользователь имеет доступ к списку созданных событий для студентов и опции их создания. Нажав на кнопку добавлениямероприятия, в центре нижней части экрана. Пользователь должен ввести название курса в модальное окно. После этого, в списке курсов появляется UI виджет с названием нового курса. Если нажать на этот виджет, приложение открывает экран редакции курса и позволяет добавить расписание этого курса. Алгоритм добавления нового расписания выбранного курса идентичен алгоритму добавления нового курса. Во вкладке под названием «Attendance» пользователь имеет возможность выбрать нужное мероприятие, нажав на виджет с его названием, рисунок 1.17. Рисунок 1.16 – Главная страница приложения «Attendance taker» Рисунок 1.17 - Вкладка «Attendance» со списком существующих событий приложения «Attendance taker» Рисунок 1.18 - Страница заметок о проведении занятий «Attendance taker» После этого, пользователь окажется на странице расписаний, где он имеет возможность внести соответствующие заметки, выбрать время проведения события, рисунок 1.18. После проведения изменений, пользователь должен нажать на кнопку сохранения редактируемой информации, чтобы все данные были локально сохранены. 1.2 Анализ платформ для разработки мобильных приложений Android составляет 86% мирового рынка. По прогнозам эта тенденция будет сохраняться в будущем. При этом приложения на iOS позволяют выйти на аудиторию, которая имеет большую покупательную способность, чем пользователи Android (рисунок 1.19). Несмотря на то, что в общем по количеству пользователей Android лидирует, в некоторых регионах мира Apple доминирует на рынке. Это страны с высоким уровнем жизни в Северной и Южной Америке, Европе, Азии. Android лидирует в странах с развивающейся экономикой (рисунок 1.20). Рисунок 1.19 - Рынок мобильных ОС Рисунок 1.20 - Карта пользователей по регионам Так, iOS разработка быстрее и дешевле в плане фрагментации. Android имеет много версий и много устройств. Это затрудняет разработку и тестирование программы, приводящей к тратам времени и денег. Только Apple использует OC iOS и имеет ограниченное количество смартфонов и планшетов. Apple генерирует на 45% больше дохода на одного пользователя, чем Android. Кроме того, пользователи ОС iOS делают покупки в приложении с вероятностью на 10% больше, чем Android - пользователи. Приложения на iPhone качественнее, а дизайн изысканнее. Успешные люди делают выбор в пользу iOS, поэтому система имеет юзабилити-интерфейс и это позволяет экономить время для совершения действия. iOS безопаснее, чем Android. Это связано со строгой проверкой от App Store. Вероятность получить вирусы после загрузки приложения совсем не привлекает пользователей. Маркет на Гугл собрал много различных приложений, в том числе некачественных, в свою очередь App Store проводит премодерацию всех новых продуктов. Это говорит о качественном подходе и уровень мониторинга всех продуктов [5]. 1.3 Анализ аналогов Для того, чтобы процесс разработки обеспечивал создание уникального приложения без негативного опыта, был проведен анализ интерфейсов аналогичных приложений-органайзеров, используемых и в других сферах жизни. Были подобраны такие популярные приложения для платформы IOS: Google Calendar, Tappsk, Evernote, Notes, Any.do. Google Календарь. Первое и самое популярное приложение - это Google Календарь. Данный сервис создан для планирования встреч и событий. Бета -версия приложения вышла в 2006 году, а официальный релиз состоялся в 2009 году. Это приложение создано для платформ iOS и macOS. Приложение позволяет задавать время встречи, создавать повторяющиеся мероприятия, устанавливать напоминания, а также приглашать других участников с уведомлением по электронной почте [6]. Интерфейс Google Календарь выполнен в стиле Material Design (рисунок 1.21). Общий дизайн выглядит понятным для пользователя, за счет упорядочение пространства и цветовых акцентов. Визуальный элемент даты и дня недели выделен за счет увеличения размера. Панель инструментов позволяет изменить вид и управлять календарем, находится наверху, а строка поиска представлен пиктограммой. Для отображения нескольких календарей и управления ими на одной странице с помощью столбцов, пользователю нужно выбрать вид отражение по дням. В зависимости от того, как пользователь ответил на приглашение на событии, оно будет отображаться по-разному: одним цветом, если «да», заштрихованным диагональными линиями для «возможно», вычеркнутым для «нет». Напоминания о мероприятиях или событиях возможно получать двумя способами: с помощью Push-сообщений или по электронной почте. Привязка календаря осуществляется с помощью учетной записи Gmail. Рисунок 1.21 – Интерфейс Google Календарь Преимущества Google Календаря: возможность предоставления доступа к своему календарю и управления им, быстродействие системы, локализация, доступная для множества языков. Также Google Calendar имеет унифицированный для всех продуктов Google дизайн. Пользователь продуктов Google легко ориентируется по всем графическим знакам и меню, ведь они схожи во всех продуктах. Tappsk. Седующее приложение под названием Tappsk было создано в 2018 году. Это дневник и планировщик задач, который поддерживается только для платформы iOS. Это приложение объединяет в себе инструменты для планирования задач с дневником и трекером привычек. В данном приложении максимально интерактивный интерфейс (рис. 1.22), идеально простая фиксация задач. Дизайнеры интересно оформили привычки элементами, напоминающими «Истории» в Instagram. Основная функциональность – это список задач. Есть возможность разбивать их на этапы, распределять по категориям и управлять сообщениями [7]. Рисунок 1.22 – Интерфейс Tappsk Преимущества приложения: функция «трекер привычек» помогает заметить любые задачи как регулярные для поддержания здоровья и дисциплины. Evernote. Данная система, доступна на нескольких операционных системах (рисунок 1.23). Рисунок 1.23 – Интерфейс Evernote Позволяет работать с заметками, поделиться заметкой с другими пользователями, при этом сообщение пользователю направляется по электронной почте [8]. Преимуществом Evernote являются возможности текстового редактора. Редактор поддерживает форматированный ввод текста, работу со встроенными таблицами, списками, поддержку настроенных шаблонов, работу с Google Drive, голосовой ввод текста, прикрепление файлов и фотографий. Также преимуществом Evernote есть синхронизация между устройствами одной учетной записи. Notes. Это настольное и мобильное приложение операционных систем iOS и macOS [9]. С помощью приложения «Notes» пользователь может записывать свои идеи, создавать зарисовки, списки и добавлять в них сразу же фотографии, а также выполнять другие действия (рисунок 1.24). Рисунок 1.24 – Интерфейс Notes Так как это стандартное приложение для iOS, заметки будут синхронизироваться со всеми устройствами с помощью iCloud. Это приложение является базовой при работе с операционной системой macOS, производительность ее работы, встроенность в стандартный набор приложений операционной системы и простой дизайн делают именно этот продукт привлекательным для пользователей. Однако, недостатком приложения являются возможности текстового редактора и их неудобное использование. Например, операция трансформации текста в верхний регистр не может быть вызвана из быстрого меню, только с помощью вызова контекстного меню. Any.do - программный продукт, предназначенный для управления заметками и напоминаниями. Концепция Any.do практически не разграничивает эти сущности. Согласно концепции программы, различие между напоминанием и заметкой лишь одно - напоминание имеет время оповещения. Все остальные атрибуты одинаковы. Any.do распределяет задачи по дате напоминания: сегодня, завтра, будущее и когда – синхронизация происходит в ручном режиме. Задачи можно перетаскивать между списками и прикреплять заметки, файлы, записанный звук и напоминание к любым элементам (рисунок 1.25). Так же можно просматривать и управлять собственным календарем устройства в приложении, прямо вместе со своими задачами. Any.do имеет довольно много полезных дополнений, в том числе дополнительную «панель быстрого добавления», которая помещает задачи текущего дня на панель сообщений, набор красиво оформленных виджетов на главном экране и умную всплывающую систему оповещений для напоминания о пропущенных звонках. Приложение имеет чистый и простой в навигации интерфейс с множеством полезных функций для создания, организации и, что особенно важно, фактического продвижение по всем типам списков. Дизайн приложения минималистичен, что делает интерфейс приложения очень легким и доступным каждому. В нижней панели навигации расположены три вкладки: «Tasks», «Calendar», «Moments». На странице «Tasks» все заметки сортируются по дате, и пользователь может сразу увидеть, что у него запланировано не только на сегодня, но и на ближайшие дни. Рисунок 1.25 – Интерфейс Any.do Завершить задачу пользователь может нажать на пустой кружок, тогда выполненная задача отображается как перечеркнутая. При написании текстов заметок и напоминаний можно использовать цветные теги и отмечать пользователей. Базовый функционал прост, но платные подписки на продукт имеют особенности в виде возможностей добавления повторяющихся задач, цветных тегов и заметок, напоминаний по геолокации. Анализ популярных аналогов мобильных приложений показал, что ни в одном из них не было чата. Поэтому включение этой возможности при создании разрабатываемого мобильного приложения-органайзера, является ключевым отличительным показателем. Это приложение позволяет связать несколько аккаунтов (например, семьи или друзей), чтобы была возможность увидеть у кого что сегодня запланировано, добавить участника в свое событие, но самое главное, это возможность общения между собой. Чат в календаре удобен также для рассылки документов, фотографий или другого контента. Таким образом, можно сформулировать требования к разрабатываемому программному продукту, отметив его достоинства (таблица 1.1). Таблица 1.1 – Достоинства разрабатываемого программного продукта Достоинства разрабатываемого продукта 1 Инструментальные средства должны хранить данные в облачном хранилище, и пользователь должен иметь возможность получить доступ к ним на любом другом мобильном устройстве 2 Возможность авторизации с помощью аккаунта Google 3 Возможность входа в систему без авторизации и подключения к интернету, если пользователь уже входил в свой аккаунт и не выходил из него 4 Возможность создания заметок о проведении занятий в группах, ввод наименований предметов с классификацией лекции и практики 5 Возможность удаления заметок 6 Возможность автоматического сохранения всех данных до облачного хранилища 7 Удобный UI/UX дизайн В результате анализа выше упомянутых приложений были выделены основные функциональные возможности и идеи настройки пользовательского опыта для лучшего мобильного приложения. При создании программного продукта были проанализированы аналоги и определена целевая аудитория. На основе результатов обработки этих данных, было решено каким именно построить мобильное приложение. Выводы по разделу 1 Рынок мобильных приложений развивается быстрыми темпами, по прогнозам ведущих компаний рост будет увеличиваться. Появляется все больше разработчиков, компаний и самих приложений. Android составляет 86% мирового рынка. По прогнозам эта тенденция будет сохраняться в будущем. Несмотря на то, что в общем по количеству пользователей Android лидирует, в некоторых регионах мира Apple доминирует на рынке. Для того, чтобы процесс разработки обеспечивал создание уникального приложения без негативного опыта, был проведен анализ интерфейсов аналогичных приложений-органайзеров. Были подобраны такие популярные приложения для платформы IOS: Google Calendar, Tappsk, Evernote, Notes, Any.do. Также были рассмотрены и проанализированы приложения-органайзеры, используемые в образовательной сфере для платформы Android: «Class Register», «Easy Attendance», «Attendance taker». В результате анализа выше приложений были выделены основные функциональные возможности и идеи настройки пользовательского опыта для лучшего мобильного приложения. Разрабатываемое мобильное приложение должно быть удобным и возможным для использования в любых учебных заведениях. 2 БАЗОВЫЕ ПОДХОДЫ К ПРОЕКТИРОВАНИЮ И СУЩЕСТВУЮЩИЕ КРИТЕРИИ КАЧЕСТВА ИНТЕРФЕЙСОВ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ 2.1 Базовые подходы к проектированию интерфейсов органайзеров Эффективная организация времени – актуальная проблема для любого человека, независимо от его занятости. Этой дисциплине, известной также как таймменеджмент, посвящена не одна книга, регулярно проводятся многочисленные курсы, которые предлагают различные методики. Свою лепту в планирование времени вносят органайзеры. Данная сфера программного обеспечения служит не только для составления распорядка дня, но и для хранения данных. Человеку сложно держать в памяти, или же в неупорядоченном виде, всю необходимую информацию, которая должна быть под вручную. Разработчики инвестируют большие средства и внимательно изучают каждый шаг человеческих потребностей. Для них эта работа называется изучением опыта пользователя и должна учитывать все эмоции, убеждения, предпочтения, ощущения, физические и психологические реакции, поведение и достижения, которые возникают до, во время и после использования системы. Разработка дизайна пользовательского интерфейса - это процесс, который дизайнеры используют для создания интерфейсов в программном обеспечении или компьютеризированных устройствах, уделяя особое внимание внешнему виду или стилю. Дизайнеры стремятся создавать интерфейсы, пользователи находят простыми в использовании и приятными. Также интерфейс должен добавлять ценности бренда и укреплять доверие пользователей. Хороший дизайн - это эмоциональный дизайн. Пользователи связывают хорошие чувства с брендами, которые обращаются к ним на всех уровнях и сохраняют магию приятных и беспроблемных впечатлений. Потребности целевой аудитории, ее настроение и жизненные цели определяют особенности проектирования интерфейса и его эргономику. Анализ рынка и продукции конкурентов позволяет выделить основные ошибки и неточности разработок, что впоследствии поможет создать новый и качественный продукт. Интерфейс обеспечивает комфортное взаимодействие между пользователем и техникой. При разработке интерфейса программы следует учитывать эргономику и устройства, с которыми будет работать приложение. Пользователь должен быть главным критерием в построении интерфейса и создании дизайна приложений. Чтобы создать отличный интерфейс необходимо следовать таким рекомендациям: а) простота навигации. Навигацию в приложении лучше не усложнять громоздкими меню, но и не идти в крайности, убирая его вовсе. Навигационный блок не должен закрывать основное поле программы. Можно использовать, например, систему «гамбургеров», или спрятать меню в левую шторку приложения. Дизайн интерфейсов мобильных приложений должен быть максимально продуманным и лаконичным, чтобы пользователь мог гладко и без препятствий двигаться к цели; б) лучше использовать значки, которые будут интуитивно понятными для клиентов - такие, которые используются в большинстве приложений. Это позволит пользователям быстро и эффективно перемещаться приложением. Нужно четко пометить значки и включить хорошо обозначенные возможности: например, тени для кнопок (рисунок 2.1); в) простой фон. Дизайн iOS приложений создал основу тренда минимализма и простоты. Если веб-дизайнеры включают красивые темы и фоны при создании сайта, то mobile-дизайнеры делают фоновые изображения однотонными или размытыми, что делает навигацию и функции приложения более выразительными. Это также позволяет сократить время загрузки и сделать взаимодействие с пользователем более комфортной [11]; Рисунок 2.1 – Стандартные иконки для платформы IOS г) интерфейсы должны быть простыми и содержать только те элементы, которые служат целям пользователей; д) нужно уделить внимание иерархии и легкости чтения: 1) использовать правильное выравнивание. Обычно выбирают выравнивание по краю; 2) обратить внимание на ключевые особенности, используя: цвет, яркость и контраст. Избегать чрезмерного использования цветов или кнопок; тексты с использованием размеров шрифта, жирного шрифта/веса, курсива, употребление большой буквы и расстояния между буквами. Пользователи должны улавливать содержание просто путем сканирования; е) свести к минимуму количество действий для выполнения задач, но сосредоточиться на одной главной функции на странице. Нужно направлять пользователя, подсказывая желаемые действия, упростить сложные задачи, используя прогрессивное раскрытие информации; ж) разместить элементы управления рядом с объектами, которыми пользователи хотят управлять. Например, кнопка для отправки формы должна быть рядом с формой; з) информировать пользователей об ответах / действиях системы с помощью отзывов; и) использовать соответствующие шаблоны проектирования, предназначенного для пользовательского интерфейса, чтобы помочь пользователям и снизить нагрузку. Остерегаться использования темных шаблонов; к) поддерживать последовательность бренда; л) предоставлять следующие шаги, которые пользователи могут сделать естественным образом, независимо от их контекста. Зарисовки, эскизы и чертежи позволяют определить, насколько UX дизайн интерфейса получился эргономичным. Разработчики при проектировании интерфейса программы пытаются понять, как будет действовать человек, впервые открыв приложение, выбирают цветовую гамму и оптимальное размещение элементов дизайна пользовательского интерфейса. Рассмотрим основные требования к интерфейсам мобильного приложения: - использование привычных пользователю элементов UI, например, вертикальной ленты новостей вместо горизонтальной; - снижение "громкости" интерфейса. Пользователь должен видеть сначала важнейшие элементы, второстепенный функционал скрывается глубже; - главные элементы должны быть масштабными; - вывод данных в удобном формате; - размещение призыва к действию, который подтолкнет пользователя к нужному разработчику сценарию; - меньше текста и больше визуализации. Пользователь должен видеть, куда он попал и что ему нужно делать; - кастомизация. Важно, чтобы предложения для пользователя были релевантные его преимуществам; - запросы на права. Не рекомендуется сразу спрашивать у пользователя все необходимые приложению права, поскольку при первом знакомстве с программой, ему не будет понятно, для чего они используются (рисунок 2.2); Рисунок 2.2 – Пример запроса на разрешение использование информации - возможности. Этот пункт следует из предыдущего: клиент должен понимать, какие выгоды он получит от взаимодействия с программой; - определенный функционал предполагает акцент не на многофункциональном приложении, а приложении, которое может качественно выполнить определенное задание. Разработка интерфейса мобильного приложения имеет свои особенности: - уникальность – это означает, что для каждой новой программы важно Определить параметры, то есть то, чем эта программа выделяется на фоне похожих; - забота о пользователе подразумевает то, что приложение должно восстанавливать работу с места остановки, быть легко управляемым и энергосберегающими; - отзыв - важная составляющая взаимодействия с приложением, которое означает, что программа должна реагировать на все действия с ее функционалом. Человеку необходимо знать, что ее запрос уже выполняется или находится в обработке; - продумывание мелочей заключается в том, чтобы учесть все особенности пользовательского опыта при разработке интерфейса мобильного приложения; - использование возможностей сенсорных экранов предполагает то, что нужно убрать из программы элементы, которые напоминают полосы tab, окошки и бегунки; - удаление полосы прокрутки, потому что мобильный функционал позволяет найти более эффективные решения; - облегченный ввод текста достигается выбором удобного текстового поля и соответствующего размера клавиатуры. Можно добавить горизонтальную ориентацию экрана; - избегание всплывающих окон. Такие окна раздражают пользователя, поэтому их не рекомендуется использовать без надобности; - проработанная иконка должна не только выделяться среди других, но и буквально демонстрировать, что делает приложение. На Google Play и среди пользователей IOS, больше всего ценится нативность в UX и UI решениях. Если мобильное приложение разработано с использованием гайдлайнов, то App Store гораздо легче пропускает его в работу, а пользователи радуются, увидев что-то знакомое и давно любимое. Поэтому необходимо ориентироваться в общих требованиях и не забывать отслеживать обновление. Скелет экрана приложения состоит из Status bar, Navigation bar, Tabbar, Modals/Popovers/Alerts, Search bar, Picker. 1. Status bar. Строка состояния содержит основную системную информацию, такую как текущий оператор, время, состояние батареи и многое другое. Он визуально связан с панелью навигации и использует ту же фоновую заливку. Чтобы соответствовать стиля приложения, которое разрабатывается, существует два варианта цвета контента в строке состояния - белый и черный. 2. Каким бы ни было устройство, высота статус бара всегда составляет 20 pt. Исключением является только iPnone X, где размер строки состояния составляет 44 pt, за счет наличия "челочки". 3. Navigation bar. Эта панель сохраняет в себе основные элементы навигации по приложением или же блоки управления для конкретного экрана. Она всегда находится в верхней части под строкой состояния, с которой составляет одно целое (рисунок 2.3). Рисунок 2.3 – Status bar и Navigation bar Высота панели без status bar в любом устройстве (кроме iPnone X) составляет 44 pt. В IOS-версиях выше 10, панель навигации можно, при необходимости, расширить. То есть добавить дополнительную область, высотой в 52 pt, с большим заголовком строки. Не стоит забывать об отступлениях - в IOS они должны быть кратны восьми. В основной части навигационной панели необходимо ставить отступ в 8 pt, а в дополнительной части с заголовком-16 pt. 4. Tabbar. Таббар используется для быстрого доступа к основным экранам приложения и только для этой цели. Картотека появляется в нижней части экрана приложения и дает возможность быстро переключаться между различными разделами программы. Панели вкладок полупрозрачные, могут иметь оттенок фона, сохранять одинаковую высоту во всех ориентациях экрана и скрыты при отображении клавиатуры. Картотека может содержать любое количество вкладок, но количество видимых вкладок зависит от размера и ориентации устройства. Если некоторые вкладки не могут быть отображены из-за ограниченного пространства по горизонтали, последняя видимая вкладка становится вкладкой «дополнительно», которая отображает дополнительные вкладки в списке на отдельном экране. Высота таббара – 49 pt во всех моделях iPhone. Иконка может быть из подписью или без, но в любом случае, контент центрируется. Размер иконки-24 pt. Нужно учитывать, что область для клика составляет 44 pt – размещать другие иконки в области клика не рекомендуется. Чтобы понять, как размещать иконки в таббаре, нужно определить их количество, разбить ширину экрана на число иконок / табов. Затем каждую иконку центрировать по ширине и высоте области таба, независимо от того, будет ли текст под иконкой (рисунок 2.4). 5. Search bar. Панели поиска по умолчанию представлены в двух различных стилях: видимый и минимальный. Обе версии имеют одинаковую функциональность. Рисунок 2.4 – Tabbar Видимую версию сложно не заметить. Она хорошо выделена с помощью сплошной заливки, чаще всего белого цвета. Пока пользователь не вводил текст внутри панели отображается текст-заполнитель. Он исчезает после ввод условия поиска, а справа появляется кнопка для удаления введенного (рисунок 2.5). Рисунок 2.5 – Search bar 6. Picker. Пикер используется для выбора одного значения из списка. Что интересно, можно использовать сразу несколько видов списков в одном Пикер. Отличный пример его применения – выбор даты рождения, где мы используем в одном окне выбор даты, месяца и года (рисунок 2.6). Рисунок 2.6-Picker Шрифты и их параметры. Разработчики платформы IOS уже позаботились о выборе шрифта, прописав в гайдлайне, что необходимо использовать их собственный шрифт «San Francisco» (таблица 2.1). Он представлен в двух начертаниях: «SF UI Display» и «SF UI Text. Display». Первый, в основном, используется для стандартных элементов интерфейса, а «Text» – для заголовков и основного текста. Основной текст принято делать с небольшой разрядкой [12]. Размер и разрешение изображения. Система координат, которую iOS использует для размещения контента на экране, основанная на измерениях в точках, которые отображаются в пикселях на дисплеи. Дисплей со стандартным разрешением имеет плотность пикселей 1:1 (или @1x), где один пиксель равен одной точке. Дисплеи с высоким разрешением имеют более высокую плотность пикселей, предлагая коэффициент масштабирования 2,0 или 3,0 (обозначается как @2x и @3x). В результате дисплеи с высоким разрешением требуют изображений с большим количеством пикселей (рисунок 2.7). Таблица 2.1 – Размеры шрифтов для основных элементов интерфейса Элемент Размер (pt) Начертание Тип шрифта Large Nav Bar Title 34 Bold Text Nav Bar Title 17 Semibold Text Nav Bar Button 17 Regular Text Search Bar 17 Regular Text Tab Bar Button 10 Regular Text Action Sheets 20 Regular / Semibold Display Рисунок 2.7 – Диаграмма из трех кругов с разным разрешением и количеством пикселей Круг слева имеет стандартное разрешение при масштабном коэффициенте 1 и имеет размер 10x10 точек. Средний круг имеет высокое разрешение способность при масштабном коэффициенте 2 и имеет размер 20x20 пикселей. Правыйкруг имеет высокое разрешение при масштабном коэффициенте 3 и имеет размер 30x30 пикселей. Конечно, что в современных реалиях недостаточно требовать от данного рода мобильного приложения традиционную функциональность: наличие календаря, адресной книги, записной книжки. Не менее важные аспекты-мобильность, возможность синхронизации с портативными устройствами. При проектировании интерфейсов органайзеров нужно уделять внимание следующим аспектам: - удобство интерфейса: органайзер – тот вид мобильного приложения, где интерфейс играет одну из самых важных ролей, особенно в отношении скорости доступа к нужным функциям; - задачи и календарь: создание задач, to-do списков, категорий, подзадач, возможности календаря при создании событий; - напоминания и уведомления: настройка напоминаний о событиях, дней рождений, дат и тому подобное. Создание липких заметок, способов сообщения; - организация контактов: возможности адресной книги, импорт/экспорт данных; - общий доступ: возможность создания проектов, инструменты для коллективной работы; - мобильность и синхронизация: доступность для мобильных платформ, интеграция с онлайн-сервисами; - безопасность: установка пароля на запуск приложения, базу данных или отдельные разделы органайзера; защита и шифрование данных. Как правило, работа типовой программы-органайзера связана с рядом функций. Вот основные из них: - календарь; - менеджер контактов; - записная книжка; - учет событий, привязанных к определенной дате и времени; - планировщик задач для контроля их самостоятельного или стороннего выполнение; - будильники и сервисы напоминания о событиях, заданных пользователем; - возможность работы с электронной почтой. Можно вывести следующие алгоритмы действий пользователя для достижения своей цели (таблица 2.1). Таблица 2.1 – Базовые функции приложения Необходимый результат Алгоритм действий Вход с систему 1. Зарегистрироваться 2. Подтвердить адрес электронной почты 3. Авторизоваться Создание новой заметки 1. Определить название 2. Выбрать время 3. Подтвердить создание Создание нового списка 1. Определить название 2. Ввести порядковые имена 3. Подтвердить создание Контроль выполнения 1. Выбрать нужный список или заметку (объект) 2. Перейти на страницу этого объекта 3. Провести отметку о выполнении Для выполнения поставленной задачи будет использован Flutter – набор инструментов для разработки программного обеспечения с открытым кодом, созданный Google. Flutter - это набор инструментов от Google для создания пользовательского интерфейса для создания красивых приложений, созданных для мобильных устройств, веба и настольных компьютеров из единой базы кода [3]. Главными преимуществами Flutter выделяют: - Пользовательский интерфейс имеет быстрый цикл создания. - Возможно создание гибкого и выразительного интерфейса пользователя. - Кроссплатформенность. Производительность нативных приложений операционных систем iOS и Android не выше приложений созданных с помощью Flutter. 2.2 Анализ существующих критериев и показателей качества интерфейсов мобильных приложений Пользователи мобильных устройств ожидают высокого качества от установленных приложений. Качество приложений напрямую влияет на востребованность программы: как много будет его установок, какими будут рейтинг и отзывы пользователей, насколько будет популярно приложение и как долго он будет использоваться. С помощью определенных критериев и параметров можно оценить основные аспекты качества приложения. Все приложения должны удовлетворять этим критериям. Прежде чем публиковать приложения, их нужно проверить на соответствие этим критериям, убедившись, что они корректно работают на разных устройствах, отвечающих стандартам платформ по навигации и дизайну. Существуют два основных показателя оценки эффективности: количественный и качественный [13]. Количественные методы UX используются, чтобы понять, что происходит с мобильным приложением. Они редко рассказывают о мотивации и мотивы пользователей, но их можно использовать, чтобы хорошо понять, что они делают в мобильном приложении. Некоторые типичные примеры количественных методов включают: - веб-аналитику; - аналитику формы; - тепловые карты; - A / B тестирование; - отслеживание глаз; - тестирование щелчка; - опросы (могут быть количественными и качественными). Эти методы помогут глубоко понять, что люди делают в проектируемом приложении. Данные, предоставленные этими количественными методами, помогают понять, где можно сосредоточить усилия разработчиков во время совершенствование мобильного приложения. И количественные, и качественные показатели являются жизненно важными для комплексного подхода к проектированию UX. Качественные методы UX принимают различные формы и часто используются для создание углубленной картины пользователей. Обычно они используются, чтобы помочь выяснить, почему что-то происходит. Некоторые типичные примеры качественных методов включают: - тестирование юзабилити; - этнографические / полевые исследования; - фокус-группы; - дневниковые исследования; - запись экрана / сеанса; - отзывы пользователей; - интервью с заинтересованными сторонами; - иммерсивное исследование; - дизайнерские мастерские; - эвристические оценки. Эти методы помогают глубже понять пользователей мобильного приложении. Уровень детализации, предоставленный этими качественными методами, помогает создать сочувствие к пользователям и дает хорошее понимание того, почему они так ведут себя. В данной работе были использованы качественные методы, для более детальной оценки интерфейса мобильного приложения. Вот основные критерии качества приложений: - интуитивность. Открыв приложение, пользователь должен знать, что делать без использования инструкций и справок. Навигацию, размер и стиль иконок нужно проектировать так, чтобы пользователь не испытывал неудобство; - удовольствие, которое получает пользователь при использовании приложения - это важный фактор успеха. Положительные эмоции и впечатления всегда привлекали людей. Если приложение Интерактивное и полезное, к нему будут возвращаться снова; - время. Есть миф, который утверждает: "если пользователь за 3 клика не нашел нужную информацию, разработка ему не понравится». На самом деле, главное не количество кликов, а оптимальность интерфейса и удобство навигации. А для пользователя важнее, насколько быстро он понял систему приложение, чем количество кликов; - скорость обучения. Интерфейс должен содержать средства, позволяют пользователю в максимально короткие сроки научиться работать с программой или системой. К таким средствам относятся различного вида справочные системы, подсказки, информационные сообщения; - область соприкосновения. В маленькую область прикосновения гораздо сложнее попасть, чем в большую. Поэтому обязательно нужно учитывать размер пальцев при создании пользовательского интерфейса. Взаимодействие с системой должно быть удобным, особенно при наборе текста или выборе разделов. Часто разработчики не учитывают физиологические особенности пользователей при проектировании дизайна интерфейса приложений. Объекты слишком маленькие для пальцев рук, а при наборе текста вы попадаете на другие буквы. Поэтому следует учитывать это при размещении элементов, располагать их достаточно далеко друг от друга. Большие и четкие объекты в дизайне интерфейса полезны и для людей с проблемами зрения (рисунок 2.8). Рисунок 2.8 – Области прикосновения Повышение точности уменьшения области касания до точки касания и увеличение размеров цели значительно помогут сделать приложение качественнее. Только даже с такой точностью цели все равно будут промахиваться. Чтобы добиться большего, следует подумать об изменении большего количества элементов пользовательского опыта. Два общих подхода были исследованы ранее и заслуживают рассмотрения. Оба включают изменение события выбора. Рассмотрим четыре возможных способа, с помощью которых палец может войти или выйти из контакта с объектом. Он может скользить по объекту (A на рисунке 3.2), он может приземлиться на объект (B), его можно отодвинуть от объекта (C) или он может соскользнуть с объекта (D). Для нажатия клавиши на клавиатуре нужно только (B): нажатие клавиши вызывает ввод текста. Для включения кнопки в графическом интерфейсе обычно требуются и (B) и (C), чтобы у пользователя была возможность соскользнуть с кнопки. Рисунок 2.9 - Четыре различных взаимодействия пальцев и предметов: скольжение (A), приземление (B), подъем (C), скольжение (D) Один из подходов к решению проблемы с пальцем заключается в том, чтобы требовать только (C): оторвать экран от экрана при прикосновении к объекту. Рассмотрим клавиатуры на платформах Android, Windows Phone и iPhone: когда палец касается клавиатуры, текст не вводится. Кнопка, к которой прикасается пользователь, увеличивается, показывая примерное положение пальца, чтобы пользователь мог перемещаться по клавиатуре, чтобы найти нужную клавишу. То, где пользователь поднимает (C), имеет значение. Такой подход дает пользователям возможность скорректировать свой выбор к того, как они подтвердят его, но у него есть недостаток, заключающийся в том, что для достижения небольших целей требуется много времени. Альтернативный метод был описан исследователями из Университета Торонто. Их техника, получившая название «побег», была разновидностью выбора с использованием события (D): выбор осуществляется путем изучения направления пальца пользователя, когда он соскальзывает с объекта [14]. Понятные для пользователя иконки. Иконки являются одним из важнейших элементов любого предназначенного для пользовательского интерфейса. Они делают интерфейс приятнее и удобнее в использовании. Самое главное использовать только такие иконки, которые на 100% понятны каждому. Функциональность. Функциональность означает, что приложение фактически может выполнять предложенные задания. Соответствие требованиям платформы. Если приложение разрабатывается под Android, то в нем должны учитываться требования от Google, если это нативное приложение для iOS, то при его создании должны быть учтены требования компании Apple, если приложение кроссплатформенная, то необходимо учесть требования всех компаний. Для этого в данных платформах есть разработанные гайдлайны. Юзабилити. Юзабилити означает, что пользователь может работать эффективно, удобно и при этом еще получать удовольствие от работы программы. Доступность есть частью юзабилити. Юзабилити-тестирование представляет собой постановку экспериментов с целью выявления специфичной информации, касающейся удобства использования исследуемого продукта. В разрабатываемом процессе улучшения юзабилити, где функция качества интерфейса представляет собой математическую модель процесса, юзабилити-тестирование позволяет реализовать эту модель. Подставив все необходимые параметры, найденные в результате тестирования, возможно получить значение функции качества интерфейса, организовав тем самым управление последним. Качество элементов оформления зависит как от визуальной эффективности, так и их функциональной насыщенности: (2.1) где: Sem (semantic) — эффективность семантической (смысловой) составляющей — это, например, степень того, насколько осмыслена надпись на кнопке, насколько она помогает понять ее назначение; Qty (quantity) — количество элементов управления интерфейсом данного типа; CVE – свойство общей визуальной эффективности. Метод эвристического прогнозирования. Данный метод предполагает коллективную выработку идей и метод коллективной экспертной оценки в том смысле, что одним из элементов его является сбор и обработка суждений экспертов, высказанных на основе профессионального опыта и интуиции. Также метод эвристического прогнозирования отличается большей четкостью теоретических основ, способами разработки анкет и таблиц, порядком работы с экспертами и алгоритмом обработки полученной информации. Метод эвристического прогнозирования (МЭП) применяется в области научно-технических объектов и проблем, развитие которых полностью или частично не поддается формализации. В основе данного метода находятся следующие теоретические допущения: 1) наличие у эксперта психологической установки на будущее, полученной на основе профессионального опыта и интуиции, а также возможность ее экстериоризации; 2) равенство процесса эвристического прогнозирования и процесса решения научной проблемы с однополярностью получаемого знания в виде эвристических правдоподобных умозаключений, требующих верификации; 3) возможностью реально отображать различные тенденции развития объекта прогнозирования. Развитие объекта можно представить в виде системы прогнозных моделей, получаемых из прогнозных экспертных оценок. Reactivity. Реактивность подразумевает короткое время отклика программы. Это особенно важно, если производитель хочет, чтобы пользователь был доволен работой программы. Безопасность. Безопасность применения является одним из наиболее важных факторов для востребованности программы. Она подразумевает высокую степень защищенности критически важных данных, как для пользователя, так и кода самого приложения. Доступность и надежность. Доступность и надежность особенно важны для веб-приложений с большим количеством пользователей. Приложения должны быть способны выдерживать большие нагрузки и обязаны работать даже в нестандартных ситуациях. Выводы по разделу 2 Интерфейс обеспечивает комфортное взаимодействие между пользователем и техникой. При разработке интерфейса программы следует учитывать эргономику и устройства, с которыми будет работать приложение. Пользователь должен быть главным критерием в построении интерфейса и создании дизайна приложений. На Google Play и среди пользователей IOS, больше всего ценится нативность в UX и UI решениях. Так, скелет экрана приложения обычно состоит из Status bar, Navigation bar, Tabbar, Modals/Popovers/Alerts, Search bar, Picker. Прежде чем публиковать приложения, их нужно проверить на соответствие этим критериям, убедившись, что они корректно работают на разных устройствах, отвечающих стандартам платформ по навигации и дизайну. Существуют два основных показателя оценки эффективности: количественный и качественный. Количественные методы UX используются, чтобы понять, что происходит с мобильным приложением. Они редко рассказывают о мотивации и мотивы пользователей, но их можно использовать, чтобы хорошо понять, что они делают в мобильном приложении. Качественные методы UX принимают различные формы и часто используются для создание углубленной картины пользователей. Обычно они используются, чтобы помочь выяснить, почему что-то происходит. 3 РАЗРАБОТКА МЕТОДИКИ ПРОЕКТИРОВАНИЯ ИНТЕРФЕЙСА ОРГАНАЙЗЕРА 3.1 Анализ пользователя Проанализировав современные подходы к проектированию интерфейсов органайзеров были сформированы этапы разработки дизайна интерфейса органайзера: а) анализ пользователя. Для того чтобы разработать хороший пользовательский интерфейс для мобильных приложений требуется для начала узнать своих пользователей. Нужно понять, что мотивирует их пользоваться этим приложением, а затем приступать к разработке; б) создание макета. Варфреймы - это макеты интерфейса будущего мобильного приложения. Все начинается с создания набросков на бумаге. За им создаются шаблоны каждого экрана приложения; в) дизайн интерфейса. Внешний вид является одним из важнейших этапов создание мобильного приложения. Ведь заходя в приложение пользователь в первую очередь обращает внимание именно на это. Но для того, чтобы создать дизайн, который будет привлекать пользователей нужно учесть следующие параметры: 1) особенности гайдлайна платформы ios; 2) уникальность; 3) удобство интерфейса; 4) снижение громкости интерфейса; 5) главные элементы должны быть масштабными; 6) меньше текста и больше визуализации; 7) определенный функционал; 8) проработанная иконка; г) тестирование. Когда дизайн мобильного приложения готов, его остается протестовать. Это помогает выявить недостатки и преподнести клиентам совершенный продукт. Есть несколько способов, чтобы лучше понять, кто является пользователем приложения, каковы их намерения, их потребности и их общие способы мышления. Один из них – оценивать пользовательские сценарии и создавать mood board. Создание четкого портрета клиента поможет определить требования к конструкции приложения: соответствует ли функция, элемент дизайна, кнопка потребностям пользователя. Еще одним важным шагом является проработка пользовательских сценариев – жизненных ситуаций использования приложения. Это помогает лучше понять, как расположить функциональные кнопки и какие из них действительно нужны, а какие нет. Mood board помогает создать цветовую гамму приложения, которая будет вызвать нужные эмоции и чувства у пользователя (рисунок 3.1). Рисунок 3.1 - Пример Mood board Mood board для приложения: - синий-цвет спокойствия, расслабления, погружения в медитацию; - бирюзовый цвет означает исцеление, интуицию, щедрость, независимость, творчество, уверенность, общение и любовь. Этот яркий цвет никого не оставляет равнодушным и очень редко вызывает негативные эмоции; - малиновый в психологии цвета имеет как положительные, так и отрицательные стороны. К плюсам относятся: воображение, страстность, творчество, предприимчивость и стремление к новому. К негативным ассоциациям: возмущение, мятежность, импульсивность, легкомыслие; – согласно психологии цвета, фиолетовый ассоциируется с такими чувствами: свобода, изящество, фантазия, богатство. Отрицательные эмоции, которые также может вызвать фиолетовый-упаднические настроения и подавленность; – белый – самый энергичный цвет, он заряжает человека бодростью, побуждает к деятельности; -серый цвет свободен от любых психологических тенденций – это нейтралитет, граница, отделяющая человека от любых переживаний. 3.2 Создание макета Как бы подробно ни было написано техническое задание, всегда есть большой риск забыть указать какую-то деталь. Как раз для того, чтобы как можно раньше увидеть, как будет построена система взаимодействия мобильного приложения с пользователем, и нужен прототип. Прототип - это динамическая модель продукта, симулирующая взаимодействие пользователя с интерфейсом, с помощью которого можно быстро получить обратную связь от заказчика или представителей целевой аудитории. Чтобы прототип получился интерактивным, нужно прорисовывать все экраны будущего мобильного приложения в специальной программе устанавливая взаимосвязи и ссылки. Прототип позволяет на ранних стадиях попробовать приложение в действии. Заказчику видны все экраны, есть возможность оценить кнопки и другие элементы интерфейса. На этом этапе можно и нужно понять, нуждается ли схема взаимодействия приложения с пользователем каких-либо до обработки. Прототип позволяет: - увидеть приложение в действии и понять, насколько корректно разработчики понимают идею и ТС; - оценить будущее приложение с точки зрения пользователя; - определить, нужно ли вносить изменения в схему взаимодействия приложения с пользователем; - избежать дополнительных финансовых и временных затрат, если обнаружены несоответствия. Для создания макетов интерфейса приложения-органайзера была выбрана программа Figma. Figma – это программа для веб-дизайнеров, с помощью которой можно создавать не только прототипы, но и конечные интерфейсы сайтов и приложений. Процесс работы в программе интуитивно понятен, а возможность совместной одновременной работы над проектом привлекает все больше и больше команд реализации прототипов именно в Figma [16]. Преимущества программы Figma: а) рабочие файлы находятся на собственном облачном хранилище, поэтому можно просто отправить ссылку на файл клиенту или разработчику, не тратя много времени на пересылку и не занимая память компьютера; б) совместное редактирование. С помощью Figma дизайнеры, проектные менеджеры и клиенты могут одновременно комментировать, задавать вопросы и править макеты. Кроме того, можно ограничить статус для каждого участника; в) удобный инструментарий: 1) удобное сопряжение точек и работа с шейпами; 2) создание эффектов, например, тени, занимает считанные секунды; 3) настройки сетки всегда находятся на главном экране; 4)удобный pen tool; 5) направляющие, упрощающие работу; г) многозадачность. Есть возможность работы с более, чем десятью файлами и при этом с высокой скоростью отклика, поскольку производительность продукта на высоте; д) шрифты. При открытии макета можно не переживать, что могут взлететь шрифты, ведь в Figma шрифты тянутся с Google Fonts или автоматически загружаются в проект; е) прототипирование. Когда проект состоит из более, чем 30 экранов становится довольно сложно переключаться с одного на другой – Figma дает возможность собрать все экраны в одном месте и эффективно управлять ими. Так же в программе есть функция-play button. С ее помощью можно сделать приложение интерактивным, тестируя последовательность и логику переходов так, будто приложение готов и загружен на смартфон [17]. Минусом программы является то, что работа в Figma происходит только при подключении к интернету. 3.3 Дизайн интерфейса Дизайн интерфейса является одним из главных показателей качества интерфейса, ведь именно от него зависит останется ли человек в приложении и будет ли ему комфортно им пользоваться. Пользовательский опыт или UI – важная часть создание дизайна. UI говорит нам о том, как пользователь чувствует продукт во время работы и после. Удобство использования или юзабилити приложения обеспечивают простоту использования и интуитивное понимание интерфейса [18]. Особенности гайдлайна платформы iOS. Адаптировать дизайн под другую платформу-неотъемлемая часть работы дизайнера мобильных приложений. Цель этой работы-органично вписать дизайн в паттерны взаимодействия пользователя. К тому же проработанная адаптация упрощает разработку за счет использования нативных компонентов платформы. Чтобы адаптировать дизайн правильно, нужно придерживаться гайдлайны платформ: Human Interface Guidelines (HIG) у iOS [19]. IOS отличается от других платформ тремя основными темами: – отчетливость. Во всей системе текст разный любого размера, значки четкие и ясные, украшения тонкие и уместные, а повышенное внимание к функциональности мотивирует дизайн. Негативное пространство, цвет, шрифты, графика и элементы интерфейса тонко выделяют важный контент и передают интерактивность; – разница. Плавное движение и четкий, красивый интерфейс помогают людям понимать контент и взаимодействовать с ним, никогда не соревнуясь с ним. Контент обычно заполняет весь экран, а полупрозрачность и размытость часто намекают на большее. Минимальное использование лицевых панелей, градиентов и падающих теней делает интерфейс легким и воздушным, обеспечивая при этому первостепенное значение; – глубина. Четкие визуальные слои и реалистичное движение передают иерархию, придают живость и облегчают понимание. Прикосновение и удобство обнаружения усиливают захват и обеспечивают доступ к функциям и дополнительному контента без потери контекста. Переходы создают ощущение глубины при навигации по контенту. Чтобы добиться максимального воздействия и охвата, надо помнить о таких принципах, представляя идентичность приложения: - эстетическая целостность. Эстетическая целостность показывает, насколько хорошо внешний вид и поведение программы сочетаются с его функциями; – последовательность. Согласованная программа реализует знакомые стандарты и парадигмы, используя элементы интерфейса, предоставляемые системой, известные значки, стандартные стили текста и единую терминологию. Приложение включает функции и поведение так, как люди ожидают; - прямая манипуляция. Прямое манипулирование экранным контентом привлекает людей и облегчает понимание; - обратная связь. Обратная связь подтверждает действия и показывает результаты, чтобы держать людей в курсе; - метафоры. Люди учатся быстрее, когда виртуальные объекты и действия приложения являются метафорами для знакомого опыта-будь то реальный или цифровой мир. Метафоры хорошо работают в iOS, потому что люди физически взаимодействуют с экраном. Пользовательский контроль. В iOS все контролируют люди, а не программы. Приложение может предлагать действия или предупреждать об опасных последствиях, но обычно приложение принимает на себя принятие решений ложно. Функциональность. Проведя анализ приложений органайзеров были сделаны выводы и выделенные основные функции, которые должны быть в такого рода приложении и делают работу пользователя с приложением более комфортной. Вот основные, которые были использованы при создании интерфейса органайзера: – календарь. Для многих пользователей - это одна из наиболее важных функций в смартфоне. В каждом смартфоне есть стандартное приложение Календарь и большинство людей ограничиваются только им. Но они обычно не способны предоставить предпочтительный дизайн или функции. Любые события и напоминания привязываются к дате и удобнее всего их просматривать с помощью календаря. Поэтому он обязательно должен быть в приложении органайзере; - учет событий, привязанных к определенной дате и времени. Запись событий в приложение поможет пользователю не упустить, какое-то важное событие или день рождение коллеги. Пользователь указывает дату, время и основные заметки по поводу события; - планировщик задач для контроля их самостоятельного или стороннего выполнение. Ведение задач помогает пользователю следить за выполнением дел в различных сферах жизни, а также упрощает путь к достижению поставленных целей. Пользователь может распределять задачи по приоритетам, срокам достижения целей и обязательности; - сервисы напоминания о событиях, заданных пользователем. Пользователь может создавать напоминания с подзадачами, а также устанавливать оповещение по времени и месту. Можно даже назначить напоминание кому-либо из общего списка; - инструменты для совместной работы. Данные инструменты упрощают взаимодействие между пользователями мобильного приложения. С помощью них пользователи могут делиться событиями, напоминаниями и заметками внутри этого приложения органайзера; – сортировка напоминаний облегчает поиск в данном разделе. Сортировка может проводиться по цвету категории, дате и персонификацией; – функция поиска позволяет быстро найти нужное событие, заметку или напоминание; - чат позволяет пользователям общаться непосредственно в приложении, так как это позволяет быстро обсудить какие-то заметки или задания, а также можно переслать человеку событие внутри приложения, что делает работу намного быстрее. Проработанная иконка. Значок приложения - это уникальное изображение, которое прилагается для каждого мобильного app. Пользователи впервые увидят приложение в App Store и Google Play. На данном этапе пользователь решает – хочет ли он узнать больше о сервис. Хороший значок вызывает интерес, обеспечивает уверенность, убеждает пользователя, что приложение может быть полезен. В то же время, плохая иконка сбивает с толку и ставит под сомнение пользу сервиса. Когда человек его устанавливает, цель значка меняется – это нужно учитывать. Теперь он помогает в поиске приложения на главном экране, среди других значков. Чтобы сделать значок приложения понятным и привлекательным нужно придерживаться данных рекомендаций: – нужно стараться рисовать значок по сетке или, хотя бы, не выходить за края сетки; - при разработке нативного дизайна приложения для именитой компании, стоит объем. Лучше придумать простой и понятный знак, передающий суть приложения, или композицию в фирменном стиле; – иконки для IOS по гайдлайну не предусматривают использование теней, как в Material Design для Android. Здесь нужно полностью ориентироваться на стиль flat; – размеры иконки приложения для передачи разработчикам должны составлять 1024х1024 pt (рисунок 3.2). Рисунок 4.3 - Схема иконки приложения Тестирование. Когда дизайн мобильного приложения готов, его нужно протестировать. Это помогает выявить недостатки и преподнести клиентам совершенный продукт. Существует несколько подходов к тестированию приложений: – фокус-группы. Фокус-группы позволяют получать обратную связь о новом дизайне от большого количества людей. Целевые группы состоят из пользователей, которые могут дать важную информацию о юзабилити приложения; - итерации. Итерационное тестирование подразумевает новое тестирование каждый раз, когда внедряется новая функция. Это позволяет оперативно проверить, смогут пользователи удовлетворять свои потребности и изменить прототип; – тестирование А/Б. A/B тестирование – это сравнение нескольких версий дизайна. Создается несколько отдельных версий с признаками или характеристиками, которые надо сравнить. Затем проверяются версии на фокус-группах. Такой подход позволяет тестировать новые идеи, проверять, действительно ли новый дизайн лучше, чем предыдущий [21]. Проведение тестирования интерфейса приложения позволяет проверить приложение перед его релизом. Это дает возможность исправить недостатки, которые были найдены при проведении тестирования и сделать приложение качественнее. 3.4 Прототипы интерфейса мобильного приложения Перед тем, как начинать разрабатывать прототип приложения надо создать четкий портрет пользователя. Для этого нам нужно выяснить его поведение, демографию и потребности. Проведя анализ было обнаружено, что наш пользователь - это женщина или мужчина в возрасте до 23 лет, который учится в учебном заведении, имеет мало свободного времени и хочет контролировать свое время, иметь четкий распорядок дня и не забывать о назначенных встречах. После того, как портрет пользователя сформирован, надо выбрать цветную палитру мобильного приложения. Исходя из названия приложения и mood board были выбраны следующие цвета: голубой, фиолетовый, бирюзовый, розовый, серый и белый цвета (рисунок 4.5). В первом дизайне интерфейса приложения Status bar и navigation bar выполнены в оттенке голубого (Голубая даль), фон и иконки приложения белого цвета. Рисунок 4.5 - Цветовая гамма мобильного приложения Во втором дизайне интерфейса приложения Status bar и navigation bar выполнены в фиолетовом цвете, фон белого цвета, а иконки приложения выполнены в разных цветах, каждый из которых обозначает определенный раздел в приложении. Теперь зная портрет пользователя и цветовую гамму, можно перейти к прототипированию. Для начала была разработана иконка приложения-органайзера в соответствующей стилистике и учитывая все рекомендации. Иконка, выполненная в размере 1024х1024 pt-это стандартный размер иконки для приложений платформы IOS и Android (рис. 4.6). Рисунок 4.6 - Иконка приложения Так как приложение разрабатывается с соблюдением негативного поведения, шрифт был взят из гайдлайн IOS: SF UI Text. Display (рисунок 4.7). Рисунок 4.7 - Шрифт приложения Скелет данного интерфейса состоит из Status bar, Navigation bar, Search bar. Status bar содержит основную системную информацию, такую как текущий оператор, время, состояние батареи и многое другое. Она визуально связана с панелью навигации и использует ту же фоновую заливку. Цвет контента в строке состояния разработанного мобильного приложения-черный. Исходя из гайдлайн IOS высота статус бара составляет 20 pt. Navigation bar сохраняет в себе основные элементы навигации по приложению и блоки управления для конкретного экрана. Она находится в верхней части под строкой состояния, из которой составляет одно целое. По рекомендациям гайдлайна высота панели без status bar составляет 44 pt (рис. 4.8). Рисунок 4.8 – Status bar и navigation bar дизайна интерфейса Для того, чтобы воспользоваться мобильным приложением расписании пользователь должен запустить приложение на операционной системе Android или iOS. Когда пользователь открывает приложение, он должен авторизоваться для того, чтобы получить доступ к системе. Данное приложение имеет два способа авторизации, рисунок 4.9. Первый – это стандартная авторизация, для прохождения которой, необходимо заполнить поля адреса электронной почты и пароль к существующему аккаунту системы. Второй – использовать существующий аккаунт Google для авторизации, нажав на соответствующую кнопку на экранном интерфейсе, рисунок 4.10. Рисунок 4.9 - Интерфейс авторизации в систему В случае потери пароля к существующему аккаунту системы, пользователь имеет возможность воспользоваться возможностью восстановления пароля нажав на соответствующий текст в нижней части экранного интерфейса. Рисунок 4.10 - Интерфейс регистрации в систему Достаточно ввести адрес электронной почты и подтвердить восстановление пароля. После этого пользователь получает письмо со ссылкой на свою электронную почту. Перейдя по ссылке, пользователь имеет возможность заполнить форму для восстановления пароля, введя новый пароль. После этого он имеет возможность авторизоваться с новым паролем. После авторизации, пользователь мобильного приложения оказывается во вкладке список заметок, рисунок 4.10. Кроме этой вкладки, есть еще вкладка список мероприятий и настроек. Стоит отметить, что каждая вкладка имеет свою собственную навигацию и переходя по ним, история каждой вкладки сохраняется отдельно. Это свойство специально разрабатывалось для удобного пользования функциональными возможностями приложения. Рисунок 4.11 - Интерфейс приложения на вкладке списка заметок Чтобы добавить заметку или в список, достаточно нажать кнопку со знаком «+» в нижнем правом углу интерфейса. Это действие переносит пользователя на страницу создания заметки, рисунок 4.11. Тем не менее, для создания заметок нужно указать, какие данные к ней относятся. Чтобы перейти к странице создания данных, нужно нажать кнопку со знаком «+» в нижнем правом углу интерфейса. На странице создания данных, рисунок 4.12, существует два поля для заполнения. Первым полем может являться название группы, следующим - список имен студентов, и т.д. Рисунок 4.12 – Страница создания заметки в виде группы После заполнения формы, пользователю нужно нажать кнопку подтверждения, находящееся в правом углу верхней панели управления. Если пользователю нужно изменить тип, ему нужно нажать на икону расширения на элементе интерфейса с названием соответствующей группы и выбрать соответствующий элемент. Пользователь всегда имеет возможность удалить созданные курсы, с помощью проведением пальца с правой стороны на левую сторону на интерфейсном элементе, который отвечает за существующую заметку, рисунок 4.14. Приложение сделает запрос подтверждения от пользователя, и в случае успеха удалит заметку из списка. Рисунок 4.14 – Страница заметок и демонстрация удаления элемента из списка На странице изменения расписания разработана расширенная верхняя панель управления, которая позволяет пользователю узнать название курса, создать первую сессию курса, рисунок 4.15 и воспользоваться функциональной возможностью сменить тему или время уже созданной учебной сессии или удалить ее из списка. Когда пользователь нажимает на кнопку создания учебной сессии, на экране появляется модальное окно, предлагающее пользователю дать название созданной учебной сессии. Если пользователь создаст учебную сессию без названия, то она будет создана с темой по умолчанию, которую затем можно переименовать. Рисунок 4.15 – Пример созданной страницы в виде расписания для учебных сессий После создания учебной сессии, в лекционном курсе возле проведенных лекций появляются флажки, позволяющие организовать контроль проведения определенного мероприятия. Пользователь имеет возможность переходить между созданными сессиями с помощью стрелок на верхней панели управления, рисунок 4.16. Приложение информирует пользователя о порядковом номере текущего события или мероприятия, еге теме и дате создания, возможных отменах и переносах. Рисунок 4.16 - Страница контроля проведения и изменения лекционных занятий Стоит отметить, что верхняя панель управления переходами между сессиями курса, обращается при прокрутке списка вниз, чтобы освободить больше места для другой информации. Панель возвращается назад при прокрутке списка вверх. Чтобы изменить данные связанные с отдельным элементом собитий, пользователь должен выполнить зажатие интерфейсного элемента связанного с целевым событием. После этого интерфейсный элемент выделяется желтым цветом, а верхняя панель управления учебным курсом меняется на панель управления выбранным событием. Рисунок 4.17 - Страница настроек аккаунта Нажав на знак аккаунта в верхней панели управления, приложение прокладывает навигационный путь к странице занятия. На этой странице пользователь имеет возможность контролировать посещение выбранного студента на существующих лекционных сессиях по этому курсу. Аналогично работает страница занятия, связанного с практическим курсом. Пользователь может открыть вкладку настроек, в которой он может просматривать и управлять информацией, связанной с созданными им группами или выйти из аккаунта, рисунок 4.17. Аналогично тому, как пользователь может изменить имя занятия или удалить ее из списка в пределах определенного курса, так же пользователь имеет возможность выполнить данные действия в масштабе всего приложения. Это позволяет создавать новые курсы с обновленной информацией о группах. Также, есть возможность удалить группу из списка групп, однако созданные курсы с этой группой останутся, и информация в них также будет сохранена. Удаляя группу, пользователь удаляет шаблон данной группы, нужный для создания курсов. Мобильное приложение для работы требует мобильное устройство с операционной Android версии 4.0.0 и выше или устройство с операционной системой iOS версии 8.0 и выше. Мобильное приложение разработано с помощью языка программирования Dart с использованием инструментальных средств для создания UI – Flutter и сервиса Firebase. Для первого использования приложения пользователь должен иметь подключение к сети интернет для авторизации в систему инструментальных средств. После этого, авторизация является автоматической и все изменения в системе сохраняются локально, в случае отсутствия подключения к сети Интернет. После восстановления подключения к сети все данные синхронизируются. Программа требует инсталляции и ее установочный файл для операционной системы Android можно скачать по ссылке https://drive.google.com/open?id=17KQxZ83jaEkBP2WiO_CQoK1E_q_Fz6I8. 3.5 Метод ранжирования После создания прототипа приложения нужно провести оценку эффективности созданной методики, с помощью которой было создано три варианты дизайна интерфейса. Оценка проводилась с помощью метода ранжирования [22]. Экспертная оценка - это метод, при котором один или несколько экспертов действуют в качестве пользователей и тестируют дизайн, приложения или продукта, чтобы определить препятствия для удобства использования и дать рекомендации по их устранению. В системе метода ранжирования варианты дизайна интерфейсов были сравнительно на основании определенных критериев. Эта система представляет собой сравнительный метод оценки эффективности. Экспертам было продемонстрировано три варианта дизайна программы, и с помощью полученных критериев они проставили ранги для интерфейсов, где 3 является лучшим, а 1 худшим. Критерии оценки качества интерфейсов мобильного приложения: - интуитивность; - функциональность; - понятные пользовательские иконки; - читабельность шрифта; - пересечение области касания. Для проведения оценки качества интерфейсов мобильного приложения, по критерием пересечения области касания, были проанализированы страницы входа, регистрации и главная страница. Результаты оценивания приведены в таблицах 3.1-3.5. После того, как эксперты проставили ранги, был проведен расчет степени согласованности мнения пяти экспертов относительно преимуществ трех вариантов дизайна интерфейса, используя коэффициент конкордации. Коэффициент конкордации – общий коэффициент ранговой корреляции для группы, состоящей из n экспертов. Он определяется по формуле: (3.1) где m - количество альтернатив; n – количество экспертов; S - сумма квадратов отклонений всех оценок рангов каждого объекта экспертизы от среднего значения. Коэффициент W принимает значения в диапазоне от 0 до 1. Таблица 3.1 – Результаты ранжирование вариантов дизайна интерфейса органайзера по критерию интуитивности Вариант Эксперт Срочная сумма Отклонение от средней оценки 10 Квадрат отклонения 1 2 3 4 5 1 1 1 1 1 2 6 -4 16 2 3 3 2 2 1 11 1 1 3 2 2 3 3 3 13 3 9 Общая сумма 30 Сумма квадрата отклонений S 26 Средняя оценка 10 Расчет коэффициента конкордации: Таблица 3.2 – Результаты ранжирование вариантов дизайна интерфейса органайзера по критерию функциональности Варианты интерфейсов Эксперты Срочная сумма Отклонение от средней оценки 10 Квадрат отклонения 1 2 3 4 5 1 1 2 1 2 2 8 -2 4 2 3 3 2 1 1 10 0 0 3 2 1 3 3 3 12 2 4 Общая сумма 30 Сумма квадратов отклонений S 8 Средняя оценка 10 Расчет коэффициента конкордации: Таблица 3.3 – Результаты ранжирование вариантов дизайна интерфейса органайзера за критерием понятных для пользователя иконок Варианты интерфейсов Эксперты Срочная сумма Отклонение от средней оценки 10 Квадрат отклонения 1 2 3 4 5 1 1 2 1 1 2 7 -3 9 2 3 3 2 2 1 11 1 1 3 2 1 3 3 3 12 2 4 Общая сумма 30 Сумма квадратов отклонений 14 Средняя оценка 10 Расчет коэффициента конкордации: Таблица 3.4 – Результаты ранжирование вариантов дизайна интерфейса органайзера по критерию читабельности шрифта Варианты интерфейсов Эксперты Срочная сумма Отклонение от средней оценки 10 Квадрат отклонение 1 2 3 4 5 1 1 2 1 1 1 6 -4 16 2 3 3 3 3 2 14 4 16 3 2 1 2 2 3 10 0 0 Общая сумма 30 Сумма квадратов отклонений 32 Средняя оценка 10 Расчет коэффициента конкордации: Таблица 3.5 – Результаты ранжирования вариантов дизайна интерфейса органайзера по критерию пересечения областей касания Варианты интерфейсов Эксперты Срочная сумма Отклонение от средней оценки 10 Квадрат отклонение 1 2 3 4 5 1 2 3 1 3 2 11 1 1 2 3 2 3 2 3 13 3 9 3 1 1 2 1 1 6 -4 16 Общая сумма 30 Сумма квадратов отклонений 26 Средняя оценка 10 Расчет коэффициента конкордации: Метод ранжирования также принят для определения относительного веса критериев, по которым сопоставлены три варианта дизайна интерфейса органайзера. Результаты ранжирования представлены в таблице 3.6. Следующим шагом рассчитаны относительные веса проектов по предлагаемыми критериями и интегральные рейтинги альтернатив. Результаты вычислений показаны в таблицах 3.7 – 3.12 Таблица 3.5 – Результаты ранжирование вариантов дизайна интерфейса органайзера по критерию пересечения областей касания Варианты интерфейсов Эксперты Срочная сумма Отклонение от средней оценки 10 Квадрат отклонение 1 2 3 4 5 1 2 3 1 3 2 11 1 1 2 3 2 3 2 3 13 3 9 3 1 1 2 1 1 6 -4 16 Общая сумма 30 Сумма квадратов отклонений S 26 Средняя оценка 10 Расчет коэффициента конкордации: Таблица 3.7 – Определение относительной весы вариантов дизайна интерфейса органайзера по критерию интуитивности Варианты интерфейсов Эксперты Срочная сумма Относительная вес альтернативы по критериям 1 2 3 4 5 1 1 1 1 1 2 6 0,2 2 3 3 2 2 1 11 0,366666667 3 2 2 3 3 3 13 0,433333333 Таблица 3.8 – Определение относительной весы вариантов дизайна интерфейса органайзера по критерию функциональности Варианты интерфейсов Эксперты Срочная сумма Относительная вес альтернативы по критериям 1 2 3 4 5 1 1 2 1 2 2 8 0,266666667 2 3 3 2 1 1 10 0,333333333 3 2 1 3 3 3 12 0,4 Таблица 3.9 – Определение относительной весы вариантов дизайна интерфейса органайзера за критерием понятных для пользователя иконок Варианты интерфейсов Эксперты Срочная сумма Относительная вес альтернативы по критериям 1 2 3 4 5 1 1 2 1 1 2 7 0,233333333 2 3 3 2 2 1 11 0,366666667 3 2 1 3 3 3 12 0,4 Таблица 3.10 – Определение относительного веса вариантов дизайна интерфейса органайзера по критерию читабельности шрифта Варианты интерфейсов Эксперты Срочная сумма Относительная вес альтернативы по критериям 1 2 3 4 5 1 1 2 1 1 1 6 0,2 2 3 3 3 3 2 14 0,466666667 3 2 1 2 2 3 10 0,333333333 Таблица 3.11 – Определение относительного веса вариантов дизайна интерфейса органайзера по критерию пересечения областей касания Варианты интерфейсов Эксперты Срочная сумма Относительная вес альтернативы по критериям 1 2 3 4 5 1 2 3 1 3 2 11 0,366666667 2 3 2 3 2 3 13 0,433333333 3 1 1 2 1 1 6 0,2 Таблица 3.12 – Определение относительной весы критериев оценка вариантов дизайна интерфейса органайзера Критерии сравнение интерфейсов Эксперты Срочная сумма Относительная вес альтернативы по критериям 1 2 3 4 5 Интуитивность 5 5 5 4 5 24 0,32 Функциональность 3 4 3 5 4 19 0,253333333 Понятные для пользователя иконки 4 1 4 3 2 14 0,186666667 Шрифт (читаемость) 2 3 2 1 3 11 0,146666667 Сечение области касание 1 2 1 2 1 7 0,093333333 Расчет интегральных рейтингов вариантов дизайна интерфейса: Р1 = 0.2 ∗ 0.32 + 0.267 ∗ 0.253 + 0.23 ∗ 0.187 + 0.2 ∗ 0.147 + 0.367 ∗ 0.93 = 0.24, Р2 = 0.37 ∗ 0.32 + 0.33 ∗ 0.253 + 0.37 ∗ 0.187 + 0.47 ∗ 0.147 + 0.43 ∗ 0.93 = 0.38, Р3 = 0.43 ∗ 0.32 + 0.4 ∗ 0.253 + 0.4 ∗ 0.187 + 0.33 ∗ 0.147 + 0.2 ∗ 0.93 = 0.38. Найдены значение коэффициента конкордации, говорят о высокий степень согласованности мнений экспертов по критерию читабельности шрифта (0,64) и важности критериев (0,712). Исходя из интегральных рейтингов второй и третий варианты дизайна являются наиболее преобладающими (0,38). Выводы по разделу 3 Проанализировав современные подходы к проектированию интерфейсов органайзеров были сформированы этапы разработки дизайна интерфейса органайзера. Как бы подробно ни было написано техническое задание, всегда есть большой риск не указать какую-то деталь. Как раз для того, чтобы как можно раньше увидеть, как будет построена система взаимодействия мобильного приложения с пользователем, нужен прототип. Дизайн интерфейса является одним из главных показателей качества интерфейса, ведь именно от него зависит останется ли человек в приложении и будет ли ему комфортно им пользоваться. Пользовательский опыт или UI – важная часть создание дизайна. UI говорит нам о том, как пользователь чувствует продукт во время работы и после. Перед тем, как начинать разрабатывать прототип приложения надо создать четкий портрет пользователя. Для этого нам нужно выяснить его поведение, демографию и потребности. Мобильное приложение разработано с помощью языка программирования Dart с использованием инструментальных средств для создания UI – Flutter и сервиса Firebase. Чтобы установить программу, достаточно запустить файл на мобильном устройстве,с операционной системой Android. После инсталляции, программа готова к использованию. Найдены значение коэффициента конкордации, говорят о высокий степень согласованности мнений экспертов по критерию читабельности шрифта (0,64) и важности критериев (0,712). Исходя из интегральных рейтингов второй и третий варианты дизайна являются наиболее преобладающими (0,38). 4 ЭКОНОМИЧЕСКАЯ ЧАСТЬ 4.1 Характеристика произведенной работы Целью данного раздела является экономическое обоснование расходов на проведение производимой работы по исследованию процесса разработки UI / UX изданий типа органайзер, предусматривающий расчет трудозатрат и заработной платы работникам, единовременных расходов, оценку экономической эффективности. Реализация предусматривает следующие этапы: - анализ предметной области; - анализ современных подходов к проектированию интерфейсов органайзеров; - анализ существующих критериев и показателей качества интерфейсов мобильных приложений; - разработка методики проектирования интерфейса органайзера; - экспериментальная оценка эффективности методики. 4.2 Этапы выполнения работы, ее трудоемкость и заработная плата В процессе выполнения работы было проанализировано современные подходы к проектированию интерфейсов органайзеров, выбраны критерии и показатели качества интерфейса мобильного приложения, определены параметры, которые есть наиболее важными для приложения, разработана методика создания дизайна интерфейса органайзера по полученным результатам и проведено экспериментальную оценку ее эффективности. Условно работу можно разделить на следующие этапы: подготовительный, основной и заключительный. На подготовительном этапе был проведен анализ рынка мобильных приложений, платформ для разработки мобильных приложений и аналогов приложения, проведенный обзор базовых подходов к проектированию интерфейсов органайзеров, подготовка прототипов интерфейса и анализ существующих критериев качества интерфейсов мобильных приложений. На этапе выполнения основной части работы были выполнены следующие работы: - анализ современных подходов к проектированию интерфейсов органайзеров; - анализ рассмотренных подходов; - создание методики проектирования мобильных интерфейсов органайзеров; - проведение ранжирования; - обработка и анализ результатов эксперимента; - анализ результатов проведения работы. В заключительной части осуществляется оценка эффективности выполнения работы, составление отчета. Наиболее сложной и ответственной частью при планировании работы является расчет трудоемкости работ, потому что трудовые затраты часто составляют основную часть стоимости научно-исследовательских работ и непосредственно влияют на сроки разработки. Для выполнения данной работы было привлечено 7 человек. Средняя заработная плата специалистов была взята с сайта fl.ru. Группу нанятой рабочей силы составили: Данную работу выполняли 3 специалиста: - UI/UX дизайнер-1 человек, заработная плата 34 000 руб. / мес.; - бизнес-аналитик – 1 человек, заработная плата 56 000 руб./мес.; - эксперты для исследования – 5 человек, заработная плата 6 000 руб./мес. Проведем расчет трудозатрат и заработной платы исполнителей работ. Среднедневная заработная плата исполнителя работ (Сср.дн.) рассчитывается по формуле: (4.1) где Сср.мес. – среднемесячная зарплата исполнителя работы; n – число рабочих дней в месяцы, (n = 22). Среднедневная заработная плата UI/UX дизайнера составляет: Среднедневная заработная плата бизнес-аналитика: Среднедневная заработная эксперта исследование составляет: Этапы выполнения, перечень и содержание работ, трудоемкость их выполнения, заработная плата исполнителей работ представлены в таблице 5.1. Список работ Кол-во работников Должность Трудомест- работ, чел.-дней Средне- дневная заро- битная плата, руб. Сумма заро- ботной платы, руб. 1 2 3 4 5 6 1. Подготовительный этап 1.1. Разработка да утверждение ТС 1 UI/UX дизайнер 1 1 545,45 1 545,45 1.2 Подготовка прототипов интерфейса 1 UI/UX дизайнер 1 1 545,45 1 545,45 1.1. Разработка да утверждение ТС 1 UI/UX дизайнер 1 1 545,45 1 545,45 1.2 Подготовка прототипов интерфейса 1 UI/UX дизайнер 1 1 545,45 1 545,45 Продолжение таблицы 6.1 1 2 3 4 5 6 2. Основной этап 2.1 Постановка задачи 1 Бизнес- аналитик 1 2 545,45 2 545,45 2.2 Анализ современных подходов к проектированию интерфейсов органайзеров 1 Бизнес- аналитик 1 2 545,45 2 545,45 2.3 Анализ рассмотренных подходов да отбор по критериям 1 Бизнес- аналитик 2 2 545,45 5 090,9 2.4. Создание методики эксперимента 1 Бизнес- аналитик 1 2 545,45 2 545,45 2.5 Подготовка до эксперимента 1 UI/UX дизайнер 2 1 545,45 3 090,9 2.6 Проведение метода ранжирование 5 Эксперты 6 272,73 1 636,38 2.7 Обработка результатов эксперимента 1 Бизнес- аналитик 2 2 545,45 5 090,9 3. Заключительный этап 3.1 Анализ результатов проведение работы 1 Бизнес- аналитик 1 2 545,45 2 545,45 3.2 Формирование выводов и предложений по теме исследования 1 UI/UX дизайнер 1 1 545,45 1 545,45 3.3 Техническое оформление отчета Исполнения работы 1 UI/UX дизайнер 1 1 545,45 1 545,45 Всего 20 31 272,68 4.3 Расчет одноразовых расходов на разработку Калькуляция себестоимости рассчитывается в соответствии с существующими нормативными актами Российской Федерации. К составу калькуляции входят следующие статьи затрат: - материальные расходы; - расходы на оплату труды; - амортизация основных средств (стоимость машинного времени); - расходы на потребленную электроэнергию; - другие расходы. К другим расходам относятся административные расходы (водоснабжение, водоотвод, отопление, освещение) и стоимость услуг связи. Материальные расходы определяются расходами на материалы, определены их потребностью для исполнения работ, и цен, что действуют на момент составления калькуляции. Для проведения работы требуется: 2 шт. карандашей и 2 шт. блокнот. Данные материальные расходы нужны для UI/UX дизайнера и бизнес-аналитика. Материальные расходы рассчитываются по такой формуле: (4.2) где М – суммарные расходы на материалы, в том числе малоценные предметы быстро изнашиваются (носители, бумага, канцелярское принадлежности тому подобное), или на литературу, какая необходима для проведения работы и т.п.; Q j – количество использованных единиц j -го вида материалов, j =(1 ÷ n); Ц j – цена единицы j -го вида материалов. Расчет материальных расходов представлено в таблице 4.2. Согласно проведенным расчетам расходы на оплату труды исполнителей работы равны 31 272,68 рублей. Таблица 4.2 – Расчет материальных расходов Наименование Ед. изм. Количество Цена, руб Сумма, руб. Карандаш шт. 2 4 8,00 Блокнот шт. 2 100,00 200,00 Всего 4 208,00 Единый взнос на общегосударственное социальное страхование – консолидированный страховой вклад, сбор которого осуществляется в систему общеобязательного государственного социального страхования в обязательном порядке и на регулярной основе с целью обеспечения защиты в случаях, предусмотренных законодательством, прав застрахованных лиц и членов их семей на получение страховых выплат (услуг) за действующими видами общеобязательного государственного социального страхования. Для объекта исследования ставка единого социального взноса равна 30,2 % от расходов на оплату труды, то есть ее размер равен 9 444,34 рублей. При выполнении применялось следующее оборудование: компьютер 2 шт. стоимостью 15 000 руб. и смартфон стоимостью 9 000 руб. Вышеуказанное оборудование является собственностью организации исполнителя, поэтому целесообразно рассчитать сумму амортизационных отчислений на период выполнения НИР. Амортизация основных средств рассчитывается по формуле: (4.3) где АВ - сумма амортизационных отчислений, начисленных при проведении научно-исследовательской работы; ВО