더 나은 사용자 경험 : 스크롤 가능 테이블 또는 전체 크기 테이블 : 브라우저 창에서 스크롤 가능?

1. 특히 스크롤 휠을 사용할 때 동일한 브라우저 창에있는 여러 개의 세로 스크롤 막대가 혼동 될 수 있습니다.

인터페이스와 관련하여 의미가있는 한 두 가지 방법을 모두 사용할 수 있습니다. 그러나 DIV 내에서 스크롤링 DIV를 일반적으로 사용하지 않으려 고합니다. 사용자 스크롤이 한 DIV의 맨 아래에 도달하면 브라우저는 종종 다음 DIV 또는 페이지 스크롤을 시작합니다.

내 경험상 복잡하지 않은 인터페이스는 다른 모든 요소와 동일한 수용/학습 곡선이 짧습니다.

매우 큰 데이터 테이블이있는 경우 CSS를 사용하여 테이블의 <tbody> 태그에서 오버플로를 설정하는 것이 가장 좋습니다. 이렇게하면 사용자가 얼마나 많이 스크롤하더라도 헤더 (<thead>에 저장 됨)가 계속 표시됩니다. 이를 통해 사용자는 테이블 형식 데이터를 볼 때 표준 앱에서 제공 할 수있는 것과 유사한 환경을 경험할 수 있습니다.

스크롤이 많으면 열 헤더가 무엇인지 기억해야하며 항상 헤더를 볼 수 있도록 만들면 더 나은 경험을 제공 할 수 있기 때문에 이것이 최선의 해결책이라고 생각합니다. (Steve Krug의 불멸의 말을 기억하십시오- "나를 생각하지 마라").

이 게시물을 읽은 직후 브라우저 창 내에서 스크롤 가능한 창을 매우 잘못 구현 한 완벽한 예제 일이 발생했습니다. 이것이 얼마나 어색한 지 분명하다고 생각합니다.

먼저 모든 개를 멀리 스크롤 한 외부 스크롤 막대를 사용하려고했지만 내부 창 내에서 마우스를 움직이면 개가 스크롤되지만 이제는 절반의 창 만 보이고 첫 번째 스크롤 막대로 돌아가서 다시 움직여야합니다. 기본 컨텐츠를 이와 같은 작은 내부 프레임으로 강등해서는 안됩니다.

옵션 2로 이동하십시오. 스크롤 내 스크롤은 맨 아래에 도착하고 페이지가 아래로 이동하면 항상 사용자와 혼란을 혼란스럽게합니다.

내 질문은, 표시되는 데이터 세트가 더 작게 표시되도록 데이터를 정렬하는 방법이 있습니까? JavaScript와 CSS를 숨기거나 스크립트를 사용하여 숨길 수 있습니까? 많은 행의 데이터를 표시하는 것이 결코 사용자 친화적이지 않습니다. 사용자가 ctrl + f의 불가사의를 이해하지 않으면 스크롤하는 데 많은 시간이 낭비 될 수 있습니다.

스크롤 할 때 목록의 맨 위에 떠있는 헤더를 추가 할 수도 있습니다. 그렇게하면 사용자는 열 이름이 무엇인지 찾기 위해 맨 위로 스크롤 할 필요가 없습니다.

일반적으로 중첩 된 스크롤바는 피해야합니다. 그들이 실제로 사용해야하는 유일한 시간은 테이블이 매우 길면 놓칠 수있는 테이블 아래에 컨트롤이있는 경우입니다.

예상 한 사용법에 따라 다릅니다.

중첩 된 스크롤 막대를 피해야하는 많은 이유가 있지만 테이블을 스크롤해야하는 경우도 있습니다. 여기 몇 가지가 있습니다 :

1. 테이블 외에도 모든 것이 화면에 맞습니다. 이 경우 중첩 된 스크롤 막대가 없으며 (예 : 브라우저에 스크롤 막대가 없음) 테이블 만 스크롤 가능하게 만들어야하는 이유가있을 수 있습니다.
2. 테이블의 주요 용도는 페이지의 다른 부분과 작은 부분을 참조하는 것입니다. 예를 들어, 테이블에서 사용자가 찾아야 할 내용 ( '무언가'가 자동화하기에는 너무 직관적 임)을 기준으로 세 가지 정보를 채워야합니다. 전체 페이지를 스크롤 가능하게 만들려면 사용자가 원하는 것을 테이블에서 검색 한 다음 맨 위로 스크롤하여 정보를 채우고 다시 검색하십시오. 테이블을 스크롤 가능하게 만들면 '채우기'부분 UI의 화면에 유지됩니다.

세로 스크롤 브라우저에서 가로 스크롤을 처리하도록합니다 (완전히 제거해야 함). CSS 오버플로 설정을 사용하여 처리합니다.

연구에 따르면 사용자는 아래로 스크롤하는 것이 아니라 스크롤하는 것을 싫어합니다.