Есть ли среди моих читателей юикс-исследователи? Вопрос к вам такой. Какое значимое открытие вы сделали в своей работе? О чём ещё не написали в книжках, а вы это обнаружили? Что следует знать дизайнерам?
Читать полностью…🔴 Запись мастер-класса Ильи Бирмана «Стоп‑слова в интерфейсе»
Запись в Ютубе:
https://youtu.be/fqXOvKWivi8
https://bureau.ru/courses/ui-online/ — практический курс Ильи Бирмана «Пользовательский интерфейс и представление информации».
Огромные усилия, чтобы не произошло ничего особенного
В предыдущем выпуске «Ток-шоу» Джона Грубера был интересный момент, начинается в 1:28:55. Грубер восхищается тем, насколько точно Вижен-про воспроизводит реальность вокруг тебя, как идеально совпадает область видимости:
https://daringfireball.net/thetalkshow/2023/06/30/ep-380
А гость Мэтью Панзарино в ответ вспоминает, сколько усилий Эплу пришлось в своё время приложить, чтобы на Айфоне нормально работал скроллинг («to make scrolling actually scroll»). Это первое, на что обращали внимание люди, когда брали в руки Айфон. И для этого пришлось найти нормальный тактильный экран, и найти достаточные вычислительные мощности, и чтобы при этом батарейка не убивалась. Огромные усилия, чтобы не произошло ничего особенного — чтобы просто работало, как ты и ожидал! Мы раньше даже не осознавали, говорит, что не получали ожидаемого, пока они нам не показали. Это были усилия просто чтобы «сделать ноль нулём» («to make zero, zero»).
Кстати, у самого Джобса на презентации Айфона был момент. Он говорил, что ранее секретно показывал Айфон кому-то из партнёров, и потом спросил, как ему. И тот ответил: «You had me at scrolling». Прям на презентации первого Айфона был слайд с этими словами.
И вот в случае с Виженом, продолжают они рассуждать, то же: сколько сил, времени, запредельных денег Эплу пришлось потратить, каких крутых людей привлечь не для того, чтобы что-то приукрасить, а просто чтобы мир вокруг выглядел как мир вокруг! Надеваешь шлем, и такой: «Так и в чём фишка?». Как будто надел обычные лабораторные защитные очки за семь баксов.
Меня такие примеры очень вдохновляют. Про удовольствие «сделать что-то незаметное очень хорошо» я рассказывал в недавнем докладе про Эгею — небольшой кусочек с 36:18:
https://ilyabirman.ru/meanwhile/all/what-aegea-does-talk/
В бюро сейчас проходит неделя «середина лета»:
https://bureau.ru/news/2023/midsummer/
Смысл такой: чтобы вы сильно уж не расслаблялись на своих шезлонгах (т. е. длинных стульях), мы делаем бесплатные мастер‑классы и даём скидку 25% на школы, лекции и книги.
В рамках этой недели у меня завтра в Зуме будет мастер-класс про стоп-слова в интерфейсе. Там совсем не такие стоп-слова, как на кинки-пати.
Кстати, недавний мастер-класс про взгляд новичка как раз заставил меня пополнить список стоп-слов. Расскажу, как одно с другим связано. Не пропустите!
В продолжение темы буквального перевода. Сегодня слушал очередной подкаст Грубера, и там обсуждали новую соцсеть Тредс. Кстати, подписывайтесь на меня:
ilyabirman" rel="nofollow">https://www.threads.net/@ilyabirman
Так вот, Грубер, говоря о запуске Тредса, предположил, что Цукерберг поспешил открыться, когда в Твиттере наступил очередной сбой:
— Let’s strike while the iron’s hot!
Так я узнал, что «куй железо пока горячо» можно перевести буквально, и это будет значить то же самое.
Наконец-то собрал плейлист лайков за июнь, а то вы уже заждались поди:
https://soundcloud.com/ilyabirman/sets/2023-jun
Развлекуха: дословный перевод
Многие фразы нельзя переводить дословно, получается чушь. Но сегодня — можно! Давайте составим список полезных словосочетаний и выражений.
Table devices
Physical face
Potato in the uniform
Staircase cage
I’m already not in a single eye
Whose cow would moo!
I must him $100
Nothing, that I’m late?
Дальше вы.
Один из самых бесячих багов телеги — это когда картинка уже давно загрузилась, а прогрессбар крутится до бесконечности и никак не может осознать, что она загрузилась.
На телефоне в таком случае можно её даже двумя пальцами растянуть, чтобы рассмотреть (и на это время крестик исчезнет), а на компе ничё не сделать, кроме как нажать крестик — картинка разблюрится и появится кнопка «Скачать» — и скачать заново.
А вот вам оригинальные идеи для комментариев:
1. «ХЗ, у меня ни разу такого не было, Бирман опять высосал тему из пальца».
2. «Ну так и скачай ещё раз, зачем делать из мухи слона».
3. «Пользуюсь Вотсапом и вам советую, там таких багов нет».
Маленький секрет Лайтрума. В нём есть вот такой двигунок в секции Calibration, типа насыщенность синего. Я фиг знаю, что он делает, но у кого-то сто лет назад подсмотрел совет его немного добавлять. Не знаю, при чём тут синий, просто все цвета на фотках становятся круче и живее, включая самые оранжевые. Рекомендую!
Читать полностью…Ну и кстати о визуализациях звука. В одном из недавних выпусков АТП обсуждали, что в эпловском ивенте слово «Сири» звучало как-то странно. Кто-то проверил на спектрограмме — и точно: в нём искусственно вырезали определённые частоты, чтобы разные приборы не реагировали.
Я смотрю на картинку и думаю: вот отличный пример того, когда нужна визуализация. И в этот же момент то же самое говорит Джон Сиракьюса (таймкод на скриншоте).
Глядя на такую картинку сразу понимаешь, что со звуком мухлевали. Похожие штуки делают всякие любители поискать подтасовки на выборах.
https://atp.fm/539
Кофейня в Тбилиси
Это красиво. Не графика-типографика, они вполне базовые, а вот сама идея.
Идёшь по улице и видишь два одинаковых морских контейнера, они поставлены друг на друга, и нижний — это кофейня, а верхний — это её вывеска. Ночью верхний ещё и вот так светится, красота!
Вывеска размером с целую кофейню. Кажется, чтобы такое придумать, нужно мыслить очень нешаблонно, непредвзято, аутсайд зе бокс. А на самом деле достаточно знать много шаблонов, иметь в голове библиотеку «паттернов проектирования».
И тогда там найдётся что-то вроде «сделать маленькую часть размером с большую», или «максимизировать функцию + применить модульность», или «идеальная модель это сам моделируемый объект» — все три дорожки могут привести вот к такому решению.
Творчество — это ремесло.
🙂
Ну посмотрим:
ilyabirman" rel="nofollow">https://www.threads.net/@ilyabirman
Ввв зачем-то в начале, ну и дела.
Тех, кто запнулся об аббревиатуру ПВУ, информируем:
Четыре аббревиатуры
Эти четыре аббревиатуры должен знать любой дизайнер:
ЛВУ — левый верхний угол,
ПВУ — правый верхний угол,
ЛНУ — левый нижний угол,
ПНУ — правый нижний угол.
Прочитал в мае в Москве доклад о своём движке блога «Эгея»:
https://www.youtube.com/watch?v=vrcXLs_PhVA
Встречается мнение, что движок блога — это простейшая задача веб-разработки. Нужно вытащить из базы данных заметки и показать их в определённом порядке. Ну ещё дать интерфейс добавления и редактирования. «Эгею» называют «лёгким» движком. Рассказываю, сколько всего «Эгея» делает под капотом, чтобы быть такой приятной и при этом оставаться «лёгкой» в глазах пользователей.
00:00 Интро
03:32 Обработка текста и содержимое заметок
09:36 Внешний мир: шаринг, сео, урлы, комментарии
16:59 Навигация: поиск, теги, рекомендации, перебивки и меню
25:48 Качество жизни
Смотрите и обязательно покажите знакомым программистам, чтобы настроить их на нужный лад.
Сайт Эгеи:
http://blogengine.ru/
Спасибо организаторам HolyJS — конференции для JavaScript‑разработчиков — за приглашение и запись выступления! Ребята просили передать, что сейчас открыт приём заявок на осеннюю конференцию:
https://holyjs.ru/callforpapers/?utm_source=partner&utm_medium=birman&utm_campaign=cfp
Промо-страничка ивента
Классная тень!
Она как бы настоящая, не из мира компьютерной графики, а из физического. И она моментально создаёт настроение, включает какие-то летние ассоциации. Круто, что летний эффект достигается элегантно, без излишеств, одной только тенью.
И параллакс-эффект уместный, что редкость. И текст хорошо читается.
Удачно, понравилось.
О значении контекста. Здесь слово «этаж» — лишнее. Что же ещё, в таком-то месте? А без слова «этаж» число влезет втрое крупнее — больше людей его смогут быстрее считать.
Читать полностью…Сейчас будет мой мастер-класс про стоп-слова в Зуме, приходите. Я тоже постараюсь зайти:
https://us06web.zoom.us/j/84265819431?pwd=U3hjTUZkZ1N6V2hEVTFmSElGcCt4UT09&utm_source=tg-n-multi-midsummerbrm-190723
Бирман озаботился будущим:
https://bureau.ru/soviet/20230718/?utm_source=tg-s-s-s230718-180723
Отельный мыльный тупизм
С вами постоянная рубрика «отельный тупизм». Часто в отелях мыло завёрнуто в одноразовую бумажную упаковку, и когда его распакуешь, деть его некуда — мыльницы обычно не предусмотрено. Мыло оставляет мыльные следы повсюду, а ещё его фиг схватишь, потому что при подсыхании оно прилипает. Приходится вот так класть на край раковины.
Весь отельный тупизм:
https://ilyabirman.ru/meanwhile/tags/hotels/
Удивительный дизайн, который вообще непойми как кто-то принял. Сверху и снизу нарисовано типа одно и то же, но снизу обтравлено (но не совсем), а сверху — просто обрезано. Вообще, про любое решение в дизайне должен быть ответ на вопрос «а почему именно так?».
Удивительно и то, что сок никак не называется. Фотка двухлетней давности, если что.
Запланируйте покупки в Бюро Горбунова и время на полезные бесплатные события с 17 по 23 июля
Середина лета приближается! Вместе с преподавателями бюро ребята запланировали интересные бесплатные онлайн‑встречи, расписание которых будет в понедельник, 17 июля.
А если вы давно хотели поступить в Школы бюро, записаться на подготовительные курсы, оформить подписку на лекции, электронные книги или полки — сделайте это с 17 по 23 июля. Вас ждёт сюрприз :‑)
Оставить почту, чтобы не пропустить сюрприз
#промо
Аэропорт Будапешта:
https://ilyabirman.ru/meanwhile/all/budapest-airport/
В основном элементы навигации.
Ура, кажется пятничная рубрика «фотопост» возвращается. А то предыдущий фотопост вышел в ноябре 2021 года.
УВДЦ выложило видео моих живых советов, которые прошли месяц назад в Челябинске:
https://www.youtube.com/watch?v=Yo5E5pJntR4
Ещё одна клёвая сессия про дизайн с прошедшего ВВДЦ:
https://developer.apple.com/videos/play/wwdc2023/10194/
Вот небольшой кусочек, который я себе сохранил в папочку «Анимация». Есть у меня такая тема на курсе, и в частности я там рассказываю про чистоту. Это про то, что даже в промежуточных кадрах не должно быть грязи. Вот тут Эплы как раз показывают, что́ делать при пересортировке, чтобы грязи не возникало.
На самом деле там ещё много приёмчиков совершенно контринтуитивных. Часто если сделать наиболее «естественным» способом — просто дать объектам плавно переместиться из точки А в точку Б — получится лажа.
Записываться на курс здесь:
https://bureau.ru/courses/ui-online/
Ну что, как вам голосовые советы?
Остался один неотвеченный вопрос в прошлом наборе. Иван спрашивает, классная ли это визуализация данных и что можно улучшить. Отвечаю ниже ↓
Давайте в комментариях собирать ещё вопросы на будущее. Правила такие же: задаёте вопрос и даёте ссылку на картинку, про которую этот вопрос.
Кстати, вот этот экран сразу непонятный, и никаким исследованием это не исследуешь.
Снизу рамочка. Там есть два разных цвета, и они воспринимаются как пара параметр — значение. Типа это выпадайка, где я могу выбрать, каким акаунтом я буду входить, и щас выбран ilyabirman. А кнопки «Войти» нет! Зато зачем-то есть кнопка Switch account (серая, задисейбленная).
А на саммм деле вот эта фигня в рамочке — это и есть кнопка «Войти», не похожая ни на одну кнопку «Войти» в мире.
Проклятие знака рубля
Сколько проверяю студенческих работ, столько вижу кривых знаков рубля. Реально у каждого третьего, если не чаще, знак рубля — не того шрифта, что цена. На зелёной кнопке вот он чуточку менее жирный зачем-то, а у пиццы — вообще другой.
Понятно, что иногда он слетает из-за того, что его нет в шрифте, но почему вы оставляете это так? Думаете, я не замечу?.. Какой тут ход мысли? Я не могу найти этому являнию никакого объяснения, так что обращаю внимание на то, что это никуда не годится совершенно.
Недавно делал мастер-класс про взгляд новичка, а вот вам ещё пример.
1. У Эпла в ПВУ Музыки есть галочка и многоточие. За многоточием какое-то меню, понятно, а что делает галочка? Хрен знает. Жму!
2. Мне предлагают всё удалить. В какой вселенной галочка означает «Удалить»?!
Если знать исходную задумку, то можно её понять. Типа на этом месте в других случаях находится кнопка «Скачать». А когда ты скачал, там появляется галочка, мол, всё скачано, можешь проследовать на посадку в самолёт. При нажатии на неё тебе предлагают обратное действие (а заодно и полное удаление, да).
Но экран сам по себе смысла не имеет.
Видео по вторникам: анимация против математики
Весело, а местами даже драматично, но понятно далеко не всё:
https://ilyabirman.ru/meanwhile/all/animation-vs-math-video/
Участница курса презентаций Ольга Богачёва презентует дизайн стенда для выставки Яндекс.Клауда. Это третья неделя курса, поэтому тут всякие подставы. В данном случае один из клиентов опаздывает, а второй — в полном восторге от всего. Как быть в таких ситуациях? Разбираем, что Ольга сделала классно, а что — рискованно. 23 минуты:
https://www.youtube.com/watch?v=3ldvcnhojj8
00:00 Интро и раздача ролей
00:37 Презентация
09:30 «Вопросы аудитории»
13:57 Разбор
Все детали про курс, включая подробную программу и кнопку «Запись»:
https://bureau.ru/courses/presentation-online/
Сегодня — последний день записи на июльский курс! Приходите обязательно.