Иконки-кнопки и кнопки-иконки: как дизайнеру не совершить ошибку и не запутать окружающих

Хочу поделиться одним из хороших тонов в работе с нашими любимыми кнопками. Для кого‑то это может быть открытием, а для кого‑то устоявшейся базой. Общее здесь только одно — это успех данного подхода.

Иконки-кнопки

Это любые иконки, на которые можно нажать для совершения действия. Их особенность в том, что они имеют контейнер, который ограничен размером самой иконки.

Почему иконки-кнопки — это не очень хорошо?

1. Мы искажаем формулировку

   Когда мы говорим «кнопка», мы подразумеваем объект с чёткими паттернами и функциональными требованиями. Иконка же изначально — это графический элемент, а не кликабельный объект. С таким подходом один и тот же элемент может быть как кнопкой, так и просто графикой.

2. Коммуникация

   В данном случае мы не разделяем сущности. Разделение же на «иконку» и «кнопку-иконку» упрощает общение с разработчиками. Иконка — это графика, а кнопка-иконка — кнопка с графическим элементом. Это помогает избежать путаницы, когда рядом находятся кликабельные иконки и просто графические элементы.

3. Размер контейнера

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

4. Дисбаланс

   Иконки-кнопки плохо сочетаются с кнопками-иконками из-за разницы в размерах и визуальной иерархии. А также система может не поддерживать иконки одинаковых размеров в разных сущностях.

5. Исключения

   Иконки Info — по ховеру или клику на которые появляется тултип с подсказкой. Для таких случаев можно заложить отдельную логику, согласованную с разработчиками. Обычно так поступают с логикой по ховеру, т.к. она отличается от логики ховера с кнопкой.

Кнопки-иконки

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

Почему кнопки-иконки — это мастхэв?

1. Чёткость формулировок

   Нет путаницы: это кнопка с функцией действия, а не просто графический элемент (иконка)

2. Упрощают коммуникацию

   На созвонах с разработчиками мы чётко понимаем, о чём идёт речь: о кнопке или о графическом элементе

3. Системные размеры контейнеров

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

4. Баланс

   Хорошо выстроенная система кнопок-иконок сбалансирована и не требует лишних усилий для выравнивания элементов

5. Ghost кнопки

   Если нужно отобразить графический элемент без подложки, используйте ghost-кнопки. Они сохраняют функциональность кнопки, но выглядят как «голая» иконка.

Итого

Использование кнопок-иконок вместо иконок-кнопок предполагает:

— Упрощение коммуникации
— Соответствие логике сущностей
— Соответствие названий элементов интерфейса логике сущностей
— Понятные и простые тачзоны
— Нативная поддержка системно сбалансированных сущностей
— Есть исключение в виде icon info

А вы выносите в отдельные компоненты кнопки с иконками? Или поддерживаете кнопки с полным набором атрибутов: иконки, текст, каунтеры и другим?

Как я интегрировал нового дизайнера в команду: мой опыт

Привет, Хабр!

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

Как всё начиналось

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

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

Первая задача: погружение в проект

Главная цель на начальном этапе — максимально быстро погрузить нового дизайнера в проект. Это включает:

• Изучение структуры проекта.

• Понимание принципов хранения и навигации по макетам.

• Знакомство с внутренними процессами и смежными командами.

Для этого я даю новичку первую задачу — обычно это что-то простое, например, устранение дизайн-долгов. Это может показаться рутиной, но такой подход позволяет:

1. Ознакомиться с большим количеством макетов.

2. Разобраться в деталях интерфейса.

3. Понять, как устроена работа в команде.

Я всегда подчёркиваю, что не нужно спешить. Лучше потратить время на изучение, чем пропустить важные нюансы.

Ретроспектива и обратная связь

После выполнения первой задачи у новичка, как правило, возникает множество вопросов. Это отличная возможность для обратной связи. Я стараюсь отвечать на все вопросы сразу, чтобы избежать путаницы в будущем.

На этом этапе я оцениваю, насколько хорошо новый дизайнер справился с задачей, и определяю, что делать дальше:

• Если есть пробелы в знаниях, даю повторное задание с дополнительными рекомендациями.

• Если всё в порядке, перехожу к более сложным задачам.

Этап «боевого кота»

Когда новый дизайнер начинает уверенно разбираться в проекте, я постепенно уменьшаю контроль. На этом этапе сотрудник:

• Самостоятельно работает с вводными задачи.

• Использует компоненты и паттерны, принятые в команде.

• Взаимодействует с аналитиками, разработчиками и другими ответственными лицами.

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

Итоги

Интеграция нового дизайнера — это процесс, который требует времени, терпения и чёткого плана. Вот ключевые моменты, которые помогают мне в этом:

1. Постепенное погружение — начинаем с простых задач и постепенно усложняем.

2. Обратная связь — отвечаю на вопросы и помогаю разобраться в нюансах.

3. Доверие — постепенно уменьшаю контроль, позволяя сотруднику проявлять самостоятельность.

А как вы погружаете новых сотрудников в свои команды? И как погружали вас?