Интерфейсы *

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

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

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

Apple пояснила, что это функция Eye Tracking для управления iPhone и iPad с iOS 18 движением глаз для людей с ограниченными возможностям.

Функция Eye Tracking, основанная на искусственном интеллекте, позволит управлять iPhone и iPad движением глаз. Она использует фронтальную камеру для отслеживания глаз. Все данные для работы Eye Tracking хранятся на устройстве.

Дополнительное оборудование для работы функции не потребуется. Она будет работать во всех приложениях на iOS и iPadOS.

Еще раз о дизайн-системах

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

Из чего состоит дизайн-система?

Дизайнеры создают UI Kit (набор готовых дизайн-решений) → Разработчики переводят UI Kit в код → Код помещают в репозитории

UI Kit и репозиторий связаны с помощью токенов. Это единицы информации, которые хранят в себе константы: например цвет, радиус скругления кнопки, параметры шрифта и т. д. Если поменять значение токена в Фигме, оно попадает в репозиторий и затем автоматически синхронизируется с сайтом.

Когда и кому нужна дизайн-система

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

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

• Если нужна системность и предсказуемость в разработке продукта, вы хотите делать последовательные улучшения и планомерно развивать продукт.

• У вас несколько команд, которые работают над одним продуктом, и им нужно поддерживать консистентность.

Однако есть и ложка дегтя

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

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

P. S. Го к нам в канал о дизайне :)

В два или три года я столкнулся с великой несправедливостью

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

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

Ох, сколько эмоций я испытал! Это что же мне теперь всё заново расстёгивать и застёгивать? Может, оставить так?

В итоге принял волевое решение переделать. Это было несправедливо! Я так старался, а теперь приходится всё переделывать!

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

Уже догадались, в чём мораль? Когда проектируешь интерфейсы — иногда случается та же ерунда. Приходится переделывать собственную работу, потому что в её основе было ошибочное решение.

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

Microsoft представила новый интерфейс Xbox Cloud Gaming, который включает в себя функции с панели управления Xbox. Он предлагает доступ к веб-версии группового чата Xbox, и пользователи могут присоединиться к разговорам из браузера.

Также теперь можно находить друзей в Xbox, отправлять сообщения, просматривать профили пользователей и достижения, получать доступ к уведомлениям. Microsoft тестирует интерфейс на инсайдерах Xbox. 

Поскольку он является частью Xbox Cloud Gaming, большая часть интерфейса также будет доступна на смарт-телевизорах и гарнитурах Quest VR. Однако функция группового чата Xbox в Интернете в настоящее время недоступна на Smart TV.

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

«Яндекс Музыка» доработала дизайн «Моей волны», который теперь подстраивается под музыкальные предпочтения пользователей.

Ключевой рекомендательный продукт «Яндекс Музыки» под названием «Моя волна» теперь для каждого пользователя выглядит персонально. Её новый дизайн формируется с помощью генеративных технологий на основе музыкальных предпочтений каждого слушателя.

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

Новый дизайн «Моей волны визуально отражает музыкальные предпочтения слушателя и динамично меняется вместе с ними, создавая индивидуальный аудиовизуальный опыт.

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

Разному настроению треков соответствуют разные оттенки специально разработанной палитры. Алгоритмы анализируют настроение треков и присваивают им соответствующий оттенок. В новом дизайне «Моей волны» объединяются цвет пользователя, который генерируется на основе анализа треков его «Коллекции», и цвет прослушиваемого трека.

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

Обновление дизайна «Моей волны» — ещё один шаг в сторону большей персонализации сервиса.

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

Компания собрала большой датасет для обучения Ferret-UI, что значительно улучшило распознавание. Отмечается, что нейросеть превосходит не только открытые MLLM, но и GPT-4. Модель можно использовать для реализации новых функций доступности. К примеру, нейросеть сможет управлять мобильным устройством, опираясь на запросы пользователя.

Инженеры компании опубликовали исследование на портале Arxiv.

Как включить тёмную тему на Хабре и почему она - отстой?

Зайдите в квест и просто нажимайте на любой ответ. В конце вам дадут тёмную тему, вне зависимости от ваших ответов.

Начинайте страдать.

На Хабре не хватало тёмной темы. Мы помогли это исправить.

Быстрее перейти на тёмную сторону поможет технический квест от Хабра и Yandex Cloud:

Чтобы пройти наш челлендж, нужно помочь компании с загадочным названием Lux ex tenebris решить проблемы с логином, которые возникли при последнем обновлении в прод. В конце квеста вас ждёт не только тёмная тема, но и розыгрыш мерча.

Приходите решать задачи и открывать тёмную тему Хабра → https://dark.habr.io/

А здесь уже можно прочитать пост Хабра о том, как создавалась эта тема.

Марк Гурман из Bloomberg сообщил, что с выходом iOS 18 Apple предоставит пользователям iPhone больше настроек главного экрана.

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

Пользователи iPhone уже могут настраивать экран блокировки после выпуска iOS 16. Согласно источникам, в новой версии ОС появятся дополнительные параметры настройки главного экрана, и это будет его крупнейшее обновление за несколько лет.

Apple представит iOS 18 на своей ежегодной конференции разработчиков WWDC в июне. ОС будет включать новые функции генеративного искусственного интеллекта для Siri и иных приложений, поддержку RCS в приложении «Сообщения», изменения дизайна и многое другое.

Microsoft в рамках тестирования проекта добавила в новую pre-release версию подсистемы Windows для Linux (WSL) возможность управлять дистрибутивами Linux в Windows 11 через графический интерфейс.

Благодаря WSL не нужно выполнять двойную загрузку Linux или создавать виртуальную машину, но эта функция ранее была ограничена терминалом Windows. Microsoft понимает, что некоторым из пользователей неудобно пользоваться командной строкой. В компании решили создать графический интерфейс для управления дистрибутивами Linux.

В Microsoft представили прототип графического интерфейса для управления дистрибутивами WSL, чтобы пользователи могли получить обзор всех установленных дистрибутивов, упростить доступ к ним и управление, могли просто взаимодействовать с нужным дистрибутивом Linux в Windows, а также выполнять импорт и экспорт дистрибутивов.

Макет пользовательского интерфейса GUI WSL имеет новую вкладку в приложении Dev Home под названием «Подсистема Windows для Linux». В этом разделе отображаются все установленные дистрибутивы с несколькими вариантами настройки. Разработчики планируют включить возможность монтировать диск в формате Linux и показывать использование оборудования виртуальной машины WSL для каждого дистрибутива.

22 марта 2024 года разработчики из Microsoft выпустили обновление для подсистемы Windows для Linux. В новой версии WSL 2.2.1 теперь по умолчанию включено DNS-туннелирование для улучшения сетевой совместимости. Ранее эта опция была доступна в экспериментальном виде.

Мы выпустили 6-ую версию UIKit — ключевой библиотеки дизайн‑системы Gravity UI.

Что нового:

1. Компонент List 2.0. В UIKit изначально был List, но в нём хотелось кое‑что доработать. При сборе запросов собрали список:

   • поддержка разных размеров и ширины;

   • иконка у элемента списка; разное количество и положение иконок;

   • поддержка стейтов;

   • разный контент в элементах списка (однострочный, многострочный или список пользователей);

   • поддержка разных видов разделителей и группировок.

   Это существенные изменения, поэтому мы создали List 2.0. Пока он выходит в prestable версии, но рекомендуем пользователям переходить на него и приносить фидбек.

2. RTL. Если ваши приложения/сайты должны отображаться на иврите, арабском и других языках с направлением письма справа налево, нужна поддержка RTL‑стандартов. При этом в RTL:

   • вставленное слово на латинице пишется слева направо;

   • цифры пишутся слева направо;

   • знаки препинания в арабском также пишутся слева направо и т. д.

   Во всех компонентах мы поддержали параметр RTL. Чтобы под рукой был полный пример, сделали промостраницу на арабском. Посмотреть, как реализовано, можно в исходном коде landing. Также за примерами можно заглянуть в storybook.

3. Доступность (a11y):

   • добавили в проект плагин eslint;

   • поддержали клавиатуру для clickable и closable состояния компонента Persona;

   • отключили onClick у 15 неинтерактивных компонент;

   • поддержали клавиатуру в компоненте SelectionTable.

Если есть запрос на доработку — приходите к нам в GitHub с issue или даже с PR. И используйте Gravity UI!

Selectel UX & Research Meetup#3

14 марта, 18:30 

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

🚀 Регистрируйтесь и подключайтесь онлайн или приходите в наш офис.

Figma представила функцию «Мультиредактирование» (multi‑edit).

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

Несколько новшеств:

• Быстрый автоматический выбор повторяющихся объектов в разных фреймах. Либо выбор слоев аналогичных выбранному объекту с помощью зажатого Shift.

• Каждый объект независимо масштабируется относительно своего центра, а не группой, как раньше.

• Массовое изменение цвета, размера, поворота и других свойств.

• Редактирование текста одновременно в нескольких фреймах и изменение свойств шрифта.

• Автоматическое создание нескольких auto layout для разных групп выделенных объектов.

• Массовое перемещение объектов в разных auto layout, неважно, горизонтальные они или вертикальные.

• Массовое внесение объектов в несколько фреймов.

• Выравнивание объекта относительно ключевого в разных фреймах.

• Изменение механики вставки с сохранением позиции объекта: из одного фрейма в несколько, несколько объектов из разных фреймов в один, несколько объектов из разных фреймов в множество фреймов путем чередования.

• Создание компонента из ключевого объекта и автоматическая замена других выделенных объектов инстансами.

• Одновременное редактирование вариантов компонента, например добавление иконок, текста и т. п.

Для ознакомления с этими новшествами Figma подготовила обучающий файл и видео. Что вы думаете об этих изменениях — пишите в комментариях.

Microsoft начинает внедрять новый дизайн облачного хранилища OneDrive для потребителей. Обновление Fluent представили в 2023 году, и оно будет доступно всем пользователям к концу февраля.

«Это визуальное и функциональное обновление, призванное помочь быстро получить доступ к файлам и организовать контент различными способами», — говорит Мишель Барретт, менеджер по продуктам Microsoft.

Новый интерфейс OneDrive более соответствует Windows 11 и заменяет различные приложения Microsoft Office. Он был упрощен и модернизирован, а также появился новый режим просмотра, позволяющий находить файлы и документы по их авторам.

Microsoft добавила фильтры, которые помогают разделять форматы Word, Excel, PowerPoint или PDF. Кнопка «Добавить новый» позволяет не только загружать, но и создавать документы с помощью приложений Office.

Microsoft выпустила тестовую сборку операционной системы Windows 11 Insider Preview Build 26040, в которой переработан интерфейс установки ОС и добавлены новые опции.

Разработчики поменяли одно из окон интерфейса процесса установки Windows впервые за 11 лет. Ранее подобное изменение было в рамках релиза Windows 8.

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

Плагин «Simpleflow» для Figma упрощает вставку коннекторов (стрелок), соединяющих два объекта. Это особенно полезно при добавлении пояснений к макетам. Идея плагина очень простая: он берет коннекторы из FigJam и вставляет в Figma. Основное преимущество перед аналогичными плагинами заключается в том, что коннекторы не отвязываются, а автоматически перестраиваются вместе с объектом (то, что мы любим в Miro).

Мини‑инструкция:

1. Запускайте плагин и нажимайте «Copy connector to clipboard».

2. Выбирайте первый объект, удерживая Shift , затем выбирайте второй объект, к которому будет направлена стрелка.

3. Нажимайте «Paste here» или используйте Ctrl/cmd+V .

   Чтобы вставить стрелку повторно, не обязательно запускать плагин. Просто нажмите Ctrl/cmd+D, чтобы создать дубликат.

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

«Студия Артемия Лебедева» представила на своём сайте проект иконок для операционной системы «Аврора». Дизайнеры студии разработали расширенный набор из трёхсот пиктограмм. На реализацию проекта ушло 34 дня, а в будущем студия планирует добавлять в набор новые иконки. Арт-директором проекта выступил Павел Герасимчук, который ранее руководил разработкой айдентики Мещерского парка, сайта программы «СберСпасибо», атомной электростанции «Аккую», администрации города Королёва и мобильного приложения сети ювелирных магазинов «Санлайт».

Заказал себе на днях кое-какой товар в интернет магазине и соблазнился их акцией с бесплатной доставкой от Яндекс.Доставки. Через некоторое время на электронную почту пришло письмо о передаче товара в службу доставки и трек номер для его отслеживания.

Но к своему немалому удивлению обнаружил, что посылку на сайте Яндекс.Доставки отследить не представляется возможным. Это можно сделать только в специальном мобильном приложении или по ссылке в браузере из СМС.

Может быть представители Яндекс не постесняются ответить на вопрос. Как предполагается отслеживать посылки тем пользователям, которые продолжают использовать обычные телефоны?

Настоящий нейроарт, или как превратить мысли в искусство

Представьте полутемный зал. Сидящая в центре пара целуется, и все вокруг расцветает разноцветными всполохами. Обручи на их головах считывают мозговую активность и превращают в кривые световой инсталляции, заполняющей все вокруг. Так выглядит Kissing Data — один из самых красивых science art проектов последнего времени.

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

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

Следующий шаг напрашивается. Преобразуйте мозговую активность в картинку или звук, и используйте биологическую обратную связь, чтобы контролировать их. Так может получиться новый визуально–музыкальный инструмент, управляемый силой мысли. Почти что голофон из футурамы. Профессор Грейс Лесли разрабатывает систему для создания музыки при помощи мозговых волн и уже демонстрирует результаты своих трудов акомпонимируя на флейте.

Источник: t.me/SantryBlog