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

결과 카드가 달라도 버튼이 흔들리지 않는 목록

설명이 두 줄인 카드와 여섯 줄인 카드가 섞이면 가격과 버튼의 세로 위치가 달라져 시선이 계속 움직인다. 텍스트를 잘라 버리면 중요한 조건이 사라질 수 있다.

애드온 편집팀

설명이 두 줄인 카드와 여섯 줄인 카드가 섞이면 가격과 버튼의 세로 위치가 달라져 시선이 계속 움직인다. 텍스트를 잘라 버리면 중요한 조건이 사라질 수 있다.

비교에 필요한 핵심 영역과 가변 설명 영역을 나누고 버튼 정렬, 최소 높이, 펼치기 규칙을 정한다. 화면 폭과 글자 확대에서도 내용이 겹치지 않아야 한다.

카드 높이의 별도 조건 검토에서는 측정 이벤트를 붙일 때는 성공과 실패, 취소를 구분한다. 카드 높이의 별도 조건 검토에서는 클릭만 세면 사용자가 원하는 결과를 얻었는지 알 수 없으므로 기능의 완료 증거와 연결한다.

짧은 제목·긴 제목·배지·가격 없음 등 극단 사례를 넣어 그리드와 목록을 시험한다. 200% 확대와 모바일 회전, 키보드 초점 이동도 본다.

카드 높이의 모바일·현장 확인에서는 기능을 설계할 때는 정상 경로만 보지 않고 비어 있음, 매우 긴 값, 중복, 권한 없음, 네트워크 실패를 각각 만든다. 카드 높이의 모바일·현장 확인에서는 이 경계 사례가 자연스럽게 처리돼야 실제 데이터가 달라져도 화면이 무너지지 않는다.

카드 높이의 공개 결과 판단에서는 마우스로 가능한 조작은 키보드와 보조기술에서도 목적과 상태를 알 수 있어야 한다. 카드 높이의 공개 결과 판단에서는 초점이 사라지거나 변화가 소리 없이 일어나면 접근성 결함으로 기록한다.

디자인 균형을 위해 조건 문장을 임의로 생략하지 않는다. 잘림을 쓰면 전체 내용을 여는 방법과 열림 상태의 접근성을 제공한다.

카드 높이의 후속 효과 비교에서는 모바일 폭과 확대 화면에서는 위치가 바뀌더라도 정보의 순서와 조작 대상이 유지돼야 한다. 카드 높이의 후속 효과 비교에서는 작은 화면에서 숨긴 요소가 판단에 필요한 조건인지 다시 살핀다.

카드 높이의 담당자 인계에서는 수정 전후 비교는 같은 데이터와 화면 조건에서 진행한다. 카드 높이의 담당자 인계에서는 디자인이 달라졌다는 인상보다 작업 시간이 줄고 잘못된 선택이 방지되는지를 관찰한다.

산출물은 카드 레이아웃 프로토타입이다. 고정·가변 영역, 높이 규칙, 말줄임, 버튼 위치, 반응형 시험 화면을 포함한다.

이 글의 중심 질문은 “내용 길이가 다른 카드의 높이를 어떻게 맞춰 비교와 조작을 안정시킬까”이다. 카드 높이의 검토를 마치면 확인된 사실과 남은 예외를 나눌 수 있고, 추측이나 성과 약속 없이 다음 작업을 결정할 수 있다.

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

CONSULTATION

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

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

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