Поддержка сенсорного ввода и редактирования в Office Web Apps на планшетах под управлением ОС Windows 8 и iOS

Дата публикации исходной статьи: понедельник, 20 августа 2012 г.

Несколько недель назад был представлен новый выпуск Office Web Apps. В нем реализованы новые возможности, позволяющие повысить производительность приложений и повсеместного доступа к документам с использованием любого из распространенных браузеров.

 

 

 

Сегодня мы с радостью представляем новое слово в технологии ввода данных — сенсорный ввод. Благодаря этому мы можем реализовать полноценные функции просмотра и редактирования Office Web Apps на планшетах и в браузерах, поддерживающих сенсорный ввод, к числу которых относятся IE для ОС Windows 8 и мобильная версия Safari для iOS.

 При работе над поддержкой сенсорного ввода в Office Web Apps перед нами стояли следующие задачи:

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

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

Разработка платформы для поддержки сенсорного ввода

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

При построении кросс-платформенного пользовательского интерфейса мы руководствовались следующими принципами:

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

Рассмотрим обозначенные принципы подробнее:

Оптимизация сценариев и интерфейсов для сенсорного ввода

Написание этой статьи со всеми правками заняло у меня несколько дней. Как и большинство из вас, все это время я не сидела безвылазно за своим столом, а успевала посещать различные мероприятия, как, например, тренировки моего ребенка. При этом я не носила с собой громоздкий ноутбук. Начав работу на своем настольном ПК, я загрузила документ в службу Skydrive и продолжала работу с ним на планшете.

Основываясь на практическом опыте и глубоком анализе сценариев использования, мы смогли выделить две основных закономерности:

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

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

 2.        Для изменения документов пользователям достаточно самых простых функций редактирования.

• Мамы школьников, такие как и я, хотят быстро отметить меню обеда для своего ребенка в табличке, распространяемой родительским комитетом.

• Студенты часто вносят в свои работы незначительные изменения на стадии финальной доводки.

Сенсорный ввод без ошибок

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

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

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

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

Удобство сенсорного пользовательского интерфейса во многом зависит от размера его элементов. Многие из них, в том числе элементы ленты и контекстных меню, имеют размер меньше определенного в рекомендациях для ОС Windows 8 и Microsoft Office.

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

 

 

Обратите внимание на увеличенный размер сенсорных элементов управления и комфортное расстояние между ними:

 

  Вкладка "Главная" (Home) веб-приложения Excel Web App:

Вкладка "Вставка" (Insert) веб-приложения PowerPoint Web App:

Вкладка "Главная" (Home) веб-приложения OneNote Web App:

Палитра веб-приложения Word Web App:

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

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

Для полноценной работы достаточно знать всего пять жестов:

 

Рассмотрим порядок использования этих жестов в веб-приложениях Office Web Apps:

Прокрутка документа и просмотр его содержимого

Чтобы быстро просмотреть содержимое документа, быстро проведите пальцем по экрану. При этом вы можете в любой момент остановить прокрутку, коснувшись экрана пальцем.

Для поддержки ускоренной прокрутки в представлениях чтения и редактирования Word Web App мы использовали встроенные возможности браузера.

В веб-приложении PowerPoint Web App с помощью этого жеста вы можете переходить между слайдами.  

Масштабирование

Чтобы увеличить или уменьшить масштаб в пользовательском интерфейсе, разведите или сведите два пальца.

Ввод

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

 

Точка вставки в веб-приложении Word Web App:

 

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

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

Размещение точки вставки

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

В большинстве случаев пользователи изменяют слово с начала или конца.

Поэтому при определении позиции точки мы руководствуемся следующими принципами:

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

Выделение

Другая популярная операция — выделение — позволяет перемещать текст, копировать, применять различное форматирование и выполнять другие действия с ним. При использовании мыши и специальных клавиша на клавиатуре в сочетании с клавишей SHIFT достигается высокая точность выделения.

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

Выделение текста в веб-приложении Word Web App с помощью маркера:

 

  Выбор размера вставляемой таблицы:

 

Выбор действий в контекстном меню

С помощью таких меню обеспечивается быстрый доступ к нужным действиям в зависимости от контекста приложения. Думается, вы уже хорошо знакомы с использованием контекстных меню Office Web Apps при работе с мышью. Чтобы открыть такое меню, достаточно нажать правую кнопку мыши.

Контекстное меню в представлении редактирования Word Web App, вызываемое правой кнопкой мыши:

 

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

 

Вызов контекстного меню при касании выделенного фрагмента:

 

 

Обратите внимание на комфортное расстояние между элементами управления контекстного меню в сенсорном интерфейсе.

Чтобы открыть контекстное меню в точке вставки, коснитесь экрана в нужной точке и непродолжительное время удерживайте палец на нем:

 

В представлении чтения веб-приложения Word Web App при однократном касании выделяется отдельная строка. При однократном касании выделенного фрагмента открывается контекстное меню.

 

Контекстное меню для выделенного фрагмента в Word Web App Viewer:

 

Возможность параллельного применения сенсорного ввода, клавиатуры и мыши

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

В ОС Windows 8 вы можете работать с приложениями Office Web Apps в сенсорном режиме, с помощью клавиатуры и мыши, а также одновременно всеми этими способами в любом сочетании. В iOS для работы в Office Web Apps рекомендуется использовать сенсорный ввод.

Сенсорный режим

Элементы пользовательского интерфейса Office Web Apps можно разделить на две крупных категории:

• Постоянный интерфейс

Этот интерфейс всегда доступен и отображается в приложении.

Пример: область навигации или лента в OneNote Web App.

• Контекстный интерфейс

Этот интерфейс отображается и скрывается по запросу пользователя.

Пример: контекстные меню.

При работе с сенсорным устройством в сенсорном режиме в приложениях Office Web Apps по умолчанию отображается постоянный пользовательский интерфейс. Чтобы переключиться к интерфейсу с поддержкой мыши, используйте кнопку "Сенсорный режим" (Touch mode).

Эта кнопка доступна в панели быстрого доступа в верхней левой части окна Office Web Apps и позволяет переключаться между сенсорным режимом и режимом повышенной точности (с поддержкой мыши).

При нажатой кнопке "Сенсорный режим" (Touch Mode) отображается сенсорный пользовательский интерфейс:

 

Кнопка "Сенсорный режим" (Touch Mode):

 

Контекстные меню, а также всплывающие элементы и меню ленты отображаются только по запросу в соответствии с режимом ввода, в котором они были выбраны.

Заключение

Мы рекомендуем вам ознакомиться с предварительной версией Office Web Apps Preview на веб-сайте skydrive.com или Office 365 Preview для сенсорных устройств под управлением ОС Windows 8 и ОС iOS для iPad. 

Мы будем рады вашим отзывам и предложениям. Для отправки отзывов вы можете использовать соответствующую кнопку в верхнем правом углу окна приложения и команду "Оставить отзыв" (Give Feedback) в меню "Файл" (File).

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

  Рену Деви

Руководитель программы, Office Web Apps

 

Это локализованная запись блога. Исходная статья находится по адресу Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets