키즈용 UX 디자인을 할 때 고려해야 할 점
이번 글에는 2017년 키즈를 위한 IPTV 프로젝트 진행 당시 데스크 리서치를 진행하며 공부한 '키즈 UX 디자인을 할 때 고려해야 할 점'을 몇 가지 정리해보았다. 아이 성장발달에 관해서는 더 전문적인 분석 결과가 많고 아래는 인터넷으로 접근 가능한 겉핥기에 불과하다. 하지만 간단하더라도 이런 스터디를 사전에 해놓았기 때문에 UI 디자이너로서 방향을 잡는데 큰 도움이 되었다.
1. 타겟은 키즈뿐만이 아니다
키즈 서비스라니 얼핏 어린이만을 대상으로 디자인하면 될 것처럼 보인다. 하지만 실제 서비스 사용 행태를 살펴보면 콘텐츠를 소비하는 키즈 외에도 서비스를 선택·구매(Buyer)하고, 키즈의 요청에 따라 인터페이스를 조작하는(Interface User) 보호자 타겟이 있다. 디자이너는 키즈와 보호자 두 타겟을 동시에 고려해야 한다. 특히 TV는 오브젝트(TV 화면)와 컨트롤러(리모컨)가 분리되어 있어 직관성이 떨어지기 때문에 어린이가 직접 사용하기는 어렵다. 결국 TV 인터페이스를 진짜로 사용하는 사용자는 어른일 가능성이 높다.
여기서 키즈 서비스를 대하는 보호자 타겟의 특성 중 염두에 두면 좋을 항목들은 아래와 같다.
보호자 타겟의 니즈
- 아이가 무언가를 배우고 있고, 안전한 환경 안에 있다고 느끼고자 함
: 실제로 서비스에 교육 콘텐츠와 안전장치가 있으면 더욱 좋지만, UI 디자인에서도 교육적이고 안전한 느낌을 줄 수 있다. 사과/바나나 그림이 있거나 알파벳으로 꾸며져 있는 것만으로도 키즈에겐 교육이 될 수 있다. 하다못해 칠판이나 책 그래픽으로 꾸며주는 것만으로도 부모들은 교육적인 느낌을 받는다. 어른들이 사용하는 인터페이스와 시각적으로 분리되어 보이는 것도 부모들이 '안전한 환경에 진입했구나' 느끼게 만들어준다. 여기서 어른용 인터페이스로 빠져나갈 때 이를 막아주는 몇 장치를 더해주면 더 좋다.
- 이미지와 텍스트는 어린이 연령에 적합해 보이는 것을 좋아함
: 키즈의 선호도 외에도 어른들이 보기에 적합해 보이는 것이 중요하다. 밝은 컬러 팔레트를 쓰고 편안한 메타포를 사용하자. 너무 게임 같거나 어두운 디자인 컨셉은 키즈가 좋아할지라도 부모가 싫어할 수 있다.
- 부모 자신의 흥미를 끄는 요소가 있는 것을 선호함
: 돈 주고 사는 사람은 부모니까.
- 부모만 접근할 수 있는 섹션이 있는 것을 선호함
: 순수하게 키즈용 인터페이스로만 이루어져있지 않고 '설정' 페이지가 있어 부모가 세팅을 바꾸거나 이력을 관리하는 등의 기능이 있으면 선호도가 올라간다. 부모만 접근할 수 있도록 비밀번호를 걸어놓는다거나 메뉴 이름에 '부모용'이라는 느낌을 줘도 괜찮다.
- 부모는 자신이 참여한 디자인을 선호함
: 설정에서 색이나 배경 이미지를 바꿀 수 있으면 좋다. (이런 기능을 개발할 정도로 여유가 있다면)
2. 나이에 따른 차이가 크다
성인용 설문지에는 연령이 '10대, 2~30대, 4~50대, 60대 이상'으로 쪼개져있곤 한다. 성인이 10~20년 정도는 가볍게 하나의 카테고리로 묶이는 데에 반해 키즈는 아주 적은 나이차에도 크게 다른 모습을 보인다. 이번 프로젝트의 경우 시작할 때 타겟 연령대가 정해져 있었기에 이 부분을 오래 논의하진 않았지만, 키즈 서비스를 새로 시작하려 한다면 메인 타겟의 나이대를 구체적으로 정해두고 구성원들끼리 공유하기를 추천한다.
연령층이 조금만 어긋나도 초등생에게는 유아용 디자인이 유치해질 수 있고, 또 조금만 높게 잡아도 유아에게는 너무 어려워질 수 있기 때문이다.
아래는 당시 참고한 영문 아티클의 내용을 간단히 요약한 내용이다. 이 아티클에서는 아이를 연령별로 4개 그룹으로 묶어서 나이에 맞는 UX 팁을 작성해놓았다.
(참고 - http://designshack.net/articles/graphics/website-design-for-kids-tips-and-advice)
Very young kids(Ages 3-5)
- 밝은 컬러, 귀여운 캐릭터, 자연 테마에 반응이 좋음
- 컬러와 폰트 팔레트를 미니멈 하게 유지
- 텍스트보다 그래픽과 사운드를 강조
Young kids(Ages 6-8)
- 단순한 단어는 사용 가능
- 사람 그래픽을 많이 쓰고 덜 만화같이 보이도록 하는 것을 추천
- 보다 깊은 색상 구성이 가능
Older kids(Ages 9-12)
- 참여하고 싶어 하므로 상호작용할 요소를 더할 것을 추천
- 단어와 이미지를 혼합적으로 사용
- 인터랙티브 게임방식이 유용한 타겟
- 컬러 팔레트와 텍스트 타입을 더 다양하게 사용 가능
Teens(Age 13-)
- 성인 타겟 디자인과 유사한 것을 선호
- 집중력이 짧을 수 있으니 주의를 끄는 것이 필요
- 더 어둡고 깊은 색상 사용 가능
3. 키즈는 감정적이며 자아 중심적이다. 조바심이 많고 고집도 있다.
- 너무 오래 기다리게 하지 않기. 그것이 콘텐츠 결과물이든, 혹은 버튼을 눌렀을 때 발생하는 단순한 사운드나 화면 전환이든 뭐든 피드백을 빠르게 주기 위해 노력해야 한다.
- 그래도 기다려야 한다면? 기다리는 동안 재미있게 만들어라. 주의를 끌어라. 어린이의 흥미를 끄는 재미있는 로딩 애니메이션은 어른이 보기엔 지루해 보여도 키즈에겐 그 자체로 또 재미있는 콘텐츠가 될 수 있다.
- 일관성. A 버튼을 누르면 A가 일어난다는 것을 이미 학습했는데 다른 화면에서 작동하지 않는다면 키즈는 그 상황을 이해하기 어려울 것이다. 화가 나서 연타를 한다거나 배신감을 느끼고 좌절할 수 있다. (쓰고보니 어른도 마찬가지인 것 같긴 한데)
4. 특수한 사용성을 고려하자
1) 터치 행태
- 버튼은 크게.
손가락이 작다고 버튼을 작게 디자인 하진 않겠지. 어른보다 섬세한 조작이 어려울 수 있다. 버튼이나 터치 영역은 크고 시원하게 만들자.
- 버튼 같이 생긴 것에는 피드백이 있도록 하자.
버튼 옆에 단순 장식 요소로 피아노 건반을 그려놓으면 아이들은 버튼이 아니라 건반을 누를 수 있다. 단순한 피드백이라도 설정한다면 그것만으로도 재미있는 놀이가 될 수 있다.
- onRelease 시점이 아닌 onPress 시점에 이벤트가 있는 것을 추천한다.
키즈는 무언가를 누르거나 탭 하는 경험이 살면서 익숙한데, tap-release 보다 tap-hold를 하는 경우가 많다. 그래서 버튼을 누른 후 뗄 때 피드백이 있도록 하면 키즈가 누르고 있는 동안 아무것도 일어나지 않을 수 있다. 이벤트가 누르는 시점에 일어나면 더 즉각적인 피드백이 가능하다. (누르고 떼야 이벤트가 일어난다는 것을 체화시키고 싶다면 굳이 이렇게 설정하지 않아도 될 듯)
2) 내비게이션
- 키즈는 미디어 자체를 탐험한다.
어른은 '영화 시청' 같이 특정 목적을 이루기 위해 인터페이스를 탐색하고 이용하지만 키즈에게는 인터페이스 자체를 켜고, 화면을 전환하고, 옆으로 이동하고, 버튼을 누르는 모든 '탐색 경험' 자체도 목적이 될 수 있다.
- 키즈에게 팝업 등의 갑작스러운 화면은 경험을 단절시킬 수 있다.
특히 텍스트를 읽지 못하는 키즈에겐 더 그럴 것이다. 가능한 팝업으로 가로막지 말되, 필요하다면 'X' 버튼을 크게 강조하자.
- 다음 단계로 가기 위한 힌트를 적극 사용하자.
인터페이스를 사용하다가 진행이 가로막히거나 반응이 없을 때 좌절하지 않도록 도와준다.
- Gamification을 고려해보자.
키즈에게는 Gamification이 더 효과적이다. 성취 요소를 통해 능동적 참여를 유도할 수 있다. 디자인면에서도 게임 스타일을 사용하면 흥미를 끌고 진행을 도울 수 있다.
5. 메타포는 한번 더 생각해보자
- 추상적 메타포는 다시 한번 생각해보자.
어른은 돋보기 아이콘이 검색이고, 엑스 버튼은 무언가를 닫거나 취소하고, 햄버거 버튼으로 메뉴를 켤 수 있다는 것을 알고 있다. 하지만 이런 픽토그램은 학습에 의한 것이므로 키즈가 직관적으로 알 수 없다는 것을 염두에 둬야 한다.
다만 '절대 쓰지 말라'라고 안 하는 이유는, 오히려 인터페이스에 사용함으로써 아이들에게 그 의미를 교육시킬 수도 있기 때문이다. 빠른 인지가 필요한지, 교육이 필요한지 두 가지 측면을 다 고려해 적절하게 디자인하자.
- 텍스트보다는 이미지로, 이미지보다는 이미지+텍스트로.
키즈는 위치와 이미지로 기억하므로 텍스트보단 이미지가 좋다. 이미지에 텍스트까지 더해져 있으면 교육효과도 있으면서 어른들도 사용하기 편하다.
종합해보자면, 메뉴를 디자인할 때 픽토그램보다 더 설명적인 이미지를 사용하면서, 각각의 형태와 색 구분이 쉽고, 텍스트도 함께 사용하는 방식을 추천한다.
6. 과장하는 것을 두려워하지 말자
- 밝은 색상은 어린이의 주의를 끌 수 있으며, 명확한 색 대비를 사용하는 것이 덜 자란 어린이의 눈에 효과적이다. 색상 교육 효과도 덤으로 노릴 수 있다.
- 버튼, 메뉴, 이미지들을 과장하자. 크고 잘 보이게 디자인해서 시선을 끌어 누를 수 있다는 것을 쉽게 알아챌 수 있도록 하자.
- 그중 내비게이션을 가장 과장하자. 키즈에겐 인터페이스의 계층 개념이 어렵다. 어디서든 내비게이션을 가장 과장해서 다음 흐름이 끊이지 않도록 하자.
- 애니메이션/사운드 등의 효과를 적극 활용하자.ㅍ특히 사운드는 집중력이 낮아졌을 때 키즈를 환기시켜주기 좋은 수단이다.
'Kids TV UX/UI Design' 결과물은 아래 비핸스 링크에서 확인하실 수 있습니다 :)
그 외의 다른 작업들은 제 포트폴리오 홈페이지에서 보실 수 있어요! (계속 업데이트 중)
* 참고한 아티클들
http://webdesign.tutsplus.com/articles/the-finer-details-of-ux-for-kids--webdesign-17316
http://designshack.net/articles/graphics/website-design-for-kids-tips-and-advice
https://www.usertesting.com/blog/2015/04/29/ux-for-kids
http://webdesign.tutsplus.com/articles/the-building-blocks-of-designing-ux-for-kids--webdesign-17303
