У топіку «Агресивні« колючі »кнопки проти закруглених» розвинулася невелика дискусія з приводу розташування стандартних кнопок в діалогових вікнах ( «Так», «Ні», «ОК», «Скасування»). У цій статті я розглядаю основні помилки, які допускають проектувальники інтерфейсів щодо діалогових вікон.

діалогові вікна

Як часто ви потрапляєте в ситуацію, коли за звичкою натиснули на кнопку, чекаючи отримати один результат, а замість цього отримуєте прямо протилежний? Або, скажімо, «підвисає» над занадто зарозумілим діалогом підтвердження виходу? А може зустрічалися з питаннями із серії «Не зберігати?» і кнопки «Так», «Ні», «Скасування»? Виною цьому є нерозуміння розробниками «неписаного кодексу дизайну» - простих правил, які ніхто не придумував, але так уже склалося. Дана проблема поширена в світі вільного програмного забезпечення та майже відсутня в продуктах великих компаній, інтерфейси програм яких строго стандартизовані і ретельно продумуються. Давайте розглянемо кілька прикладів.

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

  • Відразу поставлений прямий і короткий питання: «Зберегти зміни?».
  • Короткі, моментально зрозумілі і легко сприймаються відповіді: «Так», «Ні», «Скасування».
  • Варіанти відповіді розташовані в єдино правильному і зручному порядку.
  • Правильний (в 90% випадків) відповідь вже виділено - можна сміливо тиснути пробіл і приступати до подальшої роботи.
Але є тут і недоліки (один з них - корпоративний, мати його, стандарт):
  • Заголовок вікна. Куди більш правильніше продублювати в ньому суть питання - «Зберегти?». Але з іншого боку це добре, адже це питання може вискочити в той момент, коли користувач працює з іншим додатком. Хоча знову ж таки, з якого переляку Word раптом буде закриватися без участі користувача, тим більше, коли він працює з іншою програмою? «За» більше, ніж «проти». Отже, краще продублювати питання в заголовку або, як компроміс, вказати з питанням назва програми ( «Зберегти? - Microsoft Word»).
  • Іконка. У продуктах Microsoft вона покликана задавати тон діалогу, але часто розробники використовують в якості ікони не просто «тоновий» знак, а піктограму дії, якщо вона присутня. Наприклад, так зроблено в наступному прикладі з іконкою «Зберегти». Я не буду зупинятися на питанні «Дискетка або HDD зі стрілкою вниз», оскільки це виходить за рамки цього топіка.
Тепер розберемо за таким же принципом інший діалог.

GNU Image Manipulation Program (GIMP)


Це - поганий діалог. Він складний, перенасичений інформацією. Пройдемося по списку:

  • Питання представлений в дуже довгій формі і для чогось додано «перед закриттям». Відповідь на це запитання тільки при закритті документа, так навіщо ж писати «перед закриттям»? Знову ж навіщо потрібно уточнення «в зображенні»? Я в графічному редакторі, капітан підказує, що в ньому працюють із зображеннями. Все-одно, що 3D Max запитає мене «Зберегти зміни в наборі тривимірних моделей, покритих текстурами% file_name%?»
  • Занадто довгі варіанти відповіді, які до того ж не відповідають питання (привіт, башорг!). Кнопки змушують включати мозок, що б зрозуміти, чого від мене хочуть.
  • Варіанти відповіді розташовані в одним розробникам зрозумілому порядку. Чому саме «Ні», «Скасування», «Так»? Як би натякають на «Чувак, твої вироби жахливі, не треба засмічувати гвинт»?
  • Виділено неправильний варіант відповіді. Пропозиція по-замовчуванню має виконувати якусь дію одним рухом користувача. Уявіть собі діалог установки ПО в Windows, де замість «Далі» в кожному вікні фокус буде стрибати на «Скасування». Нерозумно, чи не так?
  • Незрозуміло навіщо додана фраза «Якщо ви не збережете зображення, всі зміни за останні 3 хвилини будуть втрачені». Радійте, панове: я вирахував місце роботи Капітана Очевидність.
Але є в цьому вікні і позитивні моменти:
  • Інформативна іконка, відразу дає зрозуміти, що мова йде про збереження.
  • Інформативний (під сумнівом) заголовок вікна.
Відчуваєте різницю в цих діалогових вікнах? Перше зручно, а друге - ні. Якщо проаналізувати успішні продукти, можна виділити деякі правила. В даному контексті, найважливішим правилом є порядок кнопок. Зручний варіант це «позитивний, негативний, нейтральний» і ніяк інакше. Користувачі звикли в таких ситуаціях бачити першу кнопку - підтверджує, а останню - скасовує дане питання. Модальні вікна на кшталт налаштувань будуть розглянуті нижче.

Які звідси можна зробити висновки:

  • Задавати користувачеві питання потрібно максимально коротко, чим би не змушувати його півгодини думати над питанням.
  • Не застосовувати препарат негативні питання ( «Чи не зберігати?» І «Так», «Ні», «Скасування»).
  • Використовуйте тільки загальноприйнятий порядок кнопок (позитивний, негативний, нейтральний)
  • Варіанти відповіді повинні бути простими і лаконічними. Це програма, яка повинна швидко працювати, а не семінар лінгвістів, де можна розмовляти годинами ні про що.
  • Чи не писати зайву інформацію. Звичайно круто, що ви вважаєте, скільки часу пройшло з моменту останнього збереження, але користувачеві фіолетово на це, а в діалозі це тільки відверне і, можливо, поставить в ступор або навіть розсердить.
  • Заголовок вікна теж повинен бути інформативним.
  • Не забувайте про іконці. Вона повинна максимально відображати суть питання і бути легко впізнаваною.

Модальні вікна і кнопка «Застосувати»

Та ж проблема зустрічається і у вікнах налаштувань. Ось правильне вікно (о-па, знову MS):



Дві кнопки: «ОК» і «Скасувати». І «Скасування» праворуч. Так було є і буде. І це правильно, тому що всі до цього звикли. Якщо користувач чогось там наміняти і раптом передумає зберігати зміни, він не дивлячись жмакнет на праву нижню клавішу, тому що він звик там бачити скасування (і вона в продуктах MS там і є). Зовсім інша справа Linux. Тут немає жорстких правил і стандартів, тут кожен робить як хоче.



Цікаво, чи не так? Хоча попереднє вікно має нормальне розташування кнопок. Чим керувалися розробники - одному їжаку відомо. Залишимо ці промахи на совісті авторів, а для себе зробимо висновок: сама права кнопка - скасування (якщо це свій не особливий випадок).

Microsoft Windows

Ще один цікавий варіант - кнопка «Застосувати». Ах, які у мене з нею спогади ... Перед натисненням «ОК» на повному автоматизмі натискається «Застосувати». Не зрозуміло навіщо, але все ж :-)
Пережиток минулого, від якого Microsoft чомусь не хоче відмовлятися. Призначена вона для зберігання та застосування змін без закриття діалогового вікна. Змінили настроечку - будьте ласкаві натиснути «Застосувати». Зроблено так було з-за того, що за часів Windows 95 комп'ютери були слабенькі і застосування налаштувань «на льоту» викликало некислі подзадумиванія ПК. Зараз же, за часів дохрена-ядерних машин і «офісних» конячок з чотирма гігамі мізків на борту, така система просто зайва.

Ubuntu Linux


У Gnome, наприклад, використовується система застосування налаштувань «на льоту», тобто тицьнув мишкою в картинку і вона тут же стала шпалерами робочого столу. Не треба натискати «Застосувати» / «Зберегти». Є тільки одна кнопка - «Закрити». І більше нічого не потрібно в некритичних діалогах.

Звідси висновок: користі від кнопки «Застосувати» мало, тому її використання затребуване.

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

Більшість користувачів ПК не в повній мірі використовують комп'ютерну мишу. У цій статті Ви побачите поради по використанню мишки і дізнаєтеся секрети і зручні функції в роботі з мишею, які полегшують безліч завдань в роботі за комп'ютером.

Коліщатко миші.

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

  • Коліщатко миші це не тільки колесо, але ще і третя кнопка. Натиснувши на якусь посилання коліщатком миші, сторінка відкриється в новій вкладці, дуже зручно якщо не охота йти з даної сторінки і окремо подивитися, що знаходиться за посиланням. Так само коліщатком миші можна закрити вкладку в браузері, просто натиснути на вкладку колесом а не на хрестик лівою кнопкою.
  • Так само в браузері дуже при перегляді великих сторінок, наприклад на до спуститися вниз, натиснувши на цій сторінці середню кнопку (коліщатко) можна буде швидко переміщатися вгору, вниз, вліво і вправо, швидкість збільшувати або зменшувати просто потрібно відвести далі курсор.
  • Збільшення і зменшення документа на веб-сторінках, шрифт і т.д., так само можна за допомогою коліщатка комп'ютерної мишки, для цього достатньо утримувати клавішу Ctrl і прокрутити коліщатко вгору або вниз, відповідно збільшити або зменшити розмір.
  • Переміщення вперед і назад при роботі в Інтернеті. Утримуючи клавішу Shift і прокрутивши коліщатко миші можна переміститися вперед або назад по сторінках в браузері.
  • Деякі миші дозволяють коліщатко пересувати вліво або вправо, що теж дозволяє пересуватися по сторінках в браузері.

Швидке виділення.

Якщо клацнути на будь-яке слово два рази, воно виділитися, а якщо клацнути три рази, то виділитися весь абзац, що теж дозволяє значно швидше виділити потрібний текст.

Клавіша Shift і комп'ютерна миша.

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

Клавіша Alt і комп'ютерна миша.

Додаткова порада: Утримуючи клавішу Alt під час перетягування і виділення тексту в текстовому редакторі, дозволить Вам вибірково виділяти текст. Це може бути корисно, якщо текст в стовпці.

Клавіша Ctrl і комп'ютерна миша.

  • Якщо у Вас немає миші, наприклад у Вас ноутбук / нетбук де використовуєте тільки тачпад, то можна утримувати Ctrl і натиснути лівою кнопкою миші по посиланню, то вона відкриється в новому вікні.
  • Утримуючи клавішу Ctrl можна виділити певні об'єкти, наприклад потрібно виділити з величезного списку деякі фільми, що знаходяться в розкид, для полегшення завдання потрібно просто утримувати Ctrl і натискати лівою кнопкою на потрібні об'єкти.

Бічні кнопки на мишці.

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

Ця функція зручна, якщо використовується багато діалогових вікон, тобто часте їх використання, наприклад, потрібно погодитися або відмовитися з якими то змінами (Ок / Скасування), то включивши цю функцію, курсор автоматично буде переміщений на кнопку "Ок", "Прийняти" і т.д. при виході діалогового вікна, від Вам лише потрібно натискання, переміщати мишу вже не потрібно.

Як підтвердження цієї дії? Все досить просто: "Пуск -\u003e Панель управління -\u003e Обладнання та звук -\u003e Миша". Відкриється вікно, в якому потрібно перейти на вкладку "Параметри покажчика" і поставити галочку навпроти - "На кнопці обраній за замовчуванням".

Управління вікнами за допомогою миші.

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

Власний курсор.

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

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

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

Діалогові вікна завжди знаходяться на передньому плані, закриваючи інші відкриті (працюючі). Як правило, вони не змінюються в розмірах, а закривати їх можна тільки: після підтвердження вибору (ОК, Застосувати, Скасування) або кліком на закриває кнопці.

Діалогові вікна Windows можуть бути модальними або немодального.

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

Модальні діалогові вікна можуть бути виду:

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

Немодальні вікна роботу програми (програми) не зупиняють. Не закриваючи вікна, можна перейти в вікно документа або програми і працювати з ними, повертаючись також клацанням миші в діалогове вікно. Приклад - вікно Довідка.

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

Діалогове вікно Windows зазвичай складається з рядка заголовка і елементів вікна.

У діалогових вікнах передбачений набір різних полів і кнопок для можливості відповіді на запит.

Основні елементи діалогового вікна

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

    вкладки (складне вікно);

    командні кнопки;

    прапорці (вмикачі / вимикачі);

    радиокнопки (перемикачі);

    поля введення (текстові поля);

    списки і списки, що розкриваються;

    повзунок (змінна кнопка управління).

Розглянемо основні різновиди елементів:

закриття вікна зі збереженням всіх параметрів і внесених змін
закриття вікна без збереження параметрів і внесених змін
збереження всіх параметрів і змін без закриття вікна
користувач може з клавіатури вводити в прямокутну область текст, для цього потрібно клацнути всередині поля мишею
в цьому полі значення можна ввести як з клавіатури, так і натискаючи на кнопки праворуч, стрілка вгору збільшує значення параметра, стрілка вниз - зменшує
в ньому міститься список, доступних для вибору об'єктів, якщо список більше розміру поля, то буде видно смуги прокрутки для перегляду всього списку повністю, вибрати об'єкт можна клацнувши на потрібному мишею
в ньому відображається значення поточного параметра, переглянути всі можливі значення можна клацнувши мишею на кнопці - трикутнику праворуч
гурток з кольоровою точкою всередині або без точки (радіокнопка) - вибір тільки одного з взаємовиключних, замінюють один одного параметрів (як в російській мові союз «або») Клацанням ЛФМ мишки відзначається вибір користувача, з інших кнопок відмітка знімається
«Галочка» всередині квадратного поля (чекбокса), з її допомогою можна включити / відключити параметри, опис яких розташоване поруч, одночасно можна вибрати кілька параметрів одночасно (відповідає союзу «і»)
клацання по кнопці активує режим контекстної довідки діалогового вікна, для цього клікніть по обраному елементу, відразу з'явиться прямокутна область з текстом - поясненням
закриття вікна
переміщення вліво / вправо уздовж лінійки дозволяє плавно налаштовувати значення параметра в певному діапазоні (збільшення / зменшення), наприклад, гучність, чутливість миші, швидкість автоповтора клавіатури і т.п.
в ряді діалогових вікон подібні параметри групуються у вкладках: від двох і більше; розташовуються вкладки відразу під рядком заголовка вікна; одночасно можна працювати тільки з однією вкладкою, активна знаходиться на передньому плані, повністю займаючи вікно; змінити вкладку можна клацнувши мишею на її назві
попередній перегляд, показує, як буде виглядати настроюється об'єкт після зроблених змін і вибраних параметрів

Швидкий доступ для діалогових вікон.

Alt + F4 - закриває поточний елемент або ж вихід з активної програми

Ctrl + Tab - перемикання вкладок в праву сторону (вперед)

Ctrl + Shift + Tab - перемикання вкладок в ліву сторону (назад)

Tab - послідовне переміщення по кнопках, полях, списками, меню, панелей і т. Д. (Вправо вниз)

Shift + Tab - послідовне переміщення по пунктам, кнопок, полів, списками, меню, панелей та ін. В зворотному порядку (вліво вгору)

Space (Пропуск) - дозволяє виділити (натиснути) на обрану кнопку, поставити прапорець

Alt + підкреслена буква - натиснувши і утримуючи клавішу Alt, подивіться на назву вкладки вікна, списку, поля і т.д., одна з букв підкреслена, натисніть її на клавіатурі і ви перейдете до вибраного елементу

Клавіші зі стрілками - навігація по пунктам, опцій

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