목적: 시니어 제품 프로젝트 리서치
내용: 시니어 제품에서 좀더 신경써야 될 UX 정리
참고자료:
4) 콘텐츠 서비스 시니어 모드 UI/UX 가이드라인
이번에 어르신을 대상으로 하는 제품 디자인에 참여하게 되어서 ‘시니어 세대를 위한 UX’를 찾아보고 정리 해보기로 했다.
시니어 세대, 글자 그대로 해석하면 나이가 많은 사람들을 총칭하는 단어지만 요즘은 프리 시니어, 액티브 시니어 등 시니어 안에서도 카테고리를 나눈다. 우리나라 노인복지법에서는 만 65세 이상을 ‘노인’으로 규정하고 있기 때문에 이 기준을 ‘시니어 세대’로 보면 될 것 같다.
젊은 세대은 최신 디바이스의 사용 방법에 금방 익숙 해지지만 시니어 세대부터는 신체적인 노화로 인해 특정 기능을 사용하기 위해 시간이 좀 더 소요 되고, 이 것을 고려해 만들어진 제품을 찾기가 어려워 적응하는 것이 쉽지 않다.
HUI, MDS 등 유명 디자인 시스템의 Accessibility 파트의 내용을 모두 적용한다면 시니어 세대의 사용에도 무리가 없을 것 같지만 그것보다 좀더 뾰족하게, 시니어 세대의 사용성에 맞춰 정리된 자료를 읽어보고 싶었다.
*애플의 Human Interface Guidelines / Accessibility
*구글의 Material Design Accessibility
세계적인 UX 컨설팅 회사인 닐슨 노먼 그룹의 유튜브 채널에서는 시니어를 위한 UX를 크게 4가지로 나누어 간단하게 설명해주고 있다.
- 텍스트와 배경의 사이에 높은 대비감을 줄 것
- 검색한 결과를 강조한다던가, 드롭다운 메뉴를 타이틀과 맞추는 등 맥락에 대한 단서를 줄 것
- 클릭 정확도를 높이기 위해 링크와 버튼을 크게 만들고, 사이 패딩을 반드시 부여할 것
- 화면의 구조와 사용에 대한 흐름이 크게 바뀌는 것은 사용자의 재학습을 필요로 하기 때문에 꼭 필요한 경우에만 적용할 것
그리고 토스에서 작년에 금융 서비스를 시니어 사용자의 관점에서 검증해보고자 진행 했던 유저 테스트 내용이 있다. 그 내용의 일부를 3가지로 요약해보면…
1) 디지털 인터페이스의 기본 사용 관습에 대해 익숙하지 않음
- 텍스트나 화살표가 클릭 가능한 요소라는 것을 알아차리기 힘든, 어포던스 인지에 어려움이 있다
- 태그와 버튼 형태가 비슷하다고 느껴 태그도 버튼으로 인식해 잘못 클릭하는 경우
2) 데이터 인식의 혼동
- 화려한 모션이 있을 경우 사용자가 집중해야할 요소(ex: 예시 태그)를 알아차리지 못함
- 얼굴을 등록하는 기능을 안내하는 페이지에서 캐릭터 모션을 보고 그 것을 100% 동일하게 따라해야 한다고 생각하는 경우
- 예시를 자신의 정보를 사용하여 표현하면 그 안의 내용이 실제 자신의 데이터라고 오해하는 상황 발생
3) 질문형 텍스트의 의미 오인
서류를 안내하고자 했던 ‘어떤 서류가 필요한가요?’라는 클릭 요소가 ‘나에게 질문하는 것’이라고 생각해 혼란스러워함
이런 유저 테스트를 보면 정말 평소에 내가 생각지도 못했던 부분에서 오인 케이스가 많이 발생하는 것을 알 수 있다. 고령자의 금융 서비스 이용을 개선하기 위해 2022년 금융위・금감위의 ‘고령자 친화적 모바일 금융앱 구성지침‘에 따라 여러 은행, 증권사 앱에 큰글씨가 순차적으로 반영 되기 시작했다
KB증권은 사진처럼 ‘큰글씨 모드’를 제공하고 NH증권의 나무 앱에서는 화면 설정에서 글씨 크기를 조절할 수 있는 옵션을 제공한다.
구성 지침에서는 글씨 크기 뿐만 아니라
- 고령자 모드로 진입하는 경로를 최소화할 것
- 기존 화면 구조에서 글씨 크기만 확대된 형태는 지양할 것
- 화면 내 폰트와 색상을 제한적으로 사용하며, 화면 간 일관성 있는 디자인으로 구성할 것
- 고령자가 이해하기 어려운 전문용어, 불필요한 한자어 및 아이콘 사용 지양할 것
등을 권장하고 있다.
자세한 세부 가이드는 ‘노년층을 위한 UX UI 디자인 가이드와 사례‘ 글과 ‘콘텐츠 서비스 시니어 모드 UI/UX 가이드라인‘을 참고 했다. 아무래도 접근성 가이드 내용과 겹치는 부분이 많이 있어서 시니어에 맞춘 내용만 골라서 따로 정리 했다.
1) Typo
- 모바일 글자 폰트는 16pt 이상을 권장하고 텍스트 커스터마이즈 옵션 제공
- 글꼴은 하나 또는 두개로 익숙한 글꼴로 통일
- 오디오나 비디오 콘텐츠는 자막 제공
- 확장 텍스트와 넓은 레이아웃 : 큰 텍스트, 색상 보정, 확대, 또는 설정 기타 보조 설정이 있어야 다양한 사용자를 수용할 수 있다.
- 일반적으로 본문은 12~14pt, 헤드라인은 18~24pt 의 글자 크기를 사용하는 것이 적절하다.
- TV: 스마트 시니어에게 권장되는 글자 크기는 가독성과 안정성 측면에서 30~42pt이다
- Mobile: 스마트 시니어에게 권장되는 글자 크기는 13~19pt이다. (50~65세의 스마트 시니어는 젊은 층과 거의 차이를 보이지 않으므로 9~13pt의 글자 크기도 안정성 측면에서 문제는 없다.)
- 모니터: 스마트 시니어에게 권장되는 글자 크기는 13~19pt이다. (50~65세의 스마트 시니어는 젊은 층과 거의 차이를 보이지 않으므로 10~13pt의 글자 크기도 안정성 측면에서 문제는 없다.)
- 넓은 행간을 권장하지만 고 연령대로 갈수록 시야각이 좁아지므로 행간과 자간을 좁혀주는 것이 좋다.
- 사용자가 읽기 어려운 작은 글자의 문장이 있으면 변경하여, 읽기 어렵다고 느낀 부분들을 사용자의 필요성에 맞춰 설정한 크기의 글자로 읽을 수 있게 해야 한다.
- 텍스트는 지원 기술 없이 200%까지 사이즈를 변경할 수 있어야 하며, 이용자가 전체 화면 표시로 해 놓은 윈도우에서는 한 행의 텍스트를 읽을 때 스크롤 할 필요가 없는 길이어야 한다.
- 텍스트 및 이미지(화상)의 시각적 표시는, 적어도 4.5:1의 콘트라스트 비율이어야 한다. 단, 문자 사이즈가 큰 텍스트는 적어도 3:1의 콘트라스트 비율을 적용한다. 큰 문자로 예를 들면 14포인트 로 높은 콘트라스트 예를 들면 3:1을 넘는 를 사용하는 것이 권장된다.
- 글자 크기를 바꿀 수 있는 기능을 제공해야 한다.
2) Color
- 텍스트와 대비 비율에 주의하여 4.5:1의 비율이어야 한다. 문자 사이즈가 큰 텍스트는 3:1의 비율을 적용한다.
- 중요한 아이콘 색상은 가능한 푸른색 계열을 피한다
- 추상적인 아이콘을 배제하고 쉽게 분별이 되는 아이콘 선택
- 메시지를 전달하기 위해선 색상보다는 폰트 굵기를 선택
- 이미지나 그래픽에 텍스트를 분리하여 눈에 띄기 쉽게 디자인
- 대조로 색상을 구분(회색&파랑, 검정&흰색)
- 그레이 스케일로 바꾸었을 때 다 읽히는지 확인
- 시니어의 시각적인 변화를 이유로 선명하고 화려한 색을 엷은 무채색 보다 선호하게 된다. 따라서 색의 주목성이나 선호도에 변화를 주는 것이 좋다
- 심리적인 안정감을 주는 색채로는 중간색 계열의 녹색, 청색을 선호하는 것으로 나타났다.
배색 선호도는 동일 배색, 유사 배색, 근접 보색, 보색으로 나타났다. (여성 노인은 유사 배색을 선호하고 남성 노인은 보색을 선호) - 채도 선호도는 고채도, 중채도, 저채도 순으로 나타났으며 명도는 고명도, 중명도, 저명도로 나타났다.
- 색채 선호도는 중간색계, 한색계, 난색계, 무채색 순이며, 녹색, 파랑, 보라, 난색에서는 노랑 순이다.
3) Information
- 노인 세대가 많이 사용하는 앱일 수록 모든 정보를 다 표현하기 보다는 찾고자 하는 정보만 확실히 강조해주는 것이 좋다
- 사용자는 자신에게 선택권이 주어졌을 때 화면 중앙에 있는 콘텐츠를 누르는 것을 선호한다는 것을 고려해 중요한 항목을 화면 중앙에 배치한다
- 한 화면 안에 여러 기능을 넣지 않는다
- 균형 잡힌 정보의 밀도와 가용성을 위해 최소 개체는 48 X 48dp의 공간을 확보해야하고 개체 간에는 8dp의 간격을 두어야 한다. 스크린의 사이즈와 관계없이 물리적으로 최소 9mm 48 X 48dp가 확보되어야 하고 가시적인 권장 대상 크기는 7-10mm이다.
- 시니어들이 한 번에 인지할 수 있도록, 도움말은 부수적인 텍스트를 모두 제외하고 중요한 정보 위주로 명확히 문장으로 표현해야 한다.
- 시니어의 경우 주니어(20~30대)에 비해 문제 해결에 시간이 오래 걸리므로 쉽고 단순하게 테스크를 제공하여 최소한의 이해만으로도 목표에 도달할 수 있도록 해야 한다.
- 스마트 시니어 집단은 주니어 집단(20~30대)에 비해 단어의 작업 기억 용량이 낮으므로, 한 번에 제시되는 정보의 수를 최소화해야 한다
4) 알림
- 진행 완료에 대한 명확한 피드백을 제공한다
- 습관적인 행동의 신호로 미리 알림 표시
- 이상이 발생했을 때 시스템은 소리로도 경고를 부여해야 한다.
- 정보를 송신하는 상황에서 송신을 완료하기 전에, 사용자가 정보를 검토하고 확인 및 수정을 할 수 있도록 알람 기능을지원한다
- 시니어가 충분히 인지할 수 있는 정도로, 소리 혹은 진동 등을 이용하여 알림과 경고를 전달해야 한다
5) 상호작용
- 상호 작용이 필요한 디자인을 할 때 긴 시간 간격을 허용하는 게 좋다
- 풀 다운 메뉴와 같이 동적 인터페이스는 타깃에 정확히 클릭하기 어렵기 때문에 사용을 피해야 한다.
- 정교한 마우스 조작이 요구되지 않도록 버튼을 크게 제공해야 한다
- 빠른 키보드 입력이 필요한 방식을 피하고, 충분한 입력 시간을 제공 해야한다
- 마우스의 더블 클릭으로 조작하는 방식을 피하고 싱글 마우스 클릭으로 조작될 수 있도록 해야 한다
- 정교한 마우스 조작이 요구되는 롤 오버 메뉴의 사용을 피해야 한다.
6) 터치 인터페이스
- 터치 인터페이스 버튼은 대각선의 길이가 최소 9.6cm 이상 유지(아이패드는 44×44)
- 노인을 위한 게임이라면 손가락 태핑 운동을 유도할 수 있는 게임을 개발 하는 것이 필요하다
- 익숙하더라도 과도한 태핑을 사용하기 힘드니 과도한 태핑을 줄일 수 있는 디자인이 필요하다