Таня Двенадцатова написала о прожарке.

— Она помогает улучшать разрабатываемые фичи и синхронизировать команды. Она похожа на совместное проектирование;
— Это еженедельная встреча на 1–1,5 часа. Лучше выбрать время в начале дня, когда все ещё свежи (самое то для креативных и аналитических задач);
— Докладчики записываются заранее: указывают, какую задачу решали, и добавляют ссылку на артефакт;
— На встрече они презентуют своё решение и отвечают на вопросы и критические замечания зрителей (обычно выстраивается очередь из поднявших руки);
— Вопросы и комментарии лучше не добавлять заранее. Так и комментирующие не тратят на это много времени, и дискуссия получается более живой;
— Обычно участвуют дизайнеры, исследователи, продакты и UX-редакторы, но заглядывают и представители бизнеса, методологи, маркетологи;
— Полезно фиксировать, о чём договорились во время прожарки, чтобы потом учесть это при доработке фичи;
— Участие в прожарке (и необходимость успешно её пройти) можно сделать обязательным шагом в процессе. Для прохождения прожарки может потребоваться несколько итераций;
— По отдельным фичам (незначительное влияние на клиентский путь, регуляторка) можно ограничиться прожаркой и не проводить пользовательское исследование, если зрителям всё было понятно;
— Важно донести, что это не повинность, а полезный процесс. Также это маркер атмосферы и культуры в коллективе.

#design_check

Станислав Хрусталёв написал об интересных решениях ВкусВилла в списке товаров и корзине.

— Если товар закончился, но запланирована поставка, отображается кнопка «Доставить завтра». Полезно, если клиент готов подождать;
— Если информации о поставке нет, отображается кнопка «Привозите больше». Так можно оценить потенциальный спрос;
— При нажатии на неё появляется список аналогов, которые можно сразу добавить в корзину. Это повышает вероятность, что клиент выберет что-то взамен;
— Остатки товара, особенно если осталось мало, побуждают не отвлекаться от заказа;
— Выбрать количество товаров можно с помощью степпера (если надо изменить значение чуть-чуть), барабана (если значение через степпер выбирать долго), а если нужно нецелое число, есть текстовый ввод;
— Можно добавить комментарий сборщику;
— Если заказ будет получать кто-то другой, можно не только ввести его номер (или выбрать из списка контактов), но и узнать, как пройдёт дальнейшая коммуникация с получателем.

#cart #list #ecommerce

Настройка количества товаров с мусоркой

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

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

Но вообще-то хорошо бы, чтобы при уменьшении количества до нуля, товар не удалялся сразу: у пользователя должно быть право на ошибку и возможность вернуть товар обратно. Если же удаление товара неотменяемое, то превращение минуса в мусорку не поможет предотвратить ошибку; тогда надо дисейблить минус, а кнопку удаления ставить отдельно. Что касается остроумности, то это только в голове дизайнера мусорка — частный случай минуса для одного значения, но для пользователя изначально никакого минуса нет, а есть лишь эта мусорка, ведь обычно количество будет «1 шт.».

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

Алиса Колядова поделилась мыслями о проектировании таблиц.

— Представляйте повторяющиеся данные в виде таблицы, когда пользователю надо сравнивать строки, работать с их множеством, редактировать данные (в том числе массово), фильтровать и искать по структуре, когда важна плотность данных;
— Либо если пользователи для решения конкретной задачи привыкли работать с таблицей;
— В остальных случаях подойдут списки и карточки;
— Если в таблице много столбцов, будет сложно обрабатывать столько параметров. Возможно, большую таблицу можно разделить на несколько небольших с параметрами, нужными для решения конкретной задачи;
— Например, таблица для распределения заявок и таблица для контроля их выполнения. У первой не будет фильтров, а у второй строки будут подкрашиваться в зависимости от статуса;
— Рекомендацию объединять связанные данные в одной ячейке можно встретить в разных гайдлайнах, например, у «Контура»;
— Но это ломает визуальный ритм, снижает плотность таблицы, усложняет сравнение и поиск нужных данных. В небольших таблицах это может сработать, в длинных рабочих таблицах — нет;
— Если появляется горизонтальный скрол, можно слева закрепить первый столбец (который даст контекст остальным данным), а справа — важные показатели и действия;
— Но важно подробно описать поведение таблицы, так как здесь большое поле для трактовок со стороны разработчиков.

#table

В Фигме появились слоты.

— Это области в компонентах, позволяющие вставить любое содержимое в инстансы этих компонентов;
— Они упрощают компоненты со списками элементов внутри вроде аккордеонов, меню и дропдаунов. В них можно размещать любое количество элементов (не надо заранее закладывать какой-то максимум) и легко менять их порядок;
— Проще работать с компонентами с высокой вариативностью содержимого. В компоненте карточки можно задать стиль подложки и заголовка, расположение контролов, а её содержимое — добавлять через слот;
— Алексей Бычков записал видео о слотах;
— В блоге Фигмы [English] также предлагают использовать их для работы с лейаутом страниц: фиксировать в компоненте меню, хедер и футер, а содержимым конкретной страницы управлять через слот;
— Забавно, что они противопоставляют слоты детачу или созданию сложных многовариантных компонентов. Раньше такую же задачу решали добавлением dummy-компонентов и их свапом в инстансах на локальные компоненты с нужным контентом. Но со слотами, конечно, удобнее;
— Консультант по дизайн-системам Нейтан Кёртис написал, как внедрять слоты в библиотеку компонентов [English];
— Как понять, где слоты будут полезны, какие компоненты снабжать слотами первыми (где чаще всего детач), какие настройки применять (без контента, с контентом, списком предпочитаемых компонентов и без него);
— Правила лейаута слотов: не задавать цвет, обводку, скругление углов, паддинги. Паддинги лучше задавать в контейнерах, в которых будут располагаться слоты. Слот должен отвечать за лейаут, направление, отступы между элементами и изменение размеров.

#figma #design_system

Новые материалы в @uxwork (кроме вакансий):

— Как опытный руководитель проектов в крупной компании видит текущую ситуацию с наймом на IT-рынке;
— Актуальные требования к продуктовым дизайнерам в бигтехе и компаниях поменьше (на основе анализа 100 вакансий);
— Как распределять задачи на день, чтобы снизить когнитивную нагрузку.

7 апреля в 19:00 по Москве команда UX Feedback проведёт вебинар о том, как превращать хорошие исследования в качественные улучшения продукта.

— Даже если вы провели хорошее исследование, сломанный последующий процесс может всё испортить;
— Пользовательские нужды подменяются хотелками, сильные инсайты теряются, вместо точечных изменений в работу уходят большие инициативы;
— Вебинар будет полезен UX-исследователям, продуктовым дизайнерам и всем, кто работает с пользовательским фидбеком;
— Эксперты UX Feedback Арслан Разыков (сооснователь, более 10 лет в продукте) и Вика Макеева (менеджер продукта) разберут свой и клиентский опыт;
— На вебинаре вы узнаете, где между первым фидбеком и релизом чаще всего теряется сигнал;
— Почему не всегда нужно делать то, что просит пользователь;
— Как отличить хотелки от реальных пользовательских проблем;
— Почему маленькие итерации часто дают больше результата, чем большие проекты;
— Как сделать, чтобы исследования и обратная связь не просто копились в артефактах, а влияли на продукт.

👉 Регистрация

Реклама ООО «Фидбек», ИНН 5030094661, erid 2VtzqvtuRTj

Булат Хазимуратов покритиковал эмоциональный дизайн.

— Его считают высшей ступенью в пирамиде дизайна, но до сих пор нет методики его создания. Дизайнеры просто добавляют анимации, эффекты, выразительную графику, маскотов, игры и приколы;
— Любой дизайн вызывает эмоции. Не все они яркие и позитивные. Бывают негативные, нейтральные, сложные;
— Не только дизайн продукта их вызывает, но и, например, поведение сотрудника компании;
— Чтобы порадовать пользователя, дополнительные выразительные приёмы не обязательны;
— Дон Норман ввёл термин в книге «Эмоциональный дизайн». Он писал, что дизайн — это и функциональность, и удобство объекта, и эмоции, которые он вызывает у человека;
— Он не предлагал проектировать эмоции, веселить пользователей специальными выразительными приёмами, делать интерфейс дружелюбнее;
— Он предлагал понимать и учитывать эмоции при проектировании, не ограничиваться рациональностью и эргономикой (обычное дело для 90-х, когда вышла его книга);
— Человек воспринимает взаимодействие на интуитивном уровне (нравится ли то, что видит), поведенческом (насколько удобен и приятен процесс), рефлексивном (правильный ли это выбор, насколько мне подходит) → столпы дизайна: эстетика, эргономика, психология;
— Эмоции — субъективное переживание отношения человека к окружающему миру и себе. Они основываются на опыте и помогают понимать, как действовать;
— Выделяют эмоциональные процессы (по мере увеличения их длительности): аффект, эмоция, чувство, настроение. Дизайнерские приёмы обычно вызывают аффекты, но не что-то более длительное;
— Базовые эмоции по Плутчику: восторг, восхищение, ужас, изумление, гнев, отвращение, горе, настороженность. Есть градации (гнев → злость → досада) и промежуточные эмоции (гнев и отвращение → презрение);
— Аарон Уолтер предложил пирамиду потребностей пользователя: функционально → надёжно → удобно → эмоционально. Но у нас нет потребности в эмоциях, мы испытываем их на каждой ступени пирамиды;
— Эмоции можно разделить по потребностям. Например, есть акизитивные эмоции, связанные с потребностью в накоплении и собирательстве. Чем пытаться вызывать эмоции, лучше делать продукты, удовлетворяющие порой неочевидные потребности, не перечисленные в пирамиде Маслоу;
— Планировать нам помогает информационно-речевая картина мира, формирующаяся с опытом. Цифровые продукты упрощают эту картину: с кредитным калькулятором можно не вникать в условия и формулы. Резкие редизайны разрушают часть картины, вызывают стресс. Небольшой объём новой информации вызывает интерес;
— Чтобы лучше разбираться в эмоциях, изучайте работу влияющих на их формирование нейромедиаторов;
— Идея делать продукты понятнее, отзывчивее, человечнее не нова. Потребности в стабильности, эстетике, новой информации, смысле свойственны людям;
— Есть компании, продукты которых часто приводят в качестве примера эмоционального дизайна. Это восприятие строится не на дизайне продуктов, а на культуре и бренде компаний. Дизайн им соответствует. Причём культура и бренд проникают не только в интерфейс, но и в остальные процессы на уровне корпоративной культуры;
— У Додо получается эмоциональный дизайн, так как в основе лежит бренд с прописанной бренд-платформой. Можно описать бренд как человека с ценностями, характером и убеждениями, прописать контекст пользователей, характеристики целевой аудитории и чем компания отличается от конкурентов;
— Эмоции — не цель, а следствие хорошего проектирования. Они возникают из согласованности бренда и поведения компании. Интерфейс не может этого создать — только поддержать. Ориентируйтесь не на эффекты, а на чувства.

Станислав Хрусталёв написал об интересных решениях в приложении Додо Пиццы.

— Количество калорий, белков, жиров и углеводов отображается на 100 г и на весь продукт — удобно, если съел весь продукт или половину;
— Если приборы не нужны, от них можно отказаться и сократить количество отходов;
— При выборе продукта он улетает в сторону корзины. Такая анимация подсказывает дальнейшее действие, а поскольку продуктов в корзину добавляют не десятками, она не приедается и не раздражает;
— Удалённый из корзины товар некоторое время продолжает в ней отображаться. Если удалили по ошибке, его не придётся снова искать в каталоге;
— При оформлении самовывоза сервис предлагает построить маршрут до пиццерии в одном из установленных на телефоне картографических сервисов;
— Если вы в пиццерии, через приложение можно сделать заказ с доставкой к столику — не надо идти к кассе;
— Стоит упомянуть: удаление ингредиентов, создание своей пиццы, пицца из половинок (и случайный выбор их сочетания), Live Activity, видеотрансляция приготовления пиццы на кухне, рассказ о том, почему готовят без перчаток (частый запрос).

#ecommerce

Дмитрий Сатин написал о недостатках тёмной темы.

— Исследования показали, что при 100% яркости тёмная тема на OLED-экране экономит заряд аккумулятора. Но при 30–50% (обычное значение для большинства пользователей) экономия незначительна;
— Чёрный текст на белом фоне люди читают быстрее и точнее, чем белый на чёрном. Чем меньше кегль, тем хуже работает тёмная тема;
— Исключение: яркий экран в тёмном окружении (в тёмной комнате) создаёт дискомфортный контраст;
— У людей с астигматизмом (30% населения) светлые буквы на тёмном фоне теряют чёткость, сливаются друг с другом;
— Сложнее считывать визуальную иерархию, так как сливаются границы блоков;
— Тонкие шрифты становятся слишком бледными, жирные — слишком тяжёлыми. Снижается контраст между цветами, включая ключевые цвета для индикации состояний: красный и зелёный;
— Отпечатки пальцев на экране, отражения и дневной свет делают тёмный интерфейс на улице слабочитаемым;
— Изменение тона цветов и снижение яркости влияют на восприятие бренда, сдвигают эмоциональное восприятие, что может разрушить целостность бренда;
— Включайте по умолчанию светлую тему, на видном месте расположите переключатель тем, добавьте автоматический режим, привязанный ко времени суток или системным настройкам;
— Тёмная тема требует отдельного раунда юзабилити-тестирования.

#dark_theme

Алекс написал о выборе формата даты для отображения в интерфейсе.

— Дату 06/05/17 люди из разных стран поймут по-разному;
— Это будет 6 мая 2017 года в европейском формате, 5 июня 2017 года в американском, 17 мая 2006 года в японском стандарте;
— Формат YYYY-MM-DD (ISO 8601) исключает двусмысленность и применяется в международных системах;
— Его можно использовать в базах данных, API и серверных логах, финансовых и бухгалтерских системах, где цена ошибки высока;
— Для интерфейсов подойдёт формат с сокращённым названием месяца: 1 Jan 2001 (1 янв 2001) — британский стиль, используемый в международном английском;
— Сокращённое название месяца удобнее полного за счёт более короткой записи и простоты локализации.

#writing #time

Гайд по SVG-фильтрам: начало работы с основами. Ана Тудор разбирает фундаментальные основы SVG-фильтров: настройку элементов <svg> и <filter>, области действия фильтров, подобласти примитивов и цветовую интерполяцию. Гайд объясняет, как примитивы объединяются в цепочки, когда использовать атрибуты result, in и in2, а также разницу между filterUnits и primitiveUnits для адаптивных эффектов. #svg #filter

https://frontendmasters.com/blog/svg-filters-guide-getting-started-with-the-basics/

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

🌍 Сайт

Daily Coding #инструменты #Python

🧰 3D illustrations pack — коллекция из 40 атмосферных 3D-иллюстраций

Dezzigners

Как возникла HCI? «В начале была командная строка...»

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

Американский писатель-фантаст Нил Стивенсон, автор популярных романов «Криптономикон» и «Анафем», внезапно написал настоящее философское эссе о интерфейсе, людях и их предпочтениях, и корпоративной/коллективной политике, сравнивая решения Microsoft, Apple и независимых разработчиков свободно распространяемого ПО. Эссе было написано аж в 1999 году и опередило свое время. Стивенсон был инженером по образованию и, конечно, понимал о графических интерфейсах несколько больше, чем другие его современники из числа писателей.

In the Beginning... Was the Command Line

Он сравнивает операционные системы своего времени с автомобилями: Mac OS от Apple Computer с роскошным европейским автомобилем, Windows от Microsoft с универсалом, Linux с настоящим военным танком(Debian вроде) и BeOS с бэтмобилем.

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

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

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

Почитать эссе можно по ссылке: https://royallib.com/read/stivenson_nil/v_nachale_bila_komandnaya_stroka.html#0

Айдентика магазина оливкового масла и макаронных изделий премиум-класса Buono!

Магазин находится в Будапеште под управлением итало-венгерского торговца из Терамо

В основе стиля — мягкие природные оттенки, псевдовинтажная типографика и линейные иллюстрации, вдохновлённые символикой потолка старинной церкви Сан-Донато в итальянском регионе Абруццо

#awd_identity via behance.net/gallery/115556427/BUONO