Real Design

폼 구성하기 - 그룹구성하기 본문

UI&UX/FormDesign

폼 구성하기 - 그룹구성하기

GS Real Design 2011. 12. 27. 13:08

컨텐츠 그룹을 구분하는데 시각적 정보를 최소한으로 하라.

최소한의 시각적 표현을 이용하면 폼의 외관 자체가 아니라 콘텐츠에 효과적으로 집중시킬 수 있다.


폼 레이아웃을 디자인 하기 전에 질문을 적절하게 그룹으로 묶어서 구성하는 것이 좋다.
그룹들의 길이와 맥락을 고려해 여러 웹페이지나 한페이지에 담긴 여러 색션으로 구성될 수 있다.


사용자들이 어떤정보를 입력해야하는지 빠르게 보고 파악 할 수 있도록
야후의 회원 등록폼은 생성할 계정,보안 관련 항목, 등을 섹션으로 나눠 섹션들이 다른 요소보다 두드러지게
볼드체의 항목타이틀로 디자인 됐다.

콘텐츠 그룹 사이를 의미있게 구분하기 위해 시각적으로 큰차이를 둘 필요가 없다.
콘텐츠 그룹을 너무 과하게 대비를 주어 구분하면 시각적 남잡함을 느껴 오히려 사용자들이
폼을 어떻게 구성되었는지 파악하기 어렵다.



이 폼에는 시각적 구분 요소들이 많이 이용되는데, 이것이 오히려 폼이 묻고자 하는 바를 알기 어렵다.

배경색을 미묘하게 바꾸고 얇은 선을 쓰는 것만으로 폼 컨텐츠 그룹의 차별성을 효과적으로 줄 수 있다.

최소한의 시각적 표현을 이용하면 폼의 외관 자체가 아니라 콘텐츠에 효과적으로 집중시킬 수 있다.



교대로 바뀌는 두 배경색을 써서 좌측정렬된 항목 타이틀과 해당 입력 필드를 연결짓고 싶겠지만,
이런 요소들은 단지 폼을 시각적으로 방해할 뿐이다.
이는 항목 타이틀과 입력필드에 집중하기 어렵게 만든다.
"차이를 만드는 차이만이 의미 있는 정보다"p35
즉 레이 아웃에 도움이 되지 못하는 시각적 요소는 레이아웃을 망친다.


그림 2.8 시각적 요소들을 과도하게 사용하면 폼의 기본 콘텐츠에 집중하지 못하게 되고 자연스러운
시선흐름을 방해한다.
사용자의 시선은  가로선과 배경색으로 만들어진 상자를 파악할때마다 반복적으로 멈추게 된다.



이베이 익스프레스(eBay Express)의 결제 폼은 얇은 선을 이용해 중요한 콘텐츠 섹션을 구분한다.
명확하게 구분하는 데는 최소한의 것만 있으면 된다.


그외 사례



항목별로 라인을 그어 구분하는 것은 위에서 설명한 배경을 사용한 구분과 유사한 결과를 가져온다.



KT회원가입폼 :  연관성있는콘텐츠를 그룹으로 나누지도 않았고, 쓸데 없는 구분라인으로 폼이 복잡해 보인다.



위의 KT보다는 정리돼 보이지만 관련 정보를 그룹으로 나누지않고 구분했다. 배경색은 사용하지 않아도 된다.



다음에서 라인만 뺀형태




콘텐츠를 그룹으로 나눴지만 시각적요소가 너무 많다.




라인과 배경을 줄인 디자인.
배경이 사라져 오히려 시원하고 명확해 보인다.

마지막으로 아이핀도입으로 수정된 GSSHOP의 회원 정보 폼




본 내용은 내부 디자인 가이드작업을 위해 '웹폼디자인'의 내용을 요약하고 정리한 것입니다.
http://rosenfeldmedia.com/books/webforms/
 

0 Comments
댓글쓰기 폼
Prev 1 2 3 4 5 6 7 8 Next