brunch

매거진 쓰면서 정리하는 UX 디자인

라이킷 339 댓글 11

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 헤일리 Jul 01. 2020

시니어 세대를 위한 모바일 UX 디자인 Tips

노인세대를 위한 모바일 앱 디자인을 할 때 주의해야 할 점

20대, 30대 UX/UI 디자이너들이 모바일 앱을 디자인할 때 간과하기 쉬운 부분 중의 하나가 시니어 세대를 위한 UX 디자인이다. 대부분의 모바일 시장이 10-30대에 맞춰져 있고 그 시장이 가장 크기 때문에 노인 세대를 위한 디자인을 생각하는 것은 쉽지 않다. 혹은 내가 거쳐온 유년시절, 청소년 시절에 대한 기억을 기반으로 유아, 어린이, 10대를 위한 기발한 앱 디자인은 생각할 수 있으나 그들이 살아보지 못한 중년 이상, 노인 세대의 삶에 대해선 심각하게 생각해보지 않았을 수도 있다.

통계청의 발표에 따르면 만 65세 이상 노인인구가 전체 인구에서 차지하는 비중은 2017년은 13.8%에서 2025년은 20.3%로 늘어날 것으로 전망했다. 또한 2030년에는 25.0%, 2035년은 29.5%, 2040년은 33.9%로 비중이 커질 것으로 예상했다. 5년 후에는 성인 인구 5명 중 1명이 65세 이상이고 10년 후에는 4명 중 1명이 노인 세대라고 생각하면 상황은 조금 심각해진다.

10년 후 고령화 이슈는 각 산업군에서 더 심각한 문제로 인식을 해야 하며 작은 모바일 화면을 디자인하는 UX/UI 디자이너라면 노인 세대에 대한 기본 적인 이해를 바탕으로 모바일 디자인을 진행할 필요가 있다.

1990년대 말부터 핸드폰이 대중화되기 시작하였고 2007년 아이폰 1세대를 시작으로 스마트폰이 급속도로 성장하기 시작하였다. 스마트폰의 보급으로 시작된 모바일 세상은 특별한 사람들이 누리는 세상이 아닌 보통 사람들의 일상이 되었다. 1990년 말 피처링 폰을 시작으로 핸드폰을 사용하기 시작한 40대 초중반의 비즈니스 맨들은 현재 60을 넘어 노인세대로 일컬어지는 집단에 속하게 되었다.

현재 65세 이상의 노인 세대들은 최소 10년 이상 모바일 디바이스를 사용하면서 익숙해진 세대들이다. 그래서 새로운 디바이스에 대한 강한 거부감은 없다. 하지만 앞으로의 모바일 시장은 지금보다 더 커지고 더 빠른 속도로 성장하면서 모바일 세상 안에서 젊은 세대와 노인 세대의 세대차가 존재할 수밖에 없다. 또한 노화가 진행되면서 겪게 되는 신체적, 정신적, 인지적 변화들은 노인 세대가 숙명적으로 받아들여야 하는 현실이다.

따라서 모바일 앱 서비스에 따라서 계층의 폭이 노인까지 포함하는 서비스를 하는 기업들은 노인 세대가 필연적으로 겪는 변화들을 유념하여 디자인하는 것이 필요하다.

노화가 진행되면서 겪게 되는 변화들에는 어떤 것들이 있을까? 가장 뚜렷이 나타나는 현상들에는 크게 시력적 변화, 인지적 변화, 운동 제어 능력 등을 꼽을 수 있다.

Index

1. 시력

2. 인지적 변화-기억, 주의력, 의사결정

3. 운동 제어능력

1. 시력

시력의 변화는 굳이 65세까지 가지 않더라도 만 40세부터 변화를 느끼기 시작한다. 만 40세 이후부터 노안이 진행되면서 가까이에서 작은 텍스트를 읽기 어려워 모바일폰을 멀리서 보거나 이중 초점이 필요한 안경을 찾게 된다. 저시력 상태는 나이가 들어감에 따라 급격히 증가해 만 50세 이상의 사람들 중 절반은 시력이 어느 정도 저하되는 증상을 겪는다.

나이와 질병에 관련된 시력 저하를 살펴보면,

황반 변색: 최대 50% 이상의 사람들이 나이가 증가하면서 황반이 변색된다.

당뇨병성 망막증: 당뇨병 환자들은 눈 안의 혈관이 시력을 흐리게 하고 사각지대를 형성한다.

백내장: 백내장을 앓고 있는 사람들은 뿌연 구름이 낀 것 같은 막이 형성되어 시야를 뿌옇게 만든다.

색소성 망막염: 유전적인 질병으로 점차 시력을 상실하게 한다.

이런 질병을 앓고 있는 사람들과 나이가 들어감에 따라 색채 시력이 떨어져 색채의 대비 감도가 심하게 저하된다. 비슷한 색을 구별하는 것이 힘들어지고 파란색 음영은 희미하게 보이기도 한다. 나이 드신 분들이 원색의 쨍한 컬러를 좋아하는 것도 일맥상통한다.

고령자일수록, 시력에 영향을 주는 질병을 앓고 있는 사람들은 스크린을 선명하게 보기 힘들다

색상 대비 비율 검사(Color-Contrast Ratio Checkers)

특정 대상을 포함하는 모바일 디자인을 할 경우, UX/UI 디자이너들은 디자인에 색을 입힐 때 색상 대비 비율 검사에 신경을 쓸 필요가 있다. 색상 대비 비율 검사 도구들 중 브라우저 기반 도구인 WebAIM 색상 대비 검사기는 16진수 값으로 지정된 색상 코드를 테스트한다. Mac이나 일반 피씨에서 사용 가능한 응용 프로그램인 Paciello Group의 색상 대비 검사기는 RGB 값으로 지정된 색상 코드를 이용해 테스트를 할 수 있다.

Colour Contrast Analyser (CCA)

Colour Contrast AnalyserThe Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.

developer.paciellogroup.com

여기서 또 하나의 팁!

Figma를 사용하는 UX/UI 디자이너라면 Able 플러그인을 설치해서 색상 대비 비율 검사를 쉽게 할 수 있다.

모바일 디자인 팁

폰트 디자인

모바일 디바이스에 따라 차이가 있겠지만 글자 폰트는 16pt 이상으로 디자인한다. (50~65세의 스마트 시니어는 젊은 층과 거의 차이를 보이지 않으므로 10~13pt의 글자 크기도 안정성 측면에서는 문제가 없다.)

사용자가 텍스트를 커스터마이즈 할 수 있는 옵션을 제공한다.

글꼴은 하나 혹은 두 개로 통일시킨다. 너무 디자인적 요소가 많이 가미된 글꼴보다는 익숙하게 보아왔던 글꼴로 통일시킨다.

<The Economist> 잡지 앱. 폰트사이즈와 폰트 디자인, 강조할 부분을 적절히 사용하여 쾌적한 뉴스 읽기 환경을 제공하고 있다

오디오나 비디오 콘텐츠가 있는 서비스일 경우, 자막을 제공하는 것이 좋다.

컬러 디자인

비슷한 색을 구별하는 능력이 떨어지는 것을 감안해서 텍스트와 대비 비율에 주의해야 한다. 텍스트 및 이미지(화상)의 시각적 표시는, 적어도 4.5:1의 콘트라스트 비율이어야 한다. 단, 문자 사이즈가 큰 텍스트는 적어도 3:1의 콘트라스트 비율을 적용한다.

50대 이상 세대의 건강을 위해 개발된 앱. 큰 폰트와 대비가 잘되는 컬러를 사용하면서도 레이아웃에 변화를 주어서 써 보고 싶은 마음이 들게 디자인하였다.

중요한 아이콘의 색상은 가능한 푸른색 계열은 피한다.

식별성이 뛰어난 컬러를 선택하고 중요도에 따라 일관성 있게 레이아웃을 해야 한다. 추상적인 아이콘을 배제하고 쉽게 분별이 가는 아이콘을 선택한다.

색맹이 있는 노인까지 고려한다면 레드와 그린 을 사용할 때 주의해야 한다. 메시지를 전달하기 위해선 색상보다는 폰트의 굵기를 선택하자.

이미지나 그래픽에 텍스트를 겹치지 않는다. 이미지와 텍스트는 분리해서 시각적으로 눈에 띄게 쉽게 디자인한다.

대조를 주어서 색상을 구분시키는 것이 좋다.(예, 회색과 파란색 혹은 검은색과 흰색)

모든 디자인을 그레이 스케일로 바꾸었을 때 다 읽히는지 확인해본다.

카카오지도를 그레이스케일로 바꿨을 때

네이버지도를 그레이스케일로 바꿨을 때

>> 위의 이미지는 카카오 지도와 네이버 지도를 그레이 스케일로 바꿨을 때의 모습이다. 모두 신세계 본점에서 명동성당까지로 검색을 했다. 검색 결과만 놓고 보았을 땐 출발지와 목적지를 강조하고 그 외의 부수적인 상호명을 생략해 놓은 네이버 지도가 더 눈에 잘 들어온다. 노인세대가 많이 사용하는 앱일수록 모든 정보를 다 표현하기 보다는 찾고자 하는 정보만 확실히 강조해주는 것이 좋다.

대조를 주어서 색상을 구분시키는 것이 좋다.(예, 회색과 파란색 혹은 검은색과 흰색)

파스텔톤의 색상은 10-20대의 감성에는 부합하지만 전 세대를 아우르는 앱의 색상에는 적합하지 않다.

2. 인지적 변화

인지적 변화는 개개인에 따라 편차가 매우 커서 어떤 사람은 80살이 넘어도 매우 기억력이 좋은 반면, 어떤 사람은 50살에 벌써 건망증 증세가 심해지기도 한다. 하지만 일반적으로 나이가 들수록 인지적 측면이 쇠퇴한다.

노인세대를 위한 인지적 변화를 살펴볼 때는 기억(memory), 주의력(attention), 의사 결정(decision-making)을 함께 살펴봐야 한다.

오스트리아의 네트워크 회사 중 하나인 키사 폰(Kisa Phone)은 인지적 , 신체적 장애를 겪고 있는 노인을 위한 단순한 모바일 폰을 개발하고 있다.

기억(Memory)

기억에는 단기 기억과 장기 기억으로 나눌 수 있으며 나이가 들수록 단기 기억과 삽화적 기억(episodic memory)이 특히 약해진다. 단기 기억은 건망증이라고도 불리는데 노인들뿐만 아니라 30대 이상의 사람들에게도 심심치 않게 발견된다. 단기 기억이 약해질수록 새로운 것을 받아들이는데 오래 걸려 새로운 기능을 배우고 조작하는데 어려움을 겪는다.

*삽화적 기억이란?

개인적으로 경험한 사건들에 관한 것으로, 어떠한 사건이 언제 어디서 일어났으며, 서로는 어떤 관계인지 등에 대한 기억이다. 예컨대, 친구와 같이 저녁을 먹었던 것, 거리에 지나가던 차를 보았던 것, 그리고 학교에서 만났던 방문객의 얼굴을 기억하는 것과 같이 자신의 개인적·자서전적 과거에 대한 기억을 의미한다. 기억되는 경험이 매우 의미 있는 경우가 아닐 때에는 종종 인출에 실패하는 경향이 있는데, 이는 보다 최근에 발생한 정보로 인해 인출이 방해를 받기 때문이다. (출처: 네이버 지식백과, 교육심리학 용어사전)

모바일 디자인 팁

한 화면 안에 여러 기능을 넣지 않기. 이것은 one thing per page의 원칙과도 일맥상통한다. 작은 모바일 화면 안에는 한 가지 기능에 집중할 수 있도록 디자인한다.

불가피하게 한 화면에 두 가지 이상의 정보가 들어가야 한다면 카테고리를 분명히 나눠 식별하게 쉽게 해 준다.

UX 디자인을 위한 7가지 원칙

내가 디자인을 할 때 중요하게 생각하는 UX의 원칙들 | UX 디자인은 알면 알수록 재미있지만 한편으로는 알면 알수록 어렵다. '열 길 물속은 알아도 한 길 사람 속은 모른다.' 열 사람이 있다면 열

brunch.co.kr/@hailey-hyunjee/46

진행 완료에 대한 명확한 피드백 제공한다. 미세 상호작용(마이크로 인터렉션)의 원칙을 적용해 사용자가 하고 있는 행동에 대한 실시간 반응을 해주는 것이 중요하다.

미세상호작용 UX디자인 측면에서 분석한 하나투어 앱

앱 사용하다가 화가 나서 쓰는 UX 디자인 리뷰 | 앱 사용하다가 화가 나서 쓰는 UX 디자인 리뷰 뉴스 기사를 보다가 하나투어 앱이 최근에 리뉴얼을 했다는 소식을 듣게 되었다. 기존에 하나투어

brunch.co.kr/@hailey-hyunjee/37

습관적인 행동의 신호로 미리 알림을 표시해주는 것이 좋다.

주의력(Attention)

주의력은 특정 자극에 주의를 집중하는 능력을 의미한다. 일반적으로 선택적 주의력(selective attention)과 분배적 주의력(divided attention), 지속적 주의력(continuous attention)으로 나뉜다.

주의력결핍(attention deficit)은 어린 자녀들과 함께 고령자들에게도 발생하는 현상이다. 이런 현상은 치매를 겪는 노인들에게 더 두드러진다. 따라서 나이가 들수록 주의력이 떨어지면서 멀티 테스트 능력이 떨어진다. 특별히 경도인지장애(Mild Cognitive Impairment)를 겪는 노인들은 언어나 집중력, 시공간능력 등에서 기억력이 떨어지고 판단력이 흐려지는 증상을 보인다.

<사람과 터치를 위한 손가락에 대한 설계>를 한 UX 디자이너 스티븐 후버(Steven Hoober)의 새로운 연구 결과에 따라면 사용자들은 자신에게 선택권이 주어졌을 때 화면 중앙에 있는 콘텐츠를 누르는 것을 선호했다.

흥미로운 사실은 노인 세대들은 젊은 세대보다 지속적 주의력이 더 높게 나타나기도 한다.

모바일 디자인 팁

호흡이 긴 텍스트 사용에 두려워하지 말라. 노인 세대들은 젊은 세대보다 긴 글에 더 익숙할 수 있다. 젊은 층을 타깃으로 한다면 텍스트가 짧을수록 좋지만 노인 세대들은 문장의 호흡이 긴 텍스트를 선호하기도 한다.

상호 작용이 필요한 디자인을 할 때 긴 시간 간격을 허용하는 게 좋다.

한 화면 안에서는 하나의 기능에 집중시킨다. (one thing per page 원칙 지키기)

사용자들이 가장 선호하는 영역이 화면 중앙이라는 것을 고려해 중요한 항목을 화면 중앙에 배치한다.

쿠팡과 배달의민족 모바일앱 첫페이지

>> 일반적으로 상품 리스트가 모바일 상단에 있는 것과 달리 쿠팡 앱은 중앙 화면에서 쿠팡의 핵심 서비스와 리스트를 보여주고 있다. 배달의 민족 역시 중앙 화면에 모든 배달음식을 다 볼 수 있다. 사용자들이 가장 선호하는 영역이 화면 중앙이라는 것을 고려해 디자인한 것을 살펴볼 수 있다.

의사결정(Decision-making)

젊은 세대들은 다양한 옵션 중에서 자신에게 가장 적합한 것을 선택하는 반면 노인 세대들의 의사 결정 방식은 조금 다른 양상을 보인다. 그들은 이미 알고 있는 지식을 바탕으로 결정을 내리는 경우가 많다. 또한 그들은 권위 있는 전문가의 의견을 상당히 중요하게 생각한다.

모바일 디자인 팁

새로운 디자인에 집중하기보다는 이미 익숙한 디자인과 레이아웃, 색상에 집중한다.

서비스의 특성에 따라 신뢰를 바탕으로 제공되는 앱이라면 권의 있는 전문가의 의견을 노출하는 것이 필요하다.

3. 운동 제어능력(Motor Control)

어른들이 자주 하는 말이 있다. "몸이 예전 같지 않아."이다. 나이가 들수록 운동 제어(Motor Control) 능력이 떨어짐에 따라 이런 신체적 변화는 모바일 디바이스를 사용하는 데도 영향을 끼친다. 특별한 질병을 앓지 않더라도 '노인성 진전'을 겪으며 손떨림 현상을 겪기도 한다. 노인성 진전은 손끝에서 가장 잘 나타나기 때문에 흔히 '수전증'이란 이름으로 많이 불리기도 한다. 따라서 노인을 위한 모바일 디바이스를 디자인할 때는 아이콘이 너무 작거나 복잡해서는 안된다.

흥미로운 연구 결과 중 하나는 노인들은 피처링 폰 보다 스마트폰의 터치 인터페이스가 더 적합하다는 연구결과가 있다. 그 이유는 손가락 태핑이 다른 운동 능력보다 늦게 감소하기 때문이다.

모바일 디자인 팁

터치 인터페이스의 버튼은 대각선의 길이가 최소 9.6m 이상을 유지해야 한다(ipad의 경우 44x44픽셀)

노인을 위한 게임을 만든다면 모션 스킬을 향상하기 위해 단순하고 반복적으로 손가락 태핑 운동을 유도할 수 있는 게임을 개발하는 것이 필요하다.

노인들은 핑거 태핑이 익숙하더라도 과도한 핑거 태핑은 사용하기 힘들어한다. (예) 모바일로 텍스트 보내기). 과도한 핑거 태핑을 하는 확률을 줄일 수 있는 디자인이 필요하다.

초성만으로도 자동 검색이 되거나 최소한의 입력을 할 수 있게 해주는 UI 디자인이 좋다

마치며

현재의 노인 세대는 최소 10년에서 20년 전부터 핸드폰을 사용한 세대이다. 모바일 디바이스에 전혀 무지했던 10년 전, 20년 전의 노인들과는 다른 양상을 보인다. 노인들이 가장 싫어하는 디자인은 노인들만을 위해 특화된 디자인이다. 모바일 세상에 익숙한 사람들이 노인이 되었다는 이유만으로 선긋기를 해서 노인 전용 앱을 개발하는 것이 시니어 세대가 원하는 디자인은 아닐 것이다.

그럼에도 불구하고 나이가 들수록 노인이 필연적으로 겪게 되는 신체적, 정신적, 인지적 변화를 고려한 모바일 앱 개발은 필요하다. 일반 세대를 위한 모바일 앱 서비스라도 노인들의 사용 폭이 큰 앱 서비스라면 가장 취약한 계층의 특성을 일부 고려해 앱 디자인을 하는 노력은 필요할 것이다.