brunch

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 우잉 Sep 20. 2022

테슬라의 터치스크린은 정말로 안전할까?

닐슨 노먼 그룹 모바일 UX 스터디 (5)

들어가기에 앞서….

이 아티클은 닐슨 노먼 그룹의 <모바일 UX : 학습 가이드>의 '스마트폰 이외의 다른 장치(Other Devices Beyond the Smartphone)' 카테고리 'Tesla의 터치스크린 UI : 자동차 대시보드 사용자 인터페이스 사례 연구(Tesla’s Touchscreen UI: A Case Study of Car-Dashboard User Interface)' 기사를 요약한 내용입니다.

Tesla’s Touchscreen UI: A Case Study of Car-Dashboard User Interface

Vehicle controls should be easily accessible and require minimum attention from drivers, while driving-related information should be displayed clearly and understandably.

www.nngroup.com

(기사가 2019년 5월에 작성되었기 때문에 내용 및 수치가 오늘날과 다를 수 있음을 미리 말씀드립니다.)

1990년대 사람을 타임머신으로 데려와 2020년대에 출시한 차량을 운전하게 한다면 어떤 반응일까요? 아마 운전을 보조하는 다양하고 편리한 기능(ex. 후방 카메라, 장애물 센서, 자동 주차, 자율 주행 등)에 매우 놀랄 것입니다. 최근 출시되는 차량에는 이러한 기능을 시대 흐름에 맞춰 터치스크린 대시보드로 지원하는 추세인데요. 그렇다면 이러한 기능들이 주행 중 안전하게 작동할 수 있도록 화면 설계가 되어 있을까요? 이를 확인하기 위해 닐슨 노먼 그룹은 테슬라 모델 S의 터치스크린 대시보드 UI를 연구했습니다. 그 결과 운전 편의를 위한 기능들이 인간 중심적 설계가 부족하다고 지적했는데요. 이에 대해 자세히 알아보도록 하겠습니다.(해당 연구는 테슬라 OS v9.0을 기준으로 진행되었습니다)

1. 아쉬운 점

1) 대시보드, 난 너만 바라봐

테슬라 모델 S 차량의 15인치 터치스크린 대시보드 (이미지 : Tesla)

테슬라 차량에는 물리적인 컨트롤이 거의 없습니다. 와이퍼 및 조명과 같은 기능은 핸들에 있지만 그 외 후방 카메라, 미디어 플레이어, 실내 온도 조절 장치와 같은 보조 기능은 운전석과 조수석 사이에 위치한 터치스크린 대시보드에 존재합니다. 이 화면은 15인치 혹은 17인치로 아이패드 면적의 3배가 되는 꽤 큰 화면이지만 운전과 관련된 모든 것을 보여줄 수는 없습니다. 이를 위해 테슬라는 대시보드 하단에 기능 확장이 가능한 컨트롤 메뉴를 배치했습니다.

현대 산타페 차량의 물리적인 대시보드 (이미지 : TopGear)

그러나 터치스크린 대시보드는 기존의 물리적인 대시보드와 달리 햅틱 피드백이 없다는 큰 단점이 있습니다. 따라서 버튼이 제대로 작동했는지 알기 위해서는 화면에 시선이 머물러야 합니다. 물리적인 대시보드를 사용하면 작동이 완료된 상태를 쉽게 학습하고 인지할 수 있어 버튼에 시선이 머무르지 않아도 되지만(ex. 악보를 읽으면서 피아노를 연주하는 것, 모니터를 보면서 키보드를 타이핑하는 것) 터치스크린 대시보드의 경우 그렇지 못하기 때문입니다. 또한 하위 기능이 상위 메뉴에 숨겨져 있는 경우 이를 선택하기 위해 추가적인 상호작용이 필요하므로 더 많은 주의를 기울여야 합니다. 여기서 상호작용하는 시간은 철저히 도로를 무시하는 시간이기 때문에 위험에 노출될 확률이 높아집니다.

대시보드 하단의 컨트롤 메뉴(왼), 화살표 아이콘을 탭 하면 하위 메뉴 노출(오) (이미지 : NNgroup)

2) 전 원피스 루피가 아닌 걸요

오른손과 대시보드 하단 컨트롤의 거리 (이미지 : NNgroup)

피츠의 법칙에 따르면 손가락이 목표물에 도달하는 시간은 목표물의 크기와 목표물의 거리에 따라 다릅니다. 따라서 핸들로부터 멀리 배치된 대시보드 컨트롤은 작동하는데 시간이 오래 걸립니다. 대시보드 컨트롤의 최적의 위치는 운전자의 오른손으로부터 가장 가까운 화면 왼쪽의 가장자리입니다. 그러나 테슬라의 대시보드 컨트롤은 화면 맨 아래에 위치하고 있습니다.(이는 가장 최악의 위치인 화면 오른쪽 가장자리 다음 위치입니다) 이는 운전자의 시선이 앞 유리에서 하단 컨트롤로 이동하는데 상대적으로 긴 시간이 걸린다는 것을 의미합니다. 또한 역으로 터치스크린과 상호작용할 때 도로의 예기치 못한 상황에 대비할 시간이 줄어듦을 의미합니다.

차량 옵션 메뉴와 후방 카메라 메뉴 (이미지 : CleanTechnica)

대시보드 컨트롤 메뉴의 배치도 시간이 오래 걸리는 것에 영향을 끼칩니다. 첫 번째로 가장 왼쪽에 위치한 차량 옵션 메뉴를 말할 수 있습니다. 해당 기능은 차량과 관련된 모든 설정을 사용자가 지정할 수 있는 기능입니다. 그러나 이는 주행 중에 사용되지 않을 가능성이 높습니다. 하지만 가장 선택하기 좋은 최좌측에 배치되어 있습니다. 두 번째로 후방 카메라 메뉴입니다. 후방 카메라의 경우 자주 사용되는 기능임에도 불구하고 화살표 메뉴 안의 하위 기능으로 배치되어 있습니다. 심지어 하위 메뉴 안에서도 캘린더, 에너지, 웹 그다음에 위치하고 있습니다. 이는 운전자 중심의 설계로 보기 어려운 부분입니다.

3) 이 노래 내 취향 아닌데

제어 아이콘과 메뉴 아이콘의 크기 차이 (이미지 : NNgroup)

앞선 피츠의 법칙에 따르면 목표를 획득하는 시간은 목표의 크기에 영향을 받습니다. 즉, 버튼이 클수록 더 빠르게 도달할 수 있습니다. 그러나 미디어 플레이어를 제어하기 위한 아이콘(재생/일시 정지, 다음 곡)은 권장되는 사이즈인 1cm x 1cm 보다 작습니다. 반면 미디어 플레이어의 하위 메뉴 아이콘(라디오, 스트리밍, 폰 등)은 1cm x 1cm 보다 큽니다. 심지어 아이콘에 라벨링도 붙어있어 상대적으로 어포던스가 더 큽니다. 이는 행위의 위계와 우선순위인 액션이 직관적으로 설계가 되지 않은 것으로 볼 수 있습니다.

4) 조금은 멀어질 필요가 있는 우리 사이

아이콘 간격이 좁아 다른 대상이 선택될 가능성 존재 (이미지 : NNgroup)

세로형 대시보드일 경우 컨트롤 메뉴 간 간격이 좁아 의도치 않은 대상을 선택할 가능성이 있습니다. 예를 들어 실내 온도를 변경하기 위해 시도한 액션으로부터 시트 워머를 작동시킬 수 있습니다. 또한 최근에 실행한 앱에 접근하기 위해 위로 스와이프 하는 액션을 취할 때도 시트 워머를 작동시킬 수 있습니다.

5) 관심받고 싶은 우리 친구 지도

애플리케이션으로 꽉 찬 화면과 백그라운드의 지도 (이미지 : NNgroup)

대시보드 정보는 사용자가 필요한 것을 빠르게 얻을 수 있도록 다양한 조건에서 시인성이 좋아야 합니다. 따라서 텍스트가 너무 작거나, 배경이 정신없거나, 배경과 대비가 낮은 콘텐츠는 지양해야 합니다. 그러나 테슬라 대시보드는 지도가 항상 배경으로 노출됩니다. 화면 최상단의 상태 표시줄 또한 지도와 섞여있기 때문에 읽기가 어렵습니다. 또한 한 개 이상의 애플리케이션을 열었을 경우 애플리케이션 사이로 지도가 보이는 것은 주의를 산만하게 만듭니다. 나아가 애플리케이션을 화면 레이어 최상단으로 가져올 수 없는 점은 사용자의 통제권을 박탈한 것으로 제이콥의 10가지 사용성 휴리스틱에 어긋납니다. 이로써 사용자는 정보가 거의 없는 맨 위의 작은 영역의 지도를 볼 수밖에 없습니다.

6) 나만 믿다 골로 갈 수 있어

테슬라를 운전할 때 차선을 변경하려면 다음 정보 중 하나를 활용하게 됩니다.

1) 사이드 미러와 백미러 기능
2) 후방 카메라 기능
3) 차선 변경 지원 기능

헤드레스트로 인해 시야가 부분적으로 차단되는 백미러 (이미지 : Teslarati)

앞선 세 가지 정보 모두 적절히 혼합해 사용이 가능하지만 중요한 점은 이 중 어느 정보도 완벽한 정보가 아니라는 점입니다. 그러나 사람들은 본능적으로 더 직관적인 정보를 선호하기 때문에 대부분의 사람은 계기판에 노출되는 차선 변경 지원 기능에 크게 의존합니다. 이는 실제로 오래된 행동 양식(사이드 미러와 백미러 사용)을 성공적으로 변환시킨 예이기도 합니다.

차선 변경이 불가함을 표시하는 대시보드 정보 (이미지 : Tesla)

그러나 차선 변경 지원 기능은 모든 상황에서 올바르게 작동하지 않습니다. 실제로 테슬라는 차선 변경 시 차선 변경 지원 기능에만 의존하는 것을 경고합니다. 센서 오류를 제외하더라도 표시된 정보를 모두 올바르게 해석하는 수준이 아니기 때문입니다.

차량이 안전하게 차선을 변경할 수 있는 예(위)와 그렇지 않은(아래) 예 (이미지 : NNgroup)

예를 들어 4차선 도로에서 운전 중이고 가장 우측 차선에서 중간 차선(2차선이나 3차선)으로 차선을 전환한다는 가정을 해보겠습니다. 방향 지시등을 켜면 자동으로 차선 변경 지원 기능이 활성화되고 좌측 차선이 비어 있음이 대시보드에 표시됩니다. 그러나 좌측 차선에 도달하는 순간까지 방향 지시등이 커져 있으므로 왼쪽 차선에 대한 정보가 지속적으로 노출됩니다. 이때 운전자는 계기판 대시보드를 보고 현재 자신의 차량 위치에 대해 인지부조화가 올 수 있습니다. 때문에 이어서 차선을 변경하거나 다시 원위치로 급하게 돌아올 가능성이 있습니다. 이처럼 맹목적인 기능 의존은 사고의 위험을 높일 수 있습니다.

2. 그럼에도 불구하고 좋은 점

닐슨 노먼 그룹은 앞선 UI 개선 사항을 제외한 좋은 디자인 요소도 함께 언급했습니다.

1) 큰 터치스크린 화면

(이미지 : Tesla)

여러 개의 애플리케이션을 나란히 볼 수 있도록 제공한 것은 운전자의 동시 작업 효율을 상승시키는 요소이기도합니다.(ex. 후방 카메라와 지도 또는 미디어 플레이어를 한 화면에 표시) 운전이라는 행위 자체가 여러 정보에 노출되는 상황이기 때문에 다수의 애플리케이션을 동시에 보는 것은 사용자의 기억력 부하를 크게 감소시킬 수 있습니다.

2) 풍부한 지도 앱

(이미지 : NNgroup)

구글 지도를 기반으로 하는 테슬라 지도는 테슬라 관련 정보가 풍부합니다.

a. 충전기 위치가 자동으로 지도에 표시됩니다.

b. 목적지를 탐색할 경우 도착했을 때 남아있을 배터리 잔량을 알려줍니다.

c. 사용자는 교통 트래픽에 따라 나아갈 방향을 지시받을 수 있습니다.

3) 자율 주행의 안전장치

(이미지 : thedriven)

자율 주행 시스템은 오류 및 고장의 가능성을 인식해 해당 기능을 활성화하기 위해선 운전자가 핸들을 잡고 있을 수 있도록 했습니다.

4) 빠른 적용 및 피드백

(이미지 : Teslarati)

차량이 인터넷에 항상 연결되어 있기 때문에 대시보드 OS와 인포테인먼트 콘텐츠를 최신으로 유지할 수 있습니다. 또한 버그를 신속하게 개선하고 빠르게 배포할 수 있습니다.

3. 글을 마무리하며….

(이미지 : Tesla)

오늘날 자동차를 재정의한다면 움직이는 거대한 컴퓨터로 말할 수 있을 것입니다. 여러 개의 센서에서 수집한 정보를 바탕으로 운전자의 인지 및 신체 능력을 향상하고, 탭 한 번으로 다양한 편의 기능을 제공해 수준 높은 운전 경험을 제공하기 때문입니다. 그러나 뉴스에서 들려오는 사건 사고로 인해 운전의 편의를 도모하는 기술이 인간 중심적 설계가 되어있는 건지 의심스러운 것도 사실입니다. (미국 도로교통안전국에 따르면 2021.07월부터 2022.05월까지 총 392건의 자율주행 충돌사고가 집계됐으며, 약 400건에 달하는 사고 가운데 273건이 테슬라 차량에서 발생)

(이미지 : wired)

하지만 내연기관에서 전기차로의 산업 이동은 세계적인 현상이며, 스마트 모빌리티는 4차 산업혁명의 핵심 분야 중 하나입니다. 따라서 자동차 기업은 터치스크린을 대시보드뿐만 아니라 차량 곳곳에 적극적으로 도입하고 있습니다. 이로 인해 앞으로의 차량은 탈 것 그 이상의 가치를 지닌 디바이스가 될 것입니다. 그렇다면 해당 분야의 선두주자는 역사가 깊은 전통적인 차량 기업일까요? 아니면 사용자 관련 경험이 풍부한 서비스 기업일까요? 중요한 건 디바이스의 크기보다는 본질적인 경험에 집중하는 태도일 것 같습니다. 차량이라는 새로운 형태의 경험을 다루게 될 그날을 기대하며 테슬라의 터치스크린 UI와 관련된 글을 마무리 짓도록 하겠습니다. 긴 글 끝까지 읽어주셔서 감사합니다. 저는 다음 스터디 글로 찾아뵙겠습니다. :)