[영어원서읽기] 사용자를 생각하게 하지마! - 03

Don't Make Me Think!

 

Chapter 3. Billboard Design 101 DESIGNING FOR SCANNING, NOT READING

 

If you / Don’t know / Whose signs / These are You can’t have / Driven very far / Burma-Shave!
—SEQUENCE OF ROADSIDE BILLBOARDS PROMOTING SHAVING CREAM, CIRCA 1935

 

사용자들이 빠르게 지나가는 현실을 마주하고 있을 때, 그들이 알아야 할 것과 당신이 그들에게 알리고 싶은 것을 최대한 보고 이해할 수 있도록 몇 가지 중요한 조치를 취할 수 있습니다:

 

관례를 활용하세요: 사용자들이 이미 익숙해진 디자인 패턴과 UI 요소를 사용하여 즉각적인 이해를 돕습니다.

 

효과적인 시각적 계층 구조를 만드세요: 중요한 정보가 눈에 띄도록 정보의 중요도에 따라 시각적 무게를 다르게 배치합니다.

 

페이지를 명확하게 정의된 영역으로 나누세요: 사용자가 페이지를 더 쉽게 스캔하고 원하는 정보를 찾을 수 있도록 구조화합니다.

 

클릭 가능한 것이 무엇인지 명확하게 하세요: 사용자가 상호작용 가능한 요소를 쉽게 식별할 수 있도록 디자인합니다.

 

주의 산만 요소를 제거하세요: 사용자의 주의를 분산시키는 요소를 최소화하여 중요한 내용에 집중할 수 있도록 합니다.

 

스캐닝을 지원하는 형식으로 콘텐츠를 구성하세요: 눈에 잘 띄는 제목, 하위 제목, 불릿 목록 등을 사용하여 사용자가 콘텐츠를 빠르게 스캔하고 필요한 정보를 찾을 수 있도록 합니다.

 

Conventions are your friends

 

Adhering to established conventions is one of the most effective ways to make content easily understandable in a hurry. Consistent design patterns, such as stop signs and car controls, provide intuitive user experiences. Similarly, web pages have evolved with conventions like the placement of logos, the arrangement of primary navigation, and the use of shopping cart metaphors, helping users quickly find and understand information on new sites.

 

However, designers often hesitate to leverage these conventions, preferring to innovate instead, driven by the pressure to create something new and different. This tendency can lead to unnecessary reinvention, consuming time that might not result in meaningful innovation.

 

The advice here is straightforward: innovate when you have a better idea but rely on proven conventions when you don't. This isn't to discourage creativity; innovative and original web design is highly valued. An example of successful innovation is Harlem.org, which uses a famous jazz photograph for site navigation, offering an engaging user experience while also providing more conventional navigation options.

 

The key takeaway is to balance creativity and innovation with usability. Consistency within a site or app is generally beneficial, but clarity should always take precedence. If making something slightly inconsistent enhances clarity, then prioritize clarity. Remember, "Clarity trumps consistency."

 

 

디자인에서 관례를 따르는 것은 사용자가 서둘러 내용을 파악하는 데 도움이 됩니다. 정지 표지판, 자동차 제어 장치와 같은 일관된 디자인 패턴은 사용자에게 직관적인 사용 경험을 제공합니다. 웹 페이지에서도 로고 위치, 주요 내비게이션 배열, 쇼핑 카트 메타포어 등 사용자의 기대에 부합하는 다양한 관례가 발전해 왔습니다. 이러한 관례는 사용자가 새로운 사이트에서도 빠르게 정보를 찾고 이해할 수 있도록 돕습니다.

 

그러나 디자이너들은 종종 이러한 관례를 활용하는 것을 꺼려합니다. 새롭고 다른 것을 만들어야 한다는 압박감 때문에 바퀴를 다시 발명하려는 유혹에 빠지곤 합니다. 하지만 대부분의 경우, 이는 시간 낭비에 불과하며, 실제로 혁신적인 결과를 가져오기보다는 기존에 잘 작동하는 시스템을 불필요하게 변경하는 결과를 초래할 수 있습니다.

 

혁신을 추구하는 것은 좋지만, 더 나은 아이디어가 없을 때는 검증된 관례를 활용하는 것이 좋습니다. 창의성을 억제하려는 것이 아니며, 실제로 혁신적이고 독창적인 웹 디자인을 사랑합니다. 예를 들어, Harlem.org는 유명한 재즈 뮤지션 사진을 활용해 사이트 내비게이션을 구현한 창의적인 예입니다.

 

중요한 것은 창의성과 혁신을 추구하면서도 사용성을 확보하는 것입니다. 일관성을 중시하는 것도 중요하지만, 명확성이 더 중요할 때는 일관성을 다소 희생하는 것이 바람직합니다. 결국, "명확성이 일관성보다 우선한다"는 원칙을 기억하는 것이 중요합니다.

 

Create effective visual hierarchies

 

Creating a clear visual hierarchy on web pages is essential for making content easily understandable at a glance. This involves accurately reflecting the relationships between items on a page, indicating which elements are most important, which are similar, and which belong to a broader category. Pages that effectively implement a visual hierarchy share three characteristics:

 

1. Prominence Equals Importance: The more important an item is, the more visually prominent it should be. This can be achieved through larger size, bolder text, distinctive colors, more white space, or placement near the top of the page.
2. Logical and Visual Relationship: Items that are related logically should also be related visually. Similar items can be grouped under a common heading, presented in the same style, or located within a defined area.
3. Visual Nesting: This technique shows the hierarchical relationship between items, such as placing a section name ("Computer Books") above the titles of individual books to indicate that the books are part of that section.

 

Visual hierarchies are not a new concept; newspapers use them to convey the importance and relationships of stories through the layout, size, and grouping of headlines and articles. The guiding principle here is that clarity should always take precedence over consistency. If making a design slightly inconsistent leads to a significant increase in clarity, it's better to opt for clarity.

 

웹 페이지에서 콘텐츠를 한눈에 쉽게 파악할 수 있도록 만드는 또 다른 중요한 방법은 페이지 상의 모든 시각적 단서들이 페이지 내의 요소들 사이의 관계를 정확하게 반영하도록 하는 것입니다. 즉, 어떤 요소가 가장 중요한지, 어떤 요소들이 서로 비슷한지, 그리고 어떤 요소들이 다른 요소들의 일부인지를 분명하게 보여주어야 합니다. 다시 말해, 각 페이지는 명확한 시각적 계층 구조를 가져야 합니다.

 

명확한 시각적 계층 구조를 가진 페이지는 세 가지 특성을 가집니다:

 

1. 중요도에 따른 돌출성: 무언가가 더 중요할수록 더 시각적으로 돌출되어야 합니다. 이는 더 큰 크기, 더 굵은 글씨, 독특한 색상, 더 많은 여백, 또는 페이지 상단에 가깝게 위치하는 것을 통해 달성할 수 있습니다.
2. 논리적 관계와 시각적 관계: 논리적으로 관련된 항목들은 시각적으로도 관련되어야 합니다. 비슷한 항목들은 공통된 제목 아래 그룹화되거나, 같은 시각적 스타일로 표시되거나, 명확하게 정의된 영역 내에 위치할 수 있습니다.
3. 시각적 중첩: 이 기법은 항목들 사이의 계층적 관계를 보여줍니다. 예를 들어, "컴퓨터 서적"과 같은 사이트 섹션 이름이 개별 서적 제목 위에 나타나서 해당 서적들이 그 섹션의 일부임을 나타냅니다.

 

시각적 계층 구조는 새로운 개념이 아니며, 예를 들어 모든 신문 페이지는 중요도, 그룹화, 그리고 중첩을 통해 우리가 단어 하나 읽기 전에 페이지의 내용에 대한 유용한 정보를 제공합니다. 여기서 기억해야 할 규칙은 "명확성이 일관성보다 우선한다"는 것입니다. 디자인을 약간 일관성 없게 만들더라도 명확성을 크게 향상시킬 수 있다면, 명확성을 선택하는 것이 좋습니다.

 

Create effective visual hierarchies

 

Another key strategy for making web pages easily understandable at a glance is to ensure that all visual cues on the page accurately reflect the relationships among the elements: which are most important, which are similar, and which are part of other elements. In essence, each page should exhibit a clear visual hierarchy. Pages with a clear visual hierarchy share three traits:

 

1. Importance Equals Prominence: The more important an element is, the more visually prominent it should be. This can be achieved through a combination of larger size, bolder font, distinctive colors, more white space, or placement near the top of the page.
2. Logical Relationships Mirror Visual Relationships: Elements that are logically related should also be visually related. For example, showing similarities by grouping items under a common heading, using a consistent visual style, or placing them within a defined area.
3. Visual Nesting to Indicate Hierarchy: Visual cues should indicate which elements are part of a larger group. For instance, a site section title like "Computer Books" would appear above the titles of individual books, showing that the books belong to that section.

 

Visual hierarchies are not a novel concept and have long been utilized in mediums like newspapers, where prominence, grouping, and nesting help convey important information about the content before a single word is read.

 

 

We process visual hierarchies daily, often without conscious recognition, except when the visual cues are missing or confusing, forcing us to think. A well-structured visual hierarchy pre-processes the page for us, organizing and prioritizing content in a manner that's almost instantaneously understandable.

 

However, when a page lacks a clear visual hierarchy, making everything appear equally important, for example, we resort to a slower process of scanning for relevant words and phrases to form our understanding of what's important and how things are organized, requiring much more effort.

 

Parsing a page with even a slightly flawed visual hierarchy is akin to trying to make sense of a carelessly constructed sentence. An unclear visual hierarchy can mislead users into thinking all major sections of a site are part of a subset, like "Computer Books."

 

Placing headings correctly clarifies relationships, but failing to do so momentarily disorients users and forces them to think unnecessarily.

 

웹 페이지를 이해하기 쉽게 만드는 또 다른 중요한 방법은 페이지 상의 모든 시각적 단서가 페이지 내 요소들 사이의 관계를 정확하게 반영하도록 하는 것입니다: 어떤 요소가 가장 중요한지, 어떤 요소들이 서로 비슷한지, 그리고 어떤 요소들이 다른 요소들의 일부인지를 명확하게 해야 합니다. 즉, 각 페이지는 명확한 시각적 계층 구조를 가져야 합니다. 이러한 페이지는 세 가지 특성을 가집니다:

 

1. 중요한 것은 더 돋보입니다: 가장 중요한 요소들은 크기가 더 크거나, 글씨가 굵거나, 뚜렷한 색상을 사용하거나, 더 많은 여백으로 구분되거나, 페이지 상단에 더 가깝습니다.
2. 논리적으로 관련된 것들은 시각적으로 관련됩니다: 예를 들어, 비슷한 것들을 한 머리글 아래에 그룹화하거나 같은 시각적 스타일로 표시하거나 명확하게 정의된 영역에 배치함으로써 관련성을 보여줄 수 있습니다.
3. 시각적으로 "중첩"됩니다: 예를 들어, "컴퓨터 서적"과 같은 사이트 섹션 이름은 개별 서적 제목 위에 나타나서 해당 서적들이 섹션의 일부임을 반영합니다.

 

시각적 계층 구조는 신문 페이지에서도 사용되며, 우리가 단어를 읽기 전에 페이지 내용에 대한 유용한 정보를 제공합니다. 우리는 매일 시각적 계층 구조를 해석하지만, 그 과정이 매우 빠르게 일어나서 시각적 단서가 부족하거나 혼란스러울 때만 우리가 그것을 인식하게 됩니다.

 

좋은 시각적 계층 구조는 페이지를 사전 처리하여 내용을 우선순위에 따라 구성하고 정리함으로써 우리가 거의 즉시 이해할 수 있도록 도와줍니다. 그러나 페이지에 명확한 시각적 계층 구조가 없으면 (예를 들어, 모든 것이 동등하게 중요해 보인다면), 우리는 페이지를 스캔하고 중요한 단어나 구문을 찾아내어 질서를 파악하는 훨씬 느린 과정에 의존해야 합니다. 이는 훨씬 더 많은 노력이 필요합니다.

 

Break up pages into clearly defined areas

 

Ideally, a well-designed web page should allow users to quickly grasp its contents in a manner similar to the old TV game show "$25,000 Pyramid." Users should be able to glance around the page and identify different areas, saying things like “Things I can do on this site!”, “Links to today’s top stories!”, “Products this company sells!”, “Things they’re eager to sell me!”, “Navigation to get to the rest of the site!”

 

Dividing the page into clearly defined areas is crucial because it enables users to quickly determine which parts of the page to focus on and which parts they can safely ignore. Eye-tracking studies on web page scanning have shown that users make quick decisions in their initial glances about which parts of the page are likely to contain useful information, and then rarely revisit the other parts—as if they were invisible. Banner blindness—the phenomenon where users completely ignore areas they expect to contain ads—is an extreme example of this behavior.

 

웹 페이지가 잘 디자인되어 있다면, 사용자는 마치 옛 TV 게임쇼 "$25,000 Pyramid"와 비슷한 방식으로 페이지를 빠르게 파악할 수 있어야 합니다. 사용자는 페이지를 훑어보며 다양한 영역을 가리키며 "이 사이트에서 할 수 있는 것들", "오늘의 주요 뉴스 링크", "이 회사가 판매하는 제품들", "그들이 열심히 판매하고자 하는 것들", "사이트의 나머지 부분으로 이동하기 위한 네비게이션" 등을 식별할 수 있어야 합니다.

 

페이지를 명확하게 정의된 영역으로 나누는 것은 사용자가 페이지의 어느 부분에 집중할지, 어느 부분을 안전하게 무시할지를 빠르게 결정할 수 있게 합니다. 웹 페이지 스캐닝에 대한 눈동자 추적 연구는 사용자가 초기에 페이지의 어느 부분이 유용한 정보를 가질 가능성이 있는지 매우 빠르게 결정하고, 그 후에는 다른 부분을 거의 보지 않는다는 것을 제안합니다—마치 그 부분이 존재하지 않는 것처럼요. (배너 실명증—사용자가 광고가 포함될 것으로 생각되는 영역을 완전히 무시하는 능력—은 이의 극단적인 예입니다.)

 

Make it obvious what’s clickable

 

Clarifying which elements on a web page are clickable is vital for effective web navigation, as users frequently look for the next actionable item. Visual cues such as specific shapes (like buttons or tabs), locations (such as within a menu bar), and formatting details (including color and underlining) help signify clickability.

 

This principle is crucial across all digital interfaces, including touch screens, where traditional cursor changes are not applicable. Drawing from Don Norman's insights on everyday usability, providing clear indications of interactivity is as important online as it is in physical interactions with objects.

 

As mobile design continues to evolve, maintaining clear distinctions between clickable and non-clickable elements, through consistent use of visual markers, remains a key challenge and best practice in user interface design.

 

웹 페이지에서 어떤 요소들이 클릭 가능한지 명확히 하는 것은 효과적인 웹 탐색을 위해 매우 중요합니다. 사용자들은 자주 다음으로 실행할 수 있는 항목을 찾기 때문입니다. 버튼이나 탭 같은 특정 모양, 메뉴 바 내부와 같은 위치, 색상과 밑줄을 포함한 포맷팅 세부사항과 같은 시각적 단서들이 클릭 가능성을 나타내는 데 도움을 줍니다.

 

이 원칙은 전통적인 커서 변경이 적용되지 않는 터치 스크린을 포함한 모든 디지털 인터페이스에서 중요합니다. 돈 노먼이 일상 사용성에 대해 강조한 것처럼, 물리적 상호작용에 있는 객체들처럼 온라인에서도 상호작용 가능한 요소들을 명확히 표시하는 것이 중요합니다.

 

모바일 디자인이 지속적으로 발전함에 따라, 클릭 가능한 요소와 클릭할 수 없는 요소들(예: 헤딩) 사이에 명확한 구분을 유지하는 것은 사용자 인터페이스 디자인에서의 주요 도전이자 모범 사례로 남아 있습니다.

 

Keep the noise down to a dull roar

 

One major obstacle to creating pages that are easy to grasp is visual noise. Different users have varying levels of tolerance for complexity and distractions; while some can handle noisy pages, many find them irritating. In extreme cases, users have resorted to covering distracting animations on their screens with Post-it notes to focus on reading.

 

Visual noise can be categorized into three types:

 

1. Shouting: This occurs when every element on a page demands attention simultaneously, resulting in an overwhelming experience. This often includes excessive use of invitations to buy, exclamation points, various typefaces, bright colors, automated slideshows, animations, pop-ups, and new ad formats. The underlying issue is usually a failure to prioritize elements and establish a clear visual hierarchy that directs users to the most important information first.
2. Disorganization: Pages that appear chaotic, resembling a ransacked room, indicate a lack of understanding of grid systems to organize elements cohesively on a page.
3. Clutter: Pages, especially homepages, that are overloaded with too much content can make it difficult for users to find and focus on what is truly relevant to them. This results in a low signal-to-noise ratio, where valuable information is obscured by the abundance of irrelevant content.

 

When refining web pages, it's useful to adopt the approach that everything is considered visual noise until proven otherwise ("presumed guilty until proven innocent") and eliminate anything that doesn't contribute meaningfully. In an environment where time and attention are limited, anything that isn't part of the solution should be removed to enhance clarity and focus.

 

웹 페이지를 쉽게 이해할 수 있는 데에 가장 큰 방해가 되는 요소 중 하나는 시각적 소음입니다. 사용자마다 복잡성과 주의 산만에 대한 허용치가 다르며, 일부 사용자는 시끄러운 페이지를 문제 삼지 않지만 많은 이들이 그것을 몹시 성가신 것으로 여깁니다. 사용자 중 일부는 읽기 시도 중 방해가 되는 애니메이션을 가리기 위해 화면에 포스트잇을 붙이기도 합니다.

 

시각적 소음에는 세 가지 유형이 있습니다:

• 외침: 페이지의 모든 요소가 주의를 요구할 때, 그 효과는 압도적일 수 있습니다. 구매 초대, 느낌표, 다양한 글꼴, 밝은 색상, 자동 슬라이드쇼, 애니메이션, 팝업 등이 포함됩니다. 모든 것이 중요할 수는 없으며, 외침은 보통 가장 중요한 요소를 선택하고 사용자를 그것에 먼저 안내하는 시각적 계층 구조를 만들기 위한 어려운 결정을 내리지 못한 결과입니다.
• 무질서: 일부 페이지는 마치 난장판처럼 보이며, 이는 디자이너가 페이지 상의 요소를 정렬하는 데 그리드 사용의 중요성을 이해하지 못했음을 나타냅니다.
• 혼잡: 특히 홈 페이지에서 너무 많은 것이 들어 있는 페이지를 모두 본 적이 있습니다. 이메일 받은 편지함이 뉴스레터 등으로 넘쳐나는 것과 같은 효과로, 실제로 관심 있는 메시지를 찾고 집중하기 어렵게 합니다. 이로 인해 유용한 정보가 소음에 가려지는 낮은 신호 대 소음 비율이 발생합니다.

 

웹 페이지를 편집할 때, 모든 것을 시각적 소음으로 가정하는 "유죄 추정" 접근 방식을 사용하고 실제 기여를 하지 않는 모든 것을 제거하는 것이 좋습니다. 제한된 시간과 주의를 감안할 때, 해결책의 일부가 아닌 모든 것은 제거되어야 합니다.

 

Format text to support scanning

 

To make your web pages more scan-friendly, it's crucial to format the text in ways that aid users in quickly finding what they're looking for. Here are key strategies for enhancing text scan-ability:

 

1. Utilize Headings: Frequent, well-crafted headings serve as an informal outline, guiding users through the content. They should clearly indicate what each section is about or pique interest, helping readers decide which parts to engage with. Ensure more thought and time are put into creating these headings than you might initially think necessary.
2. Heading Styles: If using multiple levels of headings, ensure there's a clear visual distinction between them, such as different sizes or more space above higher levels. Additionally, position headings closer to the content they introduce rather than the preceding section to avoid confusion.
3. Short Paragraphs: Avoid long paragraphs, which can create a daunting "wall of words." Breaking text into shorter paragraphs or even single-sentence paragraphs makes content easier to scan and less overwhelming.
4. Bulleted Lists: Convert any series of items in your text into bulleted lists wherever possible. This format is easier to scan and can efficiently break down information into manageable pieces. Ensure there's a bit of additional space between list items for better readability.
5. Highlight Key Terms: Bold important words and phrases to make them stand out during a scan. This helps users quickly locate key information. However, use this technique sparingly to maintain its effectiveness.

 

For further insight into creating scan-friendly content and effective digital writing, consider exploring Ginny Redish’s book "Letting Go of the Words," a valuable resource for anyone involved in digital content creation.

 

웹 페이지를 더 스캔하기 쉽게 만들기 위해, 텍스트를 사용자가 찾고 있는 것을 빠르게 발견할 수 있도록 돕는 방식으로 포맷하는 것이 중요합니다. 텍스트의 스캔 가능성을 향상시키는 주요 전략은 다음과 같습니다:

 

1. 제목 사용하기: 자주 사용되고 잘 작성된 제목은 페이지의 비공식적 개요로 작용하여 사용자를 콘텐츠를 통해 안내합니다. 각 섹션이 무엇에 대한 것인지 명확하게 하거나 관심을 유발해야 하며, 독자가 어떤 부분을 읽거나 스캔하거나 건너뛸지 결정하는 데 도움을 줍니다. 이러한 제목에는 처음 생각하는 것보다 더 많은 시간과 생각을 투자해야 합니다.
2. 제목 스타일: 여러 레벨의 제목을 사용하는 경우, 각 레벨 사이에 분명한 시각적 차이를 두어야 합니다. 예를 들어, 더 높은 레벨은 더 크거나 위에 더 많은 공간을 두는 것으로 구분할 수 있습니다. 또한, 제목이 소개하는 내용에 더 가깝게 배치하여 이전 섹션보다는 다음 섹션과의 연관성을 명확히 해야 합니다.
3. 짧은 문단: 긴 문단은 사용자에게 단어의 "벽"처럼 보여질 수 있으며, 스캔하기 어렵게 만듭니다. 텍스트를 더 짧은 문단으로 나누거나 심지어 단일 문장 문단도 괜찮습니다.
4. 글머리 기호 목록 사용하기: 가능한 모든 항목 목록을 글머리 기호 목록으로 변환하세요. 이 형식은 정보를 관리하기 쉬운 조각으로 효율적으로 나누어 스캔하기 쉽게 만듭니다. 목록 항목 사이에 약간의 추가 공간을 두어 가독성을 높이세요.
5. 핵심 용어 강조하기: 중요한 단어와 구문을 굵게 하여 스캔하는 동안 눈에 띄게 하세요. 이는 사용자가 핵심 정보를 빠르게 찾을 수 있도록 돕습니다. 그러나 이 기술을 너무 많이 사용하지 않도록 주의하여 효과를 유지하세요.

디지털 콘텐츠 생성에 관여하는 모든 사람에게 유용한 자료인 Ginny Redish의 "Letting Go of the Words" 책을 탐색하는 것도 고려해보세요.