▲

GN⁺: UI 밀도(Density)의 의미와 디자인 방법

 (matthewstrom.com)
13P by neo 4달전 | favorite | 댓글 1개

인터페이스 밀도가 낮아지고 있음

  • 현재의 웹사이트와 애플리케이션을 2000년대와 비교하면 소프트웨어가 퍼져 있는 경향을 무시하기 어려움.
  • UI 밀도란 무엇인가?
    • UI 밀도는 특정 순간의 인터페이스 모양이 아님
    • 인터페이스가 여러 순간에 걸쳐 제공하는 정보의 양과 관련이 있음
    • 디자인 결정이 이러한 순간들을 어떻게 연결하는지, 소프트웨어가 제공하는 가치와 어떻게 연결되는지에 대한 것임

시각적 밀도 (Visual density)

  • 밀도는 눈으로 먼저 생각하게 됨
  • 시각적 밀도는 주어진 공간에서 얼마나 많은 것을 볼 수 있는지를 의미함
  • 시각적으로 밀도가 높은 소프트웨어 인터페이스는 화면에 많은 요소를 표시함
  • 시각적으로 밀도가 낮은 인터페이스는 화면에 적은 요소를 표시함
  • 예시: Bloomberg 터미널
    • Bloomberg 터미널은 시각적 밀도의 대표적인 예임
    • 단일 화면에 주요 시장 지수의 스파크라인, 세부 거래량 분포, 수십 개의 행과 열이 있는 테이블, 최신 뉴스 헤드라인, 키보드 단축키와 빠른 작업 UI 표지판 등이 표시됨
  • 예시: Craigslist와 McMaster-Carr
    • Craigslist는 수백 개의 단순한 링크와 검색 및 필터 인터페이스로 시각적으로 밀도가 높음
    • McMaster-Carr 웹사이트도 비슷한 디자인 요소를 공유하며, 작은 공간에 많은 제품 변형의 세부 정보를 나열함
  • 밀도 인식의 직관적 판단
    • 이러한 웹사이트의 밀도에 대한 의견은 단 몇 초 만에 형성됨
    • 이러한 판단은 잠재의식에서 빠르고 직관적으로 이루어짐
    • 그러나 이런 빠른 판단은 편향적이고 신뢰할 수 없을 수 있음
  • 시각적 밀도의 예시 이미지
    • 두 개의 직사각형 예시:
      • 왼쪽: 무작위로 배열된 많은 점들
      • 오른쪽: 동일한 수의 점들이 행과 열로 깔끔하게 배열됨
      • 대부분의 사람들은 오른쪽 이미지가 더 밀도가 높다고 느낌
    • 또 다른 예시 이미지:
      • 왼쪽: 행과 열로 깔끔하게 배열된 많은 점들
      • 오른쪽: 두 개의 그룹으로 나뉘어 깔끔하게 배열된 동일한 수의 점들
      • 같은 수의 점이라도, 그룹으로 나누면 밀도에 대한 우리의 인식이 달라짐
  • 시각적 밀도의 불확실성
    • 디자인에서는 완전히 객관적일 수 없음
    • 그러나 밀도에 대한 대화를 나누려면 일관성 있고 의미 있으며 유용한 정의를 목표로 해야 함

정보 밀도(Information density)

  • 에드워드 터프티(Edward Tufte)는 《The Visual Display of Quantitative Information》에서 차트와 그래프의 디자인을 다룸

    모든 그래픽의 잉크는 이유가 있어야 하며, 그 이유는 새로운 정보를 제공해야 함.

  • 데이터 잉크(Data-ink)
    • 데이터 잉크는 주어진 시각화에서 유용한 부분을 의미함.
    • 데이터가 아닌 시각적 요소는 제거해야 함.
    • 데이터 잉크는 차트가 차지하는 공간과는 다름. 정보 밀도에 관한 것임.
  • 정보 밀도 계산
    • 정보 밀도는 차트에 있는 데이터 잉크의 양을 차트를 인쇄하는 데 필요한 전체 잉크 양으로 나누어 계산할 수 있음.
    • 데이터 잉크의 정의는 주관적일 수 있지만, 중요한 점은 비율을 가능한 1에 가깝게 만드는 것임.
    • 비율을 높이는 방법:
      • 데이터 잉크 추가: 추가적인 유용한 데이터를 제공.
      • 비데이터 잉크 제거: 데이터를 전달하지 않는 그래픽 부분을 지움.
  • 예시
    • 초과 잉크가 많은 그래픽 예시와 적은 잉크로 많은 정보를 전달하는 개선된 예시.
    • 정보 밀도에는 상한선이 있으며, 너무 많은 잉크를 제거하거나 너무 많은 정보를 추가할 수 있음.
    • 청중도 중요함: 고급 사용자는 높은 밀도를, 초등학생은 낮은 밀도를 선호할 수 있음.
  • 정보 밀도와 시각적 밀도의 관계
    • 정보 밀도가 높을수록 시각적으로 밀도가 높아 보이는 경향이 있음.
    • 예: 1885년 E.J. Marey의 기차 시간표 시각화. 도착 및 출발 시간이 작고 밀도 높은 공간에 표시됨.
    • 터프티는 데이터 밀도와 데이터를 합리적으로 최대화할 것을 주장함.
  • Shrink Principle
    • 그래픽은 크게 축소될 수 있음.
    • 정보 밀도는 차트와 그래프에 유용함.
    • 인터페이스에도 적용할 수 있을까?
  • 인터페이스에서 정보 밀도 적용
    • 정보는 화면에 적용 가능함.
    • 인터페이스 각 부분이 최대한 많은 정보를 보여줘야 함.
    • 잉크를 픽셀로 생각하는 것은 유혹적이지만, 인터페이스에는 요소 간의 관계를 이해하도록 돕는 구분선, 구조적 요소, 표지판이 필요함.
    • Shrink Principle을 따라 모든 공백을 제거하려는 유혹이 있음.
    • 그러나 일부 공백은 시각적 요소만큼 중요한 의미가 있음. 그림자, 그라디언트, 색상 강조의 역할도 고려해야 함.
  • 정보 밀도는 유용한 개념이지만, 전체 그림의 일부에 불과함.
    • 인터페이스의 모든 디자인 결정을 더 객관적이고 정량적으로 이해할 방법을 모색해야 함.

디자인 밀도 (Design Density)

  • 디자인 결정의 관점에서 밀도를 정의하는 첫 번째 도전은 무엇이 결정인지 판별하는 것임.
  • 디자인 결정을 이해하기
    • UI, UX, 제품 디자인에서 우리는 정보를 전달하기 위해 의식적 또는 무의식적으로 많은 결정을 내림.
    • 왜 특정 선택이 의미를 전달하는지, 어떤 선택이 단순히 미학적인지, 어떤 선택이 실제로 중요한지 질문이 필요함.
  • 게슈탈트 원리
    • 20세기 독일 심리학자들이 연구한 인간이 형태와 패턴을 이해하는 방법.
    • 게슈탈트(Gestalt)라는 용어는 "형태"를 의미함.
    • 이 연구에서 몇 가지 기본적인 디자인 법칙을 발견함:
      • 근접성(Proximity): 가까이 있는 것들을 하나의 그룹으로 인식함.
      • 유사성(Similarity): 모양, 크기, 색상 등에서 유사한 객체들이 서로 관련되어 보임.
      • 폐쇄성(Closure): 디자인의 틈을 메워 전체 형태를 인식함.
      • 대칭성(Symmetry): 대칭적인 형태들을 중심점을 기준으로 그룹화함.
      • 공통 운명(Common Fate): 동일한 방식으로 움직이는 객체들을 함께 그룹화함.
      • 연속성(Continuity): 겹쳐져 있는 객체들을 별개로 인식함.
      • 과거 경험(Past Experience): 익숙한 형태와 패턴을 낯선 상황에서도 인식함.
      • 전경-배경 관계(Figure-Ground Relationship): 2D 이미지에서 전경과 배경 요소를 구분함.
  • 게슈탈트 원리가 UI 디자인에 미치는 영향
    • 유사성 원리 덕분에 동일한 크기, 글꼴, 색상의 텍스트는 같은 목적을 나타냄.
    • 근접성 원리는 차트가 헤드라인과 가까이 있을 때 헤드라인이 차트를 설명한다는 것을 나타냄.
    • 과거 경험과 전경-배경 원리 덕분에 사용자에게 토글 스위치가 어떻게 작동하는지 즉시 알 수 있음.
  • 디자인 밀도의 개념
    • 픽셀에 집중하는 대신, 게슈탈트 원리를 사용하여 의도적으로 의미를 전달하는 디자인 결정을 생각함.
    • 터프티의 데이터-잉크 비율이 차트에 필요한 잉크와 전체 잉크를 비교하는 것처럼, 디자인 밀도는 필요한 디자인 결정과 전체 결정의 비율을 비교함.
    • 주관적이지만, 사용자 인터페이스에서는 데이터나 잉크의 양을 세는 것보다 디자인 결정을 세는 것이 더 유용함.
  • 디자인 밀도의 한계
    • 사용자 인터페이스는 작업, 즐거움, 시간 낭비, 이해 생성, 개인적 연결 촉진 등을 위해 존재함.
    • 사용자가 여정을 통해 취하는 모든 행동을 포함해야 함.
    • 밀도는 구성 요소, 레이아웃, 화면을 넘어 공간과 시간에서 사용자가 취하는 모든 행동을 고려해야 함.

시간적 밀도

  • 주어진 시간 내에 사용자가 할 수 있는 작업의 양이 시간적 밀도를 결정함.
  • 로딩 시간은 시간적 밀도의 가장 큰 요인임. 인터페이스가 빠르게 반응하고 새로운 페이지나 화면을 로드할수록 UI가 더 밀도 높음.
  • Bloomberg 터미널은 데이터를 거의 즉각적으로 로드하여 시간적 밀도가 매우 높음.
  • 시간적 밀도를 높이는 방법
    • 로딩 시간을 최대한 줄임으로써 시간적 밀도를 높일 수 있음.
    • 그러나 모든 로딩 시간을 줄일 수는 없음. 예를 들어, 사용자의 인터넷 연결 속도나 CPU 속도를 변경할 수 없음.
    • 일부 작업(파일 업로드, 고객 지원 응답 대기, 결제 처리 등)은 복잡한 시스템과 예측할 수 없는 변수와 관련됨.
  • 시간 지각을 변화시키는 방법
    • 100밀리초 이내: 두 동작 사이의 시간이 100밀리초 이내이면 동시에 발생한 것처럼 느껴짐. 이 경우 애니메이션이 오히려 앱을 느리게 느끼게 할 수 있음.
    • 100밀리초에서 1초 사이: 두 동작 사이의 연결이 끊어지기 시작함. 애니메이션과 전환 효과가 이 지각적 간극을 메워줄 수 있음.
    • 1초에서 10초 사이: 애니메이션만으로는 부족함. 10초 이내에 사용자가 페이지를 떠날 가능성이 높아짐. 이 경우 불확정 로딩 표시기를 사용하여 시스템이 정상 작동 중임을 알려야 함.
    • 10초에서 1분 사이: 불확정 로딩 표시기는 10초 이상 지속되면 정적이라고 느껴지기 시작함. 이 경우 명확한 로딩 표시기(예: 진행 막대)를 사용하여 남은 시간을 명확하게 표시해야 함.
    • 1분 이상: 사용자가 페이지를 떠나거나 다른 작업을 할 수 있게 하여야 함. 1분 이상 아무 작업도 하지 않으면 좌절감을 줄 수 있음. 긴 프로세스는 오류 발생 가능성도 높음.
  • 시간과 공간의 밀도
    • UI의 밀도는 단지 수단에 불과함. UI의 가치는 그 외형이 아니라, 달성할 수 있는 결과에 있음.
    • 밀도는 최소한의 시간, 공간, 픽셀, 잉크로 최대한의 가치를 제공하는 것에 있음.

가치 밀도 (Density in Value)

  • 가치 밀도는 사용자가 얻는 결과의 가치와 관련됨.
  • 예: 긴 양식을 작은 조각으로 나누고 마법사형 인터페이스로 구성하는 것이 좋음. 부분적으로 채워진 양식은 가치가 없기 때문임.
  • 모든 질문을 한 페이지에 넣는 것이 시각적으로 밀도가 높아 보일 수 있지만, 작성하는 데 시간이 오래 걸리면 많은 사용자가 제출하지 않음.
  • 양식 예시
    • 여러 부분으로 나누고, 오류와 해결 방법을 명확하게 표시한 양식.
    • 오류를 줄이고 사용자가 양식을 끝까지 작성하게 하는 것이 디자인에 더 많은 공간과 시간이 필요할 수 있음.
    • 그러나 시각적, 시간적 밀도의 희생이 결과를 더 가치 있게 만들면 전체 가치 밀도가 증가함.
  • 가치 밀도 증가
    • 양식을 더 작고 빠르게 로드하고 오류를 줄임으로써 시각적, 시간적 밀도를 높일 수 있음.
    • 사용자의 가치나 비즈니스의 가치를 감소시키지 않는다면 전체 밀도가 증가함.
    • 터프티의 접근 방식을 따라 최대한 가치 밀도를 높이려고 노력해야 함.
  • 최적화 문제
    • 최적화 문제를 해결하면 역설적인 결과가 나올 수 있음.
    • 초기 인터넷에서는 Craigslist와 같은 회사가 정보를 집계하고 페이지 링크로 표시하여 가치 밀도를 높임.
    • Yahoo와 Altavista는 정보를 검색할 수 있게 했지만 여전히 집계를 중시함.
    • Google은 다른 접근 방식을 취해 인터넷의 링크 체인을 통해 얻은 정보를 검색 상자에 활용함.
    • 정보가 스스로 집계되었으며, 사용자에게 필요한 것은 단일 텍스트 입력만으로 웹 전체에 접근하는 것이었음.
  • Google과 Yahoo의 접근 방식
    • Google의 초기 화면(2001년)과 2024년의 화면을 비교하면 시각적 밀도는 낮지만, 가치 밀도는 매우 높음.
    • 결과: Google의 가치는 2004년 $23B에서 현재 $2T 이상으로 증가함. Yahoo는 2000년 $125B에서 현재 $4.8B로 하락함.
  • 시각적 밀도보다 가치 밀도가 중요한 경우가 많음.
  • 사용자가 얻는 가치를 최대화하기 위해 디자인과 기능을 최적화하는 것이 중요함.

결론

  • UI 밀도를 고려한 디자인은 인터페이스의 시각적 측면을 넘어서야 함.
  • 우리가 내리는 모든 명시적, 암시적 디자인 결정과 화면에 표시하는 모든 정보를 포함함.
  • 사용자가 소프트웨어에서 가치를 얻기 위해 취하는 모든 행동과 시간을 포함해야 함.
  • UI 밀도의 구체적 정의
    • UI 밀도 = 사용자가 인터페이스에서 얻는 가치 / 인터페이스가 차지하는 시간과 공간
  • 중요한 요소
    • 속도
    • 사용성
    • 일관성
    • 예측 가능성
    • 정보의 풍부함
    • 기능성
  • 성공적인 인터페이스의 이유 : 이러한 모든 요소를 고려하면 일부 인터페이스가 성공하고 다른 인터페이스가 실패하는 이유를 이해할 수 있음.
  • 디자인 목표
    • 밀도를 고려한 디자인을 통해 사람들이 우리가 만든 소프트웨어에서 더 많은 가치를 얻을 수 있도록 해야 함.
▲
neo 4달전  [-]
Hacker News 의견

해커뉴스 댓글 모음 요약

  • 레스토랑 메뉴의 물리적 형태가 모바일 사이트 메뉴보다 더 나은 이유

    • 모바일 사이트 메뉴는 UI가 너무 복잡해서 구글 맵에서 메뉴 사진을 찾는 경우가 많음.
    • "밀도"를 재정의하려는 시도보다는 시각적 중요성을 잃지 않고 정보를 최대한 많이 제공하는 것이 중요함.

  • 형식보다 기능을 중시하는 데이터의 중요성

    • SS El Faro 사건에서 선장은 예쁜 그래픽을 가진 상업적 날씨 데이터를 사용하다가 허리케인에 휘말림.
    • 데이터의 시각적 아름다움보다는 정확성과 최신성이 중요함.

  • 시간적 밀도의 개념

    • JIRA는 시각적으로 밀도가 높지만, 속도와 다양한 화면 전환 때문에 실제로는 드문드문한 느낌을 줌.

  • 모바일 인터페이스의 희소성 이유

    • 사람들의 손가락이 상대적으로 두껍고 부정확함.
    • 데스크탑보다 느려서 로드를 여러 부분으로 나눔.
    • 세로 스크롤 형식과 화면 크기가 제한적임.
    • 데스크탑에서 유용한 기능들이 모바일에서는 어려움.

  • UI의 희소성 증가에 대한 비판

    • 웹 디자인 세계가 공백을 더 많이 사용하는 방향으로 가고 있음.
    • Hulu와 같은 앱은 많은 공백을 사용하여 정보 접근을 어렵게 만듦.
    • 디자이너들이 트렌드를 따르기보다는 실제로 좋은 것을 고민해야 함.

  • 복잡한 UI와 트렌드의 문제

    • 디자이너들이 트렌드를 따르는 것이 제품의 판매에 도움이 된다고 생각함.
    • 유명한 사람이나 브랜드를 모방하려는 경향이 있음.
    • UI 디자이너들이 고객이 트렌드와 유행을 중시한다고 잘못 생각할 수 있음.

  • 전통적인 UI의 장점

    • 오래된 Windows B2B 애플리케이션은 많은 정보를 한눈에 볼 수 있게 함.
    • 웹 기반 시스템은 여러 페이지를 사용해야 하는 반면, 전통적인 시스템은 한두 개의 창에서 모든 데이터를 볼 수 있음.

  • 정보 밀도의 불균형

    • 프레젠테이션 슬라이드의 간단한 내용이 고해상도 사진으로 찍히는 경우가 많음.
    • LaTeX로 작성된 논문은 작은 용량의 PDF 파일이지만, MS Word로 작성된 논문은 매우 큰 용량을 차지함.

  • 모바일 UI의 문제점

    • 작은 화면에서 처방전을 리필하는 것이 불가능해짐.
    • React로 최적화된 UI가 작은 화면에서 제대로 작동하지 않음.
    • 기술의 발전이 사용자 경험을 해치고 있음.

  • 밀도가 부족한 UI의 예시

답변달기