🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
Пользовательский интерфейс
Пользовательский интерфейс
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.
Оглавление
Принципы 4
Взаимодействие 86
Язык 213
Экраны 311
Тест
Параметры съёмки фотоаппарата изменяются физическими ручками и кнопками, а не виртуальными элементами на экране. С какой точки зрения это хорошо?
В фотоаппарате множество режимов — конечно, его интерфейс модален. В нём непросто разобраться новичку, но благодаря постоянным расположению и доступности элементов со временем у фотографа вырабатывается привычка и он настраивает фотоаппарат практически наощупь.
Фотоаппарат «Фуджифильм X‑T1»
Что можно сказать об этом сообщении?
Это привычное пользователям модальное окно Виндоуса. Но технозависимая формулировка лишь отражает особенности реализации программы. Если отвлёкшийся человек посмотрит на него, смысла он не поймёт — то есть окно не пройдёт проверку «взглядом новичка». Так что об эффективности работы говорить не приходится.
Как сделать этот интерфейс человечнее?
Пример помогает понять, что надо вводить знак „+“ и код страны, и пользователю не приходится гадать. Но человечнее будет дать ввести номер и в любом другом формате, исправив его автоматически. А введение дополнительных окон этот интерфейс человечнее не сделает.
Выберите примеры действия принципа «Пусть потеет машина».
«Крутилка» — это пример другой идеи: обратной связи. Автоматическое форматирование или перевод на другой язык усложнят программу, но упростят жизнь человеку. Принцип «Пусть потеет машина» не предполагает наблюдения за внутренней работой компьютера. Бесконечный цикл — это не пример работы, которую компьютер выполняет за человека.
Что не так с этой таблицей размеров в интернет‑магазине обуви?
Американцы и так используют дюймы, а с разноцветностью уже перебор. Пересчитывать размеры следует компьютеру, а не человеку, который может запутаться и в итоге заказать неподходящую вещь.
Айтюнс не смог прочитать данные Айфона и предлагает сбросить его к заводским установкам. Какой принцип нарушен?
Данные, фильтры и квазирежимы ни при чём, а окно с сообщением — стандартное. Проблема в том, что Айтюнс предлагает пользователю удалить все данные, как будто они не имеют никакой ценности.
Человек приехал забрать пылесос из пункта самовывоза. У него спрашивают номер заказа. С точки зрения человечности это:
Номер заказа ничего не гарантирует: я могу его перепутать или просто забыть — его трудно держать в голове. Конечно, частной информацией номера заказов считать нельзя: готовность заказов по номерам часто показывают на общественных телевизорах. Вряд ли использование номера ускоряет процесс, но даже если так, к человечности это не имеет отношения.
Сайт находит тренинги по множеству критериев. Как бы вы предложили устроить интерфейс поиска?
Форма из нескольких шагов или нескольких полей — плохое решение, только отдаляющее от результатов поиска. Принцип «сначала данные, потом фильтры» предписывает как можно раньше показать хоть что‑то, а уже потом дать человеку инструменты для уточнения выдачи.
Интернет‑магазин предлагает выбор сортировки. Укажите проблемы этого интерфейса.
Слова «по названию», «цене», «новизне» оформлены как ссылки, но не являются ими, что противоречит привычкам. Интерфейс технозависим: вместо учёта реальных сценариев поиска дана сортировка по атрибутам базы данных. Скажем, зачем нужна сортировка по названию задом‑наперёд? Способов сортировки, конечно, можно придумать и ещё больше, но модальность тут ни при чём.
Предложите улучшения интерфейса из предыдущего вопроса.
Дать более человечные названия способам сортировки и использовать более привычный элемент — хорошие идеи. Иногда удобно искать упаковку по цвету, но сортировка вряд ли поможет с этим: синий будет до или после красного? Синяя рамка заголовку не нужна.
чтобы узнать результат.
Тест
Параметры съёмки фотоаппарата изменяются физическими ручками и кнопками, а не виртуальными элементами на экране. С какой точки зрения это хорошо?
В фотоаппарате множество режимов — конечно, его интерфейс модален. В нём непросто разобраться новичку, но благодаря постоянным расположению и доступности элементов со временем у фотографа вырабатывается привычка и он настраивает фотоаппарат практически наощупь.
Фотоаппарат «Фуджифильм X‑T1»
Что можно сказать об этом сообщении?
Это привычное пользователям модальное окно Виндоуса. Но технозависимая формулировка лишь отражает особенности реализации программы. Если отвлёкшийся человек посмотрит на него, смысла он не поймёт — то есть окно не пройдёт проверку «взглядом новичка». Так что об эффективности работы говорить не приходится.
Как сделать этот интерфейс человечнее?
Пример помогает понять, что надо вводить знак „+“ и код страны, и пользователю не приходится гадать. Но человечнее будет дать ввести номер и в любом другом формате, исправив его автоматически. А введение дополнительных окон этот интерфейс человечнее не сделает.
Выберите примеры действия принципа «Пусть потеет машина».
«Крутилка» — это пример другой идеи: обратной связи. Автоматическое форматирование или перевод на другой язык усложнят программу, но упростят жизнь человеку. Принцип «Пусть потеет машина» не предполагает наблюдения за внутренней работой компьютера. Бесконечный цикл — это не пример работы, которую компьютер выполняет за человека.
Что не так с этой таблицей размеров в интернет‑магазине обуви?
Американцы и так используют дюймы, а с разноцветностью уже перебор. Пересчитывать размеры следует компьютеру, а не человеку, который может запутаться и в итоге заказать неподходящую вещь.
Айтюнс не смог прочитать данные Айфона и предлагает сбросить его к заводским установкам. Какой принцип нарушен?
Данные, фильтры и квазирежимы ни при чём, а окно с сообщением — стандартное. Проблема в том, что Айтюнс предлагает пользователю удалить все данные, как будто они не имеют никакой ценности.
Человек приехал забрать пылесос из пункта самовывоза. У него спрашивают номер заказа. С точки зрения человечности это:
Номер заказа ничего не гарантирует: я могу его перепутать или просто забыть — его трудно держать в голове. Конечно, частной информацией номера заказов считать нельзя: готовность заказов по номерам часто показывают на общественных телевизорах. Вряд ли использование номера ускоряет процесс, но даже если так, к человечности это не имеет отношения.
Сайт находит тренинги по множеству критериев. Как бы вы предложили устроить интерфейс поиска?
Форма из нескольких шагов или нескольких полей — плохое решение, только отдаляющее от результатов поиска. Принцип «сначала данные, потом фильтры» предписывает как можно раньше показать хоть что‑то, а уже потом дать человеку инструменты для уточнения выдачи.
Интернет‑магазин предлагает выбор сортировки. Укажите проблемы этого интерфейса.
Слова «по названию», «цене», «новизне» оформлены как ссылки, но не являются ими, что противоречит привычкам. Интерфейс технозависим: вместо учёта реальных сценариев поиска дана сортировка по атрибутам базы данных. Скажем, зачем нужна сортировка по названию задом‑наперёд? Способов сортировки, конечно, можно придумать и ещё больше, но модальность тут ни при чём.
Предложите улучшения интерфейса из предыдущего вопроса.
Дать более человечные названия способам сортировки и использовать более привычный элемент — хорошие идеи. Иногда удобно искать упаковку по цвету, но сортировка вряд ли поможет с этим: синий будет до или после красного? Синяя рамка заголовку не нужна.
2
Взаимодействие
Близость
Прицеливание
Информативность
Обратная связь
Листание и прокрутка
2
Взаимодействие
Близость
Прицеливание
Информативность
Обратная связь
Листание и прокрутка
Близость
См. также:
Артём Горбунов. Эффекты гештальта
Звёзды на небе расположены хаотично. Но мозг человека стремится выделить в наблюдаемой картине цельный образ — «гештальт». Так в нашей голове возникают созвездия.
Мы замечаем объекты, образующие определённую фигуру, имеющие общий цвет или двигающиеся в одном направлении.
Близость
Звёзды на небе расположены хаотично. Но мозг человека стремится выделить в наблюдаемой картине цельный образ — «гештальт». Так в нашей голове возникают созвездия.
Мы замечаем объекты, образующие определённую фигуру, имеющие общий цвет или двигающиеся в одном направлении.
См. также:
Артём Горбунов. Эффекты гештальта
Дизайнеры используют особенности человеческого восприятия для передачи смысла. Этот логотип — не множество полос разной длины, а три латинские буквы.
Дизайнеры используют особенности человеческого восприятия для передачи смысла. Этот логотип — не множество полос разной длины, а три латинские буквы.
Первый и самый простой закон, который нужно знать — закон близости. Объекты, расположенные рядом, воспринимаются связанными. Это кажется очевидным, но ошибки встречаются слишком часто.
В интернет‑магазине «Ламода» невозможно понять, какие цены относятся к каким товарам — все расстояния одинаковы.
См. также:
Артемий Лебедев. Теория близости
Первый и самый простой закон, который нужно знать — закон близости. Объекты, расположенные рядом, воспринимаются связанными. Это кажется очевидным, но ошибки встречаются слишком часто.
В интернет‑магазине «Ламода» невозможно понять, какие цены относятся к каким товарам — все расстояния одинаковы.
См. также:
Артемий Лебедев. Теория близости
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015
Бирман Илья Борисович
Пользовательский интерфейс
Арт‑директор и издатель Артём Горбунов
Дизайнер обложки и фотограф
Владимир КолпаковИллюстратор Андрей Кокорин
Разработчики Рустам Кулматов
и Василий ПоловнёвМетранпаж и тестировщик Сергей Фролов
Помощники Юрий Мазурский
и Александра Шабалдина
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015