메테리얼 텍스트 필드의 진화
사용자 리서치가 구글 오픈소스 텍스트 필드를 어떻게 변화시켰는지에 대해.
(출처 : [The Evolution of Material Design’s Text Fields]의 기사를 번역 및 가공한 콘텐츠입니다.)
눈치채지 못하셨을 수도 있겠지만, 메테리얼 디자인은 리서치를 기반으로 계속 이터레이팅하며 진화 중이었습니다.
우리는 최근에 메테리얼 디자인의 텍스트 필드가 2017년과 왜 다르게 변경되었는지에 대해 궁금해하는 문의를 받았습니다.
그래서 이번 기회를 통해 리서치 프로세스의 비하인드를 살짝 보여주기로 했습니다.
재 설계 전 2017년 텍스트 필드텍스트 필드의 리뉴얼이 왜 필요할까?
텍스트 필드는 유저가 텍스트를 입력하고 수정하는 가장 일반적인 방법 중 하나입니다.
그러나 리뉴얼 전 텍스트 필드에서 어떤 유저들은 텍스트 필드와 클릭을 통해 인터렉션 할 수 있다는 것을 몰랐습니다. 텍스트 박스가 처음에는 빈 박스처럼 보였기 때문입니다.
올드 텍스트 필드에서는 라인이 텍스트를 입력할 수 있다는 어포던스로 사용되었지만 이것이 몇몇의 유저에게는 어떻게 사용하는 것인지 명확하게 와 닿지 않았습니다.
라인으로 구성된 텍스트 필드는 내용을 구분하는 구분선과 혼동을 주었고 요소들이 다닥다닥 붙어있는 폼의 경우, 텍스트 박스의 라벨은 본문의 텍스트와 자주 혼동되었습니다.
변경되기 전 텍스트 필드에서 라인의 어포던스가 불확실함메테리얼 디자인의 목적은 어떻게 하면 텍스트 필드가 더 구분되며, 더 읽기 쉽고, 더 쉽게 이해될 수 있도록 만들지 정하는 것이었습니다. 우리는 유저가 폼을 정확하고 빠르게 폼을 작성하길 원했습니다.
리서치
텍스트 필드의 사용성을 높이고, 어떤 텍스트 필드가 더 나은지를 정하기 위해 리서쳐와 디자이너들은 2016년 11월과 2017년 2월 사이에 실제 유저를 대상으로 두 개의 연구를 진행했습니다.
첫 번째 실험은 세 가지 시안을 테스트했고 그에 따른 선호도를 조사하는 것으로 이루어졌습니다.
이 실험에 158명이 참여했고 45명의 파일럿 참가자가 있었습니다.
참가자들에게 "item L"같은 특정 텍스트 필드를 찾아달라고 했습니다. 참가자들은 채워진 텍스트 필드와 비워진 텍스트 필드를 모두 클릭했습니다.첫 번째 연구 목적은 간단했습니다.
우리는 원래 사용하고 있던 텍스트 필드의 디자인과 우리가 디자인 한 다른 3가지 타입의 텍스트 필드 시안을 비교해보길 원했습니다.
첫 번째 연구의 목적은 유저들에게 서로 다른 3 가지 폼을 제시하고 그것들을 클릭하게 함으로써 뛰어난 개별적인 텍스트 필드를 찾는 것이 아니라 전체적으로 최고의 디자인 스타일을 가진 텍스트 필드를 얻는 것이었습니다.
우리 팀은 참가자들이 맞는 텍스트 필드를 클릭하는데 얼마의 시간이 걸리는지를 조사했습니다.
지원자가 텍스트 필드의 사용성을 테스트하는 동안 테스트하는 텍스트 필드에 대해 학습되고 예측할 수 없도록 텍스트 필드의 순서를 랜덤 하게 조정했습니다.
첫 번째 연구가 끝날 때쯤, 참가자들은 네 개의 텍스트 필드 중에 시각적으로 선호하는 순서대로 랭킹을 매기도록 했습니다.
두 번째 실험은 두 가지 시안을 테스트했고 그에 따른 선호도를 조사하는 것으로 이루어졌습니다.
이 실험에 400명이 참여했습니다.
첫 번째 실험이 디자인 포커스에 대한 넓은 범위에 대한 조사였다면, 두 번째 실험은 새로운 머티리얼 텍스트 필드가 어떻게 보일지에 초점을 맞추었습니다.
이 연구를 위해 다른 4개의 텍스트 필드 프로토타입을 만드는 대신, 우리는 텍스트 필드의 개별 특성을 테스트해볼 수 있는 커스텀 툴을 만들었습니다.
예를 들어, 이 툴을 사용하면 우리는 텍스트 필드의 박스스타일이나, 라벨의 위치나, 대조나, 보더 스타일을 조정할 수 있었습니다.
전반적으로 우리는 7가지 텍스트 필드의 특성을 만들었고, 그 특성을 조합해 140개의 텍스트 필드를 얻을 수 있었습니다.
텍스트 필드의 "라벨 위치" 특성과 그에 따른 조합테스트가 끝난 후, 참가자들은 텍스트 스타일의 선호도를 매겼고 20가지의 문항에 답해야 했습니다.
해당 테스트를 완료하기 위해 시간제한은 두지 않았고, 참여자는 이메일을 통해 도움을 요청할 수 있었습니다(하지만 아무도 도움을 요청하지 않았습니다)
팀은 히트맵을 통해 참가자들이 클릭한 데이터를 수집했습니다.
어떤 텍스트필드가 가장 효과적이고 선호되는지를 알아내기 위해 리서쳐와 디자인팀은 다음 3가지 요소에 유저 행동을 매핑했습니다.
1. 식별 가능성 : 유효한 클릭수 vs 유효하지 않은 클릭수
2. 찾을 수 있는가? 스캔 가능한가? : 참여자가 요청한 요소를 찾고, 클릭하는데 걸린 시간
3. 선호도 : 참여자가 텍스트 필드의 시안 중에 어떤 것을 선호했는지
발견한 점
새 텍스트 필드에는 텍스트 필드 상자, 반투명한 채우기, 적절한 색상 대비, 둥근 모서리와 내부에 존재하는 레이블이 있습니다.두 가지 연구에 대한 결과로 텍스트 필드에 중요한 요소를 알 수 있었습니다.
직사각형 박스로 에워싸여있는 텍스트 필드 모양이 라인으로 이뤄진 텍스트 필드보다 더 사용성이 좋았습니다.
텍스트 필드 라인의 컬러 대비는 배경과 최소 3:1의 대비 비율을 가져야 합니다.
라벨 텍스트는 택스트 필드 박스 안에 위치해야 합니다.
텍스트 필드는 라운드 코너를 가져야 합니다.
결론
리뉴얼 전 텍스트 필드
리뉴얼 후 텍스트 필드텍스트 필드를 다시 디자인하는데 600명의 참가자와 두 명의 디자이너, 한 명의 리서쳐가 참여했습니다.
오늘날, 이 새로운 텍스트 필드는 로그인부터 구글 폼에 이르기까지 구글 프로덕트의 전반에 사용되고 있습니다.
위에서 설명한 방법에 따라, 우리는 기존 텍스트 필드의 유저빌리티 문제를 하나씩 해결해 나갈 수 있었습니다.
우리는 가능한 모든 텍스트 필드를 테스트했고, 어떤 특징을 가진 폼이 작동을 잘하거나 혹은 못하는지를 알아낼 수 있었습니다. 그리고 단지 하나의 텍스트 필드가 아닌, 옵션들이 결합되었을 때 어떤 텍스트 필드가 더 유용한 지를 알 수 있었습니다.
읽어주셔서 감사합니다.
