바닥부터 시작하는 UX스터디 05
UX견습생의 User Inyerface 웹페이지 뜯어보기: 네번째 화면
DD Kim으로부터 지난번 포스트에 대한 코멘트를 받고 적잖이 놀랐다. 왜냐하면 점점 화면 분석이 진전을 보여감에 따라, 나도 비슷한 생각을 하기 시작했기 때문이다. 이제는 단순히 화면 한 개라는 단편적인 데에서 그쳐서는 안된다는 생각이 들었다.
화면 디자인의 요소는 크게 두가지로 묶을 수 있다. 첫번째는 화면의 요소들이다. 체크박스나 라디오 버튼, 필드의 레이아웃이나 위젯의 구성 등 보다 직접적이고 눈에 쉽게 띄는 것들이다.
두번째는 워크플로우이다. 작업 흐름이라고도 하는 이 부분은 조금 더 추상적인 개념이지만 서비스가 추구하는 최종 목적을 이루기 위해서 훨씬 더 중요한 부분이다. 왜냐하면 각각의 화면들이 잘 만들어졌다 하더라도 플로우가 잘못되어 있다면 사용성이 악화되기 때문이다.
플로우는 눈에 보이는 요소들보다는 각 기능 간의 사용자 이동을 다룬다. 이는 한 개의 화면 내에서만 이루어지는 것이 아니라 다수의 화면 간의 관계까지 포함한다. 잘 만들어진 워크플로우는 웹사이트와 앱의 사용을 더욱 매끄럽고 기분좋게 만들 수 있다. (닐슨 노먼 그룹,Disruptive Workflow Design)
우리가 디자인하는 것은 유저 인터페이스(화면, 오류 메시지, 양식, 명령어 등)이다. 하지만 사용자들은 이를 넘어서 전반적인 시스템을 경험하며, 이는 디자인 뿐 아니라 보다 넓은 범위의 실행 요소(네트워크 지연으로 인한 응답 시간, 버그 등)들을 포함한다. (닐슨 노먼 그룹, Disruptive Workflow Design)
지금까지 User Inyerface 분석 포스트에서는 이 두 가지 중에서 첫번째 요소에 보다 집중해왔다. 하지만 이 웹사이트의 회원가입 프로세스의 거의 끝까지 온 시점에서, 과연 이 웹페이지의 워크플로우는 적절한지도 함께 돌아볼 필요가 있다고 생각한다.
따라서 이번 포스트에서는 위에서 언급했던 두 가지 요소들을 모두 살펴보고자 한다. 우선 네번째 화면을 포함한 지금까지의 워크플로우를 한번 되돌아보고, 그 다음 이번 화면의 요소들은 적절하게 사용되고 있는지 분석해 보려고 한다.
논리적인 흐름 따져보기
지금까지 User Inyerface의 워크플로우는 크게 보면 다음과 같다
1단계: 시작 버튼 누르기
2단계: 아이디와 비밀번호 설정하기(계정생성)
3단계: 프로필 설정하기, 관심사 선택하기
4단계: 개인 정보 입력하기
5단계: 보안 인증 단계
그리고 각 단계의 화면에서의 큰 흐름은 대략적으로 다음과 같다. 1분마다 나타나는 팝업창 같은 단계는 생략하였다.
User Inyerface 워크플로우워크플로우를 구성할 때 중요한 것은 화면 요소를 구성할때와 크게 다르지 않다. 사용자를 고민에 빠뜨리지 않는 것이다. 이를 화면 요소에 적용할 때에는 '시각적인 명확성'을 나타내는 방향으로 고민했었다. 워크플로우에서는 이것이 '논리적인 순서'가 된다. 관례를 근거로 하든, 사이트 목적을 고려하든, 사용자가 자연스럽게 받아들일 수 있는 설득력 있는 플로우 설계는 사용자의 이용 경험을 보다 만족스럽게 바꾸어준다.
그런 의미에서 User Inyerface의 워크플로우는 어떤 목적으로 구성된 것인지 불분명하다. 보통 회원가입과 같이 사용자에게 정보를 요구하는 프로세스는 가장 기본적인 정보(계정명 생성)에서부터 구체적인 정보(사용자 개인이나 서비스의 목적에 맞는 개별 질문)의 순서로 구성되곤 한다. 왜냐하면 준비되지 않은 상태의 사용자에게 사적인 영역에 밀접한 질문을 먼저 제시할 경우 사용자의 호감을 깎을 수 있는 위험성이 있기 때문이다.
User Inyerface 전체 워크플로우 수정하지만 User Inyerface의 전체 플로우는 이 순서가 뒤섞여 있는 것처럼 보인다. 아이디와 비밀번호를 설정하고, 프로필 사진을 업로드 한 뒤에 바로 관심사를 묻고 있는 것이다. 그리고 그 다음에서야 프로필을 작성하도록 안내한다. 사이트 목적에 따라 관심사 등록을 먼저 하도록 설계되었을 가능성도 있지만, 현재의 웹사이트에서는 그런 의도가 있었다 해도 파악하기 어렵다. 그렇다면 차라리 프로필 이미지 등록과 함께 인적사항을 입력할 수 있도록 순서를 바꾸어 제시하는 것이 낫다.
User Inyerface 네번째 화면의 워크플로우 수정전체 플로우 뿐 아니라 개별 화면에서도 논리적 순서를 고려하지 않은 모습들을 쉽게 확인할 수 있다. 첫번째 화면에서 아이디보다 비밀번호를 먼저 물어본 것이 그중 한 예이다. 특히 네 번째 화면에서는 이것이 더욱 두드러지는데, 보통 인적사항을 입력한다고 하면 떠올리는 순서들이 뒤섞여 있다. 현재의 순서가 사이트 이용 자체에 치명적인 영향을 주는 것은 아니다. 하지만 사용자는 뒤죽박죽인 화면을 보면서 어색함을 느낀다. 그리고 이 어색함은 어수선한 웹페이지를 보면서 강화된다. 최종적으로 사용자가 웹페이지에 대한 호감도를 대폭 잃고 웹페이지를 떠날 가능성도 있다.
이전에 사용자는 웹페이지나 앱을 시작할 때 호감 저장고를 가지고 시작한다는 것을 언급했었다. 스티븐 크룩의 '사용자를 생각하게 하지 마!'에서는 사용자의 호감을 떨어트릴 수 있는 요소 중 하나로 어설픈 완성도의 웹페이지를 꼽고 있다.
사이트에 체계나 전문적인 느낌이 없고 엉성해서 밖에 내놓을 정도로 보기 좋게 만들려고 노력하지 않았다는 느낌이 들면 호감이 줄어들 수 있다. (스티븐 크룩, 사용자를 생각하게 하지 마!, 185p)
워크플로우와 화면 요소가 모두 중요한 이유가 여기에 있다. 어느 한쪽만 잘 만들었다고 해서 사용성이 좋아지는 것이 아니다. 둘은 독립적이지 않고 서로 영향을 주는 관계이기 때문이다. 워크플로우가 잘 짜여있어도 화면 설계가 엉망이라면 사용자가 쉽게 헤멜 수 있고, 그 반대도 마찬가지이다.
User Inyerface 네번째 화면: 신뢰를 떨어뜨리는 요소들 이 페이지에서는 수정되지 않은 플레이스홀더 텍스트(여전하게도 직접 지워야 하는), 기능이 없이 자리만 차지한 데이터 입력 필드가 화면의 전반적인 퀄리티를 낮추는 데 기여하고 있다. 이것이 혼란스러운 워크플로우와함께 시너지를 일으켜,전체 웹사이트의 신뢰도를 떨어트린다.
적합한 데이터 입력 양식 사용하기
사용자를 추가적으로 혼란스럽게 하는 것은, 이 화면에서 데이터를 표시하는 방식이다. 사용자에게 데이터를 입력하도록 요구할 때에는 해당 데이터의 특성에 맞는 기능과 정렬방식을 선택해야한다. 현재 화면에서는 크게 네가지의 문제점이 보이고 있다. 칭호 드롭다운, 나이 슬라이더, 생년월일 입력, 국적 선택이다.
User Inyerface 네번째 화면: 라디오 버튼 수정현재 화면에서는 호칭 선택을 드롭다운으로 표시하고 있다. 그러나 드롭다운 메뉴는 여러개의 데이터를 표시하는 데 더 적합하기 때문에, 가부(可不)를 결정하는 문제에 드롭다운을 사용하기보다는 라디오버튼이나 스위치를 사용하는 것이 좋다. 특히 라디오버튼은 정확히 하나만 선택할 수 있는 상호 배타적인 옵션을 표시할 때(A면서 동시에 B일수 없다.) 사용되기 때문에, 훨씬 간편하게 쓸 수 있다.
젠더 선택 옵션은 스위치의 형태에 가까운데, 여기서는 통일성을 위해 마찬가지로 라디오 버튼으로 바꾸어 주었다.
User Inyerface 네번째 화면: 슬라이더 수정다음으로, 슬라이더는 구체적인 수치보다 대략적인 양을나타낼 때 사용하는 것이 적절하다. 이에 해당하는 데이터에는 밝기, 명도, 음량 등이 있다. 그러나 이 화면의 슬라이더는 나이라는 구체적인 수치를 입력하는 데 사용된다. 이는 사용자가 직접 나이를 입력하게 하거나 드롭다운 메뉴를 사용하도록 변경하는 것이 좋다.
세 번째로 생년월일 입력 필드가 있다. 날짜 입력 방식은 여러가지 형태가 있다. 그 중 본 화면에서 사용하고 있는 것은 드롭다운이다. 닐슨 노먼 그룹에서는 이를 권장하지 않고 있는데, 불필요한 클릭이나 스크롤로 사용자의 작업 시간을 늘어나게 할 수 있기 때문이다.(닐슨 노먼 그룹, Date-Input Form Fields: UX Design Guidelines)
User Inyerface 네번째 화면: 생년월일 드롭다운 수정User Inyerface에서는 심지어 드롭다운 데이터도 기준 없이 정렬하여 사용자를 더욱 헤메게 만들고 있다. 굳이 드롭다운 방식을 고수해야 한다면 차라리 연도는 올해를 기준으로 정렬하고, 달이나 날짜는 1부터 정렬하는 것이 좋다. 사람들이 생년을 떠올릴 때는 현재를 기준으로 거슬러 올라가는 것을 자연스럽게 느끼기 때문이다. 반면에 달이나 날짜는 1부터 세기 때문에 작은 숫자부터 시작하는 것이 더 바람직하다.
User Inyerface 네번째 화면: 생년월일 입력 필드 수정아예 다른 날짜 입력방법을 사용하는 방법도 있다. 생년월일은 현재로부터 멀리 떨어진 과거 일자를 탐색해야하기 때문에 아예 사용자가 직접 입력하도록 하는 편이 효율적이다. 이 입력 방식에는 필드를 분할하거나, 한번에 입력하도록 하는 방법 등이 있을 수 있다.
User Inyerface 네번째 화면: 국가 선택 드롭다운 수정마지막으로 국적 선택의 드롭다운은 텍스트 대신에 이미지를 선택지로 사용하고 있다. 국가명은 고유명사이므로, 이미지 데이터보다는 텍스트 데이터가 의미를 명확하게 전달할 수 있다. 왜냐하면 국기 이미지는-특히 화면처럼 흑백을 기본상태로 표시하는 경우-형태가 유사한 국가들 간에 구분이 어렵기 때문이다. 예를 들어, 프랑스, 벨기에, 이탈리아의 국기나 방글라데시와 일본의 국기는 색상만 상이하고 형태는 동일하다. 게다가 국기 이미지는 텍스트보다 사용자가 탐색하는 데 많은 시간을 소비한다. 따라서 국가명은 알파벳순으로, 텍스트로 나열하도록 수정할 필요가 있다. 텍스트 앞에 나라별 국기 이미지를 붙이면 사용자의 탐색이 더 용이해진다.
수정사항을 반영하여 데이터 입력 양식을 바꾸어 보았다. 생년월일과 나이는 사용자가 즉각적으로 작성할 수 있도록 드롭다운 메뉴보다는 직접 입력 방식을 택했다.
Comment from DD Kim (UX Designer)
별달리 얹을 말이 없어요. 와-짝짝짝:) 입 닫으면 심심할까봐 굳이굳이 말을 꺼내자면 화면의 필드 레이아웃은 왜 계속 2열을 유지하는가, 필수항목과 선택항목에 대한 분리가 필요하지는 않을까, 라디오 버튼의 default 값은 무엇으로 할 것인가, title이나 age는 gender와 birthdate를 입력하면 계산이 가능한 항목인데 사용자가 2번 입력해야 할까 정도가 있겠네요.
※ 본 연구 포스트는 Bagaar로부터 웹사이트 내용 게재 허락을 받았습니다.
User Inyerface 웹사이트: http://www.userinyerface.com
※ 워크플로우 관련 참고문헌
https://www.nngroup.com/articles/disruptive-workflow-design/?lm=workflow-expectations&pt=article
https://www.nngroup.com/articles/workflow-expectations/
