본문 바로가기
UX. UI Study

좋아서 하는 UX/UI분석 -롤 아이템(상점) 편

by cole.jo 2020. 12. 30.

 

깡!깡!깡!깡!

 

안녕하세요 여러분!

 

저는 롤을 잘하지는 않지만

시간 남을 때 친구들과 하는 것을 좋아한답니다!

(이자는 아이언에서 막 브론즈로 올라왔다)

 

그러다가 오랜만에 롤을 접속하니 아이템 창이

확 바뀌었는데요.

21년 프리시즌을 맞이하여 대개편 했다고 합니다.

 

바로 아래처럼요!

추천창 (좌 구버전 / 우 신버전)
모든아이템 보기창 (좌 구버전/ 우 신버전)

 

흠... 너무나 혼란스러운데....

변화에 익숙하지 않아서 혼란스러운 건가..?

저만 그런 건가 싶어서

 

주위에 롤을 같이 자주 하는 친구들에게 물어봤습니다.

 

극혐을 표현하는 친구 1&2

 

 

저는 단순히 좀.. 불편하다 정도였는데

 

게임을 접을 정도로 불편함을 느낀 친구들이 많았습니다 

(물론 그들은 다시 시작하긴 했다)

 

게임을 하기 싫을 정도의 불편을 느꼈다는 것은

단순히 새로운 인터페이스에 적응하지 못함에서 발생하는 어려움은 아닌 듯합니다.

 

롤 대표 온라인 커뮤니티 '롤 인벤' 반응도 부정적인데요

'롤 아이템 창 패치'만 검색해도 나오는 글은...

 

1페이지 캡쳐했는데..욕이나와서 당황ㅋㅋㅋㅋㅋㅋ

1페이지에서 바로 나온 글에서 욕설난뭌ㅋㅋㅋㅋㅋㅋㅋㅋ

사태의 심각성(?)을 알리기 위해 욕을 그대로 캡처했습니다.

 

 

우선 욕은 흐린 눈으로 이 정도의 부정적인 반응이 있는 것을 알아보고

롤 인벤은 그만 알아보겠습니다.

(빠른 마무리)

 

제가 그래서 이번 좋아서 하는 UX/UI 분석에는 롤 아이템 창을 개선해보려고 하는데요!

 

사람들이 제시한 문제점과 제가 생각한 문제점을 정의한 뒤

제가 생각한 해결 방안을 함께 보겠습니다!

 

1. 어지러워 너무 많은 픽토그램.... 그리고 이해하기 힘든 분류체계


상단의 7개의 픽토그램, 좌측에 14개의 픽토그램

총 21개의 픽토그램이 아이템 창을 복잡하게 장식하고 있답니다.

저게 다 뭔뜻이여..

상단 캐릭터 특성별 픽토그램은 7개니까 뭐 보다 보면 외워진다고 쳐도

좌측 아이템 특성별 픽토그램은 당체 외워지기가 쉽지 않습니다 ㅜㅜ

 

복잡함을 줄이기 위해 글을 최대한 배제한다고 하는데..

화장실 남녀 표시 같은 누구나 아는 쉬운 픽토그램도 아니고

복잡한 다수의 픽토그램보다는 오히려 마이크로 카피가 더욱 직관적일 수 있겠죠. 

 

 

 

 

마법템 왜안눌려?

그리고 위의 이미지를 보면 

좌측 아이템 특성별 픽토그램 중 마법 관련된 아이템은 선택이 안되는 걸 볼 수 있습니다.

 


그 많은 치명타템 어디갔냐고

 또한 왼쪽의 '치명타' 픽토그램을 눌러도 하나의 아이템밖에 안 나오죠?

저는 이게 왜 안 눌리며.. 그 많은 치명타 아이템은 어디 갔나?

한참 찾았습니다

 

알고 보니 왼쪽 아이템 특성별 분류체계 상단 캐릭터 특성별 분류체계 하위 카테고리 개념으로

상단 캐릭터의 특성 안에서 가능한 아이템만 보이는 것입니다.

(말로 설명도 어렵네요... 즉 일라오이를 예를 들면 

일라오이는 전사라 마법사 템 안보여주고 전사가 자주 쓰는 치명타 템만 보여준다는 소리)

 

 

그러면 상위 하위 개념을 좀 더 명확하게 보여주면 이해가 될 텐데...

그걸 안 보여 줘서 전체 보기를 눌러야만 보인답니다.

 

 

 

2. 전설급 아이템은 하나만 살 수 있는 거 언제! 누가 알려줬어? 가이드 부족


이번에 롤의 아이템들의 등급이 

서사급, 전설급, 신화급으로 등급으로 3단계로 나눠지게 되었습니다.

 

여기서 중요한 것은 신화급 아이템은 단 하나만 구입 가능하다는 것입니다.

저는 이걸 모르고 신화급 아이템 1개를 산 뒤에

나머지 하나 사려고 템트리를 맞추다가 망한 경험이... 이러한 설명은

신화급은 하나만 구입 가능하다는 설명은 어디에도 없습니다.

 

아이템 기본설명에도 없는 신화급하나만 구매가능하다는 사실

 

 

아무리 롤이 고인물이 많다고 해도..

이건 신규 유저는 전혀 배려를 안 한 상황입니다.

 

 

 

또한 신화급 아이템의 영향이 모든 전설급 아이템에 영향을 미치게 되는데요

즉 신화급 아이템의 능력에 공격 속도 증가가 있다면 보유한 전설급 아이템 모두 공격속도가 증가하게 됩니다.

 

위 글처럼 신화급 아이템을 구매하면 전설급 아래의 

다른 모든 전설급 아이템의 공격속도 10 

가 보이시죠? 이게 오른쪽의 아이템에 모두 해당된다는 말인데 저는 이걸 처음에 몰랐습니다.

 

이러한 사항은 바쁘디 바쁜 롤 전장상황에서

아이템 설명 글을 일일이 읽지 않으면 모르는 부분입니다..

 

 

 

 

 

3. 중복선택 안 하고 싶은데 자꾸 중복선택으로 만들어


그리고 좌측 아이템 특성별 분류체계는 상단 캐릭터 분류체계와 달리

강제 다중 선택이 되는데요?

 

공격력 템을 사기 위해 공격력을 누른 뒤,

 

"아 아니다 공속 템을 사야지... "

 

하고 공격 속도를 누르면 

 

짜잔! 아래 사진처럼 공격력과 공속을 모두 가진 템을 보여줍니다.

짜잔 공격력과 공속을 모두 가진템이요!

그렇기 때문에 공격 속도만 있는 아이템을 보기 위해서는

'공격력'을 눌러 해제하고 '공격 속도'를 다시 눌러야 하는 추가 작업이 요구됩니다.

 

한번 더 누르는 게 어때서?

할 수 도 있지만 이러한 사소한 불필요한 행동 하나하나가 쌓여서

불편하고 헷갈리는 UX를 만들게 됩니다.

 

 

 

 

그래서

이렇게 바꿔봤습니다!

 

 

롤 아이템(상첨)창 개편안 _최종_진짜최종

 

그럼 어떻게 달라졌는지 하나하나 보겠습니다!

 

 

1. 명확한 분류체계와 읽기 쉬운 시각적 흐름

 

모호했던 기존의 상위 하위 개념의 분류를

인기 템 안에 하위 카테고리인 아이템 특성별이 있다는 것을 

시각적으로 보다 명확하게 표기하였습니다.

 

추가적으로!상단 ★은 인기 아이템을 의미하는 것인데.이것은 챔피언마다 인기 템을 나타내어 항상 바뀌는 페이지입니다.

이를 보다 명확하게 하기 위해 챔피언 얼굴을 넣어봤습니다.

 

아이템 특성별 픽토그램 옆에 작은 설명을 넣어 보다 찾기 쉽게 만들었습니다.


기존 캐릭터 특성별 픽토그램과 아이템 특성별 픽토그램을 확인하기 위해서는

상단에서 가로로 읽고, 좌측에서 세로로 읽고 시선이 2번 이동하여 다소 불편했는데요?

 

이를 좌측 세로 배열로 변경하여

한 번에 확인할 수 있도록 편의성을 높였습니다.

 

 

2. 단일 선택도 쉽고, 중복선택 쉽게 가능하게

 

'공격력', '적중 효과'등 글을 누를 때에는 단일 선택이 되고,

 

'공격력', '적중 효과'등의 글의 앞 원형 속 아이콘을 누를 때에는 중복 선택이 되도록

변경하여 자신이 원하는 아이템을 

 

한 번의 클릭으로 보다 빠르게 탐색할 수 있도록 바꿔봤습니다.

 

 

 

'공격력'이란 글을 눌러서 공격력 템만 보기
원속의 아이콘을 눌러 공격력과 적중효과 중복선택 


 

 

 

 

신화급 이름 옆에 신화급 아이템은 하나만 구입 가능하다는 마이크로 카피를 넣어

신규 유저도 당황하지 않도록 안내를 하였으며

신화급 아이템 1개 구입시 다른 아이템을 흐리게 만들어 

구매할 수 없게 오류방지를 해두었습니다.

 

또한 전설급 옆에는 해당 신화급으로 모든 전설급에 스킬 가속이 발생한다는 것을 표기했습니다!

 

 


 

 

 

후 이렇게 자료 조사하고

개선방안 고안하고 디자인하니 이틀이란 시간을 모두 투자하게 되었네요.

(시작은 재미였으나 끝은 창대했다)  

 

바뀐 화면이 어떤가요? 안 바뀔 거 알지만 재미로 한번 해보았는데

혹시 추가됐으면 하는 기능, 불편했던 게 있으면 댓글로 남겨주세요 ㅎㅎ

 

 

그럼 마지막으로 비포 애프터 비교샷으로

글 마무리하겠습니다.

 

감사합니다 :)

 

현 아이템창

 

개선해본 아이템창