주제: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

안녕하세요? N본부, W표준화팀의 정찬명 입니다. ^^

일단 다른 분들의 검색 편의 차원에서 키워드 적어둡니다. select, option, go.
셀렉트, 점프, 드롭다운, 풀다운 메뉴라고 부르는 것들에 대한 가치판단 이슈가 있어 의견을 듣고 싶습니다.
select 요소를 조작할때 URL을 이동시키는 경우에 한정된 이야기 입니다.
그리고 저는 이것을 편의상 점프메뉴라고 부르겠습니다.

'GO' 버튼 없는 점프메뉴가 키보드접근이 불가능 하기에 넣자고 제안을 했습니다.

하지만 제안된 내용이 마우스를 사용하는 보통 사람들의 '사용성'을 후퇴시키는 결정이어서 선뜻 'GO'를 화면에 출력시키는 일 자체가 쉽지 않게 되었습니다. 키보드 접근이 되도록 하는것은 맞지만 'GO'버튼이 등장하는 것은 아니라는 결정이 내려졌고 이런경우는 접근성과 사용성이 충돌하는 드문 사례중의 하나라서 자칫 접근성만을 강조하다가는 접근성에 대한 전반적인 이해를 갖추지 못한 사람들에게 되려 '접근성과 사용성은 충돌하는 가치' 라는 오해를 줄까 싶은 우려에 되도록 사용성 고려에 대한 시각을 존중하는 방향으로 진행해야 할 것 같습니다.

저희는 결국 Ajax UI팀의 자문을 얻어 'GO'버튼 없이 사용자의 입력장치(키보드,마우스) 접근행태에 따라서 각각 다르게 처리하는 방법(마우스로 접근하는 경우 즉시 URL 이동하는 기존의 UX를 유지, 키보드로 접근하는 경우 방향키 조작↑↓후 Enter를 쳐야 이동하는 방식)으로 구현을 결정하였습니다.

그러나, 저는 회의를 마치고 몇시간 동안 그것이 과연 올바를 방법인지에 대한 의심에 의심을 거듭했습니다.
그리고 결국 두 눈은 멀쩡하지만 키보드만을 주로 사용하는 사람은 option을 선택한 다음 Enter키를 눌러야 하는 UX에 익숙하지 않을 것이라는 판단이 들었습니다.

점프메뉴가 항상 URL을 이동시키는 UX를 지닌것이 아니고 조작하기 전까지는 어떤 액션이 일어날것을 예상하게 해주는 아무런 단서가 없기 때문에 보통의 키보드 사용자는 방향키↑↓만 조작한 다음 Enter키를 누르지 않고 Tab 키를 이용하여 다음항목으로 넘어갈 것이라고 생각합니다. 눈을 감고 상상으로라도 가상의 Task를 설정하여 진행해 보세요. 십중팔구 option 선택 후 Enter 아닌 Tab키를 누를 것이라고 생각합니다.

여러분들의 의견은 어떤가요?
여러분들이라면 이러한 상황을 어떻게 풀어가시겠습니까?

최종 편집 : dece24 (2008-04-15 10:25 AM)

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

탭 키를 이용하여 접근하였을 때 간단한 메시지를 보여주면 되지 않을까요?
"이동하려면 엔터 키를 누르세요."라던가요.

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

title 속성을 이용하여 선택 후 엔터를 입력해야된다는 것을 알려주는 것은 어떨까요?
아니면 이 포럼의 최하단에 있는 것 같은 처리방식도 생각해 볼 수 있겠네요.
추가 : ie하고 ff하고 동작하는 방식이 다르네요. 제가 말한건 ff의 동작형태입니다.

덧. Go버튼이 없는 저런 형태는 javascript를 사용할 수 없는 환경에서는 치명적이니 그에 따른 처리도 해주셔야 될 것 같네요.

최종 편집 : Peris (2008-04-02 09:36 AM)

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

focus시 보이는 skip navigation 같은 focus시 보이는 go 버튼은 어때요? big_smile

Peace!

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

마우스가 위아래로 움직이는것  =  키보드로 위 아래키를 누르는것
클릭 = 엔터 혹은 스페이스바.

유저에게 선택한것을 확인시키는 엔터나 스페이스바가 UX 를 해치지 않는다고 생각합니다.

또한 유저가 키보드로 긴 리스트를 볼 시에도 (시간대 고르기) 알파벳을 눌러 이동후에 맞는 옵션을 고른후 확인의 부분으로 볼수 있는 엔터나 스페이스바키를 누르는것이 괜찮다고 생각됩니다.  보통 TAB을 이동으로 사용하는데 이동+확인의 역할을 수행하지 않는다고 해서 해칠꺼 같지는 않습니다.

<!--[if IE]>
<p>잘못 실행하신 브라우저 이거나 국번없는 브라우저 이오니, 다시한번 확인하시고 사용하시기 바랍니다.
유해브 컬드 롱 브라우저 오어 노 넘버.  플리즈 뜨라이 어게인.</p>
<! [endif] -->

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

어짜피 스크립트로 가는거면 onkypress일때  0.5초나 1초 정도 딜레이를 줄고 이동할꺼 같습니다.

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

저도 키보드의 엔터키를 눌러 들어가는 것과 마우스로 클릭해서 가는것이 사용성을 해친다고 생각하진 않습니다.
저는 오히러 GO버튼이 존재하는게 사용성이 좀 떨어진다고 생각을 합니다^^

요즘은 본래 업무인 기획을 중점적으로 하고 있습니다.

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

저도 똑같은 상황을 얼마전 겪었습니다.
개발자 대상으로 접근성에 대한 교육을 마치고 나서 작업한 내용을 보니
개발자가 임의대로 셀렉트옆에 확인버튼을 두었길래
이게 머냐구 했죠?

이게 말씀하신 접근성에 맞는거 아니냐 라고 말씀하시더군요

순간 당황했습니다.

하지만 제 판단도 접근성을 향상 한다고 사용성을 떨어뜨리는것은 아니란 생각이 들었습니다.
어찌보면 장애인이건 일반사용자건 처음 익숙하지 않은것은 결국 경험에 의해서
스스로 교육되어지는것이라고 판단을 했죠. 아니.... 협상을 해죠 -_-;;;

일단 버튼을 없애라고 했습니다.
제 스스로도 깔끔하게 판단이 서지 않았던 부분으로 기억합니다.


이문제에 어떻게 대처하실지 궁금합니다.
결과에 대해 한번더 언급해 주시면 감사하겠습니다.^^

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

우선 select는 form안에 존재하는 것입니다. submit 버튼 없이 보통 드롭다운 메뉴를 구성하는데 이는 마치 레이아웃을 잡기 위해 table을 사용하는 것과 비슷한 케이스일 것입니다. drop-down list라는 표준 컨트롤를 대부분의 브라우저가 지원하기 때문에 복잡한 JS 구현없이 쉽게 된다고 이것을 사용합니다만.. 뭐 큰 문제는 없습니다만 스레드가 고민해 보자는 것이니 몇가지 사안들을 적어봅니다.

우선 JS가 안되는 상황.
이세상에 JS가 안되는 상황이 어디있냐고, 혹은 소숫점도 안되는 퍼센테이지를 지원해야 하나고 항의를 많이 듣습니다만 생각보다는 많습니다. 모바일 디바이스나 텍스트 브라우저 같은 특별한 상황도 있습니다만 상당수의 RSS 리더들이 JS와 Plug-in(object혹은 flash)이 꺼져 있는 것이 디폴트입니다. 대안(얼터너티브)이 없는 구현은 분명 문제라 할 수 있습니다. 브라우저의 고급기능(JS등)은 사용자의 UX를 증가시켜주는 것일 뿐입니다. JS Tutorial이나 현재의 브라우저 능력으로는 불가능한 기술일 때 사용하는 것은 어쩔 수 없습니다만 역으로 기본 기능만으로 기본 사이트 피쳐를 이용할 수 없게 만드는 것은 사려깊지 못하다고 생각이 됩니다.

콤보박스가 언제나 같지는 않다.
iphone이나 ipod touch 혹은 모바일에 올라간 opera등 모바일 디바이스에 들어간 풀브라우저들은 화면이 작기 때문에 select의 콤보박스(드롭다운 리스트)를 쉽게 사용하기 힘들기 때문에 다른 형태를 취합니다. 이것이 사실 표준컨트롤의 장점입니다. 선택을 하는 UI가 있다면 사용하는 환경에 최적화 된 UI를 플랫폼이 제공해 줄 수 있죠. 특히 iphone/ipod touch의 콤보박스 구현은 개인적으로는 찬사를 보냅니다. 어떻게 하는지는 주위에서 기계를 구하시거나, 직접 구매를 하시거나(전 이런 환경을 경험해 보기 위해 직접 샀습니다.) 아니면 현재 나와있는 iphone SDK를 다운받으시면 iphone simulator가 들어 있습니다(맥을 사야 되나?). 아무튼 이런 환경이 되면 마우스와 키보드가 아닌 전혀 새로운 인풋 형태가 됩니다. 그리고 공들여 짠 JS가 반대로 짜증나게 됩니다.

마지막으로 back & forward 문제입니다.
위와 같은 네비게이션을 사용해서 페이지를 이동했다가 Back을 하면 직전에 선택한 메뉴가 select에 남아 있습니다. form 요소의 특성이죠. 다시 방금 봤던 페이지로 돌아가기 위해서는 포워드 버튼을 누르는 방법도 있습니다만 페이지 자체의 네비게이션을 이용하려면 select를 두번 변경해야 합니다. 다행이 select에 아무것도 하지 않는 옵션이 있다면 모를까 없다면 F5를 누르고 선택해야 합니다(딴 페이지 갔다 오거나). 백워드 버튼을 누르는데 포워드 버튼 누르면 되는거 아니냐구요? 제가 마우스도 상당수 수집했는데 백워드 버튼만 있는 놈들이 꽤 됩니다. 둘다 있어도 엄지를 구부려 포워드 누르는 행위가 부자연스럽기도 하구요.

수전증이 있거나 마우스 광학센서의 문제로 미스클릭시 페이지가 엉뚱한 곳으로 휙 날아가는 문제는 개인적인 것으로 치부하겠습니다. (한번 클릭하면 반드시 어디론가 이동해야 하는 낙장 불입으로 만든 사이트도 가끔 있습니다.)
submit 버튼을 구지 만드는 경우 대부분의 케이스에서 사용자에게 클릭 한번을 더 유도하는 것도 맞습니다. 허나 반대 급부도 있습니다.

덧.
저는 어떻게 하느냐. 다른 부서(디자인, 기획등)와 이런 문제를 종종 논의하는데 왠만하면 전 이렇게 대답합니다. 종토세 내는것도 아닌데 왜이리 자리 아끼냐구요. 앵커로 쫙 깔아 버리는 식으로 고민해 보자고 합니다. 실제로 자리가 비좁은 경우엔 어쩔 수 없긴 합니다만... 아무튼 확실한것은 현재 html에 drop-down menu를 문제없이 제대로 할 수 있는 엘리먼트는 없습니다.

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

핵심은 Go버튼을 넣느냐 넣지않느냐의 문제인 것 같네요.

1. Go 넣지 않는 경우,

셀렉트 박스의 기능 : 옵션선택 및 폼전송

옵션 선택 : 키보드의 방향키↑↓조작과 = 마우스의 이동
선택한 옵션으로 폼전송 : 키보드의 엔터키 = 마우스 클릭

"점프메뉴가 항상 URL을 이동시키는 UX를 지닌것이 아니고 조작하기 전까지는 어떤 액션이 일어날것을 예상하게 해주는 아무런 단서가 없기 때문에"라는 문제에 대해서는,
GO버튼을 대신하기 위해 셀렉트박스 앞에 "XX서비스 이동"과 같은 취지의 타이틀을 넣어주는 것이 어떨지 싶습니다.
XX서비스라는 명칭은 셀렉트박스의 옵션의 상위개념이 와야겠죠..

2. Go버튼 넣는 경우,

셀렉트 박스의 기능 : 용도 그대로 옵션 선택의 역할만..

마우스 조작 : 옵션선택                            +         GO버튼 클릭으로 폼전송
키보드 조작 : 방향키↑↓조작, Enter키로 옵션선택 + Tab키 + Enter키로 폼전송


네이버의 검색페이지(web.search.naver.com/search.naver) 에서의 검색어 자동완성기능을 제공하는 용도의 인풋 박스에는 Tab의 기능이 다음 자동완성검색어 선택의 용도로 사용되고 있네요. Tab을 넣는다면 키 기능의 일관성에서 문제가 있을 것 같습니다.

저라면 2를 선택할 것 같습니다만, 소수의견일 것 같네요.
사용성에는 약간의 문제가 있지만 2번이 원칙에 맞는 것 같습니다.

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

선호 차이겠지만 전 GO 버튼 있는 걸 좋아합니다. 일관성 때문에 그러한데요.

기억이 나질 않아 어디라고 콕 집어낼 수는 없지만, 그곳은 어느 부분에선 선택하는 순간 뭔가 행위가 일어나고 어느 부분에선 GO버튼을 눌러야 행위가 일어 났습니다. 한 서비스 안에서도 그렇게 일관성이 없다보니 나중엔 좀 헷갈리더군요. 분명 옆에 GO 버튼이 있는데도 뭔가를 선택하고 멍하니 기다리고 있다든가, 뭐있나 보려고 펼쳤다가 실수를 하여 엉뚱한 화면으로 휙 날아갔다든가.

사용성이라는 것은 대체로 개인 성향에 많이 좌지 우지 될 텐데, 입력 요소가 많은 서비스일수록 GO버튼 없는 펼침메뉴는 Interface 인지를 방해 한다는 생각입니다. @_@

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

저라면 셀렉트 박스와 Go버튼 대신에 앵커를 목록으로 만들겠습니다.
그리고 CSS로 셀렉트 박스인척 하렵니다.
어차피 자바스크립트를 사용해야 하는 거라면, 충분히 제작 가능한 형태입니다.

웹을 웹으로, 정보를 가치있게

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

resistan wrote:

저라면 셀렉트 박스와 Go버튼 대신에 앵커를 목록으로 만들겠습니다.
그리고 CSS로 셀렉트 박스인척 하렵니다.
어차피 자바스크립트를 사용해야 하는 거라면, 충분히 제작 가능한 형태입니다.

저도 이 생각에 동의합니다.

form내에서 메뉴로 사용되는 셀렉트 박스를 왜 점프메뉴에 쓰려고하시는건가요?

셀렉트 박스는 form내에서 사용자의 입력값을 받는 입력컨트롤중의 하나인데

단지 우리가 머릿속에서 그리고 있는 점프메뉴의 이미지와 select박스 컨트롤의 생김새가 비슷하다는 이유로

사용하시려는건 아닌가요?


<ul>
 <li><a href="">링크1</a></li>
 <li><a href="">링크2</a></li>
 <li><a href="">링크3</a></li>
 <li><a href="">링크4</a></li>
</ul>

오히려 이런식으로 마크업을 하여 자바스크립트를 사용하여

점프메뉴를 구현하는게 더 맞다고 봅니다.

(자바스크립트가 동작하지 않는 상태에서는 물론 모든 목록이 나와야겠죠)


UI 를 담당하시는 분들의 입장에서는

이런 드랍다운컨트롤을 만들기 솔직히 귀찮습니다.

반면에 select박스쓰면 onchage 이벤트만 하나 등록하면 되니 간단하지요.


select박스를 사용한 점프메뉴에 go 버튼이 있어야 하느냐 없어야 하느냐가 아니라

점프메뉴를 select박스로 구현하는게 맞느냐가 먼저 아닐까 생각해봅니다.
(물론 100% 틀리다라는 입장은 아니지만 select박스를 사용하지 않고 ul li 목록을 사용하여 드랍다운 컨트롤을 만들면
모든 고민이 해결되지 않나 싶습니다)

단순함이 최고의 화려함이고, 기본기가 최고의 테크닉이다 - http://trend21c.com

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

각종 폼 종류별로 " Tab " 키로 이동할 수 있다는 가정하에 제 개인적인 생각입니다.

1. 키보드관련 기능성 태그는 꼭 form을 반드시 사용합니다.

2. " Tab "키로 form을 우선 순위로 접근 할 수 있게 합니다.

3. form안에 있는 셀렉트박스가 있다고 가정을 한다면, 탭키로 폼안에 있는 셀렉트박스를 인식 또는 선택 상태를 유지하게 됩니다.

4. 그 다음에는 위, 아래 키로 메뉴를 선택할 수 있게 합니다. 또한 왼쪽 오른쪽 키를 누르면 폼안에 있는 기능성 태그로 이동할 수 있게 해야 합니다.

5. 엔터키를 누르게 되면 해당 정보를 색인 또는 승인해줍니다.

6. 폼마다 title를 인식해 title이 알려주는 코드를 찾아 음성으로 시각장애인을 안내 할 수 있습니다. 그 전에 해당 title에 음성정보는 브라우저나 스크린리더가 지원해줬으면 좋겠습니다. 예외의 상황에 다라서 음성정보를 창조하고 기록하고 연계할 수 있도록 해야합니다.

7. 기본적으로 음성으로 키로 무엇을 어떻게 해야 이렇게 할 수 있다. 라는 것을 설명해야할 수 있어야 하며, 음성정보안내에 관한 전세계적 표준안이 필요 하다고 생각합니다.

8. textarea의 경우 쉬프트 + 엔터로 줄바꿈을 할 수 있게 해야 합니다. 이걸 필수사항이라고 생각하는 이유는 불편하신 분의 배려차원에서 우리가 앞서야 한다고 생각하기 때문 입니다.

9. 화면에 절대로 표시하지  않는 go태그 xhtml전용 go태그 예) <form title="댓글"><textarea title="댓글"></textarea><go for="댓글"/></form> 라는 가상태그의 도입이 필요할 것 같습니다.


결론, js 로 점프메뉴 이동을 설정한다고 해도 js가 올바르게 실행이 안된다면 무용지물입니다. 여러가지 상황을 따져볼 땐 개발자 입장에서는 시각장애인용 컨텐츠 및 UI UX 구축이 오래 걸릴테고 훗날 새로운 브라우저의 등장으로 인해 그 동안 시각장애인을 위해 개발을 해놓았던 모든 산물이 사라지게 됩니다. 따라서 현재는 위와 같은 아이디어의 제안에 힘쓰면 좋을 것 같다는 생각이 듭니다.
마지막으로 이러한 상황은 W3C에 아이디어 제안을 하겠습니다. 물론 제가 힘이 있다면 말이죠... 하지만 그런 아이디어를 토대로 우리가 개발할 수 있다면, 족히 몇년은 걸리기에 참으로 아햏햏하고 선택하기 난감한 상황입니다. 막말로 돈이 남아도는 기업에서는 임시방편으로 장애인의 컨텐츠를 꼭 구축해야하고 필요성이 있다고 생각합니다.

정찬명님의 글의 주제와 다르게 미래를 보고 댓글을 작성한 것 같습니다. -_-;; 딱히 이런 주제를 내세울 게시물이 없길래 전부터 생각해 두던 아이디어를 이 곳에 한풀이 합니다. (죄송합니다.ㅠㅠ)

최종 편집 : 1minits (2008-04-03 12:32 AM)

눈팅하라고 만든 CDK가 아닐텐데?

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

1minits wrote:

정찬명님의 글의 주제와 다르게 미래를 보고 댓글을 작성한 것 같습니다. -_-;; 딱히 이런 주제를 내세울 게시물이 없길래 전부터 생각해 두던 아이디어를 이 곳에 한풀이 합니다. (죄송합니다.ㅠㅠ)

그냥 새 쓰레드를 여시는게 더 활발하게 토론 될 수 있지 않을까요? smile

written by hyeonseok.com

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

resistan wrote:

저라면 셀렉트 박스와 Go버튼 대신에 앵커를 목록으로 만들겠습니다.
그리고 CSS로 셀렉트 박스인척 하렵니다.
어차피 자바스크립트를 사용해야 하는 거라면, 충분히 제작 가능한 형태입니다.

저도 여기에 동감...엄청 이쁜 애니메이션을 추가해서 디자이너, 기획자들의 눈을 사로잡는 겁니다!!

http://gscaltex.co.kr/About/index.asp

굉장히 오래전에 만든 것이어서 키보드로 접근이 안되기는 한데 사이트 왼쪽 아래의 패일리 사이트 같은 방식도 괜찮을 것 같습니다. 키보드로 접근 가능하게 만드는 것은 아주 간단한 일이죠. 그때는 접근성 개념이 없어서;;

written by hyeonseok.com

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

저도 ul돠 a를 사용하여 select인척하고 tabindex를 이용하여 포커스처리를 가능하게 한 다음
포커스시에 드랍다운 메뉴를 오픈하고 혹은 원 클릭(원오버?)시에도 드랍다운 오버. 키보드 ↑↓ 처리도 넣어주고..
펼처진 메뉴에서는.. 앵커이기때문에 별다른 조취를 해줄 필요는 없겠죠. 굳이 form으로 전송하고 싶으시다면
스크립트로 히든인풋 관련하여 스크립트 처리만 해주면 간단하지 않을까요?

짧지만 디자이너도 경험하며 삽질하다보니 너무 깊게 생각할수록 후퇴된 결론이 나온다는걸 깨닿고 요즘은
즉각 생각난것으로 결정하고 처리해버리게 됩니다 ㅎㅎ

답변: 셀렉트, 점프, 드롭다운, 풀다운 메뉴의 GO 버튼 이슈.

와우~ 무지많은 댓글들 감사합니다.
글 올려놓구 정신없이 바빠져서 한동안 깜빡하고 있었습니다. ㅜㅜ;

댓글 주신 덕분에 무지 쉽게 결론이 났습니다.
여러분들의 도움으로 제가 내린 결론은 이렇습니다.

select 요소로 URL을 이동시킨다면 그것은 오히려 시멘틱하지 않다는 생각을 처음 했습니다. select 요소는 form의 제어를 위한  요소이고 select 요소로 URL을 이동시키려 하는 경우 javascript를 사용할 수 밖에 없는데 이것은 select 요소가 지닌 본래의 목적이나 기능을 초월하기 때문입니다. HTML은 javascript에 의존하지 않고서도 URL을 이동하거나 폼을 전송할 수 있습니다. Javascript를 사용하기 시작했다는 것은 역으로 생각해서 HTML을 본래의 용도대로 사용하지 않거나 이것을 확장하고 있다고 판단하는 기준이 될 수 있습니다.

URL을 이동시키기(참조하기)위한 마크업은 a가 정확히 맞는것 같습니다. 점프메뉴와 같은 UI는 li, a요소로도 충분히 가능한 UI이고 접근성도 훼손하지 않으며 오히려 시멘틱 하다고 생각합니다. 다행인것은 점프메뉴가 디자인된 상태로 시안이 넘어와서 어차피 목록과 앵커로 처리해야만 하는 상황이었습니다. 윈도우의 select 콘트롤을 그대로 사용하지 않고 한껏 멋을 낸 디자이너의 시안이 시멘틱한 코드를 의도해서는 아니었겠지만 a태그를 사용하게 했고 결국 시멘틱 해졌네요.

하지만 만약 그렇지 않은 상황(윈도우의 select콘트롤을 그대로 활용한 디자인)이었다면 역시 제 고민은 끝나지 않았을지도 모릅니다.

URL을 이동시키는 두 가지 형태의 점프메뉴를 각각 키보드 만을 이용해서 접근한다고 가정했을때 li, a태그를 이용한 점프메뉴와 select태그를 이용한 점프메뉴는 조작법이 아래와 같이 다르지요.

li, a 태그를 이용한 점프메뉴는 tab을 통해서 접근한 다음 enter키를 통해서 메뉴가 열리고 다시 tab키를 이용하여 포커스를 목록에 머물도록 한 상태에서 enter를 내리치기 전까지는 닫히지 않지요. Enter키를 치면 물론 페이지가 이동하기 때문에 닫히는지 어쩌는지는 볼 수가 없지만 enter키를 치기 전에는 닫히지 않기 때문에 사용자는 내가 여기서 무엇을 더 해야할지 금새 눈치를 챌것 같습니다.

반대로 select, option 태그를 이용한 점프메뉴는 tab을 통해서 접근하지만 메뉴가 열리지 않은 상태로 방향키(↑↓)로 조작이 되구요. 여기서 만약 go 버튼이 없다면(설사 숨어있다손 치더라도 디자인을 해치기 때문에 나타나서는 안된다고 가정하면) 사용자는 이것을 점프메뉴가 아니라 그냥 폼의 옵션중 하나라고 생각할 가능성이 크다는 점이 제가 우려하는 점입니다. 따라서 만약 이런 상황이라면 저는 어떻게 해서든 go 버튼을 넣으려고 무척 애를 써야만 한다고 생각합니다.

결론적으로 URL을 이동시키는 점프메뉴 형태의 UI로서는 오히려 select 콘트롤보다는 li, a가 더 시멘틱 하다는 생각이며,
만약 select 콘트롤을 사용한다면 그때는 꼭 go 버튼을 넣는것이 바람직 하다고 판단했습니다.

추가의견이나 다른 생각이 또 있으시다면 언제든지 댓글 남겨주세요.
댓글주신 모든분께 다시한번 감사드립니다.(__)

최종 편집 : dece24 (2008-04-12 04:18 AM)