Що розробники інтерфейсів можуть почерпнути з японських відеоігор початку дев'яностих

image

Я пишу це з легким сумом, переглядаючи мої улюблені рольові ігри для Super Nintendo, і розумію:

сучасний дизайн користувальницького інтерфейсу розбестив мене.

І це відчуття досить поширене. Читач Hugon на форумі Quarter to Three пишет:

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

Спасибі, «прекрасний інтерфейс».

У минулому я не дуже чіплявся до якості. Коли я сидів ззаду в автомобілі тата і ламав клавіатуру Nokia в спробі не дозволити змії з'їсти свій хвіст, мені в голову не приходили більш глибокі думки: «ага!», «супер!» або «ааааа!».

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

image

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

Я пройшов безліч ігор, записуючи екран, і їх інтерфейс і самі відеоігри відкрилися для мене в новому світлі. Мова йде про хороших і поганих сторонах японських відеоігор 90-х років і чого варто (або не варто) повчитися у них сьогодні.

«Пульсуючі кружечки» як частина навчальної програми

У перші 10 хвилин Final Fantasy III ви зустрічаєтеся з невеликим мерехтливим проблиском — який натякає будь-якого геймеру, що тут є чим поживитися. Але замість видобутку ви отримуєте короткий урок — не в буклеті інструкції, який ніхто не потрудився б читати, а вбудований прямо в сюжет гри:

image

Раніше я вже бачив, як Microsoft ховала уроки, що навчають новачків графічного інтерфейсу, всередині гри «Сапер», щоб привчити користувачів до нової оболонці, і, схоже, це ще один древній приклад того ж підходу.

У Final Fantasy III, проте, це вражає тим, що точності збігається з прийомом, використаним нещодавно додатком Slack (і багатьма іншими SaaS-додатками).

image

І, оскільки процес початкового навчання користувачів в Slack з тих пір змінився, от гифка тієї ж ідеї, що діє в сервісі для управління бізнес-процесами Process Street:

image

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

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

Микровзаимодействия, демонструють час і турботу про користувача

статті по микровзаимодействиям Нік Бабич пише:

“В кращих продуктах добре зроблені дві речі: функції і деталі. Функції — це те, що приваблює людей до продукту. Деталі — утримують на ньому. Саме деталі виділяють продукт на тлі конкурентів".

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

image

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

Chrono Trigger — одна з декількох пройдених мною рольових ігор для Super Nintendo, де тицьнувши десь у випадковий предмет у звичайній кімнаті, можна було отримати цікавий результат. В першій кімнаті, коли ваша мама будить вас, можна відкривати і закривати штори.

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

image

Меню значно покращилися (до великої радості)

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

Звичайно, я знаю, що це не першочергова турбота рольових ігор (і, фактично, не те, за що їх, взагалі, критикують), але перша система меню Breath of Fire (Подих Вогню) була просто безглуздою. Враховуючи, що це меню представлено ще до початку гри, оцініть:

image

Ключові моменти:

• Немає ніякого кількісного визначення, що означає «Швидко», «Нормально», «Повільно».

• Секція конфігурації клавіш для Y, X, L і R вводить в оману, тому що стрілка явно плаває десь посередині.

• Якщо на рухомою стрілкою натиснути «Вибрати» («Вибір»), то немає ніякого пояснення, до чого відноситься цей елемент. Чому я повинен чекати чи не чекати), що «Magic» прив'язаний до R? Що це взагалі значить?

Було б набагато корисніше не змушувати робити вибір ще до початку, а перенести його в меню налаштувань де-небудь в грі.

Несправедливо порівнювати меню ігор 90-х з меню сучасних SaaS-продуктів, але, на щастя, мені не довелося робити цього. Ось набагато краще меню з серії Super Mario: Legend of the Seven Stars — рольової гри, відомої своїм елегантним дизайном:

image

Гра йде навіть з невеликим «букварем» для початківців на відміну від меню в Breath of Fire, яке з'явилося до того, як я хоча б побачив, на що схожа гра.

Розумні значення за замовчуванням для даних користувача

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

image

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

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

image

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

Індикація інтерактивних частин екрану

У загальних словах користувальницький інтерфейс складається з двох груп елементів: з якими можна і з якими можна взаємодіяти.

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

З іграми Super Nintendo питання, з якими частинами екрана можна взаємодіяти, вирішується іноді методом проб і помилок, але на відміну від додатків з вільною формою управління (миша / сенсорний екран) кількість варіантів обмежена можливістю переміщати курсор, використовуючи клавіші зі стрілками. Якщо ви не можете перемістити свій курсор у будь-яку область екрану, то ви не можете взаємодіяти з елементами на ній.

Це призводить до незрозумілих інтерфейсам, як той, на який я дивився раніше в Breath of Fire, — звідки я міг знати, що там є поле вводу?

image

Точно так само як гра Final Fantasy III показує, яка частина навколишнього середовища є інтерактивною, діють і сучасні програми.

Подивіться, як показано інтерактивні елементи інтерфейсу Peach (ліворуч) і Buffer (праворуч):

image

Користувач на екрані з управлінням мишею або дотиком може клацнути теоретично скрізь. Незручне меню в Breath of Fire показує, що взаємодії можуть вводити в оману, навіть коли місця для «кліка» обмежені. Спокуслива кнопка Peach виглядає призначеної для «кліка», але клацання по ній дає повідомлення про помилку. Buffer витримує баланс, показуючи кнопки, з якими немає взаємодії, сірими.

Розповісти історію, щоб привернути увагу користувача

Кожна класична гра Final Fantasy має одну і ту ж структуру. Як і в п'єсах Шекспіра, ви опиняєтеся прямо в середині розповіді, лише з написом в стартовому вікні, що задає контекст, типу: «До чого це все?»

Історія розгортається протягом вкрай повільною, триває 5-10 хвилин відеозаставки зі спрайтами, блукаючими навколо, і з посиланнями на безліч імен і місць, про які ви й гадки не маєте.

image

Але це ж і є фентезійні історії, правильно?

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

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

image

І все ж, дбали ігри 90-х про інтерфейсі?

Відкладаючи деякі очевидні невдачі, такі як Dragon Age 6 і Breath of Fire, здається, що інтерфейс SaaS-додатків багато запозичив з минулого. Деякі додатки, наприклад, Duolingo і Habitica, знаходяться під прямим впливом рольових ігор старої школи.

Було б несправедливо говорити, що ігри 90-х не дбали про інтерфейсі, але на відміну від дня сьогоднішнього — через 14 років після того, як вийшов перший базовий підручник з розробки інтерфейсів, — пріоритет питань інтерфейсу був невисокий.

У той час як технологія Super Nintendo обмежувала складність і елегантність працюють з нею ігор, вони виглядають незграбними лише тому, що ми розбалувані ретельно вилизаними сучасними інтерфейсами з купою «смачненького».

Зрештою, до сьогоднішнього дня я жодного разу не скаржився на інтерфейс Final Fantasy — я сідав і мовчки рубався в неї до 4 ранку.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.