Pull to refresh

Comments 154

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

Мне было бы удобнее так:
[Кнопка «Добавить»] Ссылка «Предпросмотр»
То есть предпросмотр делать в виде отдельной страницы, а не подгружать через AJAX или голый JS?
Нет, я имел в виду визуальное отделение
главное / не главное
кнопка / ссылка
Я-то как раз и имел в виду, что "Предпросмотр" главнее. Он поэтому и стоит первым, как кнопка по умолчанию. Хотя если есть визуальный редактор — это не так важно.
несколько раз на хабре писал каммент, нажимал кнопку предпросмотра и закрывал страницу, думая, что добавил каммент )))
Здесь есть два вариант, выдавать диалоговое окно "Ув. пользователь, вы правда хотите закрыть хабр, ведь комментарий вы так и не отправили..."

Либо делать систему автоматических черновиков, аля Гугл.
Имхо проще иметь возможность удалить каммент, если вдруг написал глупость. Как в жж.
+1024. Непонятно, почему хабрасоздатели не сделали возможность удалять свои комменты (если конечно ещё нет дочерних комментов)
Удаление комментариев и в ЖЖ появилось не так давно...
Ммм, насколько не так давно? Я в жж с начала 2005го — там она уже была.
Не так давно появилась возможность редактировать комменты.
А удалять давно уже можно.
Хотя бы, что б возможность удалить была в первые пять минут
Я имею в виду решение проблемы с забыванием отправить комментарий:

> несколько раз на хабре писал каммент, нажимал
> кнопку предпросмотра и закрывал страницу,
> думая, что добавил каммент )))
Я бы сделал «Предпросмотр» не ссылкой, а нажимабельным текстом с border-bottom-style: dotted.
Я вот вообще думаю, а нужен ли предпросмотр, если используется WYSIWYG-редактор...
Действительно! Когда писал комментарий уже забыл, что это WYSIWYG :)
Я когда пост писал, тоже об этой возможности не подумал, надо будет еще поразмышлять, когда время будет :)
насколько я понимаю, слово "Предпросмотр" еще и отсутствует в русском языке и является калькой английского "Preview"
поле email можно отображать только если стоит галочка "оповещение о новых комментариях..."
Наверное лучше сделать наоборот, если пользователь заполнил поле E-mail, то галочка становиться активной. Ведь E-mail оставляется и для связи с администрацией сайта, сужу в том числе и по своему опыту.
Email надо получать в любом случае, ведь он используется не только для подписки, но и для идентификации пользователя, например, для сервиса Gravatar.
Мм... тяжеловато :) Но последняя органично смотрится )
:)

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

RSS можно и не дублировать словами, значок говорит сам за себя.

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

Ссылки — обязательно. Картинки — зависит от сайта. На некоторых сайтах даже графические смайлики допустимы. Если на сайте принято писать развернутые комментарии, то цитирование необходимо. Выравнивание текста нафиг не нужно. Отмена/повтор — тоже.
Из кнопочек, я бы еще отметил ктопки для тире, многоточия и прочего, если движок не умеет делать это автоматом.
Тоже хотел написать, но поставил два дефиса подряд и получил тире в предпросмотре. Это очень удобно. Я за ненавязчивую автоматическую типографику.
По поводу два тире - это уже свой язык фактически, анонимный посетитель может его не знать.
Во всеми обожаемом ворде оно именно так — поэтому скорее всего знает :)
Ворд по-моему такие тире сам форматирует автоматом.

ЗЫ Ворд не всеми обожаем, мне вчера пришлось в нем набрать три простеньких документа — он умудрился повиснуть, хотя я работал за ним 30 минут всего. А вообще повседневно пользуюсь OpenOffice, чего и всем желаю. :)
Ну так и вы форматируйте по мере ввода :)

P.S. Сам юзаю OpenOffice, ибо запускать Word через wine считаю извращением :) Но большинство интернет-юзеров все еще крепко сидит на MSOffice.
Кстати, спасибо. Я не знал, что на хабре, так можно ставить тире :)
По поводу визуального редактора для комментариев не соглашусь - мне сильно этого не хватает на хабре.
давно ждем. думаю, Хабр 2.0 нас порадует.
Я тоже жду, а то вместо написания постов, приходиться фактически версткой заниматься.
Главное, есть о чем писать и голова в комплекте
Пишите дальше так же хорошо , а мы плюсанем :)
Вот это вот смотрели?
https://addons.mozilla.org/ru/firefox/addon/1449

Генерит грязновато, конечно, но всё же лучше, чем ничего
Даже одно время использовал :)
Очень удобно, когда поле ввода растягивается при необходимости. То есть, всегда на строчку больше, чем текст, который в нем. А изначально оно не очень большое, но всё же настраивает на написание развернутого комментария. Например, три-пять строчек. Эта возможность хорошо реализована в формах ExtJS. Правда, сама библиотека тяжеловата для таких целей.
Я про это упомянул в ToDo. Здесь два варианта: либо авторастягивание, либо возможность изменять размер вручную. Качественную реализацию первого варианта, я не видел ни на одном сайте. :)
1. Не стоит копировать микрософтовские решения. Они отнюдь не идеальны. Панель инструментов полезна, если комментатору (в жизни) никогда не хватало обычных знаков препинания, чтобы выразить свою мысль. Вообще, эта панель для тех, кто не способен выразить свои мысли через текст.

2. Было плохо, стало хуже. Но пусть останется так, как было. Иногда нужно перед комментированием задуматься, а стоит ли вступать в переписку с этим глупцом? И здесь поле емейл как нельзя кстати подходит для этой задачи!

3. Ну зачем вам понадобился счетчик символов? Кр. - с. т.? ;-)

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

5. P.S. "Сотни заполненных форм" - а работаете вы когда? ;-)

6. P.P.S. Ни одна форма не заменит живого общения ;-)
Спасибо за подробный комментарий.

1. Tiny MCE - это не решение Майкрософт, да и иконки не они придумали.
1.5. Панель инструментов была бы в частности полезна вам (и мне) для вашего комментария, ведь вы фактически сделали список, а с точки зрения HTML и веб-стандартов вы сделали это неправильно. По поводу вставки ссылок и картинок я даже не говорю. :)

2. Тонкое психологическое наблюдение, не могу на него конструктивно ответить.

3. Количество символов в комментариях обычно ограничивается в целях борьбы со спаммерами.

4. Не понял, то что вы написали.

5. Только к этой теме уже с десяток комментариев.

6. Оффтопик.
4. Я думаю: "Краткость - сестра таланта" =)
>4. Не понял, то что вы написали.
когда ставишь галку - "оповещение на email", тогда появляется поле для ввода мыла.
Да, я это видимо вынесу в пост...
уберите это из поста, читайте мой комментарий ниже, Вам неправильно перевели :)
наоборот, когда заполняешь поле емейл, ставится галочка.
отлично вы придумали - использовать TinyMCE для комментов. предлагаю сразу theme:'advanced'. и будем как на одноклассниках ждать, пока загрузится форма для отправки сообщения/комента.
Новая версия TinyMCE работает довольно шустро :)
ага :-) 40 запросов на 300 кб за 15 секунд — впечатляет!
сделайте пару своих кнопок вручную и мы все спасибо скажем.
2. Для того, чтобы "перед комментированием задуматься, а стоит ли вступать в переписку с этим глупцом", есть, кстати, кнопка "Просмотреть".
Мне хватает обычных знаков препинания, чтобы выразить свою мысль. Но мне очень не хватает панели инструментов, когда я хочу кого-то процитировать через <blockquote> или поставить линк через <a href>.
Вы еще выделение полужирным текстом используете... ;)
Можно еще сделать так, чтобы поле для ввода e-mail отображалось только тогда, когда юзер отметил чекбокс "Оповещать меня по e-mail о новых комментариях". Скажу даже больше: наличие этого поля (e-mail) только тогда и имеет смысл. Ибо если e-mail не отображается (что правильно), то зачем его вообще вводить? Для админа? Тогда нужна и проверка e-mail на валидность.
От себя лично: мне, как владельцу сайта, совершенно безразличен e-mail комментирующего, особенно анонимного - письма ему писать я не собираюсь.
Третий комментарий уже на эту тему :) Немного выше можно посмотреть мои аргументы, хотя я согласен, что ваш вариант так же неплох.
Угу, вы правы, пропустила - выше уже обсуждали этот момент.
В любом случае, это дополнение я вынес в пост, так как оно существенное.
в том то и дело, что поле емайл необязательно для заполнения. Поэтому, если поле заполнено, тогда галочка ставится. Или напротив поля можно указать, что при введенном емайл, ответы на комментарий будут высылаться на почту. Тогда и галочка не нужна.

В данном случае емайл первостепенней галочки
Лучшее враг хорошего.
Надо было на втором шаге остановиться.
То есть не нужен визуальный редактор? Посмотрите на пятый шаг еще...
Посмотрите внимательно на эту страничку и её комментарии.
Кто-нибудь хоть раз использовал что-то богаче обычного текста?
Да. Два комментария со списками.
Кстати, для тех кто предпочитает plain text - можно сделать кнопочку (или ссылку) для отключения визуального редактора.
и для особых эстетов (типа меня) еще включать моноширинный шрифт и заключать коментарий в &lt;pre&gt; &lt;/pre&gt; ;)
Нет, визуальный редактор определенно нужен. Хотя бы примитивнейший, на уровне одних bbcode. Часто возникает необходимость процитировать собеседника или сделать смысловой акцент на определенных словах.
Да, видимо нужна обязательно кнопка "Цитировать" на панели.
UFO just landed and posted this here
Поясните ваш комментарий?
UFO just landed and posted this here
Простите, я быть может сейчас глупость скажу, но я не понимаю совершенно зачем поле "Пароль" применительно к OpenID, ведь по идеологии ввод пароля от учетной записи OpenID предусмотрен на сайте-провайдере, и нигде более. Насколько я помню... ну, в общих словах это звучит так: сайт-клиент лезет по ссылке, предоставленной в качестве OpenID url, анализирует находящуюся там информацию, после чего перенаправляет клиента на сайт-провайдер, где пользователь должен залогиниться (если еще не) и разрешить использование данной учетной записи для идентификации на сайте-клиенте.
Исходя из вышеизложенного — поле для пароля не только не обязательна, а даже не нужна.
Про OpenID я скажем так, кое-что слышал. :) Посмотрите как интегрирована система комментирования на сайте газеты "Коммерсант" с блогами LiveJournal.
Посмотрел. При всем уважении никак не могу одобрить ни посылку данных (содержащих пароль) с одного сайта на другой через нешифрованное соединение, ни сомнительные "расширения" протокола, по сути нарушающие Privacy (я про ljwho, если кто не в курсе. В свое время изрядно шума на эту тему было).
Я с вами в приципе согласен, но мы немножко в сторону от темы ушли. Но в любом случае спасибо за комментарий.
А в виде html можно это где0нибудь выложить - захотелось тоже, а верстать лень =)
Фотошоп плохо сохраняет в HTML и плохо реализует мои мысли на JavaScript :)
UFO just landed and posted this here
Проблема в том, что большинство пользователей ЖЖ не знают, что такое OpenID :)
достаточно написать «поддерживается OpenID»

А он там и не поддерживается, насколько я понял.
Очевидно — там, где написано «поддерживается OpenID и LiveJournal». Вы же сами меня туда послали. :)

Я имел в виду - идентификация lj-user'а ведется действительно через OpenID, однако на данном конкретном сайте никакие иные провайдеры вроде бы не поддерживаются. То бишь тамошний OpenID какой-то не такой OpenID.
Да. Поясню свою мысль. В ЖЖ есть казуальные пользователи, которые не знают что такое Open ID и, скажем, Jabber, хотя эти возможности есть. И таких пользователей достаточно много. Поэтому я на форме и отобразил два логотипа.
Вы правы. Однако я бы не был столь уверен, что упомянутые казуальные пользователи догадаются, что адрес их блога и есть этот самый «загадочный OpenID».
UFO just landed and posted this here
О, в ЖЖ - несомненно поддерживается, и ЖЖ умеет выступать сайтом-провайдером. А вот сайт этого самого «Коммерсантъ»-а не является клиентом OpenID - он является клиентом ЖЖ :)
По крайней мере, я это именно так расцениваю.
Про это знают не все, поверьте мне. :)
UFO just landed and posted this here
Ссылка вида «Что такое OpenID?», ведущая на страницу с небольшим списком наиболее вероятных для целевой аудитории OpenID-провайдеров, ни в коем случае лишней не будет.
UFO just landed and posted this here
Автор я, и ссылка моя. А функционал на нее другой возложен, но меня o4kapuk в принципе убедил, что с OpenID стоит по-другому работу сделать.
UFO just landed and posted this here
Нет не на все. Только на самый популярный блогохостинг.
У TinyMCE есть замечательная функция - показать/скрыть редактор (http://wiki.moxiecode.com/examples/tinymce/installation_example_07.php)
Переключение между редактором и простой формой было бы очень кстати.
Да, я знаю. Просто тем, кому надо ввести plain text просто на эту панельку не замечают.
Не сильно понимаю, зачем для маленького комментария - WYSIWYG редактор.
Также неплохо бы выделить главную кнопку (для меня это "написать") цветом, как это сделано в Blogger.
Лучше оставить поле для ввода сайта - ссылка на сайт - эще одна мотивация писать сообщения.
1) WYSIWYG-редактор никак не связан с размером комментария. Вот я, например, пишу вам три строчки буквально, их было бы неплохо оформить нормальным список (ul), а кнопочек нет :(
2) Я вообще потихоньку прихожу к мысли, что не нужна кнопка предпросмотра, если есть WYSIWYG-редактор.
3) Это мотивация для спаммеров :) Моя логика описана в статье, не у всех есть сайт (или блог), не стоит судить по аудитории хабра или айтишникам. А если сайт есть и он нужен для обсуждения темы, его адрес можно указать в теле комментария при помощи кнопки визуального редактора.
Комментарии бывают разные. Иногда весьма объёмные и с кучей ссылок. И писать такие в 3-х строчном поле весьма неудобно.
А если ответить пару слов - тогда редактор не нужен.
Согласен с вами, а насчет "растягивающейся" формы надо подумать еще.
В что мешает это сделать?
Автоматом - может конечно и не стоит, а в ручную будет в самый раз.
А я бы убрал все, кроме поля для комментария и кнопки "отправить" и галочки "получать ответы на комментарий по электронной почте" для зарегистрированных и авторизованных пользователей.
Мы анонимусов обсуждаем...
угу. им - поле для ввода текста и кнопка "послать"
Хороший подход, понравился больше предыдущего.
Ага, мне тоже понравилось. Я раньше и не задумывался, что столько существует тонкостей (правильно писать глаголы на кнопка, симметрия и т.п.), а оказывается это почти целая наука.
Интересно сколько лет автор статьи уже конструирует форму отправки комментариев, что чувствует все нюансы? ;)
Час примерно потратил (или в годах 0,000337079), после того как прочитал статью http://habrahabr.ru/blog/ui_design_and_u…

Про глаголы — это стандартное правило в GUI и в вебе: на кнопках глаголы, в меню — существительные.

Наука называется эргономика, но я ее не изучал.

Ньюансы не все чувствую, потому что еще есть что доработывать :)
не знаю насчет существительных в меню... Хотя бы посмотрите меню ФФ Файл и Правка...
Файл, Правка... и? :)
Открыть адрес, открыть файл, закрыть, закрыть, сохранить, сохранить. и тп.
Если скажете, что это не меню, а элементы меню или подменю, то...
Выражайтесь тогда конкретней с самого начала :)
не помешало бы еще русский доработать :)
Я бы не стал напрямую сравнивать, у меня немного другая цель была сформулирована.
Иногда, (хотелось бы чтобы это было всегда) комментирующие являются достаточно интересными людьми. И в этом случае хочется как-то продолжить связь или более подробно узнать мнение автора. И, если e-mail не все захотят оставлять, то адрес сайта (или блога) можно указать не боясь так сильно спаммеров.
Да, согласен с вами — я таким образом познакомился с несколькими интересными людьми.
В случае жж не работает, т.к. первым желанием юзера жж будет ввести ник, а вторым - ступор (понимание того, что ник не говорит о своей жжшности). То, что надо ввести через собаку - неочевидно ни в каком случае.
Через точку, вообще-то. Но по сути Вы правы.
Нужны примеры адресов на форме? Или тултипом подобное можно сделать?
Трудно сказать до тестирования, как сделать без сильного усложнения, но чтобы все поняли. Но - да, либо примером, либо кнопкой "в жж".
Проблема-то как раз, что сильно форма от этого разбухнет.
А нельзя ли не слишком страшно нарисовать справа от логина чекбоксы "это ник в ЖЖ" и "это OpenID-провайдер"?
Конечно, можно. Хороший вариант, по-моему
Наверное, если делать несколько сервисов, то даже компобокс сделать лучше будет.
Еще бы я обратил внимание на очень интересный способ комментирования. На сайте автора либы Ext.JS Джека Слокума комментарий дается в диалоге и можно комментировать каждый абзац поста. Довольно таки удобно, больше нигде не видел подобного.
Вот пример.
Вы ссылку дать хотели?
Ссылку дать не вышло сразу. Обрезало чего то.
http://www.jackslocum.com/blog/2006/12/17/how-to-create-a-reusable-ajax-driven-web-dialog-a-working-example/
Наверное с кармой были проблемы.

Ссылка хорошая, спасибо.
Честно говоря мега благодарен за такие топики, постоянно проблемы с формами так как дизайнеры ленятся их добавлять, а если и добавляют то какие нить шаблонные и себе дороже с ними из-за этого спорить (Бывало и по 3 дня на 1 комменты уходило времени жаль). Разобрали бы еще регистрацию\авторизацию как лучше и тд в плане юзабилити я бы был мега благодарен :)
Я, не дизайнер форм, прочитал тему интересную — написал свой вариант. Насчет регистрации: сделать нормальную форму для нее мегасложно, особенно если проект не простой блогохостинг.
Коль уж мы режем лишнее, то выравнивание в визуальном редакторе нам не нужно.
Необходимость списков, и зачеркнутого текста - тоже под большим вопросом.
Кнопочки не оптимизировал.
Повторюсь немного.. заменяйте галочку "оповещение о новых комментариях" при активации какой-нить штукой типа надписи-статуса "подписан на тему" и кнопки рядом "отменить подписку".
Иногда галку вешаешь случайно, иногда тема больше неинтересна, а искать менеджер подписок (если он есть) — далеко и неочевидно.
блин. Забыл про анонимность, прошу извинить. Но проблема кстати всё равно остаётся )

  1. В печь визивиг.

  2. В печь bbcode.

  3. Если хочется более-менее нормальной разметки, нужно использовать markdown.

  4. Разве пароль OpenID нужно вводить на сайте-клиенте? Первый раз такое вижу.

  5. Под всей формой отдельную кнопку — подписаться на комментарии, не оставляя свой. Вот это действительно классная штука.

UFO just landed and posted this here
п 3. Много ли непродвинутых пользователей знают, что такое markdown?
Нужен ли он настолько в комментариях?
1. Про OpenID и ЖЖ уже высказался выше o4kapuk.
2. Форму е-мейла необходимо показывать всегда, так как многие заполняют ее для своей индентификации, т.е. для собеседников, а не для уведомлений.
3. Основной все же должна быть кнопка "Отправить". А предпросмотр и т.д. - уже дополнения и рюшечки.
4. Визивиг так же должен появляться по желанию, так как это опция, которая используется далеко не всеми и не всегда.
5. ИМХО
Я думаю так
1) лучше ссылка на теги иил «как оформить сообщение». Много ума не надо, чтобы за один раз научиться пользоваться [url], особенно если написан пример кода и получаемого итога.
2) окрашивать текст не надо, точнее давать возможность покрасить в ограниченное количество цветов, которые нормально в сайт вольются.
3) просить e-mail в обязательном порядке только если человек пожелал подписаться. То есть выставил человек чекбокс, сразу идёт проверка, заполнен ли e-mail, а так же ставится рядом с ним звёздочка. Наличие звёздочки обязывает нас или сделать сноску или сделать над ней всплывающее сообщение. Но во втором случае надо что-то сделать, чтобы дать понять человеку: под звёздочкой что-то спрятано.
4) Если логин и пароль не введён, капча появляется. Или радиобокс рядом «Анонимно/От себя/От дроугого имени». При выборе первого и второго тушить поле для ввода пароля.

А в общем и целом нужно думать что за проект и какие права у различных групп пользователей.
Можно облегчить юзерам жизнь и избавиться от кнопки "Просмотреть" если сделать автоматический "предпросмотр" - по мере ввода юзером комментария отображать как он будет выглядеть где-нить рядышком.
Можно поле email (так как оно неопционально [в некоторых случаях]) использовать и для адреса сайта. В зависимости от того, что ввел пользователь.
опционально, конечно же...
1. "Оповещение о новых.." лучше заменить на "Оповещать о новых".
2. Без панели форматирования можно прекрасно обойтись.
3. Поскольку можно ввести до тысячи символов счетчик символов избыточен. Мало кто будет доходить до таких пределов. Если же существует опасность коллизии как себя вести если человек ввел больше тысячи символов, достаточно выводить предупреждение при достижении такой величины. Хотя вероятность такой ситуации стремится к нулю.
4. Фраза "Поддерживается openid и livejournal" ни о чем не говорит пользователю. Из нее непонятно каким образом заполнять поле Имя (логин). Можно написать фразу "У меня есть ЖЖ", при нажатии на которую будет происходить видоизменение формы, адаптированное именно под ввод жж-шного логина.
Спрашивается, нахрена добавляли RSS, если в итоге убрали?

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


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

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

2. Главная Кнопка должна иметь подпись в форме глагола совершенного вида. Например, «написать», «добавить» или «прокомментировать».

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

Личную неприязнь ко всяческим визуальным редакторам я оставлю при себе :-))
Ставим на первое место поле «Комментирование» — в нём сосредоточено полезное действие формы. Пока человек заполняет свою почту и имя мысль может потеряться.

Убираем редактор стиля.
Sign up to leave a comment.

Articles