198
Чат читателей @uxnotes · Редактор: @zGrav
Да удалось, но в будущем, хотелось бы отказаться от on grey :)
Читать полностью…
Можно сделать и на сером контрастно (формально), только будут свои момент, цвета будут менее «цветастые» более по б2б шному, поддерживать придется и для белого и для серого. Тут уж вопрос дизайн гильдии, какой сформулировали дизайн-язык
Читать полностью…
когда-то на одном тестовом (не Туту) мне сказали, что данные и тексты на сером фоне нини делать, а то неконтрастно) поскольку всегда черный текст на белом фоне вроде считался, наоборот, избыточно контрастным, меня этот пункт смутил.
в итоге, норм серые фоны для интерфейсных решений сработали?)
Вам лучше сходить на Хабр и эти вопросы в комментариях задать, не факт, что автор статьи их здесь увидит
Читать полностью…
Из-за того что дизайнеры не смогли сформулировать дизайн-язык общий, мы дали свободу, решение принимает дизайнер, мы дали инструмент)
Читать полностью…
А как объяснить дизайнерам что использовать? on white или on gray? Звучит как будто не договорились о едином подходе, и сделали два на выбор чтобы и тому и тому дизайнеру угодить. М?
Читать полностью…
Хм. Ну вообще есть немного. По задумке автора это должны были быть «вредные советы», что видимо надо быть Остером, чтобы писать вредные советы без примечи пассивной агрессии
Читать полностью…
статью читать невозможно из-за стиля автора и его пассивной (активной) агрессии. таким экспертам не доверяем
Читать полностью…
Добрый день. Напишите пожалуйста в личку кто может на постоянку для веб-студии макеты в Figma/PS отрисовывать? Без верстки, отдельно есть верстальщики. Под WP и самопис, по 3-4 проекта в месяц, в основном по лендингам сфера услуг (логистика и т.д.), пришлите портфолио
Читать полностью…
Дмитрий Сергушкин написал, как сделать таблицы удобнее.
— Америку статья вам не откроет, но Дмитрий написал, как каждая рекомендация поможет повысить производительность, сделать таблицу яснее, учесть персональные потребности пользователя и так далее;
— Можно подобрать лучшие практики, например, по персонализации. Из недавней статьи мы узнали, как это важно для таблиц, используемых в цехах;
— Если есть поиск для быстрого доступа к данным, показывайте последние пользовательские запросы. Это упростит работу с повторяющимися задачами;
— Регулировка ширины столбца (включая изменение под ширину его содержимого двойным кликом) позволит подстроиться под содержащиеся в таблице данные и текущие потребности пользователя;
— Если есть фильтры, позволяйте сохранять их комбинации для повторного использования;
— Давайте возможность закрепить нужные пользователю столбцы и строки, чтобы они всегда были видны при прокрутке таблицы, а также скрыть ненужные столбцы;
— Сохранение настроек отображения и переключение между ними тоже может быть полезным;
— Если есть функция экспорта, давайте экспортировать отфильтрованные данные и выбрать для экспорта конкретные столбцы.
In English. #table
Первый пример про видео и фейсбук. Если я всё правильно понимаю, у фейсбука на тот момент фокус в разработке своих ии решений был именно на анализе видео, а чтобы это обучать, нужно было много контента. Ну они и согнали всех делать именно видеоконтент
Читать полностью…
Не факт, что Светлана читает здесь комментарии. Я рекомендую спросить в комментариях к её статье на Хабре
Читать полностью…
как раз про это речь, да, я так понимаю для интерфейсов вас как раз удалось поддержать эту палитру + on gray?
Читать полностью…
Ну везде нужен баланс. Я помню времена, когда о доступности говорили мало, и UI-дизайнеры фигачили серый на сером и кайфовали, а пользователям ничего не разобрать было
Читать полностью…
Баланс между консистентностью и свободой это вечный, не кончаемый процесс)) защищаем каждое решение/компонент
Читать полностью…
Как учитывали баланс между консистентностью и свободой при ребрендинге? Интересно узнать детали!
Читать полностью…
Полезная статья. Занимаюсь тем же самым. Спасибо! Немного вопросов:
1. Фильтровать по столбцам возможно, если столбец отображается. А если нет? Придется сначала показать столбец, а далее фильтровать. Постоянно показывать иконку фильтрации и сортировки в заголовке это лишний шум. Можно их показывать только по Ховеру и при включенной фильтрации. Параметры фильтрации могут занимать много места, если их не показывать то не понятно, что фильтруется. Есть комплексные фильтры, которые могут сразу включать несколько параметров.
2. Вариант быстрых фильтров в дополнение к фильтрам по колонкам, которые учитывают пользовательские сценарии. Например: мое, непрочитанное, новое - не фильтруется колонками напрямую, и заметно дольше, чем вариант быстрых фильтров.
3. Цифры выравниваются по запятой
4. Интересный вариант с вложенными таблицами справа, взял на заметку.
5. Недавно спрашивал у иишки проанализировать плюсы и минусы темной и светлой темы. Однозначный ответ что светлая тема лучше считывается. Мое личное мнение, что темная тема выбирается заказчиками, потому что выглядит моднее и все.
6. Интересно было бы почитать про решение задачи, когда часть ячеек не заполняется. Например, поле комментарий занимает много места, но заполняется редко. А также про состояние строк в разных статусах, когда могут появляться и исчезать часть ячеек.
7. Во всяких системах с алармами есть не только статичная индикация, но и мигание и звуковая сигнализация. Есть ли у вас такое? Как решали?
8. Проверяли ли вы цвета на контрастность и какое значение считали целевым. Мне приходилось доказывать заказчику на цифрах почему то или иное сочетание лучше , от этого и вопрос. Может быть есть отраслевые стандарты, где красный должен быть именно тру красным. Обычно цвет статусов сквозной по всему интерфейсу и может использоваться для совсем мелких элементов. Про это тоже интересно.
По сути смысл в том, что мы сначала дали свободу, с целью отловить паттерны которые органично формулируются, сейчас уже потихоньку вводим контроль
Читать полностью…
Мы пока не сформулировали на уровне паттерна, пока просто дали инструмент
Читать полностью…
On white для более коммуникационных экранов, On gray — для более интерфейсных, где надо много всякого разного контента показать и сгруппировать
Читать полностью…
Бо Кибза и Лёха Макаренко (дизайнеры дизайн-систем Альфа-Банка, Самоката и Почтатеха) рассказали о развитии системы цветов в ДС Туту.
— Легаси-ДС не дорабатывали, чтобы нигде ничего не отвалилось. Команды с большой автономностью локально допиливали компоненты под свои нужды;
— Хотели консистентности, единых стандартов и при этом пространства для свободы;
— Одним из требований к системе цветов была отзывчивость к изменениям, так как компания ребрендилась;
— В этом случае, если минимизировать возможность кастома, бардак накопится не в продукте, а в ДС, где его проще прибрать;
— Обычно делают слои токенов: палитра → семантика (подложки, обводки, текст) → компоненты (текст на кнопке);
— Ради скорости дизайна и разработки компонентов отказались от семантического слоя. Условие: не использовать цвета палитры напрямую, не оверрайдить цвета в покрашенных компонентах;
— Подход даёт очень много компонентных переменных, а также много мелких разночтений (вроде немного отличающихся подложек в чипе и лейбле);
— Зато дизайнеры успели попробовать компоненты в макетах и понять, что нужно единое решение для контрастных элементов и компоновки On white / On gray;
— On white больше подходит для коммуникационных экранов, On gray — для более интерфейсных, с формами и карточками;
— On gray экраны нельзя просто перевести в тёмную тему — бекграунд светится ярче, чем форграунд, и в интерфейсе появляются дыры;
— Можно завести в светлой теме 2 background и 2 panel цвета, которые в тёмной теме станут 1 background и 1 panel. Но как объяснить дизайнерам, какой из 2 цветов использовать?
— В итоге завели мод для переключения On white / On gray, и в светлой теме оставили 1 background и 1 panel;
— Мод On gray кроме цвета подложки может устанавливать, например, более тёмный цвет текста, чтобы сохранять контраст на более тёмном фоне;
— Также через мод Contrast (low, high) реализовали возможность делать отдельные элементы более контрастными;
— Таким образом, семантика построена на основе конкретных продуктовых запросов;
— Палитру всегда можно доделать потом;
— Удобно, когда семантические цвета в палитре находятся на одном уровне: можно сразу увидеть ошибку и в целом запомнить, что цвет текста — это 500;
— Также удобно иметь отдельную палитру для тёмной темы с интерпретированными цветами (можно оставить только те, что точно используются).
#color #design_system
Я часто сортирую отзывы по дате - чтобы понять, как менялся товар (услуга) в динамике
Читать полностью…
Станислав Хрусталёв прошёлся по ошибкам в отображении рейтинга товаров. Я переформулировал их в рекомендации.
— Показывайте рейтинг товаров, если собираете оценки. Это поможет покупателям с выбором;
— Если оценок ещё нет, напишите об этом, чтобы человек не гадал, почему у товара нет рейтинга;
— Не ставьте в этом случае рейтинг 0, а на странице товара не отображайте блок с нулевыми саммари;
— Если оценок мало (например, всего одна), можно повременить с расчётом рейтинга, чтобы число лучше отражало реальность;
— Не округляйте рейтинг до целого числа. Между 4,4 и 4,5 разница не такая, как между 4 и 5;
— Показывая рейтинг закрашенными звёздами, в случае дробных значений крайнюю звезду закрашивайте частично — особенно если рядом рейтинг продублирован цифрами;
— Странно, если товар с низким рейтингом отображается в подборке «Хиты» или «Популярное»;
— На странице товара рейтинг должен вести в секцию с отзывами;
— Звёздочка и цифра — общепринятое обозначение рейтинга товара, можно не подписывать, что это такое;
— Сортировка отзывов нужна, но не стоит по умолчанию сортировать «от позитивных к негативным»;
— Дайте возможность сортировать как «от позитивных к негативным», так и наоборот, а вот варианты «сначала старые» или «сначала менее полезные» довольно бесполезны;
— А вариант «по умолчанию» непонятен — пишите конкретно, по какому критерию работает сортировка.
#rating #ecommerce
Как насчёт примеров из реальных проектов? Было бы интересно увидеть.
Читать полностью…
Привет! По дефолту раз в год, так как продукт накапливает достаточно изменений. Вот сейчас первая команда исправила достаточно барьеров из первой оценки и сама пришла за следующей, прошло 9 месяцев. То есть базово имеет смысл тратить ресурс, когда флоу меняется, чтобы отследить прогресс. А это зависит от скорости продуктовой команды 🙂
Читать полностью…
Егор Камелев написал об автофокусе на первом поле формы.
— Автоматически помещать фокус на первом поле формы рекомендуют, чтобы открывший её пользователь сразу, без лишних действий, смог ввести данные;
— Это хорошее базовое правило, которое можно применять по умолчанию. При этом не стоит забывать о нюансах, из-за которых от него стоит отступить;
— Если форма — не единственное содержимое страницы и находится где-то внизу, автофокус прокрутит страницу к форме и помешает изучить страницу;
— В мобайле автофокус приведёт к появлению экранной клавиатуры, что затруднит ознакомление с формой в целом;
— Бывают формы, которые часть пользователей может заполнять не с первого поля;
— Либо этому первому полю может предшествовать информация о регионе с контролом его изменения. И это изменение значительно меняет форму.
#form
Как часто нужно проводить оценку Product score, чтобы она была полезной для продукта?
Читать полностью…