7장 리스트 만들기 - 사용자를 끌어들이는 UX/UI의 비밀

2022 우아한스터디 - UX 패턴파인더 스터디

 

리스트 고려사항

다음 리스트의 주요 유스케이스를 염두에 두고, 고려사항을 하나씩 살펴보자.

1. 전체 리스트 훑어보기
2. 리스트 브라우징하기
3. 관심있는 항목 검색하기

 

순서

• 사용자가 아이템을 무작위로 볼지 순서대로 볼지 고려한다.
• 리스트에 가나다순 또는 시간순 같은 자연스러운 순서가 있는지 고려한다.
• 사용자가 리스트의 정렬 순서를 변경하고 싶을지, 만약 그렇다면 어떤 기준으로 정렬하고 싶을지 고려한다.
• 각 아이템에 필수 필드 구조가 있는지 고려한다. 해당 필드를 기준으로 정렬하는 것이 도움이 될 수 있다.

카테고리

• 리스트의 각 아이템이 특정 카테고리로 분류될 수 있는지 고려한다.
• 카테고리가 있다면, 사용자가 즉시 이해할 수 있을만큼 직관적인 카테고리인지 검토한다.
• 카테고리가 다중계층 구조인지 단일계층 구조인지 생각해본다.

탐색

• 사용자가 개별항목에서 목록으로 돌아가 다른 항목을 찾기 쉬워야 한다.
• 사용자가 특정 항목을 찾고 있다면 검색으로 통해 빠르게 찾을 수 있도록 도와야 한다.

아이템

• 목록에서 각 아이템의 모든 정보를 한번에 표시해야 할지, 아니면 아이템을 대표하는 이름과 처음 몇 문장만 표시할지 판단한다.
  
  • 휴대폰 연락처 목록에서 특정 인물의 번호를 검색하는 경우, 아이템의 이름만 표시해주면 된다.
  • 웹 화면에서 뉴스 아티클을 보는 경우, 적당히 많은 정보를 노출하는 것이 더 유리하다.
• 각 아이템마다 관련 이미지나 사진이 있는지 확인한다.
• 사용자가 리스트를 슬쩍 보고도 무엇에 관한 것인지 이해할 수 있어야하는 경우, 전반적인 인상을 전달하기 위해 아이템의 이미지를 활용할 수 있다.

길이

• 리스트를 배치할 공간에 리스트의 길이가 충분히 들어가는지 검토한다.
• 표시할 리스트 결과가 너무 많아 한번에 표시할 수 없지는 않은지, 표시될 때까지 눈에 띄는 지연이 발생하지 않는지 검토한다.
  • 이 경우, 페이지네이션을 활용할 수 있다. 단, 사용자에게 총 페이지수를 알려주고, 페이지간 이동이 쉬워야 한다.

인터랙션

• 사용자에게 소유권한이 있다면 사용자가 목록을 직접 조작하게 할 수도 있다.
• 한번에 여러 항목을 선택해 이동, 편집, 삭제할 수 있어야 한다. 다중 선택시 Shift + 선택 방식으로 하거나 체크박스를 활용할 수 있다.
• 수정, 삭제와 같은 변경사항이 업데이트 되자마자 목록에 바로 반영되어야 하는지, 만약 그렇다면 그렇게 동작하는지 검토한다.

 

 

내용출처: 사용자를 끌어들이는 UX/UI의 비밀(제니퍼 티드웰, 찰스 브루어, 아인 발렌시아 저)