어린이 웹사이트를 디자인하는 방법: 6가지 최고의 UI 및 UX 사례

대중적인 견해와 달리 오늘날의 세계에서 인터넷을 사용하는 사람들은 10대와 "붐 세대"만이 아닙니다. Nielsen Norman Group에서 실시한 연구에 따르면 3-12세 사이의 어린이는 이제 웹사이트와 앱을 능숙하게 사용합니다.

그렇다면 이것이 개발자에게 의미하는 바는 무엇입니까? 간단히 말해서, 이제 개발자는 대상 사용자 인구 통계를 확장하고 웹 사이트와 앱이 젊은 사용자에게 최적화되어 있는지 확인해야 합니다.

불행히도, 아동용 웹사이트를 디자인하려면 많은 기술과 세부 사항에 대한 관심이 필요하기 때문에 이것은 상당히 어려울 수 있습니다. 몇 가지 유용한 팁과 집중해야 할 핵심 영역을 자세히 살펴보겠습니다.

아동 친화적인 웹사이트를 만든다는 것은 무엇을 의미합니까?

어린이용 웹사이트를 만들 때 가장 먼저 경험해야 할 원칙은 단순화입니다. 어린이의 인지 기능은 일반 성인 사용자보다 덜 발달되어 있으므로 인터페이스와 기능을 단순화하는 것이 중요합니다. 이것은 간단한 텍스트와 물론 간단한 탐색 버튼을 의미합니다. 그러나 여기서 끝이 아닙니다. 어린이 친화적인 웹사이트를 만들려면 어린이처럼 생각하고 어린이의 관점에서 사용자 경험을 보아야 합니다.

수년에 걸쳐 저는 유아와 어린이들이 태블릿을 사용하는 것을 보았고, 다음은 단순히 어린이처럼 보고 생각함으로써 얻은 몇 가지 팁입니다.

탐색에 대한 어린이 보호

부모는 문이 있는 계단, 창문 제한 장치, 비산 방지 유리 등 아이를 낳는 순간부터 집에서 아이를 보호하는 법을 배웁니다. 그러나 자녀 양육이 가정에만 국한되어서는 안 됩니다. 또한 개발자가 웹 사이트를 구축할 때 고려해야 하는 핵심적인 세부 사항입니다.

웹사이트를 사용하는 것은 아이들에게 재미있을 수 있지만 경험은 대부분 단기적입니다. 종종 아이들은 웹사이트를 탐색하다가 실수로 특정 페이지에서 자신을 삭제하게 됩니다. 예를 들어, 실수로 잘못된 버튼을 스와이프하거나 팝업을 클릭하여 다른 페이지로 이동할 수 있습니다.

그럼 이걸 어떻게 막나요? 우선 웹사이트에 사용자 경험을 단축시키거나 사이트의 다른 페이지로 이동할 수 있는 불필요한 스와이프 제스처가 포함되어 있지 않은지 확인해야 합니다.

텍스트 지침이 있는 모달 창도 고려하는 것이 좋습니다. 예를 들어 사용자가 다른 페이지로 연결되는 버튼을 클릭하면 이전에 있었던 페이지로 돌아가거나 새 작업을 계속할 수 있는 옵션을 제공하는 창이 표시되어야 합니다.

가속도계를 피하십시오

사용자 경험의 일부로 가속도계를 활용하는 게임, 앱 및 웹사이트를 찾는 것이 일반적입니다. 예를 들어, "기기를 기울여 XYZ를 회전시키십시오." 또는 "기기를 흔들어 빨간색 버튼을 녹색으로 바꾸십시오."와 같은 지침이 있는 웹사이트를 방문할 수 있습니다.

이것은 겉보기에 재미있는 기능일 수 있지만 젊은 사용자에게는 재앙이 될 수 있습니다. 아이들은 종종 사고를 당하기 쉬우며, 아이들이 기기를 기울일 필요가 있는 웹사이트를 디자인하는 것은 단순히 재앙의 지름길입니다. 더 자주, 그들은 아마도 전화를 떨어뜨리고 파괴하게 될 것입니다.

어린이 친화적인 웹사이트와 앱을 디자인할 때 고려해야 할 또 다른 요소는 멀티터치 상호작용입니다. 어린이용 수학 게임이나 웹 사이트를 구축하는 경우 대상 사용자가 인터페이스를 탐색하는 것을 어떻게 상상하십니까?

나는 아이들이 웹사이트 인터페이스를 탐색하고 탐색하기 위해 여러 손가락을 사용하는 경향이 있습니다. 멀티터치 통합이 없으면 이 경우 웹사이트가 응답하지 않을 수 있습니다. 따라서 사용자 경험을 향상시키려면 웹사이트가 멀티터치와 호환되는지 확인하는 것이 중요합니다.

누르지 말고 탭하세요

아이들은 주로 탭하여 상호 작용하기 때문에 이 행동 요소를 UX/UI 디자인에 통합하는 것이 좋습니다. 따라서 웹 사이트 인터페이스의 탐색은 단일 탭을 사용하여 쉽게 배포되어야 합니다. 더블 탭은 어린이 웹사이트에 이상적인 기능이 아니기 때문에 "단일"에 중점을 둡니다.

아이들은 자신이 취하는 모든 행동에서 즉각성을 기대합니다. 두 번 탭해야 하는 버튼은 그 즉시성을 제공하지 않습니다. 원하는 결과를 얻으려면 버튼을 두 번 눌러야 한다는 사실을 깨닫는 데 오랜 시간이 걸릴 수도 있습니다.

텍스트보다는 이미지를 사용하세요.

재미있는 사실이 있습니다. 여러 연구에 따르면 인간은 텍스트보다 이미지를 더 빠르고 더 잘 처리합니다. (주로 생생한 색상과 이미지에 끌리는) 어린이에게는 이미지가 훨씬 더 중요합니다. 따라서 웹 사이트에 생생한 이미지와 최소한의 텍스트가 포함되어 있는지 확인하는 것이 좋습니다.

10세 이하의 어린이를 대상으로 하는 경우 대상 대상이 읽기 능력이 제한적일 수 있다는 점에 유의해야 합니다. 그들은 또한 지루하고 따라가기 힘든 긴 텍스트 덩어리를 발견할 것입니다.

이 장애물을 피하려면 웹사이트의 인터페이스를 다채로운 이미지와 버튼으로 채우십시오. 텍스트를 사용해야 하는 경우 텍스트가 굵고 다채로운 글자로 되어 있어야 하며 어린이가 이해할 수 있을 정도로 단순화해야 합니다. Brighterly는 모든 사용자의 관심을 끌기 위해 웹사이트를 다채로운 이미지와 굵은 텍스트로 채워서 이 해킹을 성공시켰습니다(목표 고객이 부모일지라도).

웹사이트는 반복 친화적이어야 합니다.

이것은 무엇을 의미합니까? 반복 친화적인 웹사이트에 대해 처음 듣는 사람에게는 이 용어가 생소하게 들릴 수 있습니다. 그러나 어린이와 유아를 위한 웹사이트를 디자인할 때 고려해야 할 중요한 요소입니다.

탐색할 때 아이들은 행동을 여러 번 반복하는 것을 좋아합니다(예: 같은 Cocomelon 비디오를 계속해서 시청). 따라서 귀하의 웹사이트는 재생 가치를 제공함으로써 이러한 타고난 요구를 충족시켜야 합니다. 예를 들어 웹사이트에서 비디오를 재생하거나 다시 시작하기 위한 버튼을 제공할 수 있습니다. 이것은 반복적인 특성에 호소하고 물론 일반적인 사용자 경험을 향상시킵니다.

버튼을 버튼으로 둡니다.

플라시보 버튼은 실생활뿐만 아니라 웹 디자인에도 존재합니다. 매일 우리는 미학적 용도로만 사용되는 버튼이 있는 웹사이트를 봅니다. 이것은 어린이를 위한 웹사이트를 디자인할 때 끔찍한 생각이라는 것은 말할 필요도 없습니다.

아이들은 버튼을 볼 때 버튼이 작동하기를 기대합니다(내 생각에는 단순한 논리여야 함). 작동하지 않는 위약 버튼을 누르면 좌절감을 느끼고 계속 더 세게 누릅니다. 헹구고 반복합니다. 사용자 경험을 악화시키는 피곤한 사이클입니다.

따라서 어린이용 웹사이트를 디자인할 때 모든 버튼이 버튼이 해야 할 역할을 하는지 확인하세요. 참고로 버튼이라면 버튼처럼 보이게 하십시오.

마지막 생각들

어린이를 위한 웹사이트를 만들려면 많은 고려 사항이 필요합니다. 이러한 방법을 고려하여 이러한 어린이가 귀하의 웹사이트를 방문할 때마다 훌륭한 사용자 경험을 제공할 수 있도록 하십시오.

행운을 빕니다!

저자의 약력

Jessica Kaminski는 Brighterly의 수학 교사입니다. 그녀는 오스트라바 대학교에서 수학 학사 및 석사 학위를 받았습니다. 거의 10년 간의 경험을 가진 노련한 수학 교사인 Jessica는 어린 아이들이 수학을 사랑하는 법을 배우도록 돕는 데 열정적입니다.