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

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

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

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

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

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

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

Пользователь «Же-же» Куиет написал о книге «Пользовательский интерфейс». Привожу текст полностью — мало ли, сколько осталось жить «Же-же»;

Сначала я купил подписку на эту книгу себе. Потом, посмотрев на меня, подписку себе купил коллега. Потом я договорился с руководством и оформил её на свой отдел (корпоративная лицензия на 5 человек) и все ее прочитали, прошли тесты и отозвались довольно позитивно.

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

До выхода бирмановского текста я рекомендовал в качестве стартового руководства по GUI дизайну старый труд Владислава Головача (еще revision 1), тот, который потом Владислав постарался отовсюду изъять. Его хорошая, последовательная, но несколько устаревшая, мобильные приложения тогда практически не рассматривались.

Работа Ильи Бирмана снабжена современными примерами, хорошо сверстана (про изьяны — ниже) и это тоже хорошее начало для знакомства с темой. Но. «Но» оказалось немало.

Надо пояснить, что книга доступна только онлайн, смотреть её можно лишь в браузере, только по  подписке (~1000р первые три месяца, и около 50р дальше).

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

Второй неприятный момент — книга явно тестировалась только на очень современных платформах, и то не на всех. Хорошо её читать на десктопе в Win10/Chrome или MacOs/Safari, или на яблочном планшете. Уже мобильный Хром покажет содержимое неправильно. А про сочетание Linux/Firefox лучше забыть, там получается страшная каша из правильно и некорректно отображенных элементов. А Linux, причём не последней версии, для многих нормальная рабочая платформа, мы же не расисты.

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

Все отметили плохое сочетание директивности («ясно, что надо делать так») и строгости с небрежностью в примерах и формулировках (ну зачем вот эти «Нешанал-географик» и «Финал кат»? Жутко режет слух работающих в англоязычной среде). Неточность формулировок в тестах при очень большой жесткости тестов тоже вызывает дискомфорт.

Очень забавно, что дизайн книги нарушает некоторые собственные положения:

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

Люди с математическим складом ума похихикали над декларированием фундаментальности книги (чего нет, того, увы, нет почти совсем).

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

У Бюро Горбунова есть страница книги с примерами, можно посмотреть и решить, нужна ли она вам.

 1 комментарий    899   2018   книга «Пользовательский интерфейс»   цитаты

Найти редактора — нейтив-спикера

Мы анонсировали, но пока не выпустили английскую версию книги Артёма Горбунова «Типографика и вёрстка». Ещё не анонсировали, но работаем и над английской версией моей книги об интерфейсе. И хотим в будущем делать другие книги на английском.

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

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

Я не ищу переводчика. Скорее, мне нужен пишущий нейтив-спикер, которому было бы интересны наши книги, и который мог бы их прочитать, подчеркнуть все корявые места и предложить другие формулировки. Хорошо бы, чтобы это был прям человек из дизайна, знакомый с типографической и интерфейсной терминологией, чтобы не получалось, что вещи, которые Мюллер-Брокман или Раскин называют так, мы вдруг называем сяк.

Как бы вы искали такого человека? Или как бы вы решали такую задачу?

 4 комментария    799   2018   вопрос   книга «Пользовательский интерфейс»

Модальность и редактор «Вим»

Читатель книги «Пользовательский интерфейс» Валентин Немцев написал мне интересное письмо про модальность и редактор «Вим». С разрешения Валентина привожу его целиком:

Илья, привет!

В Пользовательском интерфейсе ты упомянул редактор vi и его режимы для вставки и редактирования текста. Мне показалось, что ты считаешь, что модальные текстовые редакторы морально устарели.

Я пользуюсь исключительно vim (современная версия vi) для написания кода и хочу рассказать, почему я предпочитаю его всем другим редакторам кода, несмотря на модальность, надеюсь, это будет интересно.

Работа с кодом сильно отличается от работы с обычным текстом: программист редко пишет больше нескольких строчек кода подряд и постоянно вносит довольно сложные и разнообразные правки. В этой ситуации помогает интерфейс, в котором почти на каждую букву назначена команда, которая двигает курсор, меняет текст или делает что-то еще, а для ввода текста сделан отдельный режим. Команды vim вместе образуют что-то вроде языка редактирования текста, знание которого позволяет чувствовать себя свободно при правке кода. Кроме того, для ввода команд мне не нужно тянуться к стрелочкам или мышке, зажимать больше двух клавиш за раз, делать что-то с зажатой кнопкой или нажимать одну и ту же кнопку больше 2-3 раз подряд, как получается в обычных редакторах.

Теперь про модальность. Продвинутые пользователи vim очень редко совершают модальные ошибки. Дело в том, что режим вставки не является режимом в строгом смысле, согласно определению Раскина. Этот режим включают только на время ввода текста, а так как за раз вводится небольшое количество текста, переход в режим вставки, ввод текста и выход из него становятся одним жестом. Это все работает, если ты выучил vim, умеешь печатать вслепую, ну или достаточно уверенно, иначе ввод текста не становится частью жеста и все разваливается.

На самом деле в vim больше десятка режимов, они включаются по-разному, но все они отключаются возвратом в нормальный режим, часть автоматически, когда vim распознает конец команды по смыслу, часть — нажатием esc. Вставка текста ощущается как ввод чего-то в Spotlight, где ты не забываешь нажать enter после окончания ввода. Индикация режимов существует, но нет нужды ей пользоваться. В случае, если в ответ на команду происходит что-то не то (например, из-за опечатки), я нажимаю esc, чтобы вернуть редактор к известному состоянию, после чего отменяю последнюю правку, если она случилась и пробую еще раз.

Вот пример относительно частой операции: я хочу заменить строку в кавычках (включая кавычки), внутри которых сейчас стоит курсор, на имя переменной var. Для этого я набираю ca"var, что можно читать как change text around quotes to «var». Vim переходит в режим вставки после нажатия ", я нажимаю esc, чтобы вернуться в нормальный режим. Описанная выше команда (включая возврат в нормальный режим) вводится в один жест, я не задумываюсь над последовательностью кнопок, не смотрю на индикацию текущего режима и никогда не забываю нажать esc в конце.

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

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

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

Последний на сегодня интересный факт про vim — его первую версию, vi, создали 40 лет назад для терминалов, у которых появился монитор вместо принтера (отсюда название, visual), а на клавиатуре не было стрелок. Современные версии vim до сих пор используют текстовый программный интерфейс, сделанный для терминалов тех лет. Несмотря на то, что этот интерфейс с тех пор получил поддержку мыши и другие обновления, по своей сути этот интерфейс ближе к телеграфу, чем к современным графическим интерфейсам. MacOS и встроенный в нее Terminal с запущенным vim, работающий на современном макбуке, до сих пор во многом эмулирует клавиатуру и принтер, подключенные по телефонному проводу к мейнфрейму с UNIX.

Спасибо за отличную книгу!

Это всё мне напомнило мои рассуждения про интерфейс пионеровских «Сидиджеев». В заметке я писал, что их интерфейс модален и рассказывал про разные его режимы. Но позже я понял, что на самом деле модальности там нет, потому что в каждый момент времени режим является непосредственным предметом моего внимания, а для модальности необходимо, чтобы режим я не осознавал. Я про такое ещё писал в заметке про прокрутку.

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

 2 комментария    16   2017   книга «Пользовательский интерфейс»   пользовательский интерфейс

Замечания к книге «Пользовательский интерфейс»

Это тем, кто уже прочитал или сейчас читает книгу «Пользовательский интерфейс».

Спасибо, что присылаете ошибки, опечатки и глюки — мы всё исправляем.

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

Что вам показалось сложным для понимания? Во что вы решили даже не вникать, потому что не поняли с первого раза? Какие соображения показались неубедительными?

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

 6 комментариев    5   2017   вопрос   книга «Пользовательский интерфейс»

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

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

Про последовательность:

Про фильтры:

Про Паскаль:

Про Андроид:

Подписаться на книгу

 3 комментария    1   2017   книга «Пользовательский интерфейс»   пользовательский интерфейс

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

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

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

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

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

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

 1   2017   книга «Пользовательский интерфейс»   пользовательский интерфейс

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

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

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

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

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

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

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

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

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

 3   2017   книга «Пользовательский интерфейс»   пользовательский интерфейс

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

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

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

Мы добрались до темы языка интерфейса, и начинаем с синтаксиса. Это про то, что стандартные элементы — это идеальные члены предложения:

Разбираем синтаксические роли элементов:

Пример синтаксической жопы:

Форма слова влияет на смысл и ожидания пользователя:

Это одна из причин, почему пиктограммы менее выразительны, чем слова. Замочек может значить и «Закрыто» (нужно нажать, чтобы открыть) и «Закрыть».

Любимый разворот про пиктограммы:

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

 6   2017   Бюро   книга «Пользовательский интерфейс»   пользовательский интерфейс

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

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

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

Из письма издательства: «Бывало ли у вас такое, что вы приходите в гости, звоните в звонок, но ничего не слышите? Вы звоните ещё раз, но снова тишина. Начинаете стучать в дверь, и тут открывает возмущённый хозяин: „Чё трезвонишь?!“ Проблема в отсутствии обратной связи. Интерфейс дверного звонка прост, а в более сложных интерфейсах вроде управления автомобилем, самолётом или графическим редактором её качество ещё важнее. Из главы вы поймёте, почему руль на автомобиле удобнее, чем стрелки на клавиатуре в автосимуляторах.»

Люблю приводить старые примеры:

И, наоборот, новые:

И снова старые:

И снова новые:

Хотя вроде мода на такую фигню быстро прошла.

В конце опубликованных глав — тест по материалу из них.

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

 3   2017   Бюро   книга «Пользовательский интерфейс»   пользовательский интерфейс
Ранее Ctrl + ↓