10 октября 2017

Чем геймпад Xbox лучше PlayStation'a и какая от этого польза UX-дизайнеру

Ольга Шаврина
Рискую получить помидором в глаз от адептов PlayStation, однако делюсь с вами выводами, полученными из сравнения геймпадов и примерами, как это можно использовать в UX-дизайне приложений.
Для тех, кто не в теме. Есть две конкурирующие игровые приставки – Microsoft Xbox и Sony PlayStation. Суть одна – подключаешь к телевизору, берешь в руки геймпад и играешь. Различия в деталях.
Ни в коем случае не критикую игровую платформу, контент или рыночную стратегию Sony и Microsoft. Не трогаю эргономику, материал, вес и габариты геймпадов. Не зарюсь на божественные умения хардкорных игроков. Речь только о UX-е кнопок и личном опыте.
На картинке два геймпада – слева Xbox, справа PlayStation. У каждого по четыре круглых кнопочки под правую руку. Они – мои сегодняшние герои. Погнали.
Задача
Какая главная задача кнопок? Чтобы их различали. Важно, чтобы пользователь не ошибался и нажимал на нужную в нужный момент и делал это не глядя. Сложность в том, что действия на кнопках все время разные – каждое приложение использует их как хочет и часто сам пользователь меняет назначения.
Цветовой контраст
Кнопки XBox - 4-х цветов, имеющих самый сильный цветовой контраст: зеленый, красный, синий, желтый. Цвета невозможно перепутать. И хотя одного цвета для различия объектов недостаточно, в комплекте с другими способами дифференциации цвет играет важную роль.
Цвета кнопок PlayStation гораздо менее контрастны. Красно-оранжевый и розовый выглядят очень похожими.
Takeaway: делаете иконки или кнопки разноцветными – позаботьтеcь о том, чтобы цвета были действительно разными.

Хороший пример – очаровательное приложение органайзер Taasky.

Форма символов
При распознавании объектов наш мозг прежде всего ориентируется на их форму. Чем четче различия в форме объектов, тем легче их распознавать. Возможно, для японцев из Sony различия очевидны. Но лично для меня квадрат и круг в таком контексте выглядят очень похоже.

– Но на геймпад же никто не смотрит, когда играет! – скажете вы.

Во-первых, по началу смотрят. А во-вторых, эти иконки используются не только на геймпаде. Чтобы понять, какую кнопку жать, пользователь смотрит на идентичные обозначения на экране. Там иконки обычно мелкие, в комнате темно, телевизор пятилетней давности, зрение средне-статистическое. В итоге – кнопки легко перепутать.
Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.
Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.
Буквы наш глаз натренирован различать во всех видах, в мелких размерах, при любом освещении. Мы каждый день тренируемся различать сотни тысяч букв.
Takeaway: в первую очередь иконки различают по их форме. Следите за тем, чтобы иконки имели разную форму, легко различались в маленьких размерах, на неконтрастном фоне при любом освещении.

Пример из Фотошопа. Часто ошибалась, пока не выучила горячие клавиши для инструментов «Прямоугольник» и «Градиент».

Семантика символов
В большинстве приложений кнопка «А» (XBox) и «Крест» (PS) – это активное действие. Например, зайти в пункт меню или прыгнуть. «B» (Xbox) и «Круг» (PS) – это обратное действие – выйти, отменить.
В случае Xbox я вижу логику. A – Action, первая группа алфавита. B – Back. Смысл поддерживается цветом: A – зеленая – ура, вперед, можно. B – красная – стой, погоди, назад.

В случае PS, чтобы сделать активное действие мне нужно жать на крест :-/ Каждый раз испытываю диссонанс – крестом обычно что-то закрывают. Иконка с кругом никаких ассоциаций не вызывает. Просто круг, надо запомнить. Цвета смысла тоже не добавляют.
Takeaway: если пользователи привыкли к символу в других областях и его смысл согласуется с вашим – используйте его. Если привычный смысл символа противоположный – надо искать другой вариант.

Пример HotJar – приложения для сбора фидбека от пользователей – иконка «Формы» слева больше похожа на «Редактировать» или «Создать новый».

Разработчики XBox умудрились не просто сделать кнопки разными, они внесли внутреннюю структуру в их набор. A B и X Y – не просто четыре кнопки, это две пары. Причем, первая важнее второй и внутри каждой из них есть свой порядок.

Ребята привязались к одной из самых сильных систем, уже построенных в нашем мозгу – алфавиту. По-моему, это гениально!
Порядка в символах Playstation нет никакого. Символы, хоть и знакомы нам с детства, не увязаны ни в какую систему в нашей голове. Их приходится запоминать.

Вспомнился язык программирования APL который мы изучали в Университете ради кругозора. Код на нем выглядел примерно так:
Кусок кода на языке APL – вместо привычных операторов кружочки и треугольники
Вместо человеческих операторов – треугольники, кружочки и прочие загигулины. Прикольно, конечно, но популярным он не стал и понятно почему.
Takeaway: если можете опереться на готовую систему в голове пользователей – делайте это. Алфавит, нумерация, светофор работают лучше, чем новая система, которую людям придется изучать.

TripAdvisor для обозначения среднего чека выбрали иконки $ – $$$$. Сколько долларов, такой примерно и чек. Отличное решение на мой взгляд. Позволяет быстро сориентироваться по цене без лишних деталей и новых обозначений.

Звучание
Не знаю, как нормальные люди, но я проговариваю про себя названия кнопок, когда на них жму. В случае с Xbox это «А, А, Бэ, Бэ, Бэ, Икс…» – один слог. На PlayStation это «Крест, Крест, Кружочек, Кружочек, Тре-у-голь-ничек…». Это трудно, серьезно, язык устает :)

А чем труднее произнести, тем труднее запомнить. Слышали про слухоречевую память? То-то и оно.
Takeaway: Названия кнопок, иконок и пунктов меню лучше делать короткими, четкими и легко произносимыми. Их и запомнить легче, и мозг при работе не перегревается.

Откройте любой профессиональный продукт (не локализованный на русский!) и загляните в меню – названия четкие, емкие и сочные. Произносить их – одно удовольствие. На картинке пример из Фотошопа.
Итого
Не утверждаю, что контроллер PlayStation плохой с точки зрения UX, но лично мне его освоить было сложнее, чем контроллер Xbox. Приходилось постоянно на него смотреть, чтобы ничего не перепутать. А раз так, значит у Xbox есть чему поучиться и использовать опыт в других дизайнерских задачах.

Буду рада, если мои выводы принесут вам пользу. Помидоры в комментариях тоже всячески приветствую :)
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и соглашаетесь с политикой конфиденциальности