Избранное

Позднее Ctrl + ↑

Умное анду и реду в Фигме

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

В Фотошопе иначе: можно в несколько шагов настроить выделение, используя объединения, пересечения, Transform Selection и прочий Quick Mask, и тогда анду последовательно пройдёт эти шаги в обратном порядке. Ну и если случайно потеряешь тщательно настроенное, тоже можно сделать анду, и выделение вернётся. Это умно.

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

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

От таких решений душа дизайнера интерфейса поёт.

Дизайнерский гороскоп

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

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

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

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

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

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

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

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

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

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

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

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

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

Две позиции в длинном содержимом: прогресс и положение прокрутки

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

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

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

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

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

Лет десять назад Артём Горбунов придумал идею «термоскроллера». Типа лифт в полосе прокрутки «греет» шахту. Чем дольше мы находимся в какой-то месте, тем горячее она становится. Применим идею к визуализации положения в книге или видеоролике:

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

Глюки мозга

Люблю всякие идиотские глюки мозга, связанные со сбоем контекста. В школе я как-то повёл мышку за пределы экрана, чтобы нажать ею на кнопку выталкивания дискеты из дисковода. Ещё, бывает, смотришь газету и пытаешься увеличить фотографию двумя пальцами, чтобы разглядеть. А сейчас я подошёл к светофору, который показывал 47 секунд до моего зелёного света, и машинально даблкликнул в правый эйрпод — типа, промотать на 30 секунд вперёд.

Яндекс.Маркет пока ждёшь такси

Яндекс давно придумал такую фишку: пока ждёшь такси, тебе показывают какие-то товары на Яндекс.Маркете, и тебе они нет-нет, да нравятся. Я сам не раз туда залипал и добавлял в корзину всякие клёвые вещицы. А что, ловко придумано: тебе всё равно нечего делать, стоишь тупишь в телефон несколько минут — почему бы тебе чего-нибудь не продать? Удобно, когда у тебя «экосистема», и один акаунт работает и для такси, и для Маркета.

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

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

Листаемые галереи товаров — это плохо

Иногда у вас что-то не влезает в ширину и вы делаете листалку:

Если вы пытаетесь так показать товары, то это неудачный дизайн.

Дело в том, что листать — сложно. Прокрутка — самое приятное и дешёвое действие, для которого у нас есть выделенные жесты и элементы управления на всех устройствах. А для листания приходится целиться в какие-то маленькие стрелочки (Фиттс негодует), да ещё и кликать потом.

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

Крутить в бока в принципе нормально, если ты смотришь с телефона или Мака, но у многих людей мышки с вертикальными колёсами — и в их мире нет нормальной горизонтальной прокрутки.

Бывает, листание делают автоматическим:

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

Кроме того, непонятно, что надо сделать, чтобы оно таки пролисталось. Тут тоже много вариаций: стрелочки для ручного листания могут появляться при наведении либо сами эти полоски могут кликаться (в любом случае снова привет от Фиттса). Всё это — это явные костыли.

Ещё хуже — когда листание работает вертикально:

Тут ко всем бедам добавляется ещё и противоречие с существующей прокруткой.

Если вы хотите показать несколько разных, но равнозначных элементов на странице, используйте прокрутку.

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

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

Прокрутка не должна прыгать из-за изменений за пределами поля зрения

Допустим у вас длинный документ с прокруткой, и вы смотрите на какую-то его часть далеко от начала. Тогда если в его начальной части что-то изменится — добавится или уберётся — у вас всё прыгнет:

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

А должно быть вот так:

Прокрутка не должна прыгать из-за изменений за пределами поля зрения, хоть над ней, хоть под ней.

Антифриз и незамерзайка

А вот ещё удивительный термин наоборот. Охлаждающая жидкость в автомобиле называется антифризом. А вот незамерзайка — это вообще зимняя жидкость для мытья стёкол.

Активное и пассивное избирательное право

Быть политиком, чиновником, общественным деятелем — большое дело, требующее активного вовлечения. Есть даже слово такое — активист. Но вот право избираться называется «пассивным избирательным правом».

В то же время сходить раз в несколько лет проголосовать — ничего не стоит. А право сделать это называется «активным избирательным правом».

Это так потому, что избирать это active voice, а быть избранным — это passive voice. Логика ясная (в отличие от логики, по которой синхронное называется асинхронным), но всё равно каждый раз приходится в голове это переворачивать. Но я считаю, что раз логика тут лингвистическая, то, надо было идти дальше, и по-русски называть это действительным и страдательным избирательным правом! Другой вариант — перейти на математическую терминологию и разделить избирательное право на действительное и мнимое.

Синтаксис и автономность подписи элемента интерфейса

На вчерашнем семинаре интерфейсного курса разбирали элемент настройки окна:

Открывается: 1) влево, 2) вправо, 3) не открывается

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

Чтобы исправить синтаксис, нужно все радиокнопки сделать обстоятельствами, то есть чтобы они отвечали на вопрос «как?»:

Открывается: 1) влево, 2) вправо, 3) никак

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

Автономность — это когда для понимания смысла элемента не нужно знать, что находится вокруг. Например, компьютер спрашивает, хотите ли вы удалить файл. Если подтверждающая кнопка называется «Да», то она неавтономна, потому что приходится читать, что спрашивают перед ней. А если кнопка называется «Удалить», то она понятна сама по себе, автономна.

Во втором варианте последняя радиокнопка потеряла автономность. Чтобы понять, что именно «никак», приходится читать общую подпись. А вариант «не открывается» был самодостаточным.

Что же в итоге лучше? Кажется, что удобство важнее формализма, и первый вариант побеждает. Но это ловушка! Нет причин выбирать между плохими вариантами, когда можно найти хороший. Вчера, например, сразу же придумали, что вместо слов можно использовать графику: понятные стрелки в две стороны; крестик между ними.

Ранее Ctrl + ↓