🗒 [성장을 위한 데일리 아티클] '데이터 테이블: 4가지 핵심 사용자 태스크' B2B 프로덕트는 많은 양의 데이터를 한 번에 보여주기 위해 테이블을 사용하는 경우가 많습니다. 테이블을 사용할 때 어떤 점을 고려해서 디자인 해야할까요? 📎 테이블의 특징과 장점 (특히 카드 UI와 비교했을 때) 1. 확장성 • 데이터가 변경되었을 때 행 방향, 열 방향으로 쉽게 확장할 수 있습니다 2. 비교 용이성 • 두 인접한 데이터들을 눈을 많이 움직이거나 머릿속에 정보를 기억해둘 필요가 없이 편리하게 비교할 수 있습니다 📌 테이블에서 수행되는 4가지 핵심 사용자 태스크 • 특정 레코드 검색 • 데이터 비교 • 한 행의 데이터를 확인하고, 편집하고, 추가하기 • 레코드 관리 작업 1) 특정 레코드 검색 사용자의 검색 행동은 이미 알고있는 특정 항목을 찾거나, 어떤 기준을 충족하는 여러 항목을 찾는 행동입니다. 이를 위해 필터링, 정렬, 검색, 눈으로 스캔할 수 있습니다. 하지만 어떤 방식을 취할지 예측하기 어렵고, 사용자가 생각하는 가장 쉬운 방법에 대한 기대를 바탕으로 결정하게 됩니다. 🔑 Key Point • 첫 번째 열은 읽을 수 있는 식별자를 제공해야 합니다 • 각 열은 데이터의 중요성과 각 열 간의 관련성에 따라 배치해야 합니다 • 필터는 발견하기 쉽고 빠르게 사용할 수 있어야 합니다. 또한 데이터를 확인할 때 필터링된 데이터를 보고있다는 것을 쉽게 인지할 수 있어야 합니다. 2) 데이터 비교 복잡하고 큰 테이블에서 비교 작업할 때 아래 문제들을 경험할 수 있습니다. • 많은 양의 데이터 중 각 셀이 무엇을 나타내며, 어떤 레코드에 속하는지 알기 어렵습니다 • 비교하려는 열 혹은 행이 서로 멀리 떨어진 경우 비교하기 쉽지 않습니다 이를 해결하기 위해 아래 방법을 사용할 수 있습니다. 2-1) 찾는 정보를 쉽게 확인할 수 있게 하기 • 화면보다 큰 테이블일 경우 헤더 행과 헤더 열을 고정하기 • 행과 열 사이로 움직일 때 위치를 유지할 수 있도록 보더, 지브라 스타일, 호버 스타일을 제공하기 2-2) 비교할 정보를 가까이 위치할 수 있게 하기 • 행, 열을 숨기거나 행, 열 순서를 변경할 수 있도록 하기 (숨긴 경우 숨겨져있는 표시가 있어야 합니다!) 3) 한 행의 데이터를 확인하고, 편집하고, 추가하기 한 레코드에 대한 위 세가지 액션을 하기에는 테이블 형식이 적절하지 않을 수 있습니다 • 테이블에서 직접 수정 : 좁은 테이블에서 가능한 방식입니다. 읽기 모드와 수정 모드는 시각적으로 구분해 실수로 편집되는 경우를 방지해야 합니다. • 모달 팝업 : 하나의 레코드만 확인할 수 있기 때문에 인접하거나 유사한 레코드의 데이터를 참조하거나 복사할 수 없는 단점이 있습니다. • 비모달 팝업, 개별 윈도우 : 테이블의 일부에 접근할 수 있도록 하는 옵션입니다. • 아코디언으로 행 확장 : 편집 중인 경우 인접 레코드를 참조하는데 어려울 수 있고, 시각적으로 어수선하게 될 수 있습니다. 4) 레코드 관리 작업 레코드 내용을 편집하는것 외에도 하나 혹은 그 이상의 레코드에 대한 관리 작업이 있을 수 있습니다. 4-1) 단일 액션 액션이 1개, 2개인 경우 행 내 인라인으로 배치할 수 있습니다. 그 이상인 경우엔 보통 • 공간이 없어 레이블을 생략하게 되면서 버튼을 식별하고 클릭하기 어렵게 됩니다 • 액션 버튼이 호버 혹은 Action 메뉴 아래에 숨겨져 발견하기 어렵게됩니다. 4-2) 배치 액션 여러 레코드에 대한 동시 액션을 위해서는 보통 레코드를 선택하는 과정이나 메뉴가 포함됩니다. 공간 효율적으로 옵션을 배치할 수 있습니다. -- 번역 & 요약: 장승환 --- 🔊 B2B 디자이너들의 모임 소개 B2B 프로덕트를 만들고 있는 B2B 디자이너들은 B2C 디자이너보다 더 어려운 문제를 풀고 있는 경우가 많은 데 비해 자료, 지식, 피드백을 찾는데도 어려움을 겪고 있습니다. 더 많은 B2B 프로덕트 디자이너들이 한자리에서 어려운 점, 배운 점을 공유하고 서로 도움이 되기 위해 커뮤니티를 운영중입니다. 🔗 B2B 디자이너들의 모임 노션 링크: https://www.b2b-designers.space