Перевод статьи A Design Is Only As Deep As It Is Usable.

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

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

Градиенты, тени, отражения – о, мой бог!

Множество элементов можно отнести к категории «красивых» или «привлекательных» в контексте веб-дизайна. Но, с учетом ряда факторов, эта красота может оказаться лишь поверхностной. Можно ли назвать сайт привлекательным, если на нем имеются со вкусом расположенные падающие тени, градиенты или отражения? Если его цветовая схема комфортна для глаз? Если акцент сделан на крупных тщательно проработанных кнопках? Может ли все это стать критериями того, что должно считать красивым?

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

На сайте Mint.com есть все, что клиент может пожелать от дизайна стандарта «Веб 2.0». Значит ли это, что он красив?

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

Dribbble-синдром

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

На Dribbble показаны вырванные из контекста образцы дизайна. Хорошо это или плохо?

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

Сравнение с отсутствием стиля

Как измерить красоту? Если сайт неудобен в использовании, то не имеем ли мы дело с бесцельной красивостью? Посмотрите на сравнение, приведенное ниже.

Логотип и панель навигации сайта Nettuts+.

Мне кажется, что сайт Nettuts+ обладает очень приятным дизайном. Но является ли эта фантазийная панель навигации с логотипом более удобной в использовании, чем простая сине-белая версия, показанная в нижней части иллюстрации? По сути, некоторые могут утверждать, что упрощенная версия более удобна (хоть немного), чем «красивая» версия.

Сайт социальной сети Facebook.

Хотя сайт социальной сети Facebook в верхнем варианте и не покажется многим из нас таким уж красивым, он все же содержит привлекательные и эстетичные элементы (цвета, градиентную заливку, стилизованные кнопки и т.п.) Но, если упростить большинство из этих второстепенных элементов, скажется ли это отрицательно на удобстве сайта (конечно, при условии, что будут сделаны более контрастными обозначения форм в правом верхнем углу)?

Если приятный вид сайта действительно настолько важен, то текущий дизайн Facebook должен выигрывать по сравнению с его упрощенной версией. Однако, как знать, возможно, упрощенная версия сайта еще даст фору украшенной?

Что делает дизайн удобным для пользования?

Я не собираюсь ратовать за всеобщее возвращение к синим ссылкам на белом фоне. В сущности, как я объясню далее, и Nettuts+, и Facebook можно с успехом охарактеризовать как действительно красивые веб-сайты. Эти примеры были приведены лишь для пояснения, и я вовсе не имею целью критиковать дизайнеров, создавших их.

Скорее, я призываю дизайнеров помнить о двух вещах при добавлении «красивостей» и усовершенствований в свои работы, а именно:

1. интерактивные и интуитивные элементы страницы
2. следование бренду и постоянство стиля
   

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

Интерактивные и интуитивные элементы страницы делают дизайн функциональным.

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

На сайте Design Informer поле поиска подсвечивается при наведении курсора мыши. Эта ненавязчивая особенность очень элегантно выглядит в браузерах WebKit, поскольку в CSS3 предусмотрена анимированная подсветка. Фон поля поиска, заданный по умолчанию, мог бы быть чуть поярче, чтобы улучшить общее удобство сайта, но в данном конкретном случае ценно не столько исполнение, сколько сама идея.

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

Однако сама возможность использования эффектов анимации не означает, что их следует использовать. Если, как в случае с Design Informer, примененный эффект делает пользовательский интерфейс более интуитивным и легким в восприятии, то он вполне оправдан. Эту мысль очень хорошо сформулировал Стюарт Терсби (Stuart Thursby):

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

Добавляйте элемент, только если он придаст дополнительное удобство дизайну. Если дизайн не сделан более удобным с помощью специальных техник (CSS3, JavaScript или что-то еще), то дизайнер должен пересмотреть вопрос, стоит ли добавлять дополнительный код. “Украшение” дизайна может зайти так далеко, что даст обратный эффект, поэтому прежде чем добавлять какие-либо элементы, убедитесь, что они принесет пользу, а не вред.

Еще один пример  эффекта, который повышает удобство дизайна можно найти на новом сайте Soh Танаки. Посмотрите на скриншот:

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

Опять же, простой эффект, который представляет собой не просто украшение, а служит определенной цели. В учебных материалах примеры HTML-кода часто слишком длины и не помещаются в заданный текстовый блок, так что приходится либо разрывать код, либо использовать некрасивые полосы прокрутки. Решение Tanaka позволяет сделать примеры кода более привлекательными и читаемыми и снижает вероятность разрыва кода или возникновения полосы прокрутки.

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

Следование бренду ведет к повышению удобства дизайна

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

Ниже приведен пример скриншота сайта 10k Apart:

Лавровый венок на фоне и отчетливая иллюстрация позволяют немедленно идентифицировать этот сайт, как принадлежащий к бренду A List Apart. Следование бренду улучшает юзабилити этого микросайта из серии ALA и делает его привлекательным и хорошо знакомым.

А здесь у нас красивый и интуитивный дизайн сайта Launchlist:

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

Удобство не должно быть в ущерб красоте

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

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

Постоянная ссылка на статью |Комментариев: 4
Теги: дизайн, юзабилити

Еще записи на эту тему

• Как эффективно использовать сайдбар на блоге (6)
• Эффект “ауры” вокруг изображения (24)
• Формула успешного сайта (18)
• Способы оформления цитат с помощью CSS (29)
• Свеженькая коллекция забавных иконок для блога (13)

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

Ждем читателей!

Постоянная ссылка на статью |Нет комментариев
Теги:

Еще записи на эту тему

• Нет похожих записей :\

В последнее время нас постоянно пытаются заманить большими скидками с сомнительными условиями. Особенно неприятно попадаться на скандинавские аукционы, в которых вам дают аж 98% скидки на новый iPhone 4 :)

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

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

Все, что вам нужно сделать, это зайти в уловленное время на главную страницу интернет-магазина и быстро принять решение о покупке, а также немедленно оформить первым заказ. Главное — это сделать заказ на сайте прямо на главной странице.

Подобное предложение ежедневно будет появляться на страницах магазина до 31 декабря 2010 года. Итого 1,830 ноутбуков, один из которых может стать вашим!

Постоянная ссылка на статью |Комментариев: 10
Теги:

Еще записи на эту тему

• Нет похожих записей :\

О новом магазине контента PayText.Ru написано уже немало, в том числе и я уже давала краткий обзор этого проекта. Более-менее подробно описаны текущий функционал, принципы покупки и заказа контента в этом магазине. Как и в любом новом проекте, здесь можно найти как положительные, так и отрицательные моменты. Так, одним из минусов является отсутствие возможности заказа постинга (наполнение новыми темами и комментариями форумов и блогов). Но, как выяснилось, этот минус администрацией магазина был исправлен. Не так давно, ко многим существующим сервисам добавился еще и сервис “Постинг”.

Интерфейс сервиса довольно удобен и не вызывает особых трудностей. При составлении заказа, выбора типа работы, создания новых тем (равно, как и комментариев) и другого любого вида работы с контентом также затруднений нет. Другое дело, когда сталкиваешься с системой заказа рерайтинга при постинге. У магазина PayText’а с выбором рерайтинга или копирайтинга, в отличие от других бирж, где происходит формальная проверка на уникальность выполняемой работы и, исходя из этих факторов, вы можете принять или отказать в исполнении данной работы, дела обстоят немного по-другому. При указании рерайтинга как типа текста, здесь “всплывают” поля, где нужно вписывать материалы, которые авторы непосредственно переписывают и публикуют на вашем сайте. Кроме того, есть возможность указать до 20-ти материалов для рерайтинга. Указанные материалы для авторов будут появляться в случайном порядке.

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

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

Постоянная ссылка на статью |Комментариев: 13
Теги:

Еще записи на эту тему

• Нет похожих записей :\

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

Если вы хотя бы немного знаете основы языка PHP, то нам с вами не составит труда  реализовать использование CSS переменных уже сейчас. Все довольно легко и просто, как пишет нам Крис Койер в своей статье.

Style.php

Вместо привычного нам  расширения .css, мы подключим к страничке файл .php

<link rel='stylesheet' type='text/css' href='css/style.php' />

Тип документа

В самом начале файла style.php необходимо указать, что на выходе нам все-таки нужен файл стилей, т.е. указываем тип документа:

<?php
header("Content-type: text/css; charset: UTF-8");
?>

Ломаете голову как сдать сессию? У нас курсовые работы на заказ срочно.

Вводим переменные

Теперь установим значения для нескольких переменных, например такие:

<?php
 header("Content-type: text/css; charset: UTF-8");

 $brandColor = "#990000";
 $linkColor = "#555555";
 $CDNURL = "http://cdn.blahblah.net"
?>

Использование переменных

Достаточно просто вывести обозначенные переменные в необходимых местах стилей:

#header {
 background: url("<?php echo $CDNURL; ?>/images/header-bg.png") no-repeat;
}

a
 color: <?php echo $linkColor; ?>;
}
...
ul#main-nav li a {
 color: <?php echo $linkColor; ?>;
}

Другие идеи использования CSS файла сгенерированного с помощью PHP

1. Сжатие CSS файла с помощью PHP
2. Теоретически, вы даже можете использовать информацию о User-agent для вывода стилей под конкретный браузер.
3. В зависимости от сезона года, вы можете менять стили, используя информацию о текущей дате.
4. Генерировать различные цвета, устанавливать фон случайным образом, и в конце-концов, просто тестировать.

Не работает?

В некоторых случаях (например для реализации нашей идеи в Wordpress), вам возможно потребуется прописать следующие строчки в файле .htaccess (только для Apache):

<FilesMatch "^.*?style.*?$">
SetHandler php5-script
</FilesMatch>

При этом файл стилей оставляем с расширением .css, а  .htaccess кладем в туже папку, где и стили.

Постоянная ссылка на статью |Комментариев: 23
Теги:

Еще записи на эту тему

• Нет похожих записей :\