Керівництво щодо дизайну користувального інтерфейсу: 10 правил якоба нільсена

Керівництво щодо дизайну користувального інтерфейсу: 10 правил якоба нільсена

Навчитися створювати проекти, які повністю задовольняють потреби та запити вашого клієнта, застосовуючи рекомендації Якоба Нільсена (Jakob Nielsen) та Рольфа Моліка (Rolf Molich) щодо покращення користувальницького інтерфейсу. Дані методи відобразилися у багатьох продуктах, розроблених успішними компаніями, такими як Apple, Google і Adobe. Ще одним, яскравим доказом того, що команда проектувальників у цих компаніях враховує та застосовує ці правила, є опубліковані та поширені ними рекомендації щодо дизайну інтерфейсу користувача. У цій статті ви дізнаєтесь, як дотримуватися 10 емпіричних правил, для покращення зручності використання, практичності та привабливості ваших проектів.

10 правил нільсена (nielsen) та молика (molich) щодо дизайну користувального інтерфейсу

У 1990 році Якоб Нільсен (Jakob Nielsen) – відомий консультант з веб-дизайну та партнер у Nielsen Norman Group, разом з Рольф Моліком (Rolf Molich) – ще одним видатним експертом з питань використання продуктів та доступності проектів, оприлюднили список із 10 правил, які допоможуть у створенні зручного інтерфейсу для користувача. Зверніть увагу, що між методами Нільсена – Моліка (Nielsen-Molich) та роботою “8 золотих правил” Бена Шнейдермана (Ben Shneiderman) – багато спільного! Крім того, через 4 роки після первісної публікації Шнейдермана (Shneiderman), ці 10 загальноприйнятих рекомендацій повторили та доповнили 8 золотих правил Бена Шнейдермана (Ben Shneiderman).

 

• Видимість системного статусу

Користувачі завжди повинні бути поінформовані про системні операції за допомогою зрозумілого і добре помітного статусу! Цей статус повинен відображатися на екрані протягом певного часового інтервалу, щоб людина встигла ознайомитись та зорієнтуватися.

• Відповідність системи та реального світу

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

• Користувальницький контроль та свобода дій

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

• Логічність та стандарти

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

• Запобігання помилкам

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

1. Сприняти, а не запам’ятовувати

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

• Гнучкість та ефективність використання

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

• Естетичний та мінімалістський дизайн

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

• Допоможіть користувачам розпізнати, діагностувати та виправити після помилки

Розробники повинні усвідомлювати те, що користувачу складно зрозуміти технічну термінологію, тому повідомлення про помилки повинні бути написані простою мовою та містити повну інформацію.

• Допомога та документація

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

Корпорація Google – багатомільярдна технологічна компанія, безумовно, створює проекти, що відображають вищезазначені методи. Джон Уайлі (Jon Wiley) – головний дизайнер пошуковика Google у 2012 році сказав:

«Коли я думаю про дизайн та створення хороших вражень для користувача, я зазвичай думаю про це з точки зору трьох речей: зручність використання, корисність та доцільність».

Вищезгадані рекомендації Нільсена – Моліка (Nielsen-Molich) щодо створення зручного інтерфейсу для користувача, також включають ці три ключові компоненти. Це означає, що ви можете покращити враження користувача про ваш дизайн та проект в цілому, використовуючи та застосовуючи дані цього посібника.

Приклад того, як Adobe вдало інтегрує евристики Нільсена та Моліка

Компанія Adobe Systems Incorporated – велика північноамериканська компанія, що займається комп’ютерним програмним забезпеченням, є чудовим прикладом того, як проекти, що відображають десять правил інтерфейсу користувача, можуть привести компанію до успіху. Один з найпопулярніших продуктів – Adobe Photoshop, який є редактором растрової графіки, демонструє характеристики добре спроектованого інтерфейсу користувача, створеного з використанням вищезгаданих правил.

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

1. Видимість системного статусу

Photoshop дозволяє користувачеві бачити та розуміти, що відбувається з програмою, візуально показуючи до чого призвели їхні дії. Наприклад, коли користувачі пересувають шари на панелі «Шари», вони можуть спостерігати, як вибраний шар фізично переміщується у просторі (на екрані монітора). Графіка курсору також змінюється: коли користувач перетягує шар палітри, курсор від відкритої руки переходить до захопленої руки.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

2. Відповідність системи реальному світу

Яскравий приклад того, як Photoshop імітує реальний світ у термінах та уявленнях, які розуміють їх цільові користувачі – це використання інформаційної структури та термінології, такої, як ми звикли чути у реальному світі, у сфері фотографії та друкованих ЗМІ. Звичні концепції та терміни, такі як RGB, Hue / Saturation / Brightness і CMYK, використовуються для представлення кольору, в той час як різні інструменти, такі як “Освітлювач” (англ. – “dodge tool”) і “Затемнювач” (англ. .- “burn tool”), імітують традиційну техніку темної кімнати для фотографій.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Такі інструменти фотошопу як Dodge Tool та Burn Tool імітують традиційну техніку темної кімнати для фотографій.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Зауважимо, що Photoshop використовує термін «експозиція», як і зазвичай ним користуються у світі фотографії.

3. Користувальний контроль і свобода дій

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

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

Користувачі все контролюють, вони можуть зробити крок назад/крок вперед у меню “Правка” або використовувати швидкі клавіші Photoshop – Alt+Ctrl+Z.

4. Логічність і стандарти

Photoshop дотримується стандартного формату та зовнішнього вигляду, коли справа доходить до рядка меню. Вони також використовують загальновідому термінологію, таку як: “Новий …”, “Відкрити …”, “Зберегти як …” і т.д.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Меню «Файл» у Photoshop включає безліч знайомих опцій.

5. Попередження помилок

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

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Користувач наводить на піктограму гумки і Photoshop відображає мітку «Ластик».

6. Сприйняття, а не запам’ятовування

Абсолютно не важливо, яку дію виконуватиме користувач, будь то додавання фільтрів або відкриття нового файлу, Photoshop допоможе людині зробити правильний вибір! Це дозволяє користувачеві візуально розпізнавати те, що вони шукають замість того, щоб згадувати ім’я або шукати щось у пошуку фотошопу. Можливо, ви стикалися з іншими програмами редагування фотографій, які просили згадувати та вводити ім’я потрібного вам файлу. Насправді досить складно згадати назву файлу, оскільки здебільшого вона виглядає подібним чином: 29412_09342.JPG

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

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

7. Гнучкість та ефективність використання

Одна з багатьох причин, чому користувачі люблять Photoshop – це простота та ефективність використання цієї програми! Люди можуть легко використовувати гнучкість фотошопу: налаштовувати робочу область, зберігати файли, редагувати їх знову, покращувати ефективність роботи тощо.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Photoshop дає користувачам можливість зберігати бажане налаштування робочої області.

8. Естетичний і мінімалістський дизайн

На панелі інструментів у Photoshop відображаються лише піктограми! Сама панель знаходиться в розі програми, що дозволяє зберегти порядок робочої області!

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Панель інструментів Photoshop мінімалістична! Вона дозволяє уникнути безладу, відображаючи інструменти лише у вигляді іконок.

9. Допомога користувачу в розрізнанні, діагностиці і відновлення після помилки

Щоразу, коли виникає помилка, Photoshop відображає діалогове вікно, яке дозволяє користувачеві дізнатися, що пішло не так і як це виправити.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

У цьому повідомленні про помилку, Photoshop пояснює, що не так, яка причина та як усунути неполадки.

10.  Допомога і документація

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

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

У вікні відображається інформація про те, як створювати перекидання в контексті веб-графіки. Користувач може побачити список усіх тем у бічному меню.

10 кроків для покращення зручності використання, корисності та затребуваності проекту, шляхом застосування рекомендацій Нільсена та Моліка (Nielsen and Molich’s Interface Design Guidelines)

Як розробник, ви повинні вміти оцінювати та критикувати дизайн власних проектів так само добре, як і роботу інших розробників, спираючись на обґрунтовані докази та знання! Застосування 10 загальноприйнятих правил Нільсена і Моліка (Nielsen and Molich’s Guidelines), оцінюючи дизайн вашого інтерфейсу, допоможе краще зрозуміти та побачити потенційні проблеми, й створити прекрасні враження користувача від вашого проекту. Нижче ви знайдете робочу таблицю, де зможете практикуватися, як тільки навчитеся розпізнавати, чи застосовувалися ці правила і дізнаватись коли вони були порушені. Нарешті настав час покращити сайт або додаток, застосовуючи 10 відомих правил.

Насамкінець…

Спираючись на інструкції з інтерфейсу Нільсена та Моліка (Nielsen and Molich), ви повинні завжди пам’ятати про зручність використання, корисність та доцільність вашого проекту для користувача! Так само як і дизайнери успішних компаній (Apple, Google та Adobe), при розробці проекту, ви будете підтримувати свої рішення з евристикою і переконуватися у тому, що створюєте корисний та красивий дизайн! Щоб практикувати розпізнавання цих 10 емпіричних правил, продовжуйте роботу та виконайте вправу, описану в прикріпленому файлі.

Рекомендації:

Щоб переглянути «Дослідження зручності використання Adobe Photoshop», перейдіть за посиланням:
https://courses.cs.washington.edu/courses/cse595/98wi/projects/photoshop.html

Щоб знайти додаткову інформацію про роботу Якоба Нільсена (Jakob Nielsen) «Підвищення пояснювальної сили юзабіліті», див.

https://static.aminer.org/pdf/PDF/000/089/679/enhancing_the_explanatory_power_of_usability_heuristics.pdf

Щоб переглянути додаткову інформацію про дизайнерське мислення Джона Вілей (Jon Wiley), будь ласка, перейдіть за посиланням:

https://www.fastcodesign.com/1671425/how-googles-designers-are-quietly-overhauling-search

No Comments

Post A Comment