Share via


Пользовательский интерфейс: сайто-ориентированная навигация в IE9

Мы уже знаем, что бета-версия IE9 доступна для загрузки на сайте www.BeautyOfTheWeb.com! Благодаря постоянным выпускам IE9 Platform Рreview мы показали как платформа может использовать всю мощь ПК для создания опыта HTML5, причем такого же, как в приложениях Windows. Сайты могут предоставлять удивительный опыт благодаря аппаратному ускорению SVG, элементам canvas, видео и аудио, которые используют одинаковую разметку во всех HTML5-браузерах. Мы ожидаем появления нового класса сайтов для эпохи современных браузеров. Наша цель – создать с помощью IE9 пользовательский интерфейс, который дополнит эти сайты и заставит их блистать.

clip_image001

Сегодня сайты находятся в контексте браузера, а способы запуска и взаимодействия с ними осуществляются через его окно. Это отличается от того, как люди взаимодействуют с приложениями Windows, где каждое приложение имеет свое «представительство» на панели задач с возможностями выполнения основных функций – запуска, переключение и перехода к конкретной задаче. Мы обнаружили, что пользователи в полной мере используют эти возможности на компьютере. Например, 86% людей, у которых стоит Windows 7, запускают приложения с панели задач.

Люди проводят примерно половину своего времени в интернете, а другую половину – в приложениях Windows. Сегодня на панели задач представлен лишь интерфейс Windows-приложений.

clip_image002

Разве не все, что вы делаете на компьютере, должно быть у вас под рукой? Если люди тратят так много времени на чтение новостей, онлайн-покупки, общение и просмотр видео, разве это не должно выглядеть вот так?

clip_image003

Мы сосредоточили свое внимание на интерфейсе для сайтов в контексте всего ПК, а не только браузера. Мы были вдохновлены идеей иметь возможность закреплять сайты на панели задач и изучать, каким образом сайты могут находиться центре внимания. Эти исследования и дискуссии привели нас к пользовательскому интерфейсу IE9.

Мы хотим, чтобы IE9 был лучшим в трех аспектах – помогать сайтам реализоваться, стать естественным продолжением Windows 7, и предоставлять быстрый, безопасный и надежный интерфейс.

Естественное продолжение Windows 7

Мы начнем с рассмотрения среды, в которой существуют сайты – то есть с компьютера. Наш подход заключается в том, что ваши любимые сайты должны стать естественной частью ПК. Опираясь на то, что вы знаете и чем пользуетесь вместе с Windows 7, это не только облегчает выполнение веб-задач, но также увеличивает вашу уверенность в процессе взаимодействия с ПК. Сегодня сайты становятся неотъемлемой частью всей системы.

Ваши сайты на панели задач

Панель задач является наиболее широко используемой частью пользовательского интерфейса Windows 7. С IE9 вы можете закрепить сайты на панели задач. Это намного больше, чем просто «ярлык» – это сайты, которые могут в полной мере воспользоваться возможностями панели задач, которые вы уже знаете и используете: списки переходов для выполнения общих задач, Миниатюрная Панель инструментов для взаимодействия с сайтами напрямую и иконки, показывающие уведомления.

clip_image004clip_image005

Путем простого перетаскивания вкладки на панель задач, сайт закрепляются там для немедленного доступа. Панель задач теперь может быть индивидуализирована таким же образом, каким вы используете компьютер.

Вы можете прикрепить любой сайт к панели задач, а в будущем мы опишем, как разработчики могут создавать списки переходов, миниатюрные панели инструментов, а другие способы сделать сайты частью интерфейса Windows 7.

Вкладка Aero Snap

Вкладки – это способ организовать множество сайтов в одном окне, и это отличный способ поставить в очередь результаты поиска, новости, или все то, что вы хотите просмотреть позже. В дополнение к очереди из страниц, люди хотят просмотреть страницы бок о бок – например, просмотреть видео во время чтения статьи или сравнить два отзыва с разных ресурсов. Мы хотим упростить эту задачу.

Мы узнали, что более чем в 40% сессий IE открыто 2 и более вкладки, видимые в одно и то же время. Это было главной мотивацией для разработки Aero Snap, чтобы быстро организовать просмотр двух окон. Для IE9, мы хотели расширить эту способность. При интеграции IE9 с Windows 7 вкладка ведет себя как окно, которое можно привязать к стороне экрана.

Get Microsoft Silverlight

Рендеринг происходит непрерывно на протяжении всего времени – например, если веб-страница имеет активное видео, вы сможете смотреть видео при перетаскивании вкладки.

Ваши сайты засияют новыми красками

При разработке самого интерфейса, мы сделали шаг назад и подумали о дизайне браузера исключительно с точки зрения сайтов. Традиционно используется браузер-ориентированный путь, где в центре внимания будут возможности браузера, а не сайта.

Мы спросили себя, что мы можем сделать, чтобы помочь сайтам блистать? Мы обратили внимание на способы, которыми люди используют браузер. Мы исследовали более 700 команд в IE8 и проанализировали, каким образом люди используют эти команды и управляют ими. Стало ясно, что есть некоторые, которые используются намного чаще других.

clip_image006

Мы взяли 90% наиболее часто используемых команд и разбили их по задачам: взаимодействие с сайтом, переход на другие сайты, или изменение настроек браузера. Мы посчитали, как часто эти элементы управления используются во время просмотра сайтов.

clip_image007

Большинство используют браузер в пределах страницы (например, нажимают на гиперссылки и копируют содержимое страницы), а затем переходят на другие сайты и переключаются между сайтами через адресную строку и вкладки. Реже заходят в настройки браузера (например, удаляют истории просмотра и изменяют ссылки на панели избранного). Сравнивая использование конкретных команд и элементов управления с использованием интерфейса Windows 7, например панели задач, у нас была возможность сделать то, что так легко и знакомо по Windows для веб-сайтов и людей, которые просматривают их.

Сайто-ориентированный дизайн

Во-первых, мы оптимизировали IE9, чтобы интегрироваться в Windows 7 через те функции, которые вы знаете и уже используете – Панель задач и Aero Snap. В браузере, мы ставим во главе сам сайт, а уже затем кнопки управления, чтобы добраться до настроек браузера.

Рамка содержит лишь наиболее существенные элементы управления навигацией. Линейное расположение элементов управления делает эффективным использование горизонталей, что отлично подходит для широкоформатных ноутбуков и настольных компьютеров. Это дает сайтам еще больше пространства.

clip_image008

В IE9 сайто-ориентированная рамка фокусирует внимание на содержимом страниц сайта, особенно если сайт прикреплен к панели задач:

clip_image009

clip_image010

Благодаря использованию стеклянной рамки, монохромных элементов управления, и кнопок назад и вперед, которые перенимают брендинг иконки сайта, браузер визуально отступает на второй план. Хотя настройки используются редко, они важны, когда вы в них нуждаетесь. Способ добраться до них должен быть предсказуемым, поэтому мы поместили их в правом верхнем углу.

Благодаря рамке и интеграции с панелью задач, основное внимание IE9 смещается от браузера к содержимому сайта и быстрой навигации.

Спокойный режим уведомлений

Браузер должен общаться с пользователем, чтобы обеспечить безопасный и надежный интерфейс, например, чтобы предупредить, когда сайт пытается открыть всплывающие окна или указать на удаление истории браузера. Чтобы свести к минимуму эти отвлечения и держать сайт в фокусе внимания, мы рассмотрели всё разнообразие форм и проявлений уведомлений, которые используют сегодня браузеры – диалоги, всплывающие подсказки, мигающие значки, звуки и информационные панели.

Мы обнаружили, что могли бы создать менее навязчивые уведомления, чтобы люди могли видеть и слышать сайт, а не браузер. Новая панель уведомлений обеспечивает предложения в последовательной и четкой форме и отдельно от сайта. Например, через панель уведомлений вы можете подтвердить загрузку файлов, сохранить пароль, или же проигнорировать их полностью. Это позволяет не отвлекаться от серфинга и у вас есть выбор, чтобы взаимодействовать с предложениями, которые вам небезразличны.

clip_image011

Быстрые, безопасные и надежные характеристики

Интерфейс не будет полным без быстрого, безопасного и надежного серфинга. Каждая функция предназначена для совершенствования интерфейса, так что в сочетании они должны работать быстро и гибко. Вот беглый взгляд на функции, которые буду освещены позднее:

Объединенный интерфейс для навигации и поиска сохраняет вашу частную жизнь с помощью механизма One Box

Get Microsoft Silverlight

Страница «Новая закладка» быстро предоставляет доступ к популярным сайтам с помощью дизайна, который помогает легко узнать сайты, которые вы часто посещаете.

Get Microsoft Silverlight

Интерфейс плавной загрузки файлов со встроенным сервисом проверки безопасности SmartScreen Application Reputation

Get Microsoft Silverlight

Новый эксперт по производительности дополнений обеспечивает информацией, которая поможет принять решение о том, действительно ли вы нуждаетесь в некоторых дополнениях. Вы контролируете интерфейс браузера и то, какие дополнения используете.

Get Microsoft Silverlight

Улучшенный интерфейс восстановления при зависаниях изолирует проблемный сайт от остальной части браузера.

Платформа IE9 и пользовательский опыт в совокупности обеспечивают лучший интерфейс для сайтов, используя всю мощь ПК с Windows. С IE9 ваши веб-сайты будут блистать.

clip_image012

Установите бета-версию IE9 с сайта www.BeautyOfTheWeb.com и взгляните на интернет с помощью нового браузера, попробуйте привязать вкладки с помощью Aero Snap и закрепите любимые сайты на панели инструментов. Попробуйте посетить сайты Facebook, WSJ Magazine, CNN, Discovery Channel, IMDb, Amazon, Jango, PhotoBucket и другие указанные на beautyoftheweb.com. Мы бы хотели рассказать и о других деталях процесса разработки на следующих неделях и получить ваши отклики (через меню Tools)!

Джейн Кин (Jane Kim),

программный менеджер Internet Explorer

Comments

  • Anonymous
    March 31, 2011
    The comment has been removed