7 березня 2010

Оригінал: Learning from "bad" UI
Автор: 37signals
Переклад: Максим Додчук

Коли Грубер (Gruber) вперше опублікував інтерфейс TripLog/1040 від Стівенса Крика (Stevens Creek), я був налаштований неприхильно. Кольори – яскраві, елементи управління здавалися розташованими в абсолютно випадковому порядку. Це йшло врозріз всьому тому, що прагнуть наші дизайнери. Просто бардак. Незабаром сторінка на Flickr перетворилася на майданчик для нападів і образ. Але тут трапилося щось дуже цікаве. Дизайнер TripLog Стів Патт (Steve Patt) посеред усього цього потоку жовчі опублікував коментар, у якому поділився тією логікою, що врешті-решт призвела до такого варіанту дизайну. Ті, хто вважав за краще його не слухати, нічому не навчаться, але інші можуть багато чого почерпнути з наведених на цікаві думки пояснень і двадцятирічного досвіду містера Патта (Mr. Patt) у розробці ПЗ.

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

Яке відношення має швидкість до хаосу? Одного разу мені довелося побувати на семінарі Едварда Тафте (Edward Tufte) в Чикаго, де він представляв цікаву концепцію. Мова в ній йшла про те, що інформація може бути представлена як суміщена просторі (adjacent in space) або перекриватися в часі (stacked in time). Погляньте, наприклад, на книгу. Якщо дві ілюстрації знаходяться на одному розвороті, вони розташовані як суміщені в просторі. Для перемикання уваги між ними досить повороту очей. Порівняйте це з ситуацією коли дві ілюстрації розташовані на різних розворотах. Ви не можете бачити їх одночасно. Ви змушені гортати сторінки туди-назад для того, щоб бачити спочатку одну, а потім іншу ілюстрацію.

Компроміс між розташуванням елементів сумісними в просторі або перекриваними в часі завжди лишається на розсуд дизайнера інтерфейсу. Розміщення безлічі елементів на одному екрані знижує необхідність переміщення (навігації) і дає користувачеві повне відчуття того, що «все необхідне у нього під рукою». Переміщення фокусу з одного елемента на інший відбувається миттєво і легко. З іншого боку, поділ елементів на різні екрани уповільнює навігацію, але підвищує ясність і чистоту інтерфейсу. Менша кількість елементів на сторінці залишає більше вільного місця, яке можна використовувати для підказок або більш чіткого поділу елементів за рахунок пустого простору. Оку легше орієнтуватися в меншій кількості сутностей. Дії стають для користувача більш очевидними.

Так чи занадто багато елементів Патт розташував на екрані? Може йому варто було розділити їх «у часі»? Чи справді його інтерфейс «хаотичний»?

Для відповіді на це питання ми повинні відірвати себе від комп'ютера і уявити себе в шкурі покупця. Патт пояснює, що покупці запускають програму у двох випадках:

1. Вони хочуть записати тільки що пройдені кілометри
2. Вони хочуть перевірити ще раз, що записали свою недавню поїздку.

Перший випадок очевидний. Патт пояснює другий:

Причина проста і ми знаємо її по 20-річному досвіду продажів Щоденника Атлет (Athlete's Diary), додатку для обліку результатів спортивних тренувань. І вона полягає в тому, що коли ви запускаєте програму, половину свого часу ви будете ламати голову над тим, записали ви вчорашню поїздку на велосипеді або пробіжку по парку ... І ви хочете мати можливість негайно отримати відповідь на це питання, всього лише кинувши швидкий погляд на нижню частину екрану.

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

Вслід за першими враженнями ...

Коли ми говоримо про «зручні» і «інтуїтивні» інтерфейси, шанувальники Apple і співтовариство розробників веб-додатків орієнтуються на турботу користувача початківця їх сервісу. Ідея полягає в тому, що інтерфейс простий у використанні тоді, коли новий користувач може легко його зрозуміти і швидко приступити до його використання. А всі частини «чистого» інтерфейсу можна миттєво пробігти одним поглядом. Як правило, це означає розміщення функцій «перекриваються в часі», так щоб кожна екранна форма містила менше елементів і була простіше у сприйнятті. TripLog, будучи хай далеким від ідеалу, переслідує інші цілі. Замість перших вражень Патт піклується про повторення. Просторова пам'ять і суміщення елементів відіграють ключову роль у вирішенні багаторазово повторюваних задач. Чи багато хто з вас зберігають набір ручок, олівців, паперів та інших канцелярських дрібниць в певних місцях столу, замість того щоб кожного разу лазити за ними в ящик? Думаю, більшість.

Схильність Патта до суміжності і швидкості знаходить своє продовження і в блоці додавання нового запису («Add an entry»). Є 2 основні способи записати поїздку: вручну ввести дані у форму або вибрати одну з преднастроенних користувачем «Часті поїздки». Доступні обидва методи. Але все і завжди доступним бути не може. Є й деякі «приховані» функції. Вибір «іншої» дати, а не «Сьогодні» або «Вчора», вибір іншої машини, а також зміна списку частих поїздок – використання цих функцій вимагає навігації.

Так чого ж ми навчилися?

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

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

1. @ Михайло Бевз 8 березня 2010 о 12:05

   Максиме, гарний переклад!
   Стовідсотково згоден з автором статті – розробка інтерфейсу це завжді компроміс між зручністю в користуванні та гарним виглядом.