by
Aug 04. 2019
바닥부터 시작하는 UX 스터디 04
UX 견습생의 User Inyerface 웹페이지 뜯어보기: 세번째 화면
이제 User Inyerface의 세번째 화면에 올 수 있게 되었다. 겨우 두번째 화면을 넘긴것 뿐이지만 어쩐지 몸도 마음도 한바탕 전쟁을 치른 것처럼 무겁기만 하다. 다음 화면을 보려면 사이트에 들어가야 하는데, 내가 화면을 수정해본다고 원래 사이트가 바뀔 일은 없으니 매번 처음부터 그 복잡한 비밀번호를 넣는 귀찮은 작업을 반복해야 하기 때문이다. 게다가 지난번 포스트에 자세하게 언급하진 않았지만 아이디, 비밀번호 생성 페이지의 비밀번호 조건에는 '키릴'문자를 넣어달라는 조건이 있어서 나를 매번 시험에 빠지게 만들었다.
그런 의미에서 갖가지 난관을 헤치고 맞닥뜨린 세번째 화면은, 단도직입적으로 말하자면 '산넘어 산'이나 다름없었다. 일단 본격적으로 이 화면을 살펴보기 전에 우선 '정리정돈'에 대해서 짚고 넘어가고 싶다. 방 하나를 떠올려 보자. 깔끔한 가상의 방도 좋고, 지금 당장 정리할 게 산더미인 자신의 방이어도 좋다. 거기서 어떤 물건을 찾는다고 해보자. 어떤 상태의 방이 더 물건을 찾기 쉬울까?
방 정리가 중요한 이유
방이 어질러져 있을땐 찾고싶은 물건도 바로 찾을 수가 없다. 나름대로 규칙을 가지고 어질러 놓은 자신의 방이더라도 한동안 안 쓰던 물건을 다시 찾으려면 한 세월이 걸린다. 하물며 자기 방도 이런데, 남의 방은 어떨까? 물건을 찾을 수는 있을까?
User Inyerface 세번째 화면: 정리되지 않은 체크박스그런 의미에서 이 세번째 화면은 정리가 하나도 안 된 방이나 다름없다. 첫 번째 포스팅에서, 메세지를 명확하게 전달하기 위해서는 시각적인 계층구조를 잘 형성하는 게 중요하다고 언급했었다. 사용자가 화면을 처음 보았을 때 '아, 이것은 이거구나', '저것은 저거구나' 하고 바로 구분이 갈 수 있는 것이 좋다는 것이다. 그런데 이 화면은, 위에 프로필 설정 공간은 우선 차치하고 하나도 정리 안 된 상태의 체크박스 더미가 한 덩어리로 다가온다.
심지어 체크박스 전부 다 체크 되어있는 상태가 기본으로 적용되어있다. 체크를 하나씩 해제하고 세개를 고를 생각을 하니 마치 모래가 섞인 좁쌀에서 좁쌀만 골라내야 하는 콩쥐가 된 것처럼 한숨부터 나온다. 체념한 마음으로 하나하나 체크해제를 하고 있다 보면 다른 체크박스들 사이에 '전체 선택'과 '전체 해제' 옵션이 숨어있다는 것을 발견하게 된다. 이게 왜 여기에 있는 걸까! 스티븐 크룩이 말했던 사용자의 호감 저장고가 마이너스를 찍는 기분이 된다. '전체 선택'이나 '전체 해제'는 다른 체크박스와는 달리 기능이 있는 요소이다. 따라서 이런 요소는 별도로 정리해줘야 용이하다.
또한 여기에는 다른 문제도 발생할 수 있다. 체크를 일일이 해제하느라 쓸데없는 시간이 들어간다는 것도 문제지만, 사용자는 채워져있는 요소를 지나치기 쉽기 때문이다. 지난번 포스트에서 보았던 두번째 화면을 다시 떠올려 보자. '당연히 동의조항에 체크 됐겠지' 하고 지나쳤다 돌아보니 '동의하지 않습니다'에 체크한 상태였던 것이 기억나는가? 이번 화면에서 주요하게 나타난 문제는 아니지만, 사용자는 채워진 것보다는 빈 칸에 더 주목하기 쉽기 때문에 사용자에게 선택이나 입력의 액션을 요구하고 싶다면 이미 채워진 것을 빼게 하기보다는 빈 칸을 보여줌으로써 사용자가 채워넣어야 한다는 시그널을 주는 것이 보다 유용하다.
시선 연구에 따르면, 사용자의 눈은 비어있는 필드에 끌린다. 최소한, 사용자들은 채워진 필드에서 덜 머무른다.최악의 경우에는, 필드를 완전히 무시할 것이다.
(닐슨 노먼 그룹, Placeholders in Form Fields Are Harmful)
물론 다른 체크박스들도 정리가 필요하다. 지금은 기준이 없이 나열만 되어 있어 아무렇게나 꽂혀 있는 책장이나 다름없는 상태다. 정리가 안 된 상황에서도 물건을 찾을 수는 있을 것이다. 하지만 기준을 가지고 분류된 책장에서 책을 찾는 게 빠를까, 아니면 정리가 안 된 책장이 빠를까? 당연히 전자가 압도적으로 빠를 것이다. 둘다 책은 찾을 수 있겠지만 후자는 책을 처음부터 끝까지 훑어보며 원하는 책이 그자리에 있는지 확인해야 하는 반면, 전자는 훨씬 더 많은 단계의 수고로움을 절약할 수 있다.
매일 다니는 길 법칙
또한 이 화면에는 시각적인 무질서 외에도 '관습을 비틀고 있다'는 기본적인 문제가 여전히 나타나고 있다. User Inyerface는 시작 화면부터 일관적으로 사용자의 무의식적인 습관을 비트는 방식을 계속 사용하고 있는데, 나는 개인적으로 여기서 '사용자의 무의식적인 습관'을 '매일 다니는 길 법칙'이라고 부르기로 했다. 매번 같은 방향으로 가다가 한번 쯤 다른 길로 가려고 했을 때 의식하지 않으면 어느새 늘 가던 길로 걷고있는 자신을 발견하는 경험은 누구나 한 적이 있을 것이다. 한번 몸에 밴 자연스러움은 쉽게 고치기 어렵다. 그것은 화면을 대할 때도 마찬가지이다. 그렇기 때문에 웬만하면 관습을 따르는 것이 좋다고 말하는 것이다. 여태 익숙했던 것이 다른 방식으로 쓰이게 되면 사용자는 쉽게 혼란에 빠지게 된다. 이는 지금 화면에서도 쉽게 찾아볼 수 있다.
User Inyerface 세번째 화면: 사용자를 혼란스럽게 하는 것이 문제는 프로필 설정 란에서 주로 발생한다. 바로 프로필 이미지 란에서 끊임없이 돌아가고 있는 애니메이션이다. 필요 이상의 애니메이션에 대해서는 이전 포스트에서도 잠깐 언급했던 적이 있다. 화면에서 애니메이션은 보통 다음과 같은 목적을 지닌다.
화면에서 시선을 끌고 변경사항을 안내함
재미와 기발함을 더함
현대적이고 새로운 디자인 트렌드를 보여줌
특히 무언가가 2개 이상의 상태를 가질 때, 애니메이션은 상태가 변경되었음을 사용자에게 효과적으로 전달할 수 있는 방법 중 하나다. 그러나 애니메이션은 사용자의 주변시에 큰 영향을 주며, 시야 안에 애니메이션이 계속해서 존재할 경우 사용자는 텍스트를 읽는 데 집중하기 매우 어렵다. (닐슨 노먼 그룹,Guidelines for Multimedia on the Web)
현재 이 화면의 프로필 이미지에서 보이는 애니메이션은 사용자에게 프로세스가 진행되고 있다는 암시를 주는 로딩, 대기 애니메이션이다. 이것이 계속 돌아가고 있으면 사용자는 이미지 로딩 문제가 있는지 의심할 가능성이 높다. 특히 프로필 업로드 작업을 해보면 이 문제가 보다 명확해진다. (아래 흐름은 본인이 처음 이 화면에 접근했을 때의 플로우이다.)
① 일단 다운로드 버튼을 누른다.
② avatar.jpg라는 이미지가 다운로드 된다.
③ 이걸 업로드 하라는 건가? 업로드 버튼은 어디있지?
④ 아, 위쪽에 있군. 보이지도 않게 숨겨 놨잖아.
⑤ 이미지를 업로드 한다. 뭐야, 기본 아바타잖아.
⑥ 애니메이션이 안 멈추네??
⑦ 업로드한 이미지가 프로필 배경이랑 똑같아서 제대로 넣은건지 모르겠네.
이런 식으로 계속되는 애니메이션 때문에 그림이 제대로 올라갔는지 확신하기 어려운 상황도 충분히 발생할 수 있다.
마지막으로, 이전 화면과의 일관성을 지키지 않아서 발생하는 혼란도 있다. 이번에는 지난번 화면과 달리 취소버튼을 누르면 냅다 취소가 된다. 팝업 하나도 없이 정말 그냥 한방에. 이렇게 되면 이전 화면과 비교해봤을 때, 중간에 쿠션이 되는 요소가 없어서 사용자가 작성한 내용을 쉽게 날리게 된다. 게다가 버튼 색상이 녹색으로 강조가 되어있는데다가 진행방향으로 생각되는 오른쪽에 버튼이 위치하고 있어서 무심코 사용자가 그쪽으로 이동하기도 쉽다. 보통 화면을 설계할 때는 전체적으로 통일성을 유지하는 것이 좋다. 한 화면에서는 이랬던 것이 다른 화면에서 바뀌게 되면 그 또한 사용자에게 혼란스럽기 때문이다.
화면을 고쳐보자
User Inyerface 세번째 화면 수정 1안우선 프로필란의 애니메이션을 없앤 뒤 가장 필요한 기능인 이미지 업로드를 가장 잘 보이게 하고, 아래쪽의 체크박스들도 다시 정리해 보았다. 체크박스 내용을 그룹으로 묶으면서 전혀 상관없는 요소들이 들어가 있었기 때문에(면이라던가, 보라색이라던가, 따로 분류할 수 없는 수준의 요소들이 많았다.) 가장 큰 그룹 세가지만 남기고 나머지는 임의로 다시 재구성했다. 이 과정에서 전체 선택 및 선택 해제 버튼은 별도의 위치에 배치했다. 또한, 실수로 취소버튼을 누르지 않도록 경고의 의미의 적색을 사용해서 버튼의 색을 변경했다.
하지만 이 화면이 정말 최선일까? 프로필란에서 애니메이션만 없애면 되나? 어차피 선택할 수 있는 것을 3개로 제한한 상황에서 전체 선택 및 해제 박스를 굳이 화면에 넣을 필요가 있을까? 취소버튼의 색상을 변경했다고 해도, 이전 화면과 배치도 형태도 다른 상황을 그대로 두는 게 좋을까?
User Inyerface 세번째 화면 수정 2안이러한 의문들을 반영하여, 다시 화면을 수정해보았다. 전체 선택, 해제 버튼을 없애고, 체크한 항목의 색상을 바꾸는 변화를 추가하여 사용자가 자신의 선택을 쉽게 알아볼 수 있게 했다. 프로필란에도 사진이 업로드되었다면 이미지란에 녹색 확인표시가 뜨게 해서 사용자가 이미지가 잘 업로드되었는지 확인할 수 있게 애니메이션을 변경했다.
또한 지난번 화면 수정안에 받았던 코멘트와 이전 화면과의 일관성을 모두 고려해서 다음 단계로 이행하는 버튼과 취소버튼의 배치 및 색상을 수정해보았다.
User Inyerface 두번째 화면 수정 3안세번째 화면의 수정안을 고려해서 두번째 화면의 버튼도 일관성을 위해 같은 형식으로 수정해보았다.
Comment from DD Kim(UX Desinger)
벌써 4번째라니 고생 많았어요. 이 정도로 분석을 해보았으니 스스로 던지면 좋은 질문들을 나열해볼게요.
왜 프로필 이미지 업로드와 흥미 선택이 한 화면에 있을까?
‘This is me’라는 문구는 적절한가? 이 문구를 통해 하고 싶은 말은 무엇이었을까?
upload image라는 버튼 위에 긴 텍스트가 있는데, 과연 저 텍스트가 필요할까? 조금 더 직관적으로 프로필 이미지를 업로드해야 하고, 이 영역이 필수라는 것을 알려줄 수는 없을까?
왜 회원가입 단계에서 사진 업로드가 필수일까? 사용자는 왜 흥미를 선택해야 하는지 아는가?
체크박스는 unselect와 select 모두 색칠이 되어 있는데 선택되지 않은 체크박스는 흰색이면 어떨까?
2단계까지 왔으니 이제는 cancel 대신에 back이 있는 건 어떨까?
만약 back 버튼이 생긴다면 back을 했을 때 1/4에 내가 입력한 내용은 유지가 되는가,
혹은 초기화되어 나올까?
이건 사족이에요. 수정한 User Inyerface 1/4 (계정 생성) 화면에서의 cancel / next 버튼은 하얀 박스 안쪽에 들어와 있는데, 2/4 (흥미 선택) 화면에서는 바깥쪽으로 나와있지요?
현재 같은 버튼인데 다른 시각적 언어를 사용하고 있어요.
※ 본 연구 포스트는 Bagaar로부터 웹사이트 내용 게재 허락을 받았습니다.
User Inyerface 웹사이트: http://www.userinyerface.com
※ 애니메이션과 화면 그리드 관련 참고문헌
https://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/
