Александр Кочеванов

Мой способ создания мастер-компонентов в Фигме

Заметил, что многие продуктовые дизайнеры задаются вопросом «Как организовывать разные состояния компонентов?». Весь дизайнерский мир делится на 2 части. Первые делают один компонент, в котором несколько папок для всех состояний. Вторые делают для каждого состояния элемента отдельный компонент.

Сначала разберу преимущества и недостатки каждого из них, а потом рискну предложить еще один вариант. Рассказываю о реализации в Фигме. Возможно, в других редакторах что-то не применимо.

1. Один компонент со множеством состояний

Преимущества:

• Библиотека компонентов выглядит компактнее.

• В панели компонентов меньше элементов и поэтому меньше скролишь в поиске нужного. В этом случае спасает поиск по имени.

Недостатки:

• Где-то нужно все таки показать верстальщику все возможные состояния, потому что он не видит скрытые слои.

• Приходится тратить время на поиск нужного состояния: его показ и скрытие ненужного. Особенно это утомляет, если структура компонента сложная.

2. Множество компонентов для каждого из состояний

Преимущества:

• Для верстальщика все наглядно сразу.

• Самому тоже видны все состояния для сравнения с другими компонентами. Это полезно при создании следующих компонентов.

• В селекте Instance легко найти нужный компонент при условии, что все грамотно поименовано.

Недостатки:
• Библиотека становится огромной. При этом некоторые из состояний в 99% случаях не нужны. Вид наведения и нажатия обычно верстается один раз и потом показывать это уже не нужно.

3. Что я предлагаю

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

Преимущества:

• Все элементы интерфейса выглядят одинаково: отступы, размеры, шрифты и прочее.

• Редактируя топ-компонент редактируются остальные компоненты, построенные на базе него.

• Дизайн-система более целостная, более унифицированная.

• Верстается это быстрее и проще.

Особенности (я бы не назвал это недостатками):

• Надо быть аккуратным редактируя, потому что изменяя топ-компонент, можно поломать остальные компоненты.

• Если вы меняли стили у мастер-компонентов, то редактирование стилей (и даже если вы текст перепишите) топ-компонента ничего не поломает. Очевидно, что речь идет не о структурном редактировании топ-компонента.

• Вложенность более глубокая. Становится больше кликов, чтобы добраться до нижних слоев. К этому надо привыкать. Это единственное, что я бы назвал минусом.

• В процессе дизайна страниц топ-компонент может мешаться среди рабочих компонентов. Это можно решить придумав ему какое-нибудь имя, благодаря которому он уйдет в конец списка. Возможно кому-то это тоже покажется минусом, меня не напрягает.

Мое предложение закрывает поднятый в начале вопрос лишь частично. Так как же рисовать состояния элементов? Не получится для инпута и кнопки сделать одинаковые состояния. Тут я могу предложить следующее:

• Старайтесь описывать состояния где-то отдельно с помощью стилей. Ну зачем вам вид нажатой кнопки на каждом макете?

• Продумывайте топ-компоненты так, чтобы можно было удобно их использовать в последующих мастер-компонентах.

• Когда компонент сложный (например, карточка с комбинацией из фотки, текстов, лэйблов и пр.), то пользуйтесь здравым смыслом. Если накопилась куча скрытых папок, в которых задабывает копаться — делайте отдельный компонент. Если переключение между состояниями занимает не больше 3-4 кликов, оставьте папки в компоненте.

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

• Все остальное зависит от вашей фантазии и вкусовых предпочтений.

2019  

Mail Design Cup 2018-2019

Последние 5 месяцев участвовал в конкурсе от Дизайн в Mail.ru Group и сегодня утром вернулся с финала.

Что это вообще. Конкурс Mail Design Cup для дизайнеров с интересной механикой. 3 онлайн-этапа на выбывание и 4 финал, когда все выжившие (со всей России и не только) собираются в одном месте и фигачат одно задание. По итогам занял 7 место из 250 на старте. Не очень впечатляющий результат, мог быть лучше. Потому, что я не особо серьезно относился к конкурсу в начале, и задания, которые мне не нравились делал просто для галочки. А зря. В финале мое решение вошло в ТОП-3.

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

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

2019  

Тестирование приложения Ак Барс Банка

Решил недавно испытать родной татарский сервис. Заказал новую карту Ак Барса — 10% кэшбек в категории транспорта оказался очень заманчивым.

Отправил заявку на сайте. Подождал звонка от банка около 6 рабочих часов. Сомневаюсь, что у них такой большой объем, что нельзя было перезвонить быстрее. Оказалось что форма заявки на сайте глючная и все мои данные, кроме имени и телефона, не сохранились. Пришлось диктовать по телефону. Сказали карта будет изготавливаться несколько дней, как будет в банке придет СМС и можно будет забрать. Действительно, через несколько дней пришла смс с такой формулировкой «…карта будет доставлена в отделение в течение 2 рабочих дней». Когда это? Сегодня, завтра или послезавтра я не очень понял.

Подождал на всякий случай 3 дня. Пришел за 15-20 минут до окончания рабочего дня и в отделение никого не было. Видимо рабочий день уже был закончен — пустой офис с открытыми дверьми. Через минуту из туалета вышла девушка и сказала, что нет интернета и система не работает, поэтому выдать карту не получится.

Пришел еще через пару дней. На этот раз удачно. Выдают карты в почему то в кассе, а не в кабинете с названием «Карты, вклады и что-то еще». После переклички с соседним кассиром и долгих поисков в тряпочных мешочках, нужная карта все таки нашлась. Еще куча времени ушла на бумажную волокиту.

Наконец, карта у меня в руках. Дизайн карты на любителя, картинка на фоне лично у меня никаких эмоций не вызывает. И это не так уж плохо. Вертикальная ориентация доставит проблем для любителей сканировать карты. Качество печати — говно. Через какой-то небольшой промежуток времени цифры сотрутся.

Установил приложение. Закинуть денег решил с другой карты. И чуть было не решил вернуть карту Ак Барса обратно в банк. Проблема в том, что клавиатура закрывает поле для ввода cvc-кода (скриншот прилагается). И когда нажимаешь на иконку со стрелкой выскакивает ошибка. После нескольких попыток случайно нажал на галку на клавиатуре и понял в чем ошибка. Потом заметил еще несколько особенностей. 3 операции в истории (скрин тоже есть) можно скролить очень долго, они дублируются бесконечно. Еще в приложении есть 2 чата с банком и при выходе из любого из них не сохраняется история переписок. И еще оказалось, чтобы отключить платную услугу СМС-информирования нужно пилить в отделение банка. Ну можно же было сделать это в приложении. А если в целом про приложение, то оно весьма неплохое.

Из хороших решений понравилось то, что перекинуть деньги можно перетаскивая одну карту на другую. И в поле суммы есть три тега, которые плюсуют 10, 100 или 500 рублей к введенной сумме. Еще не было случая, когда мне бы это пригодилось, но штука интересная. Напоминает то, когда нажимаешь на микроволновке несколько раз кнопку старт, чтобы установить нужное время подогрева.

2019  

Перевёрсточка

Решили у себя в отделе сделать мир чуточку лучше и провести игру. Взять какой-нибудь пример говенного дизайна и постараться сделать его лучше. В качестве задания взяли электронный билет РЖД. Я, как лошара, оказался единственным из 4 человек единственным, кто хоть что-то сделал. Делюсь результатом.

На мой взгляд на билете много лишнего. И очевидно, что без проникновения внутрь РЖД мне никто не скажет детально для чего нужен каждый из символов на листе. И поэтому, сделать и красивый, и действительно работоспособный макет одновременно у меня вряд ли получится. Поэтому я ничего не удалял из оригинала, а просто перекомпоновал и сделал аккуратнее.

Главная идея. Никто не носит эти бумажки не помяв. Большинство складывают в несколько раз и убирают в паспорт или в карман. Поэтому я разделил макет на 4 части и вынес на первую сторону все, что нужно, чтобы узнать детали своей поездки, на другой стороне платежную информацию и техническую информацию на оставшейся части листа. Вот и все.

2019  

Бывает такое, что одно условие рушит всю систему

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

Потом кто-то из сферы безопасности информации подумал:
— А давайте заставим пользователей периодически менять пароль.
— Норм: подумал я, придумал второй пароль и чередовал их если надо было.
Позже кто-то другой, а может быть и он же сказал:
— Нужно чтобы новый пароль не совпадал ни с одним предыдущим!

И тут многие сервисы подхватили эту идею и понеслось: я устанавливаю новый пароль, потом забываю, восстанавливаю, придумываю новый, потом у меня путаются все пароли от всех сервисов, я снова забываю где какой, снова восстанавливаю, снова новый пароль. Они меня победили. Пришлось все-таки завести документ с паролями.

2019  

Место для креатива в лифте

Горд собой)) Сделал что-то полезное для общества.

Все мы люди творческие и иногда даже остроумные. И некоторым хватает ума выразить свой «креатив» на стенах лифта. Почти в каждом можно встретить рисунки писюнов, какашек, номера телефонов и т. д. От чего большинство лифтов выглядит отвратительно.

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

2019  

#designprosmotr говно

Я очень разочаровался от последней встречи в Москве. Лекции ни о чем. Один рассказывал материал для новичков, у другого слово «как бы» составляло половину его рассказа, третий показывал свои видосы целый час, видимо самостоятельно этого сделать никто не сможет. Неужели людям с их богатым опытом нечего рассказывать? Такое ощущение, что спикеры не особо-то готовились к своим выступлениям. Из 12 лекций я посчитал полезными для себя только 2.

Мне кажется, формат лекций устарел и не имеет особой пользы. Возможно, нужно переходить на другой формат. Например, диалоги, где на сцене было бы сразу несколько человек. Или короткие монологи минут по 15-20 с большим количеством выступающих. Или прямо давать установку выступающим, о чем им нужно рассказать, чтобы они не высасывали ничего из пальца. Есть мероприятия, где подготовка к выступлению очень серьезная: задолго до начала к каждому спикеру прикрепляется тренер, он помогает готовиться к выступлению и доводить его до совершенства.

В заключение, хочу сказать, что предыдущие просмотры были более интересны. Поеду ли я еще? Пожалуй, нет.

2019  

Как мы увеличили процент регистраций на 68% с помощью дизайна форм

Советы и примеры в дизайне форм логина и регистрации.
Казалось бы, что может быть проще формы регистрации и, уж тем более, входа на сайт? Пара полей и кнопка. Но в нюансах этой простоты кроется успешность выполненной работы и количество пользователей вашего сервиса. Как сделать формы проще, процесс приятнее и тем самым снизить количество уходов? Расскажу какими правилами мы руководствовались при разработке нашего сообщества предпринимателей BOSS.ZONE.

Из чего состоит механизм регистрации и входа пользователя в систему?
• Форма входа
• Форма регистрации
• Форма напоминания или сброса пароля
• Сообщение после напоминания или сброса пароля
• Регистрация через соцсети

Это необходимый минимум. Его надо как-то скомпоновать и получить единый и понятный механизм вхождения пользователя.

Способы реализации
• Табы
• Отдельные страницы
• Попапы
• Все на одной странице
• Пошаговый процесс

Конечно, можно комбинировать разные способы. Например, табы в попапах или расширенные табы с подробностями как на отдельных страницах. Так же есть специфические регистрации, которые требуют особого подхода, например, интернет-банки.

Как сделать регистрацию более эффективной

Человечность. Будьте людьми, не заставляйте делать то, что можете сами. Какую-то информацию можно определить автоматически, например, пол или город. Если этого сделать нельзя, то уже после регистрации можно уточнить недостающую информацию. Чем меньше полей, тем лучше.

Потраченное время. Покажите в секундах насколько регистрация быстрая, если это действительно так. Никто не хочет тратить свое драгоценное время. Курсор должен автоматически вставать в первое поле формы.

Подписи. Писать названия полей лучше над ними, а не рядом. Так взгляд человека скользит сверху вниз, а не «перевернутой ёлочкой».

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

Корректность. Сообщения об ошибках нужно писать понятным для простого человека языком, а не оперируя техническими терминами. Они должны появляться рядом с каждым полем по отдельности, а не кучей где-то в одном месте. Кроме текста нужно подсвечивать сами поля. И по возможности писать подсказки. Идеально было бы проверять правильность введенных данных сразу, без перезагрузки страницы. Например, это очень удобно, когда придумываешь себе ник. Помечайте правильно заполненные поля, например, галочками. Это радует в процессе заполнения всей формы.

Безопасность. Должно быть согласие пользователя с политикой конфиденциальности и ссылка на пользовательское соглашение. Для эффекта безопасности вводимых данных расскажите о том, что Вы не передаете их третьим лицам.

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

Соцсети. Давайте возможность входить через соцсети. Сразу. Это быстро и удобно. Можно вообще оставить для входа только соцсети. Этот вариант лишает возможности совершить кучу ошибок, но он для молодой аудитории. Можно «отгрести» если ваша целевая аудитория старше 40.

Чекбоксы. Чаще всего мы обычно пользуемся своим устройством, а не чужим. Поэтому, чтобы не заставлять пользоваться постоянно логиниться, нужна галочка «Чужой компьютер». И если человек её нажимает, то при закрытии Вашего сайта его автоматически разлогинивает. Формулировка может быть разная, например, «Оставаться в системе» с активной галочкой. Мне лично более логичным кажется первый вариант. Не подписывайте на рассылки по умолчанию.

Визуальные образы. Фотографии людей притягивают взгляд и “оживляют” страницу. Но тут надо быть осторожным. Не используйте стоковые картинки — они отталкивают и создают эффект очередной ненужной регистрации. Используйте фотографии своих клиентов или своих сотрудников (это зависит от специфики портала). Не нанимайте фотомоделей. Люди должны видеть себе подобных.

Тестирование. Открывайте в разных браузерах, устройствах. Эмуляторы не всегда работают так, как реальное устройство. Пользуйтесь сами и давайте другим людям пробовать. Количество багов уменьшится.

Как это сделали мы

Людей, которые сидят в интернете, но при этом не пользуются социальными сетями единицы. Поэтому, мы решили сделать упор на вход с помощью соцсетей и оставить возможность классической регистрации через e-mail.

Первое окно — это выбор способа регистрации: Вконтакте, Facebook, Google+, E-mail

Регистрация с помощью соцсетей ничего от дизайнера не требует, если не нужна дополнительная информация. Например, в нашем случае нужно было дополнительно запросить никнейм пользователя. Он выступал в качестве поддомена его страницы. Так выглядит окно классической регистрации через e-mail (дополнительно продублируем соцкнопки, на случай если человек, все таки, выберет способ побыстрее).

Окно логина — это почта (или никнейм) и пароль. Ставим галочку «чужой компьютер» и ссылку на напоминание пароля. В случае нескольких неудачных попыток входа подряд появляется капча.

И, в заключении, окно напоминания пароля. Здесь ничего нового, главное выдержать общую стилистику с остальными формами.

Результаты

Процент уходов
Первое окно минус 19,27% уходов. Стало 23,92%
E-mail регистрация минус 30,09% уходов. Стало 16,10%
Авторизация минус 25,26% уходов. Стало 7,81%

Количество регистраций увеличилось на 68%.

И это не предел. Еще предстоит реализовать моментальную проверку на правильность заполнения полей и свободность никнейма.

2019  

Дизайн продает

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

• Острая необходимость. Именно этот предмет может понадобиться именно сейчас. Например, туалетная бумага, которая кончилась и не была заблаговременно куплена.
• Сезонность. Костюм деда мороза покупается перед новым годом не потому что он красивый, пушистый и красный.
• Скидки или акции. Клюют на эти слова большое количество людей.
• Продавец. Некоторые могут продать все что угодно и кому угодно.
• И множество других причин.

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

2019  

Эффектная презентация. Черный фон

Существует множество секретов хороших презентаций. Большинство из них связано с работой над структурой презентации, над подачей информации, над собой, над своими актерскими и ораторскими способностями, над своей речью и поведением и прочее.

Но есть один простой прием, который ничего не стоит — это черный фон презентации. Обычно презентации проходят с использованием проектора, а это значит, в помещении темно. И белая презентация накладывается на специальный экран, который накладывается на стену и образуется такое тяжелое наложение рабочих поверхностей друг на друга. А если все инвертировать, то исчезает свечение от проектора. Отсутствие белого прямоугольника создает эффект большей рабочей поверхности, цифры и буквы становятся ярче. Контент можно делать больше, потому что рамки раздвигаются. А если все действие происходит на фоне белой стены, а не на специальном экране, то создается впечатление, что задействована вся стена.

Презентация с белым фоном

Презентация с черным фоном

Разница ощутима

2019  
Ранее Ctrl + ↓