Коротко про цикл статей
Цією статтею я починаю цикл статей «Дизайн ПІ». Вони будуть корисні тим, кому не все одно як виглядають їхні додатки, як вони поводяться щодо користувача - думаючих дизайнерів, програмістів-дизайнерів і тих, хто хоче зробити цей світ трішки кращим:)
Передмова до циклу
Чи замислювалися ви коли-небудь про те, чому одні програмні продукти, що володіють непоганою (якщо не сказати більше) функціональністю і якістю не користуються успіхом, а інші навпаки - нарозхват? Причиною цього парадоксу часто є простий факт - найчастіше так відбувається тому, що перші програмні продукти програють другим як користувальницький інтерфейс і юзабіліті. Найбільш яскравий приклад - браузер Google Chrome і всі інші браузери. З моменту його народження минуло не так вже й багато часу - це наймолодший з усіх браузерів - але це не заважає йому вже зараз міцно утримувати третю сходинку «параду браузерів» і впевнено тіснити з «почесного» другого місця дітище Mozilla Foundation. Цей успіх пояснити дуже просто - з моменту виходу браузер був націлений на максимальну простоту у використанні, мінімум налаштувань (хоча зараз їх кількість впевнено зростає) і максимальну доброзичливість до користувача. Ну і звичайно ж інженери корпорації Google довго досліджували ринок браузерів з метою зрозуміти що ж саме не вистачає користувачам інших браузерів в плані юзабіліті і користувальницького інтерфейсу - і браузер «вистрілив». Він продовжує впевнено переманювати користувачів, стаючи версія від версії все стабільніше, красивіше і юзабельніше.
З глузуванням відповідав ЖуЖу, - Я вам рекламу покажу!
Давайте перейдемо від сферичних коней до квадратних блоків і розберемо на практиці приклад поганого дизайну. Сьогодні ми будемо препарувати форму створення нового запису в ЖивомЖурналі (сподіваюся всі розуміють, про що я). Звичайно, приклад синтетичний, тому що існує багато інших способів створити пост в ЖЖ, але все ж я хотів би розібрати саме цей приклад, оскільки в ньому присутні досить багато помилок дизайну і порушення правил юзабіліті. Ось вихідна форма, над якою нам належить попрацювати:
Цифрами позначені проблемні області. Давайте проаналізуємо їх і випишемо в список. Отже, за порядком:
1) Елемент керування, що веде себе подібно до навігаційного ланцюжка («Хлібні крихти»), по суті ним не є, оскільки практично в будь-якому режимі дописує на початок ланцюжка лише одне посилання, що веде завжди на головну сторінку. Тим більше не зрозуміла присутність цього виродженого випадку навігаційного ланцюжка, якщо в режимі створення нового запису доступне головне меню (пункт «Новий запис» знаходиться в меню «Журнал»):
1') Дублювання інформації. Сенс використання цього елемента оформлення взагалі неясний.
2) Порушення цілісності сприйняття, порушення сценаріїв використання сайту, дублювання дій. Поява таких елементів керування в подібних місцях (створення нового запису) взагалі неприпустима. Вони дезорієнтують користувача і, в цілому, створюють ризик зміни поточного робочого контексту користувача. Хочеш написати запис під іншим користувачем? Виконайте типовий сценарій - Вихід з системи - > Вхід під іншим користувачем - > Новий запис. Цілком можливо, що тут мала місце невелика денонормалізація користувацького інтерфейсу з боку розробників ЖЖ, які хотіли полегшити життя користувачам з кількома акаунтами. Навіть якщо створення нового запису під іншим користувачем з під поточного не змінює глобальний робочий контекст (не призводить до фактичної зміни користувача) - це все одно неправильне рішення. Оскільки вирішивши це завдання денормалізації розробники отримали на виході «розповзся» користувацький інтерфейс з діями, що дублюються, і сценаріями.
3) Велосипед з квадратними колесами. На сьогоднішній момент існує незліченна безліч реалізацій елементів управління Вибір дати і Вибір часу для Web. До речі кажучи, при натисканні на посилання змінити цей елемент змінює вид:
А якщо користувачеві потрібно вибрати іншу дату і при цьому подивитися на який день тижня вона випадає? Загалом - без коментарів.
4) Випадає з контексту блок посилань. Погіршує положення те, що майже всі дії в блоці посилань, крім Створити опитування змінюють поточний контекст користувача. Останню дію варто обговорити детальніше. По суті це взагалі інший режим редагування. І цей режим доступний з режиму створення нового запису і нізвідки більше (поправте мене якщо це не так). Це просто потужний удар по юзабіліті - для того, щоб створити опитування, потрібно спочатку створити новий запис.
5) Незрозумілі відступи для вбудованого редактора. Редактор вбудований в робочу область з незрозумілими відступами, які порушують цілісність сприйняття і псують зовнішній вигляд. Крім цього вони є причиною того, що дії Скасувати і Повторити на панелі інструментів редактора повідомлення «поїхали» на наступний рядок:
Запитання також викликають експандер ліворуч від панелі інструментів. Навіщо він? Згорнута панель інструментів багато місця не зекономить і цей елемент вносить тільки візуальний шум.
6) Просто огидна верстка блоку додаткової інформації. Без коментарів - вважаю, це очевидно.
7) Випадають з контексту цієї панелі кнопки. Ці кнопки логічно згрупувати з кнопкою Надіслати, оскільки вони входять до групи дій над записом (постом).
8) Дублювання інформації, надлишковість, випадання елемента Доступ до цього запису з контексту панелі. Елемент керування Доступ до цього запису містить надлишкову інформацію в мітці - і так зрозуміло, що ми в даний момент часу редагуємо всього один (цей) запис. Немає нобхідності дублювати цю інформацію (може це складності перекладу?).
Закатавши рукава...
Чи можна виправити цю форму? Звичайно, можна - адже те, що зламав один, може виправити інший. Отже, допоможемо хлопцям з ЖЖ зробити цей світ трішки кращим. Ось як могла б виглядати форма створення нового запису:
Гідності даного рішення:
1) Виправлено елемент керування Вибір дати/часу. Він замінений на більш зручний і звичний користувачам елемент управління.
2) Елемент керування Позачергова дата став доступний не тільки в режимі редагування дати. Дуже погано приховувати від користувачів елементи управління. Вони завжди повинні бути видні але можуть бути недоступні. Причому бажано якось пояснити користувачеві, чому саме він не має доступ до заблокованого елементу управління.
3) Елементи керування Налаштування, де ви зараз, Музика згруповані більш логічно - у заголовок, поруч з іншими основними параметрами поста.
4) Прибрано з заголовка непотрібний пункт Від імені, оскільки він створює загрозу зміни контексту користувача.
5) Більш зручний редактор редагування міток. Слід зауважити що я нічого не придумував - я лише взяв цей редактор з іншої форми - форми редагування міток.
6) Елементи керування записом Перевірити правопис, Попередній перегляд і Надіслати згруповані в одну панель, що виглядає більш логічним, ніж у вихідному варіанті. Дія Перевірити правопис оформлена у вигляді посилання, щоб не навантажувати занадто візуальний ряд дій, і ще тому, що це швидше допоміжна і необов'язкова дія, що має вагу набагато меншу ніж дві інші дії.
7) Вбудований редактор виглядає більш привабливо за рахунок того, що всі кнопки інструментів помістилися на одній панелі і прибраний експандер, який служив лише джерелом візуального шуму.
8) Форма стала трохи менше по висоті і за рахунок цього тепер чудово поміщається на екрані монітора з роздільною здатністю 1280х1024. При бажанні її можна зменшити так, щоб вона поміщалася цілком на моніторі з роздільною здатністю 1440х900 - за рахунок зменшення висоти редактора і панелі в якій розташований редактор міток.
9) Трохи покращено інтерфейс користувача.
Недоліки даного рішення:
1) Спірне вирівнювання елемента керування Музика. Дуже вітається, якщо хтось зможе запропонувати більш красиве рішення. Я зробив так лише тому, що намагався уникнути пустот у заголовку. Я вважаю що цей заголовок - якраз той випадок, коли не працює правило «не варто бояться порожніх місць»
2) Не вдалося знизити щільність подачі інформації - форма все ще виглядає як каша. Просто тепер вона виглядати як трохи впорядкована каша:)
Післямова
Не бійтеся експериментувати з дизайном, кольором і змістом. Якщо ви відчуваєте що ви зробили щось не відповідає вашим очікуванням - не лінуйтеся переробити, поліпшити. Рухайтеся ітераційно - ніколи не намагайтеся бути на крок попереду себе самого. Все одно розуміння того, як потрібно зробити краще (або того, що варто зупинитися на досягнутому, тому що вже терміни підтискають) приходить від усвідомлення недосконалості поточного кроку.