Вы отписались от новостей о книгах бюро
Мы напишем вам по адресу , когда выйдут новые книги
Ваша подписка подтверждена

Пользовательский интерфейс
Электронный учебник

Представляем книгу Издательства Бюро Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.

Об интерфейсе написано много, но главные труды слишком академичны и проиллюстрированы устаревшими примерами. Современные же авторы обсуждают моду и частности, выражают личное мнение, но не дают базовых знаний. У читателя не создаётся цельной картины и системы ценностей, и он вынужден черпать вдохновение на Дрибле и Бехансе.

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

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

Автор — Илья Бирман
Арт‑директор бюро, соавтор «Советов», преподаватель Школы бюро
КПД ❔
16 дизайнеру, 12 редактору и руководителю

Оглавление

Принципы

  • Что такое интерфейс

  • Человечность

  • Технозависимость

  • Привычка

  • Модальность

  • Последовательное волшебство

  • Взгляд новичка

  • Тест

Взаимодействие

  • Близость

  • Прицеливание

  • Информативность

  • Тест

  • Обратная связь

  • Листание и прокрутка

  • Тест

Язык

  • Синтаксис

  • Элементы управления

  • Пиктограммы

  • Слова

  • Язык роботов

  • Тест

Экраны

  • Окна

  • Формы

  • Навигация

  • Сетка

  • Тест


В бюро радикально пере­осмыслили формат электрон­ной книги

В бюро радикально переосмыслили формат электронной книги

Было

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

Стало

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

Книга на экране

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

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

bureau.ru
Книга разделена на развороты. Каждый разворот состоит из рассказа и иллюстрированных примеров
𝍥
По удобству чтения на простых мониторах книга при­бли­жа­ется к бумажной, а на «ретине» её читать ещё удобнее и приятнее
𝍥
По удобству чтения на простых мониторах книга при­бли­жа­ется к бумажной, а на «ретине» её читать ещё удобнее и приятнее
Книга разделена на развороты. Каждый разворот состоит из рассказа и иллюстрированных примеров
Книга разделена на развороты. Каждый разворот состоит из рассказа и иллюстрированных примеров
bureau.ru

Проверка знаний

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

93%
93%
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить
bureau.ru
Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить
93%
93%
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
93%
93%
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
bureau.ru

Справочник

«Пользовательский интерфейс» — настольная книга дизайнера интерфейса. Он пользуется ей как учебным пособием и справочником во время работы:

bureau.ru
Дизайнер находит нужный пример в закладках, иллюстрированном оглавлении или поиске
Знания о синтаксисе элементов интерфейса сведены в подробную таблицу
Знания о синтаксисе элементов интерфейса сведены в подробную таблицу
Дизайнер находит нужный пример в закладках, иллюстрированном оглавлении или поиске
Дизайнер находит нужный пример в закладках, иллюстрированном оглавлении или поиске
bureau.ru
bureau.ru
bureau.ru

Теория плюс примеры

Каждый принцип проиллюстрирован множеством примеров:

Предисловие издателя

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

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

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

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

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

Когда я становился дизайнером интерфейсов, я прочитал книгу Нормана и узнал, что проблема с плитами вовсе не в плохих значках, а в принципе соответствия.

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

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

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

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

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

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

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

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

Артём Горбунов
Арт‑директор бюро

Отзывы читателей

Вопросы и ответы

Почему книги доступны только по подписке?

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

Как подписаться?

Нажмите на кнопку «Подписка» в правом нижнем углу страницы книги.

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

Когда вы перейдёте по ссылке из письма, мы запомним вас на этом устройстве и вы сможете открывать книгу с её страницы.

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

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

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

Что делать, если книга не открывается?

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

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

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

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

Что такое Бюросфера?

Бюросфера появилась как способ познакомиться с уважаемыми советчиками — постоянными посетителями раздела «Советы» на сайте бюро. Любой желающий может завести личную страницу в Бюросфере с рассказом о себе и о своих работах. Со временем Бюросфера стала способом авторизации и оформления покупок — у каждого пользователя Бюросферы появляется учётная запись на сайте бюро. Если вы просто хотите подписаться на книгу или купить другой продукт, необязательно что‑то писать о себе — оставьте страницу пустой. Мы не публикуем адреса электронной почты.

Как отменить подписку и что будет с книгой?

Если вы подписаны и авторизованы, на зелёной кнопке в правом нижнем углу будет галочка: «✓Подписка». Нажмите на кнопку, там будет ссылка «Отмена подписки». После отмены подписки книга станет вам недоступна. Когда захотите, вы сможете подписаться заново, но при этом нужно будет заново оплатить полную стоимость первого года (1200 ₽).

Демоглава
Прицеливание
Попробовать бесплатно
Закон Фиттса и его следствия

Когда что выйдет

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

Подписка

КПД ❔
16 дизайнеру, 12 редактору и руководителю

Для компаний. Подписка сразу для нескольких сотрудников вашей компании на все книги, которые вышли и когда‑либо выйдут в Издательстве бюро. Оформить

О книге

Автор

Илья Бирман

Арт‑директор и издатель

Артём Горбунов

Разработчики

Василий Половнёв

Рустам Кулматов

Тестировщик

Сергей Фролов

Дизайнер обложки

Владимир Колпаков

Пишите: books@bureau.ru

Отправить
Поделиться
Запинить