태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'라벨'에 해당되는 글 2건

  1. 2016.05.12 세상에서 가장 쪼잔한 질문 - 체크박스 옆 라벨 커서는 어떻게 만들어야 할까? (8) by 이 재용
  2. 2010.03.20 좋은 네비게이션 레이블(lable)의 조건 by 위승용 (uxdragon)
2016.05.12 07:50

세상에서 가장 쪼잔한 질문 - 체크박스 옆 라벨 커서는 어떻게 만들어야 할까?

웹에서 UI를 구성하다보면 별 작은 디테일까지 신경이 쓰일 때가 많다.

브라우저들마다 다 다른 행동을 하는 건 너무 짜증나는 일이지만 어느 정도는 마음을 비운 채로 대하게 되는데, 내가 직접 무언가를 설계하려면 드는 다음과 같은 작은 생각들은, 아 어떤 때는 내가 세상에서 가장 쪼잔한 질문을 하는 사람은 아닌가?하는 생각이 들게 한다.


버튼의 커서

예를 들어,

Quiz 1: 웹 브라우저 상에서 버튼 위에 마우스가 올라가면, 커서는 어떻게 바뀌어야 하는가? 

(이 글은 PC에서 마우스 포인터로 읽어야 제대로 이해가 될 듯)

1) 화살표 모양(arrow)일 것이다. 2) 손 모양(pointer)일 것이다. 3) I자 모양(text or caret)일 것이다.



   난 링크!


마우스를 올려보면 정답은 1) 화살표 모양이다. 반면 링크는 클릭 가능하다는 점을 알리기 위하여 손모양이 표시된다.

그렇다면 왜 버튼은 손모양이 아니고 화살표일까? 만약 이것을 손모양으로 바꾼다면 사용성이 올라갈까? 내려갈까?


너무 쪼잔한 질문이라 민망하지만, 다행히, 이 바닥에 이런 질문하는 사람이 나 혼자는 아니라는 점이 위안이 되기는 한다. 영문으로 자료를 검색해 보면 너무 많은! 질문과 답변이 올라와 있다.


1. 왜 버튼은 디폴트가 손모양이 아니고 화살표인가?

이것은 PC에 있던 장치를 웹에 그대로 가지고 왔기 때문인 것 같다. 링크의 경우 일반 텍스트와 비슷해서 누르면 클릭이 된다는 점을 분명히 해 줄 필요가 있지만, 버튼은 그 자체로 누를 수 있다는 표시가 너무 강해서 (업계 용어로 affordance라고 한다) 굳이 커서를 바꿀 필요가 없었는데, 그것이 웹으로 오면서 기존 규칙을 따르고 있다는 설명이 가장 그럴 듯 하다. (영어 답변 참고)


2. 그렇다면 이것을 손모양으로 바꾸면 사용성이 올라갈까? 그대로일까? 오히려 나빠질까?

그렇다는 사람, 아니라는 사람 모두 섞여있다. 우선 가장 강력한 목소리 하나를 보자.


Microsoft's Windows desktop applications > Design > Guidelines > Interaction > Mouse and Pointers에서 이렇게 설명한다. (Hand Pointers 항목)

Text and graphics links use a hand or "link select" pointer (a hand with the index finger pointing Screen shot of hand with index finger pointing ) because of their weak affordance  .. 중략 ..


To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don't need a hand pointer. The hand pointer must mean "this target is a link" and nothing else.

즉, 링크는 워낙 어포던스가 약하니까 손으로 바꾸더라도, 혼동을 피하기 위해 버튼에서는 (이미 강한 어포던스가 있으므로) 손모양을 쓰지마라!!라고 강조한다. 손모양은 링크에서만 써야지, 다른 곳에서 쓰면 안된다는 것이다. 비록 데스크탑 어플리케이션 가이드지만, 웹에서도 비슷하지 않을까?


물론, 우리 나라의 양대 포털이나 쿠팡 디자이너들은 이 생각에 동의하지 않는 것 같다. 네이버, 다음, 쿠팡 모두 버튼의 기본적인 커서 모양은 화살표가 아니라 손모양이다. 사실 이 생각도 공감이 가는 것이, 아무리 버튼이라도 클릭 가능하다면 분명히 마우스 커서의 변화로 알려주는 것이 좋을 수 있다. 텍스트 링크에 하두 익숙하다보면 이젠 커서가 바뀌지 않으면 약간 의심도 들 정도다. 더군다다 데스크탑도 아니고 웹에 있는 버튼이라면 <국제 표준이나 브라우저 디폴트는 따위는 무시하고> 강제로 CSS를 이용하여 커서를 바꿔 주는 것이 좋지 않을까?


체크박스의 커서

그런데 이 문제가 사실은 좀 더 복잡해지는 영역이 있다. 바로 체크 박스와 라디오 버튼이다. 


나 체크 박스1          


Quiz 2: 위 세 가지 형태의 체크 박스를 보고 어떤 차이가 있는지, 어떤 것이 브라우저 디폴트인지, 그리고 어떤 것이 사용성이 가장 좋은지 논하시오.



보통 별 고민없이 마구잡이로 만들면 1번처럼 된다. 즉 체크 박스의 디폴트 커서는 화살표이며, 이는 위에서 '버튼'에 대하여 설명한 바와 같다. 다만 1번의 경우 그 옆의 문구를 눌러도 체크가 되지 않는다. 이렇게 만들면 너무 작은 영역의 체크만 강요하게 되는 셈이다. 그래서 원래 제대로 구현하려면 2번처럼 구현해야 한다. 2번은 글자 부분을 클릭해도 체크가 된다. 그런데 문제는 여기서부터이다.


우선 체크박스가 버튼만큼 어포던스가 분명한가? 그래서 화살표로 해도 큰 문제 없을 정도인가? 개인적으로 동의하기 어렵다. 확실히 버튼만큼은 아닌 것 아닐까?


두 번째, 그러면 버튼 옆의 글자(라벨)은 디폴트 커서가 화살표이다. 이 화살표 만으로 (즉 I-beam 혹은 caret이 아닌 것 만으로) 이것이 클릭 가능하다는 점이 분명해 지나? 절대 아니다. 


그럼 마지막으로, 체크 박스는 화살표, 옆 글자는 손모양으로 해야 하나? 아니면 둘을 통일해야 하나?


나만 헷갈리는 것이 아니고, 아마 포털의 디자이너들도 헷갈리는 모양이다.

위 그림은 네이버(왼쪽 위), 다음(왼쪽 아래), 그리고 쿠팡(오른쪽)의 로그인창을 복사한 것이다. 나름대로 대표성이 있다고 생각해서 골랐는데, 마침 세 회사의 접근 방식이 모두 달라서 비교를 해 보았다.




네이버 로그인 창

  IP 보안 OFF
1회용 로그인
회원가입 아이디 찾기

먼저 네이버 로그인창인데 '로그인' 버튼도 손모양, 아래 체크와 체크 라벨 모두 손 모양으로 세 요소 간의 일관성을 유지하고 있다.
위 대략 구현한 것에서 체크박스, '로그인 상태 유지', 그리고 로그인 버튼 및 다른 링크들에 마우스를 올려 보고 클릭해 보면 어떤 느낌일지 알 수 있다. 역시 위에서 얘기한 '모두 클릭 가능함'을 정확하게 설명하는 느낌이다. 물론 반대하는 사람들은 이것이 너무 과도하다고 주장하는 것이고.

(참고로 네이버 로그인 버튼은 눌려지지 않는다. 눌렀을 때 파란 테두리만 나오고, 들어간 느낌은 보이지 않는다. 아주 옅은 회색의 배경색 지정으로 만들었다. 링크는 밑줄이 없는 형태이다.)



다음 로그인 창

다음, 다음 로그인창인데, '로그인' 버튼은 손모양으로 바꾼 반면 위 체크와 체크 라벨은 모두 화살표로 디폴트를 유지하고 있다.
위 예시에서 여러 요소에 마우스를 올려 보면 느껴볼 수 있다. 버튼이나 링크에 비하여 체크나 체크 라벨은 확실히 누를 수 있을 거라는 느낌이 덜 하지 않나 싶다. 그러나 반대쪽 입장은 이미 두 가지 요소는 인터랙티브한 요소여서 손모양으로 바꾸는 것이 과도하다는 주장이다. 물론 이 주장을 하는 사람들은 '로그인' 버튼도 화살표 커서여야 한다고 주장한다. (참고로 다음의 로그인 버튼은 눌려지지 않는다. 눌렀을 때 파란색 테두리만 나오고 들어간 느낌은 보이지 않는다. 약간의 음영이 들어간 이미지로 만들었다, 링크는 밑줄이 없는 형태이다)



쿠팡 로그인 창

로그인
아이디(이메일)

비밀번호


개인정보 보호를 위해 개인PC에서만 이용해 주세요


아이디 찾기 | 비밀번호 찾기 쿠팡회원이 아니세요? 회원가입

마지막으로 쿠팡인데, '로그인' 버튼은 손모양으로 바꾸었다. 그런데 체크 박스는 화살표로 디폴트를 유지한 반면, 체크 라벨은 손모양으로 바꾸어 버렸다.
역시 여러 가지 요소에 마우스를 올려보면, 느낌을 알 수 있는데, 아마 체크 박스 자체는 표준 권고를 따라서 안 바꾸었지만, 라벨에도 화살표 모양이라는 건 너무 알 수 없다고 생각했는지 라벨만 손모양으로 바꾸었다. 다만 그런 논리라면 '로그인' 버튼은 왜 손모양으로 바꾸었는지 모르겠다. 세 회사 중에 가장 버튼처럼 생겼는데 표준을 따른다면 로그인 버튼도 화살표로 해야 하는 것 같긴 하다.

구현 방법상 작은 차이는 네이버와 다음은 <label for="id" > 같은 형식으로 explicit하게 지정한 반면 쿠팡은 <label>안에 인풋 요소를 넣는 implicit label association을 사용한다는 점이다.

(쿠팡의 로그인 버튼도 눌러지지 않는다. 마우스로 눌렀을 때 파란색 테두리가 생기지만 눌러진 느낌은 보이지 않는다. 버튼은 CSS의 여러 요소를 활용해 만들었다)


세 회사 모두 로그인창 주변의 링크 텍스트는 기본 밑줄을 없애 버렸고 마우스가 올라 갔을 때 밑줄이 나오면서 커서가 손모양으로 바뀌는 변화를 주고 있다. 세 회사 모두 로그인 버튼의 커서는 손모양으로 바꾸었지만, 버튼이 눌리는 효과는 만들지 않았다. 귀찮아서 일까? 별로 중요하지 않다고 생각해서 일까? 아니면 버튼이 아니라 링크라고 생각해서 커서도 손으로 바꾸고 눌린 모습도 안 만든 걸까? (만들려고 마음만 먹으면 CSS로 간단하게 만들어진다)

 

2016년 4월 2일 현재. 세 회사 로그인창을 HTML 상태 그대로 가져오려고 했지만 똑같이 만들려면 작업이 너무 괴로와서 중요 동작만 비슷하게 만들었다, 물론 각 요소의 작은 디테일들이 인터랙션에 영향을 많이 주는 것을 알고 있지만 작업이 너무 괴로울 것 같아 포기하였는데 혹시라도 중요한 글의 요지에 영향을 미치는 중요한 디테일을 놓쳤다면 댓글 부탁드린다.


세 회사가 나름 이유는. 이유가 있을 것이다. 뭐 없으면 어떤가? 이런 쪼잔한 것까지 어떻게 신경쓰랴.. 


결론?

어쨌든 각 회사의 섬세한 정책은 잘 모르겠고, UI 디자이너가 취할 수 있는 정책은 세 가지가 있을 것 같다. 


1. 가이드라인과 기본 설정을 따르자. 

즉 원래의 국제 표준, 가이드라인, 그리고 웹 브라우저 디폴트를 따라야 혼동이 없다. 그렇다면 버튼과 체크 박스 등은 모두 화살표로 둔다. 이 경우 확실한 것 하나는, 체크 박스/라디오 옆 글자(라벨)까지 디폴트로 두어야할지는 모르겠다. 이 부분은 정말 불편하다. 


2. 웹에는 모든 것이 다르다.

따라서 모든 클릭 가능한 것은 손모양으로 바꾸어 준다. 아래의 CSS를 넣으면 된다고 한다. (테스트해보지는 않았다)


a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer;}


문제는 오랜 역사로 성립된 디폴트값을 이렇게 CSS로 강제적으로 바꾸는 것에 대해 많은 디자이너들이 우려와 불쾌를 표현한다는 점이다. 위 CSS의 출처: Give Clickable Elements a Pointer Cursor를 보시길.


3. 다른 건 다 표준을 따르되, 라벨만 좀 바꾸자

표준에 대한 존중이 중요하다. 하지만 라벨은 너무 사용성이 떨어진다. 그러므로 라벨과 라벨이 있는 체크/라디오만 좀 바꾸자. 

이 원칙의 문제는 너무 절충이라는 거? 그래도 개인적으로는 이것이 가장 좋아 보인다. 원래 성격이 그런 듯.



중요한 것은 '우리의 마음'이 이제 화살표 만으로는 '클릭 가능'이라고 잘 생각하지 않는 것 같다는 점이다. 네이버 등 한국 웹 사이트에 길들여져서 그런걸까? 구글은 버튼에 화살표를 쓰고, 페이스북은 버튼에 손모양을 쓴다. 페북에 길들여진 걸까?


다른 디자이너들은 어떻게 생각하는지 궁금하다.


[참고##UI 디테일##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 8
Ad Test...
2010.03.20 11:09

좋은 네비게이션 레이블(lable)의 조건



UI 기획을 할때 레이블링하는것 만큼이나 어려운 일은 없더군요. 책을 찾아보다가 Designing web navigation 에서 좋은 네비게이션 레이블의 조건에 대해서 기술하고 있는 것을 발견했습니다. 그중 '네비게이션 레이블링 챕터' 를 정리해 보았습니다. 네비게이션용 레이블링 뿐 아니라, 용어 레이블링 할때도 적용할 수 있을 수 있을 것 같습니다. 또한 웹사이트 기획 뿐 아니라 다른 디지털 디바이스들에도 적용할 수 있을 것 같습니다.



A. 사용자 언어로 말하기
1. 회사 전문 용어를 쓰지 않는다.
회사 전문 용어는 너무 쉽게 웹사이트에 들어가 있습니다. 이러한 전문용어는 사용자에게 도움이 되기보다는 혼란스럽게 합니다. 

2. 기술 용어를 쓰지 않는다.
대부분 방문자들은 사이트를 만든 사람만큼 웹 사이트에 대해 잘 알지 못합니다. 플러그인이 무엇인지. 보안 서버가 무엇을 의미하는지 사용자들은 궁금할까요? 사이트 타겟 방문자들의 객관적 지식수준을 고려한 용어를 사용하여야 겠습니다.

3. 너무 똑똑하거나 재미있는 용어를 쓰지 않는다.
일반적으로 너무 똑똑하고 영리하게 쓰인 레이블은 의도적으로 동작하지 않습니다. 사이트를 디자인하는 동안 재치 있는 단어들을 만드는 일은 재미있을지 몰라도, 나중에 사람들이 이러한 단어를 보고 네비게이션하려고 애써야 하는 상황은 전혀 재미있지 않습니다.

4. 약자를 쓰지 않는다.
약자는 공간을 절약하지만 사람들이 올바른 단어를 빠르게 훑어보는 것을 방해하기도 합니다. 심지어 어떤 방문자들은 특정 약자는 전혀 이해하지 못합니다. 모든 사람들이 FAQ, PDF, RSS의 의미를 알고 있는 것이 아닙니다.

5. 적절한 보이스톤을 사용한다.
일반적으로 은행 사이트의 라벨은 10대 음악 사이트와는 다른 톤으로 쓰입니다. 전자는 공식적이고 사무적이며, 후자는 젊고 모던하지요. 특정 타겟 청중들이 기대하는 적절한 레이블의 톤을 이해하는 것이 중요합니다.


B. 설명적인 레이블
레이블을 될 수 있는 한 설명적으로 만들고자 노력해야 합니다.
레이블이 나타내는 콘텐츠에 대한 실마리를 제공해야 합니다.
넓고 모호한 레이블을 써야 한다면, 어떤 방법으로든 뜻을 한정하고자 노력해야 합니다.


C. 상호 배타적인 레이블
레이블은 메뉴에서 그룹으로 나타나는 경우가 많습니다. 한 레이블의 의미는 연속해 있는 다른 레이블의 해석에 영향을 줄 수 있기 때문에, 가능한한 레이블을 구분해야 합니다.


D. 명확한 초점을 나타내는 레이블
초점이 맞추어진 레이블은 보다 예측하기 쉬우며 네비게이션을 하는 동안 사용자들의 자신감을 증가시킵니다. (예를 들어 고양이, 강아지, 햄스터에 대한 카테고리를 동물이 아닌 애완동물이라고 씁니다. 반면에 고양이과  & 개과 는 너무 상세해서 햄스터가 들어갈 수 없습니다.)


E. 일관된 레이블
일관된 레이블은 모호성을 없앨 수 있습니다.

1. 정밀도
정밀도는 상세 내용이나 주제의 상대적인 폭을 의미합니다. 사이트 구조에서 동일한 레벨에 있는 네비게이션 옵션들은 동일한 콘텐츠의 폭이 담겨있습니다.

2. 구문론
네비게이션의 레이블은 모두가 비슷한 문법적 구조로 되어 있어야 합니다. 언어의 동일한 부분을 사용하도록 노력해야 합니다.

3. 표현
서체나 크기, 스타일등을 일관성있게 사용하여 통일감을 주는 것이 중요합니다.

4. 사용
여러 곳에서 동일한 옵션을 지칭할 때 동일한 레이블을 사용합니다. 이러한 일관성은 인쇄와 같은 다른 미디어 채널에도 마찬가지로 적용되어야 합니다.


F. 레이블의 길이
레이블이 길면 사람들이 찾고 있는 계기가 되는 단서가 포함되고 있을 가능성이 높습니다. 하지만 레이블의 길이는 제한을 두어야 합니다. 스풀은 13단어 이상의 링크는 성능이 형편없으며, 사람들이 한 번에 이해할 수 있는 양이 정해져 있다고 하였습니다. 궁극적으로 레이블에 몇개의 단어가 필요한가에 대해서는 엄격하게 정해진 규칙이 없습니다. 하지만 화면 영역을 더 많이 사용해서라도 명확하고 구체적으로 표현하는 편이 낫습니다. 명확하게 표현하기 위한 한 가지 테크닉은 짧은 레이블을 사용하되 옆에 설명문을 붙이는 방법이 있습니다.



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...