🔍 Поиск работ

Повышение эффективности сайтов коммерческих компаний за счет изменения дизайна ключевых элементов интерфейса

Работа №206354

Тип работы

Дипломные работы, ВКР

Предмет

информационные системы

Объем работы126
Год сдачи2020
Стоимость4285 руб.
ПУБЛИКУЕТСЯ ВПЕРВЫЕ
Просмотрено
14
Не подходит работа?

Узнай цену на написание


ВВЕДЕНИЕ 8
1 СОВРЕМЕННЫЕ САЙТЫ КОММЕРЧЕСКИХ КОМПАНИЙ, ИХ РОЛЬ В
БИЗНЕСЕ И МЕТОДЫ АНАЛИЗА ИХ ЭФФЕКТИВНОСТИ 13
1.1 Понятие и классификация сайтов 13
1.2 Обзор популярных сайтов коммерческих компаний 18
1.3 Типовая структура страницы коммерческого сайта 22
1.4 Роль сайта в доходах бизнеса 23
1.5. Методы анализа эффективности сайта 25
1.5.1 Количественная веб-аналитика 25
1.5.2 Качественная аналитика 32
2 ТЕОРЕТИЧЕСКИЙ ОБЗОР КЛЮЧЕВЫХ ЭЛЕМЕНТОВ ИНТЕРФЕЙСА
САЙТА КОММЕРЧЕСКИХ КОМПАНИЙ 38
2.1 Стили интерфейсов 39
2.2 Требования к адаптивности страниц 48
2.3 Навигация сайта 52
2.3.1 Навигация в Desktop-версии 52
2.3.2 Навигация в Mobile-версии 55
2.4 Кнопки 61
2.5 Поля ввода 69
2.6 Единство стиля 73
3 РАЗРАБОТКА ДИЗАЙНА КЛЮЧЕВЫХ ЭЛЕМЕНТОВ ИНТЕРФЕЙСА
САЙТА КОМПАНИИ «ИНТЕРСВЯЗЬ» 79
3.1 История компании Интерсвязь 79
3.2 Выявление недостатков существующего сайта компании
«Интерсвзязь» 80
3.3 Разработка кнопок и полей ввода 86
3.4 Разработка стилей типографики 89
3.5 Разработка системы отступов и сетки 92
3.6 Создание правил по созданию и отрисовка иконок 94
3.7 Разработка тарифов на услуги доступа в Интернет 95
3.8 Проектирование блоков сайта и их адаптивность 99
3.8.1 Первый блок 99
3.8.2 Блок преимуществ 100
3.8.3 Блок шагов для выполнения чего-либо 100
3.8.4 Блок промежуточной формы заявки 100
3.8.5 Блок о мобильном приложении 101
3.8.6 Блок часто задаваемых вопросов 101
3.8.7 Блок с формой обратной связи 102
3.8.8 Блок новостей 102
3.9 Разработка универсального шаблона страницы 103
3.10 Создание рабочей страницы 103
3.11 Разработка навигации сайта 104
4 РАСЧЕТ ЭФФЕКТИВНОСТИ РЕДИЗАЙНА КЛЮЧЕВЫХ ЭЛЕМЕНТОВ
САЙТА ДЛЯ КОМПАНИИ «ИНТЕРСВЯЗЬ» 107
4.1 Прогноз повышения эффективности сайта как канала продаж за счет
редизайна ключевых элементов 107
4.2 Расчет экономии трудозатрат на создание новых страниц с помощью
библиотеки стилей, универсальных блоков и шаблона страницы 109
ЗАКЛЮЧЕНИЕ 114
БИБЛИОГРАФИЧЕСКИЙ СПИСОК 117
ПРИЛОЖЕНИЯ ПРИЛОЖЕНИЕ А 121
ПРИЛОЖЕНИЕ Б

В 1984 году была разработана система доменных имён, так человек создал всемирную информационную компьютерную сеть - Интернет. В России Интернет появился в 1991 году, и с тех пор покрытие сети становится все шире и масштабнее.
По статистике International Telecommunications Union (ITU) на конец 2019 года, количество людей, которые пользуются Интернетом, составляет 53,6% от мирового населения, что составляет 4,1 миллиарда людей [1].
Интернет нужен не только для работы, он вошел в нашу повседневную жизнь. Многие люди уже не могут представить себя без ежедневного просмотра новостей со всего мира, общения с близкими, которые находятся в других городах и странах, онлайн-игр, онлайн-обучения, поиска новых рецептов, плана тренировок или просто просмотра сериала после тяжелого рабочего дня.
И для всех этих привычных вещей нужен не просто Интернет, нужна оболочка, с помощью которой каждый пользователь сможет получать и воспринимать информацию. Для решения этой задачи были разработаны web- сайты. Именно это средство взаимодействия человека со всемирной информационной сетью помогает достичь конечной цели - получения необходимой информацией.
В наши дни любой сайт - это инструмент, приносящий прибыль. С помощью своей страницы в интернете любая компания может:
- продавать свои услуги или товары;
- публиковать новости и зарабатывать на размещении рекламы;
- публиковать полезный для пользователя контент, что напрямую не приносит прибыль владельцам, но влияет на отношение потенциальных клиентов к бренду, тем самым располагая к себе или производя негативное впечатление о компании.
Сайт - это часть компании, которая часто формирует первое впечатление о фирме у пользователя. Именно поэтому ни один бизнес не хочет выглядеть плохо при первой встрече, чтобы не упускать потенциальных клиентов. Таким образом, в наши дни сайт компании - это ее лицо. А в связи с последними событиями по борьбе с коронавирусом, когда наибольшая часть населения оказалась дома на карантине или перешла на удаленную работу и обучение, сайты стали главным связующим звеном человека с внешним миром.
Так встает вопрос: «Что необходимо сделать, чтобы сайт был хорошим инструментом, который приносит прибыль?» В первую очередь, сайт должен быть полезным как можно большему количеству посетителей. А для решений этой основополагающей задачи есть ряд рекомендаций, которые необходимо соблюдать в проектировании или редизайне сайта:
- удобная навигация;
- приятный, чистый и современный внешний вид;
- продуманная структура и иерархия страниц;
- наличие и правильная расстановка акцентов для управления вниманием пользователя;
- отсутствие информационного мусора;
- ясное понимание ключевых направлений деятельности компании с первых секунд взаимодействия с сайтом.
Все эти и многие другие рекомендации могут кардинально изменить поведение пользователей на сайте в лучшую сторону, смогут привлечь дополнительную прибыль для компании.
Вследствие этого, в рамках данной выпускной квалификационной научно исследовательской работы необходимо выявить ключевые элементы интерфейса сайта и их существующие варианты их дизайна, выявить те варианты, которые наилучшим образом влияют на эффективность сайта, сформировать и внедрить рекомендации по улучшению элементов корпоративного сайта компании Интерсвязь.
Актуальность исследования заключается в том, что данная работа освещает проблемы построения понятного современного сайта. Лавинообразный рост количества разнообразных web-сайтов в сети Интернет, в том числе и корпоративных сайтов, потребовал осмысления накопленных эмпирических данных их визуальной составляющей, а также создания рекомендаций по дизайну ключевых элементов сайта.
В работе рассматривается проблема создания удобных и эффективных интерфейсов, так как в связи с постоянным появлением новых трендов в web - дизайне трудно распознать, какие элементы интерфейса действительно работают, а что является просто развлечением дизайнеров и останется картинками на Dribbble.
За последние несколько десятилетий сайты потерпели значительную визуальную трансформацию интерфейса, связанную с появлением новых парадигм пользовательского опыта, скорости взаимодействия, проекций человека элементов интерфейса на привычный мир физических вещей. Сегодня компаниям нужен не просто сайт, а эффективное многофункциональное представительство в Интернете.
В ходе исследования были выделены основные современные тенденции применения элементов интерфейса в web-сайтах.
Цель работы заключается в выявлении влияния дизайна ключевых элементов на эффективность сайтов коммерческих компаний на примере сайта компании «Интерсвязь».
В основу исследования положен анализ ключевых элементов страницы, благодаря которым пользователи понимают как взаимодействовать с представленным интерфейсом. На основе анализа существующих примеров элементов сайта были выявлены наиболее эффективные и узнаваемые пользователями современные элементы web-интерфейса.
Для достижения поставленной цели были поставлены следующие задачи:
- анализ существующих сайтов коммерческих компаний, выявление ключевых элементов интерфейса;
- обзор методов анализа эффективности сайта;
- обзор и анализ исследований на эффективность ключевых элементов интерфейса;
- анализ фокусной компании;
- разработка дизайна ключевых элементов сайта и блоков страницы на их основе для сайта фокусной компании, на базе имеющихся теоретических знаний и прикладных задач;
- подсчет экономической эффективности разработанных элементов.
Объектом являются ключевые элементы сайтов коммерческих компаний.
Предмет - это дизайн ключевых элементов сайтов коммерческих компаний.
Гипотезой данной работы выступает предположение о том, что частичное внедрение современных паттернов и элементов взаимодействия с интерфейсом может улучшить качество взаимодействия, что повлияет на ключевые показатели коммерческого сайта.
Научная новизна работы заключается в том, что был проведен анализ и выявлены наиболее эффективные варианты визуального представления ключевых элементов сайта, наилучшим образом влияющие на конверсию и юзабилити.
Обоснована экономическая эффективность использования универсального шаблона страницы.
Практическая значимость исследования состоит в совершенствовании дизайна сайта компании «Интерсвязь» для повышения качества взаимодействия пользователя с сайтом с целью увеличения эффективности сайта как канала продаж, а также увеличении скорости разработки новых страниц.


Возникли сложности?

Нужна помощь преподавателя?

Помощь в написании работ!


В 2020 году в условиях жесткой конкуренции в Интернет пространстве от эффективности и рентабельности сайта коммерческой компании может зависеть ее существование, особенно учитывая сложившуюся обстановку в мире в связи с самоизоляцией, когда компании не могут предоставлять услуги и общаться с клиентом в живую. Поэтому проблема выявления и создания наиболее удобных и эффективных веб-интерфейсов является актуальной и значимой для бизнеса.
В связи с этим автор в данной работе провел обзор 48-ми сайтов коммерческих компаний популярных на российском рынке в 2020 году и на их основании выявил ключевые элементы интерфейса, которые в обязательном порядке должны присутствовать на сайте. Для лучшего понимания, за счет каких показателей сайт может быть эффективнее, автором были рассмотрены основные количественные и качественные методы анализа эффективности.
После определения ключевых элементов и требований к визуальному представлению современных сайтов, были рассмотрены исследования популярных научно-прикладных групп аналитиков и дизайнеров интерфейсов, с целью выявления наиболее эффективного дизайна интерфейса сайта и его ключевых элементов. Автор рассмотрел историю развития веб-интерфейсов, основные стили и популярные веяния 2020 года, отметил важность наличия адаптивности страниц к разнообразным разрешениям экранов. Был проведен сравнительный анализ трех типов навигации на мобильных устройствах, а также рассмотрены общие требования к удобной и понятной навигации сайта как на мобильных, так и на ПК версии сайта. Автором были рассмотрены исследования и пользовательские тестирования, направленные на повышение эффективности полей ввода и кнопок в интерфейсе сайта. Был проведен обзор нескольких популярных библиотек стилей (Ui kit) и освещен вопрос необходимости и важности соблюдения согласованности элементов сайта между собой.
После изучения теоретических аспектов дизайна ключевых элементов интерфейса автор проанализировал фокусную коммерческую компанию «Интерсвязь» и ее сайт, выявил основные ошибки и недостатки интерфейса. После этого были спроектированы новые базовые элементы интерфейса сайта, а именно: кнопки, поля ввода, отступы, правила типографики и создания иконок. На базе данных компонентов автор разработал новый дизайн тарифов, первый экран для всех внутренних страниц сайта, блок о мобильном приложении, форму заявки, блок новостей и другие повторяющиеся блоки сайта. В результате чего был получен универсальный шаблон внутренней страницы, на базе которого был сделан новый дизайн-макет страницы «Интернет в частный дом». Помимо дизайна внутренних страниц сайта, автор предложил новый современный вариант навигации сайта, который должен повысить удобство пользования сайтом.
Для подтверждения гипотезы данной работы о том, что частичное внедрение современных паттернов и элементов взаимодействия с интерфейсом может улучшить качество взаимодействия, что в свою очередь должно повлиять на ключевые показатели коммерческого сайта, автор произвел подсчет экономической эффективности при внедрении нового дизайна ключевых элементов интерфейса и блоков сайта. В результате чего получил данные о возможной выгоде для бизнеса по двум направлениям:
1. Повышение эффективности сайта как канала продаж, что поспособствует увеличению количества абонентов.
2. Снижение трудозатрат при разработке новых и редизайне существующих страниц сайта.
Таким образом, цель работы достигнута, задачи - решены.
Основной сложностью при написании данной работы было выявление действительно эффективно работающих элементов сайта. Автор ставил в приоритет поиск доказательств и исследований по тестированию существующих вариантов современного представления компонентов интерфейса, поскольку фантазия дизайнеров становится более неудержимой, чем раньше, а результатов подтверждения экономической выгоды для бизнеса нет или они находятся под коммерческой тайной.
Результаты работы рекомендуется использовать при разработке новых страниц корпоративного сайта компании «Интерсвязь». Выполненная работа имеет практическую ценность и рекомендована для апробации в фокусной компании.



1 Statistics of using the Internet. [Электронный ресурс]. - URL:https://www.itu.int/en/ITU-D/Statistics/Pages/stat/default.aspx (дата обращения: 29.04.2020)
2 Информатика. Энциклопедический систематизированный словарь- справочник. / Воройский Ф. С. // М.: Физматлит, 2006. - С. 508. - 945 с.
3 Большая российская энциклопедия. Том 29. / Шилов В. В. С // Москва, 2015. - С. 216
4 Новый словарь русского языка Ефремовой / Ефремова Т. Ф. // М.: Русский язык, 2000. - С. 862.
5 Кривцов, А.Н. Реинжиниринг сайтов: классификация, виды и основные этапы анализа. / А.Н. Кривцов, В.Д. Москалева // сборник научных трудов по итогам международной научно-практической конференции «Развитие технических наук в современном мире». - 2016. - Вып. 3. - С. 115-119
6 Большой юридический словарь. - М.: Инфра-М. А. Я. Сухарев, В. Е. Крутских, А.Я. Сухарева. - 2003.
7 Уэйншенк С. 100 новых главных принципов дизайна. Как удержать внимание / С. Уэйншенк - Изд-во: Питер, 2016. 290 с.
8 Мелихов Д. Веб-аналитика: шаг к совершенству / Д. Мелихов, И. Сарматов - Киев, 2010 г. - 112 с.
9 Полное руководство новичка по UX исследованию. [Электронный ресурс]. - URL: https://medium.com/@grifer163/полное-руководство-новичка-по- ux-исследованию-319d69c928cb (дата обращения: 25.03.2020)
10 My favorite usability testing question . [Электронный ресурс]. - URL: https://medium.com/purpledesign/my-favorite-usability-test-question-62fbe3aa9373(дата обращения: 25.03.2020)
11 История веб-дизайна. [Электронный ресурс]. - URL: https://webevolution.ru/blog/sajti/istoriya-veb-dizajna/(дата обращения: 02.05.2020)
12 Эволюция веб дизайна - с 2000 -х до реалий 2020 [Электронный ресурс]. - URL: https://spark.ru/startup/templatemonster/blog/55633/evolyutsiya-veb-dizajna-s-2000-h-do-realij-2020 (дата обращения 29.03.2020)
13 Норман Д. Дизайн привычных вещей / Д. Норман - Изд-во: Манн, Иванов и Фербер, 2018. - 384 с.
14 Global digital population as of April 2020. [Электронный ресурс]. - URL:
https://www.statista.Com/statistics/617136/digital-population-worldwide/ (дата
обращения: 02.05.2020)
15 Number of mobile internet users in Russia from May 2016 to August 2019.
[Электронный ресурс]. - URL: https://www.statista.com/statistics/1089090/russia-
mobile-internet-audience/ (дата обращения: 02.05.2020)
16 Технологическое развитие отраслей экономики. Число активных абонентов, имеющих доступ к сети Интернет, на конец отчетного периода. [Электронный ресурс]. - URL: https://www.gks.ru/folder/11189 (дата обращения: 07.05.2020)
17 The Tipping Point: one in two humans now carries a mobile phone. [Электронный ресурс]. - URL: https://newatlas.com/mobile-phone-penetration/8831/(дата обращения: 07.05.2020)
18 Responsive Web Design. [Электронный ресурс]. -
URL: https://alistapart.com/article/responsive-web-design/ (дата обращения:
11.05.2020)
19 Маркотт И. Отзывчивый веб-дизайн / И. Маркотт - Изд-во: Манн, Иванов и Фербер, 2012. - 176 с.
20 § 177. Мобильные версии сайтов. [Электронный ресурс]. -
URL: https://www.artlebedev.ru/kovodstvo/sections/177/ (дата обращения:
20.05.2020)
21 § 182. Мобильные версии сайтов два года спустя. [Электронный
ресурс]. - URL: https://www.artlebedev.ru/kovodstvo/sections/182/ (дата обращения: 07.05.2020)
22 Centered Logos Hurt Website Navigation. [Электронный ресурс]. - URL:https://www.nngroup.com/articles/centered-logos/ (дата обращения: 11.05.2020)
23 Homepage Links Remain a Necessity [Электронный ресурс]. - URL: https://www.nngroup.com/articles/homepage-links/(дата обращения: 27.04.2020)
24 Jakob’s Law. [Электронный ресурс]. - URL: https://lawsofux.com/jakobs-law.html (дата обращения: 20.03.2020)
25 10 Good Deeds in Web Design. [Электронный ресурс]. -
URL: https://www.nngroup.com/articles/ten-good-deeds-in-web-design/ (дата
обращения: 27.04.2020)
26 Basic Patterns for Mobile Navigation: A Primer [Электронный ресурс]. - URL: https://www.nngroup.com/articles/mobile-navigation-patterns/ (дата обращения: 27.04.2020)
27 Spotify ditches the controversial ‘hamburger’ menu in iOS app redesign [Электронный ресурс]. - URL: https://techcrunch.com/2016/05/03/spotify-ditches-the- controversial-hamburger-menu-in-ios-app-redesign/(дата обращения: 30.04.2020)
28 How Do Users Really Hold Mobile Devices? [Электронный ресурс]. - URL: https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile- devices.php(дата обращения: 01.05.2020)
29 Мобильный UX-дизайн: нижняя навигация [Электронный ресурс]. - URL: https://ux.pub/mobilnyj-ux-dizajn-nizhnyaya-navigaciya/(дата обращения: 04.05.2020)
30 Круг, С. Не заставляйте меня думать. Веб-юзабилити и здравый смысл / С. Круг. - 3-е изд. - Изд-во: Бомбора, 2017. - 256 с.
31 Let’s do this! How to write better calls to action. [Электронный ресурс]. -
URL: https://medium.com/deliveroo-design/lets-do-this-how-to-write-better-calls-to-
action-ea534768b599 (дата обращения: 04.05.2020)
32 Все, что вам нужно знать о дизайне кнопок в интерфейсе. [Электронный
ресурс]. - URL: https://ux.pub/vse-chto-vam-nuzhno-znat-o-dizayne-knopok-v-
interfeyse/ (дата обращения: 29.04.2020).
33 Conradi, Optimal touch button size for the use of mobile devices while walking / J. Conradi, O. Busch, А. Thomas // 6th International Conference on Applied Human Factors and Ergonomics (AHFE 2015) and the Affiliated Conferences AHFE - 2015. - С. 387 - 394
34 Call to Action (CTA). [Электронный ресурс]. - URL:
https://www.investopedia.com/terms/c/call-action-cta.asp (дата обращения:
29.04.2020)
35 Купер А., Рейманн Р. М. Алан Купер об интерфейсе. Основы проектирования взаимодействия. - М.: Символ-Плюс, 2009.
36 Что такое кнопки-призраки и почему их нужно бояться. [Электронный ресурс]. - URL: https://habr.com/ru/company/digital-ecosystems/blog/341914/(дата обращения: 29.04.2020)
37 Flat UI Elements Attract Less Attention and Cause Uncertainty. [Электронный ресурс]. - URL: https://www.nngroup.com/articles/flat-ui-less- attention-cause-uncertainty/(дата обращения: 07.05.2020)
38 Text fields. [Электронный ресурс]. - URL:
https://material.io/components/text-fields (дата обращения: 10.05.2020)
39 The Evolution of Material Design’s Text Fields. [Электронный ресурс]. - URL: https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03 (дата обращения: 10.05.2020)
40 Principles of Visual Design: Designing for Coherence. [Электронный ресурс]. - URL: https://medium.com/@Kessyena/principles-of-visual-design-designing-for-coherence-b1c77e408165 (дата обращения: 12.05.2020)
41 Bennett, Display and Interface Design / K. B. Bennett, J. M. Flach. - CRC Press, 2011 - 510 P. - P. 457 - 458
42 Развитие дизайн-системы: Как мы создавали Slack Kit. [Электронный ресурс]. - URL: https://ux.pub/razvitie-dizayn-sistemy-kak-my-sozdavali-slack-kit/(дата обращения: 13.05.2020)


Работу высылаем на протяжении 30 минут после оплаты.




©2026 Cервис помощи студентам в выполнении работ