본문 바로가기
웹과 모바일

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

by mindfree 2020. 1. 22.

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

이번에는 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

When designing an app, most designers put all their effort into the content pages but overlook the sign-up form.

uxmovement.com

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

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

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

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

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

댓글2

  • 솔찬 2020.01.28 10:53

    Off-White가 심미적으로 아름다울 순 있으나, 텍스트필드의 비활성화 의미와 중복되는 느낌이 있을 것 같습니다. 그리고, 비교 예제에서 보여줄 때도 정확하게 Off-White 효과만 비교한 것이 아닌 플렛 버튼, 텍스트 크기, 보더 컬러 같이 다른 부분도 함께 바꿔줬기 때문에 정확하게 Off-White 효과 때문에 심미적으로 아름답다 느끼기도 어려울 것 같습니다.
    답글

    • Favicon of https://thinkofweb.net BlogIcon mindfree 2020.01.28 11:25 신고

      해당 필드의 비활성화는 물론 필드의 색상도 관련이 있습니다만, 실제 디자인을 할 때는 모든 요소에 다 변화를 주죠. 아웃라인, 플레이스홀더 글꼴색까지. 아울러 필드 색상 자체도 예시 이미지 정도의 톤이 아니라 그보다 훨씬 더 짙은 회색을 쓰잖아요?

      쓰신 대로 예시 이미지는 오프 화이트 색상 하나만으로 비교할 게 아니라 모든 디자인 요소를 그에 맞춰 같이 제안한 게 맞고, 저자가 효과를 강하게 부각하기 위해서 그렇게 한 거라 봐야겠지요.

      그걸 감안하더라도, 전체 다 흰색을 쓰는 것과 비교할 때 텍스트 필드 자체의 주목도가 높아진다는 것만 기억하면 될 듯 합니다.