Обсудите как лучше сделать лайки-реакции в вебморде.

С обводкой лучше, только оно сильно к сообщению прижато, или ник сильно далеко от сообщения, режет

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

Согласно юзерфлоу 90% времени бургер-то никто не кликает, а вот место слева он занимает, отодвигая все сообщения вправо, при этом с правого края у сообщений не будет отступа, и это будет выглядет неконсистентно.

Поэтому дизайн гуя нужно делать дизайнеру, а не программисту.

Согласно юзерфлоу 90% времени бургер-то никто не кликает, а вот место слева он занимает, отодвигая все сообщения вправо, при этом с правого края у сообщений не будет отступа, и это будет выглядет неконсистентно.

Места слева он не занимает, т.к. в этом месте поле всё равно всегда есть. Это та колонка, в которой рисуется аватар и она точно не уже.

а вот место слева он занимает,

Да, бургер конечно не ПОД аватаркой, а ещё и её отодвигает, но даже правее аватарки всегда есть белое поле - и оно так даже во всех слаках-дискордах.

Но вот понять такого решения я не могу: http://0x0.st/ou7J.jpg когда при наводе на мессагу СПРАВА всплывает комплект действий на него. А если месага в одну строку, то пока мышь едет вправо километр она успевает три раза с месаги соскочить и потерять эту менюшку.

Я не про сдвиг аватарки, а про сдвиг всего сообщения вправо из-за бургера.

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

1. Ещё раз: нет сдвига, белое поле там было и есть у всех мессангеров. Просто туда всунуто.

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

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

Учитывая что нижнее поле для ввода сообщения тут http://0x0.st/ou5A.jpg занимает всю ширину, я подумал что предполагалось диалог, который сверху, располагать левее чтобы он был выровнем с полем ввода и поэтому предположил что бургер его именно сдвигает.

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

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

Велосипед пытаешься изобрести новый. Как mydibyje сказал, указатель может быть где угодно. Лепи бургер с обеих сторон тогда.
Подсветка сообщения под курсором и нормальная минимальная высота решают проблему, а в попытках сделать «не как у всех» ты в один угол налепил лишних элементов и теперь надо целиться (у тебя же указатель «соскакивает в узких местах»), чтобы попасть в нужный тебе элемент. Хотел ткнуть в аватарку — попал в меню, хотел в меню — попал в аватарку. Абзац.

А по сабжу ОП или обводка, или фон. Но, имхо, общий на все «реакции», а не на каждую отдельно. И оно не отменяет нормально расставленных отступов.

Как mydibyje сказал, указатель может быть где угодно.

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

ты в один угол налепил лишних элементов и теперь надо целиться

Так же, как чуваки целятся в кнопочки вот в этом: http://0x0.st/ou7J.jpg - между этими кнопочками такое же расстояние между собой, как и между моей аватаркой и бургером.

http://0x0.st/oSzf.jpg - так выглядит, когда нажато на бургер. Загораживает всё, как любая контекстная менюшка - это норма. Так же, как в слаке загораживает кусок текста всплывашка справа (даже если ты ничё не нажал). Видеть от чего это менюшка можно легко по подсвеченному фону всей месаги, собственно как и в слаке.

Не скажу про слаку, недавно ей не пользуюсь, могу сказать например про дискорд, там никнейм как минимум не загораживается https://0x0.st/oS-d.jpg

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

Это неверно.

Это неверно. Поставил лайк и увёл курсор, чтобы он не мешал текст читать; выделяется сообщение для копипаста тройным кликом по нему; на ссылку нажал и ушёл в интерфейс того, куда ссылка ведёт. На аватарки нажимать регулярно вообще необходимости нет.

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

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

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

Курсор «где угодно» - при равномерном распределении элементов по экрану, а они слева, так что вероятность его наличия справа - ниже, чем слева. Профит.

Редкие кейсы про дверь не интересны, интересно 99%.

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

Мне без обводки больше нравится.

Нет, всё слева: http://0x0.st/oSB_.jpg

Чё там в самом приложении браузер - не знаю, нажимаю только кнопку «назад» и «обновить» иногда, они тоже слева. Гугле Хроме.

Чё там в самом приложении браузер - не знаю

Типичный современный веб-девелухпер.

Ну, пусть будет по-твоему. Всё-равно твоим велосипедом вряд ли много кто пользоваться будет.

Типичный современный веб-девелухпер.

на: http://0x0.st/oSYG.jpg

Снова всё слева, упс. Или надо зачем-то часто нажимать на тот самолётик и звёздочку справа? Вроде только три эти кнопки слева нужны.

Закладки, загрузки, история, вкладки с {телефона,компьютера}… ну т.е. всё, что быстрее мышкой нажать, а не открывать шоткатом сайдбар и потом закрывать этот сайдбар — всё находится справа.
Зачем ты в качестве аргументов приводишь кнопки, которые в большинстве случаев «нажимаются» шоткатом, а не мышкой — этого я не знаю. Хотя постой, знаю:

Типичный современный веб-девелухпер.

Ещё и ссылки ставить не умеет. Иди, говорит, читатель, по URL с абракадаброй догадывайся, что там я тебе принёс.

Закладки, загрузки, история, вкладки с {телефона,компьютера}… ну т.е. всё, что быстрее мышкой нажать, а не открывать шоткатом сайдбар и потом закрывать этот сайдбар — всё находится справа. Зачем ты в качестве аргументов приводишь кнопки, которые в большинстве случаев «нажимаются» шоткатом, а не мышкой — этого я не знаю. Хотя постой, знаю:

У меня ничё этого нет, сорян. Да и тем более хоткеи - F5, backspace. Всё. Считай, нет кнопок в браузере.

Ну и мы не про браузер, а про приложеньку, которая работает в нём.

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

Более того, вопрос «где разместить кнопку вызова меню» в данном контексте есть иллюстрация глупости разработчика: если сообщение по ширине расползается на 3000px, его неудобно читать. А если сообщение отрубается до тех же 120-140 символов на строку - вообще фиолетово с какой стороны от него будет кнопка.

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

Могу. Слева.

Типичный современный веб-девелухпер.

Слив защщитан.

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

А что тебе объяснять это пытаться смысла нет, говорит то, что ты упорно игнорируешь мысль про «если элемент адекватной ширины, то фиолетово, слева или справа будут кнопки».

Поэтому и говорю:

Типичный современный веб-девелухпер.

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

Вариант с обводкой мне нравится больше, так как субъективно понятнее, что это не часть сообщения

Ты уже это пейсал, тебе уже на это отвечалось.

что это не часть сообщения

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

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

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

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

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

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

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

Если два человека наврали, а я один и говорю правду

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

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

Ну нет, я описываю не что-то «своё», а логику голую.

Представьте, что вы минут 5 работаете в программе, нажимаете там разные кнопки, которые ВСЕ находятся слева, а справа только «закрыть». Было бы странно утвержать, что ваш курсор/внимание будет иметь шансы потянуться зачем-то вправо.

Ну а как так получается, что я (получается, что специально не готовясь) глянул где мой курсор, как только дочитал ваш комментарий, и курсор был чуть правее центра экрана? Я предполагаю, что часто люди пишут короткие сообщения чем длинные, и чтобы курсор не заслонял буквы, я его убираю правее, это звучит логично?

Ну а как так получается, что я (получается, что специально не готовясь) глянул где мой курсор, как только дочитал ваш комментарий, и курсор был чуть правее центра экрана? Я предполагаю, что часто люди пишут короткие сообщения чем длинные, и чтобы курсор не заслонял буквы, я его убираю правее, это звучит логично?

Хорошо, тогда объясните тот факт, что лайки в слаках и других мессенджерах рисуются СЛЕВА. Раз курсор чаще справа, то мне удобнее было бы нажать на лайк, если бы он был справа внизу. Неконсистентненько выходит.

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

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

И чё, почему эти готовые ответы-то по правому краю не выровнять? У тя ж там курсор - будет удобнее нажимать.

Ну я могу их для себя сам выровнять usercss'ом, если будет надо. А зачем их располагать справа если семантически это ответы на сообщения, а ответы я как ltr-юзер читаю слева-направо а не справа-налево?

Так у лайков и нет ltr-семантики, они в какую угодно сторону значат одно и то же. А нажимать надо. И курсор как раз справа.

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

Не для прочтения, они не буквы. И ltr-семантики у них нет.

Да это не буквы, точнее это знаки (считай слова), лайки, эмодзи. ♥, :smile:, вот это вот всё.

И читать ты их можешь хоть в какую сторону.

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

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

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

Поэтому дизайн гуя нужно делать дизайнеру, а не программисту.

А потом получается макет на одно разрешение

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

Короче слив защитан, ибо пошли уже откровенные крайние случаи.