AI가 명확하게 볼 수 있도록 지원: 대시보드 디자인 사례 연구

인공 지능(AI)은 오늘날 많은 산업 분야에서 열심히 일하고 있습니다. 소매업체가 재고를 관리하고 수요를 예측하는 데 도움이 되며 의사가 폐 스캔에서 암을 더 쉽게 식별할 수 있으며 자동차가 스스로 운전할 수 있습니다.

그러나 AI 기반 자동화는 계속 진화하고 있으며 여전히 인간의 개입이 필요합니다. 이 대시보드 디자인 사례 연구에서는 작업자가 AI 인식 프로세스를 개선하는 데 도움이 되는 UI를 개발한 방법을 자세히 설명합니다.

클라이언트

클라이언트는 고객이 여러 산업 분야의 AI 이미지 인식 오류를 실시간으로 해결할 수 있도록 지원하는 미국 스타트업이었습니다. 제공하는 솔루션은 지형 매핑, 공장 분류, 소매 제품 식별, 바코드 스캔 등을 가능하게 하는 자동화 시스템을 개선합니다.

AI 이미지 인식 시스템은 시각적 입력을 인식 및 해석하고 "보는" 것을 기반으로 결정을 내리도록 훈련되었습니다. 그러나 때때로 이러한 시스템에서는 개체가 예기치 않은 모양으로 인해 처리할 수 없는 이미지와 같은 예외가 발생합니다. 예외로 인해 AI 시스템이 중요한 정보를 식별하지 못하거나 보이는 것을 잘못 식별할 수 있습니다. 예를 들어 식료품 스캐너는 용기가 바뀌었기 때문에 오렌지 주스 상자를 인식하지 못하거나 자율주행 농장 로봇이 장애물에 혼란스러워 할 수 있습니다. 이러한 문제로 인해 비즈니스 운영이 지연되거나 중단될 수 있습니다.

이러한 문제를 해결하기 위해 클라이언트의 소프트웨어는 고객의 AI 시스템과 통합되어 작업자가 실시간으로 인식 문제를 검토하고 해결할 수 있습니다. 그러나 운영자는 예외를 해결하는 것 이상을 수행합니다. 또한 다음에 유사한 문제가 발생했을 때 AI 시스템에 수행할 작업을 가르칩니다. 결과적으로 AI 시스템은 더 넓은 범위의 이미지를 식별할 수 있습니다.

브리핑

두 달 동안 나는 클라이언트와 협력하여 운영자 대시보드와 고객 대시보드를 위한 디자인을 제공했습니다. 또한 이러한 결과물과 함께 제공되는 구성 요소 라이브러리와 스타일 가이드도 준비했습니다.

내 접근 방식은 연구, 브레인스토밍, 저충실도 프로토타이핑, 고충실도 프로토타이핑 및 사용자 테스트를 포함하는 디자인 사고 프로세스를 따릅니다. 나는 항상 시간, 자본 및 사람의 가용성을 기반으로 이 프로세스를 조정합니다.

프로젝트 기간 동안 저는 클라이언트의 창립 팀 및 프론트 엔드 개발자와 긴밀하게 협력하여 모든 사람들이 제 진행 상황을 계속 알 수 있도록 매일 업데이트를 공유했습니다. 나는 또한 일상 업무에 귀중한 통찰력을 제공한 두 명의 교환원과 협력했습니다.

운영자 대시보드 개선

클라이언트 제품의 핵심은 AI 전문가가 이미지 인식 문제를 해결하는 데 사용하는 인터페이스인 운영자 대시보드입니다. AI 시스템이 이미지를 식별하는 데 문제가 있으면 해당 이미지가 운영자의 대시보드로 전송됩니다. 작업자는 "인간", "나무" 또는 "큰 장애물"과 같은 미리 결정된 레이블을 기반으로 각 개체를 표시하고 분류하여 이미지에 수동으로 레이블을 지정합니다.

내가 클라이언트의 오퍼레이터를 인터뷰했을 때, 그들은 그들이 사용하고 있는 소프트웨어의 현재 상태를 나에게 보여주고 그들이 작업을 하는 것을 관찰할 수 있게 해주었다. 이 초기 연구에서 나는 내 디자인에 도움이 될 통찰력, 문제점 및 개선 기회를 수집했습니다.

중요한 기능이 빠져 있고 특정 작업이 불필요하게 복잡하여 인터페이스를 사용하기 어렵다는 것을 발견했습니다. 예를 들어, 이미지에 레이블을 지정하기 위해 운영자는 매번 도구 모음과 이미지 사이를 왔다 갔다 하여 선택, 레이블 지정, 검토 및 제출해야 했습니다. 마찬가지로 작업을 실행 취소하거나 다시 실행하는 기능도 없었습니다. 즉, 작업자는 실수를 했을 때 작업을 반복하거나 추가 조치를 취해야 했습니다.

또 다른 문제는 인터페이스가 기성 구성 요소의 혼합에 주로 의존하기 때문에 통일된 모양과 느낌이 없다는 것이었습니다. 이러한 불일치로 인해 특정 요소와 기능을 찾거나 사용하기가 어려웠습니다.

이러한 개선 기회를 염두에 두고 초기 개념을 브레인스토밍하고 와이어프레임을 만들어 두 운영자와 공유했습니다. 나는 일주일 동안 매일 와이어프레임을 운영자에게 제시하고 가상 피드백 세션을 통해 초기 인상에 대해 논의했습니다. 세션은 매우 협력적이었고 대시보드를 개선하기 위한 아이디어를 모으는 데 도움이 되었습니다.

피드백 세션 동안 나온 흥미로운 점 중 하나는 오른쪽 도구 모음에 표시되는 정보의 양과 관련하여 운영자가 자신의 작업을 선택했다는 것입니다. 내 원래 디자인은 아이콘만 표시하는 좁은 패널로 축소될 수 있는 도구 모음과 같은 매우 미니멀한 솔루션을 제안했습니다. 이렇게 하면 중심 이미지에 초점을 맞출 수 있다고 믿었습니다.

그러나 운영자는 아이콘이 무엇을 의미하고 주요 작업이 무엇인지 한 눈에 이해하기 어렵기 때문에 아이디어를 좋아하지 않았습니다. 그 중요한 통찰력으로 나는 단순한 것이 항상 더 좋은 것은 아니라는 것을 깨달았습니다. 이 경우 더 많은 정보를 가시적으로 남겨두면 운영자가 더 효율적으로 작업하는 데 도움이 됩니다.

초기 와이어프레임을 개선하고 개선한 후, 저는 Figma에서 대화형 저충실도 프로토타입을 만들고 테스트할 수 있도록 운영자와 이해 관계자에게 보냈습니다. 피드백을 받으면 모두가 만족할 때까지 디자인을 반복했습니다.

앞서 언급했듯이 원래 대시보드는 기성 UI 구성 요소를 혼합하여 만들어졌으며 제품 내 경험이 전체적으로 일관되지 않았습니다.

그러나 시간과 예산의 관점에서 이해 관계자는 가능한 한 기성품 구성 요소를 유지하기를 원했습니다. 그래서 프론트 엔드 개발자와 협력하여 버튼, 양식, 필드, 기타 UI 요소가 포함된 기존 구성 요소를 새 대시보드의 모양과 느낌에 맞게 사용자 지정했습니다. 이러한 조정은 색상, 서체, 간격 및 기타 세부 사항에 영향을 미쳤습니다. 라이브 뷰 진행 애니메이션과 같은 기존 구성 요소를 업데이트할 수 없는 경우 새 구성 요소를 만들었습니다. 대부분의 운전자 대시보드는 처음부터 이러한 방식으로 제작되었습니다.

그런 다음 색상과 오퍼레이터가 소프트웨어에서 일반적으로 볼 수 있는 사진 유형을 통합한 탐색 가능하고 충실도가 높은 프로토타입을 제작했습니다. 또한 직사각형, 연필 및 다각형과 같은 선택 도구를 포함하고 화면 하단에 운영자가 이미지를 향상시킬 수 있는 패널을 추가했습니다. 마지막으로 After Effects에서 애니메이션된 마이크로인터랙션에 대한 사양과 함께 프로토타입을 프런트 엔드 개발자에게 보내 대시보드를 구축할 수 있도록 했습니다.

처음부터 고객 대시보드 디자인하기

프로젝트의 두 번째 단계는 AI 시스템 소유자가 해결 중인 문제의 진행 상황을 관찰할 수 있는 고객 대시보드였습니다. 클라이언트는 더 많은 고객에게 제품을 출시하기 전에 이 경험을 개선하기를 원했습니다.

원래 클라이언트의 고객은 이메일을 통해 진행 보고서를 요청해야 했습니다. 각 보고서는 해결되었거나 아직 진행 중인 예외를 나타내는 PDF 또는 CSV 파일이었습니다. 클라이언트는 고객이 각 예외의 상태를 한 눈에 확인할 수 있는 방법이 필요했습니다.

내가 디자인한 대시보드를 통해 고객은 로그인하여 각 예외의 진행 상황을 실시간으로 모니터링할 수 있습니다. 그들은 들어온 이미지, 검토 중인 이미지, 이미 해결된 예외를 볼 수 있습니다. 또한 문제가 어떻게 해결되었는지 더 잘 이해하기 위해 각 솔루션의 세부 정보를 볼 수 있습니다.

대시보드는 고객이 총 참여 및 총 해상도와 같은 요약 데이터를 더 잘 이해할 수 있도록 그래프와 시각화를 제공합니다. 고객은 또한 결제 방법 및 로그인 정보를 포함하여 계정의 비즈니스 측면에 쉽게 액세스하고 관리할 수 있습니다.

고객 대시보드 프로토타입의 경우 특정 UI 요소가 어떻게 작동하는지 보여주기 위해 After Effects에서 애니메이션을 만들었습니다. 예를 들어 검토 중인 예외를 표시하기 위해 진행 애니메이션을 만들었습니다. 예외가 해결되면 확인 표시가 됩니다. 또한 프로젝트가 실행 중일 때 표시되도록 깜박이는 점을 디자인했습니다.

Figma에서 구성 요소 라이브러리 구축

확장 가능하고 유지 관리가 쉬운 제품을 디자인하는 데 있어 중요한 측면 중 하나는 구성 요소 라이브러리와 스타일 가이드를 만드는 것입니다. 표준화되고 재사용 가능한 디자인 구성 요소를 사용하면 디지털 제품에 기능을 추가하고 확장할 때 일관성과 속도를 모두 보장할 수 있습니다.

클라이언트의 라이브러리를 Figma에 보관하기로 결정했습니다. 구성 요소를 쉽게 수정하고 디자인에 나타나는 모든 위치에서 업데이트할 수 있기 때문입니다. 모든 구성 요소와 스타일은 8점 그리드를 사용하여 문서화되었습니다. 라이브러리에는 메뉴, 사이드바, 탭, 입력 아이콘 및 버튼과 같은 핵심 구성 요소가 포함되어 있고 스타일 가이드에는 타이포그래피, 색상, 아이콘, 간격 및 그리드와 같은 요소가 포함되어 있습니다.

앞으로 컴포넌트 라이브러리는 본격적인 디자인 시스템으로 진화할 수 있습니다. 그러나 현재로서는 제품 성장의 기반이 되고 사내 직원, 프리랜서 또는 에이전시 전문가가 될 미래의 디자이너를 위한 참고 자료로 사용됩니다.

사용자 연구 문제

이 프로젝트는 여러 산업에서 자동화 시스템을 강화하고 AI가 세상을 해석하는 방식을 형성하는 디지털 제품을 개선할 수 있는 기회를 제공했기 때문에 보람을 느꼈습니다. 또한 사용자 조사와 직접 관찰의 중요성을 강조했습니다. 운영자가 작업을 수행하는 것을 지켜보고 질문할 수 있는 것은 보다 효율적이고 효과적으로 작업할 수 있는 대시보드를 제공하는 데 필수적이었습니다. 디자이너는 처음에 자신의 경험을 이해할 때까지 작업 방식을 개선할 수 없습니다.

Toptal 블로그에 대한 추가 읽기:

• 대시보드 디자인 – 고려 사항 및 모범 사례
• 일관성이 핵심 - Figma 디자인 시스템을 구축하는 방법
• UX 연구 기법 및 응용
• 사용자 연구의 가치
• UX의 진정한 ROI: Executive Suite에 대한 확신