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

Итак, книгу я взял фундаментальную, не новую. Написал её Стив Круг — очень заслуженный аналитик из США. Его послужной список — работа с такими гигантами как Apple, AOL и, в свое время, Netscape.

Книга называется «Не заставляйте меня думать». На протяжении всех 200 страниц именно эта мысль и раскрывается во всех подробностях. Стив описывает различные методы анализа сайтов и их практическое применение с простой точки зрения: пользователь, заходя на сайт не должен думать о том, как же им пользоваться, а должен просто пользоваться сайтом, делать то, что он задумал, без каких-либо препятствий.

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

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

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

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

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

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

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

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

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

Купить книгу на Ozon.ru

PS: Я пока раздумываю над темой для следующей статьи. Если у вас есть идеи — буду очень благодарен если вы расскажете о них в комментариях :)

Как вы помните, в записи «Интерфейс видеоплеера: Анализ» я анализировал последние версии проигрывателей от YouTube, Vimeo и RuTube и для каждого из них составил списки плюсов и минусов с функциональной точки зрения.

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

Поехали.

В первую очередь, необходимо определится со стандартными размерами видеоплеера, который будет создаваться и соотношением сторон в видео. Будет ли это 4:3 или 16:10?
Для того, чтобы определится в этом моменте я пошел в ближайший российский агрегатор цен на товары (это был Яндекс.Маркет) и выбрал там видеокамеры. Как можно убедиться, широкоформатное соотношение сторон поддерживают 400 моделей из 497 на рынке, что сразу склоняет чашу весов на сторону соотношения 16:10.

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

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

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

YouTube и RuTube (для всех) показывает функции всегда, однако Vimeo, который ориентирован на творческих людей и гиков показывает функции при наведении курсора на видео.

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

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

Проверочный список:

Плюсы:

• Удобная прокрутка видео.
• Возможность вручную выбирать время начала загрузки ролика.
• Интуитивные иконки-визуалы.
• Изменение громкости в один клик.
• Погашение громкости в один клик.
• Возможность включения HD-разрешения для видео, не переходя на сайт.
• Возможность получить ссылку на нужный момент в видео.
• Быстрое получение html-кода для вставки ролика, не заходя на сайт.
• Идентичность интерфейса на сервисе видео-хостинга и на других сайтах.
• Возможность остановить загрузку видео.
• Переключение режима времени ролика между «прошедшим и оставшимся».

Минусы:

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

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

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

Для просмотра прототипа в действии кликните на изображении выше или по этой ссылке.

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

Продолжение следует.

PS: следующей статьей в рамках цикла станет «Интерфейс видеоплеера: Дизайн». Её выход планируется в четверг, 10 Июня.

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

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

Во-вторых — скорость работы. Скорость оценить проще, если нужные инструменты встроены в плеер.

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

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

Поехали.

YouTube

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

Плюсы:

• Возможность переключения разрешения видео.
• Изменение громкости в один клик.
• Можно погасить громкость в один клик.
• Наконец-то иконка разворота во весь экран интуитивна.
• Удобная прокрутка видео.
• Можно получить код ролика в контекстном меню по правой кнопке мыши или после проигрывания.
• Можно вручную указать время загрузки ролика.

Минусы:

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

Vimeo

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

Плюсы:

• Возможность переключения в режим HD.
• Изменение громкости в один клик.
• Иконка разворота во весь экран интуитивна.
• Удобная прокрутка видео.
• Возможность получить код ролика не заходя на сайт Vimeo.
• Во время проигрывания интерфейс тактично исчезает.
• Самые важные элементы управления с подходящим размером.
• Интерфейс идентичен на сайте Vimeo и других сайтах.

Минусы:

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

RuTube

Как и его собрат из YouTube этот плеер неоднократно изменялся его создателями. Сегодняшний вариант кажется мне совсем неудовлетворительным.

Плюсы:

• Можно вручную указать время загрузки ролика.
• Можно заглушить громкость в одно нажатие.
• Можно менять громкость в один клик.
• Можно передать ссылку на нужный момент в видео.
• Можно остановить загрузку ролика.
• Переключатель режима времени ролика — «прошедшее \ оставшееся»

Минусы:

• Элементы управления достаточно невелики.
• Слишком много интерактивности. В результате движения мышкой всё меняется, двигается.
• Чтобы закрыть назойливую рекламу нужно проявить недюжинную прыть.
• Достаточно большая задержка при появлении элемента изменения громкости.
• Не интуитивное расположение и вид ссылки на полноэкранный режим.
• Реклама во время паузы, при этом неясно как её убрать и вернуться к ролику.

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

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

Продолжение следует.

PS: следующей статьей в рамках цикла станет «Интерфейс видеоплеера: Прототип». Её выход планируется в следующий четверг, 27 Мая.

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

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

Первая запись на тему создания интерфейса для видео-плеера (хочу завершить эту тему) выйдет в четверг, 20 мая и будет называться «Интерфейс видеоплеера: Анализ».

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

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

Для начала стоит выяснить, что же подразумевается под словосочетанием «область реагирования». То, что не эрогенные зоны — мы уже выяснили, но ведь нужно и честь знать.

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

Довольно размыто, не так ли?

Попробуем уточнить. Для улучшения понимания взгляните на иллюстрацию ниже.

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

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

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

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

1. Логотип. Встречается данный тип областей реагирования наиболее часто, т.к. количество этих самых логотипов стремится приблизиться к количеству сайтов и интерфейсов. Чаще всего областью реагирования логотипа является прямоугольник, отрезанный и сверстанный точно по краям логотипа.Это не очень хорошо, т.к. при небольших логотипах приходится целиться. Поэтому рекомендую к этому прямоугольнику прибавить по 5-10 пикселей с каждой стороны, и тогда всё будет в самый раз. И логотип не большой (это здорово), и область реагирования не заставляет пользователей получать снайперскую профессию.
   
2. Меню. Не менее важный элемент, чем логотип. А для навигации и удобства путешествия по сайту так и более важный. Очень часто меню состоит из графики и текста, но реагирует только текст, что меня всегда ужасно раздражало. Если меню подчеркнуто графически, то и реагировать должен не только текст, но весь графически-текстовый блок. И тогда всё будет замечательно.Если же меню целиком текстовое — реагировать должен текст, но область реагирования стоит делать несколько больше, чем область текста ограниченная html.
   
3. Текстовые ссылки. В отношении ссылок нужно на время обуздать свое желание «всюду немного увеличить область реагирования». Текстовые ссылки на то и текстовые, что находятся внутри большого массива информации.И делать область реагирования, которая будет наложена уже не только на ссылку — плохой тон. Поэтому текстовая ссылка, которая написана непосредственно в тексте, должна иметь область реагирования, обозначенную сугубо начертанием текста и не более.
   
4. Вкладки. Также очень часто встречающаяся деталь интерфейса. В последнее время в вкладки стало модно прятать не самую полезную информацию с целью экономии места, и для того, чтобы пользователь не отвлекался от главного — контента.Лучше всего областью реагирования вкладок делать не маленький кусочек очерченный текстом, а весь размер вкладки по ширине и высоте. Тогда пользователь уж точно не промахнется, и будет вам благодарен.
   
5. Поля ввода текста. В этом случае мы опять должны ненадолго отдохнуть от «мании увеличивания областей», т.к. лучшей областью реагированию поля является оно само. При этом, я подчеркиваю, что делать поле в каком-то не стандартном виде с кучей эффектов, градиентов и т.п. мишуры — глупо.JavaScript тоже не всесилен, и уж точно не кросс-браузерен (да, есть специальные фреймворки, но результат того не стоит. Поверьте).
   
6. Чекбокс и радиобаттон. Тут стоит рассмотреть два случая употребления чекбоксов и отметкок. Первый: если они расположены «одни, совсем одни», то область реагирования стоит увеличить на 3-4 пикселя. Т.к. сами эти элементы довольно малы — увеличение области позволит избежать превращения пользователя в снайпера, особенно на больших разрешениях экрана.Второй: если они расположены рядом с текстом, который относится непосредственно к ним. Например часто встречается фраза: «вы соглашаетесь с правилами, и вашу душу заберет дьявол». В таком случае областью лучше всего делать сам чекбокс и текст рядом с ним. Не буду повторяться про снайперов.
   
7. Кнопка. И опять нас поджидают два кардинально разных случая. Первый: если вид кнопки отличается от внешнего вида кнопок из операционной системы (графическая кнопка), тогда область стоит увеличить на 3-4 пикселя.Если же кнопка имеет вполне себе стандартный вид, и реализована стандартным образом — тогда область реагирования увеличивать не стоит, потому, как тут вступает в действие сила привычки.
   
8. Форма выбора файла. Её частенько можно видеть на файловых хостингах, специализированных сервисах по хранению файлов, а также на любом форуме, в который нужно загрузить свою аватару и фотографию. Зачастую выбор файла происходит не только при нажатии на кнопку «Обзор», но и при нажатии на поле.Это не очень хорошо, т.к. ограничивает свободу действий пользователей. Разумеется, он обидится, т.к. это решение не даст ему возможности вручную отредактировать путь до файла. Я знаю, что это встречается не часто, но всё-же случается, поэтому лучше избежать негативных эмоций.
   

Теперь, когда мы определились с определением и закрепили это знание практическими примерами стоит рассмотреть также и предполагаемые реакции на некоторые из главных действий. Например: «при наведении», «при нажатии».

Реакции

1. Логотип. Этому элементу положено быть сугубо статическим в большинстве случаев. Это значит, что реагировать на наведение мышки он не должен, но начертание курсора (рука) обязательно должно появлятся. При нажатии в большинстве случаев стоит перенаправлять пользователя на главную страницу сайта.В обратных случаях дизайнеру стоит действовать по собственному усмотрению, т.к. если бы я расписывал все гипотетические ситуации — об этом можно было бы написать очень большую неинтересную книгу.
2. Меню. Чаще всего лучше делать не статичное меню. Обычно в нем находится до десяти пунктов, а это превышает наш внутримозговой «буфер обмена», который может разделить до 7 пунктов к ряду. Следовательно — при наведении пункт должен быть подсвечен.Если меню графическое — то подсвечиваться должна графика. Если текстовое — то текст, и, по желанию, простая подсветка фона. Как должно действовать меню при нажатии, я думаю, объяснять нет нужды.
3. Текстовые ссылки. Обязательно должны реагировать на наведение. Когда я вижу ссылку, которая не выдает никакой реакции мне сразу же приходит на ум аналогия с молчаливым флиртом: не понятно, что происходит и работает ли.Если ссылка подчеркнута (а она должна быть подчеркнута, если находится в тексте), то стоит менять сам цвет ссылки, не убирая подчеркивания. Однако само подчеркивание при наведении не критично, и зависит от дизайна и решения дизайнера.
4. Вкладки. Ситуация та же, что и с меню. Если количество вкладок привышает 7, то стоит задавать какую-либо реакцию при наведении. Чаще всего используется графическая «подсветка» пункта.Теперь, внимание: при нажатии содержимое вкладки стоит подгружать мгновенно (или, на худой конец, аяксом его, аяксом!), а не с перезагрузкой страницы, как это любят делать некоторые разработчики. Делается это для того, чтобы не обманывать ожидания пользователя, который привык к мгновенной загрузке вкладок в операционной системе.
5. Поля. При наведении лучше всего совсем немного увеличивать насыщенность цвета «окантовки» поля. При нажатии же нужно просто и без проблем давать пользователю ввести текст, и не мучать его эффектами, как это иногда любят делать некоторые дизайнеры.
6. Чекбокс и радиобаттон. Реакции при наведении уже должны быть заложены в операционную систему, которая эти элементы и прорисовывает, поэтому с этим проще. С реакцией при нажатии тоже нетрудно — оба этих элемента должны стать «отмеченными».
7. Кнопка. Никаких кардинальных сюрпризов. Если кнопка сделана графически, при наведении желательно менять её цвет, или подсвечивать любым другим образом.Если же кнопка сделана через стандартные html-средства, то и делать ничего не нужно — ваша ОС сделает всё за вас. Действия «При нажатии» описать весьма трудно, т.к. кнопки употребляются в кардинально разных случаях.
8. Форма выбора файла. Тут тоже всё довольно просто. Т.к. мы выяснили, что реагировать должна именно кнопка — она чаще всего сделана через стандартную форму выбора в html.Соответственно действия при наведении заложены в вашей операционной системе. А вот при нажатии обязательно должно открываться диалоговое окно выбора файла и ничего более.

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

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

Тем временем

1. Миша Квакин освещает три диалога о рекламе в блогах.

2. Сергей Чаботько пишет о машине для СЕО оптимизации.

3. Юра Гугнин просит распространять полезную статью о финансовом кризисе. Господа, всё хорошо, успокойтесь.

4. Егор Чернев рассказывает об иллюстрациях к статьям.

Говорить о блочной разметке можно долго и нудно. Я же постараюсь максимально избавить вас от мазохизма при чтении этой статьи с помощью краткости и конкретики.

Для начала оговорюсь:

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

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

Немного советов

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

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

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

4. Делайте wireframes черно-белыми. Блоки в цветном варианте будет перебивать внимание людей друг у друга, что совершенно нежелательно. Также разные цвета создают разный эффект внимания — т.е. ярко-красный привлечет внимание к себе гораздо лучше, чем светло-желтый. Именно поэтому я использую только градации серого (начиная от чистого белого, и заканчивая воронным черным), где насыщенность зависит от предполагаемой важности того или иного блока на сайте.

5. Если уж решили сделать цветными — не делайте потом обесцвечивание. Так как даже совершенно разные цвета в цветном варианте могут в черно-белом свестись к одному и тому же оттенку серого.

6. Структурируйте контент. Делите блоки на под-блоки. Что я подразумеваю под этим? То, что нужно разделять контент даже внутри основных блоков. К примеру: не писать тексты сплошным полотном, не забывать о белом пространстве и абзацах. В общем — вспоминайте азы типографики и модульной сетки из полиграфии, они нужны даже для проектирования интерфейсов.

Этапы блочной разметки

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

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

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

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

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

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

Если поправки небольшие, и их немного — до 30-40, то это уже очень хорошо — значит наше время потрачено не зря.

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

Выводы:

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

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

PS: в качестве примера я использовал этапы проектирования интерфейса для проекта iFolk. Ожидайте на днях анонсирования. Пока же можете оставить свой e-mail для того, чтобы мы могли отправить туда кучу спама о виагре.

PPS: приношу свои извинения за то, что в последнее время нечасто публикуюсь. Вышеуказанный www.ifolk.ru забирает на себя ну о-о-очень много внимания.

PPPS: рад сообщить, что количество rss-подписчиков перевалило за 1200 :)

Тем временем:

1. Миша Квакин решил сделать для своего блога систему инвайтов.
2. Юра Гугнин наконец-то предоставил нам новую заметку :)
3. Футуриус написал о UMBEL.
4. Сергей Чаботько рассказывает о деньгах в байнете.
5. Юра Ветров разжевал о проектировании в Agile-процессе.
6. Егор Чернев пишет об онлайн планировщике помещений.

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

Немного слов

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

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

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

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

Как отличить простоту от примитивности

1. Пренебрежение шрифтами. У примитивного дизайна есть одна великолепная черта, о которой можно писать отдельную статью (ждите анонсов). Многие дизайнеры не видят разницу между шрифтами заголовочными, и текстовыми. Путая их местами – получают кашу. А потом жалуются на то, что их детище обозвали примитивным.
   
2. Мешанина стилей. Люди часто не могут сходу оценить тот факт, что стили у сайта в результате получились разные, и смешивать ходы из 2.0 сайта, с дизайном сайта корпоративного, а где-то даже и промо – плохой тон. Скажем – зачастую люди мешают модные, скругленные, мак поля с иконкой внутри, и aqua-кнопки из Vista.
   
3. Незнание или лень в применении основных правил хорошего тона (гештальт-принципы) — закона близости, подобия и закона симметрии. Догадываюсь, что все их знают, многие помнят, а применяют на деле – единицы. То же правило близости постоянно применяется в дизайне блогов: информация, относящаяся к статье (кол-во комментариев, дата написания, автор) должна быть в непосредственной близости возле заголовка, тогда глаз людей воспринимает их как единое целое, что от нас и требовалось.
   
4. Неумение распоряжаться пустым, белым, пространством. Т.е. его может быть нереально много, но только не там где оно действительно требуется. В частности – в дизайне блогов, между двумя статьями. Очень часто повторяемая ошибка — в отсутствии нормального расстояния между текстом анонса, и заголовком следующей заметки.
5. Кнопки и контролы. Зачастую – нестандартные контролы, которые имеют отличный внешний вид от контролов операционной системы, и производят на сайте лишний визуальный шум. Кроме тех ситуаций, когда нарисованные контролы выглядят явно лучше системных. Люди любят менять вид кнопок, и высоту текстовых полей. Особенно неприемлемо второе.
   
6. Плохо разделены пункты меню. Смотрите примеры, тут можно понятно объяснить только визуально.
7. Игнорирование принципа слепой зоны. Многие проекты не выстрелили из-за того, что создатели не учли принцип слепой зоны для глаза. Такие ситуации происходят, если всё визуальное внимание на себя забирает какой-то элемент дизайна, или визуальные шумы. Поэтому глаз не бросается в слепую зону, и не воспринимает информацию оттуда. Решением стоит считать избавление от назойливого элемента в непосредственной близости от важной информации. Либо – убрать важную информацию из слепой зоны.
   
8. Отсутствие небольших визуалов. Даже минималистичный дизайн не обходится без небольших иконок-визуалов. Сделано это не просто так, а для улучшения разделения и восприятия информации. В простом дизайне нет большого массива информации, следовательно, нет и визуалов. В примитивном же скидывают огромные тексты, которые трудно воспринимать без линий-разделителей, визуалов, и белого пространства.
9. Игнорирование сетки. В примитивном дизайне халатно относятся к столь важному моменту, как модульная сетка сайта. Т.е. элементы не выровнены относительно друг друга, поэтому воспринимаются как алкоголики в разброде и шатании. Эта ошибка – одна из самых популярных по частоте. Достаточно поставить жесткие рамки, и выровнять в красивую сетку все элементы, и даже самый примитивный дизайн приобретает большое преимущество перед другими.
   
10. Наличие необязательных, иногда даже вредных, графических элементов. Очень часто дизайнеры любят использовать всякие штучки-дрючки в дизайне, и это отталкивает их от минимализма и красивой простоты еще дальше. Ведь не должно быть ничего лишнего, и всё должно быть на своём месте. Пример: разные узоры, свирлы, мышки, клавиатуры и т.п.

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

Положительные примеры простых сайтов:

• Jevix.
• Free-lance.ru.
• GUI.ru.
• Юра Ветров.
• InterFace Architect.

Тем временем

1. Миша Квакин хватает Дональда Трампа за бороду.

2. Сергей Чаботько пишет о поисковом маркетинге.

3. Футуриус размышляет о твиттере 3.0.

4. Егор Чернев рассказывает о дизайне рабочего места.

Такие встречаются преимущественно именно на flash-сайтах, которые обычно создают незаурядные люди, но не всегда с задатками ucd-специалистов. Хоть и в этой братии зачастую встречаются ОЧЕНЬ любопытные экземпляры человеческой мысли.

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

Каким лядом я оценивал всё это разнообразие?
• Нетривиальность лоадбара (загрузчик).
• Необычность метода навигации на главной странице.
• Интересность графических эффектов.
• Нетривиальность первого экрана (вход\выбор языка и т.д.)
• Свобода выбора – html или flash.
• Степень удобности вышеперечисленных пунктов. Разумеется на мой взгляд.

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

PS: загляните также в «профиль» — это стол с бумажками – посмейтесь.

Лоадбар: милый ураганчик.
Навигация: очень необычно, и красиво.
Эффекты: впечатляют.
Первый экран: отсутствует.
Выбор: также нет.
Удобство: на высоте. Я ни разу не затруднился.

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

Лоадбар: очень простенький, и вкусный.
Навигация: необычно, но неудобно.
Эффекты: практически отсутствуют, или почти незаметны.
Первый экран: его нет.
Выбор: тоже нет. Сплошная диктатура.
Удобство: сайт вызывает некоторые затруднения, т.к. довольно сложная навигация, на мой взгляд.

3. Nagaoka Institute of Design
Сайт института дизайна должен впечатлять. И этот сайт с гордостью справляется с возложенной на него задачей – нетривиальная навигация, необычный способ предоставления информации, и вкусная графика студентов – что еще нужно для полного счастья?

Лоадбар: необычен тем, что в нем поясняется метод навигации по сайту, но недостаточно нужной информации о процессе загрузки, что удручает.
Навигация: необычно. Выполнено в виде двух рулеток, и ассоциативного ряда между ними – студент-работа. Удобно.
Эффекты: их немного, и главное, они к месту, что радует.
Первый экран: его нет.
Выбор: тоже нет.
Удобство: бесспорно удобно, но необычно. Учится не нужно.

4. UNIQLO
Несколько необычный сайт, по модельного агенства, с вполне обычной одеждой. Даже не особо дорогой. Навигацию по сайту очень неприятна, из-за специального горизонтального скролла, и отсутствия какой-либо информации о товаре – только картинка. Зато на картинках красивые девушки – это плюс:)

Лоадбар: по сути его нет. Только надпись «идет загрузка».
Навигация: местами обычно, а местами не очень. Вносит сумятицу в разуме. Неудобно.
Эффекты: эффектов нет вообще.
Первый экран: есть, но с минимумом информации.
Выбор: нет.

5. Instinct
Наши ребята не дремлют, и вполне могут дать фору многим флешерам зарубежья. Вообще на ум приходит только одна навязчивая мысль – что ребята из Park Studio курят, и где можно купить такую дрянь?

Лоадбар: выполнен в виде красивых спидометров с глазом.
Навигация: очень необычно – мы должны вкидывать предметы в «молотилку», а нам показывается информация о работе. Интересно, но несколько непривычно.
Эффекты: куча эффектов, особенно анимационных. К месту.
Первый экран: есть.
Выбор: нет.
Удобство: несколько неудобно, но схватить идею не сложно.

6. Julie Bayard
Эта девушка – чрезвычайно талантливый дизайнер одежды, фотограф, и график. Шикарные идеи, и мысли на этом сайте встретить не проблема, а правило.

Лоадбар: сделан в виде постепенно подгрузки работ с движением влево. Очень необычно.
Навигация: интуитивно понятна, и вполне адекватна в таком сайте.
Эффекты: их немного, и все «в тему».
Первый экран: нет.
Выбор: тоже нет.
Удобство: довольно удобно.

7. Johnny Slack

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

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

8. Created 201 Studios
Сайт сделан в виде «гламурного» куба, стороны которого являются разделами. Весь сайт укрыт узорами, симпатичными орнаментами в виде логотипа студии. Их работы впечатляют, а клиенты тем более.

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

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

Лоадбар: в наличии, вполне интуитивен.
Навигация: хорошая, без излишеств, правда есть несколько недостатков. Среди них непонятное меню.
Эффекты: графические эффекты используются в виде анимации существа, и наших над ним издевательств.
Первый экран: есть.
Выбор: нет.
Удобство: без 100 грамм не разберешься.

10. WhiteVoid
Сайт сделан в виде непонятной коробки (книги?) с синими листочками, на которых есть информация. Flash использует разнообразные 3d эффекты, которые управляются с помощью нашей драгоценной уже мышки.

Лоадбар: в наличии, но не интуитивен совершенно.
Навигация: странная, я бы сказал неудобная. На пользу 3д не пошло.
Эффекты: 3д.
Первый экран: нет.
Выбор: нет.
Удобство: тоже нет.

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

Тем временем:
1. Миша Квакин пишет о темах для темах для блогов.
2. Сергей Чаботько молится на пересчет PR в Google :)
3. Футуриус размышляет о судьбе десткопах.

PS: Я думаю вы заметили новый дизайн. Можете поздравить с ним меня (дизайн), Андрея WebMolota (верстка), и Сергея Клейменова (создание темы из верстки). И да — это не флаг.

Что такое 2.0? Веб 2.0. Я не знаю — действительно ли это массовое помешательство на почве веб, либо же вполне реальная ситуация. Я знаю точно одно — интернет изменился. И не важно почему, примем это как факт — создатели сайтов стали гонятся за юзабилити, совершенно упуская самое главное, что есть в сайте. Регистрацию.

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

Да, сайты стали лучше, определенно. Нет больше откровенных графических ляпов, или невоспринимаемой информации (точнее есть, но не в большинстве случаев). Нет больше моря раздражающих флеш-баннеров, мигающих GIF-картинок, текстов наподобие «вышлите 10 wmz на этот кошелек и вы получите 15, я знаю…». Интернет стал определенно чище, лучше, быстрее, удобнее и… красивее.

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

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

Для начала я бы хотел выбрать десять своих подопытных 2.0 сервисов, которые являются несомненно русскими (или из СНГ), которые предоставляют сервис конкретно 1\6 части суши на Земле.

1. Первый в списке несомненно Хабрахабр. Куда же без него. Мастера и ремесленники из Футурико и Тематических Медиа создали очень полезный и хороший сервис для обмена опытом между около-айти-шным людом ради пущего блага и взаимного процветания.

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

3. Memori. Лучший в мире сервис закладок. Я не шучу — по мощностям и возможностям сервис от бывшего создателя ДоброгоБобра, для меня является беспорным лидером по удобству и функционалу среди других сервисов закладок.

4. БобрДобр. Добрый Бобр также как и Memori позволяет людям хранить закладки, которые не хотите или не имеете возможность хранить у себя в браузере. Синхронизация между всеми компьютерами тоже играет свою роль.

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

6. Автокадабра. Еще одна относительно молодая социальная сеть на почве автомобиле-мании. Успешный запуск и занятие своей доли рынка сделано благодаря вере в создателей Хабрахабра. И они нас не подвели.

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

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

9. Новости 2.0. Российский Digg на стероидах.

10. Блог.ру. Без комментариев.

Итак — с подопытными мы определились, пора приступать к делу.

1. Хабрахабр
2. RuTube
3. Memori
4. БобрДобр
5. VideoRadar
6. Автокадабра
7. ILoveCinema
8. МирТесен
9. Новости 2.0
10. Блог.ру.

1. Хабрахабр

Плюсы:

1. Лаконичность регистрации. Отсутствие разнообразных полей, которые требуют заполнения в обязательном порядке. Заполнять нужно только то, что нужно для регистрации, и ничего более.
2. Логин можно проверить на занятость не перегружая страницу, это довольно полезно и удобно.
3. Дизайн минималистичен, но сделан грамотно с точки зрения компоновки элементов. Отсутствие плашек, лишних линий только радует.
4. Капча различима.
5. Присутствует ссылка на помощь заблудившимся.
6. Наличие подсказок под каждым полем.

Минусы:

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

Итого: регистрация на Хабре заслуживает 75 баллов из 100.

2. RuTube

Плюсы:

1. Отсутствие кучи обязательных полей, опять же лаконичность.
2. Возможность проверки логина на занятость.
3. Подсказки по заполнению к каждому полю.
4. Вполне различимая капча.

Минусы:

1. Дизайн хоть и минималистичен, но с точки зрения юзабилити, на мой взгляд, тут полный ахтунг. Разброс полей для заполнения в первые секунды заставил потеряться от их расположения и компоновки.
2. Отсутствие ссылки на помощь заблудившимся.
3. Отсутствие ссылки на восстановление утерянного пароля.
4. Кнопка «Отправить» — эталон мишени для снайперов мыши.

Итого: регистрация на Rutube набрала всего 50 баллов из 100.

3. Memori

Плюсы:

1. Лаконичность и простота регистрации.
2. Подсказки в нужных местах.
3. Различимая капча.
4. Довольно хорошая компоновка. Не без минусов — стоило бы кое-где доработать, но в целом дизайн грамотен.
5. Проверка логина на занятость.

Минусы:

1. Отсутствие ссылки на помощь.
2. Отсутствие ссылки на вход и восстановление пароля.
3. Маленькая кнопка.

Итого: Memori зарабатывает своей регистрацией 62,5 бала из 100.

4. БобрДобр

Плюсы:

1. Лаконичность. Опять. Ну тут уж не отнять.
2. Хорошая компоновка, но можно чуть переделать и станет еще краше.
3. Наконец-то нормальная кнопка.
4. Различимая капча.
5. Присутствие подсказок к полям.

Минусы:

1. Отсутствие ссылки на помощь.
2. Отсутствие ссылок на вход и восстановление пароля.
3. Отсутствие проверки логина на занятость.
4. Авто-подписывание регистрирующегося на e-mail рассылку.

Итого: сервис БобрДобр имеет 55 балов из 100.

5. VideoRadar

Плюсы:

1. Хорошая компоновка элементов, практически нечего исправлять.
2. Полное отсутствие капчи. Ура!

Минусы:

1. Какая лаконичность и краткость? О чем вы? Куча полей, в которых легко можно потеряться.
2. Отсутствие подсказок к полям.
3. Тоненькая кнопка.
4. Отсутствие ссылок на восстановление пароля и вход на сайт.
5. Отсутствие ссылки на помощь.
6. Отсутствие проверки логина на занятость.
Итоги: плачевны для сервиса VideoRadar. Восходящая звезда видео-хостинга смогла набрать лишь 25 баллов из 100.

6. Автокадабра

Плюсы:

1. Просто и лаконично. И всё тут.
2. Компоновка на высоте — не к чему придраться.
3. Наличие проверки на правильность ввода практически в каждом поле. С логином включительно.
4. Капча различима.
5. Присутствие подсказок к полям.
6. Нормальная кнопка.

Минусы:

1. Отсутствие ссылок на восстановление пароля и вход на сайт.
2. Отсутствие ссылки на помощь.

Итоги: Автокадабра показала себя достойной, и набрала 75 балов из 100.

7. ILoveCinema

Плюсы:

1. В наличии проверка на правильность заполнения поля, включая поле логина.
2. Отсутствие капчи.
3. Наличие подсказок к полям.

Минусы:

1. Компоновка элементов не на высоте — слишком большой разброс заставляет глаз метаться в поисках удобства, а его нет. Присутствие плашек и линий тоже чести не делает. Тут они явно лишние, и отвлекают. Переменные цвета нужны лишь в больших массивах данных, тут же они явно лишние.
2. Отсутствие ссылок на вход и восстановление пароля.
3. Отсутствие ссылки на помощь.
4. Нелаконично — слишком много полей, которые нужно заполнить, я теряюсь.
5. Маленькая кнопочка.
6. Зачем-то ссылка на «отмену» рядом с кнопкой окончания регистрации. Видимо для того, чтобы особо удачливые на неё нажали.

Итоги: проект заработал свои 33 бала из 100. Обидно.

8. МирТесен

Плюсы:

1. Лаконичность.
2. Хорошая компоновка элементов. Всё на своём месте.
3. Наличие подсказок, правда в неудобном месте.
4. Возможность переключится на страницу входа на сайт.
5. Отсутствие капчи как таковой.
6. Нормальная кнопка.

Минусы:

1. Отсутствие ссылки на помощь и восстановление пароля.
2. Отсутствует проверка на незанятость логина.
3. Автоматическая подписка на рассылку.

Итоги: МирТесен заслуженно получает свои 66 балов из 100.

9. News 2.0

Плюсы:

1. Лаконичность. Побольше бы таких регистраций.
2. Хорошая компоновка элементов. Грамотно.
3. Воспринимаемая капча.

Минусы:

1. Отсутствие подсказок по заполнению полей.
2. Отсутствие ссылки на вход и восстановление пароля.
3. Отсутствие ссылки на помощь.
4. Отсутствие проверки на незанятость логина.
5. Маленькая кнопочка. Опять кастинг на снайперское мастерство.

Итоги: в принципе хороший сайт получает не совсем хороший рейтинг по удобству регистрации. Всего 37,5 балов из 100.

10. Блог.ру

Плюсы:

1. Лаконичность.
2. Наличие подсказок для всех полей.
3. Воспринимаемая капча.
4. Возможность проверить занятость логина.
5. Нормальная кнопка.

Минусы:

1. В дизайне наличествует куча лишних элементов, которые не несут никакой практической пользы. Ужасная компоновка вызывает кашу в восприятии.
2. Отсутствие ссылки на помощь.
3. Отсутствие ссылок на вход и восстановление пароля.
Итоги: 62 бала из 100.

Выводы и сводная таблица

1. Первое место разделили Хабрахабр и Автокадабра набрав по 75 балов. Примечательно, что оба проекта от одних создателей, и это радует.
2. Второе место занял единолично МирТесен, который набрал 66 балов.
3. Третье место разделили Мемори и БлогРу набрав по 62,5 бала.
4. Четвертое место занял сервис закладок БобрДобр набрав 55 балов.
5. Пятое место RuTube — 50 балов.
6. Шестое ILoveCinema — 33 бала.
7. VideoRadar — 25 балов.

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

Меня поразила откровенно неудобная регистрация на RuTube, ILoveCinema, и VideoRadar. Ведь проекты довольно известны, популярны, и тут такая оплошность. Порадовали проекты от компании Futurico — Хабрахабр и Автокадабра, которые хоть и не набрали максимальное колличество балов, но разделили первое место. Неплохо себя показали Мемори и БлогРу, хотя, по идее, должны были еще лучше.

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

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

Тем временем

1. У Миши Квакина родился сын! Мои ему поздравления.

2. Юра Гугнин описывает свою бизнес-идею для московских гастрабайтеров.

3. Сергей Чаботько исследует ИТ Белорусии.

4. Футуриус утопично рассказывает об анонимности и больших сетях будущего.

5. Артём Майнас размышляет о TooDoo.

PS: Рекомендую также прочитать пост-заметку о создании Идеальной регистрации.

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

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

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

Что мы получили?

1. YouTube — я нисколько не сомневался в том, что он займет первое место, хотя и понимаю, что он не является лучшим решением. У данного сервиса есть одно большое преимущество — толпа. Следовательно и колличество роликов, комментаторов, и т.д.
2. Vimeo — как окрестили его Интернетные штучки — идеальный видео-хостинг. Я бы не сказал, что он идеален, но он безумно хорош, удобен и красив. Рекомендую обратить на него внимание.
3. RuTube — качественный, и главное отечественный видео-хостинг. Им приятно пользоваться.
4. Viddler — еще одно интересное решение на почве видео-хостингов. Достаточно популярен, но на мой взгляд не лучшее решение.
5. Veoh — одним словом — популярный аутсайдер.

Итак, с подопытными определились, теперь можно и приступить к описанию путешествий.

Ситуация: я впервые вижу сайт, то бишь не зарегистрирован, и хочу загрузить свое первое видео (мои действия и ощущения).

1. YouTube. Я хочу загрузить видео и нажимаю на кнопочку Upload (1 шаг). Меня перекидывает на страницу авторизации-регистрации. По всей видимости для того, чобы загрузить свое первое видео тут мне потребуется регистрация? Заполняю кучу данных (шаг 2) (нафига так много-то?). Мой аккаунт дублируется в базы данных ФБР? Непонятно…. Заполнив все поля меня послали к себе же в почтовый ящик — проверьте, мол, свой e-mail на наличие подтверждающего письма (шаг 3).

Лезу на свой почтовый ящик, подтверждаю (шаг 4). Меня кидает на страницу с просьбой подтверждения паролья к e-mail-у. Недоумеваю зачем это требуется, но ввожу еще раз (шаг 5). Ой, а ведь не нужно ничего вводить — незаметно меня уведомили в том, что Your email has been confirmed. Благодарю покорно, я чуть было не отослал подтверждающее письмо заново.

По умолчанию после подтверждения e-mail, я сразу и авторизован под своим логином. Это меня радует. Но мне ведь нужно залить видео — жму кнопку Upload (шаг 6). Меня перекидывает на страницу с опциями (шаг 7) (опять куча полей и опций), недоумеваю — «ЗАЧЕМ ТАК МНОГО-ТО?». Ввожу поля, и мне выдают вожделенную форму загрузки (шаг 8). Выбираю видео, и жму кнопку Upload Video (шаг 9). Жду пока загрузится, меня очень «радует» надпись «connecting» на протяжении всего процесса загрузки. Понимаю, что flash-загрузчик не сработал, переключаюсь в резервный html загрузчик (шаг 10).

Опять выбираю файл, и жму кнопку (шаг 11). Загрузка произошла, вуаля. Без лишних слов мне предлагают форму вставки видео на сайт. Радует. Не радует то, что меня не перенаправляют сразу на загруженное видео, и мне нужно найти это видео в вкладке «My Videos» — что означает еще два клика. Итак — «всего» в 13 шагов мы наконец получаем видео. Удручающий результат.

2. Vimeo. Задача моя не изменилась — мне нужно загрузить видео на сайт. Смотрю на сайт и… не понимаю где кнопка загрузки. По всей видимости её нет, и чтобы загрузить мне нужно зарегистрироватся. Жму на кнопку Join Vimeo — она большая и оранжевая, меня это радует (шаг 1).

Смотрю на страницу регистрации, и не понимаю зачем мне столько графики на ней? Летающие облачка (которые кстати не отражаются в воде) меня отвлекают от главной цели. Зато регистрация простая и очень удобная — всего 3 поля. Радуюсь и заполняю (шаг 2).

Без лишних вопросов меня перенаправляют на мою личную страницу, с которой можно заполнить личную информацию, или загрузить видео. Жму на ссылочку Upload (шаг 3). И тут меня удивляют тем, что я прежде чем загрузить видео — должен подтвердить свой e-mail.

Сердито матерясь опять лезу на свой почтовый ящик, и подтверждаю (шаг 4). Опять жму Upload (шаг 5). Выбираю файл для загрузки, и видео само начинает загружатся, без лишних кликов (шаг 6). Показывается красивый прогресс-бар и процент загрузки, что меня радует. Видео загрузилось и мне предлагают пройти сразу к своему к нему (шаг 7). Неплохой результат, по моему мнению.

3. RuTube. Цель всё та же. Без лишних слов жму на кнопочку «Загрузить видео» (шаг 1). Меня перекидывает на страницу авторизации. Регистрируюсь, т.к. аккаунта по умолчанию не имею. Регистрация средней сложности, и заморочности — 4 поля, и капча. Зарегистрировался (шаг 2).

Опять нажимаю на кнопку «Загрузить видео» (шаг 3). Выбираю видео на компьютере, и заполняю информацию и жму на кнопку (шаг4 и 5). К слову — процесс-бар очень неплох, доволен этим. Видео загрузилось, я нажимаю на ссылку, и перехожу непосредственно к нему (шаг 6). Вуаля — хороший результат.

4. Viddler. Без лишних слов приступаю к загрузке. Как загрузить? Непонятно — ведь кнопки загрузки нет. Судя по опыту — ищу ссылку на регистрацию. Жму на кнопку (шаг 1), и смотрю на страницу. Регистрация простая — 4 поля, и меня это радует. Заполняю, жму на кнопку (шаг 2). Меня перекидывает на второй шаг регистрации. Тут мне предлагают заполнить личную информацию, но опциально (не обязательно).

Заполняю и жму «save» (шаг 3). Просят проверить e-mail и подтвердить. Подтверждаю (шаг 4). Мой аккаунт активирован, мне предлагают войти на сайт — вхожу (шаг 5). Меня перенаправляют на личную страницу, и на ней я жму ссылку Upload (шаг 6).

На автомате меня направляет на флеш-аплоадер. Это не мой вариант, выбираю простой вариант (шаг 7). Выбираю файл для загрузки и заполняю информацию, жму кнопку и жду загрузки (шаг 8 и 9). К слову — процесс-бар мне очень понравился — хороший. После загрузки мне предлагается загрузить еще одно видео. Мне это не требуется. Иду в вкладку «Мои видео» и выбираю загруженный ролик (шаг 10 и 11). Вуаля. Честно говоря — результат немного лучше, чем Youtube, но тоже плачевный.

5. Veoh. Ищу ссылку загрузки и… нахожу! Меня это радует, жму на неё (шаг 1). Меня направляет на страницу регистрации. Опять недвусмысленные намеки. Ввожу данные и регистрируюсь (шаг 2). Регистрация, кстати, довольно заморочена — много лишних полей. И уж точно непонятно зачем в качетсве обязательного поля выступает дата рождения. Очень плохая капча, состоящая из двух слов.

После регистрации меня заставляют подтвердить свой e-mail. Лезу в почтовый ящик и подтверждаю (шаг 3). Сразу после подтверждения мне предлагают загрузить мое первое видео — жму на ссылку (шаг 4). И меня перекидывает на какую-то страницу, где нужно нажать на кнопку еще раз — странное действие. Жму (шаг 5). Ввожу информацию (шаг 6). Выбираю видео и загружаю (шаг 7). Процесс загрузки неплохой, но и удобством не блещет.

Жду окончания загрузки и получаю код для вставки на сайт, и ссылку на видео. Перехожу к видео и смотрю (шаг 8). Ура.

Выводы

Выводы не так плачевны, как предполагалось изначально, но в то же время — очень неожиданны. По скорости и удобству загрузки я бы хотел выделить RuTube и Vimeo — не заставляют пользователя потеть для того, чтобы загрузить видео. Следом за ними по пятам следует кажущийся изначально аутсайдером Veoh. Следом за ними идет Viddler, а потом Youtube.

Я сильно удивлен полученными результатами, ведь Youtube по идее должен выдавать наилучший результат, а выдает самый худший — 13 шагов. Очень неожиданным для меня (наверное и для вас) стало лидерство нашего родного сервиса RuTube — поистине достойный результат в 6 шагов меня искрене радует. Vimeo не слишком отстает от Рутьюба, но всё-таки второй.

Хотел бы уделить некоторое внимание Vimeo — очень красивая вещь. Вот только иногда эти красивости там явно лишние.

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

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

Тем временем

1. Миша Квакин пробует подружить Total Commander с эмо-стилем.

2. Аня Галкина пишет о «гламурных рисунках».

3. Сергей Чаботько размышляет о секьюрности рунета.

4. Футуриус хочет встретится в Киеве.

5. Артём Майнас развенчивает миф о рекламных rss переходах.