Панель інструментів редакторів МойОфис

Введення
Наша команда з 2013 року працює над офісними додатками МойОфис. У лінійку продуктів входить повний набір додатків для роботи з документами, поштою, календарями та контактами на комп'ютерах, мобільних пристроях і в веб-браузерах, а також сервер спільної роботи, поштовий сервер та система зберігання даних. У цій статті ми хочемо розповісти вам про засади розробки інтерфейсів редакторів МойОфис для різних платформ і пристроїв.
image

«Простота і зручність на будь-якому пристрої» – ось наш підхід до інтерфейсу. З одного боку ми вирішили використовувати звичні користувачам концепції для нашої панелі управління в редакторах. З іншого — значно спростити роботу в редакторах.

У користувача, який довго взаємодіє з будь-яким продуктом, виробляються певні звички: робота з тими або іншими функціями, натискання на кнопки у звичних місцях і т. д. Наприклад, всі користувачі Windows звикли до кнопки «Home» в лівому нижньому кутку і до того, що відбувалося при натисканні на цю кнопку. Коли кнопка зникла і потім повернулася, але вже зі зміненим принципом роботи, користувачі випробували сильний дискомфорт і втрачали в продуктивності.

При роботі з офісними пакетами формуються свої звички. Візьмемо для прикладу панель інструментів в офісних редакторах. Можна виділити два основних підходи до організації панелі інструментів:

  • Стрічковий (Ribbon), коли велика кількість дій розподілено по різних вкладках


  • Традиційний, коли велика кількість дій виводиться на єдину панель інструментів. А менш важливі дії переносяться в меню

Користувачі звикають до однієї схеми і перехід на іншу часто сприймається «в штики». Досить згадати оновлення пакета MS Office 2007 році, коли стрічковий інтерфейс прийшов на зміну традиційному.

Ми прекрасно розуміли, що нам необхідно розробити інтерфейс, який буде підтримувати існуючі звички користувачів. У них не буде часу та мотивації на тривале навчання чомусь новому, але їм також необхідно вирішувати щоденні завдання.

Однак, сліпо копіювати чужі рішення ми теж не хотіли, тому що бачили в них ряд істотних недоліків:

  • Звичайно 80% користувачам потрібно лише 20% функціональності з того різноманіття, яке вони бачать на панелі управління.
  • Деякі функції є контекстними (тобто залежать від обраних у документі об'єктів), деякі ставляться до документа в цілому. Але при цьому функції можуть знаходитися на одній вкладці.
  • Ряд функцій дублюється на різних вкладках, але при цьому функції мають різні назви.
  • І багато інших дрібних (і не дуже) особливостей.
Крім того, сучасні користувачі в ході роботи над документом можуть перемикатися між різними форм-факторами і платформами: створювати документ на ноутбуці в літаку, працювати спільно з колегами в браузері, вносити правки з мобільного пристрою. Далеко не всі офісні пакети дозволяють безболісно (з точки зору користувача взаємодії) переключатися між пристроями.

Нижче ми розповімо про тих правилах, підходах та особливості, які ми використовуємо в панелі управління редакторів МойОфис.

Загальна концепція
  • У нашій панелі інструментів елементи керування розподілені по декількох вкладках:
    «Текст». Містить функції для роботи з текстом: розмір шрифту, колір шрифту, міжрядковий інтервал та ін
  • «Таблиця» (або «Осередок» для табличного редактора). Містить функції для роботи з клітинками таблиці: вставка стовбців/рядків, заливка клітинки, фільтрація значень і ін
  • «Рецензування». Містить функції для роботи із змінами в документі: прийняти/відхилити виправлення, включити/відключити їх відображення та ін
Найближчим часом з'являться ще кілька вкладок, наприклад, «Зображення».



З першого погляду, це дуже схоже на «стрічковий» підхід. Але в нашій реалізації різні установки і системні дії з документом (створення копії, спільний доступ та ін) перенесені в головне меню. А дії додавання різних об'єктів зібрані в єдиному місці:

  • для веб-і настільних редакторів – панель в правій частині екрана
  • для мобільних редакторів — панель дій у верхній частині екрана

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

Вийшла сильно сфокусована панель інструментів, де набір функцій і кількість вкладок визначаються об'єктом, з яким в даний момент взаємодіє користувач. Наприклад, при роботі в текстовому редакторі людина в більшості випадків бачить лише одну вкладку «Текст», яка містить дії по форматуванню тексту. При вставці таблиці в документ і роботи з цією таблицею (т. е. при виборі клітинок або таблиці), автоматично з'являється вкладка для роботи з об'єктом. Як тільки таблиця втрачає фокус — вкладка зникає.


Така контекстность впливає і на набір елементів керування панелі. Наприклад, у текстовому редакторі при роботі з текстом в таблиці на вкладці “Текст" з'являються дії для вирівнювання по вертикалі.


В режимі «Тільки читання» панель інструментів може взагалі бути відсутнім, якщо власник документа не включив запис змін.



З чого складається панель інструментів
Можна виділити кілька типів елементів управління:
1) Проста кнопка.
Натискання на цю кнопку виробляє одиничне дію з об'єктом. Наприклад, збільшує розмір шрифту або додає стовпця в таблицю.



2) Кнопка включення/відключення якої-небудь властивості.
Наприклад, зробити текст жирним. Такі кнопки мають два стани.



3) Випадаючий список (або список-діалог).
Дозволяє вибрати один з варіантів форматування. Наприклад, вибір кольору тексту або маркованого списку.


4) Двухсегментый елемент управління
Дозволяє вибрати одне із значень (у випадаючому списку), або виробити якесь швидке дію. Наприклад, елемент вибору розміру шрифту. Людина може вибрати значення зі списку встановлених або вказати своє. Цей елемент характерний лише для Web/Desktop.



5) Складний складовою список (або діалог)
Список або діалог, який дозволяє виконувати кілька дій без закриття. Наприклад, форматувати межі комірки або налаштовувати абзац.


Правила відображення елементів панелі
Редактори МойОфис працюють на великій кількості платформ і форм-факторів: від невеликих телефонів з діагоналлю екрана близько 4 дюймів до великих планшетів типу iPad Pro.

При такій уніфікації важливо розуміти, скільки елементів управління буде доступно користувачеві і яке значення вони будуть мати при зміні розміру екрана. Або, наприклад, за яким правилом зміниться панель інструментів при додаванні нового елемента управління, адже розвиток продукту у нас не зупиняється ні на хвилину.

Щоб вирішити цю складну задачу, ми розділили всю область панелі інструментів на рівні за розміром комірки. Кожен елемент керування може займати одну або декілька комірок. Така комірчаста структура дозволила опрацювати низку правил відображення елементів на панелі.

1) Зменшення розміру елемента.

Якщо елемент займає більше двох осередків, його розмір може зменшуватися при зменшенні розмірів екрану/вікна. Наприклад, так веде себе елемент вибору шрифту.

Для вузьких екранів або вікон ми допускаємо ще одне стан елемента — нова кнопка шириною в одну комірку. Це дозволяє «згортати» панель інструментів, не змінюючи порядок розташування доступних команд.



2) Об'єднання елементів.
Ряд елементів управління можуть об'єднуватися в один елемент типу «Розкривний список». Таке об'єднання можливе для елементів, які мають однакову за змістом функціональність. Наприклад, елементи для вирівнювання тексту.



3) Кілька рядків в панелі управління.
В web-додатках додаткові рядки можуть з'являтися при зовсім маленькому розмірі вікна браузера. Таке часто буває, коли користувачі зменшують розмір вікна до половини ширини екрану і відкривають відразу два документи, щоб копіювати з одного в інший або порівнювати вміст.


На планшетах додаткові рядки можуть з'являтися при зміні орієнтації пристрою.



Для смартфонів наявність декількох рядків в панелі управління – це стандартна ситуація. Ширина екрану не дозволяє вмістити в один рядок весь набір елементів управління (або доведеться робити цю рядок з горизонтальною прокруткою). Але і на екрані смартфонів можуть з'являтися або зникати додаткові рядки при зміні орієнтації.



4) Приховування елементів у додатковий випадаюче меню
На смартфонах ми можемо відображати не більше 4 рядків в панелі інструментів. В іншому випадку, панель інструментів займатиме більше половини висоти екрана. У цьому випадку, ми можемо «пожертвувати» поруч елементів, які рідко використовуються, і приховати їх у додаткове випадаюче меню.


Особливості роботи на мобільних пристроях
Розташування панелі інструментів
На смартфонах панель інструментів розташовується в нижній частині екрана як в портретній, так і в ландшафтній орієнтації.



Тут відразу ж виникає складність — під час написання тексту з'являється клавіатура, яка, природно, перекриває панель інструментів. Для вирішення цієї проблеми ми реалізували перемикач над клавіатурою. Він дозволяє швидко приховати або клавіатуру, або панель інструментів.



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



Це дозволяє завжди мати під рукою інструменти редагування, які не перекриваються екранною клавіатурою. Якщо людина не планує форматувати документ, наприклад, він тільки вивчає інформацію, то можна приховати панель інструментів натисканням на поточну активну вкладку.



Особливості елементів управління
На iPhone ми не можемо показувати список, що випадає. Тому, в панелі управління з'являється додатковий рівень навігації. Наприклад, список розмірів шрифту з'являється на наступному рівні навігації з можливістю повернутися назад.



На Android-смартфонах не вводиться додаткового рівня ієрархії і усі випадаючі списки і діалоги ведуть себе відповідно. Їх розмір (ширина та висота) залежить від інформації, яка в них відображається.


Замість висновку
Ми розуміємо, що неможливо створити ідеальний інтерфейс «на століття» і в обраному нами підході є шорсткості. Наприклад, необхідно постійно перемикатися між віртуальною клавіатурою і панеллю інструментів на смартфонах. Тому, ми постійно експериментуємо. Прямо зараз ми працюємо над цікавими рішеннями в плані контекстного форматування як на мобільних платформах, так в настільних версіях. Можливо, після впровадження даної функціональності нам вдасться ще сильніше спростити панель інструментів, яка є «серцем» будь-якого редактора.
Цікаво було б прочитати в коментарях, а які ви виділяєте недоліки або, навпаки, гідності офісних додатків на різних платформах? Редагуєте чи тексти або документи на смартфоні/планшеті?
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.