[Do it] 이용자 화면 설계 1

1. 헤더 설계 요령

- 경우에 따라 타입을 변경하여 몇 가지를 구분하여 설계한다. (회원가입이 있는 경우 등)

- GNB는 왼쪽부터 중요한 순으로 배치한다.

- 로그인 전 화면에는 웹사이트의 특징을 강조해서 회원가입을 유도하는 것이 좋다.

- 홍보메시지나 메뉴구성도 로그인 전과 후로 나눠서 설계할 수 있다.

- 유틸리티메뉴는 GNB의 보조역할(로그인/회원가입/마이페이지 등)로 사용한다.

- 마우스 호버 옵션을 사용해서 서브메뉴를 구성하기도 한다.

 

2. 푸터 설계 요령

- 가장 하단에 위치하며, 상단에서 제공하지 않는 서비스 중 이용 빈도나 중요도 낮은 메뉴를 주로 배치한다.

- 이용자에게 추가로 알리고 싶은 정보, 법률 표기 사항 등이 있다.

- 회사 소개 / 이용 약관 / 개인정보 처리방침 / 인재 채용 / 제휴, 제안 등이 있다.

- 전자상거래 등에서의 소비자 보호에 관한 법률 제 10조와 시행규칙 제7조에 의해 사업자 정보를 모두 표기한다.

- 이용약관은 링크로 연결해야 한다.

- 개인정보 처리방침은 이용자가 쉽게 찾을 수 있도록 글자 크기/색상 등을 다른 메뉴와 구별되게 적용해야 한다.

- 사업자번호 확인 메뉴는 공정거래위원회에서 사업자 번호를 이용해 링크를 연결해야 한다.(기능개발)

 

3. 회원가입

- 이용자로부터 어떤 정보를 수집할 것인가를 고민한다.

- 사이트 내에서 제공하는 서비스를 꼼꼼히 살펴봐야 한다. (기능 정의서, 정책 정의서를 참고한다.)

 

회원가입 프로세스 설계

- 먼저 약관 동의, 정보 입력, 가입 완료의 3단계를 기본 프로세스로 설계한다.

- 이용자의 선택에 따라 약관 동의 내용이 변경되거나 정보 입력 항목이 변경되는 등의 경우에는 약간 동의 앞 단계에 선택옵션이 있어야 한다. (개인회원 / 기업회원 구분 등)

 

약관 동의 화면

- 약관 동의 : 이용자와 정보 제공자 간 서로 지켜야 하는 약속을 명시한 내용

- 필수 동의와 선택 동의로 나뉨

- 레이아웃을 다단구성하여 가입 절차를 스텝퍼 UI로 표현해서 가시성을 올리는 방법도 좋다. 설계 시 현재 어느 화면인지 하이라이팅 한다.

- 약관 내용은 관리자 화면에서 등록한 약관 내용이 호출되도록 설계한다. 

- PC화면의 경우 긍정버튼을 왼쪽에 배치한다.

- 모바일화면의 경우 긍정버튼을 오른쪽에 배치한다.

 

약관 준비

- 공정거래위원회 정보공개 -> 표준계약서 -> 표준 약관 약식

- 개인정보 처리방침: 개인정보보호 종합포털 -> 지원마당 -> 개인정보 도우미 -> 개인정보처리방침 만들기

- 개인정보 처리 위탁 및 개인정보 제3자 동의 약관 : 개인정보보호 종합포털 -> 자료마당 -> 지침자료

 

회원 정보 입력 화면 설계

- 정책정의서를 보고 각각의 입력 조건을 확인한 후 이용자가 알 수 있도록 안내 문구를 삽입한다.

- 본인인증이 필요한 경우 휴대폰 인증서비스 같은 것을 사용(NICE아이디)

- 아이디 중복 확인 기능 설계

- 비밀번호는 마스킹처리, 확인란도 설계

- 회원정보 필수 입력항목과 선택 입력항목을 구분하여 이용자가 보기 쉽게 표시

 

회원가입 타당성 검증화면 설계

- 가입하기 버튼 누를 경우 타당성 검증 해야 함

- 작성해야 할 항목이 많다면 표로 이해하기 쉽게 정리하는 것이 좋다.

- 회원 가입 정보 입력 화면 다음에 슬라이드를 새로 만들어 정리한다.

- 가입 정책으로 정해놓은 항목 외에도 이용자가 행할 수 있는 모든 변칙상황을 예상하여 대처 방안을 설계해야 한다.

- 추가로 개인정보가 오가는 구간에는 SSL(Secure Socket Layer)을 꼭 적용해야 한다.

 (정보통신망법)

 

설계 예시 짱많음