꾸준히 사용자를 바보로 만들고 있다

다음 주가 아버지 생신이라서 목포에 가족이 모여서 식사를 같이 하기로 했다.  KTX 는 요금도 비싸고 시끄렇고 좁지만 서울에서 목포에 갈 때는 참고 갈만한 해서 기차표를 예매했다.

예약을 하고 나서 KTX는 순방향과 역방향이 있어서 순방향 좌석인지 확인하려고 했다. 예약 결과를 보니 순방향인지 역방향인지가 나와 있지 않아서 [예약확인/결재] [예약변경] [예약철회] [인쇄요청] 중 있을만한 메뉴가 예약확인일 것 같아서 [예약확인/결재] 버튼을 클릭했다. 그런데 클릭해도 아무일이 일어나지 안았다.

그림에서 보면 [예약확인/결재] 버튼만 녹색 체크 그림이 있고, 나머지 버튼은 회색이다. 나는 회색 버튼은 비활성(disabled) 버튼이라 클릭이 되지 않고, 그나마 회색이 아닌 녹색 표시가 들어간 버튼이 클릭이 될 것 처럼 보였다. 나좀 클릭해줘 라고 시각적으로 눈에 띄게 되어 있는데도 아무 일이 안일어났다.  버튼위에 마우스를 올려놓고 표우스의 모양을 보니 손모양이 아니라 화살표 모양이었다.  클릭이 안되는 버튼이었나 보다.

http://dobiho.com/wp/gallery/cache/blog/080229132441572.jpg_500.jpg


버튼 아래를 보니 버튼에 아래 화살표가 있고,  신용카드결제, 포인트 결제, 대납수령자 등록/결제 라는 글씨가 있다. 밑줄도 없고 해서 클릭이 되는 건가 하고 마우스를 올려보니 마우스 모양이 손 모양으로 바뀐다. 클릭이 되나 보다.

이 화면에서 나는 예약확인을 할 수 없다는 것을 알았다. 클릭 가능한 것은 버튼 아래에 있는 결재 관련 링크들인 것 같다.

허허…

예약을 하고, 결재를 하지 않은 상황의 이 화면에서

1. [예약확인/결재] 는 잘못된 레이블이다.
예약의 개념은 결재 까지 끝난 것을 말하는 모양이다. 따라서 결재를 아직 하지않은 상황에서는 [결재] 나 [결재하기] 가 맞는 것 같다. 결재가 끝나고 나면 [예약확인] 이라고 해야한다.

2. 버튼은 메뉴가 아니다.
[예약확인/결재]  버튼아래에 화살표 하고 그 아래에 실제 명령어를 노출한 것은 정말 웃기다. 아무리 웹이 시각 디자인 위주라지만 이렇게 트랜젝션이 있는 어플리케이션 UI에 버튼 아래에 화살표 그려놓고, 그 아래에 명령어가 있다고 표시하면 끝나는가.
아마도 UI 디자이너는 이렇게 얘기할 것이다. “봐라, 여기 아래를 클릭하라고 버튼 아래에 화살표가 있지 않은가?”  버튼은 명령을 실행하는 명령 UI  이다. 특히 웹에서는 텍스트의 링크에 비해 입력한 것을 제출한다던지 하는 식의 중대한 일을 할 때 버튼을 사용한다. 그런데, 이 화면의 버튼은 그냥 메뉴나 탭 메뉴 같이 클릭하면 하위 메뉴가 열리는 방식이다.  버튼 UI로 메뉴 UI를 표시하면 인터넷을 사용하다가 열차표 예약할 때만 새로운 모드로 사용해야 한다.

3. [예약확인/결재] 는 클릭하지 않았는데도 하위 명령어가 노출되어 있다.
결재, 예약변경, 예약철회의 메뉴 레벨에 결재의 하위 메뉴를 처음 부터 같이 노출하는 것은 오히려 헷갈리게 한다.
그냥 [결재] 버튼 누르면 화면이 바뀌던가, 아니면 AJAX나 DHTML, Javascript 로 같은 화면의 아래에 짠 하고 나타나던가 해서 태스크를 끊어 주는 것이 더 명확하다.  이렇게 한번에 다 하려고 만들어 놓으면 철도예약을 위한 방법을 따로 배워야 한다.   버튼들을 누르면 버튼 아래에 화살표가 있어서 웃기지만 방금 내가 얘기한 데로 버튼이 메뉴 처럼 동작해서 버튼 아래에 텍스트의 메뉴 같은 것이 바로 아래에 나타난다.

버튼을 누르면 아래에 메뉴가 나타나는데, 첫번째 메뉴인 것 같은 [예약확인/결재] 는 누르지 않았는데도 나와있는 것이다.

4. 버튼의 점4개 표시
버튼을 보면 레이블 옆에 4개의 점이 있다.  제발 시각 디자이너들은 쓸데 없는 짓을 하지 않았으면 좋겠다. 그냥 내비 둬라.   버튼안의 레이블을 캡션(caption)이라고도 하는데, 그 레이블에 …  표시가 있으면 이 버튼 클릭하면 명령을 바로 실행하는 것이 아니라 뭔가 더 선택할 수 있는 것이 더 있다는 것을 의미한다. 보통 … 이 있는 버튼을 클릭하면 다이어로그가 떠서 더 복잡한 입력을 한 후에 실행하게된다. 또는 문자열을 표시할때 정해진 공간에서 짤릴때 일렙스 표시로 점세개를 … 를 표시한다. 이러면 문자열이 더 있다는 것을 의미한다. 근데, 여기서 사용한 레이블 뒤에 소림사 스님들의 이마에 있는 점도 아니고 무슨 의미인지 모르는 이 점4개는 도대체 뭐냔 말인가. 치장하지 말고 그냥 내비 두는게 차라리 낫다.

이 사이트 또는 이 어플리케이션을 만든 사람들은 여기에 익숙해 지면 괜찮다라고 말할 것이다.  그런데, 사용자는 이 한개만 사용하지 않는다. 사람들은 인지적인 한계를 가지고 있고, 머리를 최소한으로 사용하려는 전략을 자기도 모르게 사용한다. 그래서 최소한의 규칙을 가지고 세상을 산다. 자신의 규칙은 웬만한 충격아니고는  바꾸지 않으려고 한다.

사실 이 정도 UI의 문제는 어떤 제품이던지 보기만 하면 나온다. 문제는 어떤 제품이던지 보기만 하면 나오는 것이 문제다. 사람 쪼잔해 지는 것 같아서 몇년 동안 이런 짓은 안하고 살았다. 내가 그동안 잘 하지 않았던 UI 거들떠 보기를 내 블로그에 처음으로 쓴 이유는 사용자가 사용하라고 만든 제품이 맨날 그모양이라는데 것에 발끈한 것 같다.

웹은 워드프로세서 보다 훨씬 더 컴퓨터를 일반인들이 사용하게 하는데 엄청난 영향을 주었다. 그런데, 웹 사이트는 간단한 기업 홈페이지나 뉴스 사이트와 같이 보는 것 위주가 아니라 태스크가 조그만 복잡해 지면 그 웹 사이트를 사용하는 사용자를 바보로 만들어 버린다.  그리고 시각적인 효과는 하루게 다르게 달라지지만 사용좀 해 볼라고 하면 맨날 사람을 바보로 만든다.   유닉스나 도스상의 프로그램이나 X윈도우나 윈도우즈의 프로그램이나, 웹 사이트나 쓸만한 것을 쓸만하고, 사용하기 싶을 만한 제품은 1년에 몇개를 찾기도 힘들다.

새로운 기술들은 쏟아져 나오고, 시각디자인은 점점 더 화려해 지는데, 왜 쓸만하고 쓸만하게 만드는 짓은 맨날 제자리일까 …

UI, 인포메이션아케텍처, HCI, 사용성 등을 운운하며 뭐 있는 것 처럼 얘기하는 사람들도 많아지고, 국내에 관련 번역서도 많아지고, 직접 쓴 책도 많아지는데, 왜 세상은 맨날 똑 같은 것을까…

Related Post







Scroll Up