이번 달에 많은 기대를 모았던 발표를 앞두고, Google은 실수로 회사의 최신 디자인 방향인 Material 3 Expressive Design에 대한 사고방식과 연구 내용을 자세히 설명하는 블로그 게시물을 게시했습니다.
전체 기사는 블로그에 보관되었습니다. 뒤로 기계 (보관된 버전에 표시되지 않은 이미지는 아래에 나와 있습니다.) 주요 내용은 다음과 같습니다.
Material 3 Expressive는 구글이 "대담한 새로운 디자인 방향"이라고 부르는 것을 나타내며, "구글 디자인 시스템 역사상 가장 많은 연구가 이루어진 업데이트"입니다. 구글은 앱이 "깔끔하고" "지루한" 디자인을 넘어 사람들과 감성적으로 연결되는 인터페이스를 구축하는 것을 목표로 합니다. 정식 명칭 외에도 "M3 Expressive" 또는 간단히 "표현력 있는 디자인"이라고도 합니다.
Material 3 Expressive는 연구를 통해 탄생했습니다. 데이터에 디자인 결정을 위임한 41 Shades of Blue 방식이 아니라 연구, 디자인, 엔지니어링을 포함하는 협업적 탐구를 통해 탄생했습니다.
2022년, 머티리얼 디자인 팀은 "왜 이 모든 앱이 이렇게 비슷해 보일까? 지루할까? 감정을 더 표현할 여지가 있지 않을까?"라는 의문을 품기 시작했습니다.
지난 46년 동안 저희는 이러한 대화의 함의를 탐구하며, 수십 차례의 디자인과 연구를 반복하여 머티리얼 디자인의 다음 진화 방향을 찾아왔습니다. 전 세계 18000명 이상의 참여자와 수백 가지 디자인을 포함한 3건의 개별 연구를 통해, 저희는 아름답고 사용성이 뛰어난 시스템을 세밀하게 개선해 왔습니다. Material XNUMX Expressive 원칙은 탄탄한 연구에 기반하고 기존 사용성 모범 사례를 기반으로 구축되었습니다. 따라서 디자이너들은 이러한 새로운 구성 요소와 원칙을 자신 있게 사용할 수 있으며, 사용하기 쉽고 사람들이 공감할 수 있는 무언가를 만들고 있다는 확신을 가질 수 있습니다.
이러한 연구에는 다음이 포함되었습니다.
- 눈 추적: 사용자가 어디에 주의를 집중하는지 분석합니다. 시선 추적은 사용자 행동을 이해하고 디자인 개선 영역을 파악하는 데 강력한 도구입니다.
- 설문조사 및 포커스 그룹: 다양한 디자인에 대한 감정적 반응을 측정합니다. 이러한 방법은 사용자가 디자인을 감정적으로 어떻게 인식하는지 이해하는 데 도움이 됩니다.
- 실험: 감정과 선호도 수집. 실험은 사용자가 선호하는 디자인을 파악하고 다양한 요소가 사용자 경험에 미치는 영향을 평가하는 데 필수적입니다.
- 사용의 용이성: 참여자가 인터페이스를 얼마나 빨리 이해하고 사용하는지 파악합니다. 사용성은 모든 디자인의 성공을 측정하는 중요한 척도이며, 사용자가 목표를 얼마나 쉽고 효율적으로 달성할 수 있는지를 결정합니다.
구글은 "표현적 디자인의 핵심은 색상, 형태, 볼륨, 움직임, 그리고 콘테인먼트의 활용입니다."라고 말합니다. 또한, "Material 3 Expressive는 형태와 색상을 대담하게 사용하여 즐거운 사용자 경험을 창출하는 것이 특징입니다." 대담한 색상과 형태의 사용은 매력적이고 기억에 남는 사용자 경험을 제공하는 것을 목표로 하는 Material Design 3 Expressive의 핵심 요소입니다.
이러한 디자인 측면은 인터페이스의 중요한 요소에 주의를 환기시켜 제품을 더욱 사용자 친화적으로 만드는 데에도 필수적입니다. 예를 들어, 주요 동작을 강조하고 유사한 요소를 그룹화하는 것이 있습니다. 이를 통해 사용자 경험이 향상되고 더욱 원활하고 효율적으로 작업할 수 있습니다.
플로팅 툴바는 Material 3 Expressive에서 파생된 구성 요소입니다. 컨셉 디자인에서는 화면 전체 너비를 차지하지 않는 알약 모양의 하단 바를 볼 수 있습니다. 결과적으로 배경의 작은 부분이 드러나고, 엣지 투 엣지 디자인이 더욱 두드러집니다. 이는 현재 Google Chat에서 제공되는 기능과 유사합니다.
Google 조사에 따르면 "표현력이 풍부한 디자인은 사용하기 쉽고" 사용자가 "각 화면에서 주요 작업을 빠르게 찾고 더 빠르게 탐색하는 데 도움이 됩니다."
… 참가자들은 주요 UI 요소를 최대 4배 더 빠르게 식별할 수 있었으며, 이는 이러한 디자인이 사용자의 주의를 화면에서 가장 중요한 부분으로 유도한다는 것을 보여줍니다. 저희는 많은 앱들이 이러한 수준의 개선을 달성하는 것을 보았으며, 이는 단순히 시선 고정 시간을 넘어서는 것입니다. 또한 테스트한 다양한 디자인에서 주요 동작을 클릭하는 데 걸리는 시간이 몇 초 단축되는 것을 확인했습니다.
다시 한번 강조하지만, 이는 단지 컨셉 디자인일 뿐이며 실제 제품을 반영한 것은 아니라는 점을 강조하는 것이 중요합니다. (더 확실한 정보를 위해, 유출된 렌더링 이미지가 공개되었습니다.) Google 시계 재설계 (주말 동안.) 하지만 아래의 "이전" 예시는 분명히 현재의 Gmail 사용자 인터페이스입니다.
아래 이메일 앱 사례 연구 화면과 같은 특정 디자인을 살펴보면 표현적 디자인 원칙의 이점을 직접적으로 확인할 수 있습니다. 예를 들어, 새로운 디자인의 "보내기" 버튼은 더 크고 키보드 바로 위에 위치하며, 시선을 끌기 위해 보조 색상을 사용합니다. 이는 작은 "보내기" 버튼을 화면 상단 툴바에 배치하고 파일 첨부와 같은 다른 컨트롤을 배치한 비표현적 디자인과 비교할 수 있습니다. 참가자들에게 앱에서 "이메일 보내기"를 요청했을 때, 표현적 디자인에서 버튼을 보는 속도가 4배 더 빨랐습니다. 이는 사용자 경험 개선에 있어 표현적 디자인의 중요성을 보여줍니다.
다른 컨셉 디자인에서는 시계 앱, 음성 입력, 사진 편집기, 결제 및 지갑이 표시됩니다.
새로운 UI 도입의 성공 여부는 구현이 얼마나 쉬운지, 그리고 M3가 얼마나 원활하게 업데이트되는지에 달려 있습니다. Jetpack Compose는 요즘 훨씬 나은 상황에 있는 것 같아서 조심스럽게 낙관하고 있습니다.
한편, 연구와 사용자 테스트 결과 "모든 연령대의 사람들이 iOS의 인간 사용자 인터페이스 가이드라인을 따르는 비표현적 디자인보다 잘 구현된 표현적 디자인을 훨씬 선호한다"는 사실이 밝혀졌습니다.
Google은 "표현력이 풍부한 디자인은 특히 브랜드 매력에 좋다"는 것을 발견했습니다. "저희 조사에 따르면 M3 표현력이 풍부한 디자인을 사용하면 사람들이 제품을 얼마나 '멋지게' 생각하는지 더 잘 알 수 있었습니다."
- …우리는 하위 문화에 대한 인식이 32% 증가한 것을 발견했는데, 이는 표현적인 디자인이 브랜드를 더욱 관련성 있고 "정보에 정통한" 것처럼 보이게 한다는 것을 시사합니다.
- …신선도가 34% 증가하여 브랜드가 신선하고 혁신적으로 보입니다.
- …반항심이 30%나 증가했는데, 이는 표현적 디자인이 브랜드를 대담하고 혁신적인 리더로 자리매김하고, 기존 틀에서 벗어날 준비가 되어 있음을 나타냅니다.
댓글이 닫혀있다.