Real Design

회원가입, 결재정보 등 폼 디자인 잘하기 본문

UI&UX/FormDesign

회원가입, 결재정보 등 폼 디자인 잘하기

GS Real Design 2011. 12. 22. 11:05

웹폼디자인으로 잘 알려진 루크의 블로그에 애플 스토어의 바뀐 결재창에 대한 재미있는 리뷰 글이 올라왔네요.

눈에 띄지는 않지만 세심히 살펴보면 신경써서 디자인 되어 있는 부분들이 있다. 이미 국내의 웹사이트에서도
종종 볼 수 있는 사례도 있는가 한편 그렇지 않은 사례도 있다.


입력 필드 안에 라벨이 있는 것. 라벨 따로, 입력필드 따로 였던 기존의 방식에 비하면 깔끔하고 직관적이다.
 네이버나 다음과 같은 포털에서도 메인화면의 아이디/비밀번호 입력에 이미 이런 방식을 사용하고는 있지만
회원가입 등의 복잡한 입력폼에는 여전히 예전 방식을 사용하고 있다.


아코디언이라는 UI 패턴이 있죠. UI가 아코디언 악기처럼 펼쳐지고 닫혀지는 패턴을 말하는데,
이 경우에는 이미 작성한 폼에 대해서 일반 HTML 텍스트로 바꾸어 주는 경우입니다. 폼에 대한
부담감을 줄이고 남은 입력폼에 집중하게 하고, 폼이 지워질지도 모른 다는 불안감을 해소해 주네요


국가나 지역 설정은 위와 같이 직접 입력하는 방식에서 자동으로 선택하는 방식으로... 작은 배려지만
폼 입력을 귀찮아 하는 많은 사용자들을 배려하면서 정보 수집 목적을 달성할 수 있는 방법이지요.
폼 디자인도 이제는 오프라인의 종이 서류가 아닌 이상 좀 더 똑똑해 져야 할텐데 말이에요. :)

최근 인상적인 30가지 회원가입폼 인터페이스 디자인 사례도 참고하세요. 30가지 샘플 중에
가장 회원가입하고 싶은 폼이 어떤 것인지 한번 보시길...


2009/12/23 10:05 황리건(@HRG) 작성


다른 쇼핑몰들의 로그인 입력창들을 비교



Apple.com


gsshop.com








포탈을 제외하고 대부분의 쇼핑몰이 필드 밖에 위치해 있군요.

apple과 GS SHOP의 장바구니는 좀 구분이 됩니다.



0 Comments
댓글쓰기 폼