내 디자인이 여러 연령대가 공존하는 환경 속에 있다면
UX 디자이너를 위한 [냅다 피그마부터 열지 말고] 매거진은, 단순히 ‘멋진 디자인’이 아니라 심도 깊은 ‘User eXperience’를 이해하고 설계할 수 있도록 여러 디자인 개념과 이론, 흥미로운 인사이트를 소개합니다. 해외 아티클부터 제가 직접 느낀 사례까지, 여러 자료를 특정 주제로 묶어 정리해 한 편씩 발행돼요.
❶ 소제목 “ㅡ를 디자인하고 싶다면”을 확인해요.
❷ 공감되는 제목이라면 가볍게 읽어보세요.
❸ 다 읽었다면, 이제 피그마로 돌아가 디자인에 적용해봐요.
When designing for both adults and children, what aspects do you need to consider? Our guest today is Nathalie Stratton, the co-founder and head of product at Hearth Display. You’ll learn the story behind their product, how they researched users in different age groups, how the team approached prototyping and testing, and more.
오늘 소개할 서비스는 Hearth Display: 가족의 일정을 집 중앙에서 관리할 수 있는 터치스크린입니다. 가정 내 모든 구성원이 보다 쉽게 각자의 책임을 나누고 관리할 수 있도록 도와주는 서비스인데요. 개인 맞춤형 계획 및 관리 도구를 통해 일정을 간단하게 구성하고, 각 구성원의 독립성을 키울 수 있도록 지원하는 것을 목표로 합니다.
Hearth Display is a centralized touchscreen that makes family organization an easier, shared responsibility for everyone in your home. Our personalized planning and management tools make it simple to build routines + develop independence.
디자이너 Nathalie Stratton가 Hearth Display를 디자인하며 고민했던 부분, 사용자 리서치를 통해 얻었던 흥미로운 인사이트를 번역해 공유해 봅니다. 주로 1)각기 다른 가족 구성원들을 동시에 고려하기 위해 진행한 리서치 2)사용자 리서치를 통해 얻은 구성원 별 사용 패턴 등에 대한 내용이었고, 굉장히 재밌었어요.
이 서비스의 주요 기능부터 간략하게 소개하자면 총 4가지 정도. To-do(할 일), Shared Calendars(일정 공유), Routine(루틴), Hearth helper(가정 도우미)를 가족 단위로 사용 및 관리합니다.
① To-do: 당신의 정신적 부담을 가족 모두가 트래킹하고 담당할 수 있는 '할 일'로 바꿔보세요.
* 각 구성원에게 맞는 주기로 반복적인 작업을 쉽게 따라갈 수 있도록 해요. 가족 누구나 쉽게 할 일을 생성하고 완료하도록 디스플레이나 앱에서 바로 조작할 수 있게 하며, 필터링 기능을 통해 중요한 일을 우선 정렬합니다. 특히 할 일을 완수했을 때는 성과에 대해 충분히 축하해줄게요.
② Shared Calendars : Google, iCal, Outlook 캘린더를 한 곳에 연결하세요.
* 가족 구성원 각자의 캘린더를 연결하고 색상, 표시할 정보 등 자신의 취향에 맞게 커스터마이징 할 수 있어요. 우리의 디스플레이는 모든 캘린더를 연동시킬 수 있습니다.
③ Routines: 자립심을 키울 수 있는 루틴을 만들고 맞춤 설정하세요.
* 우리 가족의 실제 생활에 맞는 유연한 루틴을 만드세요. 하루를 건너뛰거나, 특정 요일에만 루틴을 설정하는 등 자유롭게 설계할 수 있습니다. 모든 연령대의 아이들을 위해, 카드와 리스트 보기 기능 및 아동 친화적 아이콘으로 나이와 발달 정도에 맞는 시각 자료를 제공합니다.
④ Hearth helper: 텍스트와 사진 업로드만으로 쉽고 빠르게 일정을 업로드해요.
* SMS-AI 어시스턴트가 당신이 보내는 모든 것을 문자 한 통으로 Hearth Display에 디지털화하여 업로드합니다.
어떤 서비스인지 감이 오시나요? 한 마디로 정리하자면, 캘린더와 일정 기능을 기반으로 가족 구성원 모두가 각자 할 일을 담당, 루틴처럼 꾸준히 실천하는데 도움을 주는 서비스입니다. 특히 “아이들” 습관 형성(집안일하기, 본인이 꼭 해야하는-숙제- 일 마무리하기 등)에 효과적인 기여를 할 것 같네요. 이런 서비스를 디자인한 Nathalie Stratton의 이야기는 아래와 같습니다.
"우리는 이미 모바일과 데스크탑과 같은 디스플레이를 익숙하게 사용하고 있지만, 큰 스크린은 다릅니다. 따라서 집 안에 Large Display가 설치됐을 때, 어떤 경험을 하게 되는지부터 들여다봤어요."
① Role and Pattern around the size
같은 컴포넌트여도 디스플레이 크기에 따라 사이즈도, 위치도, 역할도 달라진다.
② One feet vs Ten feet experience
스크린을 어느 거리에서 보냐에 따라 "보고 싶은 정보"가 달라지며, "취하는 액션"또한 달라진다.
원거리에서는 간략하게 정리된 정보를 한 눈에 '보고' 싶어할테고, 근거리에서는 자세한 정보를 '읽고 조작하고' 싶어할 것이란 이야기죠. 확실히 늘 가까이에서 조작하는 모바일 디스플레이가 아닌 이상, 사용자의 다양한 이용 맥락: "거리"를 고려한 정보 구분과 그에 맞는 인터페이스 디자인이 필요합니다. 이를 위해 Nathalie Stratton는 많은 시나리오를 디자인해보며 거리에 따라 필요로 하는 정보가 무엇인지 확인해봤다고 해요.
③ Early adopter, skilled digital native
신기술에 능한 얼리어답터(밀레니얼을 포함한 앞으로 부모가 될 Gen-Z세대)일수록, 디지털 환경에 익숙하기 때문에 서비스의 신뢰성과 정교함에 더 예민하다. 이 포인트를 잘 잡아야한다.
④ Prototype Is Important!
"우리는 32인치 스크린 프로토타입을 통해, 아이들이 버튼을 누르기 위해 손을 (힘들게) 뻗어야하는 걸 발견했어요. 그리고 벽에 설치할 시 긴 높이 때문에 스크린 절반(아래만) 이용할 수 있었죠."
서비스 디자인에서 프로토타입은 필수입니다. Hearth Display는 이 UT를 통해 어른이 조작해야하는 높은 레벨의 권한(컨트롤 버튼 등)은 아이 손에 닿지 않을 스크린 상단에 배치했어요. 반면 아이가 주로 이용해야하는 버튼은 최대한 하단에 배치시킴으로써 손을 어렵게 뻗지 않아도 쉽게 터치할 수 있게 했고요.
특히 흥미로웠던 User insight는 바로 5세 미만 아동이었습니다. 아마 사이트에서 소개된 [모든 연령대의 아이들을 위해, 카드와 리스트 보기 기능 및 아동 친화적 아이콘으로 나이와 발달 정도에 맞는 시각 자료를 제공합니다.] 부분에 대한 디자인 인사이트 같아요.
① Non-reader → need different type of information experience
"글자를 읽지 못하기 때문에 텍스트가 아닌 시각적 정보를 제공해야했습니다. 따라서 아이들이 사용할 Go to Bed라는 버튼을 제공할 때 Hearth Display는 텍스트 대신 이모지를 이용했어요. 이런 시각적 요소는 아이들로 하여금 서비스가 더욱 재밌는, 마치 게임 같은 콘텐츠라 느껴지게 만들었죠."
텍스트 대신 이모지? 글만 보면 어린 아이들을 위한 '당연한 디자인' 같겠지만, 지금 당장 [가족 구성원이 함께 쓰는 서비스]를 디자인을 해야한다 생각해보세요. 엄마, 아빠, 할머니, 초등학생, 대학생.. 이 떠오르며 아마 모든 페이지와 버튼 등을 텍스트 기반으로 디자인했을 것 같지 않나요? (필요하면 그래픽 좀 넣구요.) "다양한" 사용자 리서치가 중요한 이유입니다. 만약 어린 아이를 대상으로 UT를 진행하지 않았더라면, 이런 디테일을 쉽게 생각하긴 어려웠을거예요.
② Used to digital interaction
어렸을 때 부터 스마트폰을 갖고 놀아서였을까요. 드래그 앤 드롭, 스와이프 등과 같은 인터랙션에 능숙했다해요. 의외의 행동 패턴이었습니다. 그래서 Hearth Display는 이런 인터랙션을 기반으로, 어떻게 하면 그들의 경험이 단순해지고 빨라질 수 있을지 고민했다고 해요.
추가로 Nathalie Stratton는 아이를 위해 디자인된 좋은 서비스로 Duolingo를 언급했어요. 듀오링고는 3-6세 아동을 위한 언어 학습 앱으로, 일러스트 위주의 정보 구성과 복잡하지 않은 레이아웃, 큰 버튼과 텍스트등이 눈에 띕니다. 이런 특징들이 바로 아동을 위한 디자인 원칙이고, Hearth Display가 반영하려 노력한 부분이라 예상되네요.
다중 사용자 서비스. 같이 쓰는 스크린일 수록, 디자이너는 서로 다른 멘탈 모델을 ‘동시에’ 고려할 필요가 있습니다. 하지만 모든 패턴을 일일히 다 반영할 순 없어요. (불가능하죠. 짬뽕탕 디자인이 될테니..) 따라서 다중 사용자일 때도 주 사용자가 누구이고, 어떤 특징이 있는지 우선 순위를 설정해야해요.
Hearth Display가 5살 미만의 아동을 위해 서비스 내 모든 텍스트를 이모지로 대체하고, 스크린 상단에는 정보를 배치하지 않는 등의 극단적인 디자인을 하진 않았잖아요. 디지털 앱을 익숙하게 사용하는 성인부터 초등 자녀까지를 우선 타겟으로 설정했다면, 추가로 "어린 아이도 함께 쓸 상황을 고려하여" 그 아이들이 주로 사용할 버튼 몇 가지를 이모지로 대체하는 <디테일>을 만드는 것이 바로 다중 사용자를 위한 디자인의 기본이자 시작으로 생각됩니다.
* Podcast: [Designing for Families with Nathalie Stratton]
When designing for both adults and children, what aspects do you need to consider? Our guest today is Nathalie Stratton, the co-founder and head of product at Hearth Display. You’ll learn the story behind their product, how they researched users in different age groups, how the team approached prototyping and testing, and more.
https://hearthdisplay.com/pages/features