Real Design

폼 입력완료를 쉽게 하는 방법 본문

UI&UX/FormDesign

폼 입력완료를 쉽게 하는 방법

GS Real Design 2011. 12. 27. 12:49

1. 명확한 스캔 라인

폼 디자인의 가장 기본적인 원칙은 폼의 시작부터 끝까지 명확한 스캔라인(시선의 흐름)을 제공하는 것이다.


위의 아이트레킹 데이터를 보면 명확한 스캔라인이 얼마나 중요한지 알 수 있다.
붉은 색 수직 축이 폼 항목 타이틀,입력필드,실행 버튼 등을 이어 준다.
이렇게 일직선으로 경로가 명확하면 사용자는 주의 분산없이 더 빠르게 폼을 입력 할 수 있다.



위 그림에서 보면 상단은 중앙정렬 하단은 좌측정렬을 사용하여 정렬 방식이 다양해서 시선의 흐름이 지그재그 라인을 따라 눈을 움직여야 한다.


정렬방식을 하나로 통일함으로써 첫 정보에서 시작해 실행 버튼까지 이어지는  시선의 흐름은 단순해졌다.


위 네이트의 입력폼은 입력 폼은 왼쪽정렬, 입력완료 버튼을 가운데 정렬로 했다.


위 트위터와 네이트의 회원가입 폼을 비교해보면 완료버튼이 가운데 정렬할 필요는 없어보인다. 사용자의 시선 흐름을 자연스럽게 하기 위해서는 입력폼과 정렬을 맞추는것이 더 낳다.


포털 등 국내사이트의 버튼 가운데 정렬 사랑은 공통적인데 이는 사용자의 시선의 흐름을 고려하지 않고 디자인 됐다는 반증일것이다.


위의 수정한 디자인과 원래 디자인을 비교하면 시선이 보다 단순해진것을 확실히 알 수 있다.


아마존과 이베이의 회원가입 하단부분은 입력폼과 완료버튼의 정렬이 동일하다.


0 Comments
댓글쓰기 폼