мяу-дизайн – Telegram
мяу-дизайн
2.86K subscribers
1.15K photos
91 videos
37 files
263 links
т.е. «мяу»

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

С кругляшом сложнее:

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

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

(тут уже совсем надуманные пункты пошли)

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

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

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

Если же вы всё же захотели насильно менять курсор посетителям вашего сайта, и нарушение бесшовности использования системных элементов управления вас не особо беспокоит, то хотя бы убедитесь, что ваш сайт «просторный» и «айпадный». Можете для проверки целиться в интерактивные элементы, тыкая пальцем в монитор.
Комментарии к публикациям
Anonymous Poll
51%
Давай
41%
Не нужны
8%
Лучше чатик
Кажется, что здесь произошло преступление стеллаж на переоформлении и закрыт для посетителей магазина.
Оказалось, что так выделяют стеллаж со спецпредложениями и большими скидками.
Долго зависал, пытаясь понять, кнопка «Установить по умолчанию» сбрасывает данные в инпутах до дефолтного состояния или наоборот, сохраняет нынешние данные как дефолтные.
Странный выбор иконки для пункта «Оплачиваете отправку наличными»
Ползунок в Apple Music будто отвечает за баланс между громкостью звука и AirPlay. На деле справа — независимая кнопка, которую расположили слишком близко к ползунку громкости.
У Сквота в основе стиля — пиксельный шрифт, им же оформляются промоматериалы. Например, это обложка для статьи.
Когда я встретил подобную конструкцию внутри статьи, я решил, что это тоже такой модный ироничный постмодернистский плакат.
Но оказалось, что это браузерный блокировщик трекинговых скриптов запретил внедрить в статью инстаграмный пост, и вместо него на этом месте остался стандартный инстаграмный плейсхолдер, к которому случайно подцепился сквотовский css-стиль цитат крупным кеглем, потому что инстаграмный плейсхолдер оформляется тегом <blockqoute>.
Каждый раз при созвоне в зуме воспринимаю кругляш возле заголовка как радиобаттон и лезу к нему курсором.
Пытался понять, что происходит на этой картинке и при каких условиях возможна подобная тень. Пришел к выводу, что здесь ноутбук положили экраном на стол и сфотографировали сверху. Надо сказать, конструкция не очень устойчивая.
Из-за отсутствия размерностей у четырехзначных чисел в этом слайде презентации Теслы я сначала решил, что речь идет об прогрессе развития батарей с 1865 года до прогноза на 2170 год.
Еще один камень в огород встраиваемых в сайт чатов с техподдержкой