Разработка пользовательских интерфейсов. Веб

Разработка пользовательских интерфейсов. Веб-дизайн.
Введение
Как говорится в известной русской пословице «Встречают по одежке…». Данное
высказывание применимо также и к разного рода программным продуктам. Уже давно
доказано, что в первую очередь потребитель обращает внимание на яркую, привлекательную
упаковку, и только потом задумывается о содержимом этой упаковки. Точно так же и в среде
информационных технологий. Заметив яркую обложку диска с компьютерной игрой, человек
ею заинтересуется. Стильные, красивые сайты привлекательны для пользователей, а новый
интерфейс операционной системы является для многих потенциальных пользователей этой
системы стимулом, чтобы ее выбрать. Выбирая технику, человеку во многом важно не
только то, насколько качественно она работает, но и насколько она стильная в плане дизайна,
а также насколько удобно с ней обращаться.
Когда компьютерная техника и разного рода программное обеспечение только
начинали развиваться, речи о качественном и удобной интерфейсе даже не шло. Но уже с
ранних версий ОС Windowsпоявляется оконный интерфейс, который уже направлен на то,
чтобы пользователю компьютеров под управлением этой системы было удобно с ней
работать. Сегодняшнее состояние рынка GUIсущественно отличается от того, что было 15-20
лет назад. Если пользователю чем-то не нравится цветовое решение, расположение
элементов и прочее оформление программного продукта, он откажется от его использования.
Так уж сложилось, удобство в работе с чем-либо является основным параметром.
В своей работе я занимаюсь проектированием интерфейса и разработкой дизайна
для студенческого портала vtusure.ru.
Целью данной работы является разработка такого графического интерфейса
портала, который будет привлекателен и позволит привлечь больше пользователей на сайт.
Портал vtusure.ruуже несколько раз обновлялся, и каждый раз дизайн сайта так или
иначе не устраивал пользователей. Когда он был ярким, разноцветным, пользователи
считали его слишком «пестрым». Дизайн в стиле «минимализм» показался для них слишком
скучным и неинтересным. На мой взгляд здесь проблема кроется в том, что среди
пользователей есть как девушки, которые очень любят яркое и красивое, а есть парни, для
которых чем проще – тем лучше.
При столкновении двух противоположных подходов, необходимо найти третий,
который будет являться компромиссом. Главная проблема работы: как разработать яркий и
стильный дизайн, который при этом будет соответствовать стилю «минимализм».
Принципы разработки графического интерфейса
Казалось бы, создание и проектирование графического пользовательского
интерфейса простейшая работа. Однако и к этой работе предъявляется ряд требований:
1. Интерфейс должен быть интуитивно-понятным пользователю;
2. Интерфейс должен быть удобен и гибок в управлении. Для одной и той же
функции необходимо несколько различных вариантов «найти ее»;
3. Цветовое сочетание должно быть приятным для глаз человека;
4. Оформление не должно быть перегружено различными объектами;
5. Минимальное время перехода пользователем от выполнения одной функции
к другой.
Вышеперечисленные требования можно назвать самыми основными. Кроме них
существует ряд вспомогательных требований, которые во многом могут определяться
спецификой программного продукта, для которого проектируется интерфейс. Например, для
портала vtusure.ruможно выделить следующие вспомогательные требования:


Оформление должно быть в стиле минимализма. Как можно более простой и
удобный дизайн.
При этом, дизайн должен иметь яркие элементы, быть стильным и
привлекательным.
Как уже показала прошлая практика, простой дизайн в черно-белых тонах среди
пользователей не принялся. Он показался им скучным, неинтересным, абсолютно простым.
Нужна изюминка. Такой изюминкой, как правило, на сайтах выступает логотип.
Но логотип – не единственный вариант, как наиболее интересно украсить сайт (да и
вообще любое приложение). Существуют следующие варианты:



Выпадающее меню. Оно может быть как вертикальным, так и
горизонтальным. Может появляться только по щелчку мышки, а может и по
наведению курсора. Очень удобный динамический объект, который
позволяет очень экономично использовать пространство и не перегружать
оформление лишними объектами.
Различные динамические объекты на JavaScript, jQueryили Flash. Это могут
быть баннеры, карусели, какие-либо «мини-игры» и т.д. Они яркие,
интересные, привлекательные. Но у таких объектов существует
существенный минус: они способны слишком загружать сайт, в следствие
чего при низкой скорости интернет-соединения, портал очень медленно
загружается. А если интернет-соединение является еще и тарифицируемым,
то пользователю очень дорого выходит посещать такой сайт. Хотя, с учетом
сегодняшнего развития интернет скоростей и широкого спектра
безлимитных тарифов, эта проблема уже не столь актуальна.
Различные дизайнерские элементы, корпоративные персонажи, облако
тегэв. Все это существенно оживляет оформление сайта.
Современные тенденции в веб-дизайне
Не только в веб-дизайне, но и в веб-разработке в общем, весьма важной тенденцией
является такой способ разработки, когда обновление страницы идет без ее перезагрузки. Это
очень удобно и привлекательно для пользователей. Все большие обороты набирает
использование модальных окон для регистрации, авторизации, просмотра фото и
видеофайлов.
Медиа-элементы также весьма актуальны для сайта. Но в работе с ними следует не
«переборщить». Так, например, очень раздражает фоновая музыка на сайте, которая
включается по-умолчанию и которую пользователь не может найти, как выключить. Здесь
приемлемы два варианта:


Если пользователь захочет, он сам включит музыку;
Медиапроигрыватель должен находиться на видном месте, чтобы
пользователь мог сразу же выключить музыку, если ему это необходимо.
Третьим вариантом является отказ от использования каких либо фоновых медиаэлементов. Встроенные аудио и видео-проигрыватели на сайте (а также возможность
загружать музыку и видео) востребованы в настоящее время, но какие-либо фоновые
элементы зачастую отпугивают публику.
Разработка веб-дизайна для VTUSURE.RU
Разработать веб-дизайн портала в рамках проекта ГПО очень сложная задача. С
одной стороны находится группа программистов, участниками которой, преимущественно,
являются молодые люди. А с другой стороны группа контент-менеджеров, которые также
имеют непосредственное отношение к порталу, но состоит группа полностью из девушек.
Идет столкновение взглядов: одни хотят простое и черно-белое, без каких-либо лишних
элементов; а вторым хочется яркого, привлекательного, может быть забавного.
В приложении приведен набросок нового оформление портала втусуре.ру.
Фактически, разработка веб-дизайна для данного сайта является разработкой
фирменного стиля, с другой стороны. Требуется логотип портала, собственные цвета,
оформление визиток и рекламных буклетов.
Разрабатывая новое оформление для сайта, я использую такие элементы, как:




Модальные окна;
Динамические «бегунки» для фильтрации;
Выпадающий список в виде «облака мысли»;
Сообщения и предупреждения в модальных окошках.
Заключение
Современные дизайнеры каждый раз стремятся сделать свою работу как можно
более уникальной, интересной. Услуги дизайнеров очень востребованы каждый день, но
действительно профессиональных, квалифицированных проектировщиков интерфейсов не
так уж много.
Существует масса методов для оценки качества спроектированных интерфейсов.
Наиболее популярный метод оценки: подсчет времени, которое потребуется пользователю
для выполнения того или иного действия. Именно этот метод я использую в своей работе.
Работа по смене оформления уже практически завершена. На выходе, после
подготовки дизайна, имеется несколько шаблонов в формате *.psd. Последующую работу с
ними осуществляют верстальщики, которые приводят оформление к формату шаблона
CMSсайта. В данном случае это SMARTY.
Следует отметить, что оформление разрабатывалось с учетом стандартного шаблона
LiveStreet, для того, чтобы в дальнейшем не было необходимости писать новый шаблон.
Приложение
Новое оформление главной страницы vtusure.ru