어떤 UI 구성요소를 선택할지 어떻게 알 수 있나요? 의사결정 트리는 설계팀이 설계 결정을 문서화할 수 있는 체계적인 접근 방식을 제공합니다. 어떤 UI 구성요소를 언제 사용할지 결정하고 나면 끝없는 토론, 혼란, 오해를 피할 수 있습니다. UI 구성요소에 대한 의사결정 트리 의 몇 가지 예 와 이를 최대한 활용할 수 있는 방법을 살펴보겠습니다 . 이 기사는 디자인 패턴 에 대한 지속적인 시리즈의 일부 입니다 . 또한 스마트 인터페이스 디자인 패턴 ???? 에 관한 10h-비디오 라이브러리의 예정된 부분 이자 향후 라이브 UX 교육이기도 합니다 . 코드를 사용하여 15% 할인을 받으세요.BIRDIE UI 구성요소의 의사결정 트리 양식 디자인 구성 요소 결정 트리의 환상적인 예는 Doctolib 팀 에서 나왔습니다 . ( 이미지 출처 ) ( 큰 미리보기 ) B2B 탐색 및 도움말 구성 요소: Doctolib # Doctolib 디자인 시스템은 의사 결정 트리, B2B 탐색 경로, 사진, PIN 입력, UX 작성 및 SMS 알림과 UI 구성 요소 선택 방법 에 대한 철저한 가이드를 갖춘 매우 인상적인 디자인 시스템입니다 . 온보딩 선택 UI 툴킷 Doctolib의 많은 의사결정 트리 중 하나 : B2B 탐색부터 도움말 구성요소까지. ( 큰 미리보기 ) B2B 탐색 패턴 의사결정 트리 양식 구성 요소 결정 트리 작업 및 작업 호출 결정 트리 오류 설계 결정 트리 도움말 구성 요소 결정 트리 나는 이러한 의사 결정 트리가 얼마나 실용적인지 좋아합니다. 각각은 구성 요소의 모양에 대한 예를 보여 주지만 실제 UI 예에 대한 참조와 이러한 구성 요소가 사용되는 위치와 방법에 대한 흐름도 추가하겠습니다 . 어떤 가이드보다 디자인 결정을 더 잘 문서화하는 환상적인 출발점입니다. UI 구성요소에 대한 의사결정 트리: Workday # Workday Canvas 디자인 시스템 팀은 알림, 오류 및 경고, 로딩 패턴, 클릭 유도 문구, 잘림 및 오버플로 에 대한 가이드라인, 예제 및 사용 사례를 포함하는 환상적인 디자인 결정 트리 세트를 만들었습니다. 이제 이 트리는 오직 에서만 검색할 수 있습니다. 아카이브: 알림에 대한 결정 트리 알림 에 대한 의사결정 트리 : 생각만큼 간단하지 않습니다. ( 큰 미리보기 ) 알림 결정 트리 오류 및 경고 결정 트리 UX 결정 트리 로드 행동 촉구 결정 트리 잘림 및 오버플로 결정 트리 각 의사결정 트리에 대해 Workday 팀은 의사결정 트리로 넘어가기 전에 먼저 결정을 내릴 때 고려해야 할 몇 가지 상황 관련 질문을 정리했습니다 . 게다가, 각 이미지에 대한 매우 자세한 대체 텍스트뿐만 아니라 사용 가능한 각 옵션에 대한 철저한 예시도 있습니다. 양식 구성 요소 결정 트리: Lyft # 양식 구성 요소 를 선택하는 것은 종종 어려울 수 있습니다. 라디오 버튼, 체크박스, 드롭다운은 언제 사용해야 합니까? Lyft의 Runi Goswami는 팀이 양식 컨트롤 중에서 선택하는 데 도움이 되는 자세한 양식 구성 요소 결정 트리를 공유 했습니다. 자세한 양식 구성 요소 결정 트리 양식 제어를 위한 의사결정 트리 : 특히 많은 긴 옵션이 있는 최후의 수단으로 드롭다운을 사용합니다. ( 큰 미리보기 ) 사용자가 UI에서 두 개 이상의 옵션을 선택할 수 있는지 탐색하는 것부터 시작합니다. 실제로 다중 선택인 경우 짧은 옵션에는 토글을 사용하고 긴 옵션에는 체크박스를 사용합니다. 옵션을 하나만 선택할 수 있는 경우 필터링에는 탭을, 짧은 옵션에는 라디오를 , 즉시 적용 가능한 옵션에는 스위치를, 옵션 하나만 선택할 수 있는 경우에는 확인란을 사용합니다. 드롭다운은 최후의 수단으로 사용됩니다. 온보딩 구성 요소 선택: NewsKit # 온보딩은 다양한 형태와 형태로 제공됩니다. 특정 기능을 얼마나 미묘하거나 눈에 띄게 강조하고 싶은지 에 따라 팝오버, 배지, 힌트, 플래그, 토스트, 기능 카드를 사용하거나 더 나은 빈 상태를 디자인할 수 있습니다. Newskit 팀은 Figma에 온보딩 선택 프로토타입을 구성했습니다 . UX 온보딩을 위한 의사결정 툴킷 UX 온보딩을 위한 의사결정 툴킷 : 온보딩이 더 통합될수록 더 효과적입니다. ( 큰 미리보기 ) 선택은 사용자가 세부 정보를 표시하도록 방해 할지(보통 그다지 효과적이지 않음), 경험 중에 기능을 미묘하게 표시할지(보다 효과적), 또는 사용자 작업 컨텍스트 내에서 기능을 강조하여 검색을 활성화할지 여부에 따라 달라집니다. 성취하려고 노력합니다. 툴킷은 디자이너에게 온보딩 의도에 대해 몇 가지 질문을 한 다음 가장 잘 수행될 가능성이 있는 옵션을 제안합니다. 이는 간소화된 온보딩 결정을 위한 환상적인 작은 도우미입니다. 설계 시스템 프로세스 흐름도: Nucleus # 디자인 시스템에 새로운 구성 요소를 추가하거나 기존 구성 요소를 확장하기로 결정하는 방법은 무엇입니까? 기여, 유지관리, 전반적인 디자인 프로세스는 어떻게 진행되나요? 일부 디자인 팀은 아래와 같이 디자인 결정을 디자인 시스템 프로세스 흐름도로 성문화합니다 . 디자인 시스템 유지관리 프로세스 흐름도 British Gas 설계 시스템 에 의한 설계 시스템 유지 관리 프로세스 . ( 큰 미리보기 ) British Gas의 기부 프로세스 Nordhealth의 기여 지침 Aviva의 프로세스 OpenCollective의 기부 프로세스 Zalando의 기부 프로세스 디자인 시스템에 새로운 구성 요소를 추가하는 데 유용한 의사 결정 트리는 다음과 같습니다 . Boston Scientific의 새로운 구성 요소 결정 트리 GitHub에서 새로운 패턴 처리 Brad Frost의 디자인 시스템 거버넌스 프로세스 Louis Ouriach의 새로운 구성 요소 결정 트리 Chad Bergman의 디자인 시스템 기여 템플릿 새로운 구성 요소를 시작하는 방법 + Rama Krushna Behera의 Figma 템플릿 의사결정나무를 가시화하라 # 의사결정 트리 접근 방식에서 제가 정말 좋아하는 점은 디자인 결정을 아름답게 시각화할 뿐만 아니라 문서로도 사용된다는 점 입니다 . 이는 팀 전체에 걸쳐 공유 표준을 설정하고 따라야 할 사례를 포함하며 신입사원에게 놀라운 가치를 제공합니다. 물론 예외가 발생합니다. 그러나 디자인 팀의 작업 방식을 의사 결정 트리로 체계화하고 이를 디자인 작업의 중심으로 삼으면 UI 결정에 대한 끊임없는 토론이 영원히 해결됩니다 . Github에서 새로운 패턴 처리 GitHub의 전체 프로세스를 순서도로 요약했습니다. ( 큰 미리보기 ) 따라서 논쟁이 일어날 때마다 결정 트리에 결정을 문서화하십시오. 포스터로 바꿔보세요. 주방 공간, 개발자 및 QA 작업 공간에 배치하세요. 디자인 비평실에 두세요. 디자인 작업이 이루어지는 곳과 코드가 작성되는 곳을 눈에 띄게 만드세요 . 모든 프로젝트에는 고유한 사용자 정의 트리가 필요하다는 점을 언급할 가치가 있으므로 위의 예를 참조하여 필요에 따라 구축 하고 사용자 정의할 수 있습니다. 스마트 인터페이스 디자인 패턴을 만나보세요 # UX에 대한 유사한 통찰력에 관심이 있다면 실제 프로젝트의 100개 실제 사례가 포함된 10시간짜리 비디오 코스 인 스마트 인터페이스 디자인 패턴 (올해 후반에 라이브 UX 교육 포함)을 살펴보세요. 대규모 드롭다운부터 복잡한 엔터프라이즈 테이블까지, 매년 5개의 새로운 세그먼트가 추가됩니다