it-swarm-korea.com

스크롤 막대는 2020 년에 죽었습니까?

최근에 한 디자이너가 현대 웹 디자인이 시각적 스크롤 막대를 사용하지 않거나 최소한 스크롤 할 때만 볼 수있는 효과에 대해 말하는 것을 들었습니다. 저는 프론트 엔드 개발자이며 실제로 들어 보지 못했습니다. 이것에 대한 진실이 있습니까? 특히 내 질문은 :

웹 앱의 경우 컨텐츠를 스크롤 할 수있는 경우 :

  1. 보이는 스크롤 막대가 있어야하는 이유는 무엇입니까?
  2. 스크롤 막대가 보이지 않아야하는 이유는 무엇입니까?
92
jbyrd

그렇습니다.

보이는 스크롤 막대는 "이 페이지는 스크롤 가능합니다."

이와 같은 시각적 힌트가 없으면 기능이 누락 될 수 있습니다.

107
colmcq

일부 최신 디자인 지침에서는 지속적으로 볼 수있는 스크롤 막대를 모두 무시하지만 전부는 아닙니다. 예를 들어 메뉴의 Material Design guide 에서 메뉴를 스크롤 할 수 있으면 스크롤 막대가 표시됩니다. 어쨌든 내용이 스크롤 가능하면 스크롤이 가능하다는 것을 알 수 있어야합니다.

아래로 스크롤 할 수있는 양 (전통적인), "더 읽기"링크 또는 화면을 가리키는 화살표 (많은 최신 앱 홈페이지 또는 블로그에서와 같이)를 명확하게 나타내는 스크롤 막대가 표시되어 있는지 여부는 개별 디자이너 또는 지침에 달려 있습니다. ) 또는 콘텐츠 영역의 가장자리에 접근하면 페이드 아웃됩니다. 즉, 해당 방향으로 이동하여 더 명확하게 볼 수 있지만 여유는 그 자체로 필요한 구성 요소입니다. 스크롤 될 수 있지만 사용자에게 스크롤 성을 나타내지 않는 콘텐츠를 제공하는 것은 좋지 않은 디자인입니다. 사용자를 실망 시키거나 중요한 정보 나 행동 유도를 놓칠 수 있습니다.

102
sintax

마우스 사용자로서, 스크롤 막대를 보거나 액세스 할 수없는 스크롤 가능 컨텐츠를 싫어합니다.

  1. 스크롤 막대는 컨트롤입니다. 이를 통해 손가락 스크롤, 스크롤 휠링 등을 비교할 수없는 큰 페이지를 빠르게 탐색 할 수 있습니다. 또한 스크롤 휠보다 대부분의 페이지에서 더 정확한 정밀도를 제공합니다.

  2. 스크롤 막대가 정보를 제공합니다. 페이지의 내용을 읽는 데 걸리는 시간을 신속하게 결정할 수 있습니다 (손잡이 : 거터 비율이 화면과 같습니다 : 페이지 비율과 같은 적절한 스크롤 막대를 가정 함). . 또한 상단과 하단으로 빠르게 스크롤하려는 경우 페이지의 현재 위치를 확인할 수있는 색인을 제공합니다.

  3. 스크롤 막대는 공간을 거의 차지하지 않습니다. 현재 내 화면은 1920 x 1080 = 2.1 Mpx입니다. 이 페이지가있는 Firefox 창은 1125 x 905 = 1.0 Mpx입니다. 스크롤 막대는 16 x 816이며 총 13Kpx 또는 내 화면의 1.3 %를 차지합니다. 게임에 사용하기 때문에 모니터가 제게 가까이 있기 때문에 어쨌든 내 창을 모니터보다 좁게 유지하는 경향이 있으므로 스크롤 막대가 공간을 전혀 차지하지 않습니다.

  4. 내용이 스크롤 가능하다는 것을 알지 못하는 경우가 있지만 막대를 확인하지 않고 휠로 스크롤을 시도하는 경향이 있기 때문에 이것이 웹 페이지에 큰 문제라고 의심합니다. 일반적으로 스크롤되지 않는 데스크톱 응용 프로그램의 경우 더 큰 문제입니다.

  5. 숨길 수있는 스크롤 막대를 원하면 마우스 휠, 키보드 키, 트랙 패드 등을 통해 수동으로 스크롤 할 때마다, 마우스를 화면의 오른쪽 가장자리로 움직일 때마다 표시되어야합니다.

스크롤바는 특히 사용하기에 충분히 큰 경우에 이러한 많은 공간을 차지하므로 모바일 장치는 더 까다 롭습니다.

  • A. 일반적으로 데스크톱보기로 전환하여 문제를 해결합니다 (아직 모바일 버전이 데스크톱 버전보다 나을뿐 아니라 웹 사이트도 보지 못하므로 기본적으로 데스크톱보기로 설정됩니다). 그런 다음 축소, 아래로 스크롤 한 다음 다시 확대합니다. 스크롤, 스크롤, 확대하는 동안 스크롤하는 것보다 빠르고 정확하며 잡을 수있는 스크롤 막대가 필요하지 않습니다. (또한 대부분의 모바일 사이트에서 허용되지 않는 이미지, 다이어그램 등을 더 잘 볼 수 있도록 확대 할 수 있습니다.)

  • B. Firefox on Android에는 액세스 할 수없는 스크롤 막대가 있습니다. 기본 "인터넷과 마찬가지로 현재 페이지의 어느 부분 (데스크톱 및 모바일 버전의 사이트)인지 알려줍니다. 브라우저. 나는 페이지 길이를 색인화하고 결정하기 위해 마우스가있는 데스크탑 브라우저에서와 같이 이것을 사용한다.

  • C. 또한 적절한 모니터에서만 큰 웹 페이지를 보는 경향이 있으므로 900 페이지의 .pdf 등을 스크롤하려는 모바일 장치를 사용하는 경우가 훨씬 적습니다. 웹앱의 화면 길이가 2 ~ 3 개를 넘지 않으면 스크롤 문제가 훨씬 적습니다.

  • D. 터치 스크린 손가락 스크롤은 일반적으로 마우스 휠을 사용하는 것보다 빠르면서도 정확하므로 빠르게 탐색하기 전에 페이지가 훨씬 커야한다는 점에 주목할 가치가 있습니다.

결론

마우스 (또는 트랙 패드 또는 트랙볼) 설정의 경우 스크롤 막대가 항상 보이고 잡을 수 있어야한다고 생각합니다. 최소한 스크롤 할 때나 스크롤 막대 근처에서 마우스를 움직일 때 나타납니다.

모바일 터치 스크린 설정의 경우 스크롤 할 때 스크롤 막대가 항상 표시되어야하지만 잡을 필요는 없으며 스크롤하지 않으면 낭비되는 공간을 줄이기 위해 숨겨야한다고 생각합니다.

태블릿/iPad 또는 더 큰 터치 스크린을 엉망으로 만들지 않았으므로 그에 대한 느낌이 확실하지 않습니다.

물론 시각적 스타일을 변경하는 옵션 (사용자가 손님인지 또는 계정을 가지고 있는지에 따라 임시 쿠키 또는 저장된 사용자 설정을 통해)을 변경하는 것이 가장 좋은 방법이지만 기본적으로 기능적인 것으로 설정해야합니다.

61
MichaelS

이 관점은 주로 컨텐츠가 처음 나타날 때 스크롤 막대가 잠깐 동안 표시된 다음 사라지는 Mac 환경에서 비롯됩니다. 스크롤이 발생하면 (사용자가 트리거했거나 그렇지 않은 경우) 스크롤 막대가 다시 나타납니다. 손잡이 만 보입니다 (반투명 둥근 검은 막대). 화살이나 거터 없음. 커서가 나타날 때 스크롤 막대 위에 있으면 커서가 넓어지고 커서로 드래그 할 수 있습니다. 내용의 크기는 변하지 않습니다. 스크롤바가없는 것처럼 작동하고 스크롤바가 맨 위에 렌더링됩니다.

이는 트랙 패드 또는 트랙 패드와 유사한 입력 메커니즘 (예 : 랩톱)을 사용할 때 적용됩니다. 마우스를 사용할 때 기본적으로 일반 스크롤 막대가 기본적으로 표시됩니다.

물론 이것은 모바일로도 확장됩니다. iOS는 거의 동일한 동작 (마우스 커서 상호 작용)을 사용합니다. 사실 나는 iOS (스크롤 바가 너무 작아서 안정적으로 탭하기에는 너무 작음)에서 시작되어 macOS로 마이그레이션되었다고 생각합니다.

전반적으로 다음과 같은 장점과 단점이 있습니다.

  • 스크롤바를위한 공간을 만들 필요가 없어서 페이지 디자인을 단순화하고 (분산 요소가 적음) 특히 여러 곳에서 스크롤 할 수있는 경우 콘텐츠를위한 공간을 더 많이 확보 할 수 있습니다.
  • Mac 사용자는이 동작에 익숙하며 기대합니다.
  • 영역이 갑자기 스크롤 가능 해지면 컨텐츠 크기가 급격히 증가하지 않으며 스크롤 막대가 표시되는 한 필요할 수 있고 숨겨진 경우 (예 : 텍스트 줄 바꿈으로 인해) 필요하지 않은 일반적인 모호성을 수정합니다.

  • 부정적인 측면에서 이미 언급했듯이 콘텐츠가 스크롤 가능하다는 것을 나타내는 다른 방법을 생각해 내야합니다. 어쨌든 웹 페이지의 주요 부분에는 그러한 문제가 아니지만 사용자의 기대에 따라 내부 콘텐츠에 문제가 될 수 있습니다. 초기 플래시가 도움이되지만 항상 충분하지는 않습니다.

  • 문서의 다른 위치로 건너 뛰기위한 사용자 상호 작용이 복잡합니다. 사용자는 커서를 스크롤 막대가 나타날 위치로 이동하고 마우스 휠 또는 "2 손가락 스크롤"로 약간 스크롤하고 스크롤 막대가 나타나면 스크롤 막대를 잡고 원하는 위치로 드래그해야합니다. 모멘텀 스크롤은 경우에 따라이를 피하는 데 도움이됩니다.
  • 스크롤바는 투명한 배경에 나타나기 때문에 배경이 어두우면 잘 보이지 않을 수 있습니다. macOS는이 경우 사용할 수있는 흰색 대체 스크롤 막대를 제공합니다 (배경이 충분히 어둡지 만 100 % 완전하지 않은 경우 브라우저가 자동으로 전환한다고 생각합니다). 또한 막대에 약한 실패 방지 기능으로 미묘한 광선 (또는 그림자)을 제공합니다.

물론 가능하다면 이런 종류의 브라우저 네이티브 구성 요소를 고수하십시오. 그들은 각 사용자가 자신의 플랫폼에 대해 자연스러운 경험을 얻도록 할 것입니다 (많은 웹 사이트가 모멘텀 스크롤링과 끔찍한 최종 결과로 탄력적 스크롤링을 복제하려고 시도하는 것을 보았습니다). Mac 사용자는 보이지 않는 스크롤 막대를 표시 한 것에 대해 감사하지 않으며, Windows 사용자는 스크롤 막대를 숨기지 않은 것에 대해 감사하지 않습니다.

26
Dave

내 견해에서 스크롤 막대를 제거하는 것은 기능보다 스타일을 두는 관용적이고 얕은 이데올로기의 또 다른 예입니다. 이것은 어떻게 돌아 가야하는지, 사회가 멍청하다는 것을 나타냅니다. 스크롤 막대는 다른 대체 방법이 항상 복제 할 수없는 중요한 기능적 목적을 제공합니다. 나는 사람들이 터치 스크린을 사용한다는 개념에 부분적으로 영향을 미쳤다고 생각하기 때문에 그럴 필요는 없지만 여전히 많은 사람들이 그렇지 않다. 많은 대안 방법은 조작하기 위해 집중력과 미세함이 필요합니다. 이는 나쁜 사용자 인터페이스와 싸우기보다는 오히려 일을하는 데 소비하는 에너지 소모입니다. 기존의 스크롤 방법은 일반적으로 화살표 아래로 키를 누르면 키보드 스크롤과 함께 사용됩니다.이 방법은 더 많은 집중력이 필요한 다른 방법보다 훨씬 쉽지만 스크롤 막대가 제거되면 키보드 화살표 스크롤이 사라지는 경우가 있습니다. -아니! 예를 들어 Big F 소셜 네트워크는 msg 기록을 통해 스크롤하는 동안 "동적"스크롤 스타일을 사용하여 지속적으로 자극을 일으켰습니다. 특정 지점과 갑자기 추가 대화 내역이로드되고 원하는 위치보다 훨씬 앞서 점프하게됩니다.

또한 이는 부분적으로 무지이며, 사용자 경험을 희생시키면서 회사 비용을 절약하기 위해 서버에서 리소스와 대역폭을 절약하려는 욕구라고 생각합니다. 또한 바보가 아닌 사람들을 위해 더 귀찮은 일을 겪는 대신, 아주 기본적인 명령에 사용하기 위해 "더 쉬운"것을 만들기 위해 바보를 위해 일을 바보로 만드는 것에 관한 것입니다. 블록 체인이 돈을 절약하기 위해 사용자 경험을 희생하는이 시대의 끝을 예고하기를 바랍니다. 우리는 기본 및 고급 사용자 모두에게 빠르게 작동하고 번거 로움이없는 시스템을 보유 할 수 있습니다.

예를 들어, skype 및 F 메신저와 같은 소프트웨어를 사용하여 섹션이로드 된 후 섹션을 영원히 기다리지 않고 즉시 msg 기록의 맨 처음으로 스크롤 할 수 있다면 좋지 않을까요?! 나는 항상 한 번에 전체 로트를로드하는 자원을 절약하는 것이라고 생각했습니다. 그러나 약간의 지능과 미묘한 사고를 가진 누군가가 이것을 설계하고 있다면 (나는 내가 희망하는 회사보다 블록 체인 서클에서 더 흔합니다) 우리 모두 케이크를 먹고 먹을 수 있습니다. 우리는 리소스를 절약 할 수 있습니다 (블록 체인에서도 여전히 사소한 것은 아닙니다). 페이지 로딩 시스템 으로이 끔찍한 페이지를 만들지 않고도 원하는 정보를 즉시 얻을 수 있습니다.

스크롤 할 때 팝업되는 날짜와 함께 전체 타임 라인 기록의 프레임 워크를 스크롤 막대에 레이아웃하기 만하면됩니다. 마우스 버튼이나 스트 로프 스크롤을 놓으면 특정 섹션이로드 될 수 있습니다. 처음으로 다시 돌아가려면 맨 위로 스크롤하면 첫 페이지 만로드하면됩니다. 예를 들어 키워드를 검색하기 위해 모든 것을 즉시로드 해야하는 경우 필요한 경우 누를 수있는 간단한 버튼을 제공하면 스크롤 한 내용의 전체 메시지 기록 또는 기록을 얻을 수 있습니다.

누군가가 구체적으로 모든 신호를로드해야한다고 신호하면 블록 체인이 리소스를 수용해야합니다. 이것은 구 모델의 기업과의 차이점으로, 특히 모든 것을로드 해야하는 사람들조차도 더러운 이익 동기를 위해 자원을 보호하고 사용자를 망칠 수 있기를 꺼려한다고 생각합니다. 이것이 우리가 블록 체인을 필요로하는 이유이며 오픈 버전이 바람직합니다.

11
Lex

혼합 관점으로 ...

가로 스크롤 막대는 일반적으로 나쁜 것입니다. PC 모니터의 화면 너비에 최적화되어 모바일 장치로 잘 변환되지 않을 수 있습니다. 아래로 스크롤 할 때 전체 페이지를 읽으려면 각 컨텐츠 화면에서 왼쪽-오른쪽 스크롤이 많이 필요합니다. 반대로 그 사이트들은 더 큰 화면에서 공간을 낭비했을 것입니다. (이전 독자는 "1024x768에서 가장 잘 본"웹 사이트를 기억하십니까? 예, 그럴 것입니다.) 우리는 2019 년에이를 참을 필요가 없습니다. 이것은 1990 년대가 아니기 때문에 여전히 Netscape Navigator를 사용하지 않습니다. 거기 가지 마.

반면에 세로 스크롤 막대는 괜찮습니다. 우리는 직관적으로 무언가를 스크롤하는 데 익숙합니다. 예를 들어 종이 신문을 어떻게 읽었는지 생각해보십시오. 위/아래 스크롤만으로 전체 페이지를 쉽게 볼 수 있습니다.

2 ~ 3 개 이상의 화면으로 가득 찬 콘텐츠가 너무 많다고 생각하는 학교가 있습니다. 그 후 물건을 찾기가 어렵습니다. 따라서 스크롤 막대가 작동하는 동안 무제한 길이의 페이지로 연결되지 않도록하십시오!

8
Graham

예, 접근성을 위해 스크롤 막대가 표시되어야합니다.

스크롤 막대를 숨기면 좌절과 경계선 사이의 사이트/프로그램을 사용할 수없는 경우가 많습니다.

  • 보조 하드웨어/소프트웨어를 사용하여 페이지에 액세스
  • 스크롤 휠이없는 마우스 사용
  • 스크롤 이벤트를 통과하지 않는 원격 데스크톱 시스템 사용
  • 멀티 핑거 제스처를 사용하여 스크롤하는 터치 패드 사용 (대부분의 일반 사용자는 해당 기능이 존재하지 않음)
  • 터치 스크린을 사용하면 페이지 높이가 두 화면 이상이므로 페이지의 다른 쪽 끝으로 스크롤해야합니다.
  • 터치 스크린을 사용하여 링크/버튼으로 가득 찬 페이지를 스크롤합니다 (탭 앤 플릭 동작으로 인해 실수로 무언가가 활성화 될 수 있음)

보이는 스크롤 막대는 이러한 모든 문제를 피할 수있는 쉬운 방법입니다. 동료의 주요 주장이 다른 사이트에서하고 있다는 것이라면 상대방의 말을 듣지 마십시오. 의미 있고 의미있는 이유가 수반되지 않는 한 동료 압력은 유효한 논거가 아닙니다. why 그렇게하는 것이 좋습니다. 그런 생각은 어떻게 <blink> 태그가 인기를 얻었습니다.

또한 접근성을 위해 자신의 스크롤 막대를 구현하지 마십시오. 시스템에서 제공 한 것을 사용하십시오. 보조 기술이 수제 스크롤 막대를 항상 식별하여 작동시킬 수있는 것은 아닙니다.

7
bta

스크롤 막대는 매우 유용합니다

  1. 그것은 페이지가 스크롤 가능하다는 것을 사용자에게 보여줍니다
  2. 현재 스크롤 가능한 페이지에있는 사용자를 보여줍니다.

어떤 엉뚱한 디자이너가 스크롤 막대를 삭제하는 것이 좋은 생각이라고 생각했기 때문에 내가 몇 번이나 화 내고 길을 잃었는지 전혀 알지 못합니다.

3
Solid_Metal

MichaelS의 답변에 추가하려면

태블릿 및 iPad에서는 스크롤 할 수 없을 때 숨길 수있는 잡을 수없는 스크롤 막대가 바람직합니다. 그가 말했듯이, 터치 장치에서 스크롤하는 것이 훨씬 더 정확하고, 가시적이고 잡기 쉬운 스크롤 막대는 어색하고 성가시다. 그러나 페이지 길이에 따라 맨 위로 이동 버튼을 사용할 수 있습니다.

또한 12.9 인치 iPad 프로를 사용하여 StackExchange에서 이것을 쓰는 동안, 엄청나게 (약 1cm) 양의 패딩을 엄청나게 다른 톤으로 추가하면 실수로 링크를 열지 않고도 스크롤 할 수 있으므로 도움이됩니다.

2
Bob Kerman

흥미로운 질문은 제 2c는 개발자이지만 UX를 주도하고 여러 내부 스크롤 가능 영역으로 인터페이스를 디자인 한 것입니다.

몇 가지 사항 :

  1. 스크롤바의 존재는 컨텐츠가 스크롤 될 수 있음을 의미하고 여유가 있기 때문에 컨텐츠가 스크롤을 요구할만큼 충분히 크면 보이는 스크롤바가 존재해야합니다.
    • 무한 스크롤은 지옥에 대한 나의 개인적인 생각입니다. 특히 트랙 바를 클릭하고 드래그하는 경우 (탄젠트 오버)
  2. 내용을 스크롤 할 수없는 경우 스크롤바는 발생할 수없는 일을 제안하는 반-책임입니다.
    • Edge 케이스는 스크롤 할 수없는 것들입니다. now 말하면 내용의 크기가 커질 수 있습니다. 편집기 또는 동적 출력 기능이있는 시스템에서 일반적입니다. 특히 스크롤 기능을 추가/제거하면 레이아웃이 엉망이 될 수 있기 때문에 내용이 확장되면 스크롤 막대가 나타납니다 jank (overflow: auto 예). 이 경우, 스크롤 가능한 영역임을 나타 내기 위해 비활성화 된 스크롤 막대를 배치하는 것이 쉽게 일 수 있지만 내용이 아직이 동작을 수행 할만큼 충분히 크지는 않습니다.
  3. 가로 스크롤 막대는 세로 스크롤 막대와 함께 암시 적 모드 선택을 도입 할 경우 일반적으로 나쁜 생각입니다. 마찬가지로, 마우스 스크롤의 기본값은 일반적으로 세로 스크롤이지만 암시 적 추가 키 누르기 (또는 트랙 패드 상호 작용)를 사용하면 가로 스크롤을 수행 할 수 있습니다. 이것의 복잡성은 거의 달성되지 않습니다.
  4. 일부 응용 프로그램 인터페이스 (예 : 미끄러운지도) 내에서 모든 스크롤 막대를 제거하는 것이 좋습니다. 컨텐츠는 패러다임의 브라우저 창 아래로 이동하지만 다른 방법은 아닙니다. 컨트롤은 대부분의 사용자에게 잘 알려져 있습니다.
  5. 많은 특정 사용자 정의 버전을 원하지 않는 한 스크롤 막대의 스타일을 지정하는 것은 시간의 99 %에 해당되지 않습니다. 모든 환경에서 완벽하게 보이지는 않으며 브라우저 기본값을 사용합니다.
1
dougajmcdonald

디자이너가 스크롤 막대를 플로팅 스크롤 다운/업 버튼으로 바꾸는 것에 대해 이야기하고 있습니까? 나는 그것이 모바일 우선 접근 방식이기 때문에 합리적이라고 생각하고 특정 상황에서 성공적으로 사용되는 것을 보았지만 그 버튼은 그리드의 스크롤 막대를 대체 할 수 없습니다.

0
Ling