뻔한 것에는 이유가 있다
(2) ATC21.space의 인터페이스와 사용자 인터랙션
1편에 이어지는 글이다.
ATC21.space를 구석구석 보면 선택한 폰트부터 아이콘까지 '뻔한 것'에서 탈피하려는 부단한 노력이 잘 보인다. 웹/모바일이 보편의 영역에 자리 잡게 되며 정답처럼 여겨지는 요소들과 레이아웃 템플릿들이 존재한다. 이렇게 모범답안이 존재하는 분야에서 기본을 지키고 개성도 살리는 것은 결코 쉬운 일이 아니다. ATC21.space는 도메인부터 3X3 닷으로 구성된 로고와 웹 인터페이스까지 뚜렷한 브랜드 정체성을 홍보, 영상물까지 모든 분야에 일관성 있게 끌고 가고 있다. 하지만 개성 있는 정체성에 매몰된 웹에서 지켜야 하는 몇 가지 기본적인 원칙을 잊었다. 이 글은 기본이 지켜지지 않은 인터페이스와 사용자 인터랙션에 대해 이야기하고자 한다.
Norman의 디자인 원칙
*기존 번역이 좀 덜 직관적인 것 같아 번역은 내 마음대로 함
1. Visibility (가시성; 잘 보인다)
사용자는 웹사이트를 보고 본인이 이행할 수 있는 행동의 종류를 직관적으로 알 수 있어야 한다. 특히 스크린이 작은 모바일 환경에서는 불필요한 요소를 제거하고 필요한 옵션들만 남겨놓는 것이 사용자에게 의도한 행동을 하게끔 만드는 제일 효과적인 디자인 전략이다. 대표적인 예시로 햄버거 메뉴가 있다.
지메일, 네이버, 브런치, 인스타그램 화면에서의 햄버거 메뉴사용자는 햄버거 메뉴 아이콘을 누르면 하위 메뉴들에 접근할 수 있다는 사실을 과거의 경험을 통해 보편적 상식으로 인지한다.
2. Feedback (피드백; 사용자가 누르면 눌렀구나! 알 수 있다)
사용자가 어떤 행동을 할 때 그것을 했다고 알려주는 장치가 있어야 한다. 그래야 사용자는 본인이 행동을 제대로 했는지 의심되어 확인하기 위해 같은 행동의 반복을 하지 않는다.
보편적 로딩 모션예컨대 무언가 로딩할 때 뜨는 원형으로 움직이는 모션이 있다. 또 잘못된 걸 클릭했을 때 나는 경고음 등 소리 피드백도 존재한다. 이러한 장치를 통해 사용자는 이행한 행동에 대해 확신을 갖게 되며 반복적인 행동을 하지 않게 된다.
3. Affordance (어포던스; 환경이 사용자에게 행동을 유도한다)
어포던스는 Gibson이 처음 제시한 개념으로, 환경이 동물에게 제공하는 것을 뜻한다. 이는 환경과 사용자의 상호작용으로 해석되기도 한다. 예컨대 문을 열기 위해서 문고리를 돌려야 한다는 것, 컵을 들기 위해서는 손잡이를 잡아야 한다는 것을 직관적으로 아는 것이다. 웹 상에서는 버튼을 보면 누르면 된다는 것을 사용자가 별도의 설명 없이 알아야 한다.
지메일 본문 작성 화면지메일에서 본문을 작성하고 보내기 위해서 파란색 보내기 버튼을 누르면 된다는 것을 직관적으로 아는 것, 이것이 지메일이 사용자에게 버튼을 누르는 행동을 유도하는 장치이자 지메일이 제공하는 어포던스이다.
4. Mapping (행동 대응; 행동에 따른 인터페이스가 말이 된다)
좋은 디자인은 말이 되어야 한다. 웹페이지의 스크롤 길이와 위치에 따라 웹페이지가 얼마나 길고 사용자가 어디쯤 위치했는지 알 수 있다. 스크롤을 움직이는 방향과 속도에 따라 웹페이지가 움직이는 것이 Mapping의 좋은 예이다.
OSX Big Sur의 사운드바 위 그림처럼 사운드 바가 조금만 차있으면 소리가 작고, 사운드 바가 많이 차있으면 소리가 큰 것, 따라서 사용자가 소리를 키우기 위해 원형 인터페이스를 잡고 오른쪽으로 끌어당기면 소리가 커지는 것 역시 또 다른 Mapping의 예이다.
5. Constraints (제약; 불필요한 가능성을 없애 필요한 행동만 한다)
Constraint는 어포던스와 깊이 연관되어 있다. 어포던스가 행동을 유도하는 장치를 심었다면 제약은 그 장치에서 사용자가 할 수 있는 행동의 경우의 수를 줄인다.
지메일의 메일 쓰기 창을 보자. 여기서 깜빡이는 커서는 사용자에게 이 창에 텍스트를 입력할 수 있다는 어포던스를 제공하는 것이다. 수신자 칸에 올바른 형식의 이메일 주소를 쓰지 않으면 빨갛게 표시가 되는 것은 적절하지 않은 이메일 형식이라는 것을 의미한다. 이런 표시를 통해 사용자는 수신자 항목에 적절한 이메일 주소만 입력할 수 있다는 행동의 제약을 받게 된다.
6. Consistency (일관성; 여기서도 이러한 게 저기서도 그러하다)
보편적 일관성
쿠팡 상품 상세화면
쿠팡 장바구니 결제화면초록색은 Yes, 빨간색은 No라는 의미의 보편적 일관성과 더불어 해당 프로덕트 안에서 가지는 고유한 일관성도 중요하다. 위 그림의 쿠팡 같은 경우 상품 상세 화면에서 '장바구니 담기' (화면 이동 없음)는 흰색, '바로구매' (구매 페이지 이동)은 파란색으로 되어있다. 장바구니 결제 화면에서도 '계속 쇼핑하기'(화면 이동 없음)은 흰색, '구매하기'(결제 수단으로 이동)는 파란색으로 되어있다. 이런 일관성을 통해 소비자는 상품 구매와 관련된 버튼은 파란색이란 걸 인지하고 쿠팡 내에서 원하는 행동을 취할 수 있다.
Apple: Human Interface Guidelines
플랫폼의 보편적 인터페이스 법칙을 따르기 위해서 내가 만든 것과 위의 가이드라인을 비교해보는 것도 아주 좋은 방법이다.
Norman은 이런 6가지 디자인 원칙을 통해 Conceptual Model을 만드는 것이 중요하다고 강조했다. Conceptual Model은 제품이 운용되는 원리에 대한 정신적 모델이다. 쉽게 말해 사용자가 머릿속에 있는 제품을 운용하는 방법이다. 이러한 원칙들이 잘 지켜진 디자인은 디자이너의 Conceptual Model과 사용자의 그것이 매우 비슷하다.
ATC21.space의 Conceptual Model
또 혓바닥이 길어진 이유는 ATC21.space의 인터페이스와 사용자 인터랙션을 위 개념에 빗대 평가하기 위해서다.
- 햄버거 메뉴가 햄버거 모양이어야만 하는 이유
헤더의 양측에 위치한 햄버거 메뉴로 추정되는 두 아이콘은 가시성에 위배된다. 보편적으로 헤더에 햄버거 메뉴가 위치하기 때문에 3x3 닷으로 이루어진 양측의 아이콘 중 하나는 햄버거 메뉴의 기능을 하리라 사용자는 기대할 수 있지만, 웹 환경에 익숙지 않은 사용자는 3x3 닷으로 구성된 아이콘이 시사하는 의미를 직관적으로 캐치할 수 없다. 또한 햄버거 메뉴로 추정되는 것이 두 개나 존재하기 때문에 실제로 햄버거 메뉴가 무엇인지 알기 위해서는 두 아이콘을 다 클릭해봐야 하는 비효율을 초래한다.
우측 아이콘은 햄버거 메뉴인 데 반해 좌측 아이콘은 상세 페이지 중 하나인 'Now'로 이동하는 버튼이다. 그렇다면 우측 햄버거 메뉴와는 확실히 다른 모양으로 사용자에게 Constraint를 제시해야 한다. 그리고 보편적 사용자에게 메뉴에 접근하는 행동을 유발하기 위해서는 다소 뻔하더라도 보편적으로 사용하는 햄버거 모양의 메뉴 아이콘을 사용해야 한다. 뻔한 것에는 이유가 있다.
- 프로덕트 내 '뒤로' 버튼의 부재
ATC 홈페이지 내에서는 뒤로 갈 수 없다. 시스템의 뒤로 가기 기능을 이용해야 이전 단계로 돌아갈 수 있다.
위 Depth 구성에서 3rd 단계에서 2nd로 가기 위해서는 시스템의 뒤로 가기 기능을 이용해야 한다. 시스템의 뒤로 가기를 이용하면 2nd 페이지가 재로딩된다. 즉 3번 컬렉션의 6번째 작품을 보고 7번째로 넘어가기 위해서 2nd 단계에서 다시 첫 번째 작품부터 스크롤을 내려 7번째 작품에 다다라야 한다. 사용자는 프로덕트 내에서 행동을 취하는 경향이 있기에 뒤로 버튼을 찾지 못하면 대개 홈 버튼을 누르고 1st 뎁스부터 재수행한다. 시스템의 뒤로 가기 기능을 사용하거나 홈으로 이동하여 뎁스를 다시 밟는 행위는 비효율적이고 헷갈리기에 좋은 디자인이라 말할 수 없다. 사용자에게 뎁스 간 이동을 가능하게 하는 장치가 필요하다.
- 일관적이지 않은 이미지 기표(Signifier): 이미지 = 버튼?
기표란 적절한 행동을 유도하는 모든 장치를 뜻한다. 웹 상에서 이미지는 클릭하여 다른 곳으로 이동할 수 있는 버튼의 기능을 하기도 하고, 어떤 기능도 하지 않는 배경의 기능을 하기도 한다. 다만 같은 위계에 같은 형식으로 위치한 이미지라면 같은 기표로 기능해야 한다. 홈 화면에서 어떤 이미지는 클릭하여 상세페이지로 넘어가고, 어떤 이미지는 클릭할 수 없다. 이는 프로덕트 내 일관되지 않은 이미지 기표를 뜻하며 일관성 법칙에 위배된다.
홈 화면 구조
사용자가 좌측 블록의 이미지와 우측 블록의 이미지의 기능적 차이를 가시적으로 설명할 수 있는가? 사용자가 보기엔 그저 동치에 놓인 일러스트이다. 하지만 좌측 이미지는 클릭할 수 없고 우측 이미지는 클릭하면 10주년 기념 상세 페이지로 넘어간다. 이러한 일관되지 않은 기표는 사용자에게 혼란을 야기한다.
- 일관적이지 않은 이미지 기표 (Signifier): 1=1, 1=2, 1=3?
같은 의미를 가진 복수의 장치를 심을 때는 복수의 장치가 상호보완적이어야 한다. Rebekah Joy Sutherland and Tom Isherwood (2016)의 연구에서 상호보완적이지 않은 이미지, 아이콘, 일러스트, 텍스트 요소의 복합적 사용은 사용자의 이해도를 현저히 떨어뜨린다는 결과를 도출했다. ATC 홈페이지 내에서 같은 이미지가 다른 항목을 설명하기 위해 수차례 쓰인 걸 확인할 수 있다.
눈이 그려진 큐브는 무엇을 뜻하는 이미지인가?위와 같은 눈이 그려진 큐브는 '공생계'라는 테마 중 하나를 뜻하는 이미지로 사용됐다. 하지만 그 아래 컬렉선 중 'Multi-Sensory'를 설명하기 위해 또 사용되었다. 눈이 그려진 큐브는 공생계 테마를 의미하기도 하지만 'Multi-Sensory' 컬렉션을 의미하기도 한다. 하나의 이미지가 다른 항목을 설명하기 위해 반복 사용된 순간 이미지는 텍스트를 보완하는 능력을 잃게 된다. 사용자는 눈이 그려진 큐브를 통해 어떤 의미도 유추할 수 없다. 프로덕트 내 항목을 설명하기 위해 사용된 이미지가 일관성을 위배하며 사용자의 이해도를 떨어뜨린다.
이런 일관되지 않은 기표는 눈이 그려진 큐브뿐만 아닌 다른 이미지에서도 관찰할 수 있다.
'Eco-Square'라는 컬렉션에 사용된 돔 구조물 이미지가 사람을 설명하기 위한 프로필 사진으로 재사용된 것도 비슷한 경우이다. (아마도 다영이가 이미지를 주지 않아 다영의 작품을 프로필 사진으로 사용한 것이겠지만) 같은 이미지를 다른 층위의 다른 항목을 설명하기 위해 반복적으로 사용한 순간 이미지는 고유의 의미를 전달하는 힘을 잃게 된다.
- 이게 도대체 무슨 기능인지?
헤더의 왼쪽 햄버거를 클릭하거나, 헤더의 오른쪽 햄버거 클릭 후 Now 탭을 클릭하면 등장하는 페이지이다.
이 페이지에서 가장 혼란스러운 기능은 'My Inventory Setting'이라는 항목인데, 이게 무엇을 위한 기능인지 직관적으로 알 수 없고 왜 이것이 해당 페이지 상단에 위치할 정도로 높은 지위를 가진 것인지 알 수 없다. 일단 웹 서비스에서 'My' 항목을 갖기 위해서는 각자의 ID가 부여되어야 한다. 하지만 ATC 홈페이지는 따로 로그인을 하는 체제가 아니다. 다시 말해 개인의 ID가 부여되지 않았는데 'My'라는 개인의 항목이 생기는 모순이 일어난다.
또한 인벤토리가 무엇인지에 대한 설명이 전혀 존재하지 않는다. 저 링크는 무엇이며 복사를 하여 어디다가 공유를 하면 그 링크를 통해 무엇을 접근할 수 있는지에 대한 정보가 전혀 존재하지 않는다. 게다가 'Share with Others'라는 버튼 옆 'Do not Share'라는 버튼이 존재한다. 이 버튼의 존재는 디폴트 값이 '공유'라는 걸 전제한다. 그렇다면 무엇이 어디에 공유되는가? 그저 Now 페이지에 접근하는 것만으로 무언가가 공유되는 건가?
'Do not Share'를 눌러본다. 아무것도 뜨지 않고 아무런 액션이 일어나지 않는다. 이 기능은 무엇을 위해 존재하는가? 아직도 잘 모르겠어서 질문으로 남기겠다.
- UX writing: '_'의 이유
홈페이지 구석구석을 보며 흥미로웠던 건 텍스트 띄어쓰기에 _를 기입한 것이었다. 디자인 요소로 단어 간 _를 사용하는 건 인스타그램 해시태그 형식에서 비롯했다. #해시태그는_띄어쓰기가_안_되니까
해시태그 형식의 텍스트의 특성은 1) 파란 계열의 색이다 2) 띄어쓰기가 안 되어 _이 스페이스를 대치한다 3) 대체로 짧은 명사형의 텍스트 이다. 하지만 '큐레이터에_대하여'나 '작가에_대하여' 텍스트는 해시태그 형식의 텍스트가 아님에도 '_'가 삽입되어 있다. 해시태그 형식을 차용한 텍스트 디자인이 아니라면 '_'는 불필요하기에 빼는 것이 합리적이다. 불필요한 언더바는 텍스트와 UX writing의 일관성을 해친다.
- 언어: 무엇이 영어이고 무엇이 한국어인가
마지막으로 언어 호환을 지적하고 싶다. 메뉴에 언어 옵션이 있길래 클릭해보았는데 변하는 게 없었다. 메뉴를 빠져나와 홈 화면으로 가니 콘텐츠 세부 설명이 한국어에서 영어로 바뀌었음을 확인했다. 언어를 옵션으로 넣고자 했으면 모든 인터페이스의 언어에 적용하는 것이 맞다. 물론 한국어보다 영어가 간지난다고 생각할 수도 있지만(절대 그렇지 않다), 사용성과 간지는 독립적인 요소이다.
또 혓바닥이 길어졌다. ATC21.space의 주된 문제점은 개성에 매몰되어 보편성을 놓쳤고, 각 요소들에 일관성이 부족하다는 것이다. 물론 각각의 요소를 독립적으로 놓고 보면 엄청난 퀄리티이지만 (특히 일러스트!) 그것이 구성되는 과정에서의 설계가 미흡하다.
웹/모바일의 사용성은 다양한 방식으로 테스트해볼 수 있다. 사전 연구를 통해 검증된 수많은 설문지 중 하나를 택하여 해볼 수도 있고, 잠재적 타깃에게 직접 사용해보도록 할 수도 있다. 디지털 사용성에 있어 무엇이 되었든 중요한 건 기본을 놓치지 않는 것이다. 나 역시도 독특하고 개성 있는 것을 하고자 하여 기본에 미흡했던 시기가 있었던지라 이번 리뷰를 하며 과거의 나 자신을 거울로 비추는 기분이었다.
다양하고 방대한 양의 콘텐츠를 하나의 웹 전시로 엮어내고자 한 아텍 후배들에게 큰 격려와 응원을 보내며 크리틱이 부끄럽지 않은 선배가 되도록 열심히 발로 뛰며 연구하는 디자이너가 되어야겠다. 하핫.
