마우스 포인터는 현대 인터페이스의 기본적인 부분이 된 오랜 역사를 가지고 있습니다. Windows 및 Mac 시스템 포인터는 지난 수십 년 동안 거의 변경되지 않았습니다. 반면에 비디오 게임은 포인터를 재해석한 역사가 있습니다. 최신 데스크탑 비디오 게임의 높은 비율은 경험을 위해 브랜드화된 맞춤형 포인터를 사용합니다. 그러나 Roblox와 같은 OS와 유사한 인터페이스에서도 작동하는 비디오 게임 포인터를 설계하려면 무엇이 필요할까요? Roblox는 사용자가 몰입형 가상 경험을 만들고 탐색할 수 있는 플랫폼입니다. 게임과 경험 사이의 원활한 메타버스 역할을 하기 때문에 Roblox 앱은 제가 작업하게 된 독특한 UX 과제를 제시했습니다.
나는 "커서"와 "포인터"라는 용어가 같은 의미로 사용되는 것을 보았습니다. 저는 주로 입력 필드와 명령 인터페이스에 사용되는 텍스트 커서와 구별하기 위해 "포인터"를 선택할 것입니다.
문제
새로운 Roblox 데스크톱 클라이언트가 진행 중이지만 앱에 중요한 UX 요소인 마우스 상태 변경이 누락되었습니다. 대부분의 데스크탑 게임에서 브라우징과 플레이가 별개의 경험인 것과 달리, 새로운 Roblox 데스크탑 클라이언트를 사용하면 사용자가 단일 창에서 원활하게 탐색하고 플레이할 수 있습니다. 그러나 마우스 포인터 경험은 작업이 필요했습니다. "Link Select" 또는 "Hover" 상태의 시각적 어포던스가 좋지 않았습니다. 그리고 사용자가 텍스트 입력 필드 위로 마우스를 가져갈 때 나타나는 "텍스트 선택" 상태가 완전히 누락되었습니다. 이것은 기본, 링크(호버) 및 텍스트라는 마우스 포인터 XNUMX요소를 재설계하고 개선할 수 있는 기회였습니다.
운영 체제와 비디오 게임 모두에 대한 포인터를 설계하는 것은 사용 사례가 다르기 때문에 어렵습니다. OS 커서는 중간 색상, 가시성을 위해 충분히 높은 명암비, 일상적인 사용에 충분히 실용적이고 눈의 피로를 유발하지 않을 정도로 요란하지 않아야 합니다. 비디오 게임 커서는 일반적으로 몰입형 경험을 제공하기 위한 브랜드의 모양과 느낌에 해당하기 때문에 이러한 규칙을 무시할 수 있습니다. 그러나 이 두 속성을 모두 결합하는 성공적인 방법이 있습니까?
Roblox의 2012년 마우스 포인터. 텍스트 포인터가 없어서 대신 호버 포인터를 사용했습니다.
Roblox의 2012 포인터를 살펴보십시오. 중간 회색조 색상을 사용하여 올바른 방향으로 진행했습니다. 그러나 호버 상태는 검은색 포인터를 사용하여 Mac 컴퓨터의 새로운 사용자를 혼란스럽게 했습니다. 또 다른 실수는 화살표 어깨가 화살표 면 축 대신 수직 축을 사용하여 그려졌다는 것입니다. 이는 화살표가 약 6.8% 비대칭임을 의미합니다.
기본 포인터는 화살표 면 축을 따라 대칭이 아닙니다.
보고 느끼다
여기에 재미있는 부분이 있습니다. 데스크탑용 비디오 게임 포인터의 현재 동향은 무엇입니까? 가장 인기 있는 게임 포인터를 모아 그래픽과 실용성에 따라 순위를 매겼습니다. 대부분의 게임 포인터는 브랜드 그래픽의 방향을 선택합니다. Roblox 포인터는 실용성을 최대화하면서 일반 OS 포인터보다 약간 더 그래픽이 필요합니다.
현재 최고의 데스크탑 게임의 마우스 포인터. 당신이 인식할 수 있는 얼마나 많은 참조하십시오!
Roblox 포인터는 모든 경험 장르에서 적절하게 보일 뿐만 아니라 우리의 디자인 시스템인 uiBlox를 보완해야 합니다. uiBlox 디자인 시스템은 현재 기본 어두운 테마에서 #FFFFFF 아이콘을 사용합니다. 우리 스타일은 2px 반경의 곡선과 각 아이콘에 3:1의 원형 대 정사각형 모서리의 대략적인 비율을 사용합니다. 가리키는 손 커서의 경우 멋진 디자이너 중 한 명이 그린 새로운 이모티콘 아트워크에서 영감을 얻었습니다. 에이미 리우.
왼쪽: Roblox의 아이콘 스타일은 선명도가 거의 없는 대부분 둥근 모서리를 사용합니다. 오른쪽: Amy Liu가 디자인한 Roblox의 이모티콘.
모두 합쳐놓 넣기
다른 디자이너들로부터 피드백을 받은 후 Roblox용 최종 포인터 세트를 개발했습니다. 새로운 기본 포인터는 이제 대칭이며 가시성을 위해 화살촉을 추가합니다. 그림자는 3D 환경에서 현대성과 깊이를 제공합니다. 새 호버 포인터는 기본 포인터와 모양을 구분하여 접근성을 높입니다. 마지막으로 텍스트 포인터의 모양이 #FFFFFF 1px 커서로 변경되어 어두운 테마에 대비가 됩니다. 어두운 선은 밝은 배경을 사용하여 밝은 테마 및 기타 Roblox 경험에 대한 가시성을 만듭니다.
Roblox의 새로운 2021 마우스 포인터.
재설계는 사용자 피드백만큼 효과적입니다. 우리는 215명의 Roblox 개발자를 대상으로 이 새로운 커서에 대한 의견을 조사했습니다. 대다수가 커서가 미학과 사용성 모두에서 개선되었다는 데 동의했습니다. 가장 흥미로운 통계는 텍스트 포인터에 대한 개발자의 응답입니다. 전체적 개선에 동의한다는 무려 89%의 응답자 중 74%가 그 진술에 강력하게 동의했습니다. 사용자가 이러한 UX 개선 사항에 대해 긍정적인 반응을 보인다는 사실을 아는 것은 경험이 없는 다른 UI 요소뿐만 아니라 나머지 포인터 세트를 개발할 때 도움이 될 것입니다.
대다수의 Roblox 개발자는 새로운 포인터가 사용성과 미학의 개선이라는 데 동의하거나 강력하게 동의합니다.
Roblox가 게임을 넘어 커뮤니케이션, 소셜 및 트랜잭션 플랫폼으로 확장함에 따라 제품의 이 한 가지 측면은 사용자가 애플리케이션과 경험 사이를 탐색할 때 안내하는 데 도움이 됩니다. 우리의 희망은 이것이 지금부터 디지털 메타버스의 일반적인 표준이 되는 것입니다!
Roblox 디자인 팀에 합류하여 이와 같은 문제를 해결하는 데 관심이 있으십니까? 에서 확인하세요. corp.roblox.com/careers/ 최신 기회를 위해.
Derek Wong은 Roblox의 비주얼 디자이너입니다. 그는 Roblox 웹사이트와 데스크톱 앱의 사용자 인터페이스를 형성하는 Roblox의 디자인 시스템에서 일하고 있습니다. Roblox Corporation이나 이 블로그는 어떤 회사나 서비스도 보증하거나 지원하지 않습니다. 또한 이 블로그에 포함된 정보의 정확성, 신뢰성 또는 완전성에 대해 어떠한 보증이나 약속도 하지 않습니다.
©2021 Roblox Corporation. Roblox, Roblox 로고 및 Powering Imagination은 미국 및 기타 국가에서 등록 및 미등록 상표입니다.
