198
Чат читателей @uxnotes · Редактор: @zGrav
Ищем продуктовых дизайнеров в команды Yandex Cloud и Yandex Infrastructure
Проводим Fast Track* 20–26 апреля — за это время можно пройти все собеседования и получить офер.
Ждём дизайнеров продукта с опытом от 3 лет. Идеально, если вы уже работали со сложными экосистемами, B2E- или SaaS-продуктами или участвовали в опенсорс-проектах.
Как всё устроено:
🟣до 17 апреля зарегистрируйтесь на мероприятие;
🟣до 19 апреля выполните тестовое задание;
🟣с 20 по 26 апреля пройдите вайтборд, познакомьтесь с командами и получите офер.
Приходите работать в окружении профессионалов, которые всегда поддержат, поделятся опытом и помогут вырасти в сложных и интересных проектах.
🔸 Переходите по ссылке, чтобы узнать подробности и зарегистрироваться: https://yandex.ru/project/events/ft_product_design_0426
Алекс написал о выборе формата даты для отображения в интерфейсе.
— Дату 06/05/17 люди из разных стран поймут по-разному;
— Это будет 6 мая 2017 года в европейском формате, 5 июня 2017 года в американском, 17 мая 2006 года в японском стандарте;
— Формат YYYY-MM-DD (ISO 8601) исключает двусмысленность и применяется в международных системах;
— Его можно использовать в базах данных, API и серверных логах, финансовых и бухгалтерских системах, где цена ошибки высока;
— Для интерфейсов подойдёт формат с сокращённым названием месяца: 1 Jan 2001 (1 янв 2001) — британский стиль, используемый в международном английском;
— Сокращённое название месяца удобнее полного за счёт более короткой записи и простоты локализации.
#writing #time
Иконки и изображения тоже стоит немного приглушить, могут быть слишком белые, слишком яркие. . Жирные шрифты делать чуть менее жирными для тёмной темы, потому что им контраст визуально добавляет немного веса.
Открыла статью почитать, глазам дискомфортно, слишком тёмный фон, переключатель на светлую тему отсутствует.
Дмитрий Сатин написал о недостатках тёмной темы.
— Исследования показали, что при 100% яркости тёмная тема на OLED-экране экономит заряд аккумулятора. Но при 30–50% (обычное значение для большинства пользователей) экономия незначительна;
— Чёрный текст на белом фоне люди читают быстрее и точнее, чем белый на чёрном. Чем меньше кегль, тем хуже работает тёмная тема;
— Исключение: яркий экран в тёмном окружении (в тёмной комнате) создаёт дискомфортный контраст;
— У людей с астигматизмом (30% населения) светлые буквы на тёмном фоне теряют чёткость, сливаются друг с другом;
— Сложнее считывать визуальную иерархию, так как сливаются границы блоков;
— Тонкие шрифты становятся слишком бледными, жирные — слишком тяжёлыми. Снижается контраст между цветами, включая ключевые цвета для индикации состояний: красный и зелёный;
— Отпечатки пальцев на экране, отражения и дневной свет делают тёмный интерфейс на улице слабочитаемым;
— Изменение тона цветов и снижение яркости влияют на восприятие бренда, сдвигают эмоциональное восприятие, что может разрушить целостность бренда;
— Включайте по умолчанию светлую тему, на видном месте расположите переключатель тем, добавьте автоматический режим, привязанный ко времени суток или системным настройкам;
— Тёмная тема требует отдельного раунда юзабилити-тестирования.
#dark_theme
Станислав Хрусталёв написал об интересных решениях в приложении Додо Пиццы.
— Количество калорий, белков, жиров и углеводов отображается на 100 г и на весь продукт — удобно, если съел весь продукт или половину;
— Если приборы не нужны, от них можно отказаться и сократить количество отходов;
— При выборе продукта он улетает в сторону корзины. Такая анимация подсказывает дальнейшее действие, а поскольку продуктов в корзину добавляют не десятками, она не приедается и не раздражает;
— Удалённый из корзины товар некоторое время продолжает в ней отображаться. Если удалили по ошибке, его не придётся снова искать в каталоге;
— При оформлении самовывоза сервис предлагает построить маршрут до пиццерии в одном из установленных на телефоне картографических сервисов;
— Если вы в пиццерии, через приложение можно сделать заказ с доставкой к столику — не надо идти к кассе;
— Стоит упомянуть: удаление ингредиентов, создание своей пиццы, пицца из половинок (и случайный выбор их сочетания), Live Activity, видеотрансляция приготовления пиццы на кухне, рассказ о том, почему готовят без перчаток (частый запрос).
#ecommerce
Хороший доклад. Однако не согласен с мнением, что "эмоциональный дизайн" – некорректное словосочетание. To design и the design – и глагол, и существительное. Высказывание Булата справедливо только для глагола. А когда подразумевается именно существительное, никакой проблемы нет – в этом виде дизайна упорядочиваются именно эмоции. И именно, чтобы они не оказались беспорядочными, их нужно проектировать. Не забывая проектировать и то, что к ним приводит.
Читать полностью…
Наконец-то кто-то это высказал! Тут однозначно лайк, потому что от великолепного "эмоционального" дизайна приложения альфа и втб возникают только злость, разочарование и прочие великолепные эмоциии. Уже жду недождусь когда культ эмоционального дизайна признают неэффективным и снова приложения начнут целиться в удобство пользователя и его потребности.
Читать полностью…
Самый странный сценарий регистрации:
- идёшь в бота, бот отправляет на сайт где заполняешь форму, сайт кидает обратно в бота, бот ничего не может, так как связи с сайтом через ник телеги у него нет, приходит письмо с подтверждением, ссылка на другой сайт, где чтобы добавить ссылку в календарь нужно скачать файл для календаря, а потом бот пишет "Кажется вы про меня забыли". Я так вообще забыл зачем пришёл.
Новые материалы в @uxwork (кроме вакансий):
— Как опытный руководитель проектов в крупной компании видит текущую ситуацию с наймом на IT-рынке;
— Актуальные требования к продуктовым дизайнерам в бигтехе и компаниях поменьше (на основе анализа 100 вакансий);
— Как распределять задачи на день, чтобы снизить когнитивную нагрузку.
Алиса Колядова поделилась мыслями о проектировании таблиц.
— Представляйте повторяющиеся данные в виде таблицы, когда пользователю надо сравнивать строки, работать с их множеством, редактировать данные (в том числе массово), фильтровать и искать по структуре, когда важна плотность данных;
— Либо если пользователи для решения конкретной задачи привыкли работать с таблицей;
— В остальных случаях подойдут списки и карточки;
— Если в таблице много столбцов, будет сложно обрабатывать столько параметров. Возможно, большую таблицу можно разделить на несколько небольших с параметрами, нужными для решения конкретной задачи;
— Например, таблица для распределения заявок и таблица для контроля их выполнения. У первой не будет фильтров, а у второй строки будут подкрашиваться в зависимости от статуса;
— Рекомендацию объединять связанные данные в одной ячейке можно встретить в разных гайдлайнах, например, у «Контура»;
— Но это ломает визуальный ритм, снижает плотность таблицы, усложняет сравнение и поиск нужных данных. В небольших таблицах это может сработать, в длинных рабочих таблицах — нет;
— Если появляется горизонтальный скрол, можно слева закрепить первый столбец (который даст контекст остальным данным), а справа — важные показатели и действия;
— Но важно подробно описать поведение таблицы, так как здесь большое поле для трактовок со стороны разработчиков.
#table
На десктопе мусорка там в правом верхнем углу карточки товара, рядом с ценой. А что будет, если нажать на минус при количестве «1» на десктопе?
Читать полностью…
Ну то есть в ВБ сделано так же, как Бирман рекомендовал
Читать полностью…
Озон: нажатие на минус и корзину (но тут ненавистные ИБ диалоги)
ВБ: дизейбл минуса+undo
Доводить до крайности
#совет
Хорошая привычка — проверять строки с числовыми переменными на крайних значениях.
Допустим, вы хотите показать пользователю какой-то интересный факт о нём:
Вот это марафон! Вы пробежали N за месяц
Ребята, а какие есть советы по отображению разных диаграмм на мобилке? Например бар чарты, где с десяток столбиков, что-то вот такое, подробное
Читать полностью…
Тёмные паттерны (микрокрестик) на странице темная сторона dark mode 😏
Самый большой фэйл темной темы это бесплатная ее поддержка, выгода сомнительна, не посчитать, а работы местами x2, + бесконечная подписка на отлов багов и расхождений в цветах 🤷♂️
Хотелось бы, чтобы с перчатками было всё по-честному, без лишних драм.
Читать полностью…
Шабашечка!!
От 12.000 р на руки
Могу помочь с расходами
От 17 лет
Пишите мне @NurekeMn
Попытки обсыпать дизайн эмоциями «лишь бы было» и правда часто выглядят натужно, и наоборот, это хорошо работает, если вшито в бренд, как тут и говорится)
Читать полностью…
или проще — уместно добавлять эмоции, чтоб не вышло кринжа 🙂
но вообще кажется цифровой дизайн не может быть просто сухим — это вычеркивает человеческое, так как мы не можем передать на расстоянии свои переживания и их нужно уметь до юзера донести
Булат Хазимуратов покритиковал эмоциональный дизайн.
— Его считают высшей ступенью в пирамиде дизайна, но до сих пор нет методики его создания. Дизайнеры просто добавляют анимации, эффекты, выразительную графику, маскотов, игры и приколы;
— Любой дизайн вызывает эмоции. Не все они яркие и позитивные. Бывают негативные, нейтральные, сложные;
— Не только дизайн продукта их вызывает, но и, например, поведение сотрудника компании;
— Чтобы порадовать пользователя, дополнительные выразительные приёмы не обязательны;
— Дон Норман ввёл термин в книге «Эмоциональный дизайн». Он писал, что дизайн — это и функциональность, и удобство объекта, и эмоции, которые он вызывает у человека;
— Он не предлагал проектировать эмоции, веселить пользователей специальными выразительными приёмами, делать интерфейс дружелюбнее;
— Он предлагал понимать и учитывать эмоции при проектировании, не ограничиваться рациональностью и эргономикой (обычное дело для 90-х, когда вышла его книга);
— Человек воспринимает взаимодействие на интуитивном уровне (нравится ли то, что видит), поведенческом (насколько удобен и приятен процесс), рефлексивном (правильный ли это выбор, насколько мне подходит) → столпы дизайна: эстетика, эргономика, психология;
— Эмоции — субъективное переживание отношения человека к окружающему миру и себе. Они основываются на опыте и помогают понимать, как действовать;
— Выделяют эмоциональные процессы (по мере увеличения их длительности): аффект, эмоция, чувство, настроение. Дизайнерские приёмы обычно вызывают аффекты, но не что-то более длительное;
— Базовые эмоции по Плутчику: восторг, восхищение, ужас, изумление, гнев, отвращение, горе, настороженность. Есть градации (гнев → злость → досада) и промежуточные эмоции (гнев и отвращение → презрение);
— Аарон Уолтер предложил пирамиду потребностей пользователя: функционально → надёжно → удобно → эмоционально. Но у нас нет потребности в эмоциях, мы испытываем их на каждой ступени пирамиды;
— Эмоции можно разделить по потребностям. Например, есть акизитивные эмоции, связанные с потребностью в накоплении и собирательстве. Чем пытаться вызывать эмоции, лучше делать продукты, удовлетворяющие порой неочевидные потребности, не перечисленные в пирамиде Маслоу;
— Планировать нам помогает информационно-речевая картина мира, формирующаяся с опытом. Цифровые продукты упрощают эту картину: с кредитным калькулятором можно не вникать в условия и формулы. Резкие редизайны разрушают часть картины, вызывают стресс. Небольшой объём новой информации вызывает интерес;
— Чтобы лучше разбираться в эмоциях, изучайте работу влияющих на их формирование нейромедиаторов;
— Идея делать продукты понятнее, отзывчивее, человечнее не нова. Потребности в стабильности, эстетике, новой информации, смысле свойственны людям;
— Есть компании, продукты которых часто приводят в качестве примера эмоционального дизайна. Это восприятие строится не на дизайне продуктов, а на культуре и бренде компаний. Дизайн им соответствует. Причём культура и бренд проникают не только в интерфейс, но и в остальные процессы на уровне корпоративной культуры;
— У Додо получается эмоциональный дизайн, так как в основе лежит бренд с прописанной бренд-платформой. Можно описать бренд как человека с ценностями, характером и убеждениями, прописать контекст пользователей, характеристики целевой аудитории и чем компания отличается от конкурентов;
— Эмоции — не цель, а следствие хорошего проектирования. Они возникают из согласованности бренда и поведения компании. Интерфейс не может этого создать — только поддержать. Ориентируйтесь не на эффекты, а на чувства.
7 апреля в 19:00 по Москве команда UX Feedback проведёт вебинар о том, как превращать хорошие исследования в качественные улучшения продукта.
— Даже если вы провели хорошее исследование, сломанный последующий процесс может всё испортить;
— Пользовательские нужды подменяются хотелками, сильные инсайты теряются, вместо точечных изменений в работу уходят большие инициативы;
— Вебинар будет полезен UX-исследователям, продуктовым дизайнерам и всем, кто работает с пользовательским фидбеком;
— Эксперты UX Feedback Арслан Разыков (сооснователь, более 10 лет в продукте) и Вика Макеева (менеджер продукта) разберут свой и клиентский опыт;
— На вебинаре вы узнаете, где между первым фидбеком и релизом чаще всего теряется сигнал;
— Почему не всегда нужно делать то, что просит пользователь;
— Как отличить хотелки от реальных пользовательских проблем;
— Почему маленькие итерации часто дают больше результата, чем большие проекты;
— Как сделать, чтобы исследования и обратная связь не просто копились в артефактах, а влияли на продукт.
👉 Регистрация
Реклама ООО «Фидбек», ИНН 5030094661, erid 2VtzqvtuRTj
В Фигме появились слоты.
— Это области в компонентах, позволяющие вставить любое содержимое в инстансы этих компонентов;
— Они упрощают компоненты со списками элементов внутри вроде аккордеонов, меню и дропдаунов. В них можно размещать любое количество элементов (не надо заранее закладывать какой-то максимум) и легко менять их порядок;
— Проще работать с компонентами с высокой вариативностью содержимого. В компоненте карточки можно задать стиль подложки и заголовка, расположение контролов, а её содержимое — добавлять через слот;
— Алексей Бычков записал видео о слотах;
— В блоге Фигмы [English] также предлагают использовать их для работы с лейаутом страниц: фиксировать в компоненте меню, хедер и футер, а содержимым конкретной страницы управлять через слот;
— Забавно, что они противопоставляют слоты детачу или созданию сложных многовариантных компонентов. Раньше такую же задачу решали добавлением dummy-компонентов и их свапом в инстансах на локальные компоненты с нужным контентом. Но со слотами, конечно, удобнее;
— Консультант по дизайн-системам Нейтан Кёртис написал, nathanacurtis/implementing-slots-in-a-figma-library-a9d6185318c2">как внедрять слоты в библиотеку компонентов [English];
— Как понять, где слоты будут полезны, какие компоненты снабжать слотами первыми (где чаще всего детач), какие настройки применять (без контента, с контентом, списком предпочитаемых компонентов и без него);
— Правила лейаута слотов: не задавать цвет, обводку, скругление углов, паддинги. Паддинги лучше задавать в контейнерах, в которых будут располагаться слоты. Слот должен отвечать за лейаут, направление, отступы между элементами и изменение размеров.
#figma #design_system
В мобильном приложении DNS сделано так, как Илья не рекомендует делать. Сделано хорошо. Не понимаю, на какой конкретно опыт опирается Илья, давая рекомендацию, поэтому буду считать её просто личным мнением.
При этом на десктопе в DNS сделано уже без мусорки.
А кто-нибудь читал новую книжку Арутюнова и компании "Это красиво, а это нет"? Стоит того?
Читать полностью…
Если минус не может вернуть товар, добавь ему дискейбл
Читать полностью…