Техніки розробка правового інтерфейсу сайту, Блог про веб програмування
Що таке простота?Простота - це коли все природно, просто і доступно. І не дивно, що простота дуже часто має бути присутня в дизайнах різних інтерфейсів. Багато людей за своєю природою не люблять складнощів у гаджетах та програмах. Є деякі люди, які раді покопатися і розібратися, як працює, але для багатьох з нас нездатність швидко розібратися з чимось виливається в марно витрачений час.І це далеко не добре!
Якщо Ви можете взяти складний прилад чи програму та будь-яким чином поміняти, реорганізувати та зробити редизайн інтерфейсу для його спрощення, значить Ви на правильному шляху.
1. Модальні вікна
Я впевнений, що Ви пам'ятаєте часи, коли у веб-браузерах з'явилися блокатори спливаючих вікон, коли Вам доводилося боротися з великою кількістю вікон, які раптом вирішили з'явитися перед Вашими очима. Ніхто не любив такі спливаючі вікна, і блокуючі технології були розроблені для їх винищення. Але сьогодні ми можемо спостерігати за новим видом спливаючих вікон — більш красивих відвідувачів, які приносять користь. Це так звані модальні вікна.
Модальні вікна схожі на спливаючі, проте замість появи в новому вікні, вони з'являються прямо всередині поточного поверху всього контенту. Модальні вікна дуже часто вимагають реакції користувачів, тому контент під ними зазвичай затемняється, щоб сконцентрувати увагу користувача тільки на цьому вікні.
У багатьох випадках, такі речі як налаштування, форми входи та інше можуть бути показані в модальних вікнах над вмістом сторінки. Це економить час користувачам і значно зменшується навантаження на сервер, оскільки йому доводиться обробляти менше запитів.
ActionMethod,програми для обліку проектів, використовує часто модальні вікна. Перед Вами форма оцінки.
2. Кнопки під час наведення
Якщо у Вашому додатку є багато кнопок (команд, функцій), користувачам необхідно буде обов'язково ознайомитися з ними, щоб знайти необхідне. Деякі кнопки не такі важливі і не використовуються не так часто. У такому разі необхідно їх сховати.
Але не просто сховати, а зробити так, що якщо користувач наводить на певний регіон зробити так, щоб вони знову з'явилися. Це так звані кнопки, що спливаються (кнопки при наведенні). Наприклад, Twitter, популярний сайт мікроблогінгу, показує список усіх повідомлень, які зробили Ваші друзі. Кожне повідомлення знаходиться в окремому осередку. І Ви можете зробити дві дії до кожного повідомлення - додати до обраного або відповісти.
Якби кнопки «Додати до вибраного» та «Відповісти» були на кожному повідомленні — вигляд виглядав би дуже завантаженим. Навряд чи Ви захочете відповісти всім, і ще менша ймовірність того, що всі повідомлення підуть у вибране. Тому Twitter показує кнопки тільки після наведення на комірку з повідомленням. Це робить інтерфейс простішим без втрат функціональності. Є невеликий ризик, що деякі користувачі не знайдуть ці кнопки, але практика стверджує протилежне, оскільки вони зазвичай наводять мишкою на те, що бачать і швидко у всьому розуміються.
Twitter показує кнопки «Додати до вибраного» та «Відповісти» при наведенні на повідомлення
3. Управління на вимогу
Інший спосіб ховання кнопок – це використання Javascript. Якщо користувач натискає в потрібному місці, вони з'являються. Наприклад, Ви маєте форму пошуку на сайті, яка дозволяє використовувати різні фільтри для пошуку. Замість показу всіхфільтрів, Ви можете сховати їх і зробити доступними тільки при натисканні. Тим самим Ви надаєте Вашому додатку просунуту функціональність для тих, хто її потребує, але при цьому зберігаєте інтерфейс простим для тих, хто не потребує цих додаткових функцій.
Не всі користуються більш сучасними способами пошуку на Вашому сайті. Якщо їх сховати, Ви зробите інтерфейс чистішим і більш тямущим для нових відвідувачів. Однак, іноді буває дуже важко вибрати, що ховати, а що ні.
Kontain, додаток для блогінгу пропонує просунуті функції пошуку при натисканні в кінці форми пошуку.
4. Форми, що розширюються
Я впевнений, що Ви знаєте поле завантаження файлів, яке Ви бачите в багатьох формах. Зазвичай, це невелике поле з кнопкою вибору файлу збоку. Уявіть, що Вам необхідно завантажити відразу кілька файлів. Ви можете відобразити кілька полів для завантаження, проте це вже завантажить Ваш інтерфейс і Ви не можете передбачити скільки полів потребує користувач. Відмінне рішення в даній ситуації це форма, що розширюється.
Gmail відображає лише одне поле для прикріплення файлу під час написання листа. Ви можете натиснути на "Прикріпити ще файл" для завантаження додаткових файлів
5. Написи всередині форм
Форми дуже швидко можуть стати надто складними. Текстові поля, написи, списки, що випадають, чекбокси та інше можуть заплутати будь-кого. Навіть заповнення форм не надто веселий і іноді довгий процес, тому спрощення форми зазвичай економить користувачам багато часу. Хороша техніка, яка допоможе зробити Ваші форми простіше це перенесення текстових позначень ззовні форми безпосередньо в текстові поля. Тобто, місце показу тексту поруч із формою, Ви показуєте цей текст вже заповненим уформі.
Це заощаджує місце, звужуючи загальний розмір форми. Маленькі деталі форми здаються простіше, і форму легше заповнити. Така техніка не підійде об'ємним формам з великою кількістю різних полів, але для маленьких форм це те, що треба (наприклад, для входу на сайт).
Однак є один незначний мінус, який можна доопрацювати. Коли користувач вперше завантажує сторінку, побачить усі поля з написами. Як він натисне на полі напис зникне, дозволяючи користувачеві запровадити свої дані. А якщо після натискання він забуде що саме необхідно вводити? Йому доведеться клікнути в іншому полі щоб побачити текстове опис знову.
Можливий вихід із ситуації: щойно користувач клацає на полі, текстовий опис тьмяніє, але залишається видимим. Як тільки він починає друкувати, воно зникає.
MobileMe показує опис усередині форм, що тьмяніє при виборі поля.
6. Іконки замість тексту.
Іноді, коли відсутність тексту не працює, можна замінити його іконкою. Іконка має переваги перед текстовими описами. Вона посідає менше місця. На ній легше сконцентруватися і її колір і форма в очах користувачів виглядає привабливішою. Наприклад, якщо у Вас є текст "Теги:", за яким йде перелік тегів, Ви можете помістити маленьку картинку тега замість тексту.
Звичайно, це не вихід у всіх випадках. Необхідно до цього підходити обережно. Щоб уникнути можливих проблем, можна використовувати іконки разом з текстом, але в такому випадку заощадити місце не вдасться.
Highrise, CRM додаток, використовує значок тега замість тексту.
7. Управління засноване на контексті
Є кілька підходів, які Ви можете використовувати в дизайні інтерфейсу на основіконтексті та послідовності. Перший говорить, що потрібно зберігати (на всіх сторінках) розташування всіх кнопок на Ваших сайтах (або додатках) в одному місці для того, щоб користувачі знали що і де знаходиться. Інший підхід свідчить, що потрібно змінювати кнопки (управління, навігацію) залежно від контексту сторінки. Другий підхід базується на тому, що користувачеві необхідно показувати лише те, що йому необхідно на цій сторінці для виконання завдання.
Хороша ілюстрація обох підходів продемонстрована у нещодавньому редизайні інтерфейсу Microsoft Office. Office 2003 і попередні версії дотримувалися першого підходу і скрізь були ті самі кнопки. У Вас завжди був набір дій, який відображався зверху, незалежно від того, чи працювали Ви з таблицями, графікою чи текстом. Office 2007 практикує інший підхід. Зверху Ви бачите набір вкладок. При виборі будь-якої вкладки Вам показується набір функцій, необхідних тільки безпосередньо для цієї вкладки (робота з таблицями, графікою, текстом тощо).
Контекстний підхід дозволяє Вам показувати менше функцій (кнопок) у певний відрізок часу, але водночас більше функцій (кнопок) саме для поставленого завдання. Я б не рекомендував використовувати цей підхід для загального дизайну веб-сайтів, оскільки користувачі воліють однакову навігацію на всіх сторінках веб-сайту.
Тому цей метод варто використовувати в різних веб-додатках, оскільки вони є не просто сайтами - вони є програмним продуктом. Люди більше часу витрачають вивчення додатків, і вони більше можливостей вивчити все тонкощі роботи. Чим складніше програми, тим більше розробникам варто задуматися про контекстний підхід, тому що в такому випадку на екрані може бути надмірно багатоінформації для сприйняття. Показуючи лише кілька доступних для певної роботи функцій, дозволить користувачам зробити щось набагато швидше.
Freckle, додаток контролю часу, має перемикач у верхньому меню. Перемикає між режимом введення часу та створенням звіту – дві речі одночасно зробити не вдасться.
Висновок
Найпростіший спосіб досягти простоти - це продумані скорочення - John Maeda, The Laws of Simplicity.
Роблячи Ваш інтерфейс меншим, ховаючи просунуті функції і видаляючи очевидне — ось найшвидший шлях до простоти. На цьому шляху у Вас виникне безліч перешкод. Будь-яка дрібна зміна буде помічена, і багато хто буде скаржитися і вимагатиме повернути все назад. Але у кожного Вашого користувача різні потреби та способи використання Ваших сайтів, програм. Якщо Ви прислухатиметеся до всіх одночасно, Ви навряд чи зможете досягти досконалості. Більше того, ви можете впасти в глибоку яму, з якої не буде дороги назад.
Як тільки нова функція буде додана, буде дуже важко її прибрати, оскільки багато хто почне їй користуватися. Тому перед додаванням повністю переконайтеся в її доцільності та необхідності.
Простота - це зменшення та реорганізація складного в просте та легко кероване. Найкраще завжди прагне до того, щоб прибрати будь-які функції, ніж додати. Продукт з меншою кількістю кнопок не обов'язково буде менш функціональним - швидше за все він просто краще продуманий.