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

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

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

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

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

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

Автор — Илья Бирман
Арт‑директор бюро, соавтор «Советов», преподаватель Школы стажёров

Для тех, кто уже подписан на другие книги бюро, спеццена —

1200990

За первые
три месяца

Для тех, кто уже подписан на другие книги бюро, спеццена за первые три месяца
1200990

Оглавление

Принципы

  • Что такое интерфейс
  • Человечность
  • Технозависимость
  • Привычка
  • Модальность
  • Последовательное волшебство
  • Взгляд новичка
  • Тест

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

  • Близость
  • Прицеливание
  • Информативность
  • Тест
  • Обратная связь
  • Листание и прокрутка
  • Тест

Язык

  • Синтаксис
  • Элементы управления
  • Пиктограммы
  • Слова
  • Язык роботов
  • Тест

Экраны

  • Окна
  • Формы
  • Навигация
  • Сетка
  • Тест

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

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

Было

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

Стало

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

Для чтения нужен компьютер или планшет с интернетом и любым современным браузером

👁 Рекомендуем читать на экранах с «ретиной». На обычных тоже работает

Для чтения нужен компьютер или планшет с интернетом и любым современным браузером

👁 Рекомендуем читать на экранах с «ретиной». На обычных тоже работает

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

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

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

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

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

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

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

Справочник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда карта привязана, нажмите на кнопку «Подписаться» на странице книги (вы как раз на ней). Деньги за первые три месяца спишутся с карты. С четвёртого месяца начнут списываться ежемесячно по сниженному тарифу, пока вы не отмените подписку.

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

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

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

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

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

Подписка

О книге

Автор

Илья Бирман

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

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

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

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

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

Тестировщик

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

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

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

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

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

Ещё книги