Дизайн контекстного меню

Дана стаття — переклад англомовної «Context Menu design».

Сьогодні я хочу поговорити про використання контекстного меню у дизайні веб-додатків.

Що таке контекстне меню

Контекстне меню — це меню, яке містить специфічні команди, що можуть бути застосовані до об’єкту, на який наведено курсор (див. примітку про тач-скріни нижче). Часто контекстне меню також називають «меню правої кнопки миші», оскільки у Windows воно активується саме кліком правої клавіши мишки.

В яких додатках варто використиовувати контекстне меню?

Контекстне меню підходить не для кожного додатку. Я, безсумнівно, не раджу використовувати його на сайті, призначеному для купівлі товарів, як, наприклад, Lands End чи Amazon. Також я вважаю, що немає змісту використовувати контекстне меню на будь-якому сайті, який орієнтований на споживача: сайт банку, сайт знайомств, Facebook. Мої міркування полягають у тому, що найбільш корисним є створення цього типу меню у програмах для великого бізнесу, тому що саме там користувачі вже звикли до його використання. Чому ж саме контекстне меню є таким корисним в цьому випадку?

По-перше, контекстне меню зменшує необхідність зайвих рухів, що у певних випадках суттєво економить час користувача. При наявності контекстного меню не виникає потреби спочатку виділяти об’єкт, а потім шукати на панелі інструментів необхідну дію. Варто лише натиснути праву кнопку миші і обрати підходящу команду із списку.

По-друге, контекстне меню допомагає вивчити можливості додатку. Обираючи його, користувач одразу бачить, які дії можуть бути застосовані до об’єкту та на що здатна дана програма.

Та навіть не зважаючи на всі вище описані плюси, ви можете бути здивовані тим, як багато людей не використовує контекстне меню взагалі. Так само, як не використовують вони і комбінації «гарячих» клавіш, які створені для того, щоб скоротити час, необхідний на виконання певних дій. Тому вам обов’язково потрібно прийняти це до уваги при плануванні роботи свого додатку.
Отже, припустімо, що для вашого додатку контекстне меню є необхідним. Давайте розберемося із тим, як зробити так, щоб у вашому випадку воно було побудовано і працювало коректно.

Як відкривається контекстне меню?

Традиційно, у Windows контекстне меню відкривається за допомогою наведення курсору на іконку необхідного об’єкту та натискання на ньому правою кнопкою миші. Користувачі Mас також використовують праву кнопку миші (якщо вона налаштована на відповідне використання), або ж викликають меню за допомогою утримання клавіші Ctrl та кліку мишкою на об’єкту. Важливим правилом є те, що одне й те саме контекстне меню повинно відкриватися не залежно від того, на який частині іконки натиснув користувач.
*Примітка про тач-скріни: у мобільних телефонах з сенсорними екранами та iPad курсор не передбачений. Тому тут є три шляхи, за допомогою яких можна викликати контекстне меню. Перший — виділити необхідний об’єкт, потім перейти в меню (не найкраще рішення); другий варіант — виділити необхідний об’єкт та утримувати його, таким чином викликаючи контекстне меню (вже зручніше); і третій варіант — додати управління меню як описано нижче.

Додавання управляючого елементу меню

В деяких додатках, які працюють через мережу, є спеціальна іконка, натискання на яку дозволяє відкрити меню. Це так звана «іконка меню» — невеличка стрілочка, яка вказує вниз, і знаходиться одразу біля назви пункту меню. Для відкриття цього меню користувач повинен мати можливість клікнути на ній лівою АБО правою кнопкою мишки. Найбільша помилка, яку ви можете зробити — це розмістити іконку меню, яку користувач не зможе відкрити тому, що він натиснув на неї неправильною кнопкою мишки.

Якщо ви пропонуєте можливість вибору управління меню, майте на увазі, що натискання на стрілочку, яка зображує це меню, повинне викликати саме меню, в той самий час як натискання на текст в рядку або на сам рядок, повинно давати можливість вибору рядка. На малюнку зверху зображено, яким саме чином можна відкрити безпосередньо меню, не вибираючи при цьому рядок «Ahmed Hussain». Більш того, ви повинні надати користувачу можливість натиснути правою кнопкою мишки в будь-якому місці на рядку для того, щоб відкрити меню, не виділяючи при цьому сам рядок. Він не зобов’язаний використовувати іконку.

Чи є необхідність у створенні управляючого елементу меню? При вирішенні цього питання майте на увазі, що цей тип меню є дуже корисним, оскільки багато користувачів не мають жодного уявлення про те, що контекстне меню є доступним, особливо, коли мова йде про Інтернет-додатки. При цьому типовий значок стрілочки дає візуальну підказку на те, що дане меню присутнє і ним можна користуватися. В той самий час, багатьом користувачам і без того властиво припускати, що контекстне меню передбачене, тому вони природно будуть намагатись відкрити його. Якщо ви орієнтуєтесь саме на цей тип користувачів, у вас не має необхідності у створенні такого маркера (стрілочки).

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

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

Що включати в контекстне меню?

Контекстне меню повинно включати в себе команди, які можуть бути застосовані до вибраного об’єкту. Це можуть бути команди із панелі інструментів або команди із головного меню. При цьому важливо мати на увазі, що таке меню НЕ ПОВИННО містити у собі ВСІ доступні дії, які може виконати із об’єктом користувач, оскільки це зробить його надзвичайно громіздким. Одною із помилок, яку ви можете зробити при створенні контекстного меню, може бути перенаповнення його командами. Це зробить меню незручним у використанні, тому сконцентруйтеся на головному та відмовтесь від другорядного.

На малюнку нижче ви можете побачити контекстне меню для виділеного тексту в Dreamweaver, Microsoft Word, та Apple Pages. У випадку із Dreamweaver ми бачимо класичний підхід так званої «кухонної раковини» (kitchen sink) — меню містить у собі багато можливих команд, воно завелике і незручне. Саме з цієї причини особисто я уникав його використання, будучи користувачем Dreamweaver.
Варто також звернути увагу на ще одну помилку, допущену в даній програмі: найпопулярніші команди «копіювати», «вирізати» та «вставити» розміщенні знизу меню. У випадку із Word та Pages вони знаходяться зверху, а ті пункти, які передбачають відкриття підпунктів, навпаки, перенесені в самий низ.

В цілому, створюючи контекстне меню, краще розмістити в ньому 60% найважливіших та найчастіше використовуваних команд, ніж усі можливі 100% команд, наявність яких зробить меню великим і важким для використання. Пам’ятайте, що першочерговою метою створення цього меню є економія часу користувача.

Меню також НЕ повинно включати команди, які не належать до даного об’єкту. Намагайтесь також уникати пунктів, які є загальними для сторінки, такі як, наприклад «Оновити». Фокусуйтесь на тому, що є важливим для виділеного об’єкту.
Створюйте групи команд по 1-6 штук, використовуючи пробіли чи лінії, щоб розділяти їх. Найпопулярніші команди повинні бути зверху, ті, що використовуються рідше, розміщайте внизу. Команди, які майже ніколи не використовуються, в меню включати взагалі не варто.

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

В контекстне меню також можна включати додаткові налаштування — не обов’язково обмежуватись лише текстом. Наприклад, в Microsoft Word 2007 біля назви команди розміщені також відповідні їй значки (див. малюнок знизу зліва), а у Apple є кольорові квадратики для пункту Ярлик у контекстному меню для файлів робочого стола (малюнок знизу справа). Тож не будьте надмірно обмежені в тому, що саме повинно включати ваше контекстне меню і як воно повинне виглядати.

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

Я також часто розміщую першою в меню команду «за умовчуванням», тобто таку, яка буде виконана при подвійному кліку на об’єкті. Як правило, це команда «Відкрити» (ви можете бачити на малюнку вище, що так само зробив і Apple. Однак, часто у вас може не бути такої команди. В цьому випадку, користуйтесь моєю попередньою порадою про те, що верхніми пунктами вашого меню повинні бути найчастіше вживані.

Ви також можете вказувати назву об’єкту поряд з певними командами у контекстному меню, щоб внести ясність, до якого саме об’єкту вони стосуються. Приклад ви можете бачити вище на малюнку справа (контекстне меню Apple), де команда називається «Відкрити snap.png», а не просто «Відкрити». В даному випадку важливо правильно визначити баланс між тим, коли ваше меню є детальним і точним, а коли воно вже занадто повторюване, тому обміркуйте це дуже серйозно.

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

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

А що відбувається при виділенні декількох об’єктів?

У більшості випадків цільовим об’єктом, для якого користувач вибирає контекстне меню є той, на який вказує мишка. Але що відбувається у випадках, коли користувач виділив декілька об’єктів, а потім викликає для них контекстне меню.
В даному випадку є декілька варіантів того, що ви можете зробити. Давайте розглянемо їх на прикладі папки із 6 файлами: A, B, C та D, а також 2 малюнками — E та F.

Приклад № 1

Користувач виділяє A B та C, після чого відкриває контекстне меню на D. Примітка: D — не є в числі виділених об’єктів. В такому випадку виділення із A B та C повинно знятися, а контекстне меню повинно бути відкрите до об’єкту D.

Приклад № 2

Користувач виділяє об’єкти A, B та C, після чого відкриває контекстне меню на об’єкті C. В такому випадку важливим питанням є те, чи є усі виділені об’єкти файлами однакового типу. Або, кажучи навіть більш специфічно, чи є контекстне меню для всіх цих файлів одним і тим самим. Якщо так, то ви можете без проблем відкривати ваше контекстне меню. Наприклад, у випадку, коли користувач обирає команду «Відкрити», то усі три файли будуть відкриті. Якщо ж у вашому контекстному меню є такі команди, які не можуть бути застосовані одночасно до декількох об’єктів, то ви повинні зробити їх недоступними, при цьому не видаляючи їх із меню.

Раніше я казав, що ви можете конкретизувати свої команди, вказуючи ім’я файлу, до якого застосовується команда. У випадку, коли контекстне меню відкривається до кількох об’єктів, ви можете позначити це як «Відкрити 3 файли» — це допоможе користувачеві зрозуміти, що команда буде застосована до кількох об’єктів. Таким чином ваше меню може виглядати так:

• Виділити 4 об’єкти
• Скопіювати 4 об’єкти
• Видалити 4 об’єкта

Apple також використовує таке меню у своїй операційній системі, але робить це досить непослідовно. Для мене залишається незрозумілим, чому, наприклад, вони називають команду «Стиснути 3 об’єкти», але при цьому не конкретизують команду відкриття файлів, називаючи її просто командою «Відкрити». Це є досить дивним.

Приклад № 3

Давайте ускладнимо завдання і розглянемо приклад, коли користувач виділяє об’єкти A, B та Е, при чому Е — абсолютно відмінний від A та B тип файлу. Припустимо, A та B — це папки, а Е — малюнок, який, очевидно, має інше контекстне меню. Ми називаємо це виділенням файлів змішаного типу. На малюнку нижче ви можете побачити контекстне меню папки у операційній системі Windows (зліва), а також контекстне меню графічного файлу у тій самій операційній системі (справа). Вони є дуже різними.

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

Використання контекстного меню об’єкту, на який вказує мишка

Користувач виділяє A, B, та E, а потім клікає правою кнопкою на Е. Контекстне меню, яке відкриється, буде належати до файлу Е. На прикладі внизу ви бачите 3 малюнки. На першому виділена папка А, і ми бачимо контекстне меню для папок. На другому малюнку (по центру) ми бачимо виділений графічний файл та контекстне меню для нього. І нарешті на малюнку справа ми бачимо виділені дві папки та графічний файл, мишка вказує на останній і для нього ж відкрите контекстне меню.

Але якщо вам трапилось у контекстному меню обрати пункт, який може бути застосований до всіх трьох файлів — А, В, Е, наприклад, команда «Видалити», то всі три файли будуть видалені. З іншого боку, якщо можливості застосування команди до всіх трьох виділених файлів немає, то така команда буде застосована лише для файлу Е.

Нижче ви можете бачити те саме виділення файлів — А, В та Е. На малюнку зліва мі відкрили контекстне меню на файлі В та бачимо контекстне меню для папок. На малюнку справа виділені ті самі об’єкти, але контекстне меню відкрито на Е, і ми можемо бачити контекстне меню для графічних файлів.

Між тим ви можете бути здивовані, якщо задумаєтесь над тим, скільки додатків ви використовуєте, контекстне меню яких побудоване саме таким чином. Згадайте: якщо ви обираєте команду «Видалити», то ви очікуєте, що всі три файли будуть видалені, і так воно й відбувається. Це і є одна з тих речей, які спершу здаються складними, але насправді працюють правильно.
Єдина проблема, яка може бути пов’язана із цим підходом — користувачеві важко його передбачити. Ви не можете завжди бути впевнені, чи буде обрана команда виконана до всіх виділених файлів, чи лише до того, на який наведена мишка. Винятком є той випадок, коли користувач знає програму достатньо добре аби зрозуміти, до яких об’єктів команда може бути застосована. Ви можете вирішити проблему, якщо конкретизуєте меню, наприклад:

• Видалити 3 файли
• Експортувати «snapshot.png»

Більше того, я вважаю, що це рішення вдосконалює меню.

Однак, застосування цього підходу вимагатиме від вас певних роздумів. Вам потрібно продивитись всі пункти вашого контекстного меню і продумати, як та чи інша команда може застосовуватися до кожного із типу файлів. Чим простішим є ваше контекстне меню для кожного із об’єктів, тим простіше вам буде справитись із задачею. Наприклад, операційна система Apple використовує однаковий перелік команд як для папок, так и для графічних файлів, що значно спрощує їм життя, як ви можете побачити нижче:

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

А якщо відмінити виділення?

Розглянемо ситуацію, коли користувач виділяє А, В та Е, а потім намагається відкрити контекстне меню (вказуючи мишкою на будь-який файл), виділення відміняється, а натомість відкривається контекстне меню одного файлу. Ви можете застосовувати і такий прийом, але особисто мені він не подобається, адже часто вибір файлів для виділення може займати багато часу, і з його відміною ви змусите користувача пройти через цей процес ще раз. Тому як на мене, це один із прийомів, які краще не використовувати.

А якщо побудувати нове меню?

Іншим варіантом виходу із ситуації може бути створення нового меню «в останню хвилину», яке буде спільним для файлів виділеного типу. Моя порада: не робіть цього. Серйозно. Це погана думка із декількох причин. Це головний біль не лише з точки зору дизайну та технічного виконання даного меню. Це також додасть вам проблем у майбутньому, оскільки кожного разу, створюючи нову можливість у меню для певного файлу, вам потрібно буде переглядати всі можливості меню. І повірте мені, це не надто приємне заняття.

Отже, на завершення

Дозвольте мені закінчити, підсумовуючи усе вищесказане:

• Контекстне меню підходить не для кожного додатку. Переконайтесь, що ваша цільова аудиторія має в ньому необхідність. Якщо ви не впевнені в цьому, проведіть тести, які дозволять вам прослідкувати, чи НАМАГАЮТЬСЯ користувачі вашого додатку викликати контекстне меню. Якщо ви тестуєте людей, що виконують типові завдання, і ніхто із них не відкриває контекстне меню, то просто не витрачайте свій час.
• Мета створення контекстного меню — це економія часу користувача. Тож розробляйте його таким чином, щоб воно було чітким та лаконічним.
• Думайте над тим, як піднятись над рівнем того, що вже було придумано у дизайні контекстного меню до вас. У статті я перелічив декілька ідей: додавання управління меню, яке з’являється при наведенні мишки; відображення імені файлу, до якого буде застосована команда. Та я переконаний, тут може бути придумано набагато більше. Не бійтесь відійти від «стандартного» дизайну та вдосконалити його.

Переклала Irina Burt, спеціально для Продизайну.