Позднее Ctrl + ↑

Окна подтверждения бывают хорошими

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

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

Принцип «Анду» Совет Ильи Бирмана

Хорошее решение не использовать окна подтверждения вообще. А использовать принцип «Анду». Но есть один момент, не всегда техническая реализация такого принципа проста и скорее всего требует дополнительного внимания и времени. Я сам столкнулся с такими проблемами и теперь хочу рассказать, как можно сделать окно хорошим без принципа «Анду».

Вот этот не очень хороший пример я нашёл в интернете. Попробую его улучшить.

Пример из интернета

Дайте больше полезной информации в сообщении окна

Расскажите что сейчас происходит, с чем именно будет происходить действие, что будет потом, как это можно исправить. Покажите объект с которым происходит действие.

Добавляем информацию. Показываем объект с которым происходит действие

Добавляйте окно подтверждения, если это необходимо

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

Папку можно переместить обратно. Окно подтверждения тут лишнее

Не используйте общие ответы в кнопках

«Да» и «Нет» — плохие варианты для ответа. Лучше использовать более конкретные действия «Удалить папку», «Оставить, как есть». А ещё лучше минимизировать конструкцию и оставить только одно действие. Ведь «крестик» — это и есть «Оставить, как есть».

Сделали основное действие более информативным

Добавьте действие из контекста

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

Добавляем дополнительное действие из контекста

Не используйте горячие клавиши

Не используйте горячие клавиши для подтверждения действия. Не давайте пользователю возможность совершить действие случайно.

Вот было и стало:

Кажется, что новое окно подтверждения будет работать лучше

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


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

2018  

Информационный текст для сайта

Расскажу про процесс работы над заданием в школе дизайнеров Бюро. Предмет сложный. Хочу оставить что-то в заметках на память.

Задание

ООО «Кофетрейд» — московский поставщик кофейного зерна. Елена Малышева — российская телеведущая и врач.

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

У компании «Кофетрейд» есть сайт. Соберите страницу для этого сайта, которая поможет снизить эффект программы Елены Малышевой. Страница будет продвигаться в Фейсбуке, «Вконтакте» и «Одноклассниках», поэтому подготовьте также три макета публикаций для этих соцсетей: основное изображение, заголовок, подзаголовок, подводку. Публикации будут происходить от имени официального сообщества «Кофетрейд».

Решение. Первая итерация

Идея. Раз сюжет Малышевой антинаучный, расскажу про пользу кофе через научные исследования. Картинки, схемы, графики, фактойды в помощь.

Структура. Основная мысль в заголовке. Тезис, который нужно доказать. Доказательства по темам. Вывод.

За семь часов собрал макет:

Максим Ильяхов развалил макет за пять минут:

Оценка — 2,5 балла из 5.

Вывод. Есть пунктуационные ошибки. Лишние подробности в тексте. Все иллюстрации должны рассказывать про тему в заголовке. За ссылки получил, как следует. В соцсетях одинаковый текст на картинке и в тизере. Картинка должна удивить и заинтересовать.

Максим собрал чек-лист редактора. Там буду искать ответы на все вопросы.

Решение. Вторая итерация

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

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

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

За три часа переделал макет:

Оценка — 5 из 5.

Максим комментирует:

Четко, но пестровато. Треть акцентов и маленьких иллюстраций хочется убрать, чтобы не шумело.

Тизер в соцсети царский. Сразу интересно рассматривать, хочется кликнуть и углубиться.

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


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

План победы дизайнера на 2018 год

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

Прочитать

  1. «Об интерфейсе» Алана Купера
  2. «Дневник дизайнера-маньяка» Яны Франк
  3. «Психбольница в руках пациентов» Алана Купера
  4. «С помощью дизайна» Ральфа Каплана
  5. «Модульные системы в графическом дизайне» Йозефа Мюллера‑Брокмана
  6. «Нет» Джим Кэмп

Посмотреть

  1. «Хьюстон, у нас все хорошо» Людвига Быстроновского
  2. «Дизайн дизайнера» Людвига Быстроновского · Написал список книг для дизайнера
  3. «Что такое хорошо» Сергея Кулинковича
  4. «Мобилизация 2017» Школы Яндекса
  5. «О полезном действии» Артем Горбунов

Пойти на курсы

  1. Вторая и третья ступень «Школы дизайнеров» Бюро · Дипломный проект
  2. UX design от AIC
  3. Что-то попробовать из курсов Bang Bang Education

Сделать

  1. Дописать процесс работы над схемой метро Минска · часть 1 · часть 2 · часть 3 · часть 4
  2. Рассказать про тестовое задание в «Школу мобильного дизайна» Яндекса
  3. Сделать проект связанный с навигацией в городе
  4. Запустить рубрику в блоге «Мильчин говорит»
  5. Запустить рубрику в блоге «Английский язык»
  6. План победы дизайнера на 2019 год
  7. Сделать мобильное приложение

Арбайтен!
Если у вас есть вопросы по лайфлисту, пишите. Буду рад помочь.


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Новый год, план победы, итоги

Ровно год назад я составил План победы на год. Время подвести итоги.

Читал

План я почти выполнил. Почти, но не совсем. Благодаря ему, я понял, что могу прочитать 6...8 книг за год. В 2017 я прочитал 6 книг. Да, это мало. Но я не умею читать книги быстро.

Вот они:

  1. «Облик книги» Яна Чихольда
  2. «Пиши, сокращай» Максима Ильяхова и Людмилы Сарычевой
  3. «Типографика и вёрстка» Артёма Горбунова
  4. «Дизайн — это работа» Майка Монтейро
  5. «Ководство» Артёма Лебедева
  6. «SCRUM» Джеффа Сазерленда. Тут даже конспект написал.
  7. «С помощью дизайна» Ральфа Каплана

Последнюю дочитать не успел, её не считаю:-)

Учил

В 2017 году я пытался поступить в «Школу мобильного дизайна» Яндекса. Сделал тестовое, дошёл до собеседования, но в итоге не поступил. Уже в 2018 напишу заметку про решение тестового задания. Но ничего, ведь я поступил в «Школу дизайнеров» Бюро и успешно закончил первую ступень. В 2018 пойду на вторую.

Две недели назад побывал на лекции у Сергея Стеблины. Осенью был на курсе Игоря Штанга. Это было круто, в блоге есть маленький конспект.

Сделал

В этом году я запустил свой сайт. Попал в продуктовую команду av.by. А ещё выпустил схему метро Минска с Костей и Ильёй. Практики было валом и это радует.

Советую

С планом победы работать и жить стало интереснее. Кстати, я написал заметку, как завести себе такой план. Может вам будет полезно.

⌘ ⌘ ⌘

Остался последний пункт в рубрике «Сделать» — составить план победы на 2018 год. Тем более, у меня есть идея составить два плана. Первый — про дизайн, второй — всякие кайфовости.

Спасибо, что читаете меня в телеграме, пишете комментарии к заметкам. Для меня это важно. С наступающим новым годом, друзья! Я пошел, скоро вернусь.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

2017  

Процесс создания схемы Минского метро. Часть 3

Если вы пропустили, вот первая и вторая часть.

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

Май

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

Ответ Ильи:

Ой, как резко стало лучше. Прям сильно лучше и чище. Впервые ощущение что «почти готово» :-) Это обычно 50% по времени выходит. Только речку надо светлее. Цвет у зданий слабый. Может его как-то чёрным сделать, а не белым? Может смотреться эффектно.

Кстати, нам надо придумать куда принцессу из Monument Valley засунуть.

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

Может попробуем такую штуку для веселья? Только точки крупнее. Прямо так, конечно, отстой, но я бы поискал в таком направлении эффект. Хочется не градиент, а что-то более графичное:

Штука для веселья

Насчёт шрифтов:

Шрифт «Дин»
Шрифт «Стем»
Шрифт «Победа»
Шрифт «Формуляр»
Шрифт P22 Underground

В шрифте хотелось как-то отразить Минск. Немного советского союза в современной упаковке. Остановились на шрифте P22 Underground, решили примерить.

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

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

Получилась крепкая итерация. Собираю макет и отправляю. Илья отвечает:

Неочевидно, что «Площадь Юбилейная» — конечная станция.

В транслите не надо сокращать Ploshcha. И замените subway на metro.

В подписях линий не хватает слова «линия».

Звезда на «Площади Победы» неприятно касается подписи. Надо чтобы налезало сильнее. И снизу плохо разрывается линия. Возможно, круг надо сделать более прозрачным.

Фиолетовый цвет у вокзала не в тему. Лучше сделать чёрным, но крупнее.

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

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

Подписали сколько идти пешком из центра, добавили автовокзал и аэропорт.

Тут я понял, что мне не нравится как выглядит река. Цвет и форма слабые. Ещё нарисовал арены более детально. Костя был занят зданиями в центре, поэтому арены я набросал быстро сам, чтобы были. Переверстал график работы.

К этому времени Костя нарисовал Башни возле вокзала. Вместо одной из статуй принцесса.

Добавили башни, нарисовали новый остров и всякие мелочи.

Комментарии Ильи:

Было круче, когда точечки выходов были без «опасности».

Линии автобусов невидимые, их надо чернее.

«Площадь Ленина» подвинуть правее-выше, чтобы не мешала башням.

Чижовка-арена... Издалека кажется, что это танк.

Кажется, от деревьев падает тень или что-то такое? Она не такая и не туда падает, как у 3д-зданий. Надо подружить.

Остров хочется как-то подписать. А реку как-то с изгибом, картографически.

Замечания понятны, взяли в работу. По дороге у нас с Ильёй возник спор. Мы не могли найти общее решение о направлении теней у зданий и деревьев. Илья предлагал все тени направить вниз. Мы были за тень сбоку, она придавала объёма. Костя на кубе показал пример.

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

Мы пошли искать примеры и мерить разные тени на своих зданиях.

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

Собрали очередную версию. Точки выходов стали ярче. Подписали остров, реку и автовокзал. Убили поезда и убрали неровности в подписях.

Тени поправить не успели :-(

Илья: Кругленькие точечки возле выходов были веселее. Давайте уберем иконки у вокзалов. Они не красивые. И место вокруг «Вокзальной» самое грязное. Надо что-то там сделать. Вокзалы же относятся к одному месту, где «Вокзальная».

Я: Они реально так стоят!

Илья: Может, как-то так надо вообще, чтобы сломать таблицу возникшую:

Я: И вокзал не подписывать?

Илья: Уже написано «Вокзальная», что там подписывать? Можно эту иконку вокзала зелёной сделать. А около станции «Уручье», такой же синий самолёт большой. И под ней просто текстом подписать: «автобус 300Э в аэропорт».

Я: Но станция метро «Вокзальная» левее самого вокзала...

Илья: Хм, а может как-то удастся подпись налево вывернуть?

Я: Там же сразу синяя линия… если только её изгибать или прям на ней подписывать. Давай пока просто подпишем словами, уже чище станет. Потом вернемся к этому вопросу.

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

Новые тени у зданий :-)

Июнь

Илья:

В алфавитном указателе я бы убрал и отступы, и жирность первых букв. И я хочу чтобы использовались «птички» как в моей Московской схеме 2013 года. А для станций в центре можно использовать такие же кружочки, как обозначения выходов. Хотя... жирность может и выживет, попробуй. Ещё переносить лучше так, чтобы было поровну слов в группе. Нет смысла неделимыми оставлять группы на одну букву. Это же служебная штука, ей пользуется один пассажир из 1000. Она должна смотреться как фон.

Ещё подумай куда можно подписи наших имен вставить.

Что с аренами решили?

Арены решили рисовать объёмными, но после первого выпуска схемы.

Илья:

Указатель пока лайк.

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

Бесит уголок возле «Фрунзенской». Там и без плашки нормально всё читается.

У автобусных линий кружочек кажется неоправданным. Можно просто пенёк двойной. В две стороны, как у конечных станций линии метро.

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

Не уверен, что правильно понял, но покажу промежуточное решение.

Есть небольшой нюанс. Сейчас можно попасть на вокзал со станции «Площадь Ленина» не выходя на улицу. А «Вокзальная» находится ниже вокзала и пока не имеет туннеля к нему. И иконка поезда должна быть синяя. Ещё вокзал стоит прямо через дорогу от «Ворот Города». Это всё важно учесть.

Илья:

Я бы всё-таки на вот такую версию посмотрел ещё раз.

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

В этот же момент Илья написал:

Надо убрать её вообще за круг, чтобы не казалось, что она подходит для того, чтобы ехать на вокзал.

Давайте как-то покажем, что зелёная линия строится. Может нарисуем её как-то контурно.

Доработал замечания и собрал очередную версию.

Илья:

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

Подписи с нашими именами хочется вертикализировать, уменьшить и поставить справа от круга, прижав к краю формата.

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

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

Илья говорит:

Хочется вдохновиться долиной монументов ещё. У нас клёвые домики и клёвая графика у схемы в целом, а деревья выбиваются из этого. Можно попробовать вообще тупо нарисовать полупрозрачные сферы такие, как будто это шарики воздушные. Вот смотрите:

Мои подходы к деревьям:

Остановились на последнем варианте. Версия с новыми деревьями и зелёной линией:

Илья:

«20 мин от центра · 20 min from the centre». Вместо «·» нужна иконка человечка.

Ещё не очень понятно откуда идёт автобус №1

Линейное расположение деревьев на ул. Карла Маркса и Богдановича бесит.

«Октябрьская» и «Купаловская». Фигово выровнен транслит, хочется левее его. Проверь ещё остальные.

Давайте время в графике работы по-тафтиански напишем. 5:30am to 1:00am.

А что за штука в центре возле Дворца Республики? Прямоугольник на палке.

Костя:

Это экран на площади. Популярное место встреч, местные поймут.

Я набросал несколько вариантов отображения подписей на английском в узких местах.

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

Временно убили лифты и туалеты, но решили, что сделаем ещё подход во второй версии. Ещё подтюнили целую гору не очень важных мелочей :-)

Илья:

Есть опасение, что иконка железнодорожного вокзала похожа на пароход. Хотя графически она нормальная.

Деревья стали крутецкими, на мой взгляд.

Звезду у обелиска на «Площади Победы» хочется крупнее чуток.

К этому времени Костя нарисовал собор Святого Духа. Сделали правки и добавили новое здание на схему. Выставил схему в формат A2, сделал мосты для первой версии. Потом Костя нарисует крутые.

Вот вся работа за два месяца в одной картинке:

Закончился июнь. Про работу в июле и августе я расскажу в четвертой части. Кстати, четвертая часть будет завершающей. Там Костя дорисует основные здания в центре. Я расскажу, как мы верстали заголовок. Ещё про важность герба на схеме и не только. Ну и самая горячая тема — транслитерация. Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Процесс создания схемы метро Минска: часть 1 · часть 2 · часть 3
Первая версия схемы Минского метро.

2017   схема
Ранее Ctrl + ↓