Проектирование интерфейса магазина Windows

Недавно у нас была возможность продемонстрировать некоторые практические аспекты магазина Windows на нескольких мероприятиях — на нашей конференции по //build/, на презентации магазина, а на минувшей неделе еще и на выставке CES. Мы подумали, что сейчас было бы кстати дать полное описание таких характеристик интерфейса магазина, как навигация и поиск по каталогу, а также обновление и перемещение приложений в Windows 8. Джонатан Вонг (Jonathan Wang), руководитель программ в группе обслуживания клиентов магазина, описывает элементы магазина и комментирует наши проектные решения.

— Антуан

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

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

 Структура магазина Windows

Целевая страница как шаг к удачной находке

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

Целевая страница магазина Windows

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

С интерфейсом Windows 8, выполненным в стиле Metro, навигация проста и понятна, и пользователям Windows легко ориентироваться в магазине. Категории магазина представлены в верхней части экрана, и в каждой категории отмечены самые интересные приложения. Найти новинки и самые интересные приложения во всех категориях и вообще во всем ассортименте магазина стало легче легкого: навигация осуществляется простым перемещением вправо или влево, одним движением пальца. Если вас что-то заинтересовало, можете подробно ознакомиться с приложениями в конкретной категории, просто коснувшись ее названия.

Чтобы просмотреть другие категории, воспользуйтесь горизонтальной прокруткой (щелкните, чтобы увеличить изображение)

Во многих новых категориях магазина мы будем обращать внимание покупателей на приложения, выбранные редакцией на основании ряда факторов, включая их эффективность на платформе или удачное воплощение в них принципов проектирования в стиле Metro. Если несколько приложений, к которым мы хотим привлечь внимание, тематически связаны, мы создадим особую «тематическую» страницу, чтобы продемонстрировать эти приложения, со ссылкой на нее с целевой страницы. Покупатели смогут также просматривать списки самых популярных приложений, а также самых, на наш взгляд, качественных приложений в каждой категории. Мы будем привлекать внимание как к приложениям от новых разработчиков, ставших известными благодаря смелым идеям, так и к приложениям от разработчиков с устоявшейся репутацией производителей качественных приложений. И наконец, мы будем рекомендовать приложения на основании анализа покупательского спроса.

Чтобы лучше освоиться в наших категориях и разобраться в типах приложений в нашем магазине, примените жест сжатия, чтобы уменьшить изображение, и просмотрите все категории, а затем касанием откройте интересующую вас категорию. Этими жестами можно пользоваться, начиная с экрана «Пуск». Мы называем эти жесты «семантическим масштабированием», поскольку они позволяют увеличивать или уменьшать изображение в зависимости от того, хотите ли вы просматривать его с большей или меньшей детализацией. При сильном уменьшении отображаются сразу все категории приложений в магазине, облегчая покупателям навигацию, даже если каталог очень велик и содержит множество категорий. Сайт спроектирован так, что навигация остается эффективной даже по мере разрастания каталога и категорий. Мы создали целевую страницу, используя стандартный элемент управления ListView, а также семантическое масштабирование, доступное разработчикам приложений в стиле Metro с помощью HTML и JavaScript.

 Уменьшите, чтобы увидеть другие категории

Учитывая огромное число категорий, плоская структура навигации по магазину стала намного лучше благодаря масштабированию, что является одним из важнейших элементов архитектуры проектирования в стиле Metro в Windows 8.

Поиск и навигация по магазину

Функция поиска стала чрезвычайно важным компонентом пользовательских интерфейсов и сейчас является для покупателей интернет-магазинов одним из наиболее типичных способов ознакомления с ассортиментом. В магазине Windows реализована функция контракта «Поиск», позволяющая выполнять поиск внутри используемого приложения касанием значка «Поиск». Это упрощает поиск новинок, если у вас уже открыто приложение магазина. Но мы сделали возможным поиск по магазину даже без необходимости открывать его приложение.

Поиск приложений откуда угодно в Windows

Если при посещении того или иного сайта или при работе с тем или иным приложением вам понадобится какое-либо приложение, просто коснитесь значка «Поиск», введите слово для поиска и выберите «Магазин», чтобы увидеть результаты поиска по своему запросу.

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

Использование поиска в магазине

Когда вы начнете набирать название, в панели поиска начнут появляться предлагаемые варианты. Эта функция — подспорье для многих, но она особенно полезна при сенсорном вводе. Если один из предлагаемых вариантов является приложением, результат будет отмечен как «Рекомендованный», и касанием можно перейти сразу к странице характеристик приложения, минуя страницу результатов поиска, то есть покупатель быстрее переходит к описанию нужного приложения. Даже в рекомендованных результатах поиска фирменный значок приложения помогает сразу его узнать.

Если же выполняется поиск по общему запросу, а не поиск конкретного приложения, откроется страница результатов.

 Страница результатов поиска

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

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

Страница категории

Страницы характеристик приложения

Здесь покупатели могут узнать о приложении все, что им требуется (а разработчики здесь же могут расхваливать свои продукты и подчеркивать их достоинства).

Страница характеристик преподносит приложение в лучшем свете

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

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

Страница характеристик приложения для рабочего стола

Установка приложений

Устанавливать приложения на Windows 8 будет просто, быстро и надежно.

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

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

Но по индикатору выполнения вы сможете следить за ходом установки, а также сможете добавить значок нового приложения на экран «Пуск». Если вам хочется узнать точный показатель хода выполнения установки, коснитесь индикатора, чтобы увидеть подробности.

Просмотр устанавливаемых приложений

По завершении установки появится уведомление о готовности приложения. Коснувшись уведомления, можно запустить приложение и сразу начать пользоваться им. Значок нового приложения всегда появляется на экране «Пуск», а оттуда его можно легко перенести куда угодно, то есть вы располагаете приложения на экране «Пуск» по своему усмотрению.

Обновление приложений

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

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

 Обновить приложения можно легко и просто

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

Использование приложений на нескольких устройствах

Учитывая, что у вас может быть несколько компьютеров и вы захотите пользоваться приложениями на каждом из них, мы предусмотрели возможность установки и запуска всех ваших приложений максимум на пяти компьютерах с Windows 8. При установке приложения на каждом новом устройстве это устройство заносится в список устройств, которым разрешено запускать данное приложение. При попытке установить приложение на шестое устройство будет предложено удалить одно устройство из списка.

 Просмотреть все ваши приложения и переустановить их

Можно также отфильтровать приложения, установленные на конкретном устройстве. Это позволяет легко взять приложения с одного устройства и установить их на другое. Фактически, если приложения были перемещены, а ваша учетная запись подключена (при входе в Windows 8 через Windows Live ID), настройки и состояние отдельных приложений сохраняются при переносе с одного устройства на другое.

В поисках оптимального баланса

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

Джонатан Дж. Вонг (Jonathan J. Wang)

Загрузите это видео, чтобы просмотреть его в предпочитаемом мультимедиа-проигрывателе:
MP4, высокое качество | MP4, низкое качество