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