Інтерфейс користувача: для людей або для "кліщів"?

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

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

Саме слово «интерфейс» означає що-то, що виникає між учасниками процесса — inter-face. В даному случае — інструмент роботи з системою, що виникає між людиною і комп'ютером.

На якому сайті ви відчуєте себе як будинки? На цьому — aic.ru, або на цих: jeltofiol.com, fertdesign.ru, e-time.ru. Ось-ось, мені теж більше по душі перший варіант. Особисто для мене важливо, щоб під рукою був пошук, контакти, соціальні закладки. І в то ж час, мені душно на сайті де вся сама важлива (по думку дизайнера) інформація сконцентрована на однією странице — найчастіше на головною.

Відверто дратують ресурси, які змушують ламати голову: а де ж тут блог? Дивно, але такий важливий компонент ресурсу, як блог, можуть ховати за родину замками. Питання: навіщо? Часто чую фразу «інтуїтивно зрозумілий интерфейс». Це як? Користувач повинен по інтуїції, грунтуючись тільки на своїх інстинктах, пересуватися по сайту? То есть — сиди і догадывайся? Виходить ребус який-то. А нам-то потрібен сайт, де усi розкладено по поличках. Ні більше, ні менше.

Намагаючись більше глибоко вникнути в цей питання, я натрапила на книгу Влада Головача «Дизайн призначеного для користувача інтерфейсу! Мистецтво мити слона». Відразу обмовлюся: книга не першій свіжості (2010 рік). Але, впевнена, має право на життя. Пропоную вашому увазі думки, які я витягла з цієї роботи. Вони можуть не збігатися з думкою сучасних дизайн-фахівців. Але це ще один привід з'ясувати, де ж зарита собака .

«Дизайн призначеного для користувача інтерфейсу! Мистецтво мити слона». Поради дизайнерам. По думку автора, усi вже давно створено. Тому немає сенсу по-новому конструювати велосипед. Необхідно удосконалювати вже наявний. Приклад: кожен архітектор бачить будівництво будинки по-своєму, при цьому ні один архітектор не зробить остаточний варіант будівлі — завжди буде то, що можна буде «допилить». З приходом кожного наступного архітектора один і той ж хата буде видозмінюватися, поліпшуватися. Взяти, до наприклад, той ж гучний за останнє час Iphone 5. По суті, це попередня Модель телефону, але кілька допрацьована.

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

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

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

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

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

Немає універсального правила щодо того, в якому розі (або не розі) повинна перебувати корзина. Зате щодо елементів меню можна з повної упевненістю стверджувати: оптимальне їх количество — 5-7. Справа в тому, що Об `єм короткочасної пам'яті людини з працею вміщує 9 елементів. Немає сенсу робити меню онучею. Таким чином, максимальне кількість компонентов — 7.

Вставлю свої 5 копійок. Існують чітко прописані вимоги до розробці як додатків, так і більше складних продуктів, слідування яким є ознака майстерності автора.
Приклад №1 antonlapin.ru
Приклад №2 guide.ramotion.com. До речі, ось сайт хлопців з Ramotion, а ось вони в ЖЖ.

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

Ще з книги.
Парадокс, але, ніж складніше система, тим простіше вона повинна бути в користуванні. Універсальне правило на усi случаи — мінімалізм. Він ще нікому не шкодив, зате користь приносить стабільно. Объединяйте, скорочуйте, обобщайте. Робіть то, що потрібно, а не то, що подобається. Робіть то, що поліпшить продукт, не витрачайте час даремно.

Окремо автор говорить про тих ознаках, які видають дизайнера-непрофесіонала. Перший признак — це непрофессиональная лексика. Потрібно говорити не чекбокс, а прапорець, не закладка, а вкладка, не выпадающее меню, а розкривається, не іконка, а значок, піктограма. Що думаєте? Приймаю думки незгодних .

Предусловием добре виконаної роботи є талант, або хоча б передумови до таланту. По думку автора, робити якісні (вони же — шикарні) інтерфейси неможливо, якщо у фахівця немає смаку, людина не вміє писати, говорити і слухати, якщо він нелюбопытен, йому не подобається довго логічно міркувати. Хочете зрозуміти, вмієте чи ви писати? Опишіть усi, що вас оточує, вклавшись в текст об'ємом 2 тисячі символів. Дайте своє творіння на перевірку грамотному товаришеві. Якщо він схвалить ваші старания — шанси є. Щоб зрозуміти, наскільки розвинений у вас художній смак, назвіть хоча б 5 художників, творчість яких вам подобається, і обоснуйте свій вибір; перерахуйте хоча б 5 архітектурних стилів і ті художні виставки, які відвідали за останні півроку. Хорошому юзабіліті-фахівцеві властива эмпатия, то є здатність поставити себе на місце іншого людини. Простіше кажучи, потрібно створювати інтерфейси з урахуванням того, що їх можуть оцінити не так, як ви.

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

Вважається, що задоволений пользователь — мовчазний користувач, а кращий дизайн — невидимий дизайн. Усi вірно помічено. Якщо у користувача виникає бажання прокоментувати своє перебування на сайті (найчастіше в матірною формі), якщо він постійно задається питаннями, куди жати і як туди потрапити, значить, інтерфейс занадто далекий від ідеалу.

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

Відходячи від рад Влада Головача, додам наступне.
Перебування користувача на сайті необхідно зробити зрозумілим. Він повинен чітко розуміти, де знаходиться і чому виявився саме тут. Щоб користувач швидко зрозумів, що робити далі, необхідно оперативно надати йому варіанти подальших дій або рішень: спливаючі вікна-підказки, «хлібна крошка», зручна навігація в вигляді горизонтального меню, можливість в будь-який момент повернутися на головну і т.д. Для того щоб позбавити людини від зайвих роздумів і заощадити його час, слід очистити сторінки від непотрібних посилань, які викликають додаткові роздуми і сумніву. Необхідно постаратися дати користувачам мінімальне кількість варіантів відповіді. Уявіть, що б ви робили, якщо б система запропонувала вибрати одне дія з десяти? Зрозуміло, ви б проаналізували кожне, зупинившись в підсумку на декількох. То є, щоб розібратися з запропонованими варіантами, ви б витратили більше часу, ніж якщо б вибрали одне з двох.

Ефективної будь-яку систему робить мінімальне кількість маніпуляцій. Кілька раз подумайте перед тим, як створювати додаткове вікно, 'ятати, посилання, кнопку. Забезпечите систему хорошою пам'яттю. Вона повинна більше запам'ятовувати, ніж вимагати від користувача. По можливості обмежте вимоги по у воду даних. Ретельне заповнення форм дратує користувачів. Система повинна мати варіанти можливих відповідей і під час запропонувати їх (наприклад, на основі попереднього досвіду взаємодії користувача з системою вона повинна запам'ятати вводяться раніше ФИО, параметри продукту, Місто і т.д.). Взаємодія з системою можна зробити більше емоційним. Як? Про цьому тут.

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

Як по мені, оптимальне розташування навігації — посередині правою частини екрану. Система повинна бути розумної і передбачливою. Усi нюанси майбутньої операції вона повинна уточнювати у користувача ще до її початку. Буває, що система задає питання у час процесу, коли людина відійшов від екрану. Це значить, що, поки система не отримає відповідь, вона не продовжить свою роботу. Іноді не обов'язково програмно пов'язувати функціональні кнопки. Якщо програмно зв'язати кнопку Enter на клавіатурі з кнопкою введення на сайті, користувач в поспіху або випадково може ввести неповні, помилкові дані.

Подібне спостерігається у ВКонтакте при написанні повідомлень: при випадковому натисканні Enter повідомлення тут ж відправляється адресату. Тут не завадило б запропонувати користувачу підтвердити його дії.

Наболіло... Багато проблем викликає незнайомий продукт. Приклад з життя. Линукс — це та ОС, яка в останнє час усi частіше з'являється на наших комп'ютерах. Сам по собі інтерфейс цієї системи більше-менш зрозумілий. Але бувають моменти, коли система вередує. Допустимо, у вас відкрито кілька файлів одного формату, а вам знадобився один з них. Щоб відкрити його, доведеться двічі клікнути на значок файлу, почекати, поки система «очнется» і запропонує на вибір усi відкриті файли. Вибрати потрібний файл не просто — потрібно вдивитися в текст, а він дуже навіть размыт. Тільки після всіх описаних маніпуляцій будуть шанси відкрити шуканий файл.

«Веб-дизайн, орієнтований на пользователя» Ще одна книга, привлекшая моє увага, — «Веб-дизайн, орієнтований на пользователя» Джесса Гарретта.

Незалежно від того, що ви продаєте або пропонуєте, інформація про вашому продукте/услуге повинна бути грамотно розміщена на сайті. То є таким чином, щоб користувач зрозумів, що йому пропонується. Якщо досвід його спілкування з вашим сайтом буде негативним, він запросто піде до вашим конкурентам, у яких, в відміну від вас, усi розкладено по поличках. Зрозуміло, компанії, орієнтовані на результат, не стануть домагатися однією тільки відданості користувачів. Куди важливіше — віддача від капіталовкладень. В даному випадку — конверсія. Що б ви ні пропонували вашим користувачам — підписку на e-mail розсилку, безкоштовне відвідування семінару, перегляд вашого вебинара і пр. — ви сприяєте таким чином росту конверсії (або спаду). Причому, тут є в увазі не просто відвідувачі сайту, а відбулися клієнти. Виходячи з їх кількості, можна робити висновки про тому, наскільки вдало ви залучаєте своїх клієнтів, в зокрема, наскільки призначений для користувача інтерфейс вашого сайту зручний для них.

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

Чому так? Стикаючись лоб в лоб зі складної системою, людина втрачається. Але гірше всього — він відчуває себе дурнем і звинувачує в помилках тільки самого себе: не так зрозумів, не туди клікнув, який-то крок пропустив...

Але ми-то з вами знаємо, як буває частіше всього . Коли не зрозуміло, що до чому, ми злимся на розробників, обсипаючи їх в заочної формі «благодарственными» словами. Але гірше всього — ми запам'ятовуємо невдалий сайт, розповідаємо про ньому товаришам і, зрозуміло, не повертаємося туди.

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

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

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

Корисності: - про емоційних взаимодействиях;
- про призначених для користувача інтерфейси;
- огляд свіжих матеріалів по проектування інтерфейсів;
- журнал про веб-дизайні.