Вторая часть моего доклада на конференции UA WEB про социальные сети. Тема части: перспективы развития социальных сетей.

Для пропустивших, советую сначала прочитать первую часть

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



Неужели разработчикам сложно вставить простой дисейбл кнопки после того, как юзер осуществляет какое-либо действие, в особенности требующее ожидание и неактивности от него, вместо того, чтобы писать сообщения — «Пользователь, пожалуйста, ничего не делай».
Простой рецепт:
input type="submit" onclick="javascript:this.disabled=true;"


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

Дабы не быть голословным, приведу пример для jQuery:

$('#id_кнопки').click(function()
 {
  $('this').attr('disabled', 'disabled')
 }
);

В идеале, кнопка должна становиться активной только после того, как форма будет полностью валидна.

Как подсказал Хабрапользователь nooze, стоит учитывать, что в случае AJAX реакции на отправку, следует учесть ошибки (например, не совпадающие логин и пароль, или таймаут запроса)

P.S> Возможно, тема уже поднималась, но упоминания на хабре не нашёл.
P.P.S> Спасибо за то что насрали в карму, вы хорошие люди :)
P.P.P.S> Я не принимаю модели хабра, в которой автор выкладывает всё и вся в топ, в таком случае просто нечего обсуждать.

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


Для многих из нас ICQ является синонимом слов «общение в интернете», мы используем его по делу и для развлечения, находим с его помощью новых друзей и поддерживаем связь со старыми. За годы использования этой программы накопились сотни контактов в списке и длиннющая история переписки. В общем, все вроде бы устраивает, и идея перейти на что-то новое сразу наталкивается на логичный вопрос: «А зачем? Мне и так неплохо».

Итак, Jabber — это не очередной ICQ-клиент. Это система онлайн-общения нового поколения.
Она пришла на смену устаревшим месенджерам, место которых уже давно на интернет-свалке.

А есть ли какие-нибудь общеизвестные доводы по поводу: существительные или глаголы использовать в интерфейсе — в меню и на кнопках? Мне вот что сейчас пришло в голову.

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

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

Но что делать со смешанными меню?

Продукты | Загрузить | Купить | Новости | Дилеры | О компании
Форумы | Поиск | Помощь | Войти | Зарегистрироваться

Имеют ли они право на сосуществование? У меня пок нет однозначного ответа — вроде и не особо кошерно что смешаны сущ. и гл., но и прямого вреда не вижу. А призыв «купить» даже, наверное, полезен с точки зрения психологии продаж, привносит действие (глагол) в мир статичных и скучных вещей.

Ёр мысли ар велкам! Апдейты в комментах

Юзабилити и практичность, а не визуальный дизайн, определяют успех или провал любого веб-сайта. Так как именно пользователь — единственный, кто кликает мышкой и, таким образом, принимает все решения, то одним из стандартных подходов для создания успешных и прибыльных веб-дизайнов стал «дизайн, ориентированный на пользователя» (user-centric design). В конце концов, если пользователь не умеет пользоваться той или иной функцией, ею можно легко пренебречь.

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

Итак, для всех тех, кто хотел mp3-плеер на свой сайт, абсолютно бесплатно для вас мы сделали вот такой:


Да, да, абсолютно бесплатно.

Пользуйтесь на здоровье!

Ryan Singer, дизайнер небезызвестной 37 Signals на конференции Future of Web Design дал 10 советов по дизайну форм регистрации. Надо сказать, что советы эти вполне естественны и настолько очевидны, что возникает вопрос — «а зачем вообще это проговораивать? это же и так понятно!». Но — как только начинаешь проходить регистрацию в каком-нибудь новом стартапе понимаешь, что очевидность эта видна не всем.

Хабра администрации,
от писаки смиренного

Уважаемая редакция,

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

Однако дело в том, что не далече, чем часа полтора назад, я наткнулся на «Избранное» одного из хабратоварищей и обнаружил там один из своих комментариев. Конечно, комментарий — не Бог весть что, но ведь мой! И вот уже полтора часа как меня мучает один назойливо-высокомерный вопрос «А кто ещё добавил меня в избранное?»

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

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

Всегда ваш, Лайк Груф

Примечание: ниже расположен перевод статьи «jQuery for JavaScript programmers», в которой автор высказывает свое мнение об этой библиотеке, ориентируясь, в первую очередь, на продвинутых программистов, и приводит несколько десятков примеров ее использования.

Когда jQuery увидела свет в январе 2006, я подумал: «очередная красивая игрушка». Выбор CSS-селекторов в качестве базиса было, конечно, изящной идеей (подробнее о ней в моей заметке getElementsBySelector), но использование цепочек преобразований выглядело немного замысловато, и сама библиотека, по-видимому, не покрывала всех возможных случаев. Я расценивал тогда jQuery только как временное и проходящее решение.

Только несколько месяцев спустя понял я, насколько же ошибался по отношению к ней. jQuery является просто произведением инженерного искусства. Она умело покрывает достаточно широкой диапазон повседневных функций и предоставляет при этом удобный API для расширений, с помощью которых можно добавить любую другую функциональность. Абстрактность в ней заложена на уровне ядра — речь идет о выборе DOM-элементов — и она извлекает из него максимум пользы. И что важнее всего, использование этой библиотеки подразумевает следование хорошему стилю в программировании и хорошо сочетается с другими частями JavaScript-кода.

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

Preamble

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

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

Автор: Лахлан Хант, http://lachy.id.au
Оригинал: http://www.alistapart.com/articles/previewofhtml5
Перевод: Александр Мусаев, http://paradigm.ru

Введение

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

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

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

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

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

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

UPD: Да, мне было бы безумно интересно услышать ваше мнение!

UPD 2: Подобную тему, как оказалось, поднимал добрый хабрачеловек Xrazont. Говорю ему спасибо за похожие мысли и кидаю кармы :)

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

Данное рассуждение явилось разросшимся комментом на публикацию dezmasterdezmaster, опубликовавшему сегодня статью под заголовком "Ссылки при наведении курсора: нужна ли реакция?". Честно говоря, меня давно мучают схожие вопросы (= И вот, наконец, удалось немного понаводить порядок в своей голове.

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

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

Приветствую, уважаемые хабралюди.

На ночь глядя у меня возник некоторый жаркий спор сtheonlyboy, по поводу того, стоит ли при наведении на ссылку — как-то это ссылку изменять: убирать\добавлять подчеркивание ссылки, изменять цвет?




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

Теоретики! Выскажетесь!

1. Как, на ваш вгляд, правильно жить с этими словами?
2. Не приведете примеры, где эти два понятия тесно пересекаются? (сотрудничают, конфликтуют)

p.s.
Нашел по этой проблематике очень простую и доходчивую статью (in English).
Здесь Usability сравнивается с современным автобаном: много полос, прямая трасса, отсутсвие перекрестков и светофоров, абсолютно прозрачная навигация по информационным табло, и одновременно скучнейшее, навевающее сон перемещение.
User experience же — это горная дорога-серпантин: с крутыми, неудобными для вождения поворотами, с реальной опасностью сорваться со скалы, но — в то же самое время, проходящая по очень живописным местам, со свежим горным воздухом за бортом, дорога, оставляющая ощущение интересного приключения.

Пример c Google

Связь всех подпроектов Google (gmail, calendar, alert, history) друг с другом никак нельзя назвать юзабильным. Многие пользователи gmail до сих пор не знают о существовании прочих приятнейших сервисов.
Но, вместе с тем, сам момент обнаружения этих сервисов, которые как бы и не скрыты, но и в глаза не бросаются, для каждого пользователя оказывается личным переживаемым опытом, своего рода откровением (=
Заставляет привязываться к этим сервисам гораздо сильнее, нежели если бы пользователь увидел все проекты в хорошем доступном оформлении и получил бы их как банальную рекламу.

Недавно в офисе Хабра я хотел прочитать своим коллегам небольшой доклад об объектной ориентации и наследовании классов в JavaScript.

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

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

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

Весь текст подеён на 5 разделов:

1. ООП в Java Script (1/5): Объекты
2. ООП в Java Script (2/5): Классы
3. ООП в Java Script (3/5): Свойства и методы класса
4. ООП в Java Script (4/5): Наследование классов
5. ООП в Java Script (5/5): Полезные ссылки

Коллеги!
Сообщество RusCHI проводит открытую юзабилити конференцию, посвященную Всемирному Дню Юзабилити www.wud2007.ru.
Конференция пройдет в Москве 8 ноября в здании 1С.

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

На конференции выступят около 20 специалистов по юзабилити, заказчики юзабилити-услуг, представители студенческого юзабилити сообщества ЭргоПро.
Познакомиться со списком докладов и зарегистрироваться вы можете на www.wud2007.ru.

Отчеты о прошлогодних событиях, связанных с днем юзабилити:
Отчет №1
Отчет №2 (событие также проходило в офисе компании «1С»)

Ждем вас на конференции!

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

Свершилось! Около двух недель назад обновился сайт mmm-tasty.ru. Многие этого очень ждали и теперь вкушают плоды своего терпения. Для тех, кто не знает, «Ммм… тейсти» — сервис для создания тлогов. Тлоги — это нечто среднее между микроблогами (например: tumblr.com) и закладками (например: del.icio.us).

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


просто пост, ссылка, цитата, картинка, видео, разговор

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

Обычно обладатели OpenID действуют в следующих условиях:

1. У них есть свой OpenID — это по сути некий персональный URL (например http://username.livejournal.com или http://username.moikrug.ru, или какая-то другая страница).
2. Они залогиниваются на сайтах, поддерживающих OpenID, указав заветный URL (см. выше)
3. Залогинившись, люди могут совершать некие действия на сайте (чаще всего оставлять комментарии и т.п.), причём система, не зная их имени, будет именовать их в соответствии с OpenID.

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

Уже сейчас можно всё опробовать, указав в качестве OpenID страницу вашего профиля в «Моём Круге» — она содержит hCard.

Рекомендую ознакомиться с полным авторским описанием всего вышеизложенного.

Когда-нибудь каждый JavaScript-программист осознаёт, что JS — объектно-ориентированный язык. И здесь его подстерегают некоторые опасности, происходящие от непонимания того факта, что JS — язык не классов (как Паскаль или Цэ-два-креста), а прототипов.
Так, уже многое написано о проблеме наследования (котого в JS нет). Я же постараюсь рассказать о менее освещённом, но едва ли не более важном подводном камне: грамотной реализации методов.
Программисты пытаются объявлять классы в привычной для них форме, из-за чего возникают утечки памяти и прочие неприятные вещи. На самом деле нужно всего лишь научиться использовать прототипы.
Эта статья предназначена прежде всего для начинающих JS-программистов.