Интерфейсы *

Привет, Хабр! Я Оксана Артемьева, UX/UI дизайнер. Недавно наткнулась в литературе на термин «эффект обманутого ожидания» — средство усиления выразительности текста, основанное на нарушении предположений, ожиданий и предчувствий читателя. Это то, что усиливает текст, делает его лучше, хотя сам термин звучит максимально негативно.

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

Негативный эффект обманутого ожидания в UX/UI дизайне

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

Предлагаю начать с негативной стороны эффекта и рассмотреть ситуации, в которых у пользователя появляется раздражение от невозможности достичь своей цели и возникают вопросы «А что дальше?», «Как получить ожидаемый результат?».

Дизайн-ревью —достаточно важная вещь, которая требует внимания, когда фронтенд-разработчик сверстал новую фичу, блок или целую страницу. Вовсе не для pixel perfect, который «как задизайнили, так и сверстали» — пиксель в пиксель. Pixel perfect в десктопе — это чушь, потому что нельзя сверстать так, чтобы с разных браузеров (привет, Safari) и разрешений всё смотрелось идеально. Но ошибки, которые сразу бросаются в глаза, сразу подмечаю, структурирую и обсуждаю это с разработчиком, может, появились какие-либо ограничения и прочее. Поэтому никогда не жалею время на дизайн-ревью и через DevTools сам проверяю то, что сверстал разработчик.

Все инструменты и функциональность, о которых пойдёт речь в этой статье, можно найти в браузере в «Инструментах разработчика» (клавиша F12 / Ctrl + Shift + I (на Windows) или ⌘ + ⌥ + I (на Mac), или клик правой кнопкой мыши в любом месте страницы -> Выбор пункта меню — «Просмотр кода страницы» (или «Исходный код страницы») — это и есть DevTools).

Основной элемент для работы с девтулзами — «Инспектор» (Ctrl + Shift +C на Windows и ⌥+⌘+I на MacOS) — это инструмент поиска элементов на странице браузера.

Привет. Я занимаюсь реализацией UI в нашей небольшой команде, разрабатывающей игры. Долгое время занимался 3D-моделированием, моушн-дизайном, UX/UI-дизайном, построением дизайн-систем. Позже жизнь привела меня в игровую индустрию, где я применил предыдущие навыки.

Команда разрабатывала гиперказуальные игры, и на момент моего присоединения к ней происходила перестройка — переход от гиперказуальных игр к хардкорным проектам. Тогда рассматривались два варианта новых проектов:

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

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

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

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

Привет, Хабр! Меня зовут Дмитрий Переверза, я Frontend Team Lead в компании Just AI. В рамках платформенного стрима мы занимаемся разработкой и развитием платформы для создания своих чат‑ботов. Cделать хорошего и полезного бота временами бывает сложно, поэтому для помощи разработчикам мы создаем инструменты, которые помогают ускорить разработку и упростить работу с ботами. В этой статье я расскажу, как реализовать изолированный UI, грамотно организовать код на примере виджета чата, и какие проблемы могут возникнуть в процессе разработки.

Компания Saleae производит логические анализаторы и предоставляет программу Saleae Logic 2 для отображения, анализа и логгирования данных. Logic 2 поддерживает разнообразные интерфейсы и протоколы и их декодирование.
Для расширения функций анализатора в Logic 2 появилась возможность создания своих обработчиков и декодеров протоколов.

В представляемом материале рассматривается создание своего декодера - анализатора верхнего уровня (HLA).

Зачем?
Например, есть последовательность передаваемых по SPI байт. Стандартно, при правильной настройке, вы увидите значения этих байт. Но, может возникнуть вопрос интерпретации полученных данных.
Декодер может помочь в выводе данных в удобном виде и/или упростить анализ (reverse engineering) неизвестного протокола.

Таблица для цеха отличается от обычной таблицы. Очень сильно:

— «Модные» тонкие шрифты — сразу на свалку. Числа должны читаться даже в маске сварщика.

— Освещение в цехах адаптировано под специфику задач— почти всегда нужна ночная тема.

— Минимум цветов, новый цвет — только привлечь внимание к реально критичной вещи.

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

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

Cтандартные подходы не всегда решали эти задачи.

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

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

Мы не перестаём развивать DivKit и за последние месяцы добавили несколько важных функций. О них расскажем в статье.

Не так давно мы успешно портировали проект CryptoTradingFramework на Avalonia UI с использованием библиотеки визуальных контролов EMX Controls. На примере клиентского приложения CryptoMarketClient мы хотели бы рассказать о возможностях библиотеки EMX Controls для разработки GUI для финансовых приложений.

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

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

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

За последние десятилетия технологический прогресс изменил экономику и бизнес. Алгоритмы управляют логистикой, искусственный интеллект анализирует документы и генерирует код, а данные передаются через API — интерфейсы, позволяющие программам взаимодействовать друг с другом. Один из примеров — LLM API (Large Language Model API), который позволяет каждому из нас подключаться к большим языковым моделям, к примеру, ChatGPT и использовать их для создания текста, обработки информации и принятия решений.

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

Следующий шаг в интеграции цифровых инструментов и промышленности — Physical API, физический API.

У нас есть внутренний плагин для Фигмы, который проверяет макеты на соответствие техническим параметрам. За несколько лет он сэкономили нашим дизайнерам много сил, а компании — денег.

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

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

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

Статья для новичков про использование Qt на языке Python используя официальную библиотеку-привязку PySide6. Ознакомление с созданием графических приложений на языке Python.

Привет, Хабр! Сегодня мы отправимся в увлекательное путешествие по просторам Вселенной, не вставая из-за компьютера. Задумывались ли вы, как планеты удерживаются на своих орбитах, почему галактики не разлетаются в разные стороны, и что заставляет яблоки падать на землю (да-да, снова этот старина Ньютон)? Ответ один – гравитация! Эта невидимая, но всемогущая сила правит бал во Вселенной, от мельчайших пылинок до гигантских скоплений галактик. Мы разберёмся, как из простых законов рождаются сложные и красивые взаимодействия, напишем код, который оживит наши виртуальные миры, и, возможно, даже почувствуем себя немного демиургами, управляющими судьбами звёзд.

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

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

Высокая конкуренция — это всегда стресс, но это не значит, что действовать нужно наугад в надежде, что в итоге количество перейдет в качество… может не перейти. Про графический дизайн не берусь судить, но в дизайне интерфейсов, UX/UI главная задача — сделать удобно, понятно и эстетично. Ровно эти же требования предъявляются и к хорошему портфолио т.е. умелый UX/UI дизайнер вынужден подходить к своему портфолио «юиксово», но к сожалению так бывает далеко не всегда.

Я задумал написать серию небольших статей в жанре «что такое хорошо и что такое плохо» в отношении портфолио UX/UI дизайнера. Надеюсь, эти скромные труды хотя бы немного снизят градус страданий от отказов и игнора со стороны потенциальных работодателей.

Отдавать свои деньги — неприятно. Для этого ощущения есть специальный термин Pain of Payment или стресс расставания с деньгами. 

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

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

Если вы когда-нибудь, запуская рабочую станцию с операционной системой Windows, обнаруживали, что ваш Full HD монитор показывает лишь изображение с разрешением не более 1024x768 и определяется как «Стандартный не Plug-n-Play монитор», и по какой-то причине вы не имеете возможности переключить монитор на другой видеовход, не поленитесь заглянуть под кат, где я растолкую, как «временно» выкрутиться минимальными усилиями.