Що найбільше запам'ятовують користувачі, положення чи колір елементів?


11

У мене є навігаційне меню з деякими кнопками, яке виглядає приблизно так (ПРИМІТКА. Кожна кнопка має своєрідну піктограму, яка відрізняє її від решти, я не додав їх у макет, але вони схожі на іконки Wins8):

введіть тут опис зображення

Деякі користувачі повідомили, що випадково натиснули «Увійти» замість «Надіслати», що є просто неприпустимим. Зараз я розглядаю шляхи розмежування кнопок більше. Один із варіантів - перемістити знак вправо. Інший (мабуть, додавши до переміщення), щоб змінити свій колір:

введіть тут опис зображення

Чи достатньо хороша позиційна диференціація? Або я повинен також використовувати колір? Додавання нового кольору до цієї навігації має певний вплив на загальну палітру та зовнішній вигляд, тому вона має ціну, яку я повинен був би заплатити.


2
Я б не називав це "поза темою", але це могло б більше сенсу перейти на UX.
DA01,

@ DA01 Так, я розглядав це. Кольорова частина речей змусила мене замислитися і нарешті подумала: Чи можна належати в обох? Я не проти мігрувати це, хоча!
Yisela

Деякі ваші користувачі матимуть блакитну / жовту кольорову сліпоту. Переконайтеся, що ці кольори для них виразні!
кешлам

@keshlam Однозначно! У мене на панелі завдань є програма з кольоровими
сліпами,

Я б не сказав жодного. Запах запам'ятовується :)
Скотт

Відповіді:


5

Це також не допоможе вам працювати з трьома чотирибуквними словами, які починаються з літери "S". :)

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

Але колір не обов'язково вказує або порушує його. Іншою діючою стратегією було б пов’язати піктограму з кожною кнопкою (не лише з останніми двома). Таким чином ви створюєте ще одну різницю між елементами.

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

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


Дякую! Лише зауваження: кнопки мають досить чіткі піктограми, я не можу розкрити фактичні знімки екрана, і я не додав їх до макетів ... але люди все-таки плутають їх!
Yisela

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

6

Речі, які можна використовувати для розмежування кнопок:

  • етикетки (очевидно)
  • колір
  • розмір
  • замовлення
  • Місцезнаходження
  • близькість
  • форма / стиль

Чим більше ненавмисна шкода може заподіяти дію, тим більше шансів вибрати один із наведених вище варіантів.

Не знаючи потоку користувачів для цих команд, я не знаю, чи достатньо вашої пропозиції, але це, безумовно, поліпшення порівняно з попередніми, оскільки тепер ви перенесли дію 'uh oh', відправте подалі від двох інших.

Можливо, я б пішов на крок далі і застосував розумну диференціацію близькості. Можливо, щось настільки драстичне, як це:

--------  --------
| SAVE |  | SIGN |                                               DELIVER -->
--------  --------   

Тут я використав декілька диференціаторів ... близькість, стиль / тип кнопки та перейменований на «відправити» на «доставити» (див. Нижче).

Ще один виклик, який вам здається, - це масовий випадок алітерації. Для подолання цього може знадобитися певна творчість. Наприклад, ви, ймовірно, ніколи не хочете мати дві кнопки поруч із мітками "видалити" та "доставити" :)


3

Я погоджуюсь і з Йоганнесом, і з DA01, вони обоє підняли питання, які я б хотів щодо позиціонування, алітерації тощо.

Але що я хотів би додати.

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

Якщо символи досить розпізнавані для людей, то розділення кнопки надсилання має бути достатньо.

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

Сподіваюся, що користувачі закінчилися щасливими;)


1

Що найбільше запам'ятовують користувачі, положення чи колір елементів?

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

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

У цьому випадку, звичайно, є рівновага між двома (було б цікаво дізнатися, який тип користувачів помиляється на неправильну кнопку. Можливо, там є закономірність. Також, я думаю, що користувачі з відмінними навичками роботи на комп’ютері будуть швидшими на припускаючи, де знайти потрібну кнопку.).

Оскільки ви не можете показати нам фактичні кнопки з піктограмами, запропонувати це стає важко. Один з простих способів може бути просто збільшити відстань до відстані, як @ DA01 пропонує. На зразок MailApp:

введіть тут опис зображення

Просто думка.


Редагувати

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.