Я расскажу вам о мобильном приложении, которое завоевало огромное количество фанатов. Конечно, я говорю о ねこあつめ.
Вы тоже являетесь носителем одного языка и не знаете, как ねこあつめ переводится? Не волнуйтесь, это совершенно неважно. Отзывы на App Store/Play Store говорят сами за себя:
“Простой интерфейс”, “Перевод и не нужен”, “Легко играть, даже если вы не умеете читать по-японски!” Как же это приложение получило такую невероятную обратную связь?
Я скачала его, чтобы разобраться в этом. Это конечно не имело ничего общего с желанием иметь такую игру в своем телефоне. Это было чистым исследованием.
Одна из самых эффектных заставок. Также одна из немногих на английском – или cat-English в этом приложении.
Приложение очень простое. У вас очень узкий задний двор с видом на переулок. Вы можете купить еду и игрушки и оставить их во дворе, привлекая кошек. Вы периодически в течение дня проверяете приложение, чтобы увидеть, какие кошечки посетили ваш двор (они самых разных пород и цветов!) и добавляете еды. Вы зарабатываете сардины, которые вы можете потратить на еду и игрушки. Если вам повезет, вы поймаете кошку, когда она играет во дворе! Если нет, журнал покажет вам, каких кошек вы не поймали.
Играя в эту игру и увидев, как быстро и с каким удовольствием я училась использовать это приложение, несмотря на все надписи, которые были пугающими, я поняла, что это простое, веселое приложение может преподать урок о хорошем пользовательском интерфейсе.
Давайте посмотрим, как это приложение само расскажет, как оно работает.
Кому нужны слова, когда все очевидно?
Affordance (очевидность) – это по существу интерактивный элемент в дизайне. Среди различных “очевидностей” существуют следующие:
- Физические: интерактивные элементы, как “3D” кнопки
- Языковые: использование языка для объяснения возможных действий – тип “очевидности”, который не нужен, судя по ねこあつめ
- Шаблонные: повсеместно использующиеся элементы, значение которых понятно, такие как “X” – “закрыть”, или круглая иконка – “обновить”
- Символические: изображения, используемые для обозначения действия или содержания, как логотип птички Twitter намекает на то, что вы можете отправить твит
Вы можете привлечь около 40 различных кошек, а эта серо-белая кошка отпугивает их и может все съесть сама.
Несмотря на столь плоский, мультяшный интерфейс, который визуально не слишком отличается от настоящего заднего двора, ねこあつめ использует физическую “очевидность” в виде кнопок в левом верхнем углу и правом нижнем углу приложения. Если мы нажмем на верхнюю левую кнопку, мы откроем меню приложения.
О, смотрите! Маленький котенок с сообщением в меню!
ねこあつめ использует шаблонные “очевидности”, элементы большинства приложений, такие как начать/войти и закончить/закрыть. Мы нашли меню, потому что верхняя кнопка слева зачастую открывает классическое меню. Более того, кнопка меню превращается в X, давая нам понять, что для того, чтобы выйти из меню, вы можете нажать X.
Я уже упоминала символические “очевидности”? Просмотрите опции меню. У меня уже были кое-какие предположения, прежде чем я нажала на них:
Мордочка кота: Посмотреть на кошечек?
Сумка: Покупки!
Мяч и коробка: Список моих игрушек?
Камера: Сделайте снимок!
Кошка в центре: Вначале я не догадалась, но вскоре поняла, что эта иконка для вашего двора. Если нажать на нее, то меню закроется и вернет вас к кошечкам и хламу, разбросанному по вашему двору.
Сардина-самолет? Я понятия не имела, что это, но, учитывая, что валюта – рыба, я предположила, что это взаимосвязано. Эта опция меню показывает вам, сколько вы заработали за кошек, которые посетили ваш двор с момента последнего использования приложения.
Сардина-самолет “с момента вашего последнего визита”: куча бродячих кошек, которые пришли, поели, поиграли с моими игрушками, и даже не поблагодарили.
Механизм: Классическая иконка настроек.
News: Одна из немногих языковых “очевидностей” в этом приложении, хотя там не столько “новости”, сколько реклама других приложений, в том числе игры ninja panda.
Меню-сетка: Мне казалось, что там просто больше вариантов меню, и я не ошиблась. Это своего рода FAQ раздел и раздел сообщений, оба из которых, к сожалению, являются бесполезными для носителей других языков.
Несколько вещей в вашем дворе также кликабельны, хотя менее понятны, чем другие “очевидности”. Вы не можете нажать на любую из ваших игрушек, но вы можете нажать на еду, чтобы наполнить миску, и нажать на самих кошек, чтобы узнать о них и посмотреть – это новая кошка или вернувшаяся попрошайка.
У меня много вернувшихся попрошаек.
Как мне узнать, какие мультяшные коты уже были в моем дворе?
Методом проб и ошибок
Я знаю, что кот приходил ко мне, потому что я уже сфотографировала его и добавила фото к его ID-карте (ниже). Если появлялась новая кошка, квадратик показывал небольшую, неопределенную мордочку котенка, но если я нажимала на большую белую мордочку котенка, я могла выбрать из сделанных мною фотографий кота ту, что мне нравится больше всего для карты.
Серо-белый кот вернулся для “призыва к новым действиям”
Это может показаться немного утомительным в техническом плане, на самом деле это не так, но мне потребовалось время, чтобы изучить это. Когда вы открываете опцию выбора изображения вашего кота, если вы не фотографировали, эта область будет… пустой.
Но! После того, как вы сделали фотографии (помните иконку камеры?), вам не нужно беспокоиться какие фотографии относятся к тому или иному коту: приложение сделает это за вас!
Я совершила ошибку, нажав на одну из кнопок, которая становится доступной, как только у вас будет несколько фотографий для выбора: Delete. Вы ‘наказаны’ за это действие в том смысле, что вы теряете свою фотографию, но это легко преодолеть, так как а) кошки часто возвращаются и б) когда они приходят, они остаются на одном месте и делают то же самое, поэтому легко сделать новую фотографию.
Удаление снимков – худшее, что может случиться в этой игре. Когда вы немного покопаетесь в приложении, вы узнаете, как работает интерфейс, вы узнаете, что он требует два нажатия для завершения действия, предоставляя вам выбор – действительно ли вы хотите выполнить действие и дает вам возможность отмены.
Ошибиться в этом приложении почти невозможно, и простая отмена действия позволяет пользователю чувствовать себя спокойным и увеличивает его желание изучать приложение – и, соответственно изучать интерфейс и то, как игра устроена.
Что касается навигации и выполнении определенных действий, то вас ничего не расстроит в этом приложении. У вас есть возможность легко отменить любое действие, которое вас смущает или которое вы не хотите совершать. Или вы можете экспериментировать с действием, в котором вы не уверены без каких-либо негативных или неудобных последствий.
Можете ли вы себе представить, что ваше банковское приложение так же легко изучить?
“Очевидности”, метод проб и ошибок… что еще делает это нечитаемое приложение таким понятным?
“Три закона UX” в действии
Вот три закона UX:
- Сузьте выбор: пусть вариантов будет мало, и упростите их.
- Большую кнопку труднее пропустить.
- Не перегружайте память: запоминаемых предметов должно быть 7 или меньше.
Кошкам очень нравится хвастаться своими хвостиками.
Как показывает мой разбор меню, это приложение не утомит вас большим количеством действий. Чаще всего вы не будете управлять такими опциями, как настройки, новости и сообщения/ответы, и останется всего несколько основных опций.
Даже в самих опциях дальнейшие варианты очень просты. Например, камера: когда вы нажмете на нее, появится графика классической камеры, чтобы ни делали кошки, вы можете сфотографировать их. В режиме камеры, вы можете увидеть две новые опции рядом с кнопкой закрытия “X”. Одна показывает кошку (сфотографировать кошек!), другая показывает весь вид (сделать снимок всей картины!). Очень легко понять и еще легче управлять.
Любой, у кого когда-либо был кот, знает, как они не любят пустые миски.
Независимо от того, какое действие вы выполняете, варианты очевидны. Например, чтобы убедиться, что у ваших кошек есть еда, нажмите на миску во дворе, которая наглядно покажет вам, насколько она полна. Вы можете заполнить ее (опция золотого цвета) или выйти (серый вариант). Кнопки большие и их легко понять.
Однако я не сама поняла действие кнопок “заполнить чашу” или “отменить”. Я наблюдала за другим пользователем. И я именно так узнала об этом приложении.
“Из уст в уста” – эффективная и приемлемая форма обучения пользователей приложению
Мой друг, который увлечен играми, рассказал мне об этом приложении. После того как я скачала его, он объяснил основную задачу: К тебе должны приходить кошки.
Если бы он не объяснил мне основную цель игры, я бы, наверное, вскоре удалила это приложение. Уходит много времени (и еды, и игрушек…), чтобы привлечь кошек, так что без понимания задачи, вы в конечном итоге подумаете, что вы загрузили японское приложение – “смотри на пустой задний двор”.
Благодаря новизне и небольшой непредсказуемости этого приложения, о нем хочется говорить.
Поглядите на его маленькие сапожки!
Немного поиграв, я выложила пост в Facebook. К моему удивлению, у многих моих друзей уже было это приложение, и они без устали обсуждали его. Обсуждение стало еще более горячим, когда я заявила, что мой двор посетил неуловимый “кот пират”:
В конце концов, я назвала этого кота En Garde.
И вот так я узнала о еще одной новой функции. (В тексте с картинки говорится, что если кликнуть на имя, то можно переименовать кота)
Обратите внимание на то, как легко объяснить функцию. Мне не нужно копаться на страницах в форуме, искать нужный пост, а затем следовать длинной пошаговой инструкции. В процессе обсуждения одной функции, разговор привел к открытию еще одной функции, о которой я не знала. Кроме того, новая функция достаточно проста, что друг смог объяснить мне ее в одном предложении.
Я упомянула форумы и длительные пошаговые инструкции, потому что видела, что такое зачастую является обычным подходом самопомощи пользователей, и это скорее приведет в бешенство, а не поможет. Некоторые компании выявляют наиболее обсуждаемые проблемные вопросы и вносят изменения в свой продукт, упрощая его использование. Тем не менее, я также видела, что вместо упрощения, компания просто создает FAQ из топ-рейтинг сообщений на форуме, или дает ссылки на те посты, где поднимаются такие же вопросы. Это заставляет клиентов чувствовать себя беспомощными и игнорируемыми.
Знак хорошего продукта
Очевидно, что нельзя сравнивать каждое приложение, SaaS или другой продукт с подобной игрой. Но все же, я думаю, что это японское приложение может преподать урок о хорошем UI:
Сделайте ваши “очевидности” достаточно понятными, такими, что язык не будет нужен (или используйте язык как можно меньше)
Предоставьте пользователям метод проб и ошибок и легкую отмену действий
Пусть опции будут простыми, уменьшите их количество
Простые функции приводят к простым и приятным беседам с клиентами, что способствует распространению продукта методом “из уст в уста”
Подумайте о приложении, которое вы используете или, может быть, которое вы создали сами. Как вы думаете, смогут ли люди использовать это приложение, если удалить все языковые обозначения? Почему да или почему нет?
Конечно же, это не идеальное решение для каждого продукта, но задуматься о том, как пользователь может изучить приложение и выполнить задачу без использования языка, безусловно, пища для размышлений о UX.
Спасибо, что прочитали эту статью! Если она вам понравилась, пожалуйста, оставьте комментарий.
И еще:
В то время как в названии статьи говорится только о UI, мы также затронули вопрос о UX. Несмотря на то, что это разные понятия, UI и UX влияют друг на друга, и, надеюсь, что эта статья иллюстрирует, как хороший UI способствует хорошему UX.
Перевод статьи.
Высоких вам котоконверсий!
