Comments 34
Вот интересно как лучше отделать такие окошки от основного контента:
- затемнение всего контента за модальным окном
- тень
- толстый бордер
- перекрытие окном 90..95% площади
- еще как нибудь
ИМХО важно показать, что именно это окно активно, а все остальное недоступно. Не утверждаю, что это единственный правильный способ это сделать, но я обычно делаю так:
Затемненный «задний фон»,
Модальное окно более яркое по сравнению с «задним фоном»,
Бордер средний или толстый, однако четко отделяющий задний фон от модального окна,
Кнопки управления крупные и легко-доступные.
P.S. Никто не сказал, но недопустимо применять прокрутку (scroll) экрана при отображении модального окна.
Затемненный «задний фон»,
Модальное окно более яркое по сравнению с «задним фоном»,
Бордер средний или толстый, однако четко отделяющий задний фон от модального окна,
Кнопки управления крупные и легко-доступные.
P.S. Никто не сказал, но недопустимо применять прокрутку (scroll) экрана при отображении модального окна.
Думаю, тень, но порой (читай — всегда) бесит невозможность что-либо скопипастить, или, что еще хуже, вообще уйти с окна (перейти на другую вкладку в броузере), когда такая красотень выплывает.
Модальность во многих случаях раздражает, когда нет возможности перейти на предыдущее окно, не закрывая модального окна. Например, когда в модальном окне необходимо использовать информацию основного окна, печатать вручную не хочется, а в буфер обмена заранее скопировано не было.
На мой взгляд, модальное окно должно быть «сворачиваемым», например — т.е. чтобы была возможность добраться до основного контента, не убирая модальное окно полностью (это может быть полезным, если модальное окно содержит текстовые поля, которые необходимо заполнить, например форму регистрации).
На мой взгляд, модальное окно должно быть «сворачиваемым», например — т.е. чтобы была возможность добраться до основного контента, не убирая модальное окно полностью (это может быть полезным, если модальное окно содержит текстовые поля, которые необходимо заполнить, например форму регистрации).
Правильно подмечено, главное — не делать его неубиваемым. Для мелких нужд они должны быть скрываемыми.
Возможно, ключ к тому, чтобы модальное окно не раздражало отсутствием возможности перейти на предыдущее окно, состоит в том, чтобы такая необходимость была заранее гарантированно исключена? Это сделает модальное окно не только безвредным, но и полезным ;)
Примеры.
1) Попытка закрыть несохранённый файл в текстовом редакторе. Диалог с 3 вариантами: «Сохранить», «Вернуться к редактированию», «Закрыть без сохранения». Других вариантов быть просто не может. Если нет возможности принять решение — вариант «вернуться...» является универсальным (можно посмотреть историю изменений, принять решение о том, стоит ли её сохранять, аккуратно сохранить копию… и т.д.)
2) Поиск в тексте. Конечно он может потребовать обращения к самому тексту. Поэтому это действие никогда не должно порождать модального окна. А только новый элемент в той же рабочей области, в которой вызван поиск.
Примеры.
1) Попытка закрыть несохранённый файл в текстовом редакторе. Диалог с 3 вариантами: «Сохранить», «Вернуться к редактированию», «Закрыть без сохранения». Других вариантов быть просто не может. Если нет возможности принять решение — вариант «вернуться...» является универсальным (можно посмотреть историю изменений, принять решение о том, стоит ли её сохранять, аккуратно сохранить копию… и т.д.)
2) Поиск в тексте. Конечно он может потребовать обращения к самому тексту. Поэтому это действие никогда не должно порождать модального окна. А только новый элемент в той же рабочей области, в которой вызван поиск.
Поиск в тексте не должен быть всплывающим окном, которое может пропасть из фокуса, и при этом должен оставаться на виду. Хороший пример был приведен — файрфокс 3. При нажатии Ctrl+F снизу выплывает панель поиска, которая не мешает ни коим образом, и пр этом остаётся с пользователем. В опере — не так. Там именно всплывает форточка, которая посреди экрана мозолит глаза.
Напишите мне в личку. Думаю ваш друг достоин инвайта.
Существует мнение, что модальные окна оправданы, лишь когда без решения пользователя никак не возможно продолжить работу.
В десктопных UI это может быть закрытие изменённого документа или принятие какого-то решения, без которого вся функциональность заблокирована.
В веб UI, надо полагать, верно то же самое. Мне кажется, что если пользователь хочет открыть что-то в новом окне (или новом табе), то он непременно должен иметь возможность сделать это. Модальное окно с контентом — это иногда красиво, но, боюсь, не очень дружелюбно.
В десктопных UI это может быть закрытие изменённого документа или принятие какого-то решения, без которого вся функциональность заблокирована.
В веб UI, надо полагать, верно то же самое. Мне кажется, что если пользователь хочет открыть что-то в новом окне (или новом табе), то он непременно должен иметь возможность сделать это. Модальное окно с контентом — это иногда красиво, но, боюсь, не очень дружелюбно.
Всегда использовали такие вот «лайтбоксы». Визуально и функционально считаю очень удачным решением, поскольку это очень быстро и наглядно как бы «переносит пользователя в другой контекст», косвенно давая понять, как этот новый контекст относится к «основному», над которым он висит. И пользователь не паникует, что «хрен знает куда ушел со своей рабочей странички» и может смело совершить ряд второстепенных действий.
Модальные окна, как мне кажется, идеально подходят для настройки приложения, что и было показано на примере Mobile Me. Во-первых, в таком модальном окне нам вряд ли придется использовать информацию основного окна, а значит не будет проблемы со сворачиваемостью. А во-вторых, создается ощущение десктопности приложения, так как в основном все настройки в них производятся в отдельных окошках.
Автору спасибо за интересный пост. Ждем на хабре. :)
Автору спасибо за интересный пост. Ждем на хабре. :)
Вообще, исходя из терминалогии обычных десктопных приложений, модальные окна (в отличии от обычных окон) по определению блокируют остальное «пространство» приложения, в этом их смысл.
Но они должны использоваться не везде и не всегда, а в случае, когда от пользователя требуется критическое решение, без которого приложение не сможет продолжать корректно работать.
Так что, на мой взгляд, модальные окна должны использоваться по назначению, в остальных случаях окна не должны быть модальными.
P.S. Если я ошибаюсь в терминологии, прошу простить, я не веб разработчик, однако, мысль, я думаю, ясна.
Но они должны использоваться не везде и не всегда, а в случае, когда от пользователя требуется критическое решение, без которого приложение не сможет продолжать корректно работать.
Так что, на мой взгляд, модальные окна должны использоваться по назначению, в остальных случаях окна не должны быть модальными.
P.S. Если я ошибаюсь в терминологии, прошу простить, я не веб разработчик, однако, мысль, я думаю, ясна.
А я хотел бы отметить поданную автором идею «сворачиваемости модальных окон», Это весьма удобно когда я, как пользователь, имею возможность свернуть что-то выскочившее на меня, продолжить работу с сайтом а потом, если захочу посмотреть, что же там всётаки выскочило. (Стоит обратить внимание что это не относится к моментам, когда окно влияет на основную страничку). Неплохой идей было бы, реализовать нечто наподобии виндовской панели задач, где свёрнутые окна отображались бы. Получится что пользователь попадая на сайт, попадает в уже знакомый интерфейс, скажем я могу менять настройки профиля не переходя со странички поста. Прочитал я про спам, и решил убрать мыло из информации о себе, развернул окошечко, поменял, свернул и читаю дальше.
Это получится что-то вроде реализации MDI на web-странице.
Идея прикольная :)
Но минус ее в том, что web-страницы очень сильно ветвятся — следующую страницу я открываю в этом же окне, ссылку на другой, но тоже интеренсый сайт — в новой вкладке браузера, картинку хочу сохранить на диске, а разглядывать потом.
Так что такой MDI, так же как и модальные «окна» может быть полезен только при грамотном выборе места для применения.
Идея прикольная :)
Но минус ее в том, что web-страницы очень сильно ветвятся — следующую страницу я открываю в этом же окне, ссылку на другой, но тоже интеренсый сайт — в новой вкладке браузера, картинку хочу сохранить на диске, а разглядывать потом.
Так что такой MDI, так же как и модальные «окна» может быть полезен только при грамотном выборе места для применения.
Мне видится в этой идее один мелкий, но критичный для удобства пользователя недостаток. Если «выскочившее» окно допустимо свернуть без ущерба для дальнейших действий, ТО система обязана самостоятельно, без специального действия пользователя, отобразить эту информацию параллельно с основным контентом (т.е. и «окна»-то тут как такового уже не будет). И дать пользователю возможность прореагировать тогда, когда он сочтёт нужным. Пример: запрос о сохранении логина/пароля в firefox 3.х.
Мне очень нравится как сейчас в новом Word'e сделано окошко поиска текста. Оно не блокирует содержимое позади себя, да и к тому же, одно окно умеет работать со всем запущенными копиями программы. А чтобы разработать действительно удобный интерфейс, я бы постарался сделать как-то так:
по поводу приведенного вами примера с me.com: на мой взгляд здесь как раз четко видно различие ежду модальным окном и новой страницей. модальное окно не отрывает пользователя от контекста, он видит то, с чем он работал до выхода этого окна и ожидает что продолжит работу с того же места после его закрытия. С отдельной страницей такого сказать нельзя. Я нажал на кнопку, попал неизвестно куда, и непонятно куда вернусь.
Отпишусь тут просто как автор этого перевода. Спасибо Alaunquirie за публикацию. Хотя вроде как в накладе он не остался )))
Если кто захочет поставить мне плюсик-другой за труды — я против не буду ;) Но и так всем огромное спасибо за отзывы.
Постараюсь на некоторые комментарии ответить по делу.
Если кто захочет поставить мне плюсик-другой за труды — я против не буду ;) Но и так всем огромное спасибо за отзывы.
Постараюсь на некоторые комментарии ответить по делу.
Насколько я понимаю, оригинал находится тут: www.37signals.com/svn/posts/1149-modal-overlays-beyond-the-dialog-box. Почему же тогда в посте (графа «автор оригинала») указано www.azarask.in/blog/?
Примечательно, что в процессе макетирования альтернативной версии окна настроек автор поменял местами терминальные кнопки: (Cancel, Save) vs. (Save, Cancel)
Даже не представляю как это произошло, по-отдельности кнопки вырезал, что ли… :-)
Даже не представляю как это произошло, по-отдельности кнопки вырезал, что ли… :-)
Попахивает некрофилией ) Посту уже дофига времени))
Я «набегами» читаю Хабр =)
А я снова отнекрокомменчу. Когда кнопки находились в первом варианте (модальное окно) внимание обращала на себя угловая кнопка, а когда мы переместили их в общее окно — читать мы снова будем слева напрпво, так что сэйв попадется первой. Юзабилити и все такое.
Да все немного проще, на самом деле.
В первом варианте окно модальное и больше напоминает приложение. По гайдлайнам Apple commit-кнопки в окнах приложений должны располагаться с правого конца. Во втором варианте окно стало самостоятельной страницей, срабатывает веб-паттерн, в котором принято кнопки располагать в порядке «OK/Cancel» непосредственно по направлению движения взгляда.
Автор так и пишет:
>> как это могло бы выглядеть в любом типичном web-приложении.
Такой паттерн выработался в вебе из-за того, что размеры веб-страниц часто не ограничены по ширине и искать глазами терминальные кнопки становится тяжело.
В первом варианте окно модальное и больше напоминает приложение. По гайдлайнам Apple commit-кнопки в окнах приложений должны располагаться с правого конца. Во втором варианте окно стало самостоятельной страницей, срабатывает веб-паттерн, в котором принято кнопки располагать в порядке «OK/Cancel» непосредственно по направлению движения взгляда.
Автор так и пишет:
>> как это могло бы выглядеть в любом типичном web-приложении.
Такой паттерн выработался в вебе из-за того, что размеры веб-страниц часто не ограничены по ширине и искать глазами терминальные кнопки становится тяжело.
Sign up to leave a comment.
Модальность за рамками диалоговых окон