web-development-kb-ko.site

긴 목록에서 어떤 항목을 선택했는지 명확하게하기

사용자가 항목에 태그를 지정하고 태그 또는 태그 세트가있는 모든 항목을 볼 수있는 웹 인터페이스의 일부를 설계하려고합니다. 그 태그 중. 현재보고있는 태그 세트를 사용자에게 표시하는 가장 좋은 방법은 무엇입니까?

하나의 태그에 간단한 강조 표시가 작동하지만 태그 목록이 화면보다 길면 한 번에 모든 태그를 볼 수 없으므로 사용자가 선택한 태그가 명확하지 않습니다. 이 문제에 덧붙여, 작업 할 공간이 적습니다. 전체 태그 및 항목 인터페이스는 약 300x500 픽셀이므로 선택한 태그를 긴 가로 목록으로 표시하는 것은 옵션이 아닙니다.

선택한 태그가있는 태그 목록 위에 보조 목록을 만들려고 생각했습니다 (미국과 다른 국가가 강조한 드롭 다운 목록과 같은 종류 ), 그러나 더 나은 대안이 있는지 궁금합니다.

web-applistsoverflowtags
13
sslepian

Faceted Navigation pattern 을 사용하십시오. Amazon.com은 다음과 같이 훌륭한 일을합니다.

Amazon faceted navigation

(이러한 스크린 샷 Nintendo DS에 대한 검색 결과 -수직 제약 조건이 있으면 더 짧게 유지할 수 있습니다)

참고 사항 :

  • 각 패싯에서 현재 선택된 항목에 대한 매우 명확한 통신 (이 경우 링크의 경우 검은 색 굵은 체 대 파란색)
  • 각 항목이 모두 하이퍼 링크 임에도 불구하고 각 항목을 하이퍼 링크로 만들지 않아서 가독성 향상-이 경우 하이퍼 링크 밑줄 패턴보다 가독성을 우선시하는 것이 더 유용합니다
  • 각 패싯에는 클릭하면 사용 가능한 결과 수가 표시됩니다. 검색 백엔드에 따라 때때로 구현하기가 복잡합니다.
  • 올바른 카피 라이팅 및 올바른 문구 (이 경우 특정 날짜를 신경 쓰지 않기 때문에 날짜에 대한 "최근 30 일")뿐만 아니라 처리하는 패싯의 종류에 따라 올바른 제어
  • 각 패싯마다 한 단계 씩 올라가는 기능으로 본질적으로 해당 패싯에서 선택을 "실행 취소"합니다. < 적십자와 대조되는 (x) 많은 다른 사이트들처럼.
  • 사람들이 하향식으로 스캔하고 왼쪽/오른쪽 열을 보지 않을 경우 유용성을 높이기 위해 아마존이했던 것처럼이를 이동 경로 탐색 패턴과 결합하십시오

많은 항목을 선택하면 선택된 모든 항목을 볼 수 없다는 것에 대해 너무 걱정하지 마십시오. 이는 일반적인 탐색 탐색 함정에 해당합니다. 사용자는 많은 선택을 한 경우 (아마존 예제에서 각 패싯 중 하나를 선택한다고 상상하면) 페이지 아래에 더 많은 옵션이 선택되어 있음을 알 수 있습니다. 물건을 조금 상쇄하기 위해 @onnodb가 제안한 것처럼 선택한 패싯을 그룹화 할 수 있습니다 (select 컨트롤처럼).

7
Rahul

목록 상단에 선택한 태그의 '보조 목록'을 만드는 것이 가장 합리적이라고 말하고 싶습니다. (좋은 아이디어, btw)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

선택한 태그에 다른 배경색을 지정하고 "(X)"버튼을 추가하여 제거하면 매우 유용한 UI가 있다고 말할 수 있습니다.

5
onnodb

작업 할 부동산이 제한되어 있으므로 다음을 구현할 수 있습니다. 태그 목록을 드롭 다운에 배치하고 더하기 단추를 사용하여 태그 드롭 다운이있는 다른 행을 추가하십시오. 이런 식으로 표시되는 유일한 태그는 사용자가 선택한 태그입니다.

enter image description here

3
Denzo

나는 그것이 아주 오래된 질문이라는 것을 알고 있지만, 여전히 내 의견으로는 오늘날에도 유효합니다.

대답을 위해 Visual Studio 세로 스크롤 막대에서 영감을 얻었습니다.

MS Visual Studio scroll bar

  • 슬라이더 높이는 콘텐츠의 전체 길이와 비교하여 화면 영역의 크기에 해당합니다.
  • 얇은 가로 파란색 선은 현재 커서가있는 위치를 나타냅니다.
  • 짙은 노란색 막대는 검색어가 발견 된 줄을 표시합니다.

OP 질문의 경우-화면 용량을 초과하는 항목 목록이 있으면 슬라이더를 사용해야합니다. 슬라이더를 사용하여 선택한 항목이 목록에서 어디에 있는지 표시 할 수 있습니다.

0
Mike

내 머리 꼭대기에서.

옵션 1 : 'title'속성을 수정하여 선택한 항목을 마우스로 가리 킵니다. 옵션 2 : jquery를 사용하여 요소를 순회하고 선택한 항목을 나열하는 목록에 대한 호버 이벤트를 추가하십시오.

0
Babak Naffas

이를 수행하는 몇 가지 방법이 있습니다.

1) 언급했듯이 목록에서 순서를 유지하면서 선택된 태그를 강조 표시 할 수 있습니다. 사용자가 페이지에 표시되지 않은 선택된 태그를 인식하지 못하는 문제를 극복하기 위해주의를 끌 수있는 작업을 수행 할 수 있습니다. 페이지의 태그 섹션 맨 아래에있는 화살표가 깜박이는 등 무언가가 있음을 알려줍니다. 그들이 아래로 스크롤하면 중요

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

== 마크로 강조 표시된 태그와 vv는 깜박이는 화살표입니다.

2) 또한 상단에 추가 목록을 만들 수 있지만 원본에서 태그를 제거하여 항상 태그 섹션의 높이를 일정하게 유지하십시오.

3) 선택한 태그를 검색 결과 제목 아래에 세로 목록으로 표시 할 수 있습니다.

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

각 태그 이름 옆에 작은 x가 표시됩니다. 이를 통해 사용자는 태그를 빠르게 제거 할 수 있으며 그에 따라 결과가 변경됩니다.

나는 옵션 2 또는 3을 선호한다.

0
Waleed Al-Balooshi