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

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

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

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

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

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

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

Подписаться Попробовать
А для тех, кто подписан
на «Типографику и вёрстку»
спеццена —
1200
990
За первые
три месяца

Оглавление



Принципы


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


Язык


Экраны
  • Что такое интерфейс
  • Человечность
  • Технозависимость
  • Привычка
  • Модальность
  • Последовательное волшебство
  • Взгляд новичка
  • Тест
  • Близость
  • Прицеливание
  • Информативность
  • Обратная связь
  • Листание и прокрутка
  • Тест
  • Синтаксис
  • Элементы управления
  • Слова
  • Язык роботов
  • Пиктограммы
  • Тест
  • Окна
  • Формы
  • Навигация
  • Сетка
  • Тест


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

Было

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

Стало

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

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

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

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

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

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

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

93 %

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


Тест предлагает вопросы на знание материала и анализ интерфейса: что хорошо и плохо, как улучшить

Справочник

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

🔍
Дизайнер находит нужный пример в закладках, иллюстрированном оглавлении или поиске


Знания о синтаксисе элементов интерфейса сведены в подробную таблицу

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

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

Подпишитесь, чтобы узнать о выходе новых книг. Без спама.

Обращение издателя

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

Для чтения нужен интернет и любой современный браузер.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оставьте свой почтовый адрес внизу страницы, чтобы узнать, когда книга выйдет. »

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

Михаил Нозик, ведущий дизайнер бюро

«Куда поставить главную кнопку? Что на ней написать? Что должно произойти, если я обновлю страницу? При проектировании даже простейшей экранной формы дизайнер сталкивается с миллионом подобных вопросов. Искать ответы приходится самостоятельно, изучая противоречивые рекомендации экспертов и наблюдая за коллегами по цеху. В результате, в голове у дизайнера образуется ком хаотичных представлений о прекрасном. Если же собранные знания противоречат друг другу, то бедняга действует наугад или подсматривает какую-нибудь красотульку на Дриббле. Простейшая экранная форма превращается в полосу препятствий для пользователя и преграду для развития бизнеса.

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

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

Попробовать

Оплата не прошла. Попробуйте снова или привяжите другую банковскую карту в Бюросфере.

О проекте

Автор: Илья Бирман

Арт-директор и издатель: Артём Горбунов

Дизайнер обложки: Владимир Колпаков

Разработчики: Василий Половнёв, Рустам Кулматов

Тестировщик: Сергей Фролов

Книга набрана шрифтом «Бюросериф».


Поделиться