1. Дані, отримані від більш, ніж 1000 учасників тестування малюють повну картину про вплив стилю іконок...
2. іконки
3. тест
4. результати
5. висновок

Переклад статті Курта Арліджа.

Дані, отримані від більш, ніж 1000 учасників тестування малюють повну картину про вплив стилю іконок на юзабіліті.

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

Приклад суцільних і порожнистих іконок в панелі вкладок додатки в iOS7. Обраний значок, «Top charts», використовує заповнений «суцільний» стиль. Невиділені іконки використовують лінійний «порожнистий» стиль.

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

іконки

Перш за все, важливо відзначити, що це обговорення зосереджено на конкретному типі іконок: плоских, одноколірних іконок, відомих як іконки панелі вкладок або просто іконки вкладок. Це 4-5 іконок, які ви зазвичай бачите в нижній частині екрана мобільних додатків. Оскільки значки вкладок служать в якості навігації до інших розділів програми, важливо вказати, який розділ активний в даний час, як-то виділивши його іконку. З випуском iOS7, Apple почав показувати ці стани за допомогою двох стилів іконок: суцільна версія, що показує активну / вбрання стан і порожниста версія, щоб показати неактивне / невибране стан. Наскільки мені відомо, Apple в даний час є єдиним великим виробником програмного забезпечення, який використовує для цієї мети два стилю одного і того ж базового значка.

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

20 іконок, що використовується в тесті, запозичені з наборів іконок IOS, Android і Windows Phone, доступних в Інтернеті. Значок Speech Bubble запозичений безпосередньо з поста Джонсона.

тест

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

Перед тестуванням, учасникам пропонується ознайомитися з 20 поміченими іконками. Потім учасники проходять через 24 тести, в яких їм дається назва однієї з 20 іконок і пропонується вибрати відповідний значок, з розташованих по колу, настільки швидко і точно, наскільки це можливо. Кожне випробування використовує одну з 20 іконок в якості мети, і перші чотири випробування вважаються розминкою, тому вони виключені з аналізу даних. Додаток випадковим чином визначає послідовність цільових значків, положення кожного значка в масиві, і то, в якому стилі відображаються значки - суцільному або підлогою. Тест займає близько п'яти хвилин.

результати

За 10-денний період збору даних, було пройдено 1,260 тесту. Більшістю випробовуваних виявилися молоді люди (18-40 років), технічно підковані користувачі Apple. Середній час вибору склало майже рівно три секунди, зі стандартним відхиленням 1,5 секунди.

В середньому, з усіх 20 іконок, вибір порожніх значків займав на 0,1 секунду більше, ніж вибір суцільних іконок, що, здавалося б, підтримує твердження Джонсона, що розпізнавання порожніх значків вимагає більше когнітивних зусиль (ну хіба що трохи великих). Проте, це ще не все.

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

Чотири комбінації стиль-колір, використовувані в тесті. (Чорні кола використовуються для подання в цій статті. У тесті, білі іконки були показані на безперервному чорному тлі).

Поділ даних на ці чотири групи дозволило мені використовувати класно звучить статистичний метод, званий «2-way ANOVA», щоб більш уважно поглянути на швидкості вибору значка. Використовуючи цю техніку, я виявив більш детальний результат: порожнисті, білі на чорному тлі іконки вибиралися приблизно на 0,17 секунди повільніше, ніж іконки трьох інших комбінацій стилю-кольору, без будь - яких інших статистично значущих відмінностей між трьома іншими комбінаціями стилю-кольору . Іншими словами, на швидкість вибору чорних-на-білому іконок не впливало те, порожнисті вони, або суцільні. Точно так же, швидкість вибору не змінювалася для суцільних іконок, незалежно від того, були вони білими, або чорними. Однак, коли порожній стиль поєднувався з колірною схемою «білий на чорному», час вибору трохи збільшилася.

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

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

Але в цьому висновку є невеликий недолік. Щоб отримати ще більш детальний погляд на дані, я особисто досліджував кожну з 20 іконок на предмет стилю і кольору, і виявив невідповідність, яке впливає на результати, представлені вище. Майже половина ікон (9 з 20) взагалі не мали ефекту стилю, що призвело до того, що суцільні і порожнисті стилі розпізнавалися однаково швидко. Серед одинадцяти інших іконок, три показали кращі результати в підлогою стилі. Значок "Speech Bubble" показав повністю зворотний загальної середньої ефект: суцільний чорний варіант вибирався повільніше, ніж всі інші його версії. Це має сенс, тому що більшість таких іконок, коли ми з ними стикаємося, відображаються білим кольором або контуром. Суцільне чорне хмарка виходить за ці рамки і сприймається довше.

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

висновок

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

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

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

І нарешті, я сподіваюся, що це дослідження підкреслить важливість використання доказів для підкріплення рішень в UI дизайні. Всі дизайнери повинні критично оцінювати кращі методи і підкріплювати їх рекомендації своїми дослідженнями.

джерело: viget.com