🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
2008
2010
2017
Когда в 2008 году мы делали концепт интерфейса «Эмгизмо», мы оживили иконки приложений. В иконке «Фоток» твои фотки, браузера — открытый сайт, «Погоды» — реальная погода, причём температура отображается вместо названия приложения. Но мы оставляли у каждой иконки неизменяемую часть вроде киноплёнки или компаса, иначе иконки теряли узнаваемость, и нельзя было бы выработать привычку.
Настоящие данные старается показывать в своих плитках Виндоус‑фон.
На Айфоне живые только часы и календарь, причём часы научились ходить только в Ай‑ОСе 7. Вероятно, исторически это связано с экономией вычислительных ресурсов и трафика.
2008
2010
2017
Когда в 2008 году мы делали концепт интерфейса «Эмгизмо», мы оживили иконки приложений. В иконке «Фоток» твои фотки, браузера — открытый сайт, «Погоды» — реальная погода, причём температура отображается вместо названия приложения. Но мы оставляли у каждой иконки неизменяемую часть вроде киноплёнки или компаса, иначе иконки теряли узнаваемость, и нельзя было бы выработать привычку.
Настоящие данные старается показывать в своих плитках Виндоус‑фон.
На Айфоне живые только часы и календарь, причём часы научились ходить только в Ай‑ОСе 7. Вероятно, исторически это связано с экономией вычислительных ресурсов и трафика.
«Правило семи элементов» — заблуждение, возникшее из‑за неправильной интерпретации работы американского психолога Джорджа Миллера (1920—2012).
В 1956 году Миллер опубликовал работу «Волшебное число семь плюс или минус два», где рассказал о результатах своего исследования. Он обнаружил, что людям было очень трудно запоминать более семи случайных, не связанных друг с другом единиц информации.
Крупные сети мотелей в США ссылались на эту публикацию, чтобы добиться принятия закона, ограничивающего число слов в уличной рекламе. Неизвестные мотели размещали много подробностей, а известным было ни к чему перечислять, что у них есть душ, телевизор, завтрак и т. д. Ограничение помогало им бороться с маленькими конкурентами.
Пришло «правило» и в интерфейсы. Казалось бы, раз человек не может удержать много данных в памяти, надо поместить их перед его глазами. Но многие приходили к противоположному выводу.
В меню программ «Микрософт‑офиса 2000» отображалось только несколько часто используемых пунктов, а остальные можно было увидеть только нажав на стрелочки снизу.
«Правило семи элементов» считалось чуть ли не аксиомой: проектировщики интерфейсов были уверены, что в любом меню должно быть не больше семи пунктов, в тулбаре — не больше семи кнопок. И для достижения этой цели объединяли пункты в один или просто прятали.
Такой интерфейс был чудовищно неудобен: содержимое меню невозможно было ни запомнить, ни увидеть. А поскольку набор отображаемых элементов менялся в зависимости от частоты использования, привыкание тоже было затруднено.
Попытка спрятать «лишние» элементы затрудняет доступ к функциям. Путь к упрощению интерфейса лежит через пересмотр сценариев использования и структуры информации. В следующих версиях Микрософт вернул информативные меню, но миф многие считают настоящим правилом до сих пор.
«Правило семи элементов» — заблуждение, возникшее из‑за неправильной интерпретации работы американского психолога Джорджа Миллера (1920—2012).
В 1956 году Миллер опубликовал работу «Волшебное число семь плюс или минус два», где рассказал о результатах своего исследования. Он обнаружил, что людям было очень трудно запоминать более семи случайных, не связанных друг с другом единиц информации.
Крупные сети мотелей в США ссылались на эту публикацию, чтобы добиться принятия закона, ограничивающего число слов в уличной рекламе. Неизвестные мотели размещали много подробностей, а известным было ни к чему перечислять, что у них есть душ, телевизор, завтрак и т. д. Ограничение помогало им бороться с маленькими конкурентами.
Пришло «правило» и в интерфейсы. Казалось бы, раз человек не может удержать много данных в памяти, надо поместить их перед его глазами. Но многие приходили к противоположному выводу.
В меню программ «Микрософт‑офиса 2000» отображалось только несколько часто используемых пунктов, а остальные можно было увидеть только нажав на стрелочки снизу.
«Правило семи элементов» считалось чуть ли не аксиомой: проектировщики интерфейсов были уверены, что в любом меню должно быть не больше семи пунктов, в тулбаре — не больше семи кнопок. И для достижения этой цели объединяли пункты в один или просто прятали.
Такой интерфейс был чудовищно неудобен: содержимое меню невозможно было ни запомнить, ни увидеть. А поскольку набор отображаемых элементов менялся в зависимости от частоты использования, привыкание тоже было затруднено.
Попытка спрятать «лишние» элементы затрудняет доступ к функциям. Путь к упрощению интерфейса лежит через пересмотр сценариев использования и структуры информации. В следующих версиях Микрософт вернул информативные меню, но миф многие считают настоящим правилом до сих пор.
Фото с сайта Газпрома
Участники экспериментов Миллера запоминали и повторяли белиберду. В реальной жизни специалисты работают с большими объёмами осмысленной и связанной информации.
Инженеры, архитекторы, врачи, трейдеры используют в работе большие экраны и распечатки с множеством цифр и графиков. Когда информация в поле зрения, ресурсы мозга не тратятся на её удержание в голове. Спрятать её — всё равно что связать человеку руки.
«Правило семи элементов» встаёт в один ряд с другими «золотыми правилами» юзабилити: правило двух секунд, правило трёх кликов, правило 80/20.
Сам Джордж Миллер писал, что из его работы никак не вытекает, что Моисею следовало бы убрать три заповеди. А Эдвард Тафти у себя на сайте задаётся вопросом: «Как использовать „правило семи элементов“ в дизайне телефонного справочника?».
«Правило семи элементов» полезно только если в интерфейсе вы вслед за Миллером заставляете людей запоминать и повторять бессмыслицу.
О маленьких мотелях и других жертвах мифа — на сайте Эдварда Тафти: «Волшебное число семь: неприменимо к дизайну»
Фото с сайта Газпрома
Участники экспериментов Миллера запоминали и повторяли белиберду. В реальной жизни специалисты работают с большими объёмами осмысленной и связанной информации.
Инженеры, архитекторы, врачи, трейдеры используют в работе большие экраны и распечатки с множеством цифр и графиков. Когда информация в поле зрения, ресурсы мозга не тратятся на её удержание в голове. Спрятать её — всё равно что связать человеку руки.
«Правило семи элементов» встаёт в один ряд с другими «золотыми правилами» юзабилити: правило двух секунд, правило трёх кликов, правило 80/20.
Сам Джордж Миллер писал, что из его работы никак не вытекает, что Моисею следовало бы убрать три заповеди. А Эдвард Тафти у себя на сайте задаётся вопросом: «Как использовать „правило семи элементов“ в дизайне телефонного справочника?».
«Правило семи элементов» полезно только если в интерфейсе вы вслед за Миллером заставляете людей запоминать и повторять бессмыслицу.
О маленьких мотелях и других жертвах мифа — на сайте Эдварда Тафти: «Волшебное число семь: неприменимо к дизайну»
Перед вами фрагмент рубрикатора на сайте. Расстояние между некоторыми строками меньше стандартного. А как должно быть?
Здесь всё хорошо. Если сделать расстояния между всеми строками одинаковым, станет труднее различать отдельные ссылки и легче промахиваться мимо нужной, и группировка по буквам не спасёт.
Что влияет на воспринимаемую человеком связь между элементами интерфейса?
Связанными кажутся элементы, стоящие рядом, выровненные друг с другом, одинакового цвета, размера и формы.
Какие проблемы видите в форме поиска?
Из‑за нагромождения элементов легко случайно попасть не в тот. Из‑за размещения радиокнопок в строку возникают их бессмысленные вертикальные связи с чекбоксами. Сам интерфейс поиска явно вдохновлён техническим языком запросов к базе данных. Подписи стоят справа от чекбоксов, как и должны.
Выберите наилучший вариант компоновки формы входа.
Плохо, когда все элементы стоят на одинаковом расстоянии друг от друга. Плохо, когда подписи элементов оказываются ближе к другим элементам, чем к своим. Плохо, если возникают бессмысленные вертикальные связи «поле — чекбокс» и «поле — кнопка».
Расположите области в порядке увеличения времени прицеливания при помощи мыши.
Точка под курсором доступна быстрее всего, потому что в неё не надо целиться. В угол целиться почти не надо — достаточно решительно двинуть мышь в его направлении. В объекты, прижатые к сторонам экрана, целиться нужно, но только в одном измерении, ведь они имеют бесконечный размер в направлении за границу экрана.
Укажите на недостатки в этом интерфейсе настройки повторения событий в календаре.
Тут плохо всё: чекбоксы стоят рядом с чужими подписями, радиокнопка On «отвалилась», итоговые кнопки слишком близки друг к другу, слово Repeat повторяется слишком часто.
У каждого товара в каталоге интернет‑магазина «Корзиночка» была указана цена и повторялась кнопка «Купить». При редизайне цену товара поставили на кнопку вместо слова «Купить». Как это сказалось на информативности?
Информативность повысилась, ведь теперь название кнопки сообщает полезную информацию, а то, что кнопка с ценой означает «Купить», пользователь, скорее всего, догадается. Но новичок может и не догадаться!
Как повысить информативность таблицы истории заказов?
Эта таблица неинформативна: все заказы на одно лицо, и чтобы хоть что‑то узнать, их нужно открывать. Информативность понизится, если убрать номер, ведь это хоть какая‑то информация. Надо показать содержимое заказов и убрать все повторы: перенести ссылку на номер и вынести за скобки статус.
При наведении на сноску в Википедии всплывают такие пояснения. Какая тут проблема?
Всплывающий элемент помешает нажать на закрытые им ссылки. А если бы была ещё и кнопка «Закрыть подсказку», это было бы наказанием за неосторожные движения.
Что не так с «правилом семи элементов»?
Исследование Джорджа Миллера, из которого возник миф о семи элементов, не имеет отношения к дизайну интерфейса, о чём говорил и сам Миллер. Исследование не говорит о количестве пунктов меню, и его невозможно «соблюдать».
Перед вами фрагмент рубрикатора на сайте. Расстояние между некоторыми строками меньше стандартного. А как должно быть?
Здесь всё хорошо. Если сделать расстояния между всеми строками одинаковым, станет труднее различать отдельные ссылки и легче промахиваться мимо нужной, и группировка по буквам не спасёт.
Что влияет на воспринимаемую человеком связь между элементами интерфейса?
Связанными кажутся элементы, стоящие рядом, выровненные друг с другом, одинакового цвета, размера и формы.
Какие проблемы видите в форме поиска?
Из‑за нагромождения элементов легко случайно попасть не в тот. Из‑за размещения радиокнопок в строку возникают их бессмысленные вертикальные связи с чекбоксами. Сам интерфейс поиска явно вдохновлён техническим языком запросов к базе данных. Подписи стоят справа от чекбоксов, как и должны.
Выберите наилучший вариант компоновки формы входа.
Плохо, когда все элементы стоят на одинаковом расстоянии друг от друга. Плохо, когда подписи элементов оказываются ближе к другим элементам, чем к своим. Плохо, если возникают бессмысленные вертикальные связи «поле — чекбокс» и «поле — кнопка».
Расположите области в порядке увеличения времени прицеливания при помощи мыши.
Точка под курсором доступна быстрее всего, потому что в неё не надо целиться. В угол целиться почти не надо — достаточно решительно двинуть мышь в его направлении. В объекты, прижатые к сторонам экрана, целиться нужно, но только в одном измерении, ведь они имеют бесконечный размер в направлении за границу экрана.
Укажите на недостатки в этом интерфейсе настройки повторения событий в календаре.
Тут плохо всё: чекбоксы стоят рядом с чужими подписями, радиокнопка On «отвалилась», итоговые кнопки слишком близки друг к другу, слово Repeat повторяется слишком часто.
У каждого товара в каталоге интернет‑магазина «Корзиночка» была указана цена и повторялась кнопка «Купить». При редизайне цену товара поставили на кнопку вместо слова «Купить». Как это сказалось на информативности?
Информативность повысилась, ведь теперь название кнопки сообщает полезную информацию, а то, что кнопка с ценой означает «Купить», пользователь, скорее всего, догадается. Но новичок может и не догадаться!
Как повысить информативность таблицы истории заказов?
Эта таблица неинформативна: все заказы на одно лицо, и чтобы хоть что‑то узнать, их нужно открывать. Информативность понизится, если убрать номер, ведь это хоть какая‑то информация. Надо показать содержимое заказов и убрать все повторы: перенести ссылку на номер и вынести за скобки статус.
При наведении на сноску в Википедии всплывают такие пояснения. Какая тут проблема?
Всплывающий элемент помешает нажать на закрытые им ссылки. А если бы была ещё и кнопка «Закрыть подсказку», это было бы наказанием за неосторожные движения.
Что не так с «правилом семи элементов»?
Исследование Джорджа Миллера, из которого возник миф о семи элементов, не имеет отношения к дизайну интерфейса, о чём говорил и сам Миллер. Исследование не говорит о количестве пунктов меню, и его невозможно «соблюдать».
В челябинском почтовом отделении № 80 работает электронная очередь. У входа стоит машинка с единственной кнопкой. Нажимаешь кнопку, и через две секунды на чековой ленте печатается номерок.
Эти две секунды — целая вечность. Многие решают, что кнопка не сработала, и жмут ещё раз. Рядом с машинкой всегда валяются «лишние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажатие — издавала звук или мигала лампочкой — такой проблемы бы не было.
В челябинском почтовом отделении № 80 работает электронная очередь. У входа стоит машинка с единственной кнопкой. Нажимаешь кнопку, и через две секунды на чековой ленте печатается номерок.
Эти две секунды — целая вечность. Многие решают, что кнопка не сработала, и жмут ещё раз. Рядом с машинкой всегда валяются «лишние» номерки. Если бы машинка делала хоть что‑то сразу в ответ на нажатие — издавала звук или мигала лампочкой — такой проблемы бы не было.
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир Колпаков
Иллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий Половнёв
Метранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015