Дизайн

Биология клипового мышления: почему 400 мс решают всё

Исследования MIT (2023) доказали: мозг принимает решение "смотреть/не смотреть" за 400-800 мс. Это результат эволюции — наши предки оценивали опасность за доли секунды.

Как мы спасали кружки от гибели (и что из этого вышло)

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

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

Дальше немного про производство современной керамики, кофе и даже Space X

Всем привет! В этой статье мы разберем одну из важнейших тем при разработке любого веб‑сайта — доступность.

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

Для чего же нам нужно работать над доступностью? Ответ напрашивается сам собой – расширение аудитории и привлечение новых клиентов (если вы оказываете услуги). По данным AccessiCart, при улучшенной доступности мы увеличиваем потенциальную аудиторию до 25%. (Ссылка на статью)

Помимо расширения аудитории, улучшение доступности положительно влияет на органический трафик (переходы на сайт из поисковых систем). Исследование, проведенное Semrush, показало, что 73,4% сайтов, внедривших решения по доступности, зафиксировали рост органического трафика, при этом 66,1% из них отметили увеличение трафика от 1% до 50%. (Ссылка на статью)

Здесь мы рассмотрим как улучшить доступность с двух сторон: оптимизации и взаимодействия с контентом. Добиться этого можно с помощью самых базовых технологий разработки: HTML & CSS & JS.

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

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

Эта статья - своеобразный мини-гайд для быстрого старта вместе с Cypress и axe-core. 

Почему такое сочетание технологий? 

Axe-core - это надежный движок, соответствует стандартам WCAG. Он проверяет действительно реальные проблемы: контраст, aria-label, роли, альтернативный текст. Его легко интегрировать.

Cypress - удобный фреймворк, с огромным количеством функций “из коробки”. Легкая установка, большое количество примеров. Сохраняет скриншоты, делает запись видео, идеален для пользовательских тестов.

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

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

Продолжаю изучать различные UI/UX/CX кейсы в мобильных приложениях, веб-сайтах и в реальном мире. Дизайнерам и менеджерам по продукту, чтобы вдохновиться и добавить в заметки.

Под катом: Кухня на районе, Дзен, Google, Яндекс.Еда.

В этой статье я покажу как можно самому, бесплатно и без смс, нарисовать черную дыру при помощи OpenGL, в полном соответствии с ОТО.

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

Однажды инопланетяне найдут в нашей мусорной куче странно выглядящее устройство на хромированной подставке с надписью PANASONIC TR-005  и будут уверены, что мы пытались с ними связаться. На самом деле TR-005 — это телевизор из 1960-х годов. Сферическое «глазное яблоко» с 5-дюймовым экраном, сошедшее со страниц научной фантастики, заставляет задаться вопросом: как мы докатились от такого буйства форм до безликих черных прямоугольников, висящих сегодня на наших стенах?

Ироничная судьба TR-005 — оказаться одновременно «космическим кораблем» прошлого и музейным экспонатом настоящего — идеально символизирует трансформацию дизайна за последние полвека. Перенесите его в типичную квартиру, и он будет выглядеть как инопланетный артефакт, который археологи будущего откопают в наших культурных слоях и ошибочно классифицируют как «ритуальный объект неизвестного назначения». 

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

Привет! Меня зовут Ирина Белова, я представляю группу UX-специалистов в группе компаний «Цифра». Наше зарождающееся направление занимается анализом пользовательского опыта и разработкой решений, направленных в первую очередь на оптимизацию процессов и повышение эффективности высоконагруженных сервисов.

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

Я, Виталий Зданевич, работал в минском Нивале в 2010 году (занимался производством видео для игр), и сидел я в комнате с художниками, рисовавшими Prime World. Они были прекрасные люди, старались, иногда работали и по выходным. Каждую пятницу они играли в игру которую делали. Я в Prime World так и не поиграл, когда Нивал еще занимался им. Популярность проекта падала - возможно на фоне зубастых конкурентов, и в 2021 году сервер выключили, спустя десять лет жизни, а ведь остались преданные игроки, которые запускали клиент - и смотрели в ошибку подключения. Обычная история, таких много - компания делает игру, пытается заработать на ней - продажи не очень - abandon it. Жаль труда людей. Потом компания занята производством следующей игры, которая, возможно, через 20 лет окажется там же. Мы живём в горящей библиотеке - мы постепенно теряем книги, фильмы, музыку, старые газеты, игры. Отсканировано около 1% всех печатных материалов.

В статье рассказывается, почему короткие игры — это не просто компромисс для занятых людей, а полноценный формат. Такие игры можно пройти за вечер, но это не делает их менее глубокими. Напротив, они дают чувство завершённости, создают пространство для размышлений и часто оказываются более личными и трогательными, чем большие проекты. Мы разбираем, как малая форма помогает экспериментировать, говорить о важных темах и быть ближе к игроку. В примерах — Venba, Norco, Before Your Eyes, Bird Alone и другие короткие, но запоминающиеся игры.

Это честный разбор того, как мы переехали в Pixso, прожили там 7 месяцев, изрядно выгорели, изобрели костыли, обросли хаками и в итоге вернулись в Figma с новыми знаниями, но подуставшими глазами. Если вы тоже задумываетесь о смене платформы — читайте, чтобы не повторять наши ошибки.

Привет! Меня зовут Егор Стремоусов, я тимлид команды продуктовых дизайнеров платформы TWork Обслуживания в Т-Банке. Расскажу, как моя команда повысила предсказуемость поставки дизайн-задач, какие методы и инструменты мы для этого использовали.

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

Сколько разных значений вы можете ввести нажатием одной клавиши? Так, на клавиатуре 33 клавиши в буквенном блоке, 13 в цифровом ряду, получается 46. А двумя нажатиями? Выходит 46×46, и ещё 46 – те же клавиши с Shift. Всего чуть больше двух тысяч, и это просто случайные сочетания букв, цифр и пунктуации.

Что если правильные ответы – сотни для одного нажатия, и десятки тысяч для двух? Это далеко не предел. И эти значения – не случайные пары символов, а кнопка "мой рабочий емейл" или "текущая дата", символы осо́бой пунктуации, специфичные языковые символы, кнопка для перевода с транслита, исправления регистра, запуска приложения, и даже "включить музыку через 20 минут" или "прогноз погоды". И для этого вам не нужно учить наизусть таблицу юникод или хитрые сочетания. Вы сами определяете, что и где будет находиться, никак не меняя базовую функциональность.

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

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

Ванночку (грань, где плёнка натягивается на основание) нужно выполировывать и удалять слой краски, но самой важной частью будет выставление зазора между плёнкой и экраном. Оно должно быть 0.2-0.3 мм. Дело в том, что отрицательное давление при подъёме платформы (особенно на первых слоях) создаётся в промежутке между ними. И при малейшей течи в плёнке туда будет засасывать смолу (у меня подозрение что даже в виде аэрозоля), на фото видны микро следы от затянутого в щели полимера по краю защитной плёнки. Экран был в идеале, несколько капель на периферии ванны (там где натягивается плёнка) не могли такого сделать. Поэтому любители печатать максимально близко к экрану (без защитной плёнки) сильно рискуют, без каких-либо выгод. У меня платформа надавив на такие артефакты выбила несколько линий в экране.

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

Разбираем как проектировать MES-систему, чтобы она была удобной в эксплуатации.

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

Всё это указывает на одно: цвет исчезает из нашего мира.

Воспоминания постановщика об истоках дизайна героини и её смартгана.

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

«Согласен со всеми условиями» — фраза, которую пользователи читают так же внимательно, как и предупреждения об астероидах в «Звёздных войнах». А ведь именно здесь начинается путь к тёмной стороне UX.  

Вы замечали, как:  

• Кнопка «Продолжить без подписки» спрятана полупрозрачным шрифтом?  

• Оформление заказа требует «всего три шага», но на деле превращается в квест?  

• Отписаться от рассылки сложнее, чем собрать световой меч?  

Это не баги. Это тёмные паттерны — дизайн-решения, манипулирующие пользователем. И да, они работают… пока не сожгут репутацию. Как остаться джедаем UX и не поддаться искушению? Давайте разбираться.