모바일에서 많은 양의 정보를 표시하는 방법(UX)
모바일은 너무 작아!
본 글은 닐슨 노먼 그룹의 <Mobile Tables: Comparisons and Other Data Tables>를 바탕으로 구성했습니다.
작은 화면에 많은 데이터를 표현하는 것은 어려운 일이에요. 대표적인 방식으로 Table(= 표)이 있어요. 모바일에서 Table은 어떤 모습일까요?
1. Table 활용법
읽을 수 있을 만큼 크게 만들기
스크롤 없이 모바일 화면에 맞는 열의 수는 딱히 정해져 있지 않습니다. 중요한 점은 모바일에서 보이는 작은 Table은 손으로 확대하지 않고도 읽을 수 있어야 한다는 점입니다.
National Rugby League의 선수 통계는 숫자였으며 가로 스크롤 없이 화면에 11개의 열을 표시할 수 있었습니다.첫 번째 열을 제자리에 고정하기
첫 번째 열에 오는 내용은 보통 주제가 되는 내용들입니다. 고정 헤더를 통해 전체 내용의 컨텍스트를 쉽게 읽을 수 있습니다.
BestBuy.com의 이 비교 테이블은 열 또는 행 머리글을 제자리에 고정하지 않아 테이블의 데이터를 이해하기 어렵게 만듭니다.
Fidelity는 사용자를 위해 투자 이름과 열 헤더를 고정했습니다. 마지막 열은 사용자가 스크롤하여 더 많은 정보를 볼 수 있다는 것을 알 수 있도록 화면에 잘려 있습니다.
Officeworks.com.au는 비교 테이블의 첫 번째 제품을 제자리에 고정하여 사용자가 첫 번째 제품과 다른 항목을 비교할 수 있습니다. 기본 항목은 변경 가능합니다.모바일 Table은 수평 스크롤이 필요합니다.
사용자가 전체 정보를 보려면 가로로 스크롤해야 할 수 있습니다. (일반적으로 가로 스크롤은 데스크톱 및 모바일 사용자에게 좋지 않지만 모바일 화면의 큰 테이블에서는 어느 정도 허용됩니다.)
이전 글 중 캐러셀에 대한 글이 있습니다.
캐러셀의 강력한 신호 중 하나는 화면에 잘린 UI입니다.
이처럼 Table도 강력한 신호를 사용해 수평 스크롤을 알릴 수 있습니다.
eBag 사이트에서 최종 제품 열이 잘려서 가로 스크롤을 사용할 수 있음을 나타냅니다.2. 사용자가 보고 싶은 데이터만 선택할 수 있게 합니다.
사용자는 모든 데이터를 볼 시간이나 욕구가 없을 때 그들의 필요와 관련된 정보만 제공하는 방법입니다.
다음은 화면에 표시되는 데이터의 양을 제한하고 다양한 상황에서 작동하는 두 가지 전략입니다.
A. 사용자가 필요한 데이터 세트를 구분해서 볼 수 있도록 허용합니다.
데이터를 비교할 필요가 없을 때 작동합니다. 예를 들어, 특정 자동차 모델의 기능, 특정 식품 항목에 대한 영양 정보 또는 특정 플레이어에 대한 통계만 원할 수 있습니다.
Small , Medium 및 Large 사이의 토글을 통해 사용자는 관심 있는 옵션을 선택해서 정보를 제한하고 봅니다.B. 사용자에게 데이터 제어 권한을 줍니다.
사용자가 보는 특정 세부 정보를 제어할 수 있게 합니다. 예를 들어, 누군가는 두 제품 간의 유사점이나 차이점에 관심이 있고 다른 누군가는 데이터의 특정 속성에만 관심을 가질 수 있습니다.
Dell 웹사이트에서 사용자는 페이지 상단의 메뉴를 통해 가장 관심 있는 제품 사양을 선택할 수 있습니다.
3. 데이터 그룹을 위해 아코디언을 활용합니다.
아코디언을 사용하여 관련 속성을 그룹화하고 사용자가 어떤 시간에 어떤 데이터를 볼 것인지 제어할 수 있습니다. 아코디언은 콘텐츠의 개요 역할을 해서 제품 정보를 빠르게 알려줍니다.
Samsung.com의 비교표에는 모든 사양/사용자가 선택한 기준/제품 간의 차이점 등으로 데이터를 그룹화해서 보여줍니다.
아코디언과 체크박스를 활용한 다중 필터많은 양의 데이터를 표시하는 방법은 몇 가지 방법으로 정해져 있다고 생각합니다. 필터, 테이블 등등 중요한 점은 내가 다루는 데이터의 성격을 이해하는 것입니다. 비교가 중요한 정보인지, 필요한 정보만 보여주는 것이 중요한지 잘 고민해서 데이터를 표현해야 할 것 같습니다.
<관련 글>
