198
Чат читателей @uxnotes · Редактор: @zGrav
Я написал, какими бывают адреса электронной почты и как это может повлиять на опыт регистрации и входа по имейлу.
— Когда человек заводит электронную почту, его имя пользователя и домен почтового сервиса становятся уникальным адресом;
— Но его не обязательно указывать в точности, чтобы получать письма;
— Все почтовые сервисы игнорируют регистр букв. Gmail — точки в имени пользователя. Почти все игнорируют то, что в имени пользователя указано после «+»;
— Фишка с «+» описана в одном из стандартов работы электронной почты и может использоваться для борьбы со спамом и сортировки почты;
— Плюс тестировщики могут так зарегистрировать несколько аккаунтов в тестируемых продуктах, не заводя множества почтовых ящиков;
— Некоторые почтовики работают на нескольких доменах. Например, gmail.com и googlemail.com, yandex.ru и ya.ru;
— По хорошему, сделав исключение для тестировщиков, всё это стоит учитывать при регистрации, входе и восстановлении пароля (в статье в общих чертах описан механизм), чтобы пользователи не создавали несколько аккаунтов, фактически связанных с одним ящиком;
— Пользователь может забыть, с каким адресом регистрировался ранее, и по ошибке завести ещё один аккаунт;
— Если посмотреть на крупные и популярные сервисы вроде ChatGPT, Notion, Amazon, они отрабатывают только кейс с регистром букв.
#login #signup
Не, я имею ввиду отказаться от использования компонентов на сером фоне, сейчас как раз фишка в том что есть условный бейджик, он такой слегка цветной фон имеет, и вот этот цвет отличается в зависимости на каком он фоне
Читать полностью…
Да удалось, но в будущем, хотелось бы отказаться от on grey :)
Читать полностью…
Можно сделать и на сером контрастно (формально), только будут свои момент, цвета будут менее «цветастые» более по б2б шному, поддерживать придется и для белого и для серого. Тут уж вопрос дизайн гильдии, какой сформулировали дизайн-язык
Читать полностью…
когда-то на одном тестовом (не Туту) мне сказали, что данные и тексты на сером фоне нини делать, а то неконтрастно) поскольку всегда черный текст на белом фоне вроде считался, наоборот, избыточно контрастным, меня этот пункт смутил.
в итоге, норм серые фоны для интерфейсных решений сработали?)
Вам лучше сходить на Хабр и эти вопросы в комментариях задать, не факт, что автор статьи их здесь увидит
Читать полностью…
Из-за того что дизайнеры не смогли сформулировать дизайн-язык общий, мы дали свободу, решение принимает дизайнер, мы дали инструмент)
Читать полностью…
А как объяснить дизайнерам что использовать? on white или on gray? Звучит как будто не договорились о едином подходе, и сделали два на выбор чтобы и тому и тому дизайнеру угодить. М?
Читать полностью…
Хм. Ну вообще есть немного. По задумке автора это должны были быть «вредные советы», что видимо надо быть Остером, чтобы писать вредные советы без примечи пассивной агрессии
Читать полностью…
статью читать невозможно из-за стиля автора и его пассивной (активной) агрессии. таким экспертам не доверяем
Читать полностью…
Добрый день. Напишите пожалуйста в личку кто может на постоянку для веб-студии макеты в Figma/PS отрисовывать? Без верстки, отдельно есть верстальщики. Под WP и самопис, по 3-4 проекта в месяц, в основном по лендингам сфера услуг (логистика и т.д.), пришлите портфолио
Читать полностью…
Как учитывали баланс между консистентностью и свободой при ребрендинге? Интересно узнать детали.
Читать полностью…
Т.е. в идеале располагать все компоненты либо на белых островках (и серый фон) либо фон должен быть белый, и на нем располагать компоненты
Читать полностью…
Только из-за этого или есть ещё какие-то предпосылки? Просто этот формат On gray с белыми островами прямо повсюду
Читать полностью…
как раз про это речь, да, я так понимаю для интерфейсов вас как раз удалось поддержать эту палитру + 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
Как насчёт примеров из реальных проектов? Было бы интересно увидеть.
Читать полностью…