복잡한 솔루션이 있을 때 간단한 UI를 디자인하는 방법

이 기사는 사람과 데이터 사이의 장벽을 제거하기 위해 아름답고 인간 중심적인 경험을 만드는 Flatfile의 친애하는 친구들의 따뜻한 지원을 받았습니다. 감사합니다!

그들이 말하는 것은 무엇입니까? 복잡한 문제에는 복잡한 솔루션이 필요합니까? 앱과 소프트웨어를 개발할 때는 확실히 그렇습니다.

하지만 복잡한 백엔드가 프론트엔드로 흘러가지 않도록 하려면 어떻게 해야 할까요?

일반적으로 복잡한 UI는 많은 사람들이 웹사이트나 모바일 앱을 포기하는 이유 이상입니다. 그러나 유료 사용자나 구독 사용자의 경우 소프트웨어의 복잡한 인터페이스에 만족할 것이라고 기대하지 마십시오.

당신의 제품이 얼마나 놀라운지는 중요하지 않습니다. 외관상 사용자를 미치게 만들면 그 대가로 많은 비용이 드는 사용자 이탈을 기대할 수 있습니다.

Flatfile 팀은 성공적인 데이터 가져오기를 구축하여 이 문제에 매우 익숙합니다. 이 기술은 많은 디자이너가 스스로 구축하기 위해 고군분투해 온 기술입니다. 아래에서 이 UI 디자인 문제를 극복하는 데 도움이 되었으며 귀하에게도 도움이 될 수 있는 몇 가지 팁을 살펴보겠습니다.

복잡한 솔루션을 위한 간단한 UI를 디자인하는 방법

솔루션의 프론트엔드를 디자인할 때의 목표는 사용자에게(때로는 최종 사용자에게도) 매우 간단하고 직관적인 인터페이스를 제공하는 것입니다.

그렇다면 Flatfile은 어떻게 이것을 달성할 수 있었습니까? 데이터 온보딩 프로세스만으로도 다양한 소스, 파일 유형 및 사용자로부터 데이터를 가져와 앱 내에서 사용 가능한 데이터로 변환해야 하는 복잡한 프로세스가 될 수 있습니다. 사용자가 프런트엔드에서 데이터를 준비, 검증 및 삭제하도록 하는 것도 쉬운 일이 아닙니다.

표준 소프트웨어 설계 프로세스 외에도 Flatfile은 사용자가 자신의 제품이 실제로 얼마나 복잡한지 알 수 없도록 추가 조치를 취했습니다. 그들이 배운 것은 다음과 같습니다.

1. 사용자 우선 UI를 디자인할 수 있도록 사용자의 목표 파악

사용자가 유용하다고 생각하는 제품을 만들려면 사용자의 목표와 관점에서 디자인해야 합니다. 이를 놓치면 목표와 우선 순위에 우선 순위를 부여하는 UI로 끝날 수 있으므로 배후의 복잡성이 빛을 발할 수 있습니다.

이 실수가 앱이나 소프트웨어에 심각한 영향을 미칠 수 있는 방법을 살펴보겠습니다.

Instagram은 최근에 오랜 인터페이스의 머리글과 바닥글을 업데이트했습니다. 2020년 11월 이전과 이후의 헤더는 다음과 같습니다.

이전 디자인에는 두 가지 기호/동작이 포함되어 있습니다.

• 사진을 찍거나 업로드하는 카메라 아이콘입니다.
• 인맥과 채팅하기 위한 메신저 아이콘.

가장 최근의 디자인은 모든 아이콘을 오른쪽으로 피벗시켰습니다. 이제 세 가지가 있습니다.

• Instagram 게시물, 스토리, 릴 및 삶을 만드는 더하기 기호.
• 활동을 보기 위한 하트 기호(예: 약혼 후, 새 팔로워 등).
• 메신저 아이콘은 동일한 디자인과 배치를 유지합니다.

헤더를 보면 여기에서 크게 잘못되었다고 생각하지 않을 수 있습니다. 그러나 Instagram은 미학이나 사용성을 개선하기 위해 탐색을 다시 디자인하지 않았을 가능성이 큽니다. 새 바닥글이 그 증거입니다.

중간 및 마지막에서 두 번째 아이콘을 보십시오. 11월 이후에는 더하기 아이콘과 하트 아이콘이 앱의 오른쪽 상단으로 옮겨지고 다음과 같이 교체되었습니다.

• TikTok과 유사하게 작동하는 기능인 Instagram 릴에 대한 링크(그리고 틀림없이 플랫폼의 중독성을 증가시킵니다).
• 사용자가 적극적으로 팔로우하는 매장이 아닌 인기 매장에서 쇼핑할 수 있는 기능인 Instagram 쇼핑 링크입니다.

UI는 더 이상 (주로) 사용자가 즐겨찾는 계정의 콘텐츠를 선별하거나 다른 사용자와 유기적인 관계를 맺도록 권장하지 않습니다. 대신 UI는 플랫폼의 새로운 유료 플레이 측면에 우선 순위를 부여하여 플랫폼에 돈을 쓰는 브랜드와 영향력 있는 사람을 선호합니다.

결과적으로 알림 및 생성 버튼이 엄지 영역에서 앱 모서리로 이동함에 따라 앱의 사용성이 손상되었습니다. 앱을 사용하기 더 어렵게 만들 뿐만 아니라 배후에서 무슨 일이 일어나고 있는지 더 잘 알 수 있습니다. 인스타그램 사용자가 직장에서 복잡한 알고리즘과 비즈니스 결정에 대해 생각하지 않았다면 이제 UI가 이에 주의를 환기시킵니다.

다른 작업을 수행하기 전에 사용자가 달성하고자 하는 것과 달성하기를 기대 하는 방식을 파악하십시오. 그런 다음 Flatfile의 제품 책임자인 Randy Wiafe가 다음과 같이 수행하는 방식과 유사하게 사용자의 목표를 요약합니다.

“Flatfile 사용자의 목표는 고객 데이터를 원활하게 가져오는 것입니다. Flatfile의 사용자는 한 소프트웨어 제품에서 다른 소프트웨어 제품으로 데이터를 이동해야 하며 이 프로세스는 새로운 고객이 갖게 될 첫 번째 제품 경험 중 하나인 데이터 가져오기이기 때문에 가능한 한 쉬워야 합니다.”

당신은 이것을 놓칠 여유가 없습니다. 사용자의 목표와 선호하는 여정에 부합하는 UI를 디자인하지 않는다면 뒤에서 일어나는 복잡성을 드러낼 가능성이 높기 때문입니다.

2. MVP를 만들기 위해 경쟁 제품을 평가하십시오.

최소한의 실행 가능한 제품은 앱을 빌드할 때마다 절대적으로 필요합니다. 가장 간단한 제품 버전만 개발하여 시작함으로써 시간과 비용을 절약할 수 있을 뿐만 아니라 실제 작동 중인 베타 버전은 반복하면서 실제 사용자 피드백을 수집할 수 있는 무언가를 제공합니다.

그것이 Flatfile이 한 일입니다. Wiafe는 MVP의 가치를 다음과 같이 설명합니다.

“베타는 고객과 최종 사용자가 제품과 상호 작용하는 방식에 대해 우리의 눈을 뜨게 했습니다. 사용자가 차단된 이유와 방법을 이해할 수 있어 경험을 상당히 개선할 수 있었습니다."

즉, MVP의 UI를 얼마나 최소화해야 하는지 어떻게 알 수 있습니까? 최소한의 것과 사용할 수 없는 것 사이에는 큰 차이가 있기 때문입니다.

디자인 프로세스를 처음부터 시작하는 것보다 경쟁업체의 소프트웨어 내부에서 시간을 보내는 것이 좋습니다.

분명히, 나는 당신이 다른 사람의 디자인을 훔치는 것을 옹호하는 것이 아닙니다. 그러나 내가 제안하는 것은 당신이 그들과 함께 직접적인 경험을 할 수 있다는 것입니다.

우선 이를 통해 잠재 고객이 이미 편안하고 자신 있게 참여할 수 있는 디자인 트렌드인 UI 전반의 트렌드를 식별할 수 있습니다. 둘째, 이 데모를 사용하여 MPV를 필요한 최소 수준으로 줄일 수 있습니다.

지불 게이트웨이 소프트웨어를 구축한다고 가정해 보겠습니다. 스트라이프로 시작할 수 있습니다.

그리고 2체크아웃:

이 대시보드에서 모든 데이터를 제거하고 주요 구성 요소, 탐색 및 레이블만 남겼습니다. 두 UI 사이에서 볼 수 있는 공통 스레드는 무엇입니까?

• 헤더 중앙 부근의 검색창,
• 오른쪽 상단 모서리에 있는 사용자 설정 또는 계정 정보에 대한 링크,
• 페이지의 ⅙ 또는 ⅕ 사이를 차지하는 왼쪽 정렬 제어판,
• 자체 포함된 블록 내에 제시된 데이터,
• 레이블 지정에 사용되는 중립적인 산세리프 글꼴,
• 색상 대비는 최소화되며 선택한 탭을 나타내거나 데이터 세트를 구별하기 위해 대시보드에만 존재합니다.

그것은 기본적인 분석일 뿐이지만 요점은 알 수 있습니다. 세부 사항을 제거하고 경쟁사의 제품을 와이어프레임으로 효과적으로 전환함으로써 사용자가 편안하고 자신 있게 소프트웨어 내에서 볼 수 있는 설계 세부 사항을 식별할 수 있습니다.

또한 제품에 소요된 이 시간을 사용하여 제품의 복잡성이 어디에서 나타나는지 파악할 수 있습니다. 데이터의 계층 구조가 비논리적으로 표시되어 있습니까? 잘못된 화면에 나타나서 복잡하게 만드는 요소가 포함되어 있습니까? 사용자에게 주요 목표를 달성하기 위해 너무 많은 단계를 밟도록 요구하고 있습니까?

Wiafe가 제안하는 한 가지는 MVP를 와이어프레임처럼 엄격하게 취급하지 않는 것입니다.

“저희가 중점을 두었던 또 다른 영역은 이 경험을 사용자에게 좋게 만드는 방법이었습니다. 우리는 베타가 차갑고 흥미롭지 않기를 바랐습니다. 우리는 좋은 첫인상을 남기고 싶었고 이는 소프트웨어를 출시하기 전에 소프트웨어에 특성을 부여하는 데 시간을 할애해야 한다는 것을 의미했습니다."

예, 경쟁사의 소프트웨어를 사용하여 UI를 단순하게 유지하는 디자인 사양을 구체화할 것입니다. 그러나 MVP는 여전히 사용자가 사용하고 싶어하는 실행 가능한 제품이어야 합니다. 즉, 매력적으로 디자인해야 합니다.

3. 복잡성을 점진적으로 도입하고 사용자 테스트로 확인

배달 앱을 통해 식당에서 음식을 주문했는데 왜 이렇게 오래 걸리는지 궁금하신가요?

당신은 오후 8시에 주문을 합니다. 앱은 레스토랑이 몇 초 후에 주문을 확인했으며 8시 45분경에 음식을 받을 수 있다고 말합니다. 8시 40분에 앱을 열어 지도에서 배달 기사가 어디에 있는지 확인하고 왜 이동하지 않는지 궁금합니다. 또는 더 나쁜 것은 그들이 잘못된 방향으로 가고 있는 이유입니다. 속이 울렁거리기 시작하고 주문을 직접 받지 못한 것을 후회합니다.

이것이 익숙하지 않다면 다행입니다. 그러나 Google에서 "배달 기사가 앱에서 잘못된 방향으로 이동했습니다"라고 하면 무슨 말인지 알 수 있습니다.

이것은 외식하는 사람들에게 새로운 문제입니다. 과거에는 주문 확인 메시지만 받은 후 음식이 도착하면 전화, 문자, 문을 두드리는 것뿐이었습니다.

그러나 배달 앱은 지난 1년 동안 변경되어 식당의 음식 요리 진행 상황에 대한 완전한 가시성을 제공할 뿐만 아니라 배달 기사의 정확한 위치를 보여줍니다.

이것이 배달 앱의 성공에 절대적으로 필요한 기능이었습니까? 대량의 고객 서비스 불만, 주문 환불 또는 사용자 이탈을 경험할 정도로 사용자를 화나게 하는 경우에는 그렇지 않습니다.

이것이 MVP에 복잡성을 조금씩 도입해야 하는 이유이며 사용자 테스트를 통해 가치가 있는 추가 사항임을 확인한 후에만 완전히 통합되어야 합니다.

Wiafe는 다음과 같이 설명합니다.

“제품의 사용자에 따라 제품에 복잡성을 도입하는 방식이 달라집니다. Portal 제품을 사용하여 개발자와 더 자주 작업하므로 수입업체의 복잡성이 증가하는 데 문제가 없습니다. 그러나 Concierge는 기술적인 성향이 덜한 고객 성공 및 구현 팀을 위해 만들어졌습니다. 따라서 테스트하기 전까지 복잡한 기능이나 구성 요소를 소프트웨어에 추가하는 데 매우 신중했습니다.”

처음 시작할 때 사용자의 목표와 기대치를 이해하는 것이 중요합니다. 그러나 일단 출시된 라이브 앱이나 소프트웨어가 있으면 사용자의 마음을 스쳐가는 모든 것을 이해한다고 가정하지 마십시오.

사용자 입장에서 있는 그대로 경험하지 않는 한 새로운 복잡성 계층이 사용자가 인식하는 유용성에 어떤 영향을 미칠지 전혀 알 수 없습니다.

따라서 UI에 더 많은 복잡성을 도입하거나 너무 복잡하다고 생각되는 것을 제거할 때 어떤 일이 일어날지와 관련된 작업 가설을 공식화하는 것이 매우 중요합니다. 데이터 기반 아이디어가 있으면 사용자로부터 피드백을 요청하고 제품을 개선할 수 있습니다.

마무리

고객이 사용할 앱을 구축하려면 매주 고객 지원팀에 도움을 요청해야 하는 것이 아니라 실제로 사용할 수 있는 것을 제공해야 합니다. 또는 이전보다 더 많은 스트레스와 좌절을 야기하는 무언가를 사용하는 이유에 대해 의문을 제기하게 합니다.

따라서 얼마나 많은 백엔드 복잡성이 프론트엔드를 감염시킬 수 있는지 주의하십시오. UI가 탐색하기에 너무 복잡하거나 이해하기에 너무 복잡하면 사용자는 반란을 일으키고 대량으로 달아날 것입니다.