한국어

케이스 스터디 _

로드 오브 히어로즈
UI · UX
리디자인

날짜

기간

역할

2021.1 - 2021.2

2 Month

UX 디자이너

full

crome1-2

도전

현재 게임의 인터페이스가 갖고 있는 문제점 찾기

게임의 UI 재설계는 이미 존재하는 동일한 콘텐츠를 플레이어에게 더 나은 사용자 경험으로 제공하는 것입니다. 새로운 디자인이 플레이어들의 몰입감을 향상시키고, 초보 플레이어의 빠른 학습과 고수 플레이어의 쾌적한 플레이를 도울 수 있기 바랍니다.

바로 디자인 단계로 진입하기 전 일주일 간 다이어리 스터디를 통해 초보 플레이어로서 게임을 파악했으며, 3명의 고수 플레이어들을 대상으로 사용성 테스트를 진행했습니다. 이를 통해 초보가 겪는 어려움과 고수들의 전반적인 루틴을 파악하고, 주요 피쳐별 컨텍스트 데이터를 수집할 수 있었습니다. 이 두 케이스를 기반으로 문제를 찾고 사용성을 개선했습니다.

과정

loh_process_kor

인사이트

LOH의 대표적인 플레이어 ─ 서브컬쳐와 게임을 좋아하는 창작자

• 20 - 30대 여성이 많으며, 트위터를 통해 비슷한 취미의 사람을 만나고 소통합니다
• 만화/애니 등 서브컬쳐 활동과 게임을 둘 다 좋아합니다

• 지속적으로 특정 캐릭터를 좋아하며 여기에 소비하고, 새로운 취향의 캐릭터를 탐색합니다
• 한국 유명 RPG 온라인 게임들의 캐릭터 디자인은 남성향이라 부담스럽거나 좋아하는 스타일이 없습니다

초보 플레이어

0_journey_expert_KOR

고수 플레이어

0_journey_novice_KOR

초보와 고수 모두에게 플레이에 대한
전략적 고민이 재밌고 중요합니다

• 초보는 캐릭터 턴을 전략적으로 이용하는 수동 플레이에 흥미를 느끼고, 고수는 캐릭터/장비의 육성과 조합을 고민해야 하는 컨텐츠(연합레이드, 오벨리스크)에 재미를 느낍니다

• 전투는 컨텐츠별 사용 영웅/장비 구성이 다르지만, 장비 교체 시 매번 영웅 페이지를 들러야 하므로 매우 불편합니다

• 영웅 페이지는 필요 정보를 제때 찾을 수 없고, 장착이 불편해 전략적 성장에 방해됩니다

• 캐릭터 구매 시 호감보다는 성능과 타 유저 평가가 주요하나 상점에서 찾기 어렵습니다

• 길드 콘텐츠인 연합레이드는 중복 출전을 알 수 없어 전략적 참여가 어렵습니다

플레이어에게 가장 큰 매력포인트는
캐릭터와 세계관입니다

• 캐릭터와 스토리가 매력적이고, 이로 인해 게임을 시작하고, 잔류합니다

• 서브컬쳐 커뮤니티에 게임이 유행해 자연스럽게 전파되고 도움을 얻습니다

• 플레이와 관련 없는 캐릭터/스토리 관련 정보를 알고 싶어합니다

UI는 초보에게 학습이 어렵고
고수에게 불편합니다

• 초보는 간단한 게임 룰을 늦게 이해하고, 목표를 만들거나 지속하기 어려워합니다

• 코어는 오래 사용했으나 빠르게 정보를 찾지 못하거나, 불편하면 사용 빈도가 낮아집니다

어떻게 하면 로드 오브 히어로즈의 모든 플레이어가 게임에 더욱 몰입할 수 있을까요?

게임의 전략 구상에
방해되는
장애물 제거

캐릭터의 매력을
지금보다
더 어필하기

초보는 이해하기 쉽고
고수는 사용이 편리한
인터페이스

1_1XTBi1f5J8sRhrh94wTMTQ

이미지에 보이는 페이지 외에도 자유롭게 갈 수 있습니다

주요 해결점

전투의 전략적 고찰에 집중할 수 있게

gif_heroes_preset2

전투와 연관된 페이지 (월드맵, 지역 정보, 전투 준비, 연합레이드, 콜로세움)

• 프리셋 기능을 추가해 전투 준비 화면 · 영웅페이지에서 접근할 수 있습니다. 자주 활용하는 영웅 · 장비의 다양한 콤비네이션을 저장할 수 있습니다

• 연합레이드에는 중복출전을 명확히 표현해 하루 2번 뿐인 출전 기회를 낭비하지 않고, 연합원들의 레벨과 수준에 따라 전략적으로 참여합니다

• 자동 전투에 캐릭터 턴을 표기하여, 지켜보다가 필요 시 전략적으로 개입해 수동으로 컨트롤합니다

gif_heroes_preset

영웅 페이지

• 스크롤하지 않고 볼 수 있는 영웅의 수가 6명에서 18명으로 늘어났습니다. 또한 초보와 코어에게 중요한 기준이 다르므로, 여러가지로 정렬 가능한 필터를 추가했습니다

• 터치 전 리스트에서 각성 정도 · 속성 · 레벨만 확인할 수 있었으나, 이제는 직업 · 전투력도 확인할 수 있습니다. 모두 코어 유저가 주요하게 생각한 정보입니다. 세부 페이지에서는 장비 · 스킬 상태를 반영한 총 합산 능력치를 볼 수 있습니다. (기존에는 알 수 없었습니다) 장비 · 스킬 각 페이지에서는 구체적인 계산을 보여줍니다

• 유니버스에서만 볼 수 있었던 영웅 유저 평가창을 추가합니다. 편리하게 다양한 정보를 참고하고, 유저 사이 교류가 활발해집니다

• 영웅 성장은 전략적 플레이의 필수 요소로, 프리셋 기능은 Heroes에서도 편집할 수 있습니다

캐릭터 수집과 덕질을 더 쉽게

영웅 페이지

• 캐릭터 덕질은 LOH 플레이어에게 중요합니다. 캐릭터 관련 정보(스킨, 보이스, 영상)를 한 곳에서 보는 것은 덕질을 편하게 하여 더욱 몰입하게 합니다

• 게임 바깥에서는 Twitter에 유저 참여형 이벤트를 개최합니다. 이는 유저 간 자연스러운 홍보와 게임 플레이에 대한 동기부여가 됩니다

gif_heroes_subcul

초보와 코어 모두에게 최적의 UI 경험이 되도록

gif_mainlobby2

메인 로비

• 기존은 탐사 재미와 몰입을 제공하지만, NPC를 통한 컨텐츠 진입 여부를 초반에 알기 어렵고 자주 쓰기에 불편합니다. 따라서 UI로 제공해 콘텐츠 인지와 진입을 수월히 하고, [진입 시 카메라 연출]로 몰입감을 제공합니다. 유대감을 위해 [원하는 스텐딩 캐릭터 설정], [캐릭터 터치 시 반응] 도 좋습니다

• 모든 메뉴를 한 곳에 모아 햄버거 버튼에 제공합니다. 플레이어는 게임 어디서든 모든 컨텐츠에 접근이 가능하고, 유연하게 전환합니다

• 그 외 설정, 왕의 길, 도움말은 초보의 자연스러운 멘탈 모델에 맞춰 유사 항목끼리 묶고, 적절한 이미지를 제공하며, 어려운 표현은 수정했습니다

gif_shop

상점 (일반, 연합, 신비상인), 장비 연성과 제작

• 오른손을 작게 움직여도 많은 정보를 볼 수 있도록, 세로 스크롤을 활용했습니다

• (상점) 기존 메뉴에 뿌려져 있던 다양한 상품을, 처음 봐도 이해하기 쉽고, 오래 사용해도 빠르게 찾을 수 있도록 유사한 것끼리 묶어 새롭게 메뉴를 구성했습니다

• (상점) 유니버스에서만 볼 수 있었던 영웅 유저 평가창을 추가했습니다

• (신비상인) 아이템 리스트 전환 시 목차 푸쉬 알림을 제공해 외부 앱 없이도 게임의 정보를 알 수 있게 합니다

• (장비 연성과 제작) 유사 컨텐츠를 한 화면에서 사용 가능합니다

결과

트위터의 로드 오브 히어로즈 플레이어 대상 설문조사 (21/2/2 - 21/2/8)

• 총 788건의 응답을 받았으며, 불성실 응답을 제거한 725건을 분석했습니다
• 기존 UI 사용 습관으로 인해 불만이 생기기 쉬우나, 전반 만족도가 크게 올랐습니다 (5.64 → 7.23)
• 모든 레벨 구간에서 전반 만족도가 크게 올랐습니다

satis-2

• 메인 로비를 제외한 모든 페이지에서 만족도가 상승했습니다 (접속화면은 변경사항이 적어 제외)
• 연합레이드는 만족도가 가장 낮았다가 가장 높아졌습니다. 플레이어들끼리 레이드 진입이 중복되어 참여 기회가 날아가는 것이
   현재 플레이중인 유저 표시로 해결되었기 때문으로 보입니다
• 메인로비의 만족도는 낮아졌습니다. 플레이어들에게 기존 버전이 인터렉션은 불편하나 몰입감이 좋고 익숙하기 때문으로 보입니다

Graph

배운 점

일과