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