Как располагать элементы голосования?

Виктор Никитин
11 августа 2010

Добрый день, советчики.

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

В какой последовательности правильнее и логичнее располагать элементы голосования? Плюс слева или справа? Рейтинг сбоку или посередине?
Как правильнее показывать состояния до голосования и после него?

Илья Бирман

Плюс слева от минуса располагается на пульте от телевизора в израильской гостинице:

Плюс справа от минуса располагается на пульте от телевизора в израильской гостинице

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

Мне больше всего нравится голосовалка на сайте «Стек-оверфлоу»:

Как располагать элементы голосования?

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

Твитнуть

Отправить

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

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

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

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

Вася Пупкин
11 августа 2010

Вариант с Ютюб-голосованием мне нравится больше. Порой +42 значит не (+45, -3), а (+106, -64). Обычные рейтинги не показывают такой всплеск интереса. Стоит показывать обе шкалы плюсов и минусов:

Анатолий Rr Буров
11 августа 2010

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

Контексты и надписи, упомянутые Артёмом Т., решают проблему. Если мнение автора комментария не совпадает с мнением пользователя, нажать на «Бесполезный комментарий», в то время как он действительно ценен, сложнее, чем на простой минус.

Олег Данилов
11 августа 2010

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

Руслан Худяков
12 августа 2010

Что отражает рейтинг того или иного материала, статьи, клипа? Это ни что иное, как уровень «интерестности» для аудитории.

Самое «резонансное» будет иметь значение: Просмотры + Комментарии = Рейтинг

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

Никита Торцов
13 августа 2010

Илья, вы пишете: «Для тех, кто пишет слева направо, естественно видеть плюс справа.» А вот не скажите! :-) Конечно, на пульте плюс справа видеть естественно. Однако на экране компьютера аналогичное представление выглядит по меньшей мере странно. Пользователи давно привыкли к следующему порядку: ОК — Отмена или Да — Нет. Поэтому, на мой взгляд, в большинстве электронных форм плюс лучше располагать слева, минус справа (вариант А для первого вопроса).

По той же причине в программном обеспечении для торговли на фондовых и валютных рынках многих брокеров смущает расположение кнопок Sell («Продать», почему-то всегда слева) и Buy («Купить», всегда справа).

Цитата в тему:
«…почти невозможно полностью избежать неосознанных предпосылок. Я помню одно место из книги Ламба Higher Mechanics: «Ox и Oy как в двух измерениях, Oz вертикальна». Для меня это совершенно неверно; Oz горизонтальна (я работаю всегда, откинувшись в кресле и подняв ноги). Как читатель изобразил бы замкнутую кривую (например, окружность), лежащую целиком по одну сторону от одной из своих касательных? Существует четыре школы; я принадлежу к той, для которой кривая лежит справа от вертикальной касательной. Однажды мне пришлось описывать эту конфигурацию без чертежа: то, что я говорил, оказалось непонятным для представителей трёх остальных школ.»
Дж. Литлвуд, «Математическая смесь». М.: Наука, 1978.

Александр Дебкалюк
18 августа 2010

Я согласен с теми, кто считает, что эра «25 за 30 против» прошла и повсеместно стоит ставить только кнопку «нравится». Возможно, это обусловлено ещёи тем, что люди, которым что-то не понравилось вряд ли удосужатся нажать на «минус» или «не понравилось».

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

Семён Перепелица
27 августа 2010

Никита Торцов, пользователи Маков привыкли к обратному :-)

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

	Ваш комментарий	Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Похожие советы Формат: число₁₄ Носитель: сайт₅₃₄

4 • Как правильно разделять разряды чисел? 4 • 3 • 11 •

Какую систему именования выбрать для небольшого проекта? (Продолжение) 8 • Почему на шкале большинства термометров цифры написаны по обе стороны делений? 1 • 5 • 6 • 4 • Как правильно разделять разряды чисел? 4 • Обычно в числах разряды стараюсь отбивать половиной пробела 5 • Числа, кратные 5 или 10 кажутся больше, чем остальные 4 • 3 • 18 • Поскольку одни люди привыкли мерить время цифрами, а другие циферблатами, мне кажется разумной идея добавить в интерфейсы телефонов пиктограммы с часами 2 • 10 • 16 • 11 •

3 • 1 • Фиолетовый цвет в новом дизайне советов не уместен 1 • 1 • Куда поставить ссылку: на поля или в текст? 2 • 3 • Стоит ли использовать выворотку в вебе и полиграфии? 1 • 1 • 1 • Как расположить 30 видеороликов? 2 • 2 • 1 • 1 • 3 • 1 • Сайты для слабовидящих 2 • 1 • Как оформить портфолио маркетологу? 1 • 2 • 4 • 2 • 2 • 3 • 5 • 2 • 1 • 4 • 1 • 3 • Как правильно в мобильных приложениях ставить ссылки? 1 • 1 • 3 • 1 • 2 • 4 • 2 • 4 • 1 • 3 • 1 • 2 • 3 • 3 • 2 • 3 • 3 • 1 • 2 • 5 • 1 • 1 • 3 • 2 • 1 • 1 • 5 • 2 • 2 • Сдала курсач в Школе редакторов 5 • 8 • 1 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • 4 • 3 • 5 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • Как сделать, чтобы человек не ушёл с сайта, докрутив страницу до конца? 1 • 3 • 4 • 4 • 2 • 2 • 2 • 3 • 9 • Интернет-магазин принудительно отправляет пользователя в корзину с формой оформления товара 7 • Расскажите об ушках, цитатах и фактоидах 1 • Как верстать текстовые блоки с иллюстрациями? 2 • 7 • Что нужно знать о подписях в вёрстке? 2 • Как работают элементы управления в вёрстке 3 • 8 • 9 • 12 • Зачем нужны страницы «О компании» и «Команда». 2 • Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 • Как лучше всего решить эту задачу, если текст нужно разделить на анонс и основной текст? 2 • 1 • Я не понимаю, как должен быть устроен мир — в смысле сохранения предпочтений 2 • 4 • 1 • 4 • Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 • 10 • Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1 • Как быстро придумать простой логотип для своего сайта? 1 • 3 • Чем отличается блог с комментариями от блога с отключенными комментариями? 3 • Удачное ли решение на сайте в поле пароля указывать, что нажат капслок, как на Маке? 6 • 8 • 6 • 3 • 9 • 11 • 3 • Как поступить правильно по отношению к читателю и поисковикам? 7 • Карусели и слайдеры 10 • 5 • 3 • 2 • 4 • Как вы храните данные для многоязычных сайтов? 3 • 4 • Что делать, если он совершил какие-то действия, а после этого заходит в свой профиль, где уже есть сохранённые данные? 5 • 5 • 2 • 3 • Как правильно сделать подчёркивание многострочного текста, чтобы линия была в три пикселя? 1 • 5 • 4 • Каким способом можно сделать загрузку кастомных шрифтов приятной? 6 • Артём, объясните, пожалуйста, в чём преимущество div перед table 5 • 5 • 5 • 8 • Как размыть объект? 2 • Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива? 4 • Как правильно разделять разряды чисел? 4 • 6 • Артём, как вы подключаете стили для ИЕ? 3 • 7 • 2 • 7 • Стоит ли наращивать вложенность тегов для структурированности кода? 6 • Хочу сделать смену языка на сайте без перезагрузки страницы (и без аякса) 5 • Как на сайте бюро реализована разрядка у прописных букв? 5 • 14 • 4 • Хотим переделать свой и-магазин пиротехники 3 • Действительно ли необходимо цитаты внутри предложения заключать в тег q? 2 • Год назад запустил личный проект «Либретто опер» 2 • Расскажите, пожалуйста, о типах индикаторов загрузки 13 • 1 • Чем обосновано дублирование основного меню в «подвале»? 4 • Необходимо разработать интернет-магазин китайского чая 2 • Хочется, чтобы много красивых картинок на сайте быстро загружались 14 • 5 • В каких единицах стоит задавать размеры шрифта? 8 • 1 • Используете ли вы готовые ЦМС? 3 • 1 • 3 • Как правильно делать подчёркивание ссылок другим цветом? 6 • 1 • 5 • Как в ЦСС работать с родителями? 3 • 2 • Веб-студия рисует дизайн сайта и для выпадающего меню упорно делает пунктирную ссылку 4 • Как вы относитесь к «отложенным товарам» в интернет-магазинах? 3 • 1 • Как верстать ссылки вида http://site.ru/#news, чтобы при нажатии на них сайт не загружался заново? 2 • 16 • Как вы обходитесь без проверки на робота? 8 • 4 • 9 • 2 • 4 • Проблема в том, что ширина таблиц зависит от контента 5 • 2 • 5 • 3 • Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 • 1 • Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 • 2 • 1 • 3 • 5 • Какой делать фавыконку сайта: просто 16×16 или содержащую в себе разные размеры? 10 • 3 • 4 • 2 • 3 • 3 • 7 • 1 • Есть ли какие-то простые, самые базовые принципы по подбору цветовых схем для сайта? 3 • 6 • Без продвижения в поисковиках мы завтра же закроемся 2 • 3 • 1 • 7 • 2 • Дизайнер старательно вырисовывает в макете кнопку, похожую на его любимую в его ОС 4 • 3 • 1 • 4 • 5 • Есть форма, и есть поле ввода, куда пользователь вводит контактный телефон 3 • 2 • 4 • Сейчас хотя бы уж Джаваскрипт работает у всех? 7 • Как писать цены по-английски? 1 • 4 • 5 • 3 • 6 • 2 • 4 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 5 • 2 • Раз уж интерфейс — зло, нужна ли вообще интернет-магазину корзина? 7 • 5 • 4 • 5 • 10 • 6 • 4 • 1 • Собираем и наполняем сайт одному дилеру известной автомобильной марки по гайдлайнам представительства 1 • 1 • 5 • 3 • 2 • 5 • 6 • Хозяин конторы принимает все решения относительно любого дизайна и вообще 3 • 3 • У меня с коллегой возник спор относительно того, какой элемент интерфейса нужно использовать для разлогинивания пользователя в интернете 7 • 6 • Какой должна быть вёрстка сайта — резиновой или фиксированной? 4 • 5 • 7 • 5 • Поскольку мне никто ничего не написал, пообщаюсь сам с собой 5 • 3 • 1 • Подскажите, пожалуйста, как правильно называть header и footer на сайтах по-русски? 1 • 3 • Я вот заметил, что на некоторых сайтах стали использовать статические баннеры 4 • 6 • 4 • 5 • Как вы относитесь к ссылке «наверх»? 12 • 3 • 4 • 5 • Если пользователь при авторизации на сайте трижды неправильно ввёл пароль, то на его электронную почту автоматически высылается письмо с ссылкой на восстановление 5 • 5 • Скажите, как отучить дизайнера лезть в код? 4 • 10 • Имеет ли смысл ставить кнопку «купить» в списке продуктов в интернет-магазинах? 22 • 3 • Зачем формы авторизации часто делают во всплывающих лайтбоксах 2 • Клиент хочет на сайте цветок. Железно 4 • 6 • Когда пользователь нажимает «Скачать файл», у него не открывается новое окно или же вкладка. Значит, ссылку на скачивание тоже надо подчёркивать пунктиром? 3 • 1 • 3 • 5 • 4 • Артём, пытаюсь не допустить настойчивого предложения сделать выключку текста по ширине в вебе 10 • 11 • 8 • 5 • Заметил, что в Советах вы часто используете капитель 3 • 7 • В каком лице формулировать ссылки и баблы на сайте? 5 • При запросе восстановления пароля сайты высылают подтверждение, при нажатии на ссылку генерируется новый пароль и высылается второе письмо 7 • Стоит ли обозначать ссылки, которые что либо меняют простым наведением курсора, волнистой линией? 5 • 3 • 4 • 4 • 17 • 14 • 6 • Что вы думаете по поводу наличия пункта «главная страница» в основном меню сайта? 9 • 4 • 1 • 5 • 2 • 6 • Почему у вас на сайтах везде используется английский перевод в урл, а в блоге — транслит? 6 • 5 • 5 • 8 • 2 • 5 • 1 • 4 • 4 • 7 • 10 • 7 • 6 • 1 • 2 • 6 • 3 • 5 • 5 • 6 • Почему бы не отвести часть правой стороны экрана под корзину? 13 • 5 • 8 • 3 • Как вы относитесь к новому формату форумов — вопросных систем? 3 • Артём, стоит ли учитывать различие регистров букв в адресах страниц? 11 • 2 • 2 • 7 • 8 • 4 • 13 • 12 • 6 • 5 • 2 • 19 • 4 • 2 • 7 • 4 • 3 • 7 • У меня есть сайт о Джумле 4 • 13 • 1 • 23 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • 5 • 10 • 9 • 4 • 2 • 2 • 1 • 7 • 4 • 7 • 3 • 5 • 9 • 2 • Что скажете о работе «Информационных архитекторов»? 1 • 6 • 5 • 3 • 2 • Хотелось бы услышать советы по минималистическому дизайну и по дизайну интернет-магазинов 5 • Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны»? 8 • 12 • Подскажите, при создании сайта что раньше должно быть — дизайн или программирование? 9 • 3 • 13 • 6 • 2 • Как вы относитесь к иконке RSS? 8 • 1 • 4 • 3 • 2 • 3 • 5 • 8 • 1 • 9 • 8 • 8 • 6 • 4 • 11 • Для чего нужна висячая пунктуация в вебе? 6 • 4 • 7 • 3 • 11 • 6 • 1 • Шесть тезисов об идеальной электронной книге 12 • 1 • 22 • 6 • 2 • 23 • 9 • 12 • 15 • 3 • 4 • Довольно часто веб-страница должна содержать заведомо большое количество информации 2 • 1 • 9 • 6 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 • 1 • 5 • 12 • 2 • 1 • 7 • 8 • 10 • 5 • Что вы думаете о нотации Гарретта? 10 • Делаем открытый сервис «Сколько стоит хороший сайт?» 7 • 10 • 12 • 3 • 6 • 9 • 29 • 7 • 7 • 9 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 9 • 12 • 10 • 7 • 12 • 13 • 7 • 16 • 8 • Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись? 7 • 8 • 11 • Какое, по вашему мнению, самое лучшее решение для страницы faq? 7 • 8 • 22 • 7 • 4 • 8 • 6 • 8 • 3 • 9 • 4 • 4 • 10 • Есть ли смысл оформлять подчеркиванием все ссылки вне основного текста? 16 • 20 • Сет Годин только что опубликовал ссылку на результаты исследования движения глаз во время просмотра информации 5 • 7 • 6 • 15 • 1 • 3 • Что вы думаете насчет Google Chart API? 6 • 4 • 6 • 3 • 3 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 10 • 3 • 11 • 14 • 10 • 11 • 6 • 8 • 7 • 15 • 11 • 11 • 4 • 8 • 11 • 1 • 2 • Что изображать на инфоскроллере, чтобы он был действительно информативным? 7 • 2 • 8 • 15 • 7 • 4 • 4 • 9 • 5 • 4 • 11 • 1 • 7 • 3 • 15 • 12 • 9 • 4 • 12 • 17 • Все почтовые программы делятся на два класса: а-ля веб и а-ля десктоп-приложение 6 • 4 • 12 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 15 • Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8 • 11 • 3 • 2 • 23 • 11 •

Недавно всплыло

Какие законы для текста, который будет восприниматься только на слух? 1 • Какой движок выбрать для сайта рекламного агентства? 2 • Правдивость 4 • Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 •

Комментарии

Ваш комментарий

Недавно всплыло