Статью написал jagoterr. Если эта статья наберет +50 то автор получит инвайт на Хабрахабр.
Аза не так давно опубликовал заметку о модальных оверлеях (Здесь и далее по тексту используется именно такой перевод слова overlay, наименее “русский”, но зато не искажающий сути данного понятия). О тех самых диалоговых окошках, которые внезапно выскакивают и блокируют то, что находится позади них. Вы полностью свободны в своих действиях в рамках модального окна, но вы не можете использовать ни один “перекрытый” им элемент до тех пор, пока это окно не исчезнет.
Обычно, когда мы говорим о модальных окнах, мы говорим именно о диалогах, таких как на приведённом ниже фрагменте приложения Google Documents. Критика Аза относится как раз к модальным окнам такого рода. После того, как вы открыли диалог поиска/замены, вы не можете кликнуть мышью нигде, кроме как внутри этого диалога. Это означает, что вы не можете пролистать документ, находящийся под диалогом, или скопировать слово из документа и вставить его в строку поиска, не закрывая диалог.
Но это не единственный вид модальных окон. Взгляните на эту панель настроек с сайта me.com компании Apple. Здесь нет ничего, что могло бы потребовать работы с перекрытым им основным содержимым. С тем же успехом это мог бы быть совершенно отдельный экран.
Вообще говоря, именно тот факт, что это мог бы быть отдельный экран, меня и заинтересовал. В 37 (краткое название компании 37signals, — прим. пер.) мы никогда не используем модальные окна. Панель с настройками — это всегда абсолютно независимый экран приложения. Для исследования разницы между этими двумя подходами, я смакетировал альтернативную версию панели настроек от компании Apple, которая использует всё пространство экрана, как это могло бы выглядеть в любом типичном web-приложении.
Интересно сравнить эти две версии. Должен признаться, модальный вариант нравится мне значительно больше. С одной стороны, его значимость более ощутима визуально. С другой — наводит на интересные мысли о навигации.
Есть два вопроса, которые чаще всего крутятся в нашем сознании при работе с программным обеспечением — “где я?” и “как мне вернуться обратно?”. Есть множество приёмов упростить заботу об этом: вкладки, кнопки “Отмена” и др. Почему бы нам не подумать о модальных окнах, как о средствах решения тех же проблем? Этот механизм исключительно эффективно сглаживает эти нервирующие вопросы. Вопрос “где я?” просто не возникает, поскольку вы не покидаете основной экран. А ответ на вопрос “как вернуться обратно?” попросту очевидно, поскольку основной экран всегда остаётся видимым на заднем плане.
Другой аспект модальной панели настроек, который мне откровенно нравится, состоит в том, что эта панель не выглядит равнозначной по отношению к другим экранам. Вы испытываете ощущение, что она не заслужила собственного окна браузера по причине своей меньшей значимости.
Когда мы разрабатываем интерфейс конкретного экрана приложения, мы всегда стараемся выделить наиболее важные и часто-используемые элементы и сделать их больше, по сравнению с элементами, используемыми редко. Это хорошее правило, воспринимать элементы одинакового размера в одном контексте как равнозначимые. Панель настроек компании Apple использует тот же принцип на уровне экранов в целом. Экран панели настроек сам по себе меньше окна браузера, которое содержит более важные экраны приложения, наполненные настоящими данными.
В то время как критика Аза по-прежнему справедлива для таких модальных окон, как вышеприведённый пример из Google docs, me.com наглядно демонстрирует, что модальные оверлеи имеют право на существование, как альтернатива принципу навигации между независимыми экранами. Также весьма интересно порассуждать на тему того, какие экраны на самом деле заслуживают полного отдельного окна браузера, а какие из них должны быть выведены в разряд подуровней других экранов. Могу предположить, что когда люди расхваливают приложения за их “десктопность”, этот недостаток навигации между отдельными экранами порождает немало критических замечаний. Apple показал возможность включения “десктопных” принципов в web-приложения без превращения в полный эквивалент “десктопных” систем. Было бы весьма забавно узнать, а где черпают своё вдохновение другие дизайнеры?
От себя добавлю, что у автора есть еще интересные переводы, и готовится в свет еще одна неплохая статья, которую я бы с радостью увидел на страницах Хабра.
Аза не так давно опубликовал заметку о модальных оверлеях (Здесь и далее по тексту используется именно такой перевод слова overlay, наименее “русский”, но зато не искажающий сути данного понятия). О тех самых диалоговых окошках, которые внезапно выскакивают и блокируют то, что находится позади них. Вы полностью свободны в своих действиях в рамках модального окна, но вы не можете использовать ни один “перекрытый” им элемент до тех пор, пока это окно не исчезнет.
Обычно, когда мы говорим о модальных окнах, мы говорим именно о диалогах, таких как на приведённом ниже фрагменте приложения Google Documents. Критика Аза относится как раз к модальным окнам такого рода. После того, как вы открыли диалог поиска/замены, вы не можете кликнуть мышью нигде, кроме как внутри этого диалога. Это означает, что вы не можете пролистать документ, находящийся под диалогом, или скопировать слово из документа и вставить его в строку поиска, не закрывая диалог.
Но это не единственный вид модальных окон. Взгляните на эту панель настроек с сайта me.com компании Apple. Здесь нет ничего, что могло бы потребовать работы с перекрытым им основным содержимым. С тем же успехом это мог бы быть совершенно отдельный экран.
Вообще говоря, именно тот факт, что это мог бы быть отдельный экран, меня и заинтересовал. В 37 (краткое название компании 37signals, — прим. пер.) мы никогда не используем модальные окна. Панель с настройками — это всегда абсолютно независимый экран приложения. Для исследования разницы между этими двумя подходами, я смакетировал альтернативную версию панели настроек от компании Apple, которая использует всё пространство экрана, как это могло бы выглядеть в любом типичном web-приложении.
Интересно сравнить эти две версии. Должен признаться, модальный вариант нравится мне значительно больше. С одной стороны, его значимость более ощутима визуально. С другой — наводит на интересные мысли о навигации.
Модальные окна как альтернатива навигации
Есть два вопроса, которые чаще всего крутятся в нашем сознании при работе с программным обеспечением — “где я?” и “как мне вернуться обратно?”. Есть множество приёмов упростить заботу об этом: вкладки, кнопки “Отмена” и др. Почему бы нам не подумать о модальных окнах, как о средствах решения тех же проблем? Этот механизм исключительно эффективно сглаживает эти нервирующие вопросы. Вопрос “где я?” просто не возникает, поскольку вы не покидаете основной экран. А ответ на вопрос “как вернуться обратно?” попросту очевидно, поскольку основной экран всегда остаётся видимым на заднем плане.
Размер экрана как отражение важности
Другой аспект модальной панели настроек, который мне откровенно нравится, состоит в том, что эта панель не выглядит равнозначной по отношению к другим экранам. Вы испытываете ощущение, что она не заслужила собственного окна браузера по причине своей меньшей значимости.
Когда мы разрабатываем интерфейс конкретного экрана приложения, мы всегда стараемся выделить наиболее важные и часто-используемые элементы и сделать их больше, по сравнению с элементами, используемыми редко. Это хорошее правило, воспринимать элементы одинакового размера в одном контексте как равнозначимые. Панель настроек компании Apple использует тот же принцип на уровне экранов в целом. Экран панели настроек сам по себе меньше окна браузера, которое содержит более важные экраны приложения, наполненные настоящими данными.
Не все модальные окна плохи
В то время как критика Аза по-прежнему справедлива для таких модальных окон, как вышеприведённый пример из Google docs, me.com наглядно демонстрирует, что модальные оверлеи имеют право на существование, как альтернатива принципу навигации между независимыми экранами. Также весьма интересно порассуждать на тему того, какие экраны на самом деле заслуживают полного отдельного окна браузера, а какие из них должны быть выведены в разряд подуровней других экранов. Могу предположить, что когда люди расхваливают приложения за их “десктопность”, этот недостаток навигации между отдельными экранами порождает немало критических замечаний. Apple показал возможность включения “десктопных” принципов в web-приложения без превращения в полный эквивалент “десктопных” систем. Было бы весьма забавно узнать, а где черпают своё вдохновение другие дизайнеры?
От себя добавлю, что у автора есть еще интересные переводы, и готовится в свет еще одна неплохая статья, которую я бы с радостью увидел на страницах Хабра.
