필드 레이블 UX
Field Label UX
이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2013년 3월 19일의 기사입니다)
모바일에서 필드 레이블이 필드의 왼쪽 또는 위에 표시해야 합니까? 1000개 이상의 모바일 체크아웃 폼 필드를 완료하는 테스트 대상을 포함한 18개의 모바일 전자상거래 사이트에 대한 대규모 사용성 리서치를 완료한 후 답변은 아래와 같습니다. 단 한 가지 예외가 있습니다.
모바일에서 왼쪽 정렬 필드 레이블 관련 문제
왼쪽 정렬 필드 레이블의 주요 문제는 스마트폰 디스플레이 크기 및 종횡비와 관련이 있습니다. 간단히 말해서 왼쪽 정렬 레이블이 필드 앞에 있어야 하는 경우 좁은 화면은 필드 자체를 위한 공간을 거의 남기지 않습니다. 양식 필드가 종종 사용자의 전체 입력을 표시할 만큼 충분히 넓지 않기 때문에 이것은 심각한 사용성 문제입니다. 20자를 초과하는 전자 메일 주소, 자주 사용되는 16자리인 신용 카드 번호, 풀네임 또는 거리명과 번호로 구성된 주소를 떠올려보세요.
입력 내용을 볼 수 없는 것은 테스트하는 동안 많은 피실험자들에게 문제를 일으켰습니다. 우선, 짧은 필드 길이로 인해 보이는 영역이 잘려나가 피험자들이 폼 작성 후 제출하기 전 오타를 발견하는 것이 훨씬 어려웠습니다. 그러나 더 문제는 잘못된 입력을 포함하는 폼을 제출하고 피험자에게 반환되는 경우였습니다.
이것으로 인해 피실험자들이 편안하지만은 않은 텍스트 선택/패닝 도구들을 만지작거리게 만들었습니다. 많은 피험자들은 오류를 발견할 수 없거나 단순히 텍스트 선택 도구를 만지작거리는 것보다 모든 것을 삭제하는 것이 더 빠르다는 이유로 결국 원래의 입력을 삭제하고 다시 입력하기로 결정했습니다.
더 나은 레이블 UX를 위한 필드 위의 레이블
모바일에서 필드 위에 레이블을 배치하면 폼 필드가 화면 전체 너비를 확장하여 사용자의 입력을 전체 글꼴 크기로 표시할 수 있습니다.
1-2 단어로 제한하지 않아도 되고, 필수/선택 사항을 명확하게 표시할 수 있는 공간이 더 넓어지며, 필드 설명(예: 고객의 전화번호를 요구하는 중요한 설명)을 쉽게 포함할 수 있기 때문에 명확하고 의미 있는 필드 레이블을 작성할 수 있는 추가적인 이점이 있습니다.
필드 위에 레이블을 배치하는 것의 주된 단점은 수직 공간을 더 많이 차지하기 때문에 사용자가 더 많이 스크롤해야 한다는 것입니다. 그러나 스크롤 동작 자체는 사용자에게 매우 직관적이며 양식을 작성하는 데 장애가 되지 않는다는 것입니다.
가로 방향에서 동적으로 레이블 위치 변경
이제 처음에 언급했듯이 한 가지 예외가 있습니다. 가로 모드로 변경했을 때의 표현입니다.
가로 모드의 키보드는 실제 볼 수 있는 영역을 심각하게 제한합니다. 예를 들어 iPhone 4S의 가로 모드에서는 화면의 33%만이 사용자가 작성하는 양식으로 실제 웹 페이지를 표시합니다. 일부 Android 장치에서는 더 나쁩니다. 예를 들어 가로 모드의 Samsung Galaxy S Plus에는 실제 웹 페이지에 할당된 화면의 18%만 있습니다. 다음 이미지를 확인해보세요.
이 작은 폼의 컨텍스트를 보면 폼을 올바르게 완성하기가 매우 어렵습니다. Android 예에서 활성 필드(테스트 대상이 채우려고 하는)의 필드 레이블은 볼 수조차 없습니다. 가로 모드에서 페이지 및 폼 콘텍스트가 극단적으로 부족하여 심각한 문제가 발생했습니다.
예를 들어, 왼쪽 이미지에서 제목은 자신이 작성해야 하는 결제 연락처/주소 양식의 일부라고 믿고 이메일 필드를 완성하기 시작했으며 실제로 계정이 있는 기존 고객의 로그인 필드라는 것을 전하지 못했습니다. ("기존 아이디로 결제" 버튼이 보이지 않습니다).
그렇다면 이러한 제약 조건이 주어지면 누가, 왜, 가로 모드에서 폼을 작성하고 싶어 할까요? 음, 세로 모드에 비해 가로 모드에서 키보드 문자의 히트 영역 이 크게 증가하므로 실제로 완벽하게 이해할 수 있습니다. 예를 들어, iPhone 4S에서 문자 히트 영역은 32% 증가합니다(52px*76px 대 83px*63px). 아래에서 확인 할 수 있습니다.
더 큰 터치 키보드를 강력하게 선호하는 사용자 그룹이 있기 때문에 모바일용으로 디자인할 때 가로 모드에서 양식을 채우는 이러한 문제를 고려해야 합니다. 이러한 사용자를 더 잘 수용하려면 장치가 가로 모드로 전환될 때 레이블 위치를 왼쪽 정렬로 동적으로 변경하는 것을 고려해야 합니다. 여기에는 폼 설명, 도구 설명 및 입력 예제의 위치 변경이 포함됩니다(필드 아래, 가까운 위치에 있을 수 있음).
입력이 잘리는 너무 짧은 필드의 문제(세로 모드에서 필드 위에 레이블을 배치해야 함)는 화면이 이 방향에서 훨씬 더 넓기 때문에 가로 모드에서 문제가 훨씬 적습니다.
입력을 가시적으로 유지하면서 컨텍스트를 유지하십시오
주로 전체 폼 페이지를 스캔하기 위한 최적의 시선 경로와 관련된 데스크톱 사이트의 레이블 정렬에 대한 논의와 달리 모바일에서는 필드가 너무 짧아서 적절한 크기의 입력 글꼴이 있을 때 사용자가 전체 입력을 볼 수 없다는 문제가 있습니다. 필드 작성 후 제출 전에 입력을 검증하기가 매우 어려울 뿐만 아니라 수정하기가 훨씬 더 어렵습니다. 따라서 모바일에서 필드 레이블은 기본적으로 필드 위에 배치되어야 합니다.
그러나 핸드폰이 가로 모드 일 때 화면의 1/3만 실제 형태로 사용되는(어떤 경우에는 그보다 더 적은 경우도 있기 때문에) 거대한 키보드로 인해 문제가 복잡해집니다. 따라서 이러한 극단적인 페이지의 컨텍스트 손실을 완화하려면 가로 모드에서 왼쪽 정렬되도록 필드 레이블의 위치를 조정해야 합니다.
이것은 우리가 독립형 모바일 사이트에서 작업하는 경우에도 반응형 디자인 사고가 우리에게 얼마나 도움이 될 수 있는지 보여주는 좋은 예입니다. 이와 같은 반응형 레이아웃 조정은 전자상거래 여부에 관계없이 모바일 사이트의 사용자 경험을 크게 향상할 수 있습니다.
사용자의 입력을 볼 수 있는 문자 수에 가까워짐에 따라 반응형 디자인을 한 단계 더 발전시키고 입력 글꼴 크기를 동적으로 줄일 수 있습니다. 약 30자를 표시할 수 있는 입력 필드가 있다고 상상해 보십시오. 사용자가 25번째 문자를 입력할 때 필드가 소수의 추가 문자에 맞도록 입력 글꼴 크기를 10% 줄일 수 있습니다.
