Научная статья на тему 'ОПТИМИЗАЦИЯ ДИЗАЙН-ПРОЕКТИРОВАНИЯ И МАКЕТИРОВАНИЯ КЛИЕНТСКИХ ВЕБ-ИНТЕРФЕЙСОВ'

ОПТИМИЗАЦИЯ ДИЗАЙН-ПРОЕКТИРОВАНИЯ И МАКЕТИРОВАНИЯ КЛИЕНТСКИХ ВЕБ-ИНТЕРФЕЙСОВ Текст научной статьи по специальности «Компьютерные и информационные науки»

CC BY
39
7
i Надоели баннеры? Вы всегда можете отключить рекламу.
Ключевые слова
ИНТЕРФЕЙС / ОПТИМИЗАЦИЯ / СПОСОБЫ ОПТИМИЗАЦИИ / МАКЕТИРОВАНИЕ / ПРОЕКТИРОВАНИЕ

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Никулушкина Ю.А., Шуклин Д.А.

Работа выполнена в рамках темы НИР № 615892 «Исследования и разработки в области информационных технологий». В данной статье рассмотрены наиболее популярные способы оптимизации интерфейсов.

i Надоели баннеры? Вы всегда можете отключить рекламу.

Похожие темы научных работ по компьютерным и информационным наукам , автор научной работы — Никулушкина Ю.А., Шуклин Д.А.

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.

Текст научной работы на тему «ОПТИМИЗАЦИЯ ДИЗАЙН-ПРОЕКТИРОВАНИЯ И МАКЕТИРОВАНИЯ КЛИЕНТСКИХ ВЕБ-ИНТЕРФЕЙСОВ»

Использованные источники:

1.В.А. Втюрин, Автоматизированные системы управления технологическими процессами [Текст]. 2.8САБЛ ¡пйпйу.Модуль ОРС АЕ [Текст].

УДК 001.201

Никулушкина Ю.А. магистрант, 2 курс

Факультет методов и техники управления "Академия ЛИМТУ" кафедра компьютерного проектирования и дизайна

Россия, г. Санкт-Петербург Научный руководитель: Шуклин Д.А., к.п.н., доцент

старший преподаватель зав. кафедрой КПиД ОПТИМИЗАЦИЯ ДИЗАЙН-ПРОЕКТИРОВАНИЯ И

МАКЕТИРОВАНИЯ КЛИЕНТСКИХ ВЕБ-ИНТЕРФЕЙСОВ

Работа выполнена в рамках темы НИР № 615892 «Исследования и разработки в области информационных технологий».

В данной статье рассмотрены наиболее популярные способы оптимизации интерфейсов.

Ключевые слова: интерфейс, оптимизация, способы оптимизации, макетирование, проектирование.

Сегодня разработка веб-сайтов и приложений, способных привлечь и удержать клиентов, становится чем-то вроде науки. Интуитивный и привлекательный пользовательский интерфейс помогает людям в решении множества проблем и задачей разработчика является создание такой системы.

Что такое оптимизация? Оптимизация простыми словами — это приведение программы от состояния «не устраивает» до состояния «устраивает» по параметрам производительности (время выполнения, потребление ресурсов, пропускная способность). Дизайн — это не только внешнее оформление web-сайта, но и привлекательность и удобство для пользователей. Для крупных фирм и солидных компаний это еще и имидж, запоминаемость.

Каким должен быть интерфейс?

Графический интерфейс пользователя является одной из самых важных частей любой компьютерной программы или системы. От него зависит скорость и качество выполнения работы. Требования к интерфейсу у каждого клиента разные, но есть один общий момент - интерфейс должен быть интуитивно понятным. Это значит, что, когда пользователь начинает пользоваться системой - он интуитивно понимает какие кнопки нужно нажать для достижения ожидаемого результата. Поэтому при создании

пользовательского интерфейса следует использовать наиболее широко известные всем практики, при создании интерфейса.

Для очевидности желательно, чтобы пользователю были доступны и видны все элементы управления, которые необходимы для выполнения задач на текущем этапе. Немаловажную роль играют сообщения пользователю об ошибках или об успешном выполнении сценария, или предупреждения.

Ненавязчивость интерфейса также очень важна. Так, например, пользователю доставит массу неудобств, при выполнении задачи, система каждый раз запрашивает подтверждения совершения действия.

Хотелось бы отметить, что обычно системы разрабатываются для какой-то определенной предметной области. В этих системах, для интуитивной понятности, интерфейс должен быть выражен в терминах её предметной области.

Несомненно, каждому пользователю программного обеспечения знакомы такие элементы управления как меню, формы ввода данных, диалоги, инструментальные панели и т.п. Уже, можно сказать, разработаны стандарты оформления пользовательского интерфейса. Естественно, их стоит придерживаться, это повысит понятность интерфейса.

Для очевидности интерфейса, желательно чтобы пользователю были доступны и видны все элементы управления, которые необходимы для выполнения задачи на текущем этапе. На отдельном этапе, пользователю, скорее всего, не нужна вся мощь системы, поэтому лишние элементы можно скрыть. Элементов нужных для выполнения одной конкретной задачи не должно быть слишком много.

Также, следует помнить, что кнопки можно делать многофункциональными. Т.е. когда одна кнопка выполняет несколько задач, в зависимости от того на каком этапе находится пользователь. Иначе, было бы неправильно предоставлять пользователю разные элементы управления для одинаковых задач.

Способы оптимизации для web-страниц и их предназначение:

1. Внешняя оптимизация — это процесс продвижения сайта в поисковых системах. Подобная оптимизация нужна для поднятия сайта в ТОП поисковых систем по нужным запросам, а также, для увеличения посещаемости сайта. Основным инструментом являются внешние ссылки с нужным текстом (анкором). Текст ссылки должен состоять из ключевого слова, по которому планируется продвигать отдельную страницу.

2. Оптимизация контента сайта для пользователей ПК и мобильной аудитории. Все чаще разработка сайтов происходит с учетом интересов мобильных пользователей в первую очередь. Мобильная интернет-аудитория растет, и сегодня есть большое число пользователей, которые посещают сайты исключительно с мобильных устройств. Поэтому современные сайты должны обязательно «подстраиваться» под такую аудиторию, чтобы оставаться востребованными и популярными. Создание

адаптивного сайта - отличный повод для того, чтобы взглянуть на контент другими глазами, сделать его более читаемым и легкодоступным, вне зависимости от того, на каком устройстве его просматривает пользователь.

3. Оптимизация загрузки сайта. Скорость загрузки сайта является одним из важных факторов поискового ранжирования, а также имеет влияние на формирование впечатления посетителей от работы с сайтом. Если эта скорость низкая, то это может привести к ухудшению индексации сайта поисковыми системами и к снижению лояльности посетителей. Поэтому для увеличения скорости используются следующие инструменты:

• Оптимизировать таблицы каскадных стилей (CSS)

• Оптимизировать файлы Javascript.

• Оптимизировать содержимое страниц сайта.

• Оптимизировать модули и компоненты сайта.

• Использовать кэширование.

4. Создание прототипа и скетчинг. После разработки контентной стратегии и инструментария, внедрение скетчинга в процесс адаптивного проектирования поможет создать умный, организованный макет, который легко масштабируется.

5. Использование фреймворков. Выбор фреймворка зависит от идеологии проекта и личных предпочтений, но внедрение его в рабочий процесс создания адаптивного сайта имеет массу преимуществ. Использование фреймворков может ускорить процесс разработки, нормализовать стандартные проблемы кросс-браузерной.

6. Минификация - это практика удаления ненужных символов из кода (без потери его функциональности) для уменьшения его размера и повышения скорости загрузки. Этими ненужными символами могут быть пробелы, табы, переводы строк и комментарии, которые удаляются для минификации кода, оставляя при этом все его качества неизменными, но сокращая общий вес.

7. Минимизация ошибок пользователя. Интерфейс должен свести к минимуму ошибки пользователя. Для этого нужно использовать то, о чём говорилось в предыдущих пунктах: это и многочисленные подсказки, и всевозможные ненавязчивые проверки, и отсутствие скрытых элементов управления. Всё это служит нашей цели минимизации ошибок. Но ещё неизвестно, какой из пунктов будет наиболее значимым в борьбе с пользовательскими ошибками. Ведь каждый конкретный человек, имеет уникальный опыт, подготовку, привычки и квалификацию. Поэтому, для эффективного интерфейса нужно использовать весь комплекс вышеперечисленных мер

8. Проверка данных. При работе с системой пользователю очень поможет ненавязчивая проверка данных. Проверка введенных данных должна быть предусмотрена на каждом этапе. Например, проверка условия, когда нужно вводить только положительное целое число, или условия, когда

значение поля должно быть уникальным, и не совпадать со значением этого же поля, но другого элемента. После этого должны быть сформированы сообщения об ошибках к нужным формам и выданы пользователю системы.

Процесс проектирования пользовательского интерфейса

Проектирование интерфейса по шагам поможет выявить основополагающие моменты для разработчика, на которые стоит опираться при создании системы:

1. Составить портрет пользователя и список его целей. Цели можно разбить на задачи, которые пользователю предстоит решить. И составить список задач для каждой цели.

2. Написать пользовательские сценарии в соответствии со списками задач. Сценарии вида: «пользователь сделал - система ответила».

3. Составить список страниц интерфейса в соответствии со сценариями.

4. Составить структуру навигации. Т.е. последовательность исполнения сценариев. Необходимо поставить акцент на важные сценарии.

5. Описать все страницы интерфейса.

Использованные источники: 1Алан Купер, Об интерфейсе. Основы проектирования взаимодействия. [Текст]. - СПб.: Символ-Плюс, 2009. - 688 с., ил. Сазерленд, Д. Революционный метод управления проектами - М.: МИФ, 2015. - 288 с. 2.Сергеев С. Ф., Методы тестирования и оптимизации интерфейсов информационных систем: учебное пособие. - СПб: НИУ ИТМО, 2013. - 117 с.

З.Обзор сервисов для управления проектами [Электронный ресурс]. - Режим доступа: https://habrahabr.ru/post/276873/ (дата обращения: 12.01.2017), своб.

i Надоели баннеры? Вы всегда можете отключить рекламу.