[코드스테이츠 PMB 13기] 원티드를 UI/UX의 10가지 심리학 법칙으로 살펴보기

출처: wowtale.net/2021/04/19/24878/

 

I WANT YOU
FOR IT JOB

 

 

  이번 부트캠프 1주차 첫 수업 당시 과제가 'PM 직무 채용공고 분석' 이었다. 사실 가장 먼저 익숙했던 사람인에 먼저 들어가보았는데, 검색을 제대로 못한건지 마케팅 PM, 디자인 PM, 게임 PM 등 다양한 PM이 쏟아져서 조금 당황했었다. 하지만 원티드에서 PM을 검색했더니 원하는 정보가 있어서 그 뒤로는 원티드에서 주로 채용공고를 살펴보았었다. 

  원티드는 채용, 커리어 콘텐츠, HR 솔루션을 제공하는 온라인 채용 플랫폼이다. 사람인과 잡플래닛 이래 새롭게 도전장을 내밀었던 원티드의 주된 특징으로는 IT직무에 포커스를 맞추었다는 점을 꼽을 수 있다. 뿐만 아니라 연차별 평균 연봉, 각 회사별 응답률, 채용보상금 등 기존 채용사이트보다는 구직자 입장에서 구미가 당기는(?) 요소가 많다. 하지만 단순히 이러한 특징 몇개만으로는 20년 넘게 운영중인 사람인, 잡플래닛 사이에서 7년째 존속할 수 없었을 것이다. 그렇다면 원티드는 어떻게 사용자 입장에서 구미가 당기게끔 UI/UX를 디자인했을까? 

 

 

---

 

원티드에서 발견한 UX 심리학

 

1. 제이콥의 법칙: 사용자는 이 화면이 다른 서비스들과 유사한 방식으로 작동할거라고 기대한다.

 

 

  원티드 어플을 잡코리아, 사람인 어플과 비교해보았다. 빨간색 박스로 표시한 것처럼 대체로는 최상단에 로고와 검색기능, 최하단에 네비게이션 탭 바가 있다. 다만 잡코리아와 사람인에서는 중간 컨텐츠에 바로 공고를 내세웠는데, 원티드는 특이하게도 직무 관련 영상이나 블로그 글을 업로드하였다. (레이아웃 자체는 모든 모서리가 둥글게 깎인 직사각형들의 나열이지만, 컨텐츠는 다르다.) 이는 원티드의 "개인화된 커리어 성장 기회" 를 바탕으로 한 HR 테크의 또다른 수익창출 수단인 '원티드 플러스' 라는 커리어 관련 컨텐츠 구독시스템을 염두에 둔 것으로 보인다. 

 

익숙한 레이아웃으로 고객에게 별도의 학습을 요구하지 않아 고객에게 편안함을 제공했다.

 

 

2. 포스텔의 법칙: 유저의 액션은 너그럽게, 시스템의 안정성은 확실하게

 

  원티드의 회원가입 페이지를 예시로 들어보겠다. 회원가입시 필수 사항을 제외한 부분에 대해서는 생략 가능함을 나타내고있다. 또한 매 칸마다 placeholder처리가 되어있어서 실제 예시를 살펴볼 수 있고, 현재 유저가 어떤 부분을 입력중인지 해당 칸의 테두리에 짙은 남색으로 강조되어있다. 사용자의 실수를 줄이기 위해 노력하고, 받아야 하는 정보의 양을 줄일 수 있을 만큼 줄인 것이 눈에 띈다.

 

유저가 생략할 수 있는 부분을 명시하여 유저의 선택권을 존중하였고,
각 입력창마다 무엇을 입력해야하는지에 대한 설명이나 예시를 안내하여 고객이 느낄 수 있는 당혹감을 줄였다.

 

 

3. 피츠의 법칙: 사용자가 정확도를 신경쓰지 않아도 되게끔 터치 대상을 여유롭게 설정하기

 

  원티드 어플에서 이력서를 작성할 때, 위에서 표시한 것처럼 빨간색 섹션 아무데나 클릭해도 각각의 정보를 수정할 수 있게 조치하였다. 이력서라는 특성상 적어야할 정보는 많은데 모바일은 PC에 비해 화면도 좁고 세심하게 마우스로 클릭하기 어렵다. 원티드는 이러한 고민을 바탕으로 일정 범위 아무데나 클릭해도 괜찮게끔 설정하였으며, 별도로 +버튼까지 만들어서 '입력하세요' 부분이나 +버튼 아무거나 눌러도 상세 정보를 기입할 수 있도록 터치 대상을 넓게 설정하였다.

 

유저가 공들여야 하는 주요사항(예: 이력서에 경력 적기)을 위해, 터치 범위를 여유롭게 설정하여 이력서를 부드럽게 작성할 수 있도록 하였다.

 

 

4. 심미적 사용성 효과: 보기 좋은 떡이 먹기도 좋다.

 

  예시를 위해 사람인 어플 내의 채용공고 상세페이지를 함께 캡쳐했다. 사람인은 채용 공고를 올릴 때 단순 텍스트, 사람인에서 제공하는 양식, 회사 내에서 자체적으로 만든 채용공고 이미지 등 다양한 형식 분분하여 통일성이 떨어졌다. 뿐만아니라 PC에 최적화되어있는지 일부 텍스트는 아예 읽을 수조차 없었다. 반면 원티드는 모든 채용 공고의 형식이 통일되어있어서 정돈되어있다는 느낌이 들었다. 또한 모바일에서도 최적화되어 PC로보나 어플로보나 큰 어려움이 없었다.

  '심미적' 기준이라면 곳곳에 연예인이나 멋진 자연경관 사진이 있어야 할까? 원티드를 '채용' 기준에서 살펴보았을 때, 원티드는 원티드라는 플랫폼 자체가 너무 빛나면 안된다. '채용'을 기준으로 원티드는 채용수수료를 받는 프로세스이기 때문이다. 즉, 각 회사들의 자신들의 아이덴티티가 잘 느껴지는 사진과 컨텐츠(회사소개, 채용공고)를 어필하여 적재적소에 맞는 인재를 매칭하는 것이 목표이다. 다시말해, 마치 레스토랑의 지배인처럼 잘 갖춰입되 너무 튀지 않는 모습이 중요하다. 이점에서 원티드는 전체적으로 세련된 디자인을 추구하되, 수려함을 바탕으로 채용 사이트의 본질에서 벗어나지 않았다. 

 

유저가 채용 공고를 위해 미간을 찡그리거나 화면을 확대축소 할 필요 없이 깔끔한 화면을 제공하여
원하는 정보를 쾌적하게 습득할 수 있도록 하였다.

 

 

5. 도허티 임계: 우리에게 주어진 시간은 0.4초. 그렇게 못한다면 시선이라도 뺏어야 한다

 

  우선 원티드는 어플에서 로딩중 애니메이션과 로딩 스켈레톤을 캡쳐하려고 했는데 워낙 순식간에 사라져서 캡쳐가 어려웠다. (10번 넘게 시도했지만 모두 실패) 어플에서 채용공고 상세페이지는 살짝 느렸는데, 이마저도 약간 느린 와이파이 환경에서 빠른 와이파이 환경을 비교해서 접속하니까 나타날 겨를도 없이 금방 로딩됐다. 약간 느린 환경에서는 로딩중 아이콘과 로딩 스켈레톤을 볼 수 있었는데, 이마저도 그렇게 느리지는 않아서 와이파이 환경과는 관계없이 원활하게 어플을 사용할 수 있었다.

 

 

유저가 불필요한 시간소모 없이 빠르게 정보를 확인할 수 있게 만들었다.

 

 

6. 밀러의 법칙: 여러 정보를 유의미한 정보로 묶고, 최대 7(+2)개를 넘기지 않기

 

  보통 이력서에는 적을 사항이 많다. 이름, 자기소개, 경력, 스킬... 원티드는 총 8개의 굵직한 주제들을 나눈 후, 상세 사항은 +버튼 혹은 '~~한 사항을 입력하세요.' 라는 문구 영역을 터치하면 그때 상세 정보를 기입할 수 있게 다시 세부 정보를 나타낸다. 즉, 처음부터 하나의 페이지에 너무 많은 정보를 요청하지 않고 (총 8개), 상세 페이지에 들어가야 옵션 설정을 하게끔 설정하였다 (1개~7개 사이). 이렇게 한번에 인지할 수 있을 분량만큼만 요청하여 유저로 하여금 부담감을 낮추는 계기가 되기도 한다.

 

 

유저가 차분하게 각 단계별로 필요한 정보를 기입할 수 있게 만들었다.

 

 

---

 

사실 UI/UX의 10가지 심리학 법칙을 오늘 배웠을 때, 몇가지는 너무 당연한 것처럼 느껴져서 법칙을 위한 법칙을 만드는건 아닐까 하는 생각도 들었다. 그러나 임상심리학에서 사람을 진단하는 것은 사람을 낙인찍는 용이 아니라 증상을 더 잘 헤아려서 적절한 치료를 하기 위해서인 것처럼, 단순히 막연하게 판단하던 것들을 좀 더 체계적으로 정리할 수 있었다.

  예를들어, 누구나 보기 좋고 깔끔한 것을 선호할 것이다. 하지만 원티드를 보면서, "그냥 깔끔하니까." 라고 말하는게 아니라, "타 어플에 비해 채용 공고가 통일돼있어서 전체적으로 정갈하다는 느낌을 줘. 그리고 모바일에도 최적화된 디자인이라서 간편하게 보기에도 좋고. 이래서 UI/UX가 중요하다는 건가봐, 채용 공고 올린 회사들이 왠지 더 깔끔해 보이는거보면." 라고 말할 수 있게 된 것같다.