it-swarm-korea.com

많은 사이트에서 각 웹 페이지의 절반을 비워 두는 이유는 무엇입니까?

많은 사이트에서 각 웹 페이지의 절반을 비워 두는 이유는 무엇입니까? 화면 공간을 낭비하지 않습니까?

이에 대한 좋은 예로 스택 교환 네트워크 사이트가 있습니다.

Screenshot of UX Stack Exchange with annotations

보시다시피, 각 페이지의 양쪽에 많은 공백이 남아 있습니다.

공백으로 인해 사이트가 특정 화면 크기와 호환됩니까?
공간을 떠나 사이트를 모바일 친화적으로 만드는 데 도움이됩니까?
공간이 부족하여 페이지가 덜 혼잡 해져서 더 유용하게 보이나요?
또는, 정당한 이유가없고 사람들은 그렇게해서는 안된다는 사실을 모르기 때문에 그렇게합니까?

나는 두 디자인을 모두 사용하는 사이트에서 작업했으며 사용자가 어느 쪽이든 불평하지 않았습니다.

공간이있는 사이트의 예 : 스택 오버플로 , GitHub , Facebook
공간이없는 사이트의 예 : Amazon , Chase , Gmail

207
Tot Zam

여러 가지 이유가 있지만 주된 이유는 시각적 혼란정보의 계층이고 한쪽은 구조적 일관성입니다.

비주얼 클러 터링

클러 터는 우리 삶에서 중요한 현상이며, 사용자 인터페이스 디자인과 정보 시각화에서 중요한 고려 사항입니다. 기존의 많은 시각화 시스템은 사용자가 보는 개체 또는 정보를 필터링하거나 화면의 중앙에있는 개체에 더 많은 표시 영역을 허용하도록 비선형 확대 기법을 사용하여 혼란을 줄 이도록 설계되었습니다. 웹 페이지,지도 및 기타 시각화를 디자인하기위한 팁은 종종 정보의 표현 및 구성을 신중하게 선택하여 최소한의 정보를 유지하면서 대량의 정보를 표시하는 기술에 중점을 둡니다. [Rosenholtz et al., 2005]

간단히 말해서, 논리적으로 요소를 제시함으로써 시각적이고인지적인 과부하를 피하는 것이 아이디어입니다. 이 논리적 방법은 다음 지점과 관련이 있습니다.

정보의 계층

정보에는 계층 구조가 있으며 표시하려는 정보의 가장 중요한 부분입니다. 즉, 실패와 성공의 차이입니다.

정보 계층은 전자 학습 설계를 포함하여 모든 형태의 설계에 사용해야하는 보편적 인 설계 원칙입니다. 정의상, 그것은 중요한 순서 (오름차순 또는 내림차순)를 드러내는 방식으로 페이지/화면에 요소 또는 내용의 배열입니다.

아래의 boxed 모델을 살펴보십시오.

enter image description here

보시다시피, 계층 구조는 대부분의 사람들이 구조화하고 이해할 수 있음이 분명합니다. 반응 형 모드에서는이 계층 구조가 예상대로 모든 요소를 ​​스택하므로 mobile advantage은 매우 명확합니다.

이제 동일한 레이아웃이 전체 너비로 변환되었습니다.

enter image description here(전체 크기로 봅니다)_

이제 계층 1이 사라졌으며 사용자의 눈은 아마도 2와 3을 먼저 스캔합니다. 그리고 6과 7! 기본적으로 가장 중요한 요소는 계층 아래에 ​​있습니다. 순서는 3-1-2-4와 같도록 변경할 수 있습니다. 그런 다음 반응 형 모델 (장치뿐만 아니라 화면 크기 조정까지)에 스태킹 할 때 문제가 발생합니다. 3이 첫 번째 요소이므로 문제를 해결하는 대신 문제를 만들고 있습니다.

보시다시피, 문제는 상당히 크며 이는 주요 문제입니다.

그러나 UI 또는 레이아웃 측면도 있습니다.

구조적 일관성

전체 너비 페이지가 있다고 가정 해 봅시다. 어쨌든 100 %입니다. 작은 랩탑 사용자에게는 100 %, 24 인치 모니터에서는 100 % 랩톱 사용자는 화면에 매우 특정한 양의 정보와 함께 매우 구체적인 방식으로 요소를 표시하는 특정 구조로 압축 된 정보를 볼 수 있습니다.

이제 24 인치 모니터 사용자는 매우 다른 것을 보게 될 것입니다. 우선, 사용자는 머리가 한쪽에서 다른쪽으로 테니스 경기에서 느끼게 될 것입니다. 시각 채도와 마찰은 엄청나게 높을 것입니다. 그러나 정보의 세로 표시도 다릅니다. 아래를 참조하십시오.

1366x768enter image description here

이제 1920x12 (24 인치 모니터) enter image description here

큰 차이가 있습니까? 이미지가 (이것은 또 다른 문제 일 수 있습니다!)확대되었으며 텍스트 크기가 거의 두 배로 증가했습니다. 이제 여기에 존재하는 놀라운 화면 크기와 아직 존재하지 않고 다음 달에 나타날 수있는 화면 크기를 곱해보십시오.

다시 말해 : 통제를 유지하는 대신, 우리는 무작위성에 찬성하여 포기하고 있습니다.

물론 특정 규칙이 아닌 일반적인 규칙에 대해 이야기하고 있으므로 여기 저기 예외가 있습니다.

마지막 메모 :

전체 너비가있는 예제에서 Amazon 만 사용하고 있으며 수많은 A/B 테스트를 통해 수년간의 테스트 (지금은 찾을 수없는 매우 흥미로운 기사가 ​​있음)가 필요하다는 것을 분명히하고 싶습니다. 그러나 여기에는 계층 구조가 있습니다. 대부분의 제품은 비슷한 근사치 weight를 보유하므로 사전에 계층 구조를 알 수없는 제품을 판매하므로 사용자의 검색과 일치하도록 최선을 다할 것입니다.

Google의 경우 boxed 모델을 사용하고 왼쪽에 공백이 약간있어 왼쪽에 콘텐츠를 맞 춥니 다. LinkedIn 메인 페이지는 boxed and centered이지만 로그인하지 않은 사용자의 방문 페이지에는 전체 너비 요소가 있습니다. 하지만 세심한주의를 기울이면 해당 페이지에서도 boxed

134
Devin

본문의 최적 줄 길이는 공백을 포함하여 줄당 50-60 자 ( "Typographie", E. Ruder)로 간주됩니다. 다른 출처에서는 최대 75자를 사용할 수 있다고 제안합니다.

소스

웹 사이트를 깨끗하고 단순하게 유지하는 것은 디자인 트렌드이지만 유용성 값도 있습니다. 소음이 적고 사용자가 물건을 더 쉽게 찾을 수 있습니다.

그러나 콘텐츠에 최대 너비를 추가하는 것이 주로 가독성에 좋습니다. reddit 를 살펴보면 왜 선 길이가 중요한지 알 수 있습니다.

85

사용자가 한 번에 볼 수있는 정보의 양에는 합리적인 제한이 있습니다.

사용자가 볼 수있는 것보다 더 많은 정보로 뷰가 가득 차면 압도적입니다. 콘텐츠의 종류에 따라 다름 그리고 정보가 표시되는 방식.

빈 공간을 남겨 두는 것이 아니라 필요한 공간을 사용하는 것이 아닙니다.

예를 들어 요점을 설명하려면 :

enter image description here

웹 사이트는 스크롤을 사용할 수 있으므로 가능한 한 많은 정보를 단일 화면에 넣을 필요가 없습니다.

이제 컨텐츠를 배포하는 방법은 무엇입니까?

enter image description here

enter image description hereenter image description here

사이트에 따라 내용이 중앙에 정렬되거나 왼쪽 정렬 될 수 있습니다 (마지막으로 왼쪽에서 오른쪽으로 읽음). 컨테이너의 경계에 공간을 분배하는 것이 아니라 요소 내부에 공간을 분산시키는 또 다른 대안이 있습니다. 컨테이너 안에 여러 개의 열이 있고 각 측면에 사이드 바가있는 경우 이러한 종류의 레이아웃이 유용 할 수 있습니다. 즉, 열이 충분하면 어느 정도 가치가 있으며, 어느 시점에서 정보가 너무 멀리 떨어져있어 각 요소 (각 행)의 일관성이 깨지기 시작합니다. 그리고 그 시점에 도달하면 이전 방법 중 하나로 빈 공간을 계속 추가합니다.

enter image description here

76
Alvaro

내가 만든 사이트를 말하는 웹 개발자로서 우리는 큰 너비의 디스플레이를 위해 디자인하지 않았습니다. 공백은 브라우저 너비를 늘리거나 CSS 배경색이 무엇이든간에 기본값입니다.

데스크톱 및 모바일에서 반응 형이고 확장 가능한 웹 사이트를 디자인하고 개발하는 비용은 이미 상당히 높습니다. Google의 분석에 따르면 사용자의 90 % 이상이 사이트를 <1400 픽셀 너비의 해상도로보고 있습니다.

하루가 끝날 무렵, 1400px 이상의 해상도로 사이트를 탐색하는 사용자의 <10 %를 위해 디자인하고 구현하는 데 시간과 비용을 투자하는 것은 가치가 없습니다.

관련 : https://webmasters.stackexchange.com/questions/7932/what-is-the-standard-width-for-a-website-in-pixels

18
y3sh

어떤 사람들은 나처럼 탐색하기 때문에 모니터를 90 ° 돌리면됩니다.

enter image description here

다른 사람들은 태블릿, 휴대 전화 및 Win 3.11 (640 * 480 해상도 및 8 비트 색상)을 사용합니다. 가장 좋은 웹 사이트는 일반적으로 모든 사람이 읽을 수 있도록 디자인되었습니다 특정 장치에서 잘 보이지 않습니다.

6
dotancohen

내용이 자연스럽게 그렇게 넓다면 반드시 페이지를 더 넓게 만드십시오. 예를 들어, 큰 테이블은 좁은 컬럼에 좁히는 것보다 필요한만큼의 너비를 사용하면 훨씬 더 유용합니다. 과거에 Google 문서 스프레드 시트를 전체 화면으로 사용했는데 유용합니다.

그러나 다른 사람들이 말했듯이 텍스트를 읽기가 어려워지기 전에는 얼마나 오래 텍스트를 사용해야하는지에 대한 제한이 있습니다. 눈이 왼쪽으로 돌아 감에 따라 다음 줄의 시작 부분을 찾기가 어려워지기 때문에 텍스트 열의 너비 만 넓어야합니다.

넓은 웹 페이지가 없다는 또 다른 주장은 하나의 웹 사이트를 더 많이 볼 수 있도록 거대한 모니터를 구입하지 않았다는 것입니다. 화면이 커질수록 사람들이 창을 최대화 할 가능성이 낮아 지므로 브라우저는 그다지 넓지 않습니다.

나는 여러 개의 창, 브라우저, 편집기 등을 나란히 가질 수 있도록 거대한 모니터 (실제로 두 개의 거대한 모니터를 나란히 놓고 내 컴퓨터가 더 많이 사용한다면 더 많이 가질 것입니다)를 구입했습니다. 그렇게하면 앱간에 끊임없이 전환 할 필요가 없으며 한 눈에서 다른 눈으로 볼 수 있으므로 훨씬 효율적입니다. 이는 사람들이 동시에 다른 일을하는 작업 환경에서 자주 사용되는 stackexchange와 같은 사이트에서 가장 그렇습니다. 엔터테인먼트 사이트에는 거의 덜 중요합니다.

따라서 유용성에 대한 질문과 마찬가지로 사용자가 작업중인 컨텍스트에 대해 생각해보십시오. 사이트가보고있는 유일한 사이트입니까, 아니면 사이트의 일부입니까? 정말로 확신 할 수 있습니까? 예를 들어 그 정보를 기록 했습니까?

그것이 그들이하는 유일한 일이라 할지라도, 실제로 어떤 목적을 달성하지 않으면 화면에 물건을 놓을 아무런 요점이 없습니다. 그렇지 않으면 그들은 단지 당신이 실제로보고 싶어하는 것 (또는 실제로 그들이보고 싶어하는 것)을 방해하는 소음 일뿐입니다. 따라서 실제로 유용하다면 계속 진행하십시오. 그러나 그것을 위해 공간을 채우지 마십시오.

4
Peter Bagnall

부트 스트랩을 사용하여 해당 디자인을 쉽게 찾고 변경할 수 있습니다. 예는 다음과 같습니다. http://getbootstrap.com/css/#grid-example-fluid

UI에 대한 간단한 대답은 단락 너비가 눈이 왼쪽에서 오른쪽으로 만들 수있는 비 강제 이동량과 비슷하며 종이와 비교할 수 있다는 것입니다.

일반적으로 단락의 읽을 수있는 영역은 평균 크기의 손보다 넓지 않아야합니다.

3
user96861

나는이 질문과 주제에 대한 관심을 보게되어 정말 놀랐습니다. 이것은 "빈 공간이 낭비됩니까?"라는 질문에 대한 오래된 논쟁의 일부인 것 같습니다.

나는 이것이 신화라고 생각하며 공백이 성공적인 디자인의 열쇠라는 아이디어를지지하는 많은 주장이있다.

주요 내용 블록의 너비를 제한하고 레이아웃 공백 가장 중요한 인수는 디자인을보다 유용하게 만들고 사용자가 focus 가장 중요한 요소. 나는 경험을 통해 당신에게 필요한 정보를 결코 찾을 수 없을 것이라는 느낌을 가진 페이지에 많은 정보가 담긴 웹 사이트를 남겨 둡니다. 화면 전체에서 정보를 보는 것이 힘들고 왼쪽과 오른쪽에 텍스트가있는 가운데 열에 초점을 맞출 수있는 방법을 이해하지 못합니다.

나는 이것이 약간 주관적이라는 것을 알고 있지만 페이지에 정보가 많은 페이지에서 개발자가 "더 많은"버튼을 추가하거나 중요한 것을 합성하기 위해 더 많은 시간을 보내고 싶지 않다는 느낌이 들었습니다. 형벌처럼 느껴지고 값이 싸다.

공백은 다음에 도움이됩니다.

  • 가장 중요한 내용에 집중하십시오.
  • 독해력 향상;
  • 미니멀리즘과 우아함의 모양과 느낌을 만듭니다.

이 기사에서 White Space가 UX 디자인에 중요한 이유 , 흥미로운 의견을 찾았습니다.

공백은 이해력을 최대 20 %까지 증가시키는 것으로 입증되었습니다. (...)

공백은 멘탈 맵을 만드는 데 도움이됩니다. (...)

공백의 힘은 인간의 관심과 기억의 한계에서 비롯됩니다

업데이트 : 더 구체적으로 말하면 왼쪽과 오른쪽에 여백을 두는 대안은 더 많은 열을 가지거나 너비가 더 큰 기본 상자를 갖는 것입니다.

첫 번째 옵션의 문제점은 중요한 정보의 우선 순위를 정하기가 어렵고 두 번째 옵션의 경우 너비가 큰 텍스트를 읽기가 어렵다는 것입니다.

열 너비를 제한하는 좋은 주장은 here 이며이 참조는 언급하는 것이 중요합니다.

내용에 이상적인 줄 길이가 있습니까?

“웹 스타일 가이드 – 웹 사이트 생성을위한 기본 디자인 원칙”에서 인용 한 내용.

텍스트 레이아웃의 이상적인 선 길이는 육안의 생리학을 기반으로합니다.

정상적인 판독 거리에서 시야의 원호는 잘 설계된 텍스트 열의 너비 또는 한 줄에 약 12 ​​단어 정도입니다. 연구에 따르면 선 길이가 이상적인 너비를 초과하기 시작하면 판독 속도가 느려지고 머무름 속도가 저하되는 것으로 나타났습니다. 판독기는 한 줄의 끝에서 다음 줄의 시작까지 눈과 목 근육을 사용해야하기 때문입니다. 눈이 페이지에서 먼 거리를 가로 질러 가야하는 경우 독자는 쉽게 길을 잃고 다음 줄의 시작 부분을 찾아야합니다. 정량적 연구에 따르면 적당한 줄 길이는 텍스트의 가독성을 크게 향상시킵니다.

웹 스타일 가이드 – 웹 사이트 제작을위한 기본 디자인 원칙 Patrick J. Lynch 및 Sarah Horton 2nd edition, 97 페이지.

2
Madalina Taina

나는 시야가 중요한 역할을한다고 말합니다. 한 장의 종이를 쉽게 읽을 수 있으며 웹 사이트의 너비는 거의 같은 크기입니다. 이렇게하면 페이지를 읽거나 파싱하는 동안 머리를 가로 방향으로 많이 움직일 필요가 없습니다.

또한 공백을 줄이려고하더라도 어떻게 하시겠습니까? 반드시 쉬운 것은 아닙니다. 대부분의 질문은 이미 매우 짧습니다. 서로 옆에 2 페이지? 그것은 일반적으로 스크롤이나 스크롤과 어떻게 작동합니까?

2
HopefullyHelpful

위의 모든 답변을 읽었지만 발생할 수있는 반응 문제에 대한 언급은 어디에도 없었습니다.

여전히 '모바일 우선'디자인을 얻지는 못하지만 웹 응용 프로그램을 반응 형으로 디자인하려면 320px에서 ..까지 같은 내용이 멋지게 표시되어야합니다. 주로 대시 보드를 사용하고 있으므로 많은 공간이 필요하지만 대부분의 경우 여전히 모든 해상도 계층에서 반응 적으로보기 좋도록 콘텐츠를 너무 늘릴 수는 없습니다.

컨테이너 너비가 길수록 컨텐츠는 더 작은 해상도 계층으로 쌓이고 해당 해상도에서 컨텐츠 블록의 높이가 더 커집니다. 예를 들어 1920px 너비 컨테이너의 한 줄의 텍스트는 휴대 전화 화면에서 높이가 140px (소형 휴대 전화 화면 높이의 30 %이며 브라우저 UI 제외)입니다. 현재 21 : 9 3440x1440px 화면에 있습니다. 화면에서 좌우로 뻗어있는 항목이있는 이미징. 때때로 데스크탑을 좌우로 보려면 머리를 돌려야합니다! :디

예를 들면 다음과 같습니다. https://jsfiddle.net/cjj1Ln36/1/

경험상 1400px 이상은 제목, 텍스트 및 차트의 조합과 같이 풍부한 컨텐츠에 특히 과잉입니다. 일반적으로 고해상도에서 논리적으로 수행하는 것은 열의 내용을 나누는 것이지만 해상도와 경험에 따라 이러한 열은 해상도에 따라 너무 불분명하거나 너무 밀도가 높습니다. 또한 두 개의 코드 블록에 동일한 내용이 포함될 가능성은 거의 없습니다. 동적 웹 사이트에서는 예측할 수 없으므로 열의 내용이 촘촘하고 다른 내용이 드물게 나타날 수 있습니다.

사진이 풍부한 웹 사이트의 경우 상황이 더욱 악화됩니다.

a) 사진의 전체 컨테이너 너비가 1400px이지만 4 : 3과 같은 일반적인 비율을 유지해야하는 경우, 화면의 모든 높이를 차지할 가능성이 높으며 대부분 초과 할 가능성이 높습니다.

https://jsfiddle.net/mg965au8/1/

b) 사진이 텍스트 측면에 사용 된 경우 1400px의 해상도에서 사진이 텍스트 위에있는 것이 적합한 해상도 (예 :> 768px)로 바뀌면 내용이 너무 희미하게 시작되고 축소하는 동안 이미지 높이를 초과 할 수 있습니다. 문제를 설명하기 위해 바이올린을 만들었습니다. 저해상도에서 최대 1400px (컨테이너없이 상상해보십시오!)까지 확장 해보십시오. 모든 브라우저 너비에 적합합니까? 아마 아닙니다.

https://jsfiddle.net/2xnt3mk2/

또한, 위의 다른 모든 것-너무 압도적 인 것 등

1
scooterlord

특히 텍스트가 많은 웹 사이트에서 좁은 텍스트 열은 전체 텍스트 벽보다 읽기가 더 즐겁습니다. 또한 텍스트가 소설이 아닌 경우 텍스트 줄의 절반 이상이 전체 너비에 도달하지 않으므로 불쾌하고 고르지 않은 "텍스트 얼룩"이 생성됩니다.

(물리적) 소설과 사전에서 텍스트가 어떻게 표시되는지 생각해보십시오. 사전은 일반적으로 두 개의 열로 표시됩니다. 독자는 중요하기 때문에 읽고있는 내용에 더 집중할 수 있습니다. 독자가 이미 이야기에 관심이 있다고 가정하기 때문에 모든 단어를 소설에 유지하는 것은 그리 중요하지 않으며 어렵지 않습니다.

요컨대, 한 번에 정보가 거의 제공되지 않으면 인간의 관심 범위가 열악하고 집중력이 향상됩니다.

0
ecc

또한 컨텐츠 유형, 크기 및 화면에서 사용자와의 거리에 따라 다릅니다.

비디오, 큰 사진 또는 프리젠 테이션이있는 대시 보드의 경우 전체 화면이 가장 좋습니다.

텍스트 내용과 중소형 사진의 경우 편안한 인식 필드를 고려하는 것이 중요합니다.

앉은 사용자와 50 ~ 65cm (20 ~ 26 인치) 거리의 일반 PC 나 노트북에서 눈을 왼쪽에서 오른쪽으로 움직일 필요가없는 편안한 인식 필드는 어느 정도입니까?

눈은 너무 귀중하고 빨리 피곤해 지므로 사람들은 2D 모션에서 1D 모션까지 광범위한 자유도를 고정하고 페이지를 세로로 스크롤하여 눈을 고정시킵니다.

눈을 좌우로 움직여 현재/다음 컨텐츠의 수직 위치를 수정하여 페이지를 세로로 스크롤하는 것이 더 쉽습니다. 일부 콘텐츠가 기본 인식 필드 외부에 배치되면 일부 콘텐츠가 손실 될 수 있습니다.

결과적으로 페이지의 전체적인 시각적 느낌이 나빠질 수 있습니다.

0
Doc