Off-White 색상으로 텍스트 필드 사용성 높이기

텍스트 필드 관련된 포스트를 이미 여러 개 등록했는데, 그만큼 이게 중요하다는 얘기다. 특히 전환율을 엄격히 산정하는 회사들은 회원가입 양식이나 결제 양식을 다양한 방법으로 실험한다. 

이번에는 Off-White 색상을 적용해서 폼 사용성을 높이는 방법에 대한 글이 있어 소개한다.

원문링크 https://uxmovement.com/forms/improve-your-sign-up-form-with-off-white-text-fields/

Improve Your Sign-Up Form with Off-White Text Fields

Off-White란 흰색과 살짝 다른 색상을 말한다. 영문 위키피디아에서는 Shades of white (흰색의 그림자)라고 하고, 이걸 흔히 Off-White라 칭한다고 정의했다. 

그냥 흰색 또는 다른 색상보다 Off-White를 사용하라는 이유는 시각적으로 이 쪽이 더 돋보이기 때문이다. 연구결과에 따르면 시각적으로 돋보인다는 것, 그러니까 심미적 관점에서 더 아름답다는 것만으로도 사용자는 좀 더 적극적으로 변한다. 

위의 예시 화면 왼쪽은 현재 실제 아마존 회원 가입 폼이고, 오른쪽은 글의 저자가 제안하는 디자인이다. 뭐 사실 실제 폼이 딱히 많이 이상하거나 사용성이 떨어진다고 할 수는 없지만, 확실히 구식 디자인인 것은 맞다. 최근 트렌드는 텍스트 필드가 오른쪽처럼 확연히 더 크게 디자인하는 추세다. 그리고 저자의 주장대로 오른쪽이 좀 더 텍스트 필드에 집중이 잘 된다.

텍스트 필드가 아니라 배경색에 Off-White를 적용해도 동일한 효과를 얻을 수 있다.

폼의 CTA에 브랜드 컬러를 적용하면 위와 같이 된다. 아마존도 당연히 상징색을 CTA에 적용한다.