CC BY
37
Научная статья
УДК 004.5:316.472.4
ББК 32.81
K 57
DOI: 10.53598 / 2410-3225-2021-4-291-118-124
Клиентский сервис социальной сети: дизайн и коммуникация
(Рецензирована)
1 2
Марина Айдамировна Коджешау , Назар Павлович Кандельянц
1 2 Адыгейский государственный университет, Майкоп, Россия
1 marina_70@mail.ru
2 nazarkandelyants@gmail.com
Аннотация. На основе анализа существующих современных социальных сетей рассмотрены этапы разработки клиентской стороны пользовательского интерфейса прототипа новой онлайн-платформы "NaSozvone ", реализующей такие функции социальной сети, как передача сообщений, общение, знакомства, создание социальных отношений между людьми, имеющими общие интересы, связанные с работой, музыкой, видео.
Ключевые слова: клиентская сторона пользовательского интерфейса, социальная сеть, дизайн социальной сети, программный код, клиентский сервис, онлайн-сервис, интерфейс, веб-дизайн, веб-пространство
Original Research Paper
Customer service social network: design and communication
12 Marina A. Kodzheshau , Nazar P. Kandelyants
1 2 Adyghe State University, Maikop, Russia
1 marina_70@mail.ru
2 nazarkandelyants@gmail.com
Abstract. Based on the analysis of existing modern social networks, the paper discusses the stages of developing the client side of the user interface of the prototype of the new online platform "NaSozvone ", which implements such social network functions as messaging, communication, dating, creating social relationships between people who have common interests related to work, music, video.
Keywords: the client side of the user interface, social network, social network design, software code, client service, online service, interface, web design, web space
Существующие в современном цифровом пространстве социальные сети включают элементы функционала, которые могут быть улучшены, например, защита права на свободное мнение или возможность персонализировать интерфейс «под себя». Поэтому актуальна разработка для пользователей новых продуктов этого класса, отличающихся от уже имеющихся на рынке.
Объектом исследования является процесс разработки элементов клиентского сервиса социальной сети.
Предметом исследования являются структура, дизайн и коммуникация в современных социальных сетях.
Цель исследования - реализация такого проекта, как социальная сеть, актуализацией знания необходимых технологий для ее создания и умения применить эти средства для расширения спектра социальных сетей.
Сформулированная цель позволила на этапе разработки клиентской стороны пользовательского интерфейса прототипа новой онлайн-платформы с функциями социальной сети, которую решено было назвать "NaSozvone", определить задачи исследования:
- проектирование дизайна основных веб-страниц и модели взаимодействия пользователей друг с другом;
- написание кода для части страницы пользователя.
В ходе исследования были использованы такие методы, как системный подход к объекту разработки, анализ структуры социальной сети и особенностей функционала, изучение литературы и особенностей системы разработки приложения.
Феномен социальной коммуникации тесно связан с социальными сетями. Социальные сети стали неотъемлемой частью нашей повседневности. Виртуальные сообщества становятся объективной реальностью и оказывают влияние на системные свойства социума [1].
Изучению социальных сетей и их роли в обществе посвящены многочисленные исследования [2, 3].
Создание дизайна социальной сети напрямую связано с выбором инструментов реализации проекта. Спектр программ для разработки дизайна веб-приложений широк, начиная от таких «старичков», как Photoshop, заканчивая трендовой Figma. Хотя программное обеспечение компании Adobe изначально было разработано для обработки изображений и не имело ничего общего с веб-дизайном, тем не менее оно было востребовано длительное время из-за отсутствия подходящих инструментов на рынке.
Figma - онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени. В разработке дизайна интерфейса было использовано упомянутое выше приложение в связи с несколькими преимуществами: программа бесплатна (стартовый план данного приложения позволяет пользоваться всеми преимуществами сервиса совершенно бесплатно); имеет интуитивный интерфейс, то есть простота разработки дизайна (в отличие от того же Photoshop Figma предлагает современную, удобную среду для создания дизайна); возможность прототипирования (возможность создания прототипа взаимодействия экранов будущего сайта); наличие режима инспектирования, который позволяет видеть все атрибуты и свойства данного элемента в виде языка CSS, код для IOS или android разработки.
Рассмотрим часть разрабатываемого веб-проекта социальной сети "NaSozvone'^ примерами дизайна страниц сети и реализации с помощью программного кода. Разработка клиентской стороны пользовательского интерфейса разделена на две части:
- разработка дизайна социальной сети, начиная от эскизов и заканчивая готовыми макетами страниц;
- пример программной реализации некоторых элементов.
Далее остановимся на таких понятиях, как UI (User Interface) и UX (User Experience), и их роли в процессе проектирования дизайна для веб-пространства. UX - это опыт пользования, то есть насколько удобно человеку пользоваться данным сайтом, приложением, устройством и т.д. Опыт жизненно важен, потому что он определяет, насколько приятно людям будет вспоминать взаимодействие с теми или иными продуктами. Опыт определяет эмоциональное восприятие процесса взаимодействия с программным продуктом, а также психологическое состояние пользователя при этом. Познание и эмоции тесно переплетаются, а это значит, что дизайнер должен разрабатывать свой продукт, учитывая и то и другое.
Наглядность продукта обеспечивается правильным применением пяти основополагающих психологических принципов: возможности, значения, ограничения, проекции и фидбэка [4]. Вообще, UX выходит далеко за рамки веб-дизайна - это
гораздо более общее понятие и применимо в каждом аспекте жизни.
Чтобы сделать дизайн грамотным и поистине удобным для пользователей, а также для оценки качества разрабатываемой онлайн-платформы, в процессе разработки проведены следующие исследования, которые предоставляют объективную оценку или же обратную связь пользователей: наблюдение, опрос, фокус-группа, интервью.
В ходе наблюдения отсутствует активное участие исследователя во взаимодействии с пользователями социальных сетей. Для лучшего понимания приведем пример. Если дизайнер добавляет новый раздел с оценками на сайт по продажам, то в этом случае наблюдение помогает оценить, насколько люди разобрались с нововведением и насколько интуитивен сам процесс выставления или просмотра оценок. Сбор статистических данных в ходе наблюдения и их анализ позволяет сделать выводы о том, стоит ли что-то изменить или, может, нужно пойти дальше и провести опрос.
Опрос, являясь активным методом исследования, непосредственно вовлекающим пользователей в участие, позволяет провести более глубокий и детальный анализ по сравнению с наблюдением.
Более детальное изучение проблемы построения новой социальной сети было обеспечено использованием метода фокус-группы, который отличается большей детальностью по сравнению с опросом. Минус предыдущего метода состоял в том, что было невозможно определить, насколько правдивыми являются ответы участников, так как человек за неимением времени может давать случайный ответ, совсем не вчитываясь в сами вопросы. В качестве фокус-группы была выбрана группа из 11 человек, активно использующих в своей жизни социальные сети. Их мнение легло в основу корректировки результатов наблюдения и опроса. Нами было учтено, что недостатком этого метода мог быть такой факт, что, когда одни участники встречи, слыша, как другие отвечают диаметрально противоположные мнения, могли изменить свое личное. В силу этого было использовано интервьюирование, которое считается самым глубоким анализом ИХ исследования.
В ходе интервью беседы проводились только с одним человеком. Конечно, интервью могло быть не заключительным звеном в цепи анализа требований и предпочтений пользователей, так как иногда приходится сделать шаг назад, чтобы узнать больше.
Исследование было бы не полным без анализа разницы между хорошим и плохим ИХ. Выделим положения, учтенные в разработке дизайна новой социальной сети и значительно улучшающие опыт взаимодействия:
- небольшие иконки - с одной стороны может показаться, что это незначительный элемент, но данный вид графики помогает пользователю соотнести текст с иконкой, что ускоряет осознание текстового элемента;
- яркая кнопка (саИ-Ш-асйоп) - вместо того, чтобы помещать кнопку продолжения управления в верхний угол, сделав ее блеклой и непоследовательной в иерархии (так как пользователь после выбранных вариантов спускается ниже и ниже по экрану, нужно, чтобы кнопка располагалась, как в варианте справа), дизайнер облегчает задачу пользователю, разместив ее сразу под вариантами ответа;
- шкала прогресса, занимающая маленькую площадь экрана, но при этом сильно помогающая пользователю, сигнализируя ему, какую часть общего объема на странице он уже выполнил, и сколько еще осталось впереди;
- более яркий шрифт и графика - хотя графика относится к Ш, но насколько она динамична и броска, настолько вовлеченным будет и сам пользователь;
- наличие чекбоксов - пунктов выбора меню, которые дают обратную связь пользователю, сигнализируя ему, какие пункты он выбрал, а какие нет (это очень полезное дополнение, так как подсказывает пользователю выполнение действий, которые
он мог забыть).
Перейдем от ИХ к Ш. И1 есть пользовательский интерфейс, то есть как пользователь видит наполнение сайта, приложения и т.д. Иллюстрации, иконки, логотип, фотографии, дудлы (эскизные рисунки), цвета, шрифты - все это является И1. Основные элементы ИХ и И1 представлены на рисунке 1.
Рис. 1. Разница между UX и UI Fig. 1. Difference between UX and UI
Создание концепта новой социальной сети основывалось на анализе существующих аналогов. Многочисленные публикации посвящены техническим вопросам реализации дизайна и функционала социальной сети [5, 6]. Проанализировав общие паттерны, модели устройства и такие элементы, как навигационное меню, страницы друзей, пользователя, регистрации популярных социальных сетей ВКонтакте, Face-book, Twitter, можно было приступать к генерированию идей и их реализации с помощью эскизов. Чтобы сохранить узнаваемость и схожесть структурных элементов социальной сети для пользователей, было решено сохранить общую структуру и, конечно же, внести изменения в интерфейс и персонализацию. На рисунке 2 показаны некоторые элементы будущих интерфейсов "NaSozvone" (страниц музыки, пользователя, друзей и т.д.).
После разработки дизайна прототипы основных страниц были спроектированы в программе Figma. На данном шаге макеты принимают более четкие очертания, соблюдается большая точность. Тем не менее данные макеты могут отличаться от финальных после визуализации прототипов или же, другими словами, создаются макеты высокой точности (High Fidelity Mockups, Hi-Fi Mockups, англ.).
Макет высокой точности создается на основе макета низкой точности с помощью добавления элементов графики, иллюстраций, цветов и т.д. Данный этап - финальный в разработке дизайна и включает подбор дизайнерского наполнения. На рисунке 3 в качестве примера финального оформления прототипа приведена страница входа в аккаунт пользователя.
На всех страницах, входящих в разработанную социальную сеть, предусмотрена персонализация, например, изменение цветовой схемы, создание сообществ, групп, возможность накапливать музыкальные треки и т.д. Далее продемонстрирован код для скрипта, с помощью которого в принципе стала возможна смена цветовых решений путем указания соответствующих классов и специального атрибута "data-mode" для каждой цветовой темы.
Также реализовано локальное хранилище, обращение к которому задает в локальной памяти информацию о выбранной цветовой схеме, чтобы при следующем входе данное хранилище «помнило» выбор пользователя.
Рис. 2. Примеры прототипов основных страниц Fig. 2. Page prototype examples
Рис. 3. Готовая страница входа Fig. 3. Ready login page
Атрибут "data-mode" обеспечивает определение схемы, выбранной пользователем, и после проверки значений этих атрибутов устанавливается соответствующее цветовое решение:
let theme = localStorage.getltem('theme') if (theme = = null) {
setTheme('blue') } else { setTheme(theme)
}
let themeDots = document.getElementsByClassName('header dot') for (var i = 0; themeDots.length > i; i++) {
themeDots[i].addEventListener('click', function () { let mode = this.dataset.mode console.log('Option clicked', mode) setTheme(mode)
})
}
function setTheme(mode) { if (mode = = 'blue') { document.querySelector('.theme-style ').href = 'css/style.css'
}
if (mode = = 'green') { document.querySelector('.theme-style ').href = 'css/green.css'
}
if (mode == 'white') { document.querySelector('.theme-style').href = 'css/white.css'
}
localStorage.setItem('theme', mode) В итоге мы получаем возможность изменять цветовое решение во время пользования социальной сетью. Помимо этого, пользователю предоставляется возможность прослушивать музыку из очереди треков, обмениваться сообщениями в режиме реального времени, организовывать сообщества.
Выводы. Данное исследование позволило выявить основные тенденции разработки пользовательского интерфейса прототипа новой онлайн-платформы "NaSozvone" в кластере социальных систем, а также осуществить проектирование дизайна основных веб-страниц и модели взаимодействия.
Примечания
1. Губанов Д. А., Новиков Д.А., Чхартишвили А.Г. Социальные сети: модели информационного влияния, управления и противоборства. Москва: Физматлит, 2010. С. 3.
2. Дужникова А.С. Социальные сети: современные тенденции и типы пользования // Мониторинг общественного мнения. 2010. № 5 (99). С. 238-251.
3. Кусина О. А. Социальные сети как эффективный инструмент маркетинга в индустрии встреч // Креативная экономика. 2013. № 1 (73). C. 118-123.
4. Норман Дональд. Дизайн привычных вещей / пер. с англ. А. Семиной. 2-е изд, обн. и доп. Москва: Манн, Иванов и Фербер, 2018. 384 с.
5. Create Awesome Web Designs | Layout Design Tutorial. URL: https://www.youtube.com/watch?v=S4viQ_Ejptc&t=8s
6. Web Design for Beginners. URL: https://www.youtube.com/watch?v=HnpsOtIcfbo
References
1. Gubanov D.A., Novikov D.A., Chkhartishvili A.G. Social networks: models of information influence, control and confrontation. Moscow: Fizmatlit, 2010. P. 3.
2. Duzhnikova A.S. Social networks: trends and types of use // Public Opinion Monitoring. 2010. No. 5 (99). P. 238-251.
3. Kusina O.A. Social networks as an effective marketing tool in the meeting industry // Creative Economy. 2013. No. 1 (73). P. 118-123.
4. Norman Donald. The design of everyday things / transl. from English by A. Semina. 2nd ed., revised and enlarged. Moscow: Mann, Ivanov and Ferber, 2018. 384 p.
5. Create Awesome Web Designs | Layout Design Tutorial. URL: https://www.youtube.com/watch?v=S4viQ_Ejptc&t=8s
6. Web Design for Beginners. URL: https://www.youtube.com/watch?v=HnpsOtIcfbo
Авторы заявляют об отсутствии конфликта интересов. The authors declare no conflicts of interests.
Статья поступила в редакцию 1.10.2021; одобрена после рецензирования 29.10.2021; принята к публикации 30.10.2021.
The article was submitted 1.10.2021; approved after reviewing 29.10.2021; accepted for publication 30.10.2021.
© М.А. Коджешау, Н.П. Кандельянц, 2021
