Перевод статьи Марка Миллера: Great User Interfaces, Clarity, and Information in Parallel
Предыдущие переводы:
В последней статье мы говорили о том, как можно изменить дизайн для того, чтобы подчеркнуть важность информации. В этой статье мы обсудим другой, не менее важный способ достижения ясности — параллельное отображение информации.
Эта концепция была впервые изложена в удивительной книге Эдварда Тафти:
Title: Visual Explanations: Images and Quantities, Evidence and Narrative
ISBN: 0961392126
Несмотря на то, что и книга и её заголовок выглядят ужасно сухо, внутри содержатся подлинно гениальные идеи.
Принцип параллельного отображения информации весьма прост — человеку гораздо проще воспринимать данные, когда они представлены бок о бок, чем если бы они последовательно шли друг за другом. Это очень важно знать и учитывать при создании интерфейса потому, что основное предназначение программного обеспечения — представление больших объёмов данных в весьма ограниченном размере (экрана и т.д.) — очень часто ведёт к последовательному отображению информации.
Рассмотрим для примера модальные диалоговые окна — наших верных спутников с момента появления оконного интерфейса. Ответьте на несколько простых вопросов:
Если хотя бы на один из вопросов вы ответили положительно — вы жертва последовательного представления информации.
Вот несколько примеров такого представления:
В предыдущих статьях параллельное отображение информации уже использовалось для того, чтобы более наглядно показать:
Неэффективность проектирования
(в статье «Почему так сложно сделать хороший пользовательский интерфейс?»):
Неверное соотношение визуального веса и важности информации
(в статье «Хороший пользовательский интерфейс, ясность и релевантность информации»):
Как использование слишком большого количества методов контроля выразительности может привести к излишнему визуальному шуму
(в статье «Хороший пользовательский интерфейс, ясность и выразительность»):
Давайте сравним параллельное и последовательное отображение информации для того, чтобы понять их главные различия.
Параллельное отображение более эффективно за счёт того, что информация воспринимается при помощи глаз, которые могут быстро и просто передвигаться вперёд и назад. Все данные видимы одновременно, наблюдатель полностью управляет скоростью и порядком их восприятия. Последовательное отображение может привести к тому, что восприятие наблюдателем будет затруднено, потому что информация может отображаться слишком быстро или медленно, или потому, что последовательность её отображения будет просто неудобна для него.
Предыдущий абзац — пример последовательного отображения информации.
Давайте представим ту же информацию параллельно:
Необходимо отметить, что иногда при последовательном отображении информации мы можем контролировать скорость появления и смены данных при помощи кнопок «Далее» и «Назад» в мастере настройки, прокрутки при отображении текста и т.д. Но за эту возможность приходится платить дополнительными лишними действиями: щёлчками мышью, нажатием на клавиши и т.д., что менее эффективно и менее быстро по сравнению с простой сменой направления взгляда при параллельном отображении.
Давайте попробуем взять последовательный интерфейс и превратить его в параллельный. Например, возьмём модальные диалоговые окна и «разгладим» их так, чтобы все необходимые данные и элементы управления были доступны одновременно. Это очень нелегко сделать, всегда требуется очень тщательно подходить к созданию макета интерфейса и выбору действительно необходимой информации. Иногда требуется создавать новые, нестандартные элементы пользовательского интерфейса. Рассмотрим реальный пример из мира программного обеспечения.
Предположим, что нам необходимо создать интерфейс, позволяющий пользователю менять местами параметры в объявлении метода. Используя традиционный подход к созданию интерфейса, вы можете создать что-то напоминающее диалог Visual Studio 2008:
Рассмотрим диалог более внимательно, у него есть положительные и отрицательные стороны. Достоинства:
Но есть и недостатки:
Есть ли способ сохранить все достоинства такого интерфейса и сгладить недостатки? Можно ли полностью избавиться от диалогового окна и сохранить возможность для предварительного просмотра изменений? Конечно — да. Вот что мы сделаем:
Этот интерфейс может выглядеть так:
С одной стороны (сугубо положительной) мы избавились от модального диалога, закрывающего код, и добавили интерактивное изменение порядка параметров без использования мыши (что даёт прирост эффективности), не меняя привычного способа представления данных (что положительно сказывается на ясности).
С другой стороны (и она, как ни странно, тоже положительна) отсуствие диалогового окна и сохранение привычной среды работы не приводит к неожиданным результатам, даже когда кто-то в первый раз сталкивается с такой функциональностью. Добавив подсказку с назначением клавиш и названием текущей операции, мы помогаем понять, что происходит и как этим можно управлять.
Таким образом, «разглаживание» пользовательского интерфейса может потребовать усилий, в том числе и на создание новых концепций взаимодействия, но затраты с лихвой окупаются за счёт возросшей эффективности и ясности.
Предыдущие переводы:
- Почему так сложно сделать хороший пользовательский интерфейс?
- Хороший пользовательский интерфейс, ясность и релевантность информации
- Хороший пользовательский интерфейс, ясность и выразительность
В последней статье мы говорили о том, как можно изменить дизайн для того, чтобы подчеркнуть важность информации. В этой статье мы обсудим другой, не менее важный способ достижения ясности — параллельное отображение информации.
Эта концепция была впервые изложена в удивительной книге Эдварда Тафти:
Title: Visual Explanations: Images and Quantities, Evidence and Narrative
ISBN: 0961392126
Несмотря на то, что и книга и её заголовок выглядят ужасно сухо, внутри содержатся подлинно гениальные идеи.
Принцип параллельного отображения информации весьма прост — человеку гораздо проще воспринимать данные, когда они представлены бок о бок, чем если бы они последовательно шли друг за другом. Это очень важно знать и учитывать при создании интерфейса потому, что основное предназначение программного обеспечения — представление больших объёмов данных в весьма ограниченном размере (экрана и т.д.) — очень часто ведёт к последовательному отображению информации.
Рассмотрим для примера модальные диалоговые окна — наших верных спутников с момента появления оконного интерфейса. Ответьте на несколько простых вопросов:
- Вы когда-нибудь перетаскивали диалоговое окно для того, чтобы увидеть то, что было им скрыто?
- Вы когда-нибудь нажимали кнопку «Отмена» только для того, чтобы получить доступ к скрытой диалогом информации, например для того, чтобы скопировать что-нибудь в буфер обмена?
- Вы когда-нибудь нажимали кнопку «Назад» в браузере для того, чтобы мельком взглянуть на предыдущую страницу и тут же нажать «Вперёд»?
- Вы когда-нибудь скроллировали документ вверх только для того, чтобы увидеть информацию, необходимую для понимания того, что отображалось в данный момент?
Если хотя бы на один из вопросов вы ответили положительно — вы жертва последовательного представления информации.
Вот несколько примеров такого представления:
- подкасты
- презентации PowerPoint
- расположенные друг над другом модальные диалоговые окна
- программы-мастеры настроек
- длинные абзацы текста
В предыдущих статьях параллельное отображение информации уже использовалось для того, чтобы более наглядно показать:
Неэффективность проектирования
(в статье «Почему так сложно сделать хороший пользовательский интерфейс?»):
Неверное соотношение визуального веса и важности информации
(в статье «Хороший пользовательский интерфейс, ясность и релевантность информации»):
Как использование слишком большого количества методов контроля выразительности может привести к излишнему визуальному шуму
(в статье «Хороший пользовательский интерфейс, ясность и выразительность»):
Давайте сравним параллельное и последовательное отображение информации для того, чтобы понять их главные различия.
Параллельное отображение более эффективно за счёт того, что информация воспринимается при помощи глаз, которые могут быстро и просто передвигаться вперёд и назад. Все данные видимы одновременно, наблюдатель полностью управляет скоростью и порядком их восприятия. Последовательное отображение может привести к тому, что восприятие наблюдателем будет затруднено, потому что информация может отображаться слишком быстро или медленно, или потому, что последовательность её отображения будет просто неудобна для него.
Предыдущий абзац — пример последовательного отображения информации.
Давайте представим ту же информацию параллельно:
| Возможности наблюдателя | Последовательный | Параллельный |
| Управление скоростью подачи информации | Нет | Да |
| Управление порядком информации | Нет | Да |
| Одновременный просмотр информации | Нет | Да |
Необходимо отметить, что иногда при последовательном отображении информации мы можем контролировать скорость появления и смены данных при помощи кнопок «Далее» и «Назад» в мастере настройки, прокрутки при отображении текста и т.д. Но за эту возможность приходится платить дополнительными лишними действиями: щёлчками мышью, нажатием на клавиши и т.д., что менее эффективно и менее быстро по сравнению с простой сменой направления взгляда при параллельном отображении.
Давайте попробуем взять последовательный интерфейс и превратить его в параллельный. Например, возьмём модальные диалоговые окна и «разгладим» их так, чтобы все необходимые данные и элементы управления были доступны одновременно. Это очень нелегко сделать, всегда требуется очень тщательно подходить к созданию макета интерфейса и выбору действительно необходимой информации. Иногда требуется создавать новые, нестандартные элементы пользовательского интерфейса. Рассмотрим реальный пример из мира программного обеспечения.
Предположим, что нам необходимо создать интерфейс, позволяющий пользователю менять местами параметры в объявлении метода. Используя традиционный подход к созданию интерфейса, вы можете создать что-то напоминающее диалог Visual Studio 2008:
Рассмотрим диалог более внимательно, у него есть положительные и отрицательные стороны. Достоинства:
- Диалог расположен под телом метода, сигнатуру которого необходимо изменить, одновременно видим и код метода и сам диалог. Это параллельное отображение.
- Вы можете произвести предварительный просмотр изменений перед тем, как применить их. Это также параллельное отображение.
Но есть и недостатки:
- Диалог всё равно закрывает значительную часть кода в документе. Когда вы можете видеть только часть доступной информации — это последовательное отображение.
- Изменяется способ взаимодействия пользователя и приложения. Пользователь работал с исходным кодом при помощи клавиатуры — менял его напрямую, а здесь ему приходится комбинировать использование нескольких элементов управления (грид, кнопки, чекбокс) и щелчки мышью для того, чтобы изменить код. Это замедляет скорость и снижает эффективность.
Есть ли способ сохранить все достоинства такого интерфейса и сгладить недостатки? Можно ли полностью избавиться от диалогового окна и сохранить возможность для предварительного просмотра изменений? Конечно — да. Вот что мы сделаем:
- Перенесём элементы управления на тот же уровень интерфейса, с которым происходит взаимодействие — на уровень исходного кода.
- Добавим возможность интерактивного изменения очередности параметров, которым возможно будет управлять при помощи клавиатуры, без использования лишних элементов управления.
Этот интерфейс может выглядеть так:
С одной стороны (сугубо положительной) мы избавились от модального диалога, закрывающего код, и добавили интерактивное изменение порядка параметров без использования мыши (что даёт прирост эффективности), не меняя привычного способа представления данных (что положительно сказывается на ясности).
С другой стороны (и она, как ни странно, тоже положительна) отсуствие диалогового окна и сохранение привычной среды работы не приводит к неожиданным результатам, даже когда кто-то в первый раз сталкивается с такой функциональностью. Добавив подсказку с назначением клавиш и названием текущей операции, мы помогаем понять, что происходит и как этим можно управлять.
Таким образом, «разглаживание» пользовательского интерфейса может потребовать усилий, в том числе и на создание новых концепций взаимодействия, но затраты с лихвой окупаются за счёт возросшей эффективности и ясности.