Позднее Ctrl + ↑

Дай нажать

Это такой принцип в интерфейсе — называется «дай нажать».

Приведу три примера.

Группа чекбоксов с одним обязательным

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

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

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

Это плохое решение: я могу захотеть сначала отключить неподходящий вариант, а потом включить подходящий. Блокировка заставляет меня совершать действия в определённом порядке. Причём это ещё и неочевидно: если у меня останется последней определённая опция, скажем, «в чате», и она заблокируется, то это будет выглядеть так, будто уведомление в чате подключать обязательно, а это неправда. Я хочу его выключить, но интерфейс не даёт мне нажать туда, куда я хочу.

Лучше так: при отключении последнего чекбокса, сразу включать какой-то дефолтный, скажем, «письмом». А если я его отключил последним, то включать второй по предпочтительности, скажем, «по телефону». Так интерфейс не будет мне мешать нажимать куда я хочу, но и не даст оставить недопустимое состояние.

Чекбокс и поле

В настройке комментариев в Эгее есть чекбокс «присылать по почте», которому подчинено поле адреса:

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

Можно было бы блокировать поле пока чекбокс выключен — всё равно заполнять его нет смысла. Но это бесит. Может, я хочу заполнить адрес, а потом включить чекбокс? Ещё хуже было бы не давать выключить чекбокс, если адрес заполнен. Я же хочу выключить, дай нажать!

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

Выбор даты

Вот возможный вариант реализации выбора даты рождения в интерфейсе:

Как вы знаете, некоторых дней не существует в природе, например не бывает 31 июня. А 29 февраля в некоторые годы бывает, а в некоторые — нет.

Чтобы не дать пользователю ввести несуществующую дату, некоторые разработчики убирают из поля дня несуществующие дни. То есть если выбран месяц июнь, то дня «31» просто не будет в выпадайке. Но что, если у меня день рождения 31 августа? Я хочу ткнуть в 31, а потом выбрать август. Дай нажать!

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

Лучше так: при вводе дня, несовместимого с текущим выбранным месяцем, развыбирать месяц —

Если я выбрал 29 февраля, а выбранном году такого нет, развыбирать год.

Отчасти похожая мысль — кнопка «Купить» всегда доступна.

Общественный транспорт в поездках

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

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

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

А в Чикаго метро ходит прямо в аэропорт, но едет оно бесконечно долго и даже близко не приезжает туда, где я останавливался. В итоге я проехал полпути на метро, а потом взял Лифт (это как Убер, только Лифт) за треть того, что стоил бы Лифт из аэропорта. Тоже нормально. Заодно метро посмотрел.

Исключение из принципа — Вильнюс. Там Яндекс.Такси из аэропорта в центр стоит типа три евро. Сорян, при таких ценах я даже не интересовался, существует ли хоть какой-то ещё способ добраться.

Кстати, в Москве я тоже давно езжу из Шереметьева на такси, но в Москве я не турист, и мне приключения ни к чему. К тому же, с тех пор, как Аэроэкспресс до Белорусской стал стоить 500 ₽, а такси до подъезда 650 ₽, нужно быть полным дебилом, чтобы ехать на Аэроэкспрессе.

Телеграм за неделю 28 августа — 3 сентября 2017

21—27 авг ← → 4—10 сен

Среда, 30 августа

Паша Омелёхин дополнил схему московского метро:

Инстаграм Эпла — отличный пример умной рекламы в соцсетях. Вместо того, чтобы лепить на айфоны подписи с фичами, они просто публикуют клёвые фотки и видосы, снятые на айфон:
https://www.instagram.com/apple

Ещё, если не видели, посмотрите страницу «Как снимать на Айфон»:
http://apple.com/iphone/photography-how-to/

Вот такими штуками должен заниматься современный веб-дизайнер.

Пятница, 1 сентября

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

Вот так было сначала, и меня парило, что рядом с примером про поиск стоит поиск от самой книги:

Вообще это стандартный для наших шаблон, когда на обеих сторонах картинка + текст, а справа снизу ещё ссылки. Но тут он не очень работает, надо было придумать исключение. Любите исключения! В итоге получилось так:

Вот пример из другой области на эту же тему. Ворд:

Есть стандартный элемент: выпадающее из тулбара меню со списком стандартных опций и пунктом «Больше...» в конце, за которым прячется диалоговое окно, где можно ввести точное значение. Но в этом контексте он читается совсем по-другому, как будто там продолжится прогрессия: 3,5 · 4,0 · 4,5 и так далее. Надо было сделать исключение и написать «Другое значение...», например.

В интерфейсе «Мимика», который я делал, есть слева список моков. Там можно добавлять и удалять моки и есть поиск:

Подробнее о проекте:
http://ilyabirman.ru/projects/mimic/

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

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

А вот что обращает на себя внимание в Ютюбе:

(Не знаю, может, ваше не обращает.)

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

У Ютюба на днях случился ребрендинг, кстати. Фиг знает почему — может, просто эффект новизны — но есть реальное ощущение, что стало круче и взрослее. Вся петрушка тут:
https://www.youtube.com/yt/about/brand-resources/

Заодно: терпеть не могу, когда говорят или пишут «Ютуб» (просто тупо, в буквальном смысле) или «Ютьюб» («миньет»).

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

Заодно небольшой секрет продуктивности. Когда пишу «смогу исправить через несколько часов» это значит просто, что я решил, что пока не буду на это отвлекаться от того, чем занимаюсь. Никто не умрёт из-за этих пятен, а то, что чуть больше людей увидит, что я накосячил — ну, подумаешь.

Суббота, 2 сентября

Теперь в последних четырёх миксах не просто показан плейлист, а по нему бежит курсор, пока играет музыка, ну и можно тыкать, чтобы прыгнуть в нужный трек. Это так умеет пока не выпущенный Жуэль. Зацените:

http://ilyabirman.ru/mixes/catch-my-flow/
http://ilyabirman.ru/mixes/loophole/
http://ilyabirman.ru/mixes/design/
http://ilyabirman.ru/mixes/use-me/

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

Воскресенье, 3 сентября

Вот я зашёл на сайт подкаста, мне нужен 138-й выпуск. Что мне делать? Из каких соображений показаны последние два, а не сто? Ну ладно, жму снизу на «архив» (интерфейсное стоп-слово: откуда я должен знать, начиная с какого выпуска уже «архив»?)

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

Мимо. Перебирать неохота. Замечаю, что на странице 10 выпусков. Раз на первой был 169-й, а мне надо 138-й, то мне на четвёртую страницу.

Ура, нашёл!

Вот так появляются чудовищные интерфейсы. Человек, который проектировал этот сайт, скорее всего даже не думал, что делает полное бесчеловечное говно. Он просто разделил по 10 (ну а по сколько), просто поставил листалку (ну а как), просто показал последние два на главной (ну типа чтоб не один) и просто убрал всё остальное в архив (ну а куда). Ни в какой момент злого умысла не было.

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

Варламов опубликовал подборку клёвых пешеходных переходов:
https://varlamov.ru/2542161.html

Дайджест подготовила Наталия.

Пять станций метро «Вестерн»

Это схема метро Чикаго, которую я видел ещё до того, как побывал в Чикаго:

Помимо уродства, мне в ней бросились в глаза две вещи.

Во-первых, тут какие-то очень странные названия станций: California, Grand, Lake и даже тупо Chicago. Да они ещё и повторяются! В нескольких местах в Чикаго есть станция метро «Чикаго», ну не чушь ли? Это ещё что, на одной только голубой линии станций Western — две!

Во-вторых, вдоль улиц идут какие-то маркировки 2400N, 0 N/S, 1600W. Судя по буквам, это как-то связано со сторонами света, но что с этим делать — хрен знает.

Что оказалось.

Станции чаще всего называются по названиями улиц. Например, есть Lake Street, и на ней станция Lake. В нормальном городе станцию бы назвали Lake Street, но тут решили Street выкинуть, и это, вероятно, не лишено смысла, а то это слово было бы в большинстве названий. Улицы тут, как правило, очень-очень длинные, поэтому они пересекаются с разными линиями метро в разных местах, а вот Western Avenue, так уж вышло, пересекается с голубой линией в двух местах. Всего вы можете увидеть пять станций Western находящихся в очень разных местах этой 44-километровой (!) улицы.

— Так, ну я на станции Вестерн, ты скоро?

В Чикаго можно было бы провести самый скучный марафон на свете — по Вестерн-авеню:

А маркировка про «1600 ватт» означает нумерацию домов по улице, которая тут живёт в общей координатной сетке и не зависит от длины конкретной улицы. Например, я жил по адресу 900 N DeWitt Place. Такой адрес позволяет без карты понять, где именно на этой улице находится нужный дом. Другое дело, что всё равно откуда-то надо знать, где находится сама эта Дэвитт-плейс. В этом плане на Манхэттене круче система. Благодаря нумерации стрит и авеню, там вообще большинство адресов понятны без карты.

Эти координаты ещё висят на дорожных знаках на каждом перекрёстке. Вот этот висел рядом с моим отелем:

Нарезка полутора недель в Нью-Йорке

Когда я доберусь до разгребания фоток — никто не знает, поэтому пока вот вам разрозненная видеонарезка из Нью-Йорка:

Когда я такое делал после зимовки в Тель-Авиве, вам понравилось.

Настроение Тель-Авива

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

Улицы в центре выглядят примерно так:

Крупная надпись: «Горячий суп».

Чтобы стать архитектором в Тель-Авиве достаточно выучить понятие параллелограмма. Выяснилось, что это называется баухаус.

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

Откуда лужи? Ну так зима же, может и дождь пойти.

Плиточка:

Вот моя любимая улица Нахалат Биньямин:

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

Легко сделать кадр, где из-за трущоб торчит небоскрёб:

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

Или пьют свежевыжатый сок на любом углу:

Или пьют кофе на одноместных лавочках (правильная кофейня, под чёрной маркизой слева — «Кафеликс» в Яффе):

Вся жизнь происходит на улице.

Это вот «Букке», которое я уже упоминал в прошлой заметке:

Вечерами все тусят в барах:

А вот просто тихая улица где живут люди:

Тут хорошо:

Переулочек:

Кафешки встраиваются в углы самых неприметных улиц:

Тут чё-то никого нет, но зацените лавочки из говна и палок. Это тель-авивский уют:

Типичный подъезд. Дверей у подъездов не бывает. От бомбы они всё равно не спасут, а больше тут бояться нечего:

Стрит-арт. Я сделаю отдельную заметку про Флорентин — район, где всё изрисовано:

Центр всей жизни — бульвары:

Там всегда куча народу:

Одну из бульварных кафешек, где я любил работать, тоже показывал в прошлый раз.

Вечерами расстилают ковры и люди устраивают пикники:

Хватит на сегодня.

Фотографии из зимовки 2017—2018. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Тель-Авив!

Ещё Тель-Авив:

Озеро Верхнее

Вы попали на урок географии, проходите, садитесь.

Чикаго стоит на берегу озера Мичиган (на фото). Также одна из основных центральных улиц города называется Мичиган-авеню. Его пересекают Онтарио-стрит, Эри-стрит, Гурон-стрит и Супериор-стрит.

Со школы помню термин Великие озёра. В голове кроме Мичиган есть слова Онтарио и Гурон. Никогда бы не вспомнил, что есть ещё озеро Эри, но оно есть. Но самое «великое» называется Супериор, и я в упор не помню никакого подобного названия. Это так странно — помнить названия всех озёр кроме самого большого.

Оказывается, по-русски оно называется с какого-то перепугу «озеро Верхнее». Я, конечно, понимаю, что super это буквально «над», но superior это всё-таки «превосходный», «старший» (по статусу), «высший», но как будто бы никак не «верхний». И чего вообще было переводить одно из названий?

Так, уже прозвенел звонок, но пока вы не разбежались, ещё один важный факт из географии. С Великими озёрами реками связаны ещё несколько больших озёр, одно из которых называется Nipissing. По-русски — так же.

ManyChat ищет продуктового дизайнера

Тут снова вакансия.

Реклама. Текст предоставлен клиентом

Всем привет!

Меня зовут Микаэл Ян, я — CEO и кофаундер компании ManyChat.

ManyChat — это платформа, которая помогает бизнесам делать маркетинг, продажи и поддержку через через Facebook Messenger.

На данный момент к нам подключено больше 400 000 бизнесов в 100+ странах мира, которые общаются с 170 миллионами своих клиентов, отправляя через нас 3 миллиарда сообщений каждый месяц.

Мы очень быстро растем и являемся лидерами messenger marketing индустрии.

Такой рост связан с тем, что пользователи со всего мира перешли на мессенджеры как основной канал коммуникации, и теперь миллионы бизнесов переходят вслед за ними, потому что получают результаты в 10 раз лучше (конверсии/продажи), чем через старые каналы коммуникации (email, SMS, телефон, сайт).

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

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

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

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

Мы ищем человека, который сможет вывести UI и UX часть нашего продукта на качественно новый уровень.

400 000 бизнесов и 3 миллиарда сообщений — это только начало. Если мы хотим вырасти в 10 раз в ближайшие пару лет, то нам предстоит много работы по упрощению пользовательских путей до ценности. Мы ищем человека, который поможет нам это сделать.

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

P. S.: Мы постоянно в поиске талантливых специалистов по всем направлениям продукта и разработки. Если вас заинтересовал наш проект — загляните по ссылке выше, возможно у нас есть вакансия для вас.

До встречи на борту! 🚀

Про подготовительные курсы школ бюро

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

Среди лекций подкурсов (так мы их коротко называем внутри) есть одна моя лекция, называется «Горячие клавиши. Как работать в десять раз быстрее». Обычно молодые дизайнеры рассказывают, какой Фотошоп медленный, и как всё быстро делается в Скетче или Фигме, а потом я открываю Фотошоп и делаю в нём всё так быстро, что они не успевают ничего понять. В лекции я показываю фундаментальные вещи: горячие клавиши, маски, режимы смешивания, смарт-объеты, композиции слоёв.

Даже если ваш основной дизайнерский инструмент не Фотошоп, нужно это всё понимать. Любой повседневный инструмент нужно хорошо изучить и настроить для быстрой работы. В лекции я ещё коротко говорю о Дроплере, Типографской раскладке; но это применимо ко всему: браузером и почтой тоже надо уметь пользоваться нормально. Когда я вижу, как люди меняют стиль заголовков в Гугль-доке, кликая мышкой в меню, мне больно. В это время вы могли бы гулять или смотреть кино.

А, ещё недавно добавилась новая лекция Макса Ильяхова «Основы Фотошопа: макет, текст, работа с иллюстрациями».

Следующий набор в школу будет только в 2019 году, а на подкурсы можно записаться и сейчас (до 18 ноября). Будет больше времени подготовиться. Занятия начинаются 19 ноября, а запись закроется 18 ноября — не откладывайте поступление на последний день.

Ранее Ctrl + ↓