
17 докладов про UI/UX
Собрал 17 докладов про UI/UX в одном плейлисте. Будет, что посмотреть вашему дизайнеру на выходных. Почти все на русском.
Собрал 17 докладов про UI/UX в одном плейлисте. Будет, что посмотреть вашему дизайнеру на выходных. Почти все на русском.
Эта заметка собирает основные моменты по функционалу локализации для мобильных игр. Можно смело использовать заметку для постановки задачи тех.команде.
Решил кое что собрать для архива: доклады 2015 года по нескольким направлениям: менеджмент, организация, планирование и балансировка. Это видео с некоторых моих докладов, пара из которых записаны без моего ведома, тем не менее могут быть полезны для работы.
Гайд о том, как составить UXF для разработки приложения, игры в данном случае. Этот документ поможет увидеть картину в целом, количество игровых компонентов, их связи. User Experience Flow является частью фундамента приложения, который составляется в фазе предпродакшена (планирования).
Как сделать мимимишуную кошачью тему в игре, не испортив UX. Кошки нравятся всем, и если ваша игра сеттингом хоть как-то затрагивает пушистых братьев меньших, кетнесс — часть вашей игры. Заказчик будет требовать присутствия котиков везде, и будет прав. Чтобы не переборщить с этим, сделав каждую кнопку и плашку в виде кошачьих частей тела, нужно четко разграничить, куда может добраться кетнесс, а куда ему дороги нет.
В субботу делился опытом на конференции DevNight. Мой доклад посвящен коммуникациям между дизайнером и менеджером: постановке ТЗ и обратной связи. Вэб версия сопроводительной презентации: Видео + ответы на вопросы
Составляя платежное меню важно помнить, что в момент принятия решения о покупке игрок смотрит в первую очередь на реальную сумму, а не на получаемую внутреннюю валюту. При возникновении потребности в донате, зачастую, игрок выбирает психологически комфортную для него цену. Затем сравнивает её с предлагаемым товаром, опираясь на предыдущий опыт. Если выгода от предлагаемого товара соответствует, по его меркам, цене — он совершает платёж. Допустим, игрок готов потратить $10. За эту сумму предлагается 126k золотых. Опираясь на свой предыдущий опыт, он предполагает, что на эти деньги сможет пройти ещё три уровня. Он доволен этой сделкой и совершает перевод. Здесь все просто. Чтобы удачно сбалансировать платежное меню необходимо предложить достаточную компенсацию за каждую из позиций, накидывая бонусные монеты за каждое следующее предложение. Об этом написано множество статей, повторяться не стану. Я же хочу написать, о том, как можно увеличить психологически комфортную цену. Как подтолкнуть пользователя к более дорогой покупке? По статистике, чаще всего покупатель не склонен выбирать самый дешёвый и самый дорогой товар. Предположим ему нужно купить вино — он приходит в магазин к винной полке. Там стоит 3 бутылки: $8, $27 и $33 каждая. Не желая переплачивать 6 баксов, за небольшую разницу в качестве — он покупает вино за $27 и остается довольным. Покупатель не чувствует себя нищебродом, потому что не купил эконом предложение. Не чувствует себя дураком, потому что не переплатил лишнего. Он счастлив. Изменим условия. На полке появляется четвертая бутылка — за 51 доллар. Теперь уже покупка за 33 бакса становится намного приятней. Психологически комфортная цена изменилась в сторону роста. ARPpU винной полки увеличилось при помощи трюка с 4й бутылкой. Этот прием уже давным давно используется в торговле, и мы можем его наблюдать почти в каждом магазине. Ничего не мешает использовать его и нам. Пользователь делает выбор, в процессе сравнения, отталкиваясь от предложения и своих возможностей. Исследования и статистика подсказывают, что чаще пользователь делает выбор в пользу худшего предложения при особых обстоятельствах, которые создает продавец. Вывод Составляя платежное меню важно помнить два основных момента: Основных позиций в меню может быть одна или две. Остальные позиции используем для того, чтобы подтолкнуть пользователя к правильной покупке. Товар должен соответствовать ожиданиям пользователя, иначе игрок почувствует, что его хотят обмануть и не пойдет на следку. Спасибо за доклад Дэну Гилберту (Dan Gilbert), основываясь на котором был написан данный пост.
Эта запись не о множестве визуализаций прогресса, и его назначении. Она о том, как должен работать прогресс бар вопреки очевидному, чтобы улучшить показатели вашего проекта. Для современного рынка этот вопрос достаточно актуален, так как девайсы все мощнее, и загрузки всё тяжелее, пользователи всё требовательнее, и времени у них всё меньше.
Сколько заработали социальные Казино в 2014 Красиво? Недавно открыл для себя этот сервис — infogr.am. Аккаунт через FB или Google+, приятная подача, хороший UX. Что он умеет делать работать с Excel форматами простой в использовании выбор стилей добавить 14 настраиваемых форматов диаграмм добавлять настраиваемые карты (США и весь мир) добавлять фото и видео вставлять кнопку ФБ-шейр За деньги дополнительно можно получить убрать информацию о сервисе получить доступ ко всем картам мира (200+) добавлять кастомные лого добавлять кнопки шейринга на еще 6 сеток сохранение в графических форматах Цены от 18 до 50 баксов, в зависимости от опций. Рекомендую.
Criminal Case (Pretty Simple Games) игра в жанре пазл-хидден уверенно держится в ТОПах сторов и Facebook достаточно давно. Хочу рассказать о ней с другой стороны, со стороны, которую не показывают в обычных обзорах. Акцентирую внимание на гейм дизайнерских приемах, которые используются для достижения профита в этом замечательном, во всех смыслах, приложении. Core Game Loop Цикл прост, как, собственно, и игра. Начало сессии: обмен подарками, тратим энергию — зарабатывая звезды, тратим звезды — открывая контент, затем восстанавливаем энергию. Обращаю внимание на точки монетизации — они присутствуют в каждом блоке игрового процесса: Кастомизация персонажа происходит за внутреннюю валюту, которая продается В основной механике — механике поиска, можно покупать бустеры Ожидание длительных процессов можно скипать Энергия также продается По каждому из пунктов пройдемся ниже. Балансировка Не считая первых обучающих уровней, вся игра имеет простой линейный баланс. В среднем стоимость контента равна, и растет с незначительной динамикой от уровня к уровню Математика стоимости уровня: суммарное время ожидания длительных процессов (вскрытия, анализ ДНК, прогонки отпечатков по базе) — на $10 за одно дело (уровень) суммарная стоимость докупки энергии для прохождения всего уровня — на $5+ (чистой на $9, но еще на $2-4 энергия пополняется за счет левелапов и бонусов, которые насыпают в процессе игры) Получаем порядка 10-15 долларов за каждый уровень с вовлеченного, активного, платящего пользователя. На данный момент в мобильном приложении 56 уровней. Сюда добавим продажу внутренней валюты на кастомизацию и бустеры, получим экономическую модель Criminal Case. Средняя длинна сессии составляет порядка 15 минут, что регулирует механика «Энергия». Энергия в течении суток восстанавливается так, чтобы пользователь мог играть по 1 сессии каждые 5,5 часов (110 единиц энергии, по 3 минуты на каждую). За одну сессию игрок получает, в среднем, 1 звезду, за которую продвигается в криминальном деле на 1 шаг. Таких шагов на 4 акта, по ~10 шагов в каждом. Заметка: после того, как ты нашел преступника и доказал его вину, открывается последний акт, в котором надо расставить точки на i, и потратить еще 3 бакса. Игрок уже чувствует себя победителем, но новый контент еще закрыт. Такие акты скучны и их хочется пропустить, купив бустеры и скипнуть таймеры. Монетизация Кастомизация альтер эго В игре длинный список стилей и образов аватара, которые действительно хочется купить. Чтобы заморочить пользователя внешним видом его героя, перед ним постоянно маячат не только стильные и разодетые сюжетные герои, но и друзья. В самом начале игры пользователь вкладывает частичку себя, создавая образ, а затем постоянно (в рамках основной механики от 5 раз в сессию) сравнивает свой выбор с альтернативами у друзей. Детали образов открываются по мере прохождения игры, поэтому одеть моднявый костюмчик можно не сразу. Бустеры На окне запуска основной механики поиска улик, пользователь может выбрать 3 бустера, которые направлены на облегчение уровня, а значит более быстрого открытия контента. Скип ожидания Для тех, кто не хочет ждать суточный отчет патологоанатома, существует возможность продолжить игру прямо сейчас, заплатив пару баксов. Как я уже писал ранее, сумма скипов ожидания колеблется в районе 10 долларов на первых 10 уровнях, затем поднимается до 15 и 20 по мере прохождения игры. Докупка энергии Несмотря на то, что энергия призвана ограничить время игры пользователя, чтобы игрок не перегорел, в конце сессии всегда становится вопрос: «А не докупить ли мне еще на один поиск?». Базово дается 110 единиц энергии, при том, что каждый поиск стоит 20 единиц. В итоге у меня в конце сессии всегда остается 10 единиц + 5 единиц, которые уже восстановились — почти хватает на еще один поиск, и когда в этот момент мне не хватает еще одного поиска, чтобы получить заветную звездочку (а не хватает почти всегда) — то я согласен докупит еще капельку. Вот так, не злоупотребляя этой механикой, разработчик получает дополнительные дивиденды. Социальные компоненты привлекают виральных пользователей и возвращают старых Criminal Case может служить учебником по виральным приёмам. Во первых игра активно использует Facebook Open Graph и Share, создавая интересные «Криминальные» посты в лентах друзей, с интересными картинками и текстами. Во вторых, кроме механизма обмена подарками в виде баночки энергии, который реализован почти во всех играх, существует крутая механика, возвращающая друга в игру. Суть ее в том, что для каждого поиска тебе нужен напарник, которого я выбираю среди своих друзей. Мало того, что при выборе друга ФБ сообщает об этом, так по окончанию поиска я еще и дарю ему подарок, в знак признательности за помощь. Друзья отсортированы так, что сначала я вижу активных друзей, затем тех, кто имеет больший прогресс — в общем по вовлечению в игру на текущий момент. Аплодирую стоя — шанс вернуть таких пользователей значительно выше, да еще и 5 человек в сессию. Такая выборочная механика возврата будет иметь хорошую репутацию facebook и позволять больше «спамить» ленту новостей. Не могу не отметить, знакомую нам по CandyCrash, механику PayWall, где я должен либо вернуть в игру 3х друзей, либо заплатить доллар для продолжения игры. В противном случае мне придется играть в старый контент, ожидая 2х дней паузы. Механики для повторного прохождения контента В одном из постов я писал об этом, так вот, пара таких механик отлично реализованы в Criminal Case. Для прохождения уровня достаточно в среднем 35 звезд из 45 возможных. Чтобы вернуть пользователя в пройденные уровни, разработчики добавляют в них плюшки в виде бонусной энергии и специальных модов. А кто не любит полицейских собак? Собрав все 45 звезд в нескольких уровнях, игрок может завести щенка, кормить его, растить, — а, в замен, пёс будет помогать в расследовании, находя одну из улик. Повествование и зеркальные нейроны В заключении, обращаю внимание, как дизайнеры игры передают сюжет и историю. Персонажи всегда ярко фонтанируют эмоцииями во время разговоров и допросов. Стыд, смущение, страх и ярость — далеко не полный список эмоций, которыми наделены сюжетные герои. Каждый из них имеет свой стиль общения, свою харизму и всегда интересно рассказывают свою версию событий. UX подачи сюжета, не смотря на простоту, служит хорошим примером, на него можно смело ориентироваться при разработке похожих игр в стиле Hidden.
Хочу поделиться одним из способов работы с UI/UX-дизайнерами, который упростит взаимопонимание, уменьшит количество переделок, и поможет застраховаться от потери элементов UI при изменениях в структуре игры. К этому моменту я встречал множество различных примеров, как удачных, так и не очень. И для начала давайте проясним, что именно нужно UI/UX дизайнеру, чтобы начать работу по вашему ТЗ. Минимальный набор требований для ТЗ по UI/UX Карта экранов — это диаграмма, где указаны все существующие в игре экраны и попапы, все возможные переходы между ними на концептуальном уровне Детальное описание каждого из этих экранов в формате: назначение экрана список элементов интерфейса и его назначение рекомендации по механикам элементов интерфейса — описание как именно вы видите работу того или иного переключателя, кнопки, или списка пожелания по композиции — какие элементы должны получить больше внимания пользователя, а какие отодвинуты на второй план Так же можно включить в описание: примеры реализации мокапы возможные тексты, или хотя бы длина в количестве символов ссылки на приложения, где вам нравится реализация логики переходов между экранами. Карта экранов Карту стоит показать дизайнеру, как минимум, чтобы он представлял что за чем следует, какие элементы общие, какие имеют единичный характер, а какие элементы вообще уникальны. Дизайнер с опытом сможет подсказать или внести корректировки, чтобы упростить и улучшить UX. Без карты экранов, работая только с элементами и окнами — риск получить неполноценный интерфейс значительно повышается. Кроме того, любому гейм дизайнеру будет полезно для понимая своих идей иметь эту карту не только по UI но и по механикам. Пример плохой карты экранов: Пример хорошей карты экранов: В первом примере есть три основных минуса: мелко и не понятно — дизайнеру крайне не комфортно разбираться в такой структуре, и уж точно прочувствовать все переходы и сделать хороший UI становится проблематичным нет схематических обозначений, позволяющих отследить возможности возвратов между экранами экраны уже изначально включают примеры UI, что при изменениях концепта, стиля или другой доработки придется редактировать всю карту — все ее элементы Во втором примере отсутствуют эти недостатки, и присутствуют дополнительные преимущества: есть возможность отследить все связи, понять насколько загружено каждое из окон формат Иконка + Подпись — хороший способ для дизайнера понять на интуитивном уровне назначение окна. Пример описание задания на UI Для примера опишем задачу для UI/UX дизайнера из 2го примера карты экранов — «Гараж». Описание: Гараж выполнен в виде окна. Окно открывается при нажатии на «Гараж» в Лобби игры. Предполагается, что в этом окне пользователь будет проводить большую часть времени между заездами. Мокап: UI: Заголовок кнопка (х) — закрыть Текст с призывом к действию — «Выбери машину» Слайдер выбора Изображение автомобиля Логотип автомобиля Диаграмма характеристик с иконками и прогрессбарами скорость ускорение управляемость тормоза Название автомобиля стилизированым шрифтом Кнопка действия: «Купить за $$$» или «Выбрать» (если машина уже куплена) (сумма будет колебаться от 1000 до 999 999) Кнопки Влево и Вправо Блок улучшения разделён на 4 секции и вынесен отдельно. иконка улучшения: двигатель, ходовая, трансмиссия, визуальные эффекты кнопка действия «Улучшить» Как работает слайдер: Переключать автомобили можно как кнопками, так и свайпом. При удержании кнопки влево/вправо машины меняются одна за одной, по кругу по принципу барабана. При подгрузке каждого следующего автомобиля динамически изменяются прогрессбары характеристик. Как работает апгрейд: Казуальный апгрейд при нажатии на кнопку «улучшить» — увеличивает на %% одну из характеристик автомобиля. После нажатия, в прогрессбаре характеристик нужный компонент увеличивается динамически и мигает, показывая на сколько автомобиль улучшил свои статы. Внимание: Поле денег остается общим, и его видно с экрана Лобби. Если у пользователя не достаточно денег на покупку автомобиля, сумма денег в кнопке «купить» написана красным цветом. Это простой вариант описания задачи для UI/UX-дизайнера. Он не является образцовым, как минимум потому, что он сделан как пример для статьи, и не имеет отношения к какому либо функционалу. Тем не менее вы можете сравнить его с вашими ТЗ и, возможно, взять что-то на вооружение. Тем, кто ни нашел ничего нового для себя в этом посте — мой поклон. Линки по теме: http://moqups.com — сервис для мокапов http://cacoo.com — сервис для мокапов и построение структур http://www.gliffy.com — интерфейсы, структуры, диаграммы — рекомендую http://balsamiq.com/products/mockups/ — для создания прототипов UI/UX