UX 디자인 체크리스트

디자인 과정에서 제품의 일부 결함은 눈에 띄지 않게 됩니다. 이러한 작은(또는 때로는 큰) 일들이 소프트웨어를 사용하는 동안 사용자가 경험하는 데 많은 피해를 줄 수 있습니다. 디자인이 승인되기 전에 확인할 사항 목록을 작성했습니다.

이러한 사항이 모든 제품에 적용되는 것은 아니지만 일반적으로 가장 관련성이 높은 사항입니다.

인터랙션 디자인

01 – 반복적인 행동이나 빈번한 활동이 힘들게 느껴진다

중요한 이유: 동일한 출력에 대한 반복적인 작업(예: 동일한 정보로 다른 양식 채우기)은 사용자가 목표를 더 빨리 또는 더 잘 달성하는 데 도움이 되지 않는 힘든 작업입니다. 사용자는 또한 이를 우회하는 방법을 찾으려고 할 것입니다. 예를 들어 더 빠르게/더 잘 수행하도록 도울 수 있는 경쟁업체를 찾습니다.

테스트 방법: 먼저 제품의 모든 흐름을 분석하고 사용자의 행동을 관찰해야 합니다. 반복적인 작업이 있는 경우 이를 용이하게 하는 방법이 있는지 확인하고 싶습니다. 이전에 입력한 정보를 사용하는 옵션입니다.

02 – 사용자는 오류로부터 쉽게 복구할 수 있습니다.

중요한 이유: 종종 사용자는 의도하지 않은 작업이나 원하는 결과로 이어지지 않은 작업을 수행합니다. 사용자가 돌아가서 다시 시도할 수 있다는 것은 좌절하지 않고 쉽게 회복하여 흐름을 계속 진행할 수 있음을 의미합니다.

테스트 방법: 먼저 탐색 시스템이 뒤로 돌아갈 수 있는지 확인하고 해당 작업을 취소할 수 있습니다. 그런 다음 사용성 테스트를 수행할 때 사용자가 잘못된 작업을 수행할 가능성이 가장 높은 시나리오를 만들고 쉽게 복구할 수 있는지 확인합니다.

03 – 사용자는 전문 지식 수준에 따라 적절하게 지원됩니다.

중요한 이유: 제품의 초보 사용자가 원활하게 학습할 수 있도록 하는 것이 중요합니다. 그러나 일단 제품에 익숙해지면 흐름을 더 빠르게 이동하는 데 도움이 되는 도구를 사용할 수 있습니다. 두 시나리오 모두 사용성과 보존성을 향상시킵니다. 예를 들어 전문 사용자를 위한 바로 가기, 초보 사용자를 위한 도구 설명 등

테스트 방법: 먼저 두 대상 모두를 위한 도구가 있는지 확인합니다. 그런 다음 초보자 및 전문 사용자와 함께 사용성 테스트를 수행하여 이러한 도구가 제대로 사용되는지 확인합니다.

04 – 도움말 액세스가 사용자 진행을 방해하지 않습니다.

중요한 이유: 사용자는 제품의 특정 부분에 갇힐 때마다 도움을 요청합니다. 온라인이든 오프라인이든 도움이 추가되고 사용자가 중단한 부분에서 작업을 재개할 수 있도록 하는 것이 중요합니다.

테스트 방법: 사용자가 도움을 요청하고 워크플로와 진행이 중단되는지 확인하는 테스트 시나리오를 만듭니다.

시각 디자인

05 – 기본 색상이 3개 이하

중요한 이유: 이것은 고정된 규칙이 아니며 때로는 특정 경우에 3가지 이상의 기본 색상을 사용할 수 있습니다. 그러나 세 가지 색상을 결합하는 것은 이미 어렵기 때문에 대부분의 경우 그 이상은 피해야 합니다.

테스트 방법: 제품을 디자인할 때 사용한 색상표의 기본 색상이 3가지 이하인지 확인합니다.

06 - 계층, 내용 또는 기능을 전달하는 데 색상만 사용되지 않습니다.

중요한 이유: 액세스할 수 있는 제품을 보유하는 것은 플러스가 아니라 필수입니다. 색맹과 같은 시각 장애가 있는 사람들은 계층, 내용 또는 기능을 전달하기 위해 색에만 의존합니다. 이는 그들이 귀하의 제품을 사용할 수 없고 제외된 인구 통계가 된다는 것을 의미합니다.

테스트 방법: colorfilter.wickline.org에서 웹페이지 상단에 컬러 필터를 추가하고 다양한 색맹에 대해 테스트할 수 있습니다. 또한 제품을 화면 캡처하여 이미지 편집기에서 회색조로 변환하고 색상을 쉽게 구분할 수 있는지 확인할 수 있습니다.

07 – 시각적 계층 구조가 사용자에게 필요한 작업을 안내합니다.

중요한 이유: 사용자는 제품의 계층 구조와 단서에 의존하여 무엇을 하고 어디로 가야 하는지를 알 수 있습니다. 이를 이해하고 해당 계층 구조를 사용하여 적절하게 안내하는 것이 중요합니다.

테스트 방법: 제품 내부의 흐름이 작동하는 방식과 주요 작업이 시각적 계층 구조에 의해 장려되는지 여부를 이해합니다.

08 – 시각적 계층 구조의 맨 위에 있는 항목이 가장 중요합니다.

중요한 이유: 시각적 계층 구조를 통해 사용자는 정보를 빠르게 스캔하고 즉각적인 필요에 따라 콘텐츠의 우선 순위를 지정할 수 있습니다. 시각적 계층 구조의 맨 위에 있는 항목은 비즈니스에 가장 중요하고 사용자와 가장 관련성이 있어야 합니다.

테스트 방법: 디지털 제품을 화면 캡처한 다음 해당 스크린샷을 약 5px 반경으로 흐리게 처리합니다. 결과를 보면 계층 구조를 즉시 시각화하고 어떤 요소가 눈에 띄는지 알 수 있습니다. 비즈니스와 사용자에게 가장 중요한 요소입니까?

09 – 기본 작업은 보조 작업과 시각적으로 구분됩니다.

중요한 이유: 1차 작업과 2차 작업이 뚜렷하면 사용자가 제품과 상호 작용할 때 혼동을 일으키지 않고 실수할 가능성이 줄어듭니다. 예를 들어, "제출"과 "취소"는 명확하게 구별되어야 합니다.

테스트 방법: 사용성 테스트를 수행할 때 사용자의 의도가 아닌 1차 및 2차 작업이 제대로 구분되지 않아 발생하는 일반적인 오류를 관찰합니다. 또한, 디자인을 검토할 때 색상, 크기, 위치 및 기타 요소가 동작을 구별하는지 확인하십시오.

10 - 대화형 요소가 추상화되지 않음

중요한 이유: 새 제품을 사용할 때 사용자는 다른 디지털 제품을 사용한 이전 경험에서 구축된 일련의 기대치를 갖게 됩니다(예: 버튼의 모양 및 작동 방식). 이러한 기대를 충족한다는 것은 불필요한 마찰을 일으키지 않는다는 것을 의미합니다.

테스트 방법: 먼저 제품을 검토하여 일반적인 패턴이 사용되지 않는 영역을 찾습니다. 예를 들어 링크처럼 보이지 않는 링크가 있습니다.

11 – 양식 제출은 시각적으로 구별되는 방식으로 확인됩니다.

중요한 이유: 사용자에게 작업이 성공적으로 수행되었는지 여부를 확인하는 것은 필수적입니다. 예를 들어, 양식을 제출한 후 색상 배너 형식의 명확한 확인 메시지는 사용자가 다음 작업으로 이동할 수 있음을 의미합니다.

테스트 방법: 사용자가 정보를 입력하는 제품의 모든 영역을 확인합니다. 사용자 입력이 완료되면 해당 작업이 성공했는지 여부에 대한 확인을 트리거합니다. 종료 상태와 관련하여 피드백이 명확한지 확인하십시오.

12 – 경고 메시지의 일관성

정의: 경고 메시지는 동일한 시각적 스타일을 가지며 동일한 방식으로 동일한 위치에 나타납니다.

중요한 이유: 일관된 경고 메시지가 있다는 것은 사용자가 즉시 주의를 기울여야 하는 사항을 항상 이해할 수 있음을 의미합니다. 경고와 일치하지 않으면 새 경고가 나타날 때마다 추가적인 정신적 부하가 발생합니다.

테스트 방법: 경고 메시지의 시각적 스타일이 동일하고 위치가 유사하거나 동일한지 확인합니다.

13 – 경고 메시지가 시각적으로 구별됨

중요한 이유: 경고 메시지가 다른 화면 요소와 명확하게 구분되도록 함으로써 사용자는 실제로 알림 메시지를 보고/하거나 조치를 취할 수 있습니다.

테스트 방법: 시각적 차별화를 직접 확인한 후 사용성 테스트에서 사용자가 경고 메시지에 어떻게 반응하는지 확인합니다.

정보 아키텍처

14 - 일관된 탐색

중요한 이유: 사용자가 제품을 탐색하고 탐색하는 방식은 현재 페이지와 상관없이 목표를 완료할 수 있는지 여부에 직접적인 영향을 미칩니다.

테스트 방법: 정보 아키텍처 문서를 확인하고 모든 페이지에서 탐색이 가능하고 변경되거나 사라지지 않는지 확인하십시오. 시각 디자인에 뛰어들기 전에 정보 아키텍처 경로가 가능한 한 직관적인지 확인하기 위해 카드 정렬 또는 트리 테스트를 시도하십시오.

15 – 성장의 여지

중요한 이유: 새로운 기능이나 콘텐츠가 나타날 때마다 제품의 탐색 및 정보 시스템을 재설계할 수는 없습니다. 탐색 메뉴 및 전체 레이아웃은 중단 없이 더 많은 범주/주제를 지원해야 합니다. 성장의 여지가 있는 설계는 주요 설계 및 개발 노력이 인터페이스 전반에 걸쳐 쉽게 확장된다는 것을 의미합니다.

테스트 방법: 모든 이해 관계자에게 제품의 콘텐츠가 시간이 지남에 따라 어떻게 성장할 수 있는지 물어보십시오. 더 많은 정적 콘텐츠를 지원하시겠습니까? 아키텍처가 비디오를 지원해야 합니까?

타이포그래피

16 – 두 개 이하의 고유한 유형 패밀리가 사용됩니다.

중요한 이유: 이것은 고정된 규칙이 아닙니다. 때로는 두 개 이상을 뽑는 것이 가능합니다. 하지만 일반적으로 2개 이상 매칭하는 것은 쉬운 일이 아닙니다. 사용성과 시각적 목적을 위해 두 가지를 고수하면 타이포그래피 계층이 단순화되어 이해도가 향상됩니다.

테스트 방법: 디자인이 두 가지 이상의 유형 패밀리를 혼합하지 않는지 확인합니다. 선택한 가족이 적절하게 일치하는지 확인하는 것도 도움이 될 것입니다(여기에서 자세히 알아보기).

17 – 텍스트 콘텐츠에 사용되는 글꼴의 크기는 최소 12픽셀입니다.

중요한 이유: 다시 말하지만 고정된 규칙은 아닙니다. 이론적으로 특정 목적을 위해 더 작은 크기를 사용할 수 있지만 일반적으로 12픽셀 미만의 크기에서는 가독성이 크게 떨어집니다.

테스트 방법: 모든 콘텐츠를 확인하고 해당 콘텐츠에 사용된 글꼴의 크기가 12픽셀 이상인지 확인합니다.

18 – 레이블, 머리글 또는 두문자어를 위한 대문자 예약

중요한 이유: 대문자 사용을 제한하는 것은 이해를 용이하게 하는 것으로 알려져 있습니다. 시각적으로 덜 무겁고 사용자가 소화하기 쉽습니다. 특히 강조 또는 매우 제한된 경우에 사용해야 합니다(예: 두문자어).

테스트 방법: 철저한 콘텐츠 검사를 실행하고 대문자가 헤더, 레이블 또는 두문자어로만 제한되는지 확인합니다.

19 – 콘텐츠를 컨트롤에서 분리하기 위해 다양한 글꼴 스타일 또는 패밀리가 사용됩니다.

중요한 이유: 콘텐츠와 컨트롤, 즉 사용자가 상호 작용할 수 있는 항목에 대한 명확한 지표가 필요합니다. 이러한 표시기는 크기, 색상, 위치, 글꼴 등이 될 수 있습니다. 글꼴은 중요한 것입니다. 다른 스타일이나 패밀리를 사용하면 사용자가 혼동하지 않고 상호 작용할 수 있는 항목을 쉽게 식별할 수 있습니다.

테스트 방법: 제품의 모든 컨트롤을 식별하고 콘텐츠에서 눈에 띄는지 확인합니다. 사용성 테스트를 실행할 때 사용자가 컨트롤과 상호 작용하는 데 어려움이 있는지 주의하십시오.

20 – 글꼴 크기/굵기가 콘텐츠 유형을 구분합니다.

중요한 이유: 가독성과 이해도에 큰 영향을 미칩니다. 표제, 소제목 및 단락을 명확하게 구분하면 해당 내용을 소화하는 데 따르는 정신적 부담을 줄일 수 있습니다. 시각적인 이점도 있습니다. 보기와 느낌이 좋아집니다.

테스트 방법: 제품 내부의 콘텐츠를 검토할 때 제목, 부제목 및 단락이 서로 다른 글꼴 크기와 두께를 사용하고 있는지 확인하십시오.

사용자 인터페이스

21 – 근접 및 정렬

중요한 이유: 사용자는 서로 가까운 항목을 기능적으로나 맥락적으로 그룹화하는 경향이 있습니다. 탐색 모음이 이에 대한 좋은 예입니다. 이 패턴을 따르고 연결된 항목을 그룹화하면 사용자가 즉시 인터페이스를 이해하게 됩니다.

테스트 방법: 기능이 유사한 항목을 찾고 가능한 경우 함께 그룹화되어 있는지 확인합니다.

22 - 다단계 워크플로에 대한 진행률 표시기

중요한 이유: 특히 다단계 워크플로의 경우 사용자는 쉽게 압도되거나 최종 작업이 완료될 때까지 얼마나 걸릴지 의아해할 수 있습니다. 진행률 표시기는 자신을 찾는 데 도움이 되지만 더 중요한 것은 성취감을 느끼게 하고 드롭률을 줄이는 것입니다.

테스트 방법: 제품 내부의 모든 흐름에서 무언가를 달성하기 위한 다양한 단계가 있는지 확인한 다음 진행 상황이 표시기를 통해 표시되는지 확인합니다.

23 – 콘텐츠 및 컨트롤과 같은 전경 요소는 배경과 쉽게 구분됩니다.

중요한 이유: 시각 장애가 있는 사람들에게 중요합니다. 또한 사용자의 학습 곡선과 이해력을 향상시킵니다. 명확한 구분은 탐색을 용이하게 하고 버튼에 더 많은 관심을 불러일으키며 일반적으로 사용성을 높입니다.

테스트 방법: 제품을 화면 캡처하고 해당 스크린샷을 약 3px에서 5px의 반경으로 가우시안 흐리게 처리합니다. 결과를 볼 때 전경에 있는 것과 배경에 있는 것을 쉽게 구분할 수 있습니까?

목록 통과를 축하합니다! 그러나 이것이 끝이 아닙니다.

귀하의 제품은 이제 더 견고해지고 여러 영역에서 개선되었을 수 있습니다. 예를 들어, 지금은 더 쉽게 액세스할 수 있을 수 있습니다. 그러나 항상 테스트를 계속하고 사용자 피드백을 수집하고 계속 반복해야 한다는 점을 기억하십시오.