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

Достаточно открыть практически любой сайт обычной компании, и первое, что бросится в глаза на главной странице — это заголовок: «Добро пожаловать на сайт компании „Маленькая Но Очень Гордая Межгалактическая Корпорация“». Примерно так. Плюс, многие (продвинутые), еще ставят восклицательные знаки. Чтобы «эффектнее» было, наверное…

Если заглянуть в результаты поиска, то мы увидим примерно такое положение дел — google, yandex.

Причём и среди таких сайтов есть разделения: одни используют приветствия на страницах и в заголовках, другие — только в заголовках окна браузера (что, на мой взгляд, более лояльно по отношению к пользователю и имиджу компании).

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

Зато однозначно можно сказать кто виноват: дизайнеры, веб-студии, маркетологи и контент-менеджеры. Клиент в последнюю очередь. Именно исполнители не объяснили, не захотели объяснить (или сами не знали :) всей важности первого впечатления от сайта, имиджа или влияния заголовка на главной на ту же поисковую оптимизацию.

Теперь вопрос для владельцев сайтов: чем непривлекателен такой заголовок для главной страницы — «Компания „Маленькая Но Очень Гордая Межгалактическая Корпорация“ — основной поставщик антигравитационных двигателей для кораблей класса „линкор“ за пределами Солнечной системы»?

Ведь очевидно, что для посетителей он намного информативнее и полезней, чем стандартное унылое шаблонное приветствие. Так почему не создать настроение на самом главном заголовке вашего сайта? Или желание «сделать как у всех» именно то, что нужно индивидуальности позиционирования каждой компании?

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

* * *

Интересное в сети:

Как заставить посетителей подписаться на RSS. Эффект liquid image — потрясная штуковина на JavaScript. Тест на узнаваемость для логотипа.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Новый пункт в ТЗ
2. Спорное оформление вкладок и кнопок
3. Элементы входных страниц

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

В последнее время, разрешение мониторов у пользователей растёт быстрее, чем увеличивается и принимается за стандарт ширина фиксированных сайтов. И если сейчас её принято верстать под 1024 px, реже под 1280 px, то большой процент пользователей уже сидит на разрешениях экрана от 1440 px и выше. Сейчас уже никого не удивишь домашним монитором в 20-22-24 дюйма.

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

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

Отсюда несколько наглядных картинок для примера:

Вывод один: чем больше разрешение экрана у пользователя, тем больше неудобств он испытывает при просмотре нецентрированных страниц.

Для полноты статьи и её практической ценности вот ссылка на методы CSS-выравнивания. Какой из них выбрать, решать вам. Я предпочитаю первый, с небольшим ухищрением для IE6.

P.S.: Для тех, кто утверждает, что «для работы не нужно разворачивать браузер на весь 2x-дюймовый экран». Согласен. Для работы. Но, как показывают личные наблюдения, пользователи предпочитают не экономить место, если просто серфят для удовольствия.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Уничтожение сайтов руками владельцев
2. Спорное оформление вкладок и кнопок
3. Посетители сайтов: читатели, пользователи или участники?

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

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

Итак, стартуем!

Я не буду останавливаться на мелких шрифтах и прочих всем понятных вещах. Лучше покажу скриншоты (масштаб 100%) с моментами, которые не дают скучать.

А какие еще версии русского языка вам знакомы?

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

Вот так, за счет трекинга, можно сэкономить место в рекламных тизерах-аккордеонах. Берите на вооружение :)

Позитивная информация для туристов и понятный разборчивый баннер в боковой колонке. Кликаем!

Такие вот сервисы и разговорчивые сингапурцы.

Бесплатный интернет-магазин страниц для печати.

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

На странице расширенного поиска, единственный язык, не переведённый на русский — это… русский.

Убедили. Но если я уже не уверен в том, что ищу, о чём он меня проконсультирует?

«Нажмите сюда, чтобы перейти на следующую страницу.» Нет слов…

Вы пришли из «… → …»

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

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

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

* * *

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

Тем не менее, блог продолжает жить своей жизнью, и один из моих старых постов даже засветился в недавней подборке от smashingmagazine. Чертовски приятно.

В общем, я вернулся. В голове много свежих мыслей, которые будут постепенно материализовываться и записываться в блог. Поэтому, не разбегайтесь ;)

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Оставьте текст в покое!
2. Горизонтальное центрирование фиксированных сайтов

За последние несколько лет слово «юзабилити» (usability (анг.) — удобство использования) стало сверхпопулярным среди веб-дизайнеров, проектировщиков интерфейсов, блоггеров, сеошников, маркетологов и просто людей, интересующихся развитием интернет-технологий.

Хотите быть популярными среди вебмастеров? Почаще используйте в разговоре слово «юзабилити» :) Шутка с долей правды.

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

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

Юзабилити-«специалист»

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

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

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

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

Юзабилити — это командная работа.

Клиент-юзабилист

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

Почему-то, у меня получалось так, что эти представления не попадали в задокументированном виде в ТЗ, и выявлялись лишь на этапах утверждения макетов. Позиция-тест со стороны «продвинутого» заказчика: «Ты делай, я потом скорректирую».

Здесь ситуация тоже непростая. Мне недавно попался клиент, который пытался максимум информации вместить на экран до «линии сгиба». В основном это было требование убрать все «лишние и ненужные» отступы между блоками на странице.

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

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

Здесь, опять же, играет негативную роль кажущаяся доступность информации о юзабилити, и неспособность её правильно фильтровать. Не практикуешь — не вмешивайся! Одни и те же решения могут не работать в разных проектах и в разное время.

Дизайнерам и разработчикам, желаю с достоинством отстаивать своё мнение и знания в холиварах с заказчиком.

Нехэппи энд

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

• User Experience Russia  — сообщество юзабилити специалистов (вебинары, обсуждения, библиотека).
• Usability.by — сообщество специалистов по юзабилити, проектированию пользовательских интерфейсов и user experience Беларуси.
• Хроники Юзабилити — блог о юзабилити и дизайне интерфейсов.
• Эти пользовательские интерфейсы — блог на Хабре.
• О юзабилити веб интерфейсов — блог Ярослава Бирзул.
• Amazing Development — блог про юзабилити, проектирование интерфейсов и user experience.
• и многие другие, которые я почему-то не дописал в этом список...

Удачи вам на пути самообразования.

* * *

Помучайте инфа :)

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

* * *

Сканер блогов

Ещё не участвуете в денежном конкурсе для веб-разработчиков? Есть шансы!

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Usability Webinar: удачный коннект
2. Спорное оформление вкладок и кнопок
3. Создание блок-схем в окне браузера

Есть один вопрос, поиском ответа на который я занимаюсь уже некоторое время: «Стоит ли подчеркивать ссылки, когда они стилизованы под меню-закладки или кнопки?» То есть, тот самый текст, который пишется на элементах управления.

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

Ход мыслей

Чтобы всем стало понятно, о чём идёт речь, небольшой пример оформления кнопки.

Моё мнение — подчёркнутый текст вызывает ощущение, что текст и фон на кнопке не единый элемент. Неподчёркнутые ссылки, в этом плане, смотрятся более цельно, а не как текстовая ссылка с фоном-подложкой.

И, как это часто бывает, одни неправильные решения влекут за собой другие:

1. часто не соблюдаются принципы нескольких состояний для кнопки (фона): обычное, при наведении и активное (как в примере с неправильной кнопкой). Они просто отсутствуют.

2. область реагирования значительно меньше чем размер элемента:

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

Кроме того, у вкладок ещё может быть одно состояние — открытая, указывающая на текущую страницу.

Надуманная проблема?

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

Ну а это первое, что попалось мне на глаза:

Пример оформления закладок на сайте sape.ru

Пример оформления закладок на сайте nytimes.com

Открытый вопрос

Вряд ли это грубые ошибки в дизайне, скорее правила хорошего тона, но я стараюсь придерживаться в работе тех принципов, которые описал в этой статье как «правильные».

А ваше мнение?

* * *

Сканер блогов:

Маленькая сага про кавычки «ёлочкой». Продвижение сайтов, часть 5-я.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Кроссбраузерное выравнивание кнопок-изображений в формах
2. Прокачиваем шаблоны от 960.gs
3. Психология пользователей и оптимизация изображений для веб

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

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

В обход советов «профессионалов» на дизайнерских форумах, я не стал качать сторонний софт, ведь всё что нужно, уже есть под руками, точнее в Photoshop. Остаётся только потратить 15 минут на настройки и проверку алгоритма. А дальше — чашка горячего кофе и удовольствие от созерцания того, как работают роботы :)

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

Перед началом

Условно весь процесс автоматизации в Photoshop можно разбить на два этапа:

1. запись и проверка макроса (Action);
2. запуск макроса через диалоговое окно пакетной обработки (Batch).

Итак, допустим, есть исходники фотографий разных размеров (много штук), сортированные в папки по темам, которые нужно уменьшить до одинакового размера (360×150 px). Для примера и экспериментов можете взять это фото. Далее по шагам.

Автоматизируем

1. Запись макроса (Action)

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

1.1 Открываем в Photoshop нужную фотографию (Ctrl+O).

Окно Actions в Photoshop.

1.2 Запускаем запись макроса. В окне Actions (Alt+F9) создаём новый сет (иконка папки) и в нём action (иконка листка). На панели станет красной пиктограмма Record , а значит пошла запись всех действий, которые вы совершаете.

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

1.3 Создаём копию фонового слоя (Ctrl+J). Это для того чтобы можно было свободно менять размеры изображения.

1.4 Меняем размер изображения Image → Image Size (Alt+Ctrl+I) на 360 px по горизонтали (включив галочку Constrain Proportions).

1.5 Теперь осталось подогнать размер по вертикали (сейчас 239 px вмето нужных 150). Image → Canvas Size (Alt+Ctrl+C) → Height = 150 px (не ставя галочку Relative и не меняя направления обрезки краёв Anchor).

1.6 Останавливаем запись макроса в окне — Stop playing/recording .

Обратите внимание, что с действиями в окне Actions можно выполнять операции как и со слоями, т.е. их можно менять местами, копировать, удалять, скрывать при выполнении и т.д. Очень удобно.

Я записал для упрощения примера всего несколько команд, хотя, если есть желание, можете добавить еще, например применить фильтр Sharpen для увеличения резкости.

2. Запускаем пакетную обработку

2.1 Здесь всё намного проще и делается в одном диалоговом окне File → Automate → Batch... В нём ставим в настройки такие, как на рисунке:

В группе контролов Source выбираем исходные фотографии для обработки, в группе Destination — куда и как сохранять полученные изображения.

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

Единственное на что стоит обратить отдельное внимание, флажки Override Action «Open» Commands и Override Action «Save As» Commands. Их стоит отмечать только тогда, когда действия открытия фотографии и её сохранения записаны непосредственно в макрос.

Если фотографии разбиты по темам в подпапки и нужно сохранить эту категоризацию, следует установить флажок Include All Subfolders, и в Destination указать эту же родительскую папку. Тогда исходники будут заменены обработанными фотографиями (мы же работаем с копиями), и также будут разбиты по папкам-темам.

2.2 Жмём Ok.

В заключение

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

В некоторых случаях придётся перезапускать процесс, перед этим подкорректировав макрос отдельно для вертикальных и горизонтальных изображений, или из-за особенностей некоторых фотографий (расположения объектов). Но это ерунда, по сравнению с тем, сколько часов жизни можно себе сэкономить используя подобные методы. Кто не работает, тот запустил макрос!

* * *

Сканер блогов:

Утилиты для создания PNG-8. Fixed background images. Интересная реализация. Несколько простых правил для веб-дизайнеров.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Секреты Photoshop для мастеров, часть 2
2. Секреты Photoshop для мастеров, часть 1
3. Anti-aliasing для текста в браузерах и в Photoshop

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

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

Не буду подробно описывать что такое блок-схема, как и зачем она разрабатывается, об этом хорошо написал Ярослав Бирзул, поэтому рекомендую к прочтению. Ну и про софт для них.

Поэтому, я подробнее остановлюсь на недостатках «рисовальных» способов проектирования макета.

Что бы я поменял

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

При этом, в процессе непосредственно участвует тот кто рисует, остальные выступают в роли наблюдателей и советчиков. Но, чем больше людей принимает участие в проектировании, тем больше будет мнений и шанс найти правильное решение.

Как бы я поменял

Теперь непосредственно остановлюсь на концепции идеи, которая возникла недавно, но ближайший месяц-полтора останется без реализации с моей стороны. Банально нет времени :(

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

Первой версией от меня будет простая html-страничка, с использованием drag'n'drop и манипуляции с элементами страницы через DOM (добавление, удаление, изменение свойств стандартных элементов веб-страниц, манипуляции с текстом и размерами). Сохранение результата — отправка на печать (пока это самое слабое место). Дальше будет видно, стоит ли развивать идею в отдельный проект и создавать серверную часть. Во всяком случае, я открыт для сотрудничества.

Я сознательно не стал выкладывать все детали реализации идеи (хотя они есть), пусть это будет поводом для дальнейшего её обсуждения. А пока, хотелось бы увидеть в комментариях ваши мысли о ценности или бесполезности такого приложения, дополнения и критику. Любое мнение приветствуется.

* * *

Сканер блогов:

Как правильно планировать проекты. Подробная таблица со сравнением возможностей различных JavaScript галерей. Золотое сечение в веб-дизайне.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Спорное оформление вкладок и кнопок
2. Горизонтальное центрирование фиксированных сайтов
3. Психология пользователей и оптимизация изображений для веб

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

Как и любой пользователь, на чужом сайте я ожидаю, что мне будет удобно читать именно тем способом к которому я (как и большинство моих друзей и знакомых) привык. А привык я во время чтения скользить по тексту не только глазами, но и курсором, выделять прочитанные места, читать описания в title к ссылкам и выводить на печать понравившиеся мне моменты, а не всё целиком.

Но особо продвинутые вебмастера и в этом пытаются досадить читателям, используя дополнительный «умный» тюнинг сайтов. Вот эти способы сегодня и попали в чёрный список АнтиВебДизайна.

Отключение клавиш мыши с помощью JavaScript

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

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

Отключение выделения текста, блокировка клавиш мыши — раздражитель и древность. Сейчас даже на flash-сайтах тексты стараются делать выделяемыми.

SnapShots в Livejournal

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

Поэтому приходится крутить такие страницы скроллбаром и читать авторов, которые не очень любят ставить ссылки :)

Ссылки-параграфы

Самый запоминающийся пример — новости на Рамблере, посмотрите как оформлены анонсы новостей. Случайно наткнулся на такой подход к оформлению, когда проверял свой старый почтовый ящик.

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

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

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

* * *

Тем, кому нравятся умные и замечания мысли на тему веб-разработки и юзабилити, советую обратить внимание на блог (и авторские статьи) Романа Настенко, найдёте много чего интересного, для осмысления и для практики.

* * *

Сканер блогов:

Обмен постовыми для блоггеров от CodeIsArt. Не упустите шанс! 5 Удобных CSS Reset Техник. Для тех, кто ещё не определился каким образом сбрасывать стандартные стили в браузерах. 30-ка качественных блогов по интернет-маркетингу.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Горизонтальное центрирование фиксированных сайтов
2. Usability Webinar: удачный коннект
3. Ежедневные юзабилити-тренировки

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

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

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

По статистике, нарушение цветовосприятия наблюдается до 8% от всего населения у мужчин и до 0,5% у женщин, а это довольна значительная чать людей (и пользователей), которым дизайнер может усложнить жизнь.

Именно на принципе малых отличий в тоне и контрасте цветов основаны многие тесты для проверки цветовосприятия дальтониками. Чтобы понять как это работает, достаточно лишить эти цвета насыщенности с помощью Photoshop, и вы сами почувствуете себя на месте дальтоника:

Изображения взяты с сайта richmondeye.com.

Получилось различить цифры в черно-белой гамме? Теперь представьте, что точно также и дальтоник не видит разницы между цветами плашек и текста на них, различий между текстом и неподчёркнутыми ссылками, фоном и неконтрастными фотографиями.

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

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

Для тех, кому интересно узнать о проблеме ещё, неплохая подборка статей о дальтонизме и веб-дизайне есть на сайте antula.ru (меню статей слева).

Немного рассуждений

Теперь давайте подробнее остановимся на том, должен ли бизнес-проект учитывать таких пользователей. За примером далеко ходить не нужно — возьмём «единственный» белорусский портал tut.by с посещаемостью около 400 000 человек в сутки.

8,5% от 400 000 — это 34 000 посетителей с изменённым цветовосприятием в сутки. Да, я взял проценты по максимуму, хотя на деле эта цифра может оказаться значительно меньше. Будем теоретиками-максималистами.

Простая задача — чтение новостей на портале. Например этой новости. Из пяти неконтрастных ссылок (это я уж сужу по себе), только три из них подчёркнуты. Следовательно, неподчёркнутые линки имеют шансы быть просто незамеченными 34 000 пользователей. Не всеми конечно, но пусть даже половиной из них — 17 000. Если бы это была контекстная реклама, можно было бы считать уже совсем не теоретические убытки.

И таких примеров на самом деле масса, можно найти на многих порталах. Просто первое, что попалось мне на глаза.

Вывод только один: пренебрежение общепринятыми стандартами может не совсем удачно сказываться на ведении электронного бизнеса.

* * *

Сканер блогов:

5 идей полезных WordPress плагинов. Может и у вас какая-нибудь идейка завалялась? 13 выпуск блог-шоу с полезными материалами по продвижению сайтов. 15 отличных альтернатив расширениям Firefox для решения регулярных SEO-задач.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Дизайн 911: обзор стартапа
2. Элементы входных страниц
3. Психология пользователей и оптимизация изображений для веб

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

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

Следующими последователями были сайты Viera.tv и Lexus. Не скажу, что они были оригинальными, но это была неплохая попытка воплотить теорию dontclick-сайтов в реальные бизнес решения. Пусть и со своими, присущими технологии недостатками.

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

Позитив

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

Негатив

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

Сложные впечатления

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

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

Сейчас есть еще много спорных моментов, как должны вести себя ссылки в тексте, должна ли быть задержка на события, как должны реагировать формы на фокус и его потерю. Еще один жёсткий момент — постоянный вывод предупреждений при клике. Это раздражает.

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

Ещё, недавно натолкнулся на анонс будущего бескликового сайта dontclick.ru, тестовые элементы управления которого реализованы уже на JavaScript. Протестируйте, это интересно.

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

Во всяком случае, новый сайт обещает быть интересным.

А пока хотелось бы пообщаться с вами в комментариях по поводу применимости и перспектив бескликовой технологии в веб.

* * *

Сканер блогов:

Очередной «позитивный разгром» блога от Сергея М. Хотите обзор своего блога? Заказывайте! 10 SEO-плагинов для Firefox. Прототипирование в XHTML. Плюсы и минусы.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Дизайн 911: обзор стартапа
2. Участвую в конкурсе WebHiTech!
3. Устаревшие приёмы в веб-дизайне