본문 바로가기

게임 UX 인사이트

한정된 공간을 활용하는 법, 검색 UI 디자인 - 레전드 오브 룬테라

카드 수집품 - 레전드 오브 룬테라

<레전드 오브 룬테라>의 카드 수집품 메뉴는 필터검색 기능을 제공하여, 수많은 카드 목록 속에서 사용자가 원하는 카드의 정보를 빠르게 탐색하도록 돕고 있습니다. 여기에서 눈여겨볼 점은 검색어를 입력하는 검색 창(텍스트 필드)을 바깥으로 꺼내놓지 않고 숨겨둔 것입니다.

 

돋보기 버튼을 누르면 검색어를 입력할 수 있는 텍스트 필드가 등장합니다 - 레전드 오브 룬테라

한정된 화면 공간에서 제공할 기능과 정보는 많습니다. 모든 정보를 한 번에 보여준다면 사용자는 정보들을 파악하고 그 안에서 필요한 것을 찾는데 더 많은 시간과 인지 노력을 쏟게 됩니다. 때문에 사용자의 사용 패턴을 고려하여 정보들의 우선순위를 세우고 중요도에 따라 제공하여, 사용자의 인지 부하를 줄여야 합니다.

 

<레전드 오브 룬테라>는 카드 수집 메뉴에서 검색 창을 숨겨놓았습니다. 사용자가 검색 기능을 사용하고자 할 때, 돋보기 버튼을 누르면 검색어를 입력할 수 있는 텍스트 필드가 필터 ui 위로 등장합니다. 이렇게 자주 사용하지 않는 기능을 숨겨놓고 사용할 때만 노출하면 화면의 복잡도를 감소하고, 레이아웃을 단순화하는 데 도움이 됩니다. 이는 더 중요한 기능과 정보에 더욱 집중할 수 있는 환경을 만들어주죠.

 

 

상세한 필터를 제공합니다 - 레전드 오브 룬테라

검색이 주요한 기능인 포털 서비스나, 검색을 자주 사용하는 게임 속 친구 추가와 같은 컨텐츠에서 검색창을 숨겨놓는다면 사용자가 취해야 할 행동 과정이 많아져 불편함을 야기할 것입니다. 그러나 <레전드 오브 룬테라>의 카드 수집품 메뉴에선 검색 기능의 비중이 높지 않습니다. 때문에 사용자가 일일이 타이핑을 해야 하는 불편함이 있는 검색 기능에 앞서 우선적으로 상세한 필터 기능 ui 을 제공하여, 신속하고 편리한 정보 탐색을 유도하고 있습니다.

 

 

iOS 16 - 달력 검색

대신 검색은 돋보기 모양의 아이콘 버튼만을 먼저 표시하고, 사용자의 선택에 따라 상세한 기능을 확장하여 노출하죠. 이것을 구글 머티리얼 디자인에선 확장 가능한 검색(Expandable search)라고 합니다. 이는 우리가 평소 사용하는 서비스에서도 쉽게 찾아볼 수 있습니다.

 

덜 중요한 정보를 숨겨두었다가 사용자가 필요로 할 때 노출하는 방법은 검색 뿐 아니라, 다른 곳에도 활용할 수 있습니다. 한정된 공간을 활용하고 더 나은 사용자 경험을 제공하기 위해서, 화면 속 정보들의 위계를 세운 후 덜 중요한 기능이나 정보가 있다면 적용해보세요.

 

 


참고하세요! 구글 Material Design의 검색 디자인 가이드

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

 

레전드 오브 룬테라의 또 다른 UX 디자인 분석

 

게임 속 텍스트 필드 UI 디자인 사례 - 원신, 레전드 오브 룬테라, 쿠키런킹덤

사용자가 글자를 입력하는 박스 모양의 공간을 '텍스트 필드'라고 합니다. 게임에서 닉네임을 만들 때 흔히 마주치지요. 게임 속 이름은 무한의 길이를 가질 수 없기 때문에, 최대 글자 수 제한

prettygoodsun.tistory.com

반응형