심리학 용어인 멘탈 모델 (Mental Model) 은 어떤 시스템에 대해 그 시스템의 작동 방식에 대해 알고 있다고 생각하는 것을 의미합니다. 우리는 다른 제품에서 얻는 기존 지식을 새 제품이나 경험에 활용하기 때문에, 기존의 경험을 활용한다면 새로운 시스템의 작동 방식을 이해하는데 필요한 노력을 줄일 수 있습니다. 즉, 디자인을 사용자의 멘탈 모델에 맞추면 사용자 경험이 개선된다고 말할 수 있습니다.
멘탈 모델을 따르지 않는다면 디자인은 문제를 일으킵니다. 사용자가 기존의 경험을 이용하지 못해 사용자가 서비스를 인지하는 방식이나 이해하는 속도에 악영향을 미치는 멘탈 모델 부조화를 겪기 때문입니다.
멘탈 모델 부조화의 사례
https://brunch.co.kr/@thinkaboutlove/225
스냅챗 2018 리디자인이 멘탈 모델 부조화의 대표적인 예 입니다.
당시 스냅챗은 점진적인 변화를 도모하는 대신, 스토리 기능과 채팅 기능을 갑자기 한데 합쳐버리는 등 사용자에게 익숙하던 앱 포맷을 대대적으로 정비했습니다. 사용자들은 새로운 포맵에 적응하는데 불편함을 겪었고, 서비스를 이탈하는 현상이 발생했습니다.
그러면 대대적인 리디자인은 피해야하는건가?
피해야한다기보다는 사용자가 쉽게 받아들일 수 있도록 배려해주어야 합니다. 대표적인 리디자인 성공 사례로 구글의 2017 유튜브 리디자인이 있습니다. 구글은 사용자에게 새 디자인을 강조하기 보다, 새로운 디자인에 서서히 익숙해지게 하였으며 익숙해지는 동안 피드백을 보내거나 이전 디자인으로 돌아갈 수 있게 자율성을 부여했습니다.
그렇게 구글은 사용자가 새로운 디자인을 받아들일 준비가 되었을 때 새 디자인을 선택할 수 있게 하였고, 그 결과 멘탈 모델 부조화의 부작용이 경감되었습니다.
주의점
제이콥의 법칙은 똑같은 디자인을 옹호하는 법칙은 아닙니다. 핵심은 사용자가새로운 경험을 이해하기 위해 기존 경험을 활용하자는 것 입니다.
한줄 요약
제이콥의 법칙은 사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용한다는 것이지 모든 제품과 경험이 똑같아야 한다면서 똑같은 디자인을 옹호하는 법칙이 아니다!
💁🏻 오늘은 제품 UX 기획에 대해 알아보려고 합니다. 하드웨어쪽 UX 기획에 대한 내용은 대부분 해외 글들이 많은 것 같아 해외에 있는 글을 나름대로 해석 겸 정리해보려하는데요, 어설픈 영어실력으로 초월번역한 것이니 원문도 함께 보는걸 추천합니당 😅
1. 문제가 되는 측정 지표를 정의해라
경력 많은 PM 출신 벤처 투자가인 조쉬 엘만(Josh Elman)은 제품 관련 질문 중 가장 중요한 것은 "얼마나 많은 사람이 실제로 당신의 제품을 사용하고 있는가?"라고 주장합니다. 엘만은 페이지 뷰나 월간 활성 사용자와 같은 대부분의 숫자들은 실제로 많은 정보를 주지 않는다고 Elman은 지적합니다.
중요한 점은 "누가 정말로 제품을 사용하고 있는가?"라는 점입니다.
이 질문에 대한 대답은 "x명의 사용자가 y만큼의 시간동안 어떤 행동을 했다"라는 형태로 정의되어야 합니다. "최근 15일 동안 100명의 사용자가 3회 이상 검색했다"와 같이 말이죠. 또한, 이 질문은 우리의 제품을 사용하는 고객에게 어떤 가치와 혜택을 줄 지를 알려줍니다. PM과 함께 이 질문을 정의해 단기, 장기 설계 목표를 세운다면 하위 목표를 명확히하고 설계를 구체화해보세요.
2. 80/20 법칙을 적용시켜라
80/20 규칙은 큰 시스템에서 80%의 결과가 20%의 입력으로 인해 발생한다는 것을 의미합니다. 이 패턴은 경제, 교통, 사람의 습관 등 다양한 분야에서 반복적으로 나타나는데요, 몇 가지 관련 예시를 봅시다.
교통 체증의 80%는 20%의 도로에서 발생합니다.
기업 매출의 80%는 20%의 고객에게서 발생합니다.
제품 경험의 80%는 20%의 UI에서 비롯됩니다.
사진 출처 : https://medium.muz.li/hacking-product-design-de2be6a11481#.c2cxw2fyv
이 패턴은 멱함수 분포를 대표적으로 나타내는 '파레토 법칙'으로도 알려져 있습니다. 이 법칙을 통해 우리는 수많은 문제들의 우선순위를 설정할 수 있습니다. 제한된 시간과 자원 속에서, 현재 단계를 가장 잘 헤쳐나가기 위해 중요한 것이 무엇인지, 목표를 향해 나가야할 때 어느 쪽 방향으로 가면서 선택과 집중을 해야할지 판단을 내릴 수 있습니다.
Tian Ji's strategy
'Tian Ji의 말 경주' 이야기를 아시나요? 이 이야기는 Tian Ji라는 중국 장군이 다른 사람들보다 느린 말을 가졌음에도 3회의 말 경주에서 승리한 이야기 입니다. Tian Ji는 경주 전에 상대 말에 대한 정보를 수집했고, 경주 날 본인 말 중 가장 빠른 말을 상대의 중간 말과 매치시키고, 중간 말을 상대의 가장 느린 말과 매치시켰습니다. 결과적으로 Tian Ji는 자신의 가장 느린 말이 상대의 가장 빠른 말에게 진 경주를 제외하고는 두 경기에서 상대를 간신히 이기며 2:1로 승리하게 되었습니다.
이 이야기의 교훈은 80/20 규칙을 적용하는 것이
본인의 상황, 문제, 자원 및 제약 조건을 파악하는 것
에너지를 소비해야 할 20% 영역을 식별하고 자원을 적절하게 투입하는 것
정보 수집 및 다음 단계를 위한 전략 수립을 반복하는 것
이라는 점입니다. 이렇게 차근차근 문제를 해결하는 과정은 비즈니스 전략부터 개별 UI 결정까지 적용될 수 있습니다.
3. MVP (최소 기능 제품)을 디자인하라
어떻게 해야 만족스러운 제품 경험을 만들 수 있을까?
이 문제를 해결하는데에는 세 가지 단계가 있다고 생각합니다. 첫째, 의미가 있어야 합니다.우리의 제품이 왜 중요한지, 이 제품이 가져올 미래가 어떤 것인지에 대한 비전을 제시할 수 있어야 합니다. 그래야만 고객들이 우리의 제품이 좋지 않더라도 지속적으로 사용하도록 묶어둘 수 있습니다.
테슬라 로드스터가 가장 완벽한 예시입니다. 이 차를 통해 테슬라는 그들의 미래 비전을 제시했습니다. 로드스터(MVP)는 문제가 많았음에도 사람들은 그 차에 기대를 걸었죠.
테슬라의 로드스터
둘째, 기존 제품보다 10배 이상의 가치를 제공해야 합니다. 구글의 검색이나 애플의 아이폰이 처음 나왔을 때처럼 말이죠. 기존의 제품들보다 훨씬 더 뛰어난 제품을 출시했을 때 고객들은 스스로 우리 제품을 홍보해주게 됩니다. 단지 비전을 제시하는 것 뿐만이 아니라, 기존 보다 10배 더 나은 경험을 제공하는 무언가가 한 개 이상 있어야 합니다.
셋째, 디테일에 신경써야 합니다. 꼭 모든 부분에 신경 쓸 필요는 없지만, 충분히 신경써야 합니다. 선, 레이아웃, 컬러, 글자, 이미지 등 모든 것이 포함됩니다. 어디에 신경써야할 지 모르겠다면, 여러분의 제품이 지니는 핵심 가치와 기능이 뭔지 생각해보세요. 최초 아이폰을 예로 들어보자면, 배터리, 카메라, 비싼 가격 등 수많은 결점이 있었음에도 불구하고 음악감상, 웹브라우징, 부드러운 검색, 커버플로우 등 고객들의 관심을 끄는 핵심 가치는 완벽했습니다.
스티븐 잡스는 최상단 목록을 아래로 스와이프하면 생기는 "러버 밴딩" 효과를 몇 초간 보여줬다
4. 스토리를 전달하라
글자가 존재하기 이전에, 인류는 외우기 쉽게 운율을 넣어 이야기를 짓고 입에서 입으로 구전해왔습니다. 이 방법은 그들의 지식 전달 수단인 동시에, 정보 전달 수단으로서 이야기라는 매체의 강력함을 반증합니다. 이걸 제품에 적용시킨다면 사용자가 제품을 더 이해하기 쉽고 잘 기억하게 됩니다.
For sale: baby shoes, never worn
이 강력한 이야기는 기원이 불문명하지만, 보통 헤밍웨이로 부터 생겼다고 알려져 있습니다. 이 문장만 보더라도, 이야기란 길지 않아도 의미있고 기억하기 쉽게 만들 수 있다는 것을 알 수 있습니다.
여러분의 제품의 스토리를 전달할 때는 5개의 단어 이하로 최대한 간결하게 표현하세요. 사람들은 바로 무엇을 말하고자 하는지 바로 알 것입니다.
데이터보다는 짧은 일화를 소개해 주는 것이 더 설득될 것이고, 위에 언급한 회사들을 보면 자사 홈페이지에 사용자들의 리뷰를 활용하고 있습니다.
Airbnb의 핵심 비즈니스 모델은 '신뢰'입니다. 따라서 깨끗하고 정갈한 디자인을 추구해 신뢰성을 주며, 사용자들의 실제 이야기들을 적극 활용하고 있습니다. 낯선 사람들이 서로 연결되어 생성되는 추천 글처럼 말이죠.
Airbnb calls these testimonials stories
5. 적당히 많은 선택지를 제공하라
힉스 법칙이란, 선택지가 많아질수록 의사결정에 소요되는 시간이 증가한다는 이론입니다. 의사결정을 위한 인지부하가 증가할수록 사람들은 선택에 어려움을 겪습니다. 즉 선택지가 많아질수록 기대는 증가하고 만족은 감소합니다. 우리의 제품은 사람들이 선택하기보다는 자연스럽게 흐름을 따라 이용할 수 있도록 구성해야하며, 부득이하게 사용자가 직접 선택해야 한다면 가능한 선택지의 숫자를 줄이는 것이 좋습니다. 애매한 경우에는 추천 옵션을 제공해주는 것도 사용자들을 배려하는 길입니다.
보기만해도 머리 아픈 많은 선택지.. 인간공학 수업때도 교수님이 예시로 들어줬던 기억이 나네요
꼭 디지털 제품만이 아니라, 비행기의 콕핏처럼 수많은 버튼들이 나열되어 있는 아날로그 제품을 디자인 하는 경우도 있을겁니다. 이때에도 개선 방안을 고민하는 자세를 지녀야 합니다. 불필요한 선택을 강요하고 있는건 아닌지, 컨텍스트를 고려한 좀 더 영리한 선택지를 제공할 수는 없는지 말이죠.
여러분은 버튼 배치가 사용자의 작업 완료 속도에 영향을 준다는 것을 알고 계시나요? 사용자는 가장 먼저 화면을 스캔한 뒤 본인이 할 행동을 결정하는데요, 이때 기획자는 스캔이 끝나고 나서 사용자가 취할 액션을 유도해야 합니다.
웹 ver. 구텐베르크 다이어그램의 정의
구텐베르크 다이어그램은 한 화면 표시 매체를 네 부분으로균등하게나눕니다. 이 때 시선은 왼쪽 상단(①)에서 출발하여 우측 상단(②)을 거쳐 사선으로 좌측 하단(③)으로 갔다가 최종 종착지인 우측 하단(④)에서 끝나는데요, 보통 ③의 내용은 거의 스킵하며 ④를 목표로 하기 때문에 4분할 영역의 중요 순서는① > ④ > ② > ③가 됩니다.따라서 가장 중요한 부분은 ①, ④에 위치시키고, 덜 중요한부분은 ③에 두도록 하고 있습니다.
만약 화면이 균등하게 나뉘어 있지 않다? 그렇다면 더 크고, 화려하고, 자극적인 UI를 활용해 사용자의 시선을 붙잡으면 됩니다.
❗️ 정의를 이해했으니, 다음으로는 실생활에 어떻게 적용되고 있는지 살펴봅시다.
예시 1. 페이스북 회원가입 페이지
페이스북 회원가입 페이지
페이스북의 회원가입 페이지를 보면, 회원가입의 당위성을 설명한 문구 (①) 가 Sign up 버튼 (④) 으로 연결되고 있는데, 이는 구텐베르크 다이어그램의 법칙과 동일하다는 것을 발견할 수 있습니다.
예시 2. 구글 이미지 검색
(좌) 구글 이미지 검색 시 출력되는 페이지 (우) 이미지 클릭 시 우측에서 나타나는 이미지 상세
구글에서 이미지를 검색하고 원하는 것을 클릭하면 우측에서 이미지 상세 페이지가 출력됩니다. 이 때 이미지 상세만 보면 가장 중요한 ①에 이미지 출처가 적혀있고, ④에 버튼이 있는 것을 발견할 수 있습니다.
모바일 ver. 구텐베르크 법칙
여기서 문득 의문이 들었습니다. 🤔 웹은 화면이 커서 가능하다지만.. 모바일도 구텐베르크 법칙을 따를까?
사진 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/
네! 모바일도 구텐베르크 법칙을 따릅니다! 하지만 웹보다 화면이 작아 고려해야할 점이 조금 더 많은데요, 이미지와 함께 알아봅시다!
Top vs Bottom (1)
사진 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/
앱을 사용할 때 버튼이 어디에 있는게 편하셨나요? 아래에 있는게 편하지 않으셨나요? 여기에도 구텐베르크 법칙이 적용되어 있습니다.
상단에 버튼을 배치할 경우, 사용자의 자연스러운 스캔 흐름에 어긋나게 되고, 완료 경로에서 멀어지게 됩니다. 뿐만 아니라 상단 버튼은 보통 화면 제목과 공간을 공유하기 때문에 하단 버튼보다 크기도 작아서 사용자가 찾기 더 어려워집니다.
Top vs Bottom (2)
사진 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/
버튼은 하단에 위치시키는거구나.. 그러면 버튼이 여러개가 하단에 있을 때는 어쩌지?
최하단에 두시면 됩니다! 구텐베르크 법칙에 따르면 사람의 시선은 중력의 영향을 받는다고 되어있는데요, 버튼이 최하단에 위치하지 않을 경우 중력에 반대되는 흐름이 되다보니 불편함을 느끼게 됩니다.
Left vs Right
사진 출처 : https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/
보통 오른쪽에 중요 버튼이 위치해있지 않았나요? 여기에도 구텐베르크 법칙이 들어갔는데요, 버튼을 왼쪽에 두면 사용자의 자연스러운 시선 흐름을 역행하게 되어 불편함을 느끼게 됩니다.
💡 Today 인사이트
- 중요한 내용은 좌측 상단, 우측 하단에 위치시키고, 사용자가 놓쳤으면 하는 내용은 좌측 하단에 위치시켜 전략적으로 기획하자
- 다른 위치에 중요한 내용을 위치시키고 싶다면 굵은 글자나 구성요소 조합을 이용하여 시선의 움직임을 이끌자.
- 모바일에서도 마찬가지로 버튼을 우측 하단에 위치시키는데, 버튼이 하나일 경우에는 하단 전체에 위치시키는 것도 고려하자
구덴베르크 다이어그램은 화면을 4 분할하여 사용자의 시선은 좌측 상단부터 시작하여 중력의 영향을 받아 조금씩 아래로 내려가 대각선 방향으로 이동해 우측 하단에서 끝난다고 하는 사용자의 시선 흐름을 이용한 콘텐츠 배치 법칙입니다. (자세한 내용은 실전 UI/UX - 포털 메일 서비스는 어떻게 다를까? 참조)
2) 스티븐 후버의 모바일 디바이스 파지 방법론
디자이너였던 스티븐 후버는 2013년, 1333명의 사람들을 관찰하여 그중 화면을 터치한 780명이 스마트폰을 어떻게 터치하였는지 통계자료를 발표합니다. 이 발표는 지금까지 모바일 디바이스 UX의 바이블로 일컬어지는 스티븐 후버의 모바일 디바이스 파지 방법론입니다. (원문 링크)
후버의 조사 결과에 따르면
사용자의 49%가 한손으로 스마트폰을 들고 엄지로 터치
사용자의 36%가 한손으로 스마트폰을 거치하고 반대편쪽 엄지로 화면을 터치
사용자의 15%가 양손으로 스마트폰을 거치하고 양쪽 엄지로 화면을 터치
구덴베르크 다이어그램과 엄지이론은 왼쪽 영역을 사용자가 가장 먼저 주시하고 터치하기 쉬운 이른바 핫스팟 영역으로 인식합니다.
그리고 많은 서비스들이 이 이론을 기초로 제작되었습니다. 약관동의 페이지도 마찬가지죠.
주요 서비스 회원가입 약관 동의 페이지 비교
실제로 많은 서비스들의 약관동의 페이지들이 왼쪽 상단 혹은 왼쪽 하단에 약관동의 체크버튼을 배치합니다.
구덴베르크 법칙과 엄지영역을 충실히 따른 결과물이죠.
그런데 말입니다. 약관동의 체크버튼, 실제로 터치할 때는 불편하지 않으셨나요?
구덴베르크 다이어그램은 인쇄물이 발달한 시기에 시작된 이론으로 Desktop에 적용하기는 적합한 이론일지 몰라도 모바일 디바이스에는 적용하기 한계가 있는 이론입니다.
우리에게 널리 알려진 엄지영역 이론에는 큰 맹점이 있습니다. 엄지영역이론은 발표된지 8년이나 지난 낡은 이론이고 8년동안 우리의 스마트폰 디바이스는 화면 사이즈가 2배 가까이 커졌다는 점이죠.
아이폰을 기준으로 비교해볼까요.
2011년 : 아이폰4s (3.5인치 / 58.6mm)
2012년 : 아이폰5 (4인치 / 58.6mm)
2014년 : 아이폰6 (4.7인치 / 67mm)
2018년 : 아이폰XS (5.8인치 / 70.9mm)
2019년 : 아이폰11 (6.1인치 / 75.7mm)
엄지영역 이론이 처음 발표된 시기의 스마트폰 가로 크기와 현재 사용 중인 스마트폰을 비교하면 가로 크기가 2cm 정도 증가했다는 걸 알 수 있습니다. 수치상으로 2cm지만 엄지 기준으로 보면 엄청난 변화죠.
디자이너인 스콧 허프는 디바이스 크기에 따른 엄지 영역 변화에 대한 연구를 발표합니다. 이 연구에서는 디바이스 크기가 커짐에 따라 엄지영역의 중심이 왼쪽에서 중앙으로 옮겨가고 있다는 걸 알 수 있습니다.
여러분이 약관동의 버튼을 터치하면서 불편함을 느꼈던 이유. 화면 사이즈가 커졌는데도 디자이너들은 구시대적인 엄지영역 이론에 사로잡혀, 관습적으로 왼쪽영역에 체크버튼을 뒀기 때문입니다.
왼쪽영역이 터치하기 불편하다면 체크버튼을 오른쪽에 둬보는 건 어떨까?
실제로 이러한 시도를 한 서비스가 있습니다. 바로 커피빈이죠.
커피빈과 스타벅스의 회원가입 약관 체크영역 비교
커피빈은 다른 서비스와 다르게 오른쪽 영역에 체크버튼을 두고 사용자의 터치를 유도합니다. 왼쪽이 불편하다고 해서 오른쪽으로 두는 것이 마냥 정답은 아닙니다. 왼쪽에 두냐 오른쪽에 두냐 각각 장단점이 있죠.
왼쪽에 뒀을 때 장점
많은 서비스들이 왼쪽에 체크버튼을 두고 있어 사용자는 학습효과로 왼쪽에 체크버튼이 있을 거라고 인지하고 있다. 인지 측면에서는 왼쪽에 체크버튼을 두는것이 더 효과적
오른쪽에 뒀을 때 장점
왼쪽에 비해 화면크기가 커져도 체크영역을 터치하기 수월하다. 시선 흐름대로 약관을 인지하고 체크할 수 있다.
왼쪽과 오른쪽은 각 서비스의 약관 개수, 텍스트 길이 등 다양한 조건에 따라 달라질 수 있습니다. 잘 고민해보고 각 서비스의 특성과 레이아웃을 고려해 어느 위치에 두는 것이 효과적일지 판단하면 됩니다.
안내문구와 체크영역
그동안 무심코 지나쳤던 안내문구.
안내문구도 어떻게 활용하느냐에 따라 체크영역의 접근성을 높일 수 있다는 사실.
다들 알고 계셨나요?
안내문구의 길이가 체크영역 사용성에 어떠한 영향을 미치는지 간단한 비교를 통해 알아보도록 하겠습니다.
최신 스마트폰의 화면 사이즈 5.8~6.2인치 기준으로 한손으로 스마트폰을 파지한채 엄지로 자연스럽게 터치가 가능한 이른바 엄지영역은 위 이미지상 주황색으로 표시된 부분입니다.
첫번째나 두번째 화면처럼 안내 문구가 없거나 짧다면 약관 체크영역이 상단에 위치하게 되어 터치를 위해 불필요한 동작을 유발하게 됩니다. 세번째 스타벅스의 경우는 좀 다르죠. 체크영역을 엄지영역에 위치시키기위해 의도적으로 콘텐츠 영역을 넓게 잡아 편의성을 높였습니다. 엄지영역의 기본 개념을 이해하고 그것을 UX에 잘 녹여낸 구성입니다. 알고보면 별거 아닌 디테일이지만 이런 디테일이 쌓이고 일관성을 가지게 되면 좋은 UI/UX를 갖춘 서비스가 될 수 있답니다.
필수값과 선택값의 표현
아무 생각 없이 동의 버튼을 클릭했다가 광고에 호되게 당해본적. 다들 한번쯤 있으시죠?
약관 동의 시 꼭 구분해야 하는 필수값과 선택값
우리가 사용하는 다양한 서비스들은 과연 필수값과 선택값을 어떻게 표현하고 있을까요?
필수값과 선택값의 UI를 알아보기 전에 먼저 필수값과 선택값의 개념을 이해해야 합니다.
이 개념을 알아야 필수값과 선택값 UI 구성 방식을 이해할 수 있기 때문이죠.
회원가입이나 서비스 이용을 위해 고객으로부터 무조건 동의를 받아야 하는 필수 정보는
1. 서비스 이용약관 2. 개인정보 수집 및 이용동의
2가지 항목뿐입니다. 이외의정보는 모두 다 선택항목입니다.
예를 들면
1. 제3자 정보 제공 동의 2. 마케팅 활용 동의 3. 광고성 정보 수신동의 4. 필수 항목 수집 및 이용동의 5. 그 외 개인정보 처리 위탁 및 수집 동의
이런 항목들은 모두 선택항목이 됩니다. 그동안 우리가 보았던 수많은 선택항목이 사실은 업체의 편의나 수익을 목적으로 강요되는 정보였을 뿐 서비스 이용에는 별로 필요가 없던 정보였던거죠.
이 개념을 이해하고 나서 다시 스타벅스의 약관동의 페이지를 살펴볼까요.
스타벅스는 이용약관 페이지에서 선택동의 항목을 최소화했습니다.
보기도 깔끔하고 사용자가 직관적으로 정보를 인식하고 취사선택할 수 있는 구성이죠.
스타벅스가 이용자에게 제공받을 정보가 없어서 광고성 정보 수신 동의만 선택항목으로 넣은걸까요?
아뇨. 스타벅스는 정확히 알고 있었던 겁니다. 쓸데없이 많은 정보를 요구하면 UI가 지저분해지고 사용자에게 피로감을 준다는 것(선택항목을 일일이 해제하거나 필수항목만 체크해야 하니까), 로그인 기반 서비스인 스타벅스 입장에서 복잡하고 지저분한 약관동의 페이지는 회원가입의 복잡도를 높이고 서비스 이용의 진입장벽이 될 수 있다는 것. 고객 충성도가 높고 앱에서 확실한 개런티를 제공하는 스타벅스마저도 그 사실을 잘 알고 있었기 때문에 선택항목을 최소화했던 겁니다.
서비스를 제공하는 업체의 입장에서 보자면 서비스 운영편의, 수익성 확보를 위해 고객에게 선택항목을 많이 동의받는 것이 좋으나 선택항목이 회원가입을 불편하게 하거나 유저들이 거부감을 느낄 정도가 되면 곤란합니다. 디자인이나 UI/UX로 쉽게 풀 수 있지 않냐고요? 아뇨. UI/UX는 만능이 아닙니다. 복잡한걸 쉽게 할 수는 없죠. 다만 복잡한걸 단순하게 보이게 하는 눈속임은 가능합니다.
우선 필수값과 선택값의 위치는 크게 두가지 형태로 구분됩니다.
본문 앞에 두느냐 본문 뒤에 두느냐.
본문 앞에 두는것과 뒤에 두는것과 어떤 차이가 있는 걸까요?
우리가 책을 읽을 때를 떠올려 보죠.
대부분의 책은 왼쪽에서 시작합니다. 책 뿐만 아니라 대부분의 텍스트 매체들이 왼쪽에서 시작해 오른쪽으로 끝나죠. 즉 우리의 눈과 뇌는 경험적으로 텍스트를 보면 자동적으로 왼쪽에 시선이 가는데 익숙해져 있다는 이야기입니다. 필수값을 앞에 두면 사용자가 해당 항목이 필수값인지 선택값인지 빠르게 인지할 수 있게 됩니다. 반대로 뒤에 두면 인지 속도가 그만큼 느려지게 되겠죠.
자 다시 스타벅스의 약관 페이지를 볼까요.
스타벅스는 필수값, 선택값 표시를 뒤로 두고 필수값과 선택값의 시각적 구분이 어렵도록 본문과 동일한 검정 폰트를 사용했습니다. 다른 서비스들이 필수값이나 선택값에 컬러를 줘 본문과 구분이 되게끔 한 것과 비교해보면 특이한 구조죠. 모던한 디자인을 위한 선택일까요? 사용자의 눈속임을 위한 얄팍한 상술일까요?
커피빈과 스타벅스의 약관동의 페이지를 비교해볼까요?
커피빈은 사용자가 약관을 인지하는 순서가
1. 필수/선택정보 확인 2. 약관 내용 확인 3. 체크
순의 구성이 됩니다
필수값을 확인하고 약관명을 확인하고 체크 여부를 결정하는 정석적인 형태입니다.
오른쪽에 체크박스를 두면 사용자의 시선흐름과 논리적인 선택과정이 일치하는 형식으로 UI 구성이 가능해집니다. 반대로 왼쪽에 체크박스를 두면 무의식적으로 체크박스를 누르고 내용을 확인하거나 내용을 확인하고 체크박스를 누르는 논리적인 선택과정에 벗어난 구성이 되죠.
커피빈의 약관동의 페이지나 스타벅스의 약관동의 페이지 모두 치밀하게 잘 구성된 UI입니다. 의도는 약간 다르지만요.
필수값, 선택값을 표시할 때 가장 중요한 요소.
정석적으로 고객이 필수값과 선택값을 인지하고 올바르게 선택할 수 있도록 안내할 것이다.
선택항목의 동의율을 높이기 위해 약간의 눈속임을 허용할 것이냐.
자 이제 잘 만든 약관동의 페이지를 봤으니 최악의 약관 동의 페이지도 봐야겠죠.
서점직원이 선정한 최악의 약관동의 페이지는 바로!
더 이상의 자세한 설명은 생략한다.
오늘은 가볍게 약관동의 페이지를 설계할 때 고려할 자잘한 UI/UX의 기술들을 알아보았습니다.
저출산 고령화로 인해 시니어에 대한 관심이 높아지고 있습니다. 뒷방 늙은이, 꼰대 등 부정적인 단어로 점철되었던 시니어 세대가 소비의 중심으로 화려하게 부활한 세상.
소비 주력 세대가 된 시니어. 그리고 시니어를 위한 UI/UX 아티클의 범람.
정말 시니어를 위한 UI/UX는 필요한 걸까요?
왜 시니어를 위한 UI/UX가 주목받게 된 걸까?
시니어 세대가 소비 주축 세대로 주목받게 된 가장 큰 이유. 인구구조 변화에 따른 초고령화 사회로의 전환 때문입니다.
2020년을 기준으로 전체 인구 중 65세 이상 시니어 인구가 차지하는 비중은 15.7%로 과거에 비해 많이 늘어나긴 했습니다만 아직 걱정할만한 수치는 아닙니다. 문제는 우리나라가 전세계적으로 유례가 없는 출산율 0.8대의 초저출산 국가라는데 있습니다. 20년 후인 2040년에는 전체 인구 중 시니어 인구가 차지하는 비중이 34.4%, 50년 후인 2070년에는 전체 인구의 절반 가까이가 65세 이상인 초고령화 사회가 됩니다. 미래를 선제적으로 대비하고 시장을 선점해야 하는 기업입장에서 인구구조 변화에 따른 서비스의 방향성이나 마케팅 포인트를 전환해야 할 시기가 점점 다가오고 있다는 뜻이죠.
출산율 저하와 고령화 사회로의 진입은 한국뿐만 아니라 전세계적으로 벌어지고 있는 현상이긴 합니다만 한국은 그 속도가 유독 가파릅니다.
현재 추세로 보면 한국은 세계에서 인구 고령화 비율이 가장 높은 일본 (2018년 기준 28.1%)을 2043년에 추월해 (한국 36.4%, 일본 36.35% / 통계청 2019 장래인구추계) 세계 1위의 초고령 국가가 될 것으로 전망됩니다.
인구구조 변화 이외에도 기업들이 시니어 시장에 주목하는 이유가 하나 더 있습니다. 바로 세대별 자산 격차인데요. 서울연구원 조사에 따르면 산업화세대(40~54년생), 베이비부머(55~74년생), X세대(75~84년생)까지는 자산축적이 원만한 상승곡선을 그리며 세대별 격차가 엇비슷해지지만 Y세대(85~96년생)로 오면 이전 세대들과 자산 격차가 심화되는 경향이 있습니다. 가장 큰 원인은 부동산 상승을 꼽을 수 있는데요. 이전 세대들은 고도성장기와 부동산 상승을 경험하며 수월하게 자산을 축적할 수 있었지만 고도성장의 기회도 부동산을 구매할 기회도 사라져버린 Y세대는 자산축적의 소중한 기회와 시간을 박탈당했고 그 결과가 벌어진 자산격차로 나타나게 되었습니다.
이는 다른 통계로도 확인할 수 있는데요. 동일한 20대 후반의 나이에 X세대(75~84년생)는 8897만원의 자산을 보유한 반면 Y세대(85~96년생)는 절반인 4094만원의 자산을 보유하고 있습니다. 똑같은 나이에 Y세대는 X세대의 절반의 자산만 보유하고 있다는 얘기인데요. 단순히 노오오력의 문제로 치부하기엔 세대별 자산격차와 기회의 불평등이 각종 통계자료로 증명되고 있는 셈입니다.
인구구조 변화에 따른 시니어 세대의 증가, 소비의 주축으로 성장해야 할 미래세대가 가난과 불평등으로 인해 자산을 제대로 축적하지 못하고 그들의 소비가 위축되면서 기업들은 새로운 소비시장을 찾게 됩니다. 그리고 기업들이 찾은 새로운 소비시장이 20대들에 비해 경제적으로 풍족한 기성세대들이었던거죠.
기업들이 시니어 세대를 주목하는 이유가 하나 더 있는데요. 현재 시니어 연령인 산업화 세대(40~54년생)들에 비해 4060으로 대표되는 베이비부머 세대와 X세대는 이전세대에 비해 IT기기의 활용에 능숙합니다. 코로나 판데믹으로 비대면 소비가 보편화되면서 이커머스와 온라인 소비에 능숙해진 액티브 시니어가 등장하게 되었고 구매력이 강한 중장년층이 소비시장의 큰손으로 떠오르게 되면서 기업들이 액티브 시니어를 주목하게 된것이죠.
TV 자막이 커졌다?
오랜만에 TV를 켠 서점군. SBS 뉴스를 보고 깜짝 놀라고 맙니다.
어 TV 자막이 왜 이렇게 커진거야??
(좌) 2021년 SBS 뉴스 / (우) 2015년 SBS 뉴스
TV 자막이 과거에 비해 확연히 커졌는데요. 이게 서점군의 착각이 아닌 것이 실제로 옛날뉴스와 요즘 뉴스의 자막을 비교해보면 1.5배 정도 자막 크기가 커졌다는걸 알 수 있습니다.
유튜브와 OTT로 대표되는 뉴미디어의 성장, 젊은 세대가 더 이상 티비를 보지 않게 되고 티비 주 시청층이 고령화되면서 일어나게 된 현상인데요. 사실 이러한 현상은 우리보다 먼저 초고령화시대에 진입한 일본에서 먼저 벌어진 현상입니다. 젊은 층이 티비를 외면하고 티비 시청층이 점점 더 고령화되면 앞으로 공중파 방송은 일본처럼 자막이 점점 커지고 자막이 방송 화면의 절반 이상을 뒤덮는 수준으로 변화하게 될겁니다.
(좌) TV조선 미스터 트롯 / (우) MBC 음악중심
이러한 변화를 극명하게 보여주는 것이 바로 음악방송입니다.
중장년층의 시청 비율이 높은 TV조선 <미스터 트롯>의 경우 노래 가사의 자막이 화면의 1/3을 차지할 정도로 큰것에 비해 젊은층이 주로 시청하는 MBC <음악중심>은 미스터 트롯에 비해 자막 크기가 확연하게 작습니다. 같은 가수가 노래를 부르는데도 말이죠.
우리가 모르는 사이에 세상은 시니어를 중심으로 조금씩 변하고 있습니다.
세상은 빠르게 변화하고 있는데, 이제와서 시니어 UI/UX를 얘기하는 건 어쩌면 조금 뒤늦은 담론일지도 모르죠.
시니어를 올바르게 이해하기
최근 시니어를 위한 아티클이 범람하고 있습니다. 키오스크와 은행 ATM기의 불편함이라던가, 고대비나 글자 크기라던가 뭐 그런것들 말이죠. 그런데 이런 개념은 이미 10년전, 모바일앱이 막 시작되던 시기에도 존재했던 개념입니다. 최근 들어 주목받았을 뿐 별로 새삼스럽거나 새로운 개념은 아니라는 겁니다.
그런데 말입니다. 우리는 정말 시니어 세대를 올바르게 이해하고 있는걸까요?
글자크기를 크게 하고 고대비를 맞추고 그런게 정말 시니어를 위한 UI/UX일까요?
어머니는 보청기가 싫다고 하셨어
예전부터 청력이 안좋으셨던 어머니,
서점군은 수차례 보청기 착용을 권유했지만 어머니는 이래저래 핑계를 대며 만류하셨습니다.
최근에 급격히 청력이 떨어지신 어머니. 결국 보청기를 착용하기로 하고 그동안 보청기를 착용하지 않았던 속내를 털어놓으셨습니다.
서점군의 어머니 曰
사실 보청기 차면 같이 일하는 박씨가 놀릴까봐... 좀 창피해서...
생활의 불편함에도 불구하고 그동안 어머니가 보청기 착용을 거부했던 이유.
착용의 불편함이나 금전적 부담이 아니라 바로 쪽팔려서 였습니다.
사실 우리는 잘 모르지만 시니어 세대들 사이에서는 과시와 자랑이라는 문화가 있습니다.
어휴 우리 아들이 이번에 서울대를 갔어
어휴 그러지 말라고 했는데 아들이 최신 우주폰을 사줬네
그리고 이런 과시와 자랑은 건강부문에서도 예외가 없죠.
어휴 김여사 나이가 몇인데 벌써 무릎이 안좋아? 나는 아직 쌩쌩한데?
어휴 김여사 벌써부터 보청기를 껴? 김여사 많이 늙었구나 ㅎㅎㅎ
일명 시니어 세대들의 구분짓기
젊음과 건강함을 과시하는 문화
시니어 전용템을 차면 창피해하고 서로 핀잔을 주는 문화
우리세대로 비교하면 뭐랄까요. 짝퉁 조던을 신고 온 친구에게 꼽을 주는 문화와 비슷하다라고 보면 될까요?
자 이제 이걸 스마트폰에 대입해봅시다.
돋보기 어플을 사용하시는 어머니. 어르신 전용 메신저 어플을 사용하시는 어머니.
이런 어머니를 보며 박여사님은 이런 얘기를 하시지 않을까요?
어휴 김여사 벌써 눈이 침침해? 이게 잘 안보여???
어휴 김여사 시대가 어느 시댄데 어르신 카카오톡을 써? 나는 걍 카카오톡 쓰는데 ㅎㅎㅎ
우리가 시니어를 위해, 혹은 배려랍시고 만든 것이 사실은 그들의 마음을 불편하게 했던 건 아닐까요?
자 우리 한번 생각해봅시다.
내가 생각하는 효도폰(보급형 우주폰)과 어머니가 생각하는 효도폰(최신형 플래그십)의 차이
정작 시니어 세대를 마음속으로 무시하고 배려해야 될 대상으로 생각했던건 우리가 아닐까요?
보편적인 UI/UX
시니어들에게 필요한건 그들만을 위한, 그들을 배려하는 UI/UX가 아닙니다.
최근 논쟁이 되고 있는 키오스크 문제도 마찬가지입니다. 많은 사람들이 키오스크를 어르신들이 이용하게 불편하다 라는데 초점을 맞추고 접근합니다. 젊은 사람들이 이용하기에도 키오스크는 복잡하고 불편하다는 현실을 애써 외면하면서 말이죠.
우리에게 필요한건 시니어를 위한 특별 모드나 전용 기기가 아니라 어른도 아이도 누구나 쉽게 사용할 수 있는 보편적인 UI/UX입니다.
어쩌면 시니어를 잘못 이해한 것은 우리인지도 모릅니다.
시니어를 위한 UI/UX 같은 건 없습니다.특정 계층이나 사용자에 맞춘 UI가 아니라 남녀노소 누구나 쉽고 편하게 사용할 수 있는 보편적인 UI. 그게 프로덕트를 만드는 사람들이 가져야 할 참된 자세는 아닐까요?
