Form Design

코멘토의 상담 요청 페이지(https://comento.kr/request/question)를 리디자인 하는 프로젝트입니다.

가이드는 다음과 같았습니다.

📌 Header와 Footer를 제외한 Contents영역을 개선합니다.
📌 PC 화면만 제작합니다. (대시보드 크기:19201080 px / 콘텐츠 영역 크기 : 1140n px)
📌 해당 페이지에 있는 정보들은 없어져서는 안됩니다.
단, 판단에 따라 정보를 숨기거나 정보를 노출하는 방식을 변경하는 등의 개선은 가능합니다.
📌 최소한의 가이드만 제공해 드립니다. 이 외의 모든 것들을 자유롭게 디자인해 주세요.
📌 디자인tool에 제한은 없습니다.

 

문제점은 붉은색으로,

개선안은 파란색으로 표시하였습니다.

 

 

0. 페이지 vs. 모달

페이지를 개선하는 과제였지만,

페이지보다 모달이 더 사용자의 목적을 달성하기에 집중도가 높을 것이라고 판단

 

•페이지: 상담 요청 관련 영역만큼 넓어서 시선이 분산됨

 

➔ 모달: 배경 dim처리와 함께 주요 영역에 시선 집중 가능

 

 

1. 제목

•다소 딱딱하게 느껴질 수 있는 명사형 제목

 

➔ 비교적 부드러운 동사형 제목 + 코멘토 상담 서비스의 강점인 “현직자” 강조

 

2. 부제목

•현재 페이지에서 가장 중요한 행동인 상담 내용 등록(회색의 placeholder)보다

위에서 눈길을 끄는(붉은색+짙은 회색) 3줄의 유의사항(부제목, 서비스 설명)

 

➔ 현재 페이지 설명을 간단한 한 줄로 줄이고, 상세한 설명은 클릭해서 볼 수 있음

 

3. 드롭다운

•입력하지 않아도 상담이 가능한 선택입력필드 “질문 유형” 드롭다운이

현재 페이지에서 가장 중요한 행동인 상담 내용 등록(회색의 placeholder)보다 위에 위치

 

➔ "질문 유형" 드롭다운의 시각적 위계를 낮추고, 

 

 

•사용자가 상담 페이지에서 가장 먼저 만나는 입력필드는 입력하지 않아도 상담 게시가 가능한 "질문 유형" 드롭다운

 

➔ 사용자가 상담 페이지에 진입하자마자 만나는 입력필드가 "상담 제목"이 될 수 있게

어딘가를 클릭하지 않아도 "상담 제목" 텍스트필드 입력할 수 있게 커서 활성화

 

4. 제목입력 텍스트필드

•클릭할 경우 사라지는 placeholder

 

➔ 입력 중에도 사라지지 않고, 현재 어떤 값을 입력하는지 알 수 있게

충분한 피드백을 주는 mini placeholder

 

 

•동일한 회색 테두리 → 현재 어떤 곳에 입력하고 있는지에 대한 시각적 피드백 부족

 

➔ 현재 입력중인 텍스트필드에 집중을 도울 수 있는 녹색 테두리 (활성화 표시)

 

 

5. 제목 서체 Property 통일 (weight, size)

•상담 등록 때 보이는 제목에 쓰인 서체 모습과

등록된 상담의 제목에서 볼 수 있는 서체 모습이 다름

 

➔ 상담을 등록할 때 보이는 제목의 모습과

상담을 등록한 후 보이는 제목의 모습(18pt, Bold)이 같음

 

 

6. 유효성 판단 결과 alert 방법

•모든 입력 필드에 입력한 뒤 유효성을 판단하여 pop-up alert → 사용자에게 주는 피드백이 늦음

 

➔ 텍스트 필드 이탈 시 유효성을 판단하여,

20자 미만 입력 시 하단 inline alert을 줘서 사용자에게 빠른 피드백

 

 

7. 버튼 상태 피드백

•사용자에 입력과 상관없이 바뀌지 않는 버튼 상태 → 사용자에게 주는 피드백이 없음

 

➔ 필수 입력필드의 유효성 조건을 모두 만족하면 회색(비활성화)에서 BI색(활성화)으로 바뀜

 

 

8. 2단계로 나누기

•한 페이지에서 다소 다른 성격의 입력필드를 여러 개 요구하면 사용자는 부담을 느낄 수 있음

 

➔ 한 페이지에서 모두 해결하지 않고, 2개의 페이지로 나누어
하나의 페이지에서는 사용자가 하나의 행동만을 할 수 있게 유도

 

 

9. 상담 요청자 정보 요구 방법

•‘정확한 멘토링’과 ‘학교명’이 어떤 관련이 있는지 알 수 없는 상황에서 요청자 정보(학교명) 요구

 

➔ ‘정확한 멘토링’를 풀어서 ‘같은 학교 멘토에게 먼저 상담받을 수 있습니다.’ 로 설명해서
‘학교명’을 가릴지 말지 고민했던 사용자를,

동문 멘토에게 먼저 노출할지 말지 고민하게 유도

 

 

10. 멘토 정보 요구 방법

현재 기업명과 직무를 모두 입력해야 버튼이 활성화되게 설계했지만,

앞으로 관심 기업과 직무 없이 멘토링을 받고 싶은 니즈의 크기가 무시할 수 없을 것으로 추측되며

"기업명"과 "직무"값을 선택으로 받는 실험이 필요해보임

 

•기업명과 직무 입력필드 평행 배치
→ “기업명”과(and) “직무” 조건이 모두 일치하는 멘토와 우선 매칭
→ 매칭 확률이 낮음

 

➔ “기업명”과 “직무” 입력필드를 분리하여 세로로 배치
→ “기업명” 또는 “직무” 중 하나라도 일치하는 멘토와 우선 매칭
→ 매칭 확률을 높일 수 있음

 

 

11. 최근 입력한 "기업명"과 "직무" 자동 입력

•여러 개의 상담을 올릴 때마다 다시 입력해야 하는 기업명과 직무

 

➔ 최근에 상담 요청한 관심 기업과 관심 직무 자동입력

 

 

12. 남은 무료 횟수

•특정 맥락에서 보여줄 때 더 효과적인 정보인 ‘무료 횟수’가 항상 노출되고 있음

 

➔ 다른 기능 <자기소개서>와 <면접예상질문> 등록 페이지에서도

표시할 수 있는 “남은 무료 상담 횟수”를 맥락에 맞게 요청 직전 제공

---

마지막으로 모달 타입의 데모 프로토타입 영상으로 글을 마칩니다.

읽어주셔서 감사합니다.

 

 

 

---

추신.

이번 과제 범위(UI 역량 확인)가 아니었기 때문에

UX 개선안은 함께 제안하지 않았지만,

 

아래와 같이 "기업명", "직무", "학교명"이 모두 선택(optional) 입력값으로 바뀌고,

상담 내용 등록 후에는, 멘토를 선택하지 않아도 dim처리된 부분 혹은 X 버튼으로 언제든 이탈할 수 있는 것이

최소한의 정보를 요구하고 사용자에게 중요한 목적을 원하는만큼 스스로 달성하게 하는 좀 더 좋은 Form UX 라고 생각합니다.