Дано: заказчик закидывает глупыми (на ваш взгляд) правками, из-за чего терпение на пределе, а проект не продвигается. Рассказываем, что стоит и не стоит делать в подобной ситуации.
❌ Бесконечно бодаться из-за правок, доказывая заказчику, что их нельзя вносить
В результате выпустить материал с сильной задержкой или не выпустить совсем.
✅ Спокойно и профессионально аргументировать точку зрения, а после отпустить заказчика с миром
Исполнитель снимает с себя ответственность за продукт с того момента, как он предупредил о рисках, связанных с правками. Возьмём для примера статью: не стоит относиться к рей, как произведению искусства, — это всего лишь один из инструментов, который не обязан быть идеальным.
Как может выглядеть аргументация для заказчика:
Владимир, вижу, что для вас важна именно такая формулировка. Сейчас поправлю всё по комментариям, но как редактор сначала должен обозначить возможные риски:
— Фраза «осуществляем деятельность по доставке продуктов» звучит слишком формально. Мы обсуждали с вами, что хотели бы выглядеть в глазах партнёров, как близкие знакомые. Сейчас же похожи скорее на не очень дружелюбных чиновников.
— Ещё эту фразу можно сократить до «доставляем продукты» без потери смысла. Сложно подступиться к длинному тексту, когда есть горы более важных дел, наверняка вы знаете это по себе. В наших интересах сократить текст, насколько это возможно, но канцелярит его только удлиняет.
Больше советов для тех, кто работает с текстом, — на канале Плохое/хорошее.
Недавнее исследование выявило и классифицировало 68 уникальных типов «тёмных паттернов» в дизайне пользовательских интерфейсов. Эти паттерны были организованы в пять основных категорий:
Препятствия (Obstruction): Намеренное усложнение или запутывание процессов.
Укрывательство (Sneaking): Сокрытие или искажение информации с целью введения пользователей в заблуждение.
Интерференция интерфейса (Interface Interference): Манипуляции элементами интерфейса для влияния на поведение пользователей.
Принуждение (Forced Action): Обязательное выполнение пользователем определённых действий для достижения желаемого результата.
Социальная инженерия (Social Engineering): Использование социальных норм или давления для манипуляции поведением пользователей.
Кроме того, таксономия включает 8 новых подкатегорий и 24 дополнительных типа тёмных паттернов, таких как:
Новые подкатегории: Ложная информация, сложно закрыть, откровенно злой дизайн, принудительная реклама, автоматическое выполнение и др.
Новые тёмные паттерны: Принудительный льготный период (Forced Grace Period), только первоначальные выплаты (Only Initial Payouts), бесконечная прокрутка (Infinite Scrolling) и другие.
Таксономия была проверена с участием представителей индустрии, и более 87% опрошенных одобрили её за полноту, ясность и практическую полезность.
Чат-боты стали неотъемлемой частью цифровых взаимодействий, однако их эффективность во многом зависит от восприятия пользователями их производительности и стиля общения. Исследования показывают следующее:
Ошибки подрывают пользовательский опыт: Ошибки негативно влияют на восприятие чат-бота с точки зрения простоты использования, полезности, социальной значимости и удовольствия от взаимодействия. Проще говоря, чем больше ошибок совершает чат-бот, тем меньше у пользователей желания с ним взаимодействовать.
Человечный стиль общения повышает удовольствие: Хотя человеческий стиль общения (например, эмпатия, шутки, эмоциональные реакции) не оказывает существенного влияния на восприятие простоты использования или полезности, он значительно увеличивает ощущение удовольствия от взаимодействия, делая общение с чат-ботом более приятным.
Для максимизации эффективности чат-ботов дизайнерам следует сосредоточиться на минимизации ошибок, одновременно внедряя элементы человеческого взаимодействия. Комбинация компетентности и доступности позволяет создавать чат-ботов, которые не только работают эффективно, но и вызывают доверие и удовольствие у пользователей.
https://www.tandfonline.com/doi/epdf/10.1080/10447318.2023.2175158
Инвентаризация визуальной эстетики веб-сайтов (VisAWI) — это проверенный инструмент, широко используемый в исследованиях UX для оценки эстетики, понимаемой как субъективный и приятный опыт, направленный на объект, не опосредованный логическим рассуждением.
VisAWI предлагает структурированный подход к оценке эстетики веб-сайтов, включающий 18 элементов, разделённых на четыре подшкалы:
Простота (Simplicity): Оценивает ясность и минимализм.
Разнообразие (Diversity): Анализирует визуальное разнообразие и богатство.
Цветность (Colorfulness): Уделяет внимание использованию и привлекательности цвета.
Мастерство исполнения (Craftsmanship): Изучает воспринимаемое качество исполнения дизайна.
Изначально разработанный на выборке из 2027 участников, говорящих на немецком языке, VisAWI продемонстрировал высокую психометрическую надёжность и сильную теоретическую обоснованность, что делает его надёжным инструментом как для научных исследований, так и для практического применения в веб-дизайне.
Теперь доступна версия VisAWI с позитивными формулировками утверждений, валидированная на английском языке, что расширяет его применимость для международных исследований и профессиональных задач.
https://www.tandfonline.com/doi/epdf/10.1080/10447318.2023.2258634
Цвет в веб-дизайне — это не просто эстетический выбор, а мощный психологический сигнал с глубокими эволюционными корнями.
Данные нейровизуализации и самоотчётов предоставляют убедительные доказательства влияния цвета на восприятие:
Когнитивная обработка и умственная нагрузка: Просмотр веб-сайтов с красным дизайном активировал левую дорсолатеральную префронтальную кору (dlPFC), область мозга, связанную с умственной нагрузкой. Это указывает на то, что красный цвет требует большего количества когнитивных ресурсов из-за своей ассоциации с угрозой и повышенным вниманием.
Недоверие к бесцветным сайтам: Веб-сайты без цвета вызывали ещё более сильную активацию правой dlPFC по сравнению с цветными сайтами, что свидетельствует о большей когнитивной нагрузке. Данные самоотчётов подтвердили этот вывод: пользователи испытывали большее недоверие, меньшее удовольствие и более негативное отношение к бесцветным дизайнам. Это, вероятно, связано с неопределённостью, которую создаёт отсутствие цвета.
Эти результаты подчеркивают важность цвета в формировании пользовательских восприятий. Красный цвет может усиливать вовлечённость, но за счёт увеличения когнитивной нагрузки, в то время как бесцветные дизайны могут непреднамеренно вызывать чувство неопределённости и недоверия.
Современные пользовательские интерфейсы часто требуют значительных усилий при использовании из-за того, что представляют обширные объёмы разнородной информации. Это создает значительную нагрузку на управление вниманием и когнитивные ресурсы пользователей.
Исследования показывают, что общий показатель интеллекта (Full-Scale IQ), являющийся агрегированным измерением когнитивных способностей, коррелирует с успехом выполнения задач, более быстрым их завершением и снижением субъективного восприятия ментальной нагрузки при работе с компьютерами. Особенно важно, что объём рабочей памяти объясняет значительную часть различий в эффективности выполнения компьютерных задач, подчеркивая её ключевую роль в успешной работе с интерфейсами.
Кроме того, исполнительные функции, такие как выбор целей, планирование действий и выполнение задач в правильной последовательности, оказываются критически важными для успешного взаимодействия с такими интерфейсами.
Для обеспечения равного доступа к преимуществам использования цифровых технологий необходимо совершенствовать дизайн пользовательских интерфейсов. Они должны минимизировать зависимость от исполнительных функций и объёма рабочей памяти, что сделает их более доступными для широкого круга пользователей.
Extended-use designs (EUD) - что-то похожее на dark patterns в вебе - оказались весьма распространены среди популярных онлайн платформ, таких как Booking или AliExpress. Эти практики можно сгруппировать в четыре категории, отражающие лежащие в их основе стратегии:
давление (pressuring)
соблазнение (enticing)
ловушка (trapping)
усыпление бдительности пользователей для вовлечения (lulling users into engaging)
EUD манипулируют эмоциональным опытом пользователей (например, давление, соблазнение) и когнитивной нагрузкой (например, усыпление, ловушка). Они работают в сочетании, чтобы эмоционально и когнитивно вознаграждать пользователей за продолжение вовлеченности и наказывать их за попытки прекратить взаимодействие.
Как сделать так, чтобы тебя читали: 3 простых правила при создании текста
По данным NN/g, люди не вчитываются в каждое слово на странице с текстом, а воспринимают только 20% контента. Они сканируют и вычленяют отдельные слова и фрагменты.
Это стоит учитывать при создании любого контента. Придерживайтесь трех простых правил, чтобы ваш контент выполнял свою цель:
1. Создавайте сканируемый контент.
Используйте списки с буллитами, пишите короткими абзацами, сокращайте предложения. Следуйте правилу «одна идея на один пост». Избегайте длинных слов, которые состоят из пяти и больше слогов.
2. Помогайте людям сканировать ваш контент.
Расставьте по тексту крючки, за которые зацепится глаз читателя.
3. Сделайте так, чтобы человек перешел к чтению после сканирования.
Если человек сканирует интересный и полезный текст, он начнет его читать подробнее. А это и есть ваша цель — донести сообщение до клиента.
>> Больше интересных примеров и кейсов из мира диджитал найдете в Telegram-канале нашей дизайн-команды.
4 принципа из художки, которые помогают в работе дизайнера
Наш дизайнер Юля Вакуленко выделила 4 правила с уроков рисования, которыми она пользуется в работе. В итоге получился список советов для любых дизайн-задач.
1. Сперва общая композиция, потом — детали.
Бывает, что довел дизайн до идеала, пиксель к пикселю поставил, но всё равно что-то не то. С портретами то же самое: рисуешь часами идеальный правый глаз, а общий вид в итоге так себе. Поэтому всегда лучше сначала накидать общую идею крупными штрихами, и только потом переходить к деталям.
2. Результат зависит от контекста.
Как глиняный кувшин выглядит по-разному в разных натюрмортах, так и конечный дизайн зависит от контекста — целей, аудитории, ограничений и т. д. Поэтому важно собрать и учесть максимум требований.
3. Критика — не руководство к действию.
Художка тренирует восприимчивость к критике: один преподаватель зарубил композицию твоей картины, другой — цвета, третий вообще усомнится в способностях. Фишка в том, что критика — не руководство к действию, а пища для размышлений. Задавайте встречные вопросы своим комментаторам, ведь истина — в диалоге.
4. Сложные вещи лучше упрощать.
Любой предмет — это набор геометрических фигур. Упростить объект до базовых форм и сохранить его характерные черты — задача не из легких. Но это полезно не только для иконок и логотипов, но и для поиска концептуальной визуализации в целом. Всё, что не требует много размышлений, запоминается лучше.
>> Полная версия статьи Юли — по этой ссылке.
В сети вышло видео FastHTML за 100 секунд.
FastHTML — это новый веб-фреймворк Python, который позволяет легко создавать интерактивные веб-приложения без необходимости изучать фреймворк JavaScript, такой как React или Angular. Проект использует HTMX под капотом для включения динамических обновлений контента без полной перезагрузки страницы.
Разница между адаптивностью (слева) и отзывчивостью (справа)
Еще раз о дизайн-системах
Недавно у нас вышел кейс о работе над дизайн-системой для холдинга «Финам». Сегодня решили рассказать подробнее, что это такое и когда она может быть полезна.
Из чего состоит дизайн-система?
Дизайнеры создают UI Kit (набор готовых дизайн-решений) → Разработчики переводят UI Kit в код → Код помещают в репозитории
UI Kit и репозиторий связаны с помощью токенов. Это единицы информации, которые хранят в себе константы: например цвет, радиус скругления кнопки, параметры шрифта и т. д. Если поменять значение токена в Фигме, оно попадает в репозиторий и затем автоматически синхронизируется с сайтом.
Когда и кому нужна дизайн-система
На краткосрочных проектах, где нужно быстро проверить гипотезы и не требуется больших затрат на поддержку.
На длинных проектах, где нужно часто проверять гипотезы и делать много однотипных решений.
Если нужна системность и предсказуемость в разработке продукта, вы хотите делать последовательные улучшения и планомерно развивать продукт.
У вас несколько команд, которые работают над одним продуктом, и им нужно поддерживать консистентность.
Однако есть и ложка дегтя
Дизайн-система может привести к шаблонности продукта: страницы начинают выглядеть слишком однотипно, а сделать какую-то необычную фичу становится трудно.
Внедрять дизайн-систему сложно и дорого, особенно на начальном этапе. Да, расходы на дизайн снижаются. Зато появляется работа на поддержание и развитие самой дизайн-системы в отделе разработки.
P. S. Го к нам в канал о дизайне :)
Ближайшие события
Nike представила кроссовки Air Force 1 в дизайне 404 Error («Ошибка 404»).
Производитель изменил форму кроссовок, нанёс на стельки строки с символами 0 и 1, а также добавил на язычок цифры 404 поверх названия модели.
Сбоку на обуви написано: «404 Error, the requested Upper was not found» («Ошибка 404, запрошенный верхний элемент не найден», что умело интегрирует веб-жаргон в физический дизайн, воплощая в себе суть этого эксклюзивного решения цифровой эпохи).
Кроссовки ожидаются в продаже летом 2024 года по цене от $150.
Главные принципы инклюзивного дизайна
Инклюзивный дизайн — метод проектирования интерфейса с учетом потребностей как можно большего числа пользователей.
Чтобы соответствовать высокому уровню доступности по WCAG, необходимо придерживаться 4 принципов.
1. Воспринимаемость
Всегда должна быть текстовая альтернатива нетекстовому контенту.
Капча должна быть представлена в нескольких формах.
Нельзя пренебрегать контрастностью.
2. Понятность
Например, выбор цвета товара в интернет-магазине должен иметь текстовое пояснение, чтобы быть понятным для людей с нарушением цветовосприятия. Ответные уведомления системы или инфографика должны маркироваться не только цветом, а иметь пояснительную иконку или штриховку.
3. Управляемость
Люди должны иметь возможность взаимодействовать с интерфейсом и управлять контентом всеми доступными способами. В том числе и с клавиатуры, ведь многие люди с нарушениями моторики не пользуются компьютерной мышью. Все функциональные элементы страницы должны быть доступны по умолчанию, например кнопки слайдера. Экранный фокус, с помощью которого человек перемещается, должен корректно работать и быть виден.
4. Надежность
Интерфейс должен оставаться доступным при изменении версий продукта или операционной системы.
Больше примеров доступных и недоступных интерфейсов найдете в нашей статье. А за вдохновением приглашаем в тг-канал нашей дизайн-команды.
Google представила открытую библиотеку jpegli с реализацией кодировщика и декодировщика изображений в формате JPEG.
Библиотека включает дополнительные оптимизации для повышения эффективности кодирования, позволяющие на 35% увеличить степень сжатия высококачественных изображений, по сравнению с традиционными кодеками JPEG.
В сравнении с libjpeg-turbo проект jpegli позволяет добиться аналогичного уровня качества при снижении битрейта на 32%. На уровне API и ABI библиотека полностью совместима с libjpeg62 и может применяться для её прозрачной замены. Код jpegli написан на языке С++ и распространяется под лицензией BSD.
Библиотека jpegli позволяет кодировать изображения с выделением 10 и более битов на цветовой компонент. При этом результат работы алгоритмов кодирования адаптируется для традиционной для формата JPEG модели, допускающей использование только 8 бит на цветовой компонент. Подобная особенность позволяет сохранить совместимость с уже существующими декодировщиками, рассчитанными на 8-битовое представление цветовых составляющих.
Кодируемые при помощи jpegli изображения полностью соответствуют стандарту JPEG, не требуют специфичных декодировщиков и могут просматриваться в существующих просмотрщиках JPEG и веб‑браузерах. Применение для распаковки изображений, сжатых при помощи jpegli, собственного декодировщика позволяет добиться дополнительного снижения артефактов. Скорость кодирования при помощи jpegli сопоставима с библиотеками libjpeg‑turbo и MozJPEG.
Источник: OpenNET.
7 марта 2024 года состоялся релиз Boa v0.18 — экспериментального лексера, парсера и компилятора Javascript, а также движка ECMAScript, написанного на языке программирования Rust.
Исходный код проекта выложен на GitHub под лицензией MIT License.
Новая версия Boa позволяет легко встраивать JS-движок в различные проекты, и а также использовать его из WebAssembly и командной строки.
Разработчики пояснили, что этот выпуск Boa также знаменует собой серьёзное обновление дизайна сайта проекта и появление нового логотипа.
«Поскольку Boa используется всё большим количеством проектов, важно, чтобы мы могли предоставить стабильный и надёжный API. Нам кажется, что мы ещё не достигли этого результата, но после обсуждения с командой мы решили нацелиться на выпуск версии 1.0 в ближайшем будущем. Это станет для нас важной вехой, и мы надеемся, что к тому времени у нас будет много новых функций и улучшений», — пояснили разработчики проекта.
Впервые проект Boa был представлен на конференции JSConf EU 2019 разработчиком Джейсоном Уильямсом.
Selectel UX & Research Meetup#3
14 марта, 18:30
Уже в следующий четверг проведем UX-митап про исследования, интервью и проектирование. Поговорим про общение с коллегами и пользователями, брифинг заказчиков и контекстные интервью.
? Регистрируйтесь и подключайтесь онлайн или приходите в наш офис.
Препарируем Material Design и находим родовые травмы
Подробнейшая документация, но..
Неконсистентный и неуниверсальный дизайн.
Сомнительный пользовательский опыт чуть ли не в каждом компоненте.
Реализация от Гугла в Вебе безбожно тормозит и глючит.
Тяжёлая поддержка разных форм-факторов и инпут-девайсов.
В продолжение темы: Бестолковый дизайн, Mathematics Driven Design.
Мета: Форум Гипер Дев, Канал с новостями, Донаты.
WT Content Image gallery v.1.2.0
Пакет плагинов галереи изображений и видео для вставки в материалы и модули Joomla, а так же везде, где работают плагины группы content. Плагин работает по шорткодам {gallery}...{/gallery} и {gallery tmpl=tmplName}...{/gallery}, где tmpl - макет tmplName.php в plugins/content/wtcontentimagegallery/tmpl.
Что нового?
➕ Атрибуты alt и title из файла labels.txt.
Если Вы вставляете путь к директории с изображениями, то Вы можете указать для каждого изображения атрибуты alt и title в файле labels.txt, который следует положить в директорию рядом с изображениями. В конце строки символ | помещать не нужно.
Содержимое файла должно содержать информацию в следующем виде: имя_файла.webp | атрибут alt | атрибут title. Для каждого файла информация содержится в отдельной строке. Title для изображений можно не указывать, тогда строка будет вида image_2.webp|alt for image_2.
?? Joomla 5 ready
Успешно проверена работа расширения на Joomla 5.