Фрагмент № 11 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе в июне 2020 года. Покажите дизайнерам.
| 00:00 | Из-за чего форма кажется сложной |
| 02:05 | Синтаксис и длина элемента интерфейса «Добавить ещё почту или телефон?» |
| 07:40 | Вместо отключенных полей — настоящую карту |
| 08:55 | «Платёжный шлюз». Чиним язык роботов |
Программа, отзывы, запись
Снял подробное видео о Типографской раскладке. Рассказываю про символы, которые с ней можно вводить. Объясняю, почему она лучше альтернатив. Учу пользоваться, в том числе всякими хитрыми комбинирующимися акцентами:
| 00:00 | Что такое Типографская раскладка? |
| 01:30 | Надо ставить парные кавычки, длинное тире, честный апостроф |
| 07:40 | Другие полезные символы |
| 10:53 | Как вводят символы без Типографской раскладки? |
| 13:49 | В Типографской раскладке всё удобнее и логичнее |
| 14:19 | Плакат купите |
| 16:04 | Кавычки русские и английские, апостроф — логика расположения, как вводить |
| 19:45 | Чёрточки: дефис, тире, короткое тире, минус — логика расположения, как вводить, отступление про стандартную маковскую русскую раскладку |
| 24:15 | Другие символы и логика их расположения |
| 30:32 | Буквы с акцентами и комбинирующиеся акценты — как вводить и в чём разница между одним и другим |
Расскажите о раскладке всем, кого вы знаете.
Бывает, сайт начинается с большой «красивой» заставки:
Или так:
Это учебные работы из школы бюро, не предназначенные для публикации, поэтому в них могут быть использованы какие-то картинки «из интернета». Но откуда бы ни были эти картинки, первое ощущение от них — это «клипарт», то есть просто левые стоковые фотки, не имеющие отношения к делу и стоящие тут оттого, что дизайнер пытался сделать нарядно.
Ладно ещё у нас клёвые студенты и хотя бы ставят картинки по теме, а в жизни бывает вообще тупость: сайт программы бухучёта, а сверху большая фотография девушки с Макбуком и улыбкой. Видимо, имеется в виду, что девушка счастлива пользоваться такой классной программой.
Проблема таких картинок-заставок в том, что они пассивны: ничего не говорят о самом продукте и не помогают о нём узнать и его купить. Обычно их нужно прокрутить, и тогда тебе уже покажут что-то настоящее. Ты даже не уверен до конца: это просто фотка для настроения или на ней хотя бы продукт, который можно где-то купить на этом сайте. Если же мне удалось-таки поверить и захотеть продукт прямо с первой фотки, то непонятно, почему я не могу его купить сразу, а должен искать где-то ещё.
Если снять фотографии специально для этого места на сайте, они не перестанут быть «клипартом» в этом смысле.
Чтобы сделать полезный этаж, нужно оживить продукт на фотографии: привлечь внимание к важным деталям, добавить кнопку «Купить». Даже простой текстовый ценник уже превращает заставку в карточку продукта:
Ну, это если продукт на фотографии хотя бы есть, а не как в случае с довольной бухгалтершей.
Фрагмент № 10 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе в июне 2020 года. Покажите дизайнерам.
Здесь про то, что в таблице можно поставить что угодно куда угодно, если так надо для передачи сообщения.
Программа, отзывы, запись
3 апреля 2019 года посетил Хайфу — это главный город на севере Израиля, около часа на электричке из Тель-Авива. Сегодня покажу, на что она похожа.
Рядом с вокзалом — арт:
Ауди и Фольксваген от руки:
Бульвар с видом на порт:
На одной из улиц в центре встречается Елисеевский:
И Рублёвка:
За пешеходным переходом — лестница ведущая на параллельную улицу:
Хайфа расположена на горе, потому здесь очень рельефно. Вот пешеходный переход, в который не надо спускаться, потому улица сама поднимается:
Какие-то улочки:
Мегалестница:
Уличная табличка внизу:
Уличные таблички как в Тель-Авиве, но с красными треугольнищами:
Симпатичная самобытная табличка:
В целом — обычный жуткий израильской город:
Тут было бы совершенно нечего делать, если бы не одно но: тут есть метро! Ну, почти. Об этом в другой раз.
Фотографии 3 апреля 2019. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Сгоняйте в Хайфу!
См. также:
Изначально заметка была опубликована 10 декабря 2018 года в моём телеграм-канале @ilyabirman_channel
Хотел вам про разметку аэродромов рассказать. Вообще у меня на рабочем столе лежит папочка Airfield markings, я давно хотел написать (она создана в ноябре 2009 года; короче, время пришло).
Есть взлётно-посадочные полосы (по-английски короче: runways) и рулёжки (taxiways). У них очень разная разметка, и когда одно переходит в другое, кажется, будто они вообще ничего друг о друге не знают.
У ВПП всё белое: белые рамки, белый осевой пунктир и белые «пешеходные переходы» по краям. ВПП размечена как футбольное поле, в смысле, что это один объект, раскрашенный целиком по определённым правилам. Аэропорт Кеннеди в Нью-Йорке:
(Зацените клёвый жёлтый самолётик справа сверху.)
13L — это значит, что полоса проходит под углом 130° к чему-то там и она левая (где-то есть параллельная ей 13R).
Рулёжки — жёлтые. У них обязательно есть осевая, по которой надо передними колёсами ехать, и границы, которые в некоторых аэропортах размечают назойливым «забором» (немцы и англичане в такой фигне не замечены — у них-то мы и будем учиться информационному дизайну).
Там, где рулёжка подходит к ВПП, есть всякие линии со сложными узорами (они означают что-то про то, на каком расстоянии от ВПП нужно ждать в зависимости от погоды) и слова типа «Runway ahead» и «No entry». Вот узоры; возможно, это Франкфурт-на-Майне:
Когда рулёжка переходит в ВПП, от неё сначала остаётся только осевая, а потом она просто кончается. Типа, дальше уже надо разбегаться и взлетать. Или, если ты сел, то она вдруг начинается. Типа, давай сруливай с ВПП. Хитроу, Лондон:
Но самое красивое, что есть на аэродромах — это разметка автодорог, пересекающих самолётные места.
Есть дорожки, по которым ездят автобусы с пассажирами, заправщики, трапы, возилки чемоданов. Некоторые из них проходят в таких местах, где самолёты не ездят — там они размечены как обычные автодороги. А вот когда самолёты ездят, дороги обозначены красивейшими границами в виде полос в шахматном порядке. Причём смотрите, как шахматный порядок превращается в обычную линию там, где самолётов быть не может. Это Франкфурт-на-Майне:
Ну и на десерт ещё немного красоты:
В ответ на отсылку к науке от людей с нерациональным мышлением можно услышать что-нибудь вроде такого:
— Да наука — это просто ещё одна религия. Ты ж никак не можешь проверить, что там в чёрной дыре или в адронном коллайдере, и учёные тебе могут что угодно говорить. Точно так же выколачивают бабло из общества на свои ритуалы необъяснимые. Просто верить учёным это современно и круто, а за веру в бога тебя засмеют, вот и вся разница.
Тут много чего можно возразить по существу (и у меня может когда-нибудь дойдут руки), но любопытно, что от учёного никогда не встретишь заявления, что «религия — это просто ещё одна наука».
В глубине души обе стороны дискуссии одинаково понимают, какой из них можно доверять. Сравнение с религией используется, чтобы ослабить доверие, а сравнение с наукой — чтобы усилить, и это универсально.
Любая фигня от астрологии до гомеопатии хочет, чтобы её считали наукой, а методы называли научно обоснованными. Потому что даже для её целевой аудитории это — знак качества.
Многие люди путают слова «инсайт» и «инсайд». Избежать ошибки поможет простое правило: не использовать эти слова.
Фрагмент № 9 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе в июне 2020 года. Покажите дизайнерам.
| 0:00 | Упрощаем элементы «Доп. телефон», «Комментарий к заказу». Поля, увеличивающиеся при фокусировке |
| 2:13 | Незаконно убираем все признаки поля у поля «Комментарий к заказу» |
| 4:04 | Упаковываем несколько полей в одно |
| 7:48 | Как сочетать визуальную чистоту и понятность. Тестирование |
Программа, отзывы, запись
Фрагмент № 8 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе в июне 2020 года. Покажите дизайнерам.
| 0:00 | Фокус в таблице: залезаю заголовком одной колонки на территорию другой, чтобы всё компактнее уместилось |
| 2:08 | Пример вёрстки с переносом наверх их карманного словаря |
Программа, отзывы, запись