Введение
Наша команда с 2013 года работает над офисными приложениями МойОфис. В линейку продуктов входит полный набор приложений для работы с документами, почтой, календарями и контактами на компьютерах, мобильных устройствах и в веб-браузерах, а также сервер совместной работы, почтовый сервер и система хранения данных. В этой статье мы хотим рассказать вам о принципах разработки интерфейсов редакторов МойОфис для различных платформ и устройств.
«Простота и удобство на любом устройстве» – вот наш подход к интерфейсу. С одной стороны мы решили использовать привычные пользователям концепции для нашей панели управления в редакторах. С другой — значительно упростить работу в редакторах.
У пользователя, который долго взаимодействует с любым продуктом, вырабатываются определённые привычки: работа с теми или иными функциями, нажатие на кнопки в привычных местах и т.д. Например, все пользователи 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-смартфонах не вводится дополнительного уровня иерархии и все выпадающие списки и диалоги ведут себя соответствующе. Их размер (ширина и высота) зависит от информации, которая в них отображается.
Вместо заключения
Мы понимаем, что невозможно создать идеальный интерфейс «на века» и в выбранном нами подходе есть шероховатости. Например, необходимо постоянно переключаться между виртуальной клавиатурой и панелью инструментов на смартфонах. Поэтому, мы постоянно экспериментируем. Прямо сейчас мы работаем над интересными решениями в плане контекстного форматирования как на мобильных платформах, так в настольных версиях. Возможно, после внедрения данной функциональности нам удастся ещё сильнее упростить панель инструментов, которая является «сердцем» любого редактора.
Интересно было бы прочитать в комментариях, а какие вы выделяете недостатки или, наоборот, достоинства офисных приложений на разных платформах? Редактируете ли тексты или документы на смартфоне/планшете?
Комментарии (38)
zeronice
23.12.2016 10:51+2Сколько ни спрашивал про демо доступ, чтобы попробовать продукт — мне даже на письма не отвечали. Прежде чем расписывать детали интерфейса — дайте хотя посмотреть на этого кота в мешке.
myoffice_ru
23.12.2016 10:57Подскажите, на какой адрес вы отправляли запрос на демо? Мы распространяем МойОфис через партнеров. Демо-версию они предоставляют — равно как и расчет стоимости.
Список партнеров с возможностью выбрать подходящего и заказать демо-доступ доступен на нашем сайте в разделе myoffice.ru/partners )zeronice
23.12.2016 11:03изначально заполнят форму https://myoffice.ru/partners/#partner4 еще полтора года назад, насколько помнится, тогда было закрытое тестирование. с тех пор пару раз пытался куда-то писать — безрезультатно. контактный адрес всегда указывал ib[at]tundrasoft.ru
myoffice_ru
23.12.2016 11:12Проверили и не нашли ваш запрос:(
Мы можем сейчас связаться с вами по адресу ib[at]tundrasoft.ru? Или вы можете написать нашей службе поддержки customers[at]ncloudtech.ruzeronice
23.12.2016 11:36да, свяжитесь.
myoffice_ru
23.12.2016 12:16Мы с вами свяжемся. Выбрать подходящего партнера и заказать демо-доступ можно в разделе https://myoffice.ru/buy :) По ссылке https://myoffice.ru/partners/ можно подать заявку, чтобы вступить в нашу партнерскую программу.
Liteyshik
23.12.2016 10:54+4Может не совсем по теме, немного накипело.
Но сейчас наблюдается полный провал в программном обеспечении для обеспечения подготовки документации по ГОСТ (имеется в виду ЕСКД, ЕСТД) — написания различных инструкций, эксплуатационной документации, паспортов, ведомостей и т.п. Отсутствуют адекватные удобные инструменты подготовки шаблонов таких документов, отсутствует совместимость шаблонов созданных в разных организациях. Вот где непаханое поле! Вот в какой области должны работать разработчики отечественных текстовых и не только редакторов! У потребителя должна быть возможность, к примеру, открыть текстовый редактор выбрать размер листа по ГОСТ 2.301, выбрать форматку Формы 2 по ГОСТ 2.104 (в векторном формате) и выбрать форматирование документа полностью отвечающее ГОСТ 2.105, структуру документа для Формуляра по ГОСТ 2.610, а оформление и нумерация рисунков в соответствии с ГОСТ 2.601. И реквизитная часть документа должна соответствовать ЕСКД! И чтобы пользователь больше не волновался что его документ не пройдет нормоконтроль из-за точек в конце нумерации пунктов! А еще чтобы в документах можно было бы заимствовать пункты и абзацы из одного документа в другой и что бы они изменялись параллельно во всех документах. Я сейчас не шучу.
Вот что нужно, а вы разрабатываете очередной текстовый редактор для офисных клерков, которым и Notepada обычно хватает. Понятно, что продукт сделан просто чтобы он был включен в список отечественного ПО, что бы выигрывать тендера.
Возможно все что я описал у вас есть, вот только даже захудалой демки у вас на сайте не сыщешь!myoffice_ru
23.12.2016 12:36Сейчас мы как раз решаем задачу поддержки регламентов и шаблонов делопроизводства согласно ГОСТ. Поддержка ЕСКД/ЕСТД — это наш следующий шаг.
А еще чтобы в документах можно было бы заимствовать пункты и абзацы из одного документа в другой и что бы они изменялись параллельно во всех документах.
В наши редакторы будет интегрирован «Конструктор документов» компании FreshDoc.ru. Это позволит решить задачу повторного использования пунктов и абзацев в документах.Liteyshik
23.12.2016 14:42+1Судя по описанию FreshDoc.ru не по что я имел в виду. FreshDoc.ru похоже просто система шаблонов. Поправьте, если я не прав.
Я имел в виду, что при разработке комплекта эксплуатационной документации на одно какое-то изделие в Формуляре, Паспорте и Руководстве по эксплуатации (документы просто для примера) могут использоваться одни и те же пункты (разделы, просто отдельные тексты, обозначения изделия), но в разных местах этих документов. Эти пункты содержат характеристики данного конкретного изделия и в каждом документе этого комплекта должны быть одинаковы. А характеристики изделия в процессе разработки иногда меняются, что вызывает лавину изменений во всех документах, относящихся к этому изделию. Поэтому, если изначально был разработан Формуляр (как наиболее полный документ) то должна быть возможность перенести из него в Паспорт некоторые пункты. Исправление текста этого пункта в Паспорте (ровно как и Формуляре) приведет к исправлению текста во всех документах, где этот пункт использовался.
Высшим пилотажем будет, автоматическое распознавание и подтягивание из ГОСТов определений понятий использованных в тексте. В интернете есть пример конторы, которая организовала весь вышеупомянутый функционал в ПО собственной разработки, но не продает софт, а продает услуги по разработке документации. За них можно только порадоваться.GoldenStar
23.12.2016 23:30Так у офиса есть автоматизация в виде VBA. Можно написать софт на C# в конце концов. Подозреваю, что многим это надо, но всем хотелось бы не на базе Microsoft Office, который дорожает изо дня на день. Помнится, три года назад себе домой покупал коробочную версию за 2000 руб, а сейчас она же стоит 7000 руб.
Liteyshik
26.12.2016 14:04Я инженер-технолог литейного производства. Я очень стараюсь, но я не программист. Каждый должен своим делом заниматься. Самое интересное, что и правда многим надо и в следующем году наша организация собирается софта для автоматизации и прочего закупить на 1 млн. рублей, но вот такого продукта, как мы обсуждаем, на рынке мы не нашли.
Rusheff
26.12.2016 20:12Такая же фигня, бро. Наши вроде асконовскую систему технологической документации собираются покупать. Посмотрим что-как. Но формы рисовал себе сам в старом Ворде (2003), сейчас 2010-й. Я самостоятельно леплю гиперссылки на ГОСТы и другую НТД. Но на систему это мало похоже. ((
Liteyshik
27.12.2016 08:36Рад встретить товарища по несчастью! Или счастью… ИМХО, не берите АСКОН, они тупиковая ветвь. Их мертворожденный 3d-движок приведет к гибели всего семейства их продукции, хотя конечно не скоро. Мы остановились на российских T-Flex DOCs + T-Flex CAD, но там систему документации пилить под себя на C# надо очень-очень много, в чем я и оказался крайним. Т.е. без отдела IT в компании с DOCs лучше не связываться. А так, можно сказать что эти ребята сейчас в авангарде российского машиностроительного САПР, и подают большие надежды. Есть еще интересные СПРУТ-ТП (они же swr-Технология), есть ТехноПро и тысячи прочих, но у всех свои недостатки. По настоящему хороших нет. С другой стороны если у вас чертежи на лицензионном KOMPAS, то выбора у вас особого нет… Что-то я в оффтоп ушел, прошу прощения. А так да, Word+формы в wmf+текстовые поля/автотексты.
aso
23.12.2016 13:36Всё, что Вы описали — было возможно получить за счёт шаблонов в старых офисах от Микрософт и проч., но бесконечное стремление к улучшайзингу это всё счастье похерило, емнип.
Liteyshik
23.12.2016 14:09Решается и сейчас (в Word 2010, по крайней мере) с помощью шаблонов, но удобством это назвать невозможно (особенно если тебе нужны вычисляемые и повторяемые строки). Кроме того поведение стилей в Word 2010 зависит от положения звезд на небе.
Bitepix
26.12.2016 12:06Нужно двигаться не в сторону упрощения бюрократии, а в сторону её искоренения.
Liteyshik
26.12.2016 14:15+1Смотря что считать бюрократией. ГОСТ — во первых это порядок (а это правильно), дело не в бюрократии. В том то и дело, что наличие готовых доступных всем шаблонов полностью устранило бы бюрократическую составляющую, а вывело стройную описанную со всех сторон систему документации. Я конечно понимаю, что наш человек не любит порядок, всем хочется какой-то отсебятины добавить или обхитрить кого. В беспорядке хуже просматривается обман. Однако вся отчетность по государственным (и не только) заказам сдается по ГОСТ (ЕСКД и ЕСТД и т.д.) и никуда вы не денетесь от этого.
Ciiol
26.12.2016 12:06Вот всё описанное можно хоть сейчас в LaTeX'e сделать. Чтобы содержимое было отдельно, а форматирование отдельно. И общую часть документов можно вынести в отдельный файл. И версионировать можно по-человечески. Но ведь хотят же MS Word и никак иначе.
Liteyshik
26.12.2016 14:39Посоветуйте, пожалуйста, LaTeX-редактор под Windows максимально похожий на MS Office для конечного пользователя. Желательно с оформлением панелей в стиле Ribbon. Ну или вообще какой-нибудь наиболее юзер-френдли — будем пробовать.
Ciiol
26.12.2016 15:59Если честно, не помню ничего, кроме Lyx, да и тот не очень похож на MS Word. Мне было удобнее писать в обычном тестовом редакторе. Там ведь вся сложность скрыта в шаблоне. Если он уже есть, то пишется обычный текст с достаточно простой разметкой.
Liteyshik
26.12.2016 16:42Спасибо! Я его смотрел, вряд ли он нам подойдет — никто не захочет разбираться с такой разметкой…
aso
23.12.2016 11:46+1Традиционный, когда большое количество действий выводится на единую панель инструментов. А менее важные действия переносятся в меню
«Менюшный» подход изначально предполагал, что все возможные действия пользователя есть в меню — а на панель выносятся только наиболее часто употребимые (причём нередко пользователь сам мог настраивать панель). При этом менюшка играет роль «опережающей подсказки» — явно предлагая пользователям возможные варианты действий.
Контекстно-зависимое меню перестаёт играть эту роль — и плохо тем, что пользователь может в принципе не знать и никогда не узнать о некоторой возможности.myoffice_ru
26.12.2016 12:30Спасибо за ваш комментарий, дополнили статью. Настольные приложения МойОфис имеют такое меню, но в web приложении оно отключено для отображения по умолчанию.
myoffice_ru
26.12.2016 13:51В web-версии главное меню также есть, но отключено по умолчанию. При необходимости пользователь может его включить.
KVL01
23.12.2016 12:16-1Надеюсь, хоть LibreOffice, где пока ещё можно добавить/удалить/изменить любую панель/меню/кнопку, до такого не докатится.
Нет, я не фанат открытого софта, но организовать действительно удобную работу с текстом (а не строчить служебные записки) можно только в нём и старом MSO 2003.
Paulster
23.12.2016 13:39Нельзя ли решить проблему с клавиатурой разработкой своей собственной клавиатуры? Насколько знаю, в iOS и Android есть возможность ставить «кастомные» клавиатуры. Можно взять внешний вид дефолтной и сделать переключатель в режим редактирования текста, так же как есть переключатель на другой язык\спецсимволы и т.д. Не знаю насколько глубоки возможности кастомизации (всплывающие окна и т.п. без сворачивания клавиатуры), но, на мой взгляд, это было бы удобней описанной реализации. Успехов!
myoffice_ru
23.12.2016 17:27Спасибо за внимание к нашим продуктам! Идея интересная, возможно мы реализуем ее в будущем.
netcitizen
23.12.2016 17:07Цены на ваши продукты вряд ли можно считать конкурентоспособными на рынке. Оставив за скобками госучреждения, не вижу вашей ЦА.
myoffice_ru
23.12.2016 17:13+1Почему вы считаете, что наши цены не конкурентноспособны?
netcitizen
23.12.2016 17:19Смотрел цены для организаций и сравнивал их с лицензиями персональными Microsoft. Пардон.
Есть ли у персональные лицензии?
myoffice_ru
23.12.2016 17:30Персональных лицензий у нас нет, потому что мы ориентируемся на государственные организации и корпоративных заказчиков.
olegi
25.12.2016 21:38а как быть студентам и ученикам старших классов?
myoffice_ru
26.12.2016 12:08Образовательные учреждения могут закупить наши продукты по специальной цене в рамках программы «МойОфис для образования». В 2017 году мы готовимся выпустить на рынок бесплатный продукт для образования.
olegi
26.12.2016 12:13+1речь не об учреждениях, а физиках.
буквально месяц назад звонила знакомая 50 летняя бухгалтер и спрашивала, что значит когда ms office пишет, что скоро кончится 60 дневный trial период. это она новый ноутбук купила.
Chelman
Вы же для Хабра пишите, товарищи!
Расскажите, на чём построен фронт-енд web приложения.
myoffice_ru
Расскажем! Это следующая тема для отдельной статьи в нашем блоге :)
nukler
Им чо сказали то и пишут. Могут вообще ничего не писать.
В конце концов не от обычных пользователей они деньги получают и тем более не от их мнения зависят.