더팀스 사이트는 아직 얼마 되지 않은 젊은 사이트입니다. 더 좋은 서비스를 제공하기 위해 지속적으로 익명의 사용자 경험 데이터를 축적하고 이용자의 행동 패턴과 흐름을 실시간으로 분석하면서 꾸준히 사용성 좋은 사이트로 변모 시키는데 노력하고 있습니다. 그동안 저희 팀만의 사이트 개선 방식에 대해 공유할까 합니다.
닷컴 부흥기 시절, 많은 디자이너들은 화면 레이아웃에 대한 정답을 찾아가고 있었습니다.
그 당시 대중에게 보급된 대부분의 컴퓨터 최소 모니터 해상도는 압도적으로 1024x768이 많았습니다.
그리고 해당 해상도를 바탕으로 화면 구성에 대한 다양한 시도들이 일어났는데, 그중 절대적인 지지를 받던 레이아웃은 바로 960 Grid System 이었습니다.
*자료 화면 960.gs 사이트 내 16그리드 방식 / 12 그리드 방식
960gs는 해외 디자이너 커뮤니티에서 굉장히 많은 방법과 시도를 통해 얻어낸 또 한가지의 방법이었습니다. 960 grid 패턴을 적용하면서 아래와 같은 효과를 통한 콘텐츠 배치가 가능해졌습니다.
1. 1024 최소 해상도에서 모든 콘텐츠를 유저들이 보기 편하게 안정적으로 공급할 수 있다.(스크롤 바를 포함한 창 옆의 모든 여백들을 제외하면 960 픽셀 내 표현할 수 있는 폭이 나옵니다.)
2. 12개 혹은 16개로 콘텐츠 비를 쪼개어 문단 단위와 콘텐츠 단위를 block화 시킬 수 있고 홈페이지의 레이아웃을 잡는데 비교적 간단하다.
웹 페이지의 근원이 오프라인 문서를 웹으로 표현하는 것에 그 시초가 있다 보니 다양한 시도가 나오게 된 것 같습니다. 지금은 변모했지만, 적극적으로 Grid System을 활용하는 다양한 방식을 소개하기 위해 아래와 같은 사이트도 있었습니다.
*the grid system 사이트
* 12 컬럼 기준으로 작업된 국내 네이버 사이트
* 16 컬럼 기준으로 작업된 국내 다음 사이트
960 Grid 와 함께 다양한 UX 개선에서 여러가지 시도와 기법들이 나오기 시작했는데, 그 중 두가지 패턴이 Z-layout과 F-layout입니다.
Z-layout은 2010년도에 UX 개선에서 꼭 필두로 배우고 넘어가야할 사이트 개선법중 하나였습니다. 다만, 2011년 이후로 너무나 다양한 화면들이 생겨났고 (2011년 아이폰을 기점으로 다양한 디바이스 탄생) 다양한 해상도를 지원하는 부분에서 비교적 절대적이다 라는 타이틀을 얻은지 얼마안되 내려놓게 되었습니다. 최근 대부분 좋은 UX경험을 주는 사이트들은 디바이스 형태에 맞춰서 반응형으로 컨텐츠가 읽기 편하도록 그 구성을 자유롭게 변경하는 타입을 취하고 있습니다.
Z-layout의 근간은 웹 사이트에 접속하여 콘텐츠를 읽는 방식에서 위의 이미지와 같은 흐름으로 시선처리를 한다는 것 입니다. 따라서 가입률을 높히거나 사이트에 무언가 액션을 더 주기 위해 아래와 같은 방식으로 개선하면 좋다고 소개하고 있었습니다.
사용자의 콘텐츠를 읽어들이는 시점이 1번에서 2번으로 다시 3번에서 마지막 4번까지.
따라서 1번에서 먼저 브랜드 네임을 보여주고 가입 버튼을 한번 상기 시킨 후 마지막 4번 시점 처리에서 목표를 달성할 수 있도록 구성하라는 취지 였습니다.
그 다음으로 콘텐츠를 퍼블리싱 하는 사이트에서 가장 많이 보이는 F레이아웃 입니다.
F레이아웃 경우 정말 많은 테스트에 의해 정론으로 굳어졌다고 볼 수 있는 레이아웃 구조 입니다. 위와 같은 경우 히트맵을 확인해 본다면, 마우스가 머무는 곳과 시각이 F형태를 띄고 있는 것을 확인 할 수 있습니다.
사이트에 접속하여 콘텐츠를 (주로 글) 소비하는 유저들은 아래와 같은 방식을 따르고 있다는 데이터 분석에 의거하여 내린 결론 이었습니다. 형태의 모습이 F형태를 띈다고 하여 F-layout 이라 부르고 있습니다.
대부분의 F레이아웃 페이지를 떠올린다면, 워드프레스 형태의 사이트와 기사를 발행하는 사이트들에 많이 해당 레이아웃으로 배치한 것을 떠올릴 수 있을 것 입니다. 이러한 흐름으로만 콘텐츠를 배치해도 유저가 사이트에 머무는 시간을 획기적으로 늘릴 수 있으며, 적절한 광고 배치를 통해 수익을 올릴 수도 있을 것 입니다.
F 레이아웃의 창시자 Nielsen Norman Group에서는 꾸준히 왕성한 UX관련 내용을 퍼블리싱중이니 함께 확인해도 좋을 것 입니다. ( https://www.nngroup.com/reports/ )
더팀스 사이트는 이러한 두 레이아웃 방식과 지금은 다양한 해상도로 인해 잘 사용되지는 않지만 960grid의 근간으로 설계된 bootstrap 12 컬럼 방식과 히트맵을 통해서 꾸준히 사이트의 흐름과 사용성을 개선해 나가고 있습니다.
더팀스 팀이 사이트를 개선하는 방식중 가장 중요하게 여기는 것 중 하나는
“사용성 좋은 디자인은 항상 스토리 라인을 가지고 있다.” 입니다.
아래 이미지는 제가 함께 했던 회사의 2012년 9월의 메인 페이지입니다. 그 당시 꽤 많은 비용을 주고 뉴욕 출신의 모 그래픽 디자이너에게 해당 디자인을 부탁하여 나온 안이었습니다.
위의 디자인 안으로 엄청나게 마케팅도 해보고 여러가지를 시도해 보았습니다.
그러면서 확실하게 알게된 것은 사이트 내 너무나 많은 것을 알리고자 하면서 흐름이 무너졌다는 것 입니다.
분명 위의 Z-layout 방식을 통하자면 [디자인 의뢰하기], [콘테스트 구경하기]가 클릭율이 높아야하고, 흐름 내에서 동영상을 클릭해서 보는 것이 맞을 겁니다.
그러나 기획자의 설계와 다르게 해당 페이지에서 가장 많이 클릭 된 부분은 “로고 디자인 배너” 부분 이었습니다.
기획자는 우리의 사이트는 이러한 모든 것들을 한다라는 메시지를 주면서 다양하게 어필하고 싶어했지만, 실제 사이트를 이용하는 유저들은 “너희 서비스가 어떤 일을 하는 것은 관심이 없다. 다만 우리는 우리 회사의 괜찮은 로고 디자인을 해줄 수 있는 곳을 찾고 있을 뿐이다.” 라는 고객 답변이 대다수 였습니다.
덧붙여서 마케팅 집행 자체도 클릭율이 높은 로고 디자인에 치중된 유저들이 유입되도록 설계 되어있었으니 사이트에서 말하는 것과 마케팅에서 말하는 것의 맥락이 같지 않아서 ROI가 좋을 수 없었습니다.
이러한 패턴을 바탕으로 2013년 2월 데이터와 유저의 행동을 바탕으로 간략하게 맥락을 압축해서 메인을 내부 디자인 팀에서 리뉴얼 했습니다.
먼저 크게 우리 사이트가 뭘 하는 것이다를 텍스트로 설명하기 보다는, 먼저 대표적인 포트폴리오를 이미지로 표현하고, 유저에게 느낌을 전달하는데 초점을 맞췄습니다. 해당 리뉴얼을 통해 얻게된 이점이라면 로고디자인을 하러 왔던 고객들도 먼저 포트폴리오를 둘러보고 로고와 패키지디자인을 함께 하고 싶다는 문의가 계속해서 들어왔다는 것 입니다.
메인 페이지에서 먼저 구구절절하게 텍스트로 푸는 것이 아니라, 어떠한 것을 한다는 느낌을 전달하고 그 다음 스텝에서 하나씩 그 이야기를 풀어 나가는 방식을 취했습니다. 최종적으로 너무나 많은 것을 알아보고 싶은 고객에게는 상세한 페이지를 제공하여 그 갈증을 해소 시키는 방식으로 페이지를 구성 했습니다.
*애플 아이폰 4 런칭때 사이트 모습
*넷플릭스 메인 카피 및 버튼들
사이트에 접속하는 유저는 메인 페이지에서 정말 몇 초 내 관심을 끌어내지 못한다면, 바로 창을 닫아버리고 맙니다. 같은 맥락에서 아무리 환상적인 서비스라도 초기의 관심을 끌지 못한다면, 유저는 바로 다음페이지로 넘어갈 여지조차 주지 않습니다.
따라서 메인 페이지에서는 유저에게 먼저 관심을 끌게 만들고, 액션으로 이어질 동기를 끊임없이 만들어줘서 사이트 내 숨어있는 퍼즐을 맞추도록 해야 합니다.
동기까지 부여까지 성공했다면 아래의 원칙을 지켜 사이트를 구성 합니다.
1. 어필하고 싶은 페이지 내 포인트를 몇개로 잡을 것인지 (정말 엄청난 매출을 내는 사이트도 포인트로 집중을 두는 버튼이나 텍스트는 많아야 1-2개 입니다.)
2. 유저들은 절때 글을 읽지 않는 다는 것을 떠올리고 시각적인 단서를 꾸준히 제시할 것
3. 2번 기준에 의거하여 많은 텍스트는 불필요하며, 적절한 공간에 적절한 글의 양만 부여 할 것.
4. 데이터를 통한 지속적인 사이트 개선을 실시할것
위의 내용을 토대로 더팀스는 초기 전략을 구성 할 때 먼저 유저가 많이 머무를 수 있도록 소비 지향성을 가진 사이트로 운영이 되었습니다.
*2016년 2월 기준 초기 더팀스 메인 화면
초기 사이트는 현재 아래와 같은 모습으로 변경 되었습니다.
*2016년 8월 기준 더팀스 메인 화면
초기 더팀스 사이트는 회원가입을 하여 무언가를 할 수 없는 구성이었습니다. 대부분 소비성 콘텐츠로 이뤄져 있었습니다. 이는 사이트 내에서 무언가 행동을 유발시키고 액션을 취할 수 있는 개발이 마련 되지는 않았으나, 유저들이 이러한 기능이 있을 경우 호응이 있을지를 먼저 시장에 내놓고 테스트 하는 것이 더 중요했습니다. 다행히 생각하는 것 이상으로 호응도가 좋았기에 지속적으로 유저의 행동패턴을 반영하여 아래와 같은 사이트 작업의 개선이 시행됐습니다.
*2016년 9월 기준 더팀스 메인 화면
#더팀스 #THETEAMS #UX #UI #디자인 #UX디자인 #UI디자인 #인사이트 #서비스개선
가입하기
