데이터를 테이블로 보여줘야 한다면 디자인은? | 매거진에 참여하세요

1. 디자인하기 전에 고민하기

회사를 위한 내부 제품이든 새로운 소비자 제품이든, 다음과 같은 질문에 답해야 합니다:

• - 사용자는 데이터를 어떻게 사용할까요?

• - 특정 상태를 확인하려고 하나요? 보고서를 생성하나요? 새 데이터를 입력하나요?

사용자 설정과 워크플로도 디자인에 영향을 미칩니다.

• - 모니터 크기는 얼마인가요? 듀얼 모니터를 사용하나요?

• - 제품을 사용할 때 몇 개의 창을 열어두나요? 동시에 열어두나요?

사용 가능한 공간과 주변 콘텐츠를 파악하면 디자인 선택에 도움이 됩니다. 화면 공간을 계획하세요.

너무 많은 여백은 사용자가 데이터를 따라가기 어렵게 할 수 있습니다. 작은 화면에서는 인터페이스를 통해 시선이 자연스럽게 이동하지만, 큰 화면에서는 그렇지 않을 수 있습니다.

사용자가 여러 애플리케이션을 동시에 사용할 수 있다는 점도 고려하세요.

2. 초기 레이아웃 만들기

필요한 배경 지식을 갖췄다면, 이제 디자인을 시작해보세요.

처음부터 시작할 때 시각적 디자인을 만들거나 코드를 작성하고 싶은 유혹이 들지만, 한 발 물러서세요. 가장 좋은 방법은 높은 수준의 레이아웃부터 시작하는 것입니다.

데이터 기반 디자인 프로젝트의 경우, 새 제품에 채워질 원시 데이터를 검토하세요.

• 데이터 양은 얼마나 되나요?

• 작업에 가장 많이 사용될 정보는 무엇인가요?

1단계: 화면 레이아웃을 스케치하거나 스티커 메모로 구성하기

2단계: 대략적인 플레이스홀더 콘텐츠 추가하기

• 사각형과 텍스트 라인 컨트롤을 사용해 크기와 공간을 대략적으로 추정하세요.

• 

  
  3단계: 레이아웃에 원시 데이터 추가하기

• Excel이나 다른 스프레드시트 도구에서 데이터를 Data Grid 컨트롤에 직접 붙여넣을 수 있습니다.

  

  
  4단계: 기본 UI 원칙을 적용하고 디자인 반복하기

피드백을 요청하는 것을 잊지 마세요. 아무리 디자인에 공을 들여도, 실제 사용자는 여러분이 아닐 수 있습니다. 좋

은 디자인은 팀, 사용자, 이해관계자로부터 지속적인 피드백을 받아야 합니다. 초기 개념부터 실행, 세부 사항까지 피드백을 받으세요.

3. 데이터 기반 레이아웃 구성 및 최적화

많은 데이터 기반 디자인은 이전 단계에서 멈춥니다. Excel에서 복사해온 것 같은 디자인을 상속받은 적이 많습니다.

다음 번에는 이 팁들을 사용해 제품을 한 단계 더 발전시켜 사용자에게 훌륭한 경험을 제공하세요.

사용자가 데이터를 실제로 어떻게 사용하는지, 또는 어떻게 사용하고 싶어하는지 고려하세요.

팁 1: 가능한 한 많은 정보를 그룹화하거나 숨기기

• 테이블의 행 수를 줄이면 스캔 가능성이 향상되고, 사용자가 행동하기 쉬워집니다.

• 데이터베이스에서 바로 표시된 방식을 고수할 필요는 없습니다. 예를 들어, 도시와 주를 결합할 수 있습니다.

• 많은 데이터가 있다면 숨기세요! 드롭다운을 사용해 덜 자주 사용되는 데이터를 숨기면서 핵심 콘텐츠에 집중할 수 있습니다.

팁 2: 인간적인 언어 사용하기

• 데이터베이스는 컴퓨터와 대화하도록 설계되었지만, 인간적인 언어로 출력할 수도 있습니다.

• 날짜를 숫자 형식에서 문자 형식으로 변경하면 스캔 가능성이 크게 향상됩니다.

팁 3: 불투명도를 사용해 부수적인 정보의 시각적 영향을 최소화하기

• 중요도가 낮은 정보의 불투명도를 줄이면 시각적 노이즈가 감소하고, 사용자가 각 열의 콘텐츠를 더 쉽게 추적할 수 있습니다.

팁 4: 수직 및 수평 공간을 추가해 사용자가 쉽게 스캔할 수 있도록 하기

• 각 테이블 셀 사이에 적절한 공간을 제공하면 사용자가 콘텐츠에 더 쉽게 집중할 수 있습니다.

팁 5: UI에서 반복되는 액션은 불필요한 노이즈를 증가시킴

• 액션을 호버 시에만 표시하는 것을 고려하세요.

팁 6: 행, 셀 또는 텍스트에 색상을 사용해 화면에서 두드러지게 하기

• 단일 행을 강조해 사용자가 집중할 수 있도록 하세요. 상태와 같은 데이터 포인트에 배경색을 추가하세요. 효과를 위해 적절히 사용하세요.

보너스 팁: 테이블 틀에서 벗어나기

• 데이터를 표 형식으로 보지 않고도 상호작용할 수 있는 다양한 방법이 있습니다.

• 예를 들어, 주문 번호를 세로 탐색으로 사용하고 세부 정보를 오른쪽에 배치할 수 있습니다.

• 데이터 테이블의 상태가 중요한 정보라면, 대시보드를 사용해 현재 상태를 쉽게 파악할 수 있도록 하세요.

카드 형태로도 표현할 수 있습니다.

위의 글은 아래 원문을 번역 및 재가공한 글로, 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/data-table-design/