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

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

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

1. Форма входа должна быть видна на первом экране браузера. Т.е. сразу при открытии сайта, без использования полосы прокрутки. При этом нужно учитывать минимальную высоту разрешения мониторов пользователей на момент создания дизайна, а также то, что браузер забирает на себя от 10 до 30% пространства.

---

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

---

3. «Размер не имеет значения». Фраза, которая никак не относится к кнопке входа. Она не должна быть расчитана на снайперов. Учитывайте, что сейчас всё большее распространение приобретают мониторы с довольно большим разрешением, на которых маленькие кнопочки выглядят сущим мучением. Но в то, же время не переусердствуйте с размерами.

---

4. Зачастую кнопка входа лучше всего смотрится, если её ширина совпадает с шириной полей. Хотя это уже зависит напрямую от дизайнера, который и занимается проектировкой формы входа. Данный момент точно не является правилом. Скорее личным предпочтением автора.

---

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

---

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

---

7. Размеры полей должны быть удобными как для ввода, так и для чтения. Стоит также учитывать отступы от краев поля до текста внутри него. Причем с запасом прочности – не все браузеры одинаково выводят текст внутри поля. Любимый верстателями Internet Explorer вообще любит отступы на завтрак кушать.

---

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

---

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

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

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

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

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

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

PS: Друзья, настоятельно рекомендую тем, кто еще не читал небольшую информацию к прочтению обязательно её прочитать.

PPS: У вас есть твиттер? Тогда вы можете меня читать там же.

Тем временем

1. Миша Квакин пишет о жёлтеньких (именно таких) страницах интернета.

2. Егор Чернев обозревает видео плеер Panda.

3. Guicci ищут программиста в Минске.

4. Сергей Чаботько рассказывает о конкуренции в сфере контекстной рекламы.

Статья в оригинале

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

А дело в том, что сегодня во всем мире празднуется День Блога (условия акции). Узнал я о нем от товарища Кеноби, для которого мой сайт является одним из примеров очень полезного блога. О чем это я? А дело в том, что по условию акции — нужно выбрать пять интересных для себя блогов. Причем, обязательно, не из своей области, и осветить их в аналогичной заметке.

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

1. Tod`s Blod. Тод пишет довольно часто — через день. При этому умудряется писать интересно, содержательно, и выдержано касательно своей темы. Хотя иногда попадаются жемчужины вроде статьи о русском царе Павле первом.
   1. Cinemma. Так как я довольно положительно отношусь к такому способу вдохновления как кино — этот блог стал для меня сущей находкой. Благодаря ему я не пропускаю выхода новых интересных фильмов. Именно через него получаю последние трейлеры, за что и благодарен создателю. Так держать.
      1. Ольга Воропай. Человек с горящим в руках пером (ручкой, карандашем — нужное подчеркнуть). Это блестящий копирайтер, которого я заочно знаю благодаря сайту free-lance.ru, и с удовольствием почитываю ради того, чтобы радовать вас правильной речью в статьях.
         1. Стамеска. Это блог о креативной. Но с небольшим отличием от аналогов — этот сайт интересно не только смотреть, но еще и читать. Крайне рекомендую всем, кого не оставляет идейная, красивая реклама, благодаря которой хочется что-то купить.
            1. inPic. Это коллективный несовсемблог. Тут совершенно нет текста, зато есть множество идейных изображений. Можно провести параллели со Стамеской, но вы будете не правы. Далеко не все креативные и интересные картинки это реклама. И inPic помогает мне набираться хорошим настроением.
               

               blogday2008

               
               

               Ура!

               
               

               PS: эта заметка попала в категорию «Немного слов», как и все остальные, которые совершенно не относятся к предмету юзабилити.

               
               

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

               
               

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

               
               

               1. Миша Квакин диктует своим потенциальным работодателям условия потенциальной же работы.

               
               

               2. Сергей Чаботько заговорил о… добре?!

               
               

               3. Егор Чернев описывает способы создания псевдо-3д.

               
               

               4. Юре Гугнину ну ОЧЕНЬ нужны талантливые маркетологи-продавцы

Статья в оригинале

Существует огромное количество графических редакторов - растровые, векторные, 3д, есть даже текстовые (sic!). Когда же перед вами стоит задача: в чем же рисовать блочную разметку – вам придется выбирать. Лучше всего, конечно, попробовать каждый из них самому, чтобы определится в своих личных предпочтениях, и составить собственное мнение, но это не всегда удается.

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

Рассматривать я буду, конечно, далеко не все подходящие редакторы, но несколько хороших, а главное качественных – рассмотрю, а вы уже выбирайте сами, какой вам больше по душе.
Начать хотелось бы с исконно проектировочных программ – Axure Pro, и MS Expression Blend (не спешите плеваться – программа на высоте).
Итак, поехали.

Axure Pro

Очень мощная программа, которая позволяет не просто проектировать интерфейсы, но и сразу, же переводить их в html, или chm формат для пущего удобства (javascript также широко используется). Т.е. вы водите мышкой в редакторе, а на выходе получаете вполне себе работающий прототип интерфейса, который спланировали ранее. Программа не дешевле остальных участников тестирования, но имеет не меньше возможностей.

Прототипирование в этой программе - легкий процесс благодаря возможности создания диаграмм и простейших сценариев на подобии продуктов Microsoft – Visio и Outlook Express.
Работать с Axure лучше всего на небольших проектах, у которых в наличии большая и компактная функциональность. Также её можно использовать и для больших проектов, но это чревато долгим откликом программы на несильных компьютерах. Для больших же проектов аксурке банально не хватает возможностей: в частности – программирования, и создания баз данных, которые при создании полного прототипа (а не только блочной разметки) определенно нужны.

Конкретно для создания wireframes эта программа использует лишь малую часть своего обширного функционала, поэтому назвать Axure программой для создания блочной разметки – нельзя. Скорее она предназначена для визуализации уже спланированного на бумаге прототипа, но и исключать из списка её тоже нельзя – т.к. инструмент, очень мощный и полезный для юзабилистов.
Стоит Axure на данный момент $589.
Подробнее о работе в этой программе я напишу позже.

MS Expression Blend

Новая линейка графических редакторов от компании Microsoft – Expression определенно радует своей функциональностью и внешним видом. Что примечательно – Microsoft лишь выкупила готовый продукт у небольшой гонконгской компании Creature Housе (и самих Creature House тоже выкупила), а не создала конкурента как она обычно поступает в таких случаях. В нашем случае – хотелось бы осветить программу из комплекса MS Expression – Expression Blend. Эта программа предназначена конкретно для создания wireframes, и прототипирования, поэтому функционально – она определенно лучше Axure (для работы с блочной разметкой, конечно же).

Тут в наличии большая библиотека контролов – разнообразные кнопки, выпадающие списки, поля для ввода текста, radio-кнопки, чеклисты и прочие страшные слова. Удобная работа с wireframes с помощью множества слоев – также в наличии.
Эта программа также заточена под визуальное создание прототипа итогом которому будет html, xaml-анимация, и javascript файлы.
Есть удобные инструменты для работы с простейшими формами – элипсы, точки, линии, и многоугольники остаются неизменными.

Программа вплотную работает с технологией MS Silverlight (конкурент Adobe Flash) без нужды устанавливать MS Visio с его монстроподобным интерфейсом и прочая-прочая. Есть также встроенный JS-редактор.
Еще одним из преимуществ программы является XAML-анимация, которая позволяет экспортировать результаты визуальной работы в html без потери качества. Она же создает для прототипа анимацию кнопок, и других контролов. Каждый XAML-файл могут отредактировать С# или VB программисты вручную, что является определенным плюсом в совместной работе дизайнера и программиста.

Также удобна для работы с шрифтовыми интерфейсами, которые практически не используют графику – множество настроек, и функций помогут настоящим типографам сделать очередную дизайнерскую конфетку.
Программа подходит для проектирования не только веб интерфейсов, но и настольных (десткопных) приложений. Небольших приложений, правда, но…
Результатом работы может быть как статическая картинка, так и работающий html-прототип с silverlight и javascript.

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

Стоит данная программа $575, что довольно ощутимо даже в сравнении с стоимостью Adobe Photoshop CS3 ($1000).

MS Visio

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

туда можно даже не соваться. Я попробовал однажды, и не смог осилить ни монстрообразный интерфейс, ни способы работы с программистом в паре. Остановились мы на программе Expression Blend, как я об этом уже писал выше.

Из плюсов можно выделить:

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

         Из минусов же:

         
         
         1. Ужасную производительность программы.
            1. Запутанность интерфейса.
               1. Сложность работы для простого дизайнера.
                  

                  Стандартная версия стоит 350 долларов, за профессиональную же придется отдать 750 полновесных зеленых рублей.

                  
                  

                  Pencil Project

                  
                  

                  Pencil Project не является программой в полном смысле этого слова. Это расширение для браузера Mozilla Firefox (как 2й так и 3й версии). С помощью этого уникального дополнения можно свободно визуализировать интерфейсы, и проектировать блочную разметку. Самый большой плюс – это абсолютно бесплатно и под удобной лицензией – GPL 2. Также большим плюсом является кроссплатформенность – firefox создается под большинство популярных платформ – Windows, Mac, Linux.

                  
                  

                  

                  
                  

                  Интерфейс программы радует своей лаконичностью, и при этом мощностью – тут и сетка, и удобное перетаскивание нужных элементов, редактирование текстов, библиотека паттернов и форм. Простенький визуальный редактор только плюс – не засоряет важное пространство в программе и подчеркивает только важные функции, которыми пользуется большинство дизайнеров. В общем и целом – если до этой программы я использовал для создания wireframes преимущественно photoshop (а для прототипирования – Expression Blend) то теперь с удовольствием использую Pencil Project вместо него.

                  
                  

                  

                  
                  

                  В общем – простое, как отвертка, приложение, которое успешно справляется со всеми нужными действиями при создании wireframes. Крайне рекомендую пользователям Firefox.

                  
                  

                  Balsamiq Mockups

                  
                  

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

                  
                  

                  

                  
                  

                  По сути – спроектировать тут можно всё. И весь интерфейс будет в зарисовки на бумаге – неровные линии, шрифт. Шрифт, кстати, подобран ну очень удачно – легкочитаемый, кириллический, и в рукописном стиле.

                  
                  

                  

                  
                  

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

                  
                  

                  Выводы

                  
                  

                  Для тех, кому не нужны жуткие навороты: прототипирование в html и прочая шелуха – тому лучше использовать Pencil Project, и Balsamiq Mockups. Я, лично, отдаю преимущество первому – т.к. он абсолютно бесплатен и работает на моем любимом браузере. В то же время Balsamiq Mockups очень удобна, если нужно создать wireframes быстро и со вкусом.
                  В случае же, если вам нужно еще и прототипирование, редактор кода, javascript и прочий функционал – рекомендую обратить внимание на продукт Expression Blend – красивый, функциональный интерфейс которого не оставит вас равнодушным.

                  
                  

                  Тем временем

                  
                  

                  1. Миша Квакин раскрепостился от оков постоянной работы и стал фрилансером.

                  
                  

                  2. Сергей Чаботько рассказывает о том, чему нужно следовать начинающим СЕО-шникам

                  
                  

                  3. Юра Гугнин написал о своей новой работе в роли маркетолога.

                  
                  

                  4. Футуриус пишет о МО технологии.

                  
                  

                  5. Егор Чернев пишет о закругленных блоках с помощью css.

Статья в оригинале

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

         
         

         

         
         

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

         
         

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

         
         

         

         
         

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

         
         

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

         
         

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

         
         

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

         
         

         

         
         

         Выводы:

         
         

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

         
         

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

         
         

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

         
         

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

         
         

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

         
         

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

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

Статья в оригинале

О простоте в дизайне много говорят, но мало делают. Многие в разговорах со мной обращают внимание на то, что знают всё о простоте в дизайне, и более того — всегда применяют. Затем волей случая нам приходится работать вместе, а простота куда-то убегает в результате работы, что сильно удручает.

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

Немного слов

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

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

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

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

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

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

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

                              
                              

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

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

                              Тем временем

                              
                              

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

                              
                              

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

                              
                              

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

                              
                              

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

Статья в оригинале

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

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

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

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

Итак: вот, что получилось в прошлый раз:

Что с ним стоит сделать?

1. Избавится от черного цвета, который хоть и недурно подчеркивает цветность видео, но сильно забирает на себя внимание, что отвлекает от содержания ролика. Поэтому я сменил черный цвет на нейтрально серый, смешав цвета плеера САЛ и компании Apple. Гибрид получился аскетичным, и симпатичным. И что немаловажно – больше не отвлекает внимание от содержания.

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

3. Добавить кое-какие метаданные. Например, длину ролика, процент потоковой загрузки, и время проигрывания. Я постарался эти данные оставить в одной плоскости, но разделить визуально – ведь процент, и время несколько разные вещи.

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

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

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

5. Сделать интуитивную полосу проигрывания. Теперь проигранное время выделено красиво гармонирующей синей полоской, а загруженное время – красивой серой. При этом у меня возник спор с Ромой Горшковым по поводу контрастности серой полоски по отношению к фону плеера.

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

6. Сделать хороший прелоадер. Отсутствием оного грешат множество видеоплееров, что совсем не является их плюсом. Благодаря идее товарища Алишера (привет!), я решил сделать его в виде старого ленточного круга с сменяющимися цифрами от 10 до 1, но только на современный лад.

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

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

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

О механике

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

Как это сделано в этом прототипе? Уровень звука подсвечивается при наведении, и при клике на наведенную полоску – устанавливается. Если пояснение неясно – смотрите на картинку.

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

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

4. Я не считаю, что отказ от рамок плеера позволяет ему более хорошо вписаться в дизайн сайта. Серый цвет нейтральный, и внимание не привлекает – вписывается в любой дизайн, в отличии от черного. Зато рамки помогают «не сбежать» взгляду с видео. Часто, смотря видео без рамок, мой взгляд непроизвольно перемещается за пределы ролика, и я пропускаю моменты видео, тем самым дезориентируясь в нем.

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

6. Кнопка «Во весь экран» при наведении расширяет свои границы, что в разы повышает наглядность.

7. Пример реакции кнопок на наведение:

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

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

PS: Внутри плеера используется видео из игры StarCraft 2.

Тем временем

1. Миша Квакин пишет о возможном появлении публичных блогов читателей внутри своего.

2. Сергей Чаботько меняет людей на деньги.

3. Футуриус публично и яростно ненавидит спам. Видимо О.Н.И. уже добрались и до него.

4. Юра Ветров размышляет о жизненном цикле интерфейса.

Статья в оригинале

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

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

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

В качестве подопытных кроликов я возьму плеер самого популярного сервиса – YouTube, самого красивого – Vimeo, и самого быстрого – RuTube.

Затрагивать в переделке я буду несколько тем – эстетику, удобство внутреннего функционала, устройство навигации внутри видеоролика.

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

YouTube
Все на месте, но мне не нравится дизайн. На мой взгляд, слишком уж просто, и некрасиво. И если, скажем, в GoogleTalk простота красивая, то тут уж никак не подходит под это определение.

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

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

Итак, что нам нужно вместить в плеер:

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

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

                        
                        

                        Теперь детальнее:

                        
                        

                        1. Регулирование звука без лишних кликов сразу подразумевает под собой то, что решение, которое используется в RuTube, откидываем, и нам нужно удобно совместить варианты в плеерах YouTube и Vimeo. Индикатор должен отображаться нарастающей волной полосок. Это настолько стандартно, что незачем сбивать людей своими инновационными решениями.

                        
                        

                        2. Т.е. иконки погашения звука в Vimeo нет, мы добавляем и её.

                        
                        

                        3. Симпатичная иконка в Vimeo. В RuTube и YouTube хромает её отображение. Поэтому мы просто доработаем вариант Vimeo – исходящие в 4 стороны луча.

                        
                        

                        4. Совмещаем кнопку «проигрывать» и «пауза». Т.к. кнопка «проигрывать» не может использоваться во время проигрывания ролика, и «пауза» не может использоваться во время паузы.

                        
                        

                        5. См. пункт 4.

                        
                        

                        

                        
                        

                        6. Отсутствием простейшей надписи «загрузка» грешит YouTube, и RuTube. В Vimeo довольно симпатичный и оригинальный индикатор.

                        
                        

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

                        
                        

                        8. В нашем случае это «Мне нравится», «Добавить в сайт», «Коды ролика», «Похожие ролики». К пунктам Vimeo добавил «Похожие ролики», т.к. в YouTube, и RuTube, эта функция в наличии, и я ей регулярно пользуюсь. Я вынесу эти действия на панель, которая выдвигается при приближении курсора к верхнему краю плеера. При бездействии эта панель просто задвигается обратно.

                        
                        

                        

                        
                        

                        К элементам управления сразу относится пару замечаний:

                        
                        

                        1. Они должны как-либо реагировать на наведение курсора.
                        2. Желательно они должны как-либо реагировать на нажатие.

                        
                        

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

                        
                        

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

                        
                        

                        После разворота во весь экран пиктограмма «во весь экран» превращается в пиктограмму «свернуть». Для этого нам просто нужно сжать края ближе к друг-другу. При наведении просто менять эти две пиктограммы.

                        
                        

                        

                        
                        

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

                        
                        

                        Если кому-то захочется, чтобы этот прототип перестал им быть, и кому-то потребуется рабочий вариант плеера – обращайтесь в контакты, обсудим варианты использования моего “.PSD” исходника.

                        
                        

                        Тем временем

                        
                        

                        1. Миша Квакин учредил акцию по раздаче ценных призов в виде красивых RSS иконок.

                        
                        

                        2. Аня Галкина опубликовала небольшой обзор посещения радио-ведущих.

                        
                        

                        3. Сергей Чаботько осветил способ улучшение выдачи в Google.

                        
                        

                        4. Футуриус рассказывает детально о RSS.

                        
                        

                        5. Тёмма пишет о Хабрахабре.

Статья в оригинале

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

Такие встречаются преимущественно именно на 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 (верстка), и Сергея Клейменова (создание темы из верстки). И да — это не флаг.

Статья в оригинале

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

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

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

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

Нафигаонотамнужно?

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

Какая наша задача?

Задач несколько, и они разношерстны по результату.

1. Сделать так, чтобы пользователь обращал внимание на подсказки до возмущенных воплей. Это главная задача – избежать ненужных криков. Как обратить внимание? Показывать конкретную подсказку, для конкретного поля, и только во время заполнения оного. Чем обращает на себя внимание? Динамикой, красивой и грамотной. Можно применять некоторые плашки, фоны (см. первый рисунок). Рамку же лучше не применять отдельно от фона, да и с фоном её, опять же, лучше не применять. Линии сильно «загрязняют» дизайн и ухудшают восприятие «на глаз».
   1. Оформить подсказку таким образом, чтобы она не выбивалась из дизайна, и в то же время привлекала к себе внимание. Это несложно, достаточно проявить толику сочувствия к дизайнеру, если дизайн делали не вы. Если же это ваш дизайн, то проблем возникнуть не должно.
      1. Подчеркнуть то, что подсказка динамически меняется для каждого конкретного поля. В обратном случае мы получим еще более запутанного монстра, чем тот, который был в начале. Опять же – используйте плашки, чтобы подчеркнуть то, что подсказка относится к конкретному полю, и ни к чему другому. Для этого достаточно объединить единым фоном, и приблизить подсказку, для того, чтобы они воспринимались как единый объект, а не как два разных.
         1. Уменьшить «загрязненность» страницы. Для этого все подсказки должны быть динамическими и показываться только при заполнении поля. В купе с предыдущим пунктом мы получим хороший инструмент воздействия на подсознания пользователя, да и привлечем внимание цветом и динамикой.
            1. В случае неверного ввода данных подчеркнуть, что они не соответствуют подсказке. Тут всё довольно просто – нужно указать пользователю тот факт, что из-за того, что он не воспользовался подсказкой, его не пропустит валидация при окончании заполнения. Причем подчеркнуть этот факт нужно во время непосредственного ввода данных в поле.
               1. Подчеркнуть, что всё введено верно. Аналогично предыдущему пункту.
                  

                  

                  
                  

                  Что получим?

                  
                  

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

                  
                  

                  Тем временем

                  
                  

                  1. Юра Гугнин размышляет о бизнесе и его системе.

                  
                  

                  2. Сергей Чаботько освещает новости Байнета.

                  
                  

                  3. Футуриус пробует себя в роли небезызвестного Дарвина.

                  
                  

                  4. Миша Квакин пишет о рейтингах и своём отношении к ним.

Статья в оригинале

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

Что такое 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. Хабрахабр
   1. RuTube
      1. Memori
         1. БобрДобр
            1. VideoRadar
               1. Автокадабра
                  1. ILoveCinema
                     1. МирТесен
                        1. Новости 2.0
                           1. Блог.ру.
                              

                              
                              

                              1. Хабрахабр

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                                Минусы:

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

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

                              
                              

                              
                              

                              2. RuTube

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                          Минусы:

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

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

                              
                              

                              
                              

                              3. Memori

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                             Минусы:

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

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

                              
                              

                              
                              

                              4. БобрДобр

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                             Минусы:

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

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

                              
                              

                              
                              

                              5. VideoRadar

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                    Минусы:

                                    
                                    
                                    1. Какая лаконичность и краткость? О чем вы? Куча полей, в которых легко можно потеряться.
                                       1. Отсутствие подсказок к полям.
                                          1. Тоненькая кнопка.
                                             1. Отсутствие ссылок на восстановление пароля и вход на сайт.
                                                1. Отсутствие ссылки на помощь.
                                                   1. Отсутствие проверки логина на занятость.

                                                      1. Итоги: плачевны для сервиса VideoRadar. Восходящая звезда видео-хостинга смогла набрать лишь 25 баллов из 100.

                                                      
                                                      

                              
                              

                              
                              

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

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                                Минусы:

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

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

                              
                              

                              
                              

                              7. ILoveCinema

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                       Минусы:

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

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

                              
                              

                              
                              

                              8. МирТесен

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                                Минусы:

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

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

                              
                              

                              
                              

                              9. News 2.0

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                       Минусы:

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

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

                              
                              

                              
                              

                              10. Блог.ру

                              
                              

                              

                              
                              

                              Плюсы:

                              
                              

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

                                             Минусы:

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

                                                      1. Итоги: 62 бала из 100.

                                                      
                                                      

                              
                              

                              
                              

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

                              
                              

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

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

                                                   
                                                   

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

                              
                              

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

                              
                              

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

                              
                              

                              Тем временем

                              
                              

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

                              
                              

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

                              
                              

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

                              
                              

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

                              
                              

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

                              
                              

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

Статья в оригинале

Я думаю уже многие наслышаны о объявлении сиквела к нашумевшей (кстати говоря и до сих пор шумящей) стратегии 1998 года - StarCraft.




В связи с этим было выпущено 3 ролика:

1. Зератул
2. Сборка Марина
3. Видео геймплея (в двух качественных вариациях)


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


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

Т.е. фотография застолья, и я подозреваю, что это застолье самой компании Близзард, а именно Team2 - которая и занята StarСraft 2.

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


Судя по всему - это моя личная заметка, и никто до меня этого не подметил.