야후 사용자 인터페이스 블로그 (YUIBlog)

패턴 설문 조사 결과의 아코디언

몇 달 다시 우리가 구성 요소 아코디언 "탐색"공유하는 우리의 현재 생각에 , 그리고 관행, 현재 기본적으로 요구 지역 사회를 결정의 우리에게 도움이 설문 조사를 위해 취할 블로그를이 웹 읽고 개발자와 디자이너, 기타 지침에 통합하는 아코디언 패턴과 아코디언 유이 구성 요소에 입력을 제공합니다.

나는 검토하고 그 결과를 연구 이제 시간이 좀 했어 우리는 패턴의 "베타"버전을 작성하고 그것을 공유하는 준비를 좀 더 갈게요 그렇게하지 ​​않고, 지역 사회와 함께 그들을 함께하고 싶어, 여기 결과입니다 (이 조사는 엄격하게 과학적으로 간주되지해야합니다.)

누가 회신

응답자 스스로에게 다음과 같은 방법을 확인 :

• 디자이너 21.4 %
• 개발자 32.1 %
• 하이브리드 (둘 다 디자이너 및 개발자) 42.3 %
• 이상 4.2 %로 연중 무휴

용어 구분

모든 응답자에 걸쳐 압도 majorities 그 동의

• 아코디언과 아코디언 메뉴 똑같은 (73 %) 뜻
• Accordions과 트리 컨트롤은 두 가지 다른 것들 (89 %) 아르

많은 commenters 다음 행과 함께 accordions과 나무의 차이를 설명 : "트리 컨트롤은 일반적으로 일반적으로 아코디언과 존재하지 않는 계층의 깊이를 의미합니다."

작은 대다수는 아코디언 및 축소 가능 패널 똑같은 (60 %)을 참조 것이라고 말했다.

이러한 majorities는 역할을 일관성했다.

Accordions의 프레 젠 테이션

고체 대부분 (68 %), accordions로 수직 (그리고 사실은 패턴이 잘 웹상에서 인증이다)뿐만 아니라 수평으로 배치 될 수 있다고 말했다. 사람 및 / 가로 아코디언에 레이블이 수직으로 작성되어야한다는 제안 또는 회전합니다.

더 큰 대다수 (72 %) accordions은 두 가지 수준 (accordions와 나무 사이의 구별이 정렬) 가질 수 있다고 말했다 :

약간의 대부분 (53 %) accordions는 다른 accordions 이내에 중첩될 수있다는 것을 밝혔다. 작성된 코멘트, 당신은 충분히 거터 그들을,이 것이 가능한지 "와 같은 제안을하고, 그 문제의 문구 일부 분명하지만 반드시 바람직하지 않을 가능성이 그 대답을 주도하는 것이 바람직하지만 일반적으로 끔찍한 생각을 - 종류의 사용처럼 너무 많은 탭 및 여러 행으로 그들을 포장하는 데. "

이것은 자화 자찬 디자이너 설명과 개발자 측면에 반대했다의 질문 중 하나였다. 개발자와 하이브리드의 57 %가 디자이너의 64 %가되지 않을 수 있습니다 말했다 반면 accordions가 중첩된 수있다는 것을 동의했다. (Aboves 분할 50분의 50의 없음!)

내 추측이있다면, 내가 말하는 거라 더 밀접한보다 어떻게 연결 개발자 (및 하이브리드), 디자이너는 더 이상 표현되었을 수도 있습니다 반면, 왜 "당신이 그것을 할 수있다 ..."관점을 더 표현되었을 수도 있습니다, "...하지만 당신은 안한다"관점.

어떻게 Accordions가 행동해야한다고 생각했

작은 대부분 (54 %) 그 accordions 한 번에 열 수 하나 이상의 패널을 허용한다고 생각합니다. 우리의 노출이 문제는 디자인 공간의 제약과 한 방향 또는 다른 담요 규칙보다 아코디언의 목적에 더 의존 수 있으므로 두 가지 동작은 온라인으로 확인할 수 있습니다.

이 질문은 또한 모호한 방법으로하되, 신분 라인을 따라 분할. 디자이너와 개발자 그리고 Aboves 중 누구도 여러 패널은 약간 큰 majorities로 괜찮아요 동의하면서 하이브리드는 작은 과반수로 한 패널에서 - 시간 규칙을 선호.

훨씬 더 큰 대다수 (73 %) (그것은 항상 한 패널이 열려있을 것을 필요 없어, 그거) 아코디언 완전히 닫힌 상​​태를 가질 수 있다고 믿습니다. 유일한 국외자는 Aboves의 아무도는 항상 한 패널이 열려있을 거라고 그 자리에 60 %를 부러 것입니다.

여러 commenters는 한 패널을 기본적으로 열 수있는 좋은 습관이다 그리고 그 패널 역시 첫 번째되는 데, 하나는 가장 최근에 사용한 제안했다.

또 대다수가 (76 %) 아코디언의 전체 크기로 오히려 일관된 크기에 제약이있는 것보다, 필요로 변경할 수 있습니다 믿고 있습니다. (물론, 이는 그것이 올바른 선택 또는 아코디언가 일관성있는 크기를 유지한다는 디자인 제약 조건 수있는 모바일 장치의 화면과 같은 맥락이있다.)

아주 약간의 대다수 (51 %) (로 올려놓에 반대) accordions 클릭하면 열 것을 제안하고 거의 큰 소수 (45 %)로 따라했다. 흥미롭게도, 이하 4 % accordions는 원칙적으로 가져가서에 열립니다 상태로 기꺼이했다.

이 질문에 대한 서면 의견과 같은 생각, 좋은 음식을 충분히 제공 :

명시적 조치가 필요해야하는 패널을 열면. 아코디언 여러 개의 패널이있는 경우, 마우스를 가져가면 열리는 부조화 경험이 될 수 있습니다. 오히려,이 패널에서 무엇 요약 내용을 전달하고 그 패널을 열고 명시적으로 "클릭"사용자가 도구 설명 사용합니다.

각 아코디언의 구성에 따라 다릅니다.

난 [예제를 다음과 같이 넣어 다중 , 롤오버 ], 그래서 개발자가 사용할 수의 경우 가장 적합 "을 각각"실제로 사용.

또한, 서로 다른 규칙을 롤오버를 사용할 수있는 옵션이 있어야합니다 : (하나는 개방 대부분) 또는 (요소 mouseover에만 개설해야합니다.)

고급 용도에, 아코디언 드래그 앤 드롭 작업 중에 가져가에서 열립니다. 다른 상황에서는 마우스를 가져가면 의도는 것을 믿을 수 없습니다.

접근성

마지막으로, 우리는 accordions으로 알려진 접근성 문제에 대한 개방적인 질문 낚시를 물었는데 좋은 답변이 많이 있어요. (우리의 예제 문제를 들어, 대부분의 사람들이 전체 라벨을 클릭할 아니라 제작 단지 작은 아이콘이 중요하다고 동의했다.)

여기에 accordions과 접근에 대한 다른 통찰력의 예제입니다 :

난 그게 아코디언의 상호 작용은 고급 상호 작용이있다는 생각 안전한 것 같아요. 접근성 문제가 많이 발생할 수 있습니다.

1. 사람들이 그것을 찾지 수 있도록 콘텐츠는 패널 뒤에 숨어 있습니다.
2. 클릭이 가능한 지역이나 트리거의 크기에 따라 / 필요한 수동 손재주로 문제가 될 수있다 패널을 열고 닫을 수 있습니다.

(그 JavaScript를 가진 사람에 대한 "깜박임"을 생산할 수있다지만) 자바 스크립트를 사용할 수없는 경우 Accordions 모든 패널을 열어야합니다.

이것은 숨겨진 패널의 콘텐츠 또는 DOM에 존재 여부를 패널을 열 때 검색됩니다에 따라 다릅니다. 이것은 검색한되는 경우 포커스가 새로 열린 패널에 배치해야합니다.

글쎄, 난 정말지만, 타이틀이 요소의 내용 (tabview 방식처럼) AJAX를 사용하여로드됩니다 특수 경우, 클릭할 수 있어야한다고 판단되는 현실은 그 / (원하는)를 제어할 수 가끔 개발자 (해야) 그 동작을 정의할 수 있습니다. 여기 의 예는 다음 목록 저는 2.x에서 유이 위젯 구현을 기반으로 아코디온 만들어 들어, 확장 유이 버블링 사용되는 구성 요소에서 가장 아마 중 하나.

우리는 아코디언의 '레이블'과, 전체 블로그 게시물에 대한 링크가되었습니다 그래서 아코디언 - 클릭할 수없는 사건을 했었 읍니다. 그렇다면, 우리는 일을 js와 소스에 아이콘을 썼습니다. 제공하는 아이콘 및 / 충분히 큽니다 또는 accesskey 함께 제공됩니다, 난 큰 어려움을 모르겠지만 ...

아코디언은 서버에게 적은 공간에 많은 내용의 피팅의 목적을 제어합니다. 이것은 시각적인 관심사이기 때문에, 그것은 스크린 리더는 단순히 모든 콘텐츠를 읽고 그것을 시각 아코디언로 표시라는 사실을 무시에 좋을거야. 그것은 아이콘이 패널을 확장하려면 클릭할 수 있도록 충분합니다. 또는, 전체 레이블 패널을 펼칠 수있게하는 구성 옵션가있을 수 있습니다 그것이 그 기능을 추가 공개 "열기"또는 "확장"함수를 호출 라벨에 리스너를 연결 구현하는 개발자까지 남아있을 수 있습니다.

그냥 탭로보기 아코디언 생각. 전체 패널 레이블 영역지만, 클릭할 수 있어야 그것이 내가에만 레이블 (텍스트) 또는 클릭할 수 적어도 clikable 영역은 대화식까지 확대 제안 ( "취소"또는 "닫기"버튼 등) 다른 컨트롤이 포함되어있는 경우 컨트롤 ( "후"아래 버튼을, 위의 영역 및 포함된 자막에 대한 즉,이 버튼을 클릭할 수 있어야합니다.)

패턴을 출시는 초안

한 주석기은 (공정한 경찰, 당신은 내게 부탁하는 경우) 설문 조사의 인위적인 제약을 심문 :

이 설문 조사를 좋아하지 않았어요. 질문은 충분히 유연 아니었다. 디자이너 / 개발자로서, 나는 모든 인터페이스 요소가 특정 사이트 또는 웹 응용 프로그램에 맞게해야 믿습니다. 흑백 질문을 프로젝트 사이의 분명한 차이를위한 공간을 떠나지 않아. 동일한 규칙이 완전히 다른 응용 프로그램에 대한 부적 절한 수도 있지만 어떤 프로젝트, 하드 및 빠른 규칙이 필요합니다. 이 결과는 "따라"로 모든 질문에 대답의 대부분의 경우, 제가 수 있습니다.

패턴은 부드럽게하고 추천 것이라는 유이 코드가 유연하고 강력한 것입니다 안심하십시오. 조사는하지만 사람의 선택을 제한하는 대신 의견 및 환경 설정을 수집, 하드 및 빠른 규칙을 가지고 있지 대해서도 의견을 유용 설계되지 않았습니다.

우리의 베타 버전을 발표했고 아코디언 패턴 라이브러리에있는 야후 디자인 패턴. 관련있다면 방문 - 무료, 패턴에 대한 피드백을 줄 좋아하는 줄 추가 당신이 방법 양식하시기 바랍니다 낙하하거나 포럼 토론을.

: 찾기 대화 bloglines | 테크노을

공유하고 확장할 수 : 즐겨찾기에 추가 del.icio.us으로 | 그것 Digg에! | reddit!