6원칙. 즉각적으로 반응하라
author - 우뚝솟은비니 | UX 디자이너
Previous Brunch.
『리치 인터페이스 디자인』이라는 책의 6가지 디자인 원칙과 가이드라인을 바탕으로 최근의 모바일 인터페이스 사례를 살펴보고 있습니다.
*gif가 다량 포함되어있습니다. PC나 아이폰 브런치 앱에서만 재생이 되기 때문에 PC 혹은 아이폰 브런치 앱에 접속해서 읽어주시면 감사하겠습니다:)
제6원칙
즉각적으로 반응하라
사용자의 모든 행위에 ‘즉각적으로’ 반응해야 한다는 원칙
사용자는 버튼을 클릭할 때 버튼이 눌러지는 느낌을 기대하고, 실수했을 때는 무엇을 실수했는지 알려주기를 원하고, 검색을 시작했을 때 바로 결과가 나타나기를 기대합니다. 즉 모든 행위에 반응해주기를 원하는 것입니다. 인터페이스는 사용자의 행위에 즉각적으로 반응해야 하며 사용자는 즉각적인 반응을 경험할 때 시스템이 지능적이라고 인식합니다.
검색 패턴
사용자는 어림짐작으로 검색하기 때문에, 어떤 실시간 피드백이더라도 사용자의 테스크를 완료하는데 도움이 됩니다. 검색 시에 즉각적으로 반응할 수 있는 패턴을 구글 포토와 에어비앤비를 통해 알아보겠습니다.
검색 시에 사용자와 즉각적으로 상호작용하는 패턴
1. 추천 검색어 제공 -구글 포토
2. 자동완성 - 구글 포토
3. 실시간 상세 검색 - 에어비앤비
Google Photo
사진을 검색한다는 개념이 아직 익숙하지 않은데, 구글 포토는 검색의 모든 과정에서 다양한 피드백을 제공하여 사진 검색을 보다 쉽게 만들었습니다.
1. 추천 검색어
구글 포토는 검색 페이지 진입 시에 기본적으로 다양한 추천 검색어를 제공합니다. 위에서부터 최근 검색 기록/인물별/파일 포맷별/장소별로 추천 검색어를 제공하고 있습니다. 이러한 추천 검색어들은 자기가 찍은 사진을 텍스트로 검색하는 것이 어색한 사용자들에게 어떤 검색어가 가능한지, 어떤 방식으로 검색을 해야 하는지 가이드가 되어줍니다. 특히 인물별 검색어는 텍스트가 아닌 대표 이미지를 제공해 직관성을 높였습니다.
2. 자동 완성
사용자가 검색창에 텍스트를 입력함에 따라 그에 맞는 값을 노출해 주는 것을 자동완성이라고 합니다. 적합한 값이 나타나면, 사용자는 입력을 멈추고 목록에서 가장 유사한 항목을 고르거나 전혀 다른 값을 선택할 수도 있습니다. 선택한 값은 창에 자동 입력됩니다.
플엑의 귀염댕이 가루를 검색해보았습니다자동완성 패턴에서 고려해야 할 상호작용 순간은 세 가지입니다.
입력하기: 각 글자를 입력할 때마다 피드백을 제공해야 함
맞춰보기: 입력 값과 동일한 값에 강조 표시
선택 하기: 자동 완성 값 중 유효한 결과 선택해주기
이 세 가지 순간 중 모바일에는 해당되지 않는 선택하기 순간을 제외하고 입력하기, 맞춰보기 순간을 구글 포토에 대입해 보겠습니다.
입력하기
한 글자를 타이핑하는 순간 타이핑된 글자가 포함된 자동완성 검색어들을 검색창 하단에 최근 검색 기록/인물별/장소별/기타 검색어 순으로 노출해줍니다. 이때 흥미로운 것은 자동완성 검색어를 노출하는 타이밍인데요, 'ㄱ'이라는 자음만 타이핑했을 때는 아무 반응이 없다가 '가'라는 글자 하나를 완성했을 때 자동완성 검색어를 노출해줍니다. 자음 하나에도 반응한다면 인터페이스가 너무 산만해질뿐 아니라 자음 하나로는 사용자에게 유효한 검색어를 추천해줄 수 없기 때문입니다. 이와 비슷한 맥락으로 책에서는 '사용자가 입력을 멈출 때 결과를 보여주어라'라는 가이드를 주고 있습니다.
맞춰보기
구글 포토는 입력 값과 동일한 값에 회색으로 강조표시를 하고 있습니다. 이는 어떤 검색어가 일치하는지 뿐 아니라 어떻게 일치하는지도 분명히 알 수 있게 합니다. 특히, 사용자가 이미 폴더링 해놓은 인물이나 동물의 경우 대표 이미지, 일종의 미리보기까지 함께 노출시켜주어 더욱 직관적이고 빠른 검색을 돕고 있습니다.
Airbnb
다양한 검색 결과값을 가지고 있는 동시에 각기 다른 사용자의 상황에 딱 맞는 숙소를 추천해주어야 하기 때문에 검색 화면에서 많고 상세한 필터를 제공합니다. 이 상세 검색 필터를 통해 사용자가 원하는 숙소를 빨리 찾을 수 있도록 탐색 범위를 좁혀주고 있습니다.
3. 실시간 상세 검색
실시간 상세 검색 이란, 실시간으로 검색 결과를 조정할 수 있는 일련의 필터를 제공하는 검색 패턴입니다. 이는 원하는 결과까지 검색 범위를 좁힐 수 있는 강력한 방법입니다. 실시간 상세 검색 패턴을 디자인할 때 고려해야 할 점 몇 가지를 살펴보겠습니다.
CTA버튼을 검색결과 미리보기로 사용했습니다.고려사항 1. 페이지 새로고침 피하기
책에서는 페이지 새로고침 없이 검색 갱신 결과를 실시간으로 제공하는 것이 중요하다고 말합니다. 필터 조작 때마다 새로고침(화면 전환)이 일어나면 사용자 피드백 측면에서 매우 산만할 뿐 아니라, 사용자로 하여금 콘텍스트를 잃게 하기 때문입니다.
사용할 수 있는 화면이 넓은 PC웹에서는, 화면을 분할하여 좌측은 필터 영역으로 고정시켜 사용하고, 우측의 검색 결과 영역만 갱신하여 콘텐츠 노출이 가능하기 때문에 이 가이드라인을 지킬 수 있습니다. 하지만 상세한 필터를 제공하려면 풀 페이지 팝업(화면 전체를 덮는 레이어)을 쓸 수밖에 없는 좁은 모바일 화면의 경우, 어떻게 해야 화면 전환을 최소화할 수 있을까요?
→검색 결과 개수 미리 보기
에어비엔비는 필터의 컨트롤러를 조작하는 즉시 하단 CTA버튼('nn여 개 숙소 보기'가 적혀있는 버튼)에 검색 결과값을 반영합니다. 그래서 보기 버튼을 누르고 필터 화면을 빠져나가기 전에 사용자가 몇 개의 검색 결과를 얻을 수 있는지 미리 알 수 있게 합니다. 만약에 검색 결과값이 0개일 경우, 현재 화면을 빠져나가지 않고도 필터를 재조작하여 유효한 값을 얻도록 유도하여 화면 전환을 최소화시키는 것입니다.
(하지만 현재, 검색 결과가 없는 경우에는 '숙소 보기'라는 텍스트를 노출하는데요, 이런 모호한 레이블보다는 '0개의 숙소' 라던지 '검색 결과가 없습니다'등의 명확한 레이블을 사용했다면 더 좋지 않았을까 생각합니다.)
고려사항 2. 시각적으로 끌리는 필터 컨트롤 사용하기
에어비엔비는 on/off의 피드백이 명확한 스위치와 직관적인 레이블, 그리고 상세한 추가 설명으로 해당 필터가 어떤 검색 결과를 불러올지 정확히 예측할 수 있게 합니다. 특히 조작이 어려울 수 있는 슬라이더도 직관적이고 조작하기 편한 방식으로 제공하고 있습니다. 슬라이더에 대해 책이 제시하는 몇 가지 유의사항을 살펴보겠습니다.
슬라이더 사용 시 주의사항
슬라이더를 드래그하는 동안 다른 실시간 피드백을 보여주어라 → 슬라이더 조작 즉시 상단의 가격 범위 숫자가 바뀝니다.
슬라이더 바나 슬라이더 배경 중 어디를 클릭해도 슬라이더가 설정되게 하라. → 아쉽게도 에어비엔비의 슬라이더 바는 드래그를 통해서만 조작이 가능합니다. 하지만 슬라이더 바에 가격 범위가 쓰여있지는 않기 때문에 드래그만으로도 충분히 편한 사용성을 제공하고 있다고 생각합니다.
접근성을 고려하여 입력 필드 제공을 검토하라. →정확한 값을 입력하게 하기 위해 슬라이더와 함께 입력 필드를 제공하는 사이트들이 있습니다. 하지만 모바일 환경이라는 점을 고려했을 때 슬라이더 제공만으로도 충분하다고 생각합니다.
세 번째 '입력 필드를 제공하라'는 주의사항의 경우, 위메프와 티몬의 필터를 비교해보면 모바일 환경에서는 입력 필드를 제공하는 것이 오히려 불편하다는 것을 알 수 있습니다.
가격대 필터에서 입력 필드만을 제공하는 티몬의 경우, 최소값을 입력하지 않는다고 하더라도 '최댓값 필드 선택 > 원하는 가격 입력 > 설정 버튼 탭'의 최소 3단계를 거쳐야 합니다. 하지만 가격대를 체크박스로 선택하게 하는 위메프의 경우, 한 번의 탭만으로도 원하는 가격대의 상세 검색이 가능합니다. 정확한 입력이 필요한 상황에서는 입력 필드를 제공해야겠지만 대략적인 범위만으로도 상세 검색에 무리가 없는 경우에는 슬라이더나 체크박스 등 가벼운 인터페이스를 사용하는 것이 효율적이여보입니다.
고려사항 3. 검색 개시 시점
불필요한 검색 갱신을 방지하기 위해 사용자가 조작을 멈출 때까지 기다려야 합니다. 이 타이밍을 잘 지켜야 인터페이스가 잘 반응하는 것처럼 느껴지면서도 조잡하지 않게 반응하게 됩니다.
에어비엔비의 슬라이더는 드래그 중에는 아무 반응이 없다가 손가락을 화면에서 떼야지만 검색 결과 로딩이 시작됩니다. 책에서 제시하는 알맞은 검색 개시 시점을 지키고 있는 것으로 보입니다.
드디어 『리치 인터페이스 디자인』의 6가지 디자인 원칙을 모두 소개해드렸습니다.
그동안 장장 7편의 긴 브런치를 읽어주신 독자님들께 그랜절 드립니다ㅠㅠ
책의 초반은 사실 조금 지루했습니다. 예시 자체가 너무 오래되었고 한눈에 흥미를 끄는 타입의 책은 아니기 때문입니다. 하지만 UX/UI 설계 시에 꼭 고려해야 할 원칙들과, 바쁜 실무 중에 놓치기 쉬운 UI의 디테일들을 상세하게 잡아주고 있어서 읽어나갈수록 재밌고 흥미로운 책이었습니다. 그동안 당연하게 여겨왔던 흔하고 평범한 인터페이스들이 '왜' 그런 방식으로 설계되고 작동되는지 원리를 알 수 있게 해 주기 때문에 UX/UI에 관심 있는 입문자 분들이라면 꼭 한 번씩 읽어보시기를 추천드립니다. 저도 이제 막 입사한 주니어 디자이너인 시점에서 이 책을 읽고 리뷰를 쓸 기회를 갖게 된 것이 앞으로 있을 UX설계에 있어서 큰 자산이 될 것 같습니다.
<신비한 모바일 인터페이스 사전 >
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
