Форум 'Пользовательский интерфейс: проектирование, usability' на RSDN

Очереди событий от устройств ввода в ОС

Fri, 09 Jan 2026 09:57:29 GMT

Издавна повелось, что события, поступающие от устройств ввода (клавиатура, мышь, сенсорный экран и т.п.) складываются в очередь, и обрабатываются "по мере возможности". Но, если для клавиатуры это еще имеет какой-то смысл (нажимаемые подряд символьные клавиши, клавиши последовательной навигации и т.п.), то какой смысл это может иметь для мыши и тачпада — по крайней мере, по истечении 0.1-0.2 с?

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

Еще круче, когда тормозит даже не сайт, а сам браузер. Хочу закрыть вкладку, жму на крестик — нет реакции. Чуть двигаю палец/курсор, жму снова — вкладка закрывается, на ее место встает соседняя, которая тут же снова закрывается по очередному тапу/клику, который ждал в очереди.

И эта хрень везде — в Windows, в Android, в iOS. MacOS под рукой нет, но вряд ли там иначе.

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

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

как вообще пишут компоненты уровня DevExpress?

Tue, 22 Apr 2025 11:49:42 GMT

Для web естественно. Кто ни будь здесь занимается подобным сабжом, можете что ни будь рассказать про это?

Реализаций, алгоритмов virtual scroll без просчёта высоты накидайте

Sun, 13 Apr 2025 22:18:09 GMT

Нельзя callback getHeight(index)

Давняя боль. Моя реализация на ангулар ~~почти всегда~~ чаще работает, чем не работает, слегка подёргивается. Angular Material реализация вообще полное гуано при выделенном требовании. Просчитывать каждую строку высоту заранее- наивный тупой путь, убивает смысл виртуальности.

Добавилось требование при скролле до конца, подгружать / добавлять в конец элементы. Когда это большая пачка в 100 элементов- ок. Когда это 1-2 элемента в конец- стало сходить с ума при корректировке ошибки смещения.

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

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

На какой разговорный язык переводить графический интерфейс программы

Sun, 09 Mar 2025 01:24:25 GMT

Введение

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

Итак, на что же ориентируются другие?

Точка зрения общечеловека

Распространённость носителей языка.
1. В мире.
2. В интернете.
3. Платежеспособных.

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

Точка зрения программиста

Возьму наиболее развитый фреймворк в плане локализации Qt 5.9.9 и класс для локализации.

QLocale::QLocale(Language language, Script script, Country country)

Примечание: будущая 6-ая версия сменила названия последнего параметра в угоду терпимости к терпению и терпилам.

QLocale(QLocale::Language language, QLocale::Script script = AnyScript, QLocale::Territory territory = AnyTerritory)

Есть три параметра.
1. Язык (обязательный выбор).
2. Письменность (по умолчанию или выбор).
3. Страна (по умолчанию или выбор).

Давайте разберём на примере китайского языка.
QLocale::Language — традиционный и упрощенный китайский?

По письменности (Script).

QLocale::setDefault(QLocale(QLocale::Chinese, QLocale::SimplifiedChineseScript)); // Упрощённый китайский
QLocale::setDefault(QLocale(QLocale::Chinese, QLocale::TraditionalChineseScript)); // Традиционный китайский

По стране (Country).

QLocale::setDefault(QLocale(QLocale::Chinese, QLocale::China));  // Упрощённый китайский
QLocale::setDefault(QLocale(QLocale::Chinese, QLocale::Taiwan)); // Традиционный китайский

По коду.

QLocale chinese("zh"); // Китайский
QLocale chinese("zh_Hans"); // Упрощённый китайский
QLocale chinese("zh_Hant"); // Традиционный китайский

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

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

Точка зрения пользователя

Для пользователя важны следующие вещи.
1. Владение языком.
2. Привычные фразы.

Владение языком

Пользователь может владеть.
1. Родным языком.
2. Не родными языками.
3. Родственными родному языку.
4. Родственными не родному языку.
5. Не владеть языком.

Для примера возьмём меня.
1. Родной язык — русский.
2. Не родные языки — 1. английский.
3. Родственные родному языку — Кириллица QLocale::CyrillicScript.
4. Родственные не родному языку — Латиница QLocale::LatinScript.
5. Не владею всеми остальными языками.

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

Транслитерация

Смотрите в чём разница письменности и языка.
1. Английский язык. Кириллица — дог, кэт. Латиница — dog, cat.
2. Русский язык. Кириллица — собака, кошка. Латиница — sobaka, koshka.

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

Тем не менее есть ограничения по звучанию, так как человеческие речевые органы ограничены. Символы это хорошо, но на этапе развития сознания они являются вторичными по отношению к звукам.

Привычные фразы

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

Если взять главное меню на английском (FEVTWH).

&File &Edit &View &Tools &Window &Help

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

&Файл &Правка &Вид &Инструменты &Окно &Справка

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

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

Плагиат ли это? Для наиболее употребительных фраз нет. В конце концов не нужно касаться имён брендов и всё.

Мнение пользователя

Давайте разберём разные случаи на основе предыдущих пунктов.

Отлично

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

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

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

Хорошо

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

Что, перевод не очень качественный? Зато на родном языке. И вообще, охладите своё траханье, углепластики.

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

Плохо

3. Программа имеет перевод на не родной язык пользователя, которым он владеет.

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

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

Неприемлемо

4. Программа имеет перевод родственный родному языку пользователя.
5. Программа имеет перевод родственный не родному языку пользователя.

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

Грубо говоря в моём случае это языки на 4. кириллице и 5. на латинице. По сути это другие европейские языки отличные от русского и английского, первый из которых мой родной, а второй тот который я хоть как-то могу читать. И замечу именно читать, а не говорить, но поскольку мы говорим о переводе графического интерфейса, то проблем не возникает.

Ужасно

6. Программа имеет перевод которым пользователь не владеет даже на уровне символов.

Это самый плохой вариант. Опять же для меня это арабские, азиатские, индийские и прочие языки. Главный минус в том, что я не только не знаю слов, но и не знаю как произносить символы, что невыгодно отличает это от 4 и 5 вариантов.

Приговор пользователя

1. По варианту перевода на родной язык пользователь ничего не скажет, но неявно будет доволен.
2. На второй поворчит, что переводили программу тридварасы.
3. На третий подумает, что вы на него забили и не собирались продавать ему программу, даже если он её скачал с торрента. Хотя наиболее вероятно, что на торренте как раз и был качественный перевод, чего не было и никогда не будет в официальных версиях.
4.5.6. Скорее всего вы послали пользователя по координатам xyz и он это понял. Таким и бесплатно никто не пользуется, делайте выводы.

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

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

Общечеловеческий рейтинг

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

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

Хотя из-за специфики программирования перевод на английский язык не так дорог, так как программы внутри и так написаны на английском, но то код, а не графический интерфейс.

Российская двойка разработчика (Приоритет 0)

1. en_US. Английский (США).
2. ru_RU. Русский (Россия).

Эта пара логично вытекает из инструментария. Английский (США) сгенерируют инструменты локализации. Русский (Россия) это родной язык не перевести на который невероятно глупо.

<TS version="2.1" language="en_US">

<TS version="2.1" language="ru_RU">

Есть ещё альтернатива английскому языку.
*. en_GB. Английский (Великобритания).

Например.
1. en_US. armor. броня.
2. en_GB. armour. броня.
Или.
1. en_US. color. цвет.
2. en_GB. colour. цвет.

1. Google. https://translate.google.com броня armor
2. Yandex. https://translate.yandex.ru броня armor
3. Promt. https://translate.ru броня armor

А вот "Англо-русский словарь. Аракин Владимир, Выгодская Зинаида, Ильина Наталия" даёт два варианта, где основной вариант Английский (Великобритания), и дополнительный вариант английский (США).

Короче вы скорее всего пользуетесь по умолчанию переводом английский (США) и даже в библиотеках алгоритмов это будет так.

QColor
QColorDialog
QColormap

И обратите внимание, что в некоторых программах есть иконка флага перевода, и там скорее всего висит звёздно-полосатый флаг США, а не Великобритании.

Большая европейская тройка (Приоритет 1)

1. fr-FR. Французский (Франция).
2. de-DE. Германский (Германия).
3. es-ES. Испанский (Испания).

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

И немецкий язык я решил назвать германским. А это я ещё не говорю о самоназвании. Например, что такое deutsch на германском.

Малая европейская двойка (Приоритет 2)

1. pt-BR. Португальский (Бразилия).
2. it-IT. Итальянский (Италия).

А здесь прикол в том, что pt-PT португальский (Португалия) это не тоже самое, что pt-BR португальский (Бразилия). В Португалии живёт 10 миллионов, а в Бразилии 220 миллионов. И за счёт подавления численностью португальский (Бразилия) является стандартом того, что называют в переводах португальским, так же как английский (США) подавляет английский (Великобритания).

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

Что касается Италии, то она не дотягивает до топа, всего лишь 60 миллионов и обычно стоит внизу рейтинга топа 10 вылетая из него на позицию или больше. И здесь нам помогут общечеловеки, которые могут натягивать на глобус различные факторы.

Количество населения в стране и интернете это ещё не всё. И даже мощность промышленности хотя и оказывает существенное влияние на платежеспособность населения не является единственным определяющим фактором.

Колонии, вот что отличает топы от не топов, иначе не только европейские страны, но и гораздо более многочисленные страны могли бы претендовать на место в топе рейтинга. И не забывайте, что даже США это всего лишь колония, что уж говорить об Африке и прочих континентах.

Большая азиатская тройка (Приоритет 3)

1. zh-CN. Китайский (Китай, упрощённая).
2. ja-JP. Японский (Япония).
3. ko-KR. Корейский (Южная Корея).

Для начала возьмём Китай, и кстати, Китай это КНР, Китайская Народная Республика. Есть упрощённая и традиционная письменности. На традиционную письменность можно забить болт. Почему? Потому что.

Как мы забили болт на английский (Великобритания) в угоду английского (США) и на португальский (Португалия) в угоду португальского (Бразилия), так мы забиваем и на китайский (Китай, традиционный) в угоду китайского (Китай, упрощённого).

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

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

А вот корейский существует как в Южной Корее, так и в Северной Корее. Пишут, что код Северной кореи ko-KP и письменность тоже своя. Посмотрел я различия, ну такое себе. Зачем вообще это было делать непонятно.

Большая южная двойка (Приоритет 4)

1. ar-SA. Арабский (Саудовская Аравия).
2. hi-IN. Хинди (Индия).

У меня закончились идеи, потому пошло что-то по количеству жителей и охвата стран. Есть ведь ещё всякие Турции (турецкий), Бангладеши (бенгальский) и так далее. Где-то много населения, но проникновение технологий низкое, где-то наоборот.

Смысл в том, что некоторые языки охватывают много стран, но диалекты никто не отменял. Арабский и индийский для меня так же непонятен как и китайский, японский и корейский.

Если нужно назвать страны, которые я бы включил в рейтинг первоочерёдного перевода, то вот они. Но по факту это ничего не значит от слова совсем. Особенно это видно на фоне экономической блокады России теми же США, Евросоюзом, Канадой, Японией, Австралией и ещё до кучи подсосов.

Но как по мне перевод делается не из-за политических аспектов и возможно даже не ради прямой прибыли. Взять тeх же Microsoft.
https://learn.microsoft.com/ru-ru/windows-hardware/manufacture/desktop/available-language-packs-for-windows

Что отличает топовые продукты от местечковой посредственности? Может быть функционал? Да. Но перевод это тоже функционал.

Прочие страны (Приоритет Ы)

Далее я мог бы расписать рейтинг ещё множества стран, но какой в этом смысл. Главная идея мои дорогие углепластики в том, что если нет родного пусть и полностью машинного перевода, а здесь можно было бы даже сделать подпись типа English (Google), Arabic (Yandex) и так далее, то программа сосед. Ведь одно дело отказаться от машинного перевода в пользу другого языка с более качественным переводом, а другое дело не иметь такой выбор с самого начала.

Большая тройка Steam

1. zh-CN. Китайский (Китай, упрощённая).
2. en_US. Английский (США).
3. ru_RU. Русский (Россия)

А вот так выглядит статистика Steam. Когда-то лидерами были английский и русский язык, но потом пришли китайцы.

БРИКС и другие

БРИКС объединение десяти государств.
1. Бразилии.
2. России.
3. Индии.
4. КНР.
5. ЮАР.
6. ОАЭ.
7. Ирана.
8. Египта.
9. Эфиопии.
10. Индонезии.

А вот и Бразилия колония Португалии, но что с того.
Россия, лично для меня перевод на родной язык логичен.
Индия и Китай большие страны, но не одинаковые.
Южно-Африканская Республика, что ещё и для них переводить.
Объединённые Арабские Эмираты, некий арабский.
Иран, Египет, Эфиопия, Индонезия.

Подведём итоги

На данный момент мой рейтинг топ-12 выглядит так.
1. en_US. Английский (США).
2. ru_RU. Русский (Россия).
3. fr-FR. Французский (Франция).
4. de-DE. Германский (Германия).
5. es-ES. Испанский (Испания).
6. pt-BR. Португальский (Бразилия).
7. it-IT. Итальянский (Италия).
8. zh-CN. Китайский (Китай, упрощённая).
9. ja-JP. Японский (Япония).
10. ko-KR. Корейский (Южная Корея).
11. ar-SA. Арабский (Саудовская Аравия).
12. hi-IN. Хинди (Индия).

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

Существует ещё такая тема как бюро переводов, если есть деньжата и вас вместе с вашей страной не забанили. В противном случае используйте машинный перевод для абсолютно всех доступных в переводчике языков. Чисто теоретически можно поручить исправление подобных переводов пользователям с выкачкой их на сайт.

Где сейчас рисуют диаграммы процесса?

Wed, 22 Jan 2025 12:51:42 GMT

Давно не занимался этим, тут встала задача отрисовать процесс.

Спасибо

Фонт-сабсеттинг

Tue, 10 Dec 2024 20:39:48 GMT

Открыл для себя такую технику. Можно выбрать из фонта (например, с математическими символами или иконками) только те глифы, которые реально нужны, и запаковать их в base64 data URL. Получаются (относительно) короткие строки, которые можно вставить в CSS, и далее их юзать (либо из разметки, либо через content). Выглядит примерно так:

@font-face {
  font-family: "VectorLib";
  font-style: normal;
  font-display: swap;
  src: url("data:font/woff2;base64,--строка-с-закодированными-глифами--")
    format("woff2");
}

Эта техника является альтернативой инлайнингу SVG.

Ещё мне посоветовали такую тулзу: https://transfonter.org/, которая автоматизирует оба процесса (отбор символов и энкодинг в data URL), но её я пока не смотрел.

Где сейчас делают прототипы?

Tue, 26 Nov 2024 12:41:31 GMT

Нужно накидать прототип веб приложения на страниц 5. Где модно сейчас такое делать?

Search Everywhere / Spotlight

Wed, 01 May 2024 14:55:18 GMT

Сравнительно недавно начали появляться элегантные решения по поиску в различных ПО. Например, «Search Everywhere», которое присутствует в IntelliJ IDEA. Или ее брат-близнец (судя по всему он и выступал «источником вдохновения» для ребят из JetBrains) это macOS «Spotlight».

В связи с этим возникли следующие вопросы —

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

⸻
^{❧ “Failure is simply the opportunity to begin again, this time more intelligently.” — Henry Ford}

Отобразить тяжелую/долгую операцию в UI

Wed, 10 Apr 2024 23:20:50 GMT

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

[x] легковесная опция 1
[ ] безобидное название тяжеловесной и долгой опции 2
[x] легковесная опция 3

Допустим опция 2 — занимает, например 50% всей работы если нажать кнопку мастера «Next >». Накидайте примеры, где и как лучше всего эта проблема решалась. То есть вопрос, как пользователя предупредить, что до запуска визарда, что для пользователя опция 2 — долгая. Пока идеи у меня какие-то: от черепашки в скобочках в строке названия, до всплывающей подсказки при нажатии на check box.

⸻
^{❧ “Our greatest glory is not in never falling, but in rising every time we fall.” — Confucius}

Есть два контейнера…

Thu, 07 Mar 2024 11:37:29 GMT

В окне диалога есть вкладки (tabs) и панель инструментов (toolbar). У каждой вкладки — своя задача и вид. При смене вкладки пользователем, по идее нужно менять панель инструментов на другую либо делать enable/disable для некоторых вкладок, согласно своих задач. Итак, как лучше расположить между собой эти контейнеры? У меня два варианта:

Классика: Сверху — toolbar, ниже — tabs;
Ribbon: Сверху — tabs, ниже — toolbar;

Какой вариант выберете?

…≪ Dementor ^1.6.1 ✪ Lets Play a Game ⚀⚀⚁⚃⚄ ≫

Идея нестандартного перекрывающего UI

Thu, 29 Feb 2024 18:31:23 GMT

Привет,

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

Идея компонента следующая:

Есть текстовое поле для много-строчного ввода текста, но не более 2–3 строк ❶. Есть другая область — live-рендера ранее вводимого текста ❷. Пользовательский ввод это формально какой-то мета язык со своим синтаксисом (хорошая аналогия — Markdown) и не будет превышать 100 символов (max=2–3 строки как я сказал раньше).

Суммарно все пространство очень ограничено, (т. о. разделить на две половины, как это делают обычно в редакторе: на левую сторону — ввод и правую — просмотр) не получится. Мало места. В поле ввода присутствует окраска синтаксиса.

Идея сделать «парящую» кнопку ❸ поверх поля ввода ❶ с синтаксисом, которая бы показывалась только при активном фокусе в поле, таким образом если поле ввода не в фокусе, оно выглядит как обычный текстовый редактор:

Когда компонент будет в фокусе, то появляется кнопка «Preview» ❸. Эту кнопку нельзя двигать пользователю, ее координаты рассчитываются на основе заполненности текстом поля ввода. Почему не хочу делать вверху toolbar с одной кнопкой? Много занимает, хочу не загромождать лишними элементами управления:

При нажатии ❸ переключается в режим «рендера ввода» ❷

При отжатии кнопки ❸ возвращается в прежний режим ❶ Таким образом еще одно нестандартное поведение — нажатие и отжатие вместо одиночного клика мыши.

⸻
Буду рад, если подскажите, если где-либо такую же реализацию вы видели, насколько удачная это идея. Потому что пугает «нестандартность подхода» c этим overlapped ui-control.

...<< Dementor ^1.6.1 ✪ Lets Play a Game ⚁⚁⚂⚂⚄>>

Три вопроса по юзабилити

Thu, 22 Feb 2024 08:38:54 GMT

1. Почему считается (считалось?) удобным сделать интерфейс Deplhi 1-7 из отдельных не связанных окон, между которыми виден рабочий стол? Хорошо, что отказались от этого, но как такое вообще в голову пришло, никогда не понимал. И создатели Lazarus радостно это повторили. Был там еще плагин, чтобы собрать всё это в одно окно, но он очень кривой был.

2. Почему считается удобным в Мак и некоторых DE Linux (Gnome 2, 3+, Mate) иметь панель СВЕРХУ, а не снизу, притом что заголовок окна с кнопками управления тоже находится СВЕРХУ окна? Обычно (на винде, в KDE) кидаешь мышку не глядя в верхний правый угол, щелк — окно закрыл. А тут надо выцеливать.
И еще при этом частенько цвет заголовка окна сливается с цветом верхней панели, приходится напрячься, чтобы схватить окно за заголовок.

3. О, и еще вопрос по Gnome 2|Mate. Там есть ДВЕ панели, сверху и снизу. Сверху есть кнопка системного меню, посередине часики и справа в углу трей. Или даже посередине пусто, а часики с треем справа. При этом для открытых приложений кнопки отображаются на панели снизу. Почему это удобно — оставлять пустое место на панели сверху и заводить еще одну панель снизу, когда кнопки приложений прекрасно можно разместить на пустом месте верхней панели?

Символы в Юникоде для капители (small caps)

Thu, 01 Feb 2024 12:03:50 GMT

Понадобилась кириллическая капитель, символами (это важно), и я её не нашёл. Стал читать. Оказывается, в Юникоде сплошная русофобия (а так же болгарофобия, грекофобия и т.п.)

Консорциумом юникодистов капитель (ᴄᴀᴛs ᴀʀᴇ ɴɪᴄᴇ) было решено считать начертанием, и не выделять под неё специальных символов. (Это значит, что при копировании и вставке такого текста в plaintext-редактор символы "превратятся" в обычные — на самом деле, они изначально обычные).

Тем не менее, для нужд фонетики всё-таки выделили спецблок, но только для латиницы: Фонетические_расширения. Кириллице в нём досталось два символа.

Да шо ж такое, опять русских людей обижают.

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

Двухуровневое меню в веб аппликации (forcing vs incocistency

Tue, 18 Apr 2023 08:56:41 GMT

Дано:
Веб аппликация с двухуровневым меню. Например:

Home (L0)
-About (L1)
-Contacts (L1)

Departments (L0)
-IT (L1)
-HR (L1)

Products (L0)
-Horns (L1)
-Hooves (L1)

Меню первого уровня по сути accessors, в то время как меню второго уровня launchers и грузят соотвественные страницы в дитейл.

Вопрос:
Что бы вы делали при выборе L0 меню

— A. перерисовка L1 айтемов меню
— B. A + навигация на selected (but not chosen!! (hello Russian btw! ) L1 пункт

и почему?

По логике L0 грузит L1 айтемы, последние всегда всегда имеет выбранный айтем (a must), таким образом, при выборе L0 всегда происходит переход на selected L1 по факту даже если юзер не выбрал его (selected but not chosen). Я бы скорее грузил, чем нет (незагрузка порождает несооветствие контента и selected L1.), но есть момент форсинга, возможно, неочевидного для енд-юзера поведения аппликации.

Алгоритм sexy импакта

Tue, 31 Jan 2023 11:30:23 GMT

Не знаю как точно это назвать, но пусть будет импакт

Мне надо на мобильном устройстве свайпом по экрану менять максимальное значение некоторого диапазона.
Например у нас изначально есть шкала от 1 до 5
Вот мне свайпом пальца по некоторой области менять эту самую 5
То есть изменение одномерное — рассматриваем только свайп по горизонтали.

А вот дальше не понятно как сделать наиболее sexy

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

Пробовал всякие корни-логарифмы, не то что-то все.

Как наиболее мягко эту штуку расчитывать?

Можно даже с анимациями какими-то, как скролл в iOS, типа резко дернул, то потом она еще докатывается, когда отпустил

Как удобнее выбирать цвет дизайнеру?

Sat, 29 Oct 2022 15:51:35 GMT

Мужики, сам я — погромизд, но требуется мнение из дизайнерской братии. Пишу контрол выбора цвета. В целом, идея интерфейса есть, но затыка именно в самом соке диалога — КАК ИМЕННО выбирать цвет? Одни делают ползунки RGB (что я считаю полной ерундой), другие — "цветовой круг"(HSL), рядом с которым выводится поле, где варьируются Saturation/Luminosity (как бы градиент такой получается). Третьи делают ещё 20 контролов-ползунков играть с параметрами.
У меня есть догадка, что реальный дизайнер вообще не занимается этими "крутилками", а тупо "шарит по плоскости цвета". Но мне нужно мнение реального дизайнера — погромизды тут только ещё больше наворотят контролов.
Да, на выходе нужен RGB цвет, но я его легко получу из любой схемы.

"Ничего не получилось" - сообщение СберОнлайн

Thu, 13 Oct 2022 06:23:29 GMT

Ну что за лайно, простите?

Хочу войти в Сбер — "Ничего не получилось, попробуйте позже". Идиотизм не?

Какая реакция у меня должна быть?

Паника и безысходность. Уже потом вспоминаю что скорее всего не удалось подключиться и включаю VPN.

Неужели нельзя было написать — не удалось подключиться к серверу — и всем все стало бы понятно. Как минимум это можно загуглить — а вот "ничего не получилось" — это просто лютый трындец.

Немного полезных ссылок

Sun, 14 Aug 2022 18:30:53 GMT

SVG

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

https://stackoverflow.com/a/38118843/14400772

Там и сам вопрос — демонстрация правильного подхода к SVG, а уж когда приходит SVG-ниндзя и показывает, как он мыслит в терминах path-операций...

Explanation

m100,100: move to point(100,100)
h200: draw a 200px horizontal line from where we are
a20,20 0 0 1 20,20: draw an arc with 20px X radius, 20px Y radius, clockwise, to a point with 20px difference in X and Y axis
v200: draw a 200px vertical line from where we are
a20,20 0 0 1 -20,20: draw an arc with 20px X and Y radius, clockwise, to a point with -20px difference in X and 20px difference in Y axis
h-200: draw a -200px horizontal line from where we are
a20,20 0 0 1 -20,-20: draw an arc with 20px X and Y radius, clockwise, to a point with -20px difference in X and -20px difference in Y axis
v-200: draw a -200px vertical line from where we are
a20,20 0 0 1 20,-20: draw an arc with 20px X and Y radius, clockwise, to a point with 20px difference in X and -20px difference in Y axis
z: close the path

Ну и вообще, допилить готовое изображение точечными вставками какого-нибудь stroke='white' stroke-width='0.5' или, наоборот, удалением ненужных path — умение из категории must have.

Наконец, менять код SVG можно автоматизированно, из скриптов.

Итак, ссылки.

https://icons.getbootstrap.com/ В то время, как до сих пор кто-то использует (иногда даже платные) упоротые шрифты с иконками, например, Font Awesome, Бутстрапчик предлагает неплохо нарисованные часто употребимые иконки совершенно бесплатно. Причём, предлагает в исходниках, которые можно редактировать. И в SVG, что ещё лучше.

Многим, наверно, непонятно, как правильно пользоваться SVG вместо <i class="fa/uil/whatever"></i>. Очень просто. Соберите библиотеку нужных иконок прямо в самом файле с разметкой, где-нибудь в начале страницы вставив невидимый (через visibility, через display не сработает) элемент <svg> с коллекцией <symbol>, а потом ссылайтесь на нужный прямо из текста:
```
<body>
    
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
        <defs>
            
            <symbol id="bi-play-circle" class="bi bi-play-circle" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
            </symbol>
        </defs>
    </svg>
```
```
Play <svg width="16" height="16" class="inline"><use href="#bi-play-circle"></use></svg>
```
Чтобы иконка отображалась тем же цветом, что и текст рядом, не забудьте описать класс inline:
```
svg.inline
{
    fill: currentColor;
    display: inline-block;
}
```
Ну и, ещё раз, не стесняйтесь править исходники иконок. Добиться хорошего отображения иногда можно только существенно поменяв толщину линий, способ соединения, размеры и т.п.
https://vecta.io/nano Оптимизатор SVG. Прежде, чем читать код, сгенерированный, например, Inkscape, полезно почистить его от шлака. А если не читать, а просто вставлять в свою страницу — тем более.
https://www.svgrepo.com/ Библиотека SVG-изображений под разными лицензиями. Опять же, полезно рассматривать её как набор исходников, а не тупо тырить чужие картинки, но можно и просто тырить (если лицензия позволяет, конечно). Много всего и в самых разных стилях.
https://yoksel.github.io/url-encoder/ Микроутилита для превращения SVG в CSS:
```
background-image: url("data:image/svg+xml
```
https://www.hongkiat.com/blog/svg-animations/ Просто набор красивых анимаций, построенных на базе SVG. Читая их код, я нашёл аж две идеи для своих проектов.

Misc

https://cloudconvert.com/ico-to-png При переносе старых виндовых приложений на современные рельсы, всё ещё изредка бывает нужно отконвертировать 32-битное изображение с альфа-каналом из .ico в совремненный .png.
https://brandpalettes.com/ Библиотека цветов корпоративных брендов. Например, синий Intel — это какой? А зелёный nVidia? Цвета представлены в разных форматах, и даже с названиями, так что можно больше не извлекать их пипеткой со скриншотов логотипов
https://www.imgonline.com.ua/eng/make-seamless-texture.php Полезный тул для изготовления бесшовных текстур. Конкретно в UI это может быть полезно, например, для изготовления видеобэкграундов и вообще для зацикленных анимаций. Результаты работы утилиты не всегда совершенны, но это задача из категории творческих, она вообще плохо автоматизируется.
https://www.flexclip.com/ Целый онлайн-редактор для создания видеороликов. Ценен, в первую очередь, большой библиотекой встроенных закольцованных видеобэкграундов.
https://www.videezy.com/free-video/live-wallpaper Библиотека видеобэкграундов.

Наткнулся на сервис по подбору имени для цвета

Sun, 31 Jul 2022 13:33:49 GMT

https://www.color-name.com/

Удобно, когда оттенок сгенерирован из фотки, например, а константе нужно дать имя.

Конечно, иногда имя лучше дать на основе функциональности, но ещё лучше функциональные имена определять через названия цветов, а уже те — привязывать к хексам.

Цветовые схемы

Fri, 08 Jul 2022 07:13:46 GMT

Что можно почитать фундаментального про цветовые палитры и пользовательский интерфейс? В данный момент я либо разбираю на части Darcula, либо захожу на https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3 и накликиваю тему. Но наверняка же есть какие теоретические труды в этой области? Основная задача — подобрать цветовую схему для интерфейса приложения (игры, аппаратного интерфейса), чтобы смотрелось гармонично.