Небольшой редизайн Apex Legends или исправим проблему вместе
Моя попытка слегка исправить насущную проблему, которая рано или поздно превратится в еще больший хаос, если не заняться ей в ближайшее время. Сделать я попытаюсь это через рассказ и вместе с вами, чтобы у вас сложилось небольшое представление что такое работать UX/UI дизайнером.
Intro
Я не буду пытаться переработать весь интерфейс текущих экранов, потому как ранее писал — сегодня мы решаем только одну проблему, которая бросается в глаза каждый раз как я открываю экран «Выбор игрового режима».
Да, именно в нем сейчас полнейший хаос с точки зрения подачи информации, приоритезации режимов, типографики и других деталей.
В силу того что мы имеем дело с существующим продуктом, мне будет немного проще определить текущие проблемы, а не проблемы будущего и давайте начнем делать это вместе.
Discovery
Основная задача на первом этапе собрать информацию которая у нас есть в наличии и понять, как она работает между собой, какие ограничения имеет и какое в принципе ее количество может быть.
Собрать — в данном кейсе значит просто описать что мы видим, не детально, а стараясь разделять повторяющиеся элементы и их тип.
Так же определиться с проблемами которые сейчас есть на экране,
по нашему мнению:
- Неконсистентность (много разнородных элементов, отсутствуют принципы построения или система)
- Типографика (проблемы с заголовками, подстрочниками, цветами и размерами)
- Важность (приоритезация выдачи данных внутри системы, фокус внимания игрока)
- Перекрытие (при взаимодействии с аренами, блок карт перекрывает блок с ротацией айтемов)
- Термины (Некоторые название используются по 2-3 раза, из-за отсутствия архитектуры и внятной системы)
Контент, с точки зрения содержания экрана «Выбор режима игры»:
- Режим боя
- Тип режима боя
- Описание боя
- Ротация айтемов/предметов
- Ротация карт
- Кастомное событие (допустим Хэллоуин)
- Таймаут для карт
Ок, мы собрали основную информацию которая распологается сейчас на экране, мы не детализировали описание того что есть заголовки, иконки, визуальная дифференциация, мы просто ее собрали (тип информации).
Вроде бы ничего не упустили, значит можем продолжать.
В продолжение нам нужно понять, как эта информация работает между собой? Как Тип режима боя связан с Режимом боя? Относятся ли Ротации карты к Типу? или относятся к Режиму?
Ок, приступим. Для решения нам стоит воспользоваться сторонним сервисом, где мы могли бы сделать майндмап/флоу или карту, как вам будет угодно, на которой отразили бы текущие связи и смогли понять принадлежнность и зависимость контента/информации друг от друга.
Теперь ранее собранный контент/информация расположены в удобном для чтения формате, мы представляем как режимы между собой связаны (тренировка не имеет отношения ни к чему, а в типе БР есть 3 режима боя), есть ли у них общие данные (ротация предметов относится и к БР и к Аренам) и есть ли различающиеся (ротация карт везде своя).
Следующим шагом нам бы следовало детализировать данные относительно каждого типа, то есть как раз написать то, что мы опустили в момент когда собирали типы информации: заголовки, подстрочники, таймеры, описание, карты и тп, все это так же сложить в конкретный майндмап/флоу.
Но давайте мы это опустим и доверимся дизайнеру, а сами приступим к прототипированию.
Design
Ранее мы разобрались с типами информации что у нас есть на экране, теперь представляем какая между ними есть связь и насколько разное информационное наполнение.
Опишем некоторые требования и пояснения к будущему дизайну/прототипу:
- Все 4 типа никак между собой не пересекаются.
- У типов может быть как минимум по 2-3 внутренних режима.
- Данные будут меняться в зависимости от режима.
- Режимов в будущем может быть больше.
- Контент режимов не должен мешать друг-другу.
- Система должна работать на всех экранах.
- Система не должна ломаться при отсутствии данных у режимов.
- Система должна расширяться за счет новых типов, не мешая старым.
- Система должна быть комфортной для новичка.
- Система должна быть комфортной на консолях.
Ок, описанные выше требования будут являться базисом нашего прототипа, а требования мы описали на основе майндмэпа/флоу.
Приступим, как вы уже поняли ранее, мы определили 4 важных на данный момент типа, которые есть на экране «Выбор игрового режима», это: Тренировка, Баттл рояль, Арены и Турниры.
Мы так же определили что у каждого типа могут быть свои режимы и их количество может отличаться.
Помимо разницы в режимах, мы так же не забываем что у нас будут новички и что игрок должен иметь представление, о том что он делает или какой режим собирается выбрать. То есть — у нас будет дополнительная информация.
По итогу мы получили одно из возможных решений, не идеальное, возможно не лучшее, но оно отвечает нашим требованиям которые мы описали ранее.
Решений может быть множество, мы пока остановимся на этом. Потому как мы не работаем с реальными данными, а сами решаем задачу, так как возможно нам было бы удобно.
Следующий шаг — объединить данные которые мы оставили на откуп дизайнеру (детализация относительно названий, заголовков, подстрочников, таймеров и тп), с прототипом выше и посмотреть как эти данные располагаются на прототипе.
Делать мы это начали естественно с одного из самых загруженных экранов, потому как мы пытаемся идти от большего к меньшему, но всегда можно поступить и наоборот.
На основе прототипа мы выстроили некоторую систему вывода информации, которая не меняется при переходе между разделами или при выборе режима боя.
Благодаря построенной системе, любой игрок имеет представление о том, чем отличается один режим от другого, внутри конкретного типа боя и возможно в будущем сможет увидеть свой прогресс.
Теперь наложения информации не происходит, при выборе режима внутри арен, потому как система позволяет закрепить постоянный контент в определенном месте и добавить тот контент, который имеет значение только при выборе режима боя, как в данном случае ротации карт.
Турнир стал равнозначным типом и в будущем может просто обзавестись кастомными настройками, вроде выбора карты, ротации или режима для боя.
Мы не забыли про то, что писали ранее, а конкретно про фокус игрока и демонстрацию нового типа боя, на который мы можем отправлять игрока вместе с новым патчем.
Не забыли мы и про игроков с консолей, ведь в нашем решении для них есть прекрасные шифты, которые позволяют быстро двигаться между табов и крестовиной выбрать нужный режим, без долго и мучительного движения курсором.
Это максимально урезанная версия того, как работает UX/UI дизайнер в повседневной жизни. Здесь упущено множество аспектов, по типу профилей игроков, анализа данных, поиска бест практиса и многих других деталей, просто потому что это все было бы сложно уместить развернуто в одной заметке и это является повседневной жизнью и работой дизайнера.
Данное решение например было реализовано за 1-3 часа и абсолютно точно не является его лучшим решением. Возможно таких итераций могло бы быть минимум 3-4.
Я прекрасно отдаю себе отчет, что найдутся люди которые начнут говорить «но ты же увеличил количество кликов до +1» и будут правы, при этом я исправил множество других проблем, а жизнь консольщиков сделал проще, ведь двигать курсором не придется, когда ты можешь использовать шифты.
Например если бы у нас была аналитика, то мы могли увидеть что игроки очень редко меняют режим боя, а если и делают это, то в пределах типа. И мы могли бы внести это в майндмэп/флоу и подкрепили текущую реализацию.
Пост скорее как возможность поделиться и немного рассказать вам и может быть показать, какого это работать над интерфейсами которыми вы пользуетесь ежедневно.
Посмотреть ролик с интерфейсом в человеческом FULL HD без рекламы и СМС можно по ссылке
У Sony получилась очень насыщенная презентация.
Действие развернётся на улицах современного разрушенного Лондона.
по UX один лишний клик добавился (глубина иерархи увеличилась)
чтобы узнать на каком режиме какая карта сейчас идет, придется всегда пролистывать все режимы.
а так неплохой результат.
Про это написано в посте, это не идеальное и не лучшее решение. Это лишь демонстрация.
Решений может быть множество, сделать 5 одинаковых квадратиков и оставить все как есть (уместится все, никаких лишних кликов), но это все должно упираться в задачу.
Комментарий удалён модератором
Ты правильно понял что читать ты не умеешь. В этом я уверен.
Хотя зачем я буду тебе объяснять что-то если ты не уподобился статью прочесть, правильно?
Всего доброго.
Честно, так и не понял почему вы решили, что с текущим экраном выбора режимов что-то не так и какую задачу в итоге пытались решить.
тоже не ясно с чего так взяли вообще.
Попробуйте перечитать пост, может со второго раза поймете.