По законодательству РФ интернет-магазины не имеют права устанавливать дополнительные комиссии при оплате товара банковской картой.

Если делаете прототип или макет небольшого магазина, в котором цена зависит от способа оплаты, помните про формулировки:
— Есть базовая цена для других способов оплаты;
— И цена со скидкой для оплаты наличными.

Например, магазин на скриншоте защищён от Роспотребнадзора:
— Нигде не сказано, что цена при оплате картой больше из-за комиссии;
— В подсказке к цене на жёлтой подложке написано, что это цена со скидкой от базовой цены.

Кент Салливан написал о разработке дизайна Windows 95: использование в качестве основы Windows 3.1, итеративный подход, прототипы на Visual Basic, пользовательское тестирование (новички, средние и продвинутые), фиксирование проблем и решений в багтрекере, ранжирование проблем.

«Когда началось прототипирование и тесты юзабилити, то зачастую спецификации отсылали читателей к прототипам для получения актуальной информации. По сути, мы обнаружили, что прототип представляет собой более богатую форму спецификации, требуя меньше времени на создание. При этом у него есть и другие полезные применения (тестирование юзабилити, демо-версии и т.д.). Прототип стимулирует более содержательные отзывы, поскольку рецензенту не так сильно нужно подключать воображение, чтобы понять работу системы».

Золтан Коллин написал о трении в интерфейсе, как его уменьшить и в каких случаях этого лучше не делать.

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

1. Замедлиться, чтобы избежать ошибки:
— Подтверждение действий с серьезными последствиями;
— Предотвращение возможных ошибок. Gmail спрашивает, действительно ли пользователь хочет отправить письмо без прикреплённых файлов, когда он упоминал их в тексте письма;
— Задержка выполнения действий, которые нельзя отменить.

2. Дополнительные шаги для повышения безопасности:
— Предотвращение случайных транзакций;
— Многошаговая аутентификация;
— Повторная аутентификация перед важными действиями. Авторизованный пользователь вводит текущий пароль ещё раз, чтобы заменить его на новый.

3. Повышение восприятия качества и ощущения безопасности:
— Обменник монет на банкноты слишком быстро выдавал их, и люди считали, что он считает неверно;
— Сканер сетчатки глаза в банковском приложении работал слишком быстро, и пользователям казалось, что проверка недостаточно тщательна.

4. Обучение пользователей и стимулирование определённого поведения:
— Slack предупреждает перед отправкой уведомления группе;
— На кухне Google конфеты размещены в непрозрачных контейнерах, а фрукты в прозрачных.

5. Управление продуктом:
— Продажа. Всплывающие окна с акциями и предложением подписаться;
— Фильтрация клиентов. Сложный для родителей интерфейс Snapchat;
— Создание ценности. Рекламные вставки на бесплатном тарифе Spotify.

In English.

Давид Теодореску написал о манипуляциях с помощью дефицита.

Почему они работают:
— Боязнь потери продукта и свободы выбора;
— Социальное доказательство: обычно продукт становится дефицитным из-за высокого спроса;
— Ожидание, что отказ от предложения вызовет в будущем сожаление.

Формы дефицита:
1. По времени: Lightning Deals на Амазоне;
2. По количеству товаров: поиск номеров на Booking, бронь билетов на Ryan Air;
3. Ограниченный доступ: подписка на Медиуме, присоединение к Tinder Select;

Метод этично использовать, когда цифры реальны. Если выдумывать поддельные акции и искусственные членства, в долгосрочной перспективе это приведёт к потере доверия.

In English.

3 доклада с Open Epic Day, проведённого школой Epic Skills 10 марта:

1. Креативные методики против вдохновения — Никита Прядко из «Золотого сечения»: https://youtu.be/i3j3hyGeh-g

2. Тёмная и светлая сторона дизайнера интерфейсов — Анастасия Атюнина из Heads and Hands: https://youtu.be/MgFW6Sbp548

3. Как говорить о дизайне с заказчиком — Даша Почекуева из Kelnik: https://youtu.be/EkRmmosHj-0

Элеана Гожка написала об использовании принципов гештальта в дизайне интерфейсов.

Люди:
— Склонны идентифицировать сначала общую форму элементов. Мозг распознает целое быстрее, чем составляющие;
— Могут распознавать объекты, даже если их части отсутствуют. Мозг сопоставляет объекты со знакомыми шаблонами и заполняет пробелы;
— Часто интерпретируют неоднозначные объекты более чем одним способом, переключаясь между альтернативами в поиске определённости;
— Распознают простые объекты независимо от их вращения, масштаба и перемещения.

Связанными воспринимаются объекты:
— Находящиеся рядом друг с другом;
— Находящиеся в одной замкнутой области (рамка);
— Похожие визуально;
— Создающие вместе узнаваемую форму;
— Расположенные симметрично;
— Расположенные на линии или гладкой кривой;
— Движущиеся в одном направлении.

In English.

Настя Травкина написала о дофаминовой петле.

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

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

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

Джим Росс написал о распространённых ошибках в прототипировании и как их избежать.

1. Приступать к созданию прототипов слишком быстро. Надо начать с бумажных набросков и поиска наиболее подходящей концепции;
2. Работать без чёткого плана. Надо определить, какие страницы и функции должны войти в прототип, и заниматься только ими;
3. Ошибаться с уровнем точности прототипа. Надо понять, какую задачу он решает и какие есть временные ограничения на его создание;
4. Включать в прототип слишком много всего. Надо показать основные страницы и функции, а на второстепенные переключаться только после получения обратной связи по основным;
5. Не объяснять клиентам и пользователям, что за прототип перед ними. Надо объяснять в начале и повторять перед каждым ревью. И проверяйте, что все ссылки в прототипе ведут туда, куда надо;
6. Не готовить инструкцию по навигации в прототипе. Для разработчиков стоит сделать отдельный документ с состояниями экранов и принципами взаимодействия, чтобы им было проще разобраться, как всё работает.

In English. Копия перевода в Вебархиве.

Митя Гизатов искал работу дизайнером, за 4 месяца прошёл более 30 собеседований и поделился впечатлениями.

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

Например:
— Стоит откликаться на вакансии, даже если не соответствуете требованиям на 100%;
— Знакомиться (проводить первое интервью в серии) лучше не лично, а по видеосвязи;
— Если тестовое задание обязательно, не надо спрашивать об отношении соискателя к тестовым заданиям. Никто их не любит делать;
— Обратная связь после выполнения тестового — обязательный пункт.

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

— Соответствуйте базовым требованиям к нормальным подрядчикам: вовремя отвечайте на письма, укладывайтесь в названные сроки, закладывайте время на согласования и так далее;
— Берите больше от клиентского бюджета, делайте смежные задачи вроде вёрстки;
— Делайте проекты только тем, для кого ваша работа — вопрос жизни и смерти. Не делайте факультативные и не особо важные задачи;
— Научитесь договариваться с клиентами, которым дорого;
— Заявляйте о себе: ведите блоги, показывайте работы, участвуйте в конкурсах, делайте сервисы.

Видео.

Джон Мур написал, что иногда забывают спроектировать.

1. Вход: восстановление пароля, благодарность за регистрацию, приветственное письмо, условия использования и конфиденциальность.

2. Первое использование: знакомство пользователя с продуктом, пустые состояния, раздел помощи, выход из профиля.

3. Всякие мелочи: страница 404, порядок переключения кнопкой Tab, закрепление элементов при прокрутке, постраничная навигация, сортировка и фильтрация таблиц, отсутствие результатов поиска, состояния ошибок, системные уведомления, автозаполнение в раскрывающемся списке, состояние загрузки.

4. Профиль: настройка уведомлений, список выставленных счетов, удаление профиля, кадрирование фото для профиля, переход на повышенный тарифный план.

5. Пользовательские сценарии: изменение адреса, добавление новой карты, массовое добавление объектов, создание пользовательского фильтра, возможность поделиться, создание объекта из существующего, приглашение пользователей, редактирование прав пользователей, восстановление только что удалённого.

In English.

Никита Ларионов выложил конспект лекций с курса Игоря Штанга «Типографика и вёрстка», который недавно прошёл в Волгограде. Например:

Одинаковое содержание в одинаковых модулях выглядит скучно. Чтобы интересно расположить его в рамках готового пространства есть 7 приёмов.

1. Заполнять модули не до конца. Оставьте некоторые модули пустыми, обтравите фотографии.

2. Оформить элементы по-разному. Разделите их цветом или шрифтом. Представьте себе однообразную структуру, в которой расставлены акценты.

3. Заполнить элементами разных классов или разного качества. Вставьте в каталог товаров ссылку на статью или цитату из отзыва.

4. Предусмотреть область, которая будет выглядет по-другому. Сетка одна, но модули объединяются по-разному.

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

6. Добавить новый слой. Подчеркните особенную динамику и направление. Например, текст стоит с чётким ритмом, а картинки летают как хотят.

7. Соблюсти баланс порядка и хаоса. Структура должна остаться читаемой. В хорошем макете сначала думают о структуре, а потом о разнообразии.

http://vonoiral.com/all/kurs-igorya-shtanga-tipografika-i-vyorstka-v-volgograde/

Иван Величко рассказал о финансах дизайн-бюро «Щука»:

Формат оплаты:
— Почасовая оплата только с Pure. Такая модель не интересна, так как размер прибыли зафиксирован и может только уменьшиться, если сотрудник напортачил;
— Остальным клиентам предлагаются фиксированные бюджет и время;
— Сколько часов дизайнеры потратят на проект, прикидывает арт-директор.

Как считают часы:
— Для западных заказчиков час работы стоит 60 евро, для российских — 3000 рублей;
— Повышение стоимости не привело к уменьшению количества заказов;
— Сотрудники работают максимум 6 часов в день;
— Они склонны занижать потраченное время, боясь показаться неэффективными.

Общие показатели:
— В штате 14 сотрудников;
— В 2017 году выручка составила 25 млн рублей;
— За счёт повышения стоимости и более точной оценки проектов во 2-м полугодии удалось получить 2 млн прибыли;
— Плановая норма прибыли — 20%. Хотят поднять до 30% за счёт снижения транзакционных издержек и более чёткой постановки задач;
— На счетах есть финансовая подушка около 4 млн рублей (в районе двухмесячного оборота).

Стоимость проектов:
— Средний бюджет — 700 тысяч рублей;
— Перестали брать проекты меньше 500 тысяч. Разматывать маховик пресейла и концептуального проектирования ради меньшего нецелесообразно;
— Если дизайнеру нечем заняться, лучше обновлять портфолио, а не делать дешёвый проект.

https://incrussia.ru/fly/kejs-byuro-shhuka-kak-otsenit-rabotu-dizajnera-vo-vremeni-i-vyjti-iz-ubytkov/

Адам Ватан и Стив Шёгер предложили 7 простых приёмов, с помощью которых можно улучшить дизайн.

1. Использовать для создания иерархии цвет и толщину, а не размер текста.

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

3. Добавить вертикальное смещение теней и уменьшить их размытие и растягивание.

4. Уменьшить количество рамок и разделительных линий. Вместо них можно добавить блоку тень, раскрасить фон, добавить отступы.

5. Использовать векторные иконки в том размере, для которого они рисовались. Не увеличивать их слишком сильно.

6. Добавлять акценты с помощью цветной границы блока.

7. Не забывать про иерархию, раскрашивая кнопки в семантически подходящие цвета.

In English.

Дмитрий Мелентьев написал о тестировании на этапе проектирования: бумажных прототипов, интерактивных прототипов в мелкой детализации, интерактивных макетов, альфа-версий продуктов, похожих продуктов.

Про интерактивные макеты:

Дизайнер делает красивый интерфейс, в котором вы размечаете области, при взаимодействии с которыми должно что-то происходить. Обычно это просто «on click» или «on move».

Вся эта красота делается интерактивной и тестируется на пользователях:
— Насколько конкретный элемент, который ранее был большой кнопкой, а сейчас стал красивеньким тонким баром, понятен пользователю;
— Акценты и видимость всех важных элементов дизайна.

Есть небольшой нюанс: надо постоянно напоминать, что это прототип. Потому что такой прототип уж слишком похож на реальность.

https://habrahabr.ru/company/netologyru/blog/334694/

Ребята из студии дизайна Евгения Ярового записали 2-й выпуск передачи про дизайн, в котором обсудили:
— Плюсы и минусы использования визуальных референсов в работе. Почему Лебедев не прав, когда называет их поиск тупостью;
— Победителей конкурса «Золотой сайт» и нюансы его проведения: в жюри были сотрудники компаний, чьи работы участвовали в конкурсе, и они ставили высокие оценки своим и топили конкурентов;
— Как работать с клиентскими правками.

https://www.youtube.com/watch?v=oGlxDpd-mMM

Адаптация пользователя — больше, чем просто экранные заставки и подсказки в интерфейсе.

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

Для каждого шага сокращайте ввод данных. Регистрация обычно нужна, чтобы входить в свой профиль с разных устройств. Если это не требуется, зачем регистрироваться? Например, appear.in создаёт видеоконференции без регистрации и даже указания имени.

Объясняйте, зачем вам нужны те или иные пользовательские данные. Например, при регистрации Apple ID дата рождения нужна для подтверждения личности и активации некоторых сервисов.

Рассказывайте о функциях своевременно. О продвинутых возможностях стоит знать только тем пользователям, которых можно считать продвинутыми.

Для обучения используйте механику приложения. Например, Trello рассказывает о себе с помощью карточек и списков.

Убедитесь, что подсказки можно пропустить.

Задействуйте пустые экраны: показывайте образец будущего содержимого или популярный контент.

https://habrahabr.ru/company/netologyru/blog/328902/

Екатерина Гордеева написала, чем отличается проектирование профессиональных интерфейсов.

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

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

https://medium.com/sobaka/f1efeafb923b

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

Дмитрий Ваницкий написал, как он с коллегами изменил процесс адаптации в отделе дизайна (80 человек).

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

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

Ретроспективные интервью с теми, кто работает в компании меньше года, дополнили список и скорректировали актуальность проблем.

Исследование чужого опыта не дало готового решения, но принесло несколько приёмов, пригодившихся при проектировании нового процесса:
— Пошаговая инструкция для новичков, которая отвечает на многие вопросы;
— Тимбилдинг в исконном его понимании, когда человек знакомится с командой и может определить свою роль;
— Свобода выбора задач для решения, чтобы мотивировать дополнительно.

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

Решили сделать так, чтобы адаптация увлекала самим процессом. Увлечённость процессом (состояние потока) можно стимулировать:
— Дать людям ясную цель;
— Объяснить, как этой цели добиться, и передать контроль;
— Давать оперативную обратную связь по мере приближения или удаления от цели;
— Убрать лишние раздражители, усилив концентрацию. Например, новобранец занимается одной адаптационной задачей, а не разгребает накопившиеся завалы;
— Предусматривать постоянное развитие личности.

Адаптация в отделе дизайна длится 5 дней:
1. Введение в роли и дизайн-процесс в целом.
2. Исследование.
3. Прототипирование.
4. Визуальный дизайн.
5. Тестирование и презентация.

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

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

https://designpub.ru/3725cd70b32f

Юрий Ветров, который с 2012 года строит в Mail.Ru Group дизайн-систему Paradigm, прочитал почти все книги о дизайн-системах и выбрал те, что показывают правильные точки зрения:

1. Кристофер Александер — Язык шаблонов. Города. Здания. Строительство (1977);
2. Nathan Curtis — Modular Web Design (2009);
3. Anna Debenham — A Pocket Guide to Front-End Style Guides (2013);
4. Brad Frost — Atomic Design (2017);
5. InVision — Design Systems Handbook (2017).

В статье он рассказал про достоинства этих книг, а также дал ссылки на другие полезные материалы.

https://jvetrau.com/designsystems-books/