Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Пользовательский интерфейс

Принципы и методы

Элементы

Хотелки и изобретения

Наблюдения

Ещё теги

13 ноября   доклады   из Тель-Авива   пользовательский интерфейс   студентам
2 ноября   Андроид   пользовательский интерфейс   портфолио   релиз

Просмотр картинок в браузере

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

У Дропбокса и Яндекса вообще треть экрана справа отъедает неведомая панель, смысла которой я не знаю, потому что всё, что меня в ней интересует — это как её нахрен убрать.

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

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

Дроплер всегда вёл себя лучше всех, но в последнее время стал картинку показывать не тегом img, а фоном, поэтому я теперь не могу её из браузера затащить в Фотошоп или сохранить по правой кнопке. Спрашивается, нахрена было ломать то, что работает?

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

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

2 ноября   бесит   пользовательский интерфейс

Лекция по теме «Модальность»

Для школ бюро снял лекцию «Модальность»:

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

Только в моём предмете («Интерфейс и информация») таких лекций пара десятков, а самих предметов у нас восемь. Ну и кроме лекций есть ещё литература, тесты и задания. Это на первой ступени. А потом ещё вторая и третья ступень.

Ну короче, смотрите видос.

А ещё у нас появилась демоверсия школы. Там ещё несколько открытых лекций, тестов и заданий.

Сейчас идёт набор в наши школы.

27 октября   видео   лекции   пользовательский интерфейс   студентам   Школа стажёров

Телеграм за неделю 11—15 сентября 2017

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

Понедельник, 11 сентября

Илья Страйков показывает невероятно красивую неведомую панель управления:

Смотрите, мы опубликовали карты Московского марафона и других забегов серии:
http://bureau.ru/projects/moscow-marathon/

Обязательно идите смотреть в ведро (кажется, одно из самых длинных на сайте). Начало всегда смотрится особенно страшно:
http://bureau.ru/projects/moscow-marathon/recycled/

И обратите внимание, что это не просто карты, а конструктор и гайдлайны по его использованию, причём гайдлайны клиент нам разрешил опубликовать (ссылка на Гугль-док в конце по первой ссылке). Например, когда мы рисовали карту марафона (в июне), стартовые кластеры должны были ещё выглядеть как-то так:

А в реальности всё изменилось, и сейчас уже выглядит так:

Вторник, 12 сентября

Номер дома можно написать вот так:

Читатель Антон Репушко: «Привет. По поводу номеров домов: так уже делают где-то в России. Не знаю, что за город на фото» —

Ну, не совсем так, конечно. Но тоже можно.

В сегодняшнем совете про транспортные схемы расказываю штуку про планирование маршрутов:
http://bureau.ru/bb/soviet/20170912/

При этом забыл рассказать Александру, что у него прикольное обозначение парков:

Новости веб-дизайна. Эпл осознал, что прокрутка круче карусели, и выпустил нормальную главную страницу:
https://apple.com/

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

Но вот во всяких таких штуках я не был уверен до презентации:

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

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

О, спасибо всем, кто прислал картинку. Я вот эту имел в виду:

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

Надеюсь, к Ай-ОСу 12 сделают редизайн статус-ушей такой, чтобы смотрелись получше.

Ещё картинка:

Я уверен, что первое ощущение у большинства, что справа лучше (у меня первое ощущение такое же, конечно). Но это не лучше, это лишь привычнее. Помедитируйте над этими картинками, если сомневаетесь. И будьте смелее :-) Если внедряете чё-то новое, внедряйте нагло.

Бонус: видимо, на Айфоне 10 нельзя включить отображение батарейки в процентах. Отлично! А что с остальными индикаторами? Я пока не знаю, но геолокацию, например, можно показывать вместо сигнала, когда она используется. Блокировку поворота можно и не показывать. Блутус должен быть просто всегда включён, и нефиг это показывать.

А вот другая картинка, которая кажется ещё более странной:

Это кадр из видоса Эпла, где они объясняют, как горизонтальным приложениями себя вести (тут речь о полях слева и справа, чтобы текст не подлез под выкус). Тоже сначала кажется, что пипец. Самое некрасивое тут — это как верхняя полоска отрезается скруглениями. Хочется её сделать побольше в высоту, и тогда вроде будет окей.

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

Уверен, после пары дней с Айфоном 10 человек просто перестанет замечать эти скругления и выкус, а будет воспринимать картинку целиком, вместе с «невидимыми» частями.

Читатель Иван Акулов: «А это в новых айфонах ты видел, кстати?».

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

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

Студия Лебедева издала книгу Пола Рэнда «Искусство дизайнера» (я не читал):
https://www.artlebedev.ru/izdal/iskusstvo-dizaynera/

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

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

Читателю этот излом в абзаце на правой странице в теории должен говорить «это продолжение текста из левой страницы». На практике же он говорит «у верстальщика руки из жопы».

В Студии Лебедева верстальщики в сто раз круче, чем я, разумеется, и об их профессионализме вообще речь не идёт. Но просто следование этой нелепой традиции приводит к фиговому результату.

Как быть? Есть два железобетонных варианта.

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

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

Но второй вариант выглядит не очень красиво, потому что, ну, нафига нам эти выкусы у прямоугольников, если и так видно, что это абзац?

А первый вариант может не подходить, если мы почему-то не хотим использовать швейцарский абзац (ну, мало ли) :-)

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

Выглядит так:

(У нас как раз тот случай, когда швейцарский абзац мы не хотим использовать просто потому что не хотим — такую мы выбрали эстетику для серии учебников.)

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

После заголовка абзацу тоже не нужен выкус, только после абзаца (p):

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

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

Теперь я понял, что я бы хотел, чтобы архив телеграма оставался у меня в блоге. Хорошо бы, чтобы в каждый воскресный вечер выходила заметка. Ну или раз в две недели, если неделя выдалась не очень активная. Собирать такую заметку регулярно мне некогда. Если вы вдруг готовы вечером воскресенья приносить мне заметку, чтобы я просто опубликовал, напишите, пожалуйста. Я вам расскажу, как всё делать. И да, я бы опубликовал задним числом более ранние недели тоже.

18 сентября   Айфон   вёрстка   дизайн   пользовательский интерфейс   телеграм-канал   Эпл

Книга «Пользовательский интерфейс»: часть четвёртого раздела

Недавно мы открыли часть четвёртого раздела электронного учебника «Пользовательский интерфейс». Четвёртый раздел называется «Экраны», а новые главы — «Окна» и «Формы».

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

В работе над интерфейсом читателю поможет подборка типовых шаблонов организации окон и варианты их комбинирования.

Форма — концентрат интерфейса и большое препятствие для пользователя. Задача проектировщика — упростить человеку её заполнение. В главе «Формы» рассматриваем и конструкцию, и поведение: выравнивание, размеры полей, сообщение об ошибках, обязательные и необязательные поля.

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

13 сентября   книга   пользовательский интерфейс

Табы в редакторах кода

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

Это полная тупня: список файлов у меня и так слева есть, зачем мне он же ещё раз в табах?

Чего я хочу, так это чтобы табами открывались целые проекты. В одном табе — один список файлов и папок слева, в другом — другой. Сейчас приходится плодить окна.

В ВС Коде можно исхитриться и всё-таки открыть несколько проектов в виде табов, но это адски сложно и неуправляемо. Клавиатура по-прежнему управляет бессмысленными табами файлов, и жить так нельзя.

Или, может, я просто не умею настроить?

7 сентября   пользовательский интерфейс

Три уровня агрессии глагола

Хороший редактор избегает повелительного наклонения в интерфейсе и навигации. С чего бы программе или магазину командовать человеком?

Но повелительное наклонение само по себе нейтрально. В интерфейсе электронного киоска:

Вставьте купюры

В обращении на «мы» уже чувствуется пассивная агрессия и совковое хамство. На турникетах московского метро:

Проходим слева

А в обращении в прошедшем времени слышится угроза физической расправой при непослушании. В тёмном дворе:

Мобилу сейчас же отдал!

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

5 сентября   навигация в общественных местах   пользовательский интерфейс   русский язык

Не используйте аккордеон

Есть такой элемент интерфейса — аккордеон. Это когда в вертикальном списке есть распахивающиеся секции:

Из работы студента школы дизайнеров

Этот элемент очень неудобен.

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

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

На телефоне, где экран маленький, с аккордеоном особенно тяжёло. Недаром такого элемента нет среди стандартных элементов интерфейса Эпла и ни в одном их приложении.

Не используйте аккордеон.

29 августа   пользовательский интерфейс   студентам

Книга «Пользовательский интерфейс»: готов третий раздел

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

Книга «Пользовательский интерфейс»: готов третий раздел

Вы наверняка слышали о стоп-словах — мусорных словах, которые удаляют или заменяют информативными. Термин появился в бюро, когда мы собирали примеры слов из навигации и интерфейса, которые малоинформативны и даже сигнализируют о проблемах в дизайне. В главе «Слова» приведены примеры стоп-слов, которые встречаются в заголовках экранов, подписях кнопок и меню, текстах сообщений об ошибках. Рядом даны хорошие формулировки — однозначные, информативные и человечные — которые потребуют изменений в интерфейсе.

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

Глава «Язык роботов» посвящена побочному эффекту технозависимости — машиноподобному языку в интерфейсе:

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

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

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

2017   книга   пользовательский интерфейс
Ранее Ctrl + ↓