애드온HOSPITAL MARKETING
메뉴
홈페이지·사용성

카드 높이는 핵심 조건을 숨기지 않는 범위에서 맞춥니다

목록 카드마다 높이가 달라 버튼 위치가 계속 움직이면 이용자는 다음 자료를 고르기 어렵습니다. 그러나 높이를 맞춘다는 이유로 중요한 조건을 무조건 잘라 내는 것도 해결이 아닙니다.

애드온 편집팀

목록 카드마다 높이가 달라 버튼 위치가 계속 움직이면 이용자는 다음 자료를 고르기 어렵습니다. 그러나 높이를 맞춘다는 이유로 중요한 조건을 무조건 잘라 내는 것도 해결이 아닙니다.

먼저 카드에서 반드시 보여 줄 정보와 상세 화면으로 넘길 정보를 정합니다. 제목과 요약의 최대 줄 수를 화면 크기별로 시험하고, 말줄임이 적용되기 전 핵심 대상과 조건이 남는지 확인합니다.

버튼은 카드마다 비슷한 위치에 두되 제목이 짧을 때 불필요한 빈 공간이 지나치게 커지지 않게 합니다. 태블릿 세로 화면과 더 좁은 화면에서 카드가 겹치거나 버튼이 다른 카드에 붙어 보이지 않는지 살핍니다.

자동 자르기 전에 실제로 긴 제목과 여러 언어, 큰 글자 설정을 넣어 봅니다. 자료의 필수 제한 조건이 요약에 있다면 상세를 열기 전에도 보이도록 별도 표식을 둡니다.

이용자는 카드 높이 때문에 잘못된 버튼을 누르지 않고 자료 차이를 비교할 수 있어야 합니다. 운영자는 잘못 선택한 위치와 긴 제목의 유형을 기록해 규칙을 보완합니다. 균일한 카드의 목적은 모양을 맞추는 것이 아니라 목록에서 정보와 행동 위치를 안정시키는 데 있습니다.

카드 전체를 누르는 방식과 별도 버튼을 누르는 방식이 섞이면 이동 대상이 불분명할 수 있습니다. 클릭 가능한 범위를 화면에서 구별하고 키보드 초점 순서도 카드 배열과 같게 합니다. 제목 길이 규칙을 바꾼 뒤 기존 카드와 새 카드가 서로 다른 높이 기준을 쓰지 않는지 전체 목록을 표본 점검합니다. 마지막 행처럼 카드 수가 적은 구간에서도 버튼 정렬을 위해 의미 없는 빈 설명을 넣지 않습니다. 카드 높이를 바꾼 뒤 목록 마지막 행과 로딩 중 임시 카드도 같은 규칙으로 확인합니다.

같은 카테고리 글 보기 · 전체 글 보기

CONSULTATION

어떤 정보를, 어디에 전할지
함께 정리해보세요.

병원의 현재 운영 채널과 필요한 작업을 알려주세요.
원고·이미지·홈페이지 중 필요한 업무 범위부터 확인합니다.

이메일로 문의하기 카카오 오픈채팅