dApp, 지갑, 거래소를 위한 Web3 인터페이스 디자인, 한 상태씩

Web3 UI/UX 디자인이 다루는 범위

빠른 테스트: 신규 사용자에게 프로토타입을 사용해 테스트 트랜잭션을 보내보라고 하세요. 그들이 망설이는 모든 순간을 기록하세요.

Web3 UI/UX 디자인은 dApp, 지갑, 거래소 또는 랜딩 플로우를 통한 경로를 더 쉽게 이해하고 완료할 수 있게 만듭니다. 리서치와 상호작용 계획을 시각적 디자인과 결합하여 인터페이스가 사용자가 무엇을 할 수 있고 다음에 어떤 일이 일어나는지 설명합니다.

이 서비스는 신제품을 준비 중이거나, 혼란스러운 여정을 재구성하거나, 개발 전에 기존 인터페이스를 정렬할 때 적합합니다. 특히 대상 사용자에 암호화폐에 익숙하지 않은 사람들이 포함되어 지갑 연결, 트랜잭션 확인 또는 가스 수수료를 아직 이해하지 못할 수 있을 때 유용합니다.

작업 범위는 다음과 같습니다:

• 사용자 리서치 및 관련 경쟁사 경험 검토.
• 진입점에서 작업 완료까지의 이동을 보여주는 사용자 플로우.
• 시각적 다듬기 전에 구조와 우선순위를 합의하기 위한 와이어프레임.
• 일관된 화면을 위한 시각적 디자인 시스템 및 컴포넌트 라이브러리.
• Figma의 클릭 가능한 프로토타입, 사용성 테스트 및 개발자 핸드오프.

프로젝트에 일관된 시각적 아이덴티티도 필요한 경우, 인터페이스 작업을 디자인 및 비주얼 또는 암호화폐 브랜딩과 함께 진행하세요. 올바른 시작점은 가장 중요한 제품 작업입니다—모든 화면을 한 번에 다시 그리라는 요청이 아닙니다.

Web3 사용자 여정을 어떻게 매핑하나요?

강력한 Web3 인터페이스는 사용자의 목표, 그들이 내려야 할 결정 및 각 단계에서 필요한 정보에 대한 명확한 설명으로 시작됩니다. 화면 레이아웃을 확정하기 전에 여정을 매핑하여 변경이 쉬울 때 팀이 혼란스러운 로직을 해결할 수 있도록 합니다.

제품, 기존 화면, 대상 사용자 및 경쟁사 경험을 검토한 후 핵심 작업과 질문을 식별합니다. 지갑이나 dApp의 경우 온보딩, 지갑 연결, 트랜잭션 작업 및 확인 또는 복구 경로를 추적할 수 있습니다. 이 순서를 플로우로 문서화하고 결정 지점, 누락된 정보 및 사용자가 안심이 필요할 수 있는 위치를 지적합니다.

상세 디자인으로 넘어가기 전에 다음을 준비하세요:

• 제품의 주요 사용자 작업 및 의도된 대상.
• 가능한 경우 기존 화면, 제품 노트 또는 작업 빌드.
• 연결된 지갑 또는 사용자 확인이 필요한 작업.
• 알려진 트랜잭션 상태, 오류 사례 및 지원 안내.
• 개발 팀이 이미 알고 있는 기술적 제약 사항.

이 자료를 사용하여 어떤 여정이 계획에 포함되어야 하고 프로토타입이 무엇을 보여줘야 하는지 합의합니다. 이러한 단계를 평이한 언어로 설명해야 하는 제품 메시징의 경우, 디자인을 Web3 콘텐츠 제작과 조정할 수 있습니다.

인터페이스에 표시해야 할 지갑 및 트랜잭션 상태는 무엇인가요?

Web3 인터페이스는 지갑 및 트랜잭션 상태를 보이게 만들어 사용자가 작업이 성공했는지 추측하지 않도록 해야 합니다. 이러한 상태를 메인 화면과 함께 디자인하면 제품 팀이 검토하고 구축할 더 완전한 경험을 얻을 수 있습니다.

각 관련 작업에 대해 사용자가 작업 전, 중, 후에 무엇을 보는지 고려합니다. 여기에는 지갑 연결, 대기 중인 트랜잭션, 확인, 명확한 성공 상태 및 유용한 오류 메시지가 포함됩니다. 가스 또는 다른 결정이 작업에 영향을 미치는 경우, 인터페이스는 의도된 대상에 적합한 언어로 선택을 설명해야 합니다. 비암호화폐 사용자를 위한 온보딩은 사전 지식을 가정하지 않고 관련 시점에 익숙하지 않은 단계를 소개해야 합니다.

플로우의 실용적인 검토는 다음을 묻습니다:

• 사용자가 지갑을 연결해야 할 때를 알 수 있습니까?
• 어떤 작업을 확인하고 있는지 명확합니까?
• 화면이 무엇이 대기 중이고 다음에 무엇을 해야 하는지 설명합니까?
• 누군가 위치를 잃지 않고 오류에서 복구할 수 있습니까?
• 레이블과 메시지가 연결된 화면에서 일관됩니까?

이러한 질문은 와이어프레임, 시각적 디자인 및 프로토타입 동작을 형성합니다. 또한 개발자에게 구현할 상태에 대한 공유 참조를 제공합니다. 트랜잭션 메시지, 온보딩 프롬프트 또는 설명 텍스트에 전용 작성이 필요한 경우 인터페이스를 Web3 카피라이팅과 조정할 수 있습니다.

팀이 Figma에서 받는 결과물

경험 법칙: 모든 트랜잭션에 대해 5가지 상태(준비, 대기 중, 성공, 실패, 취소)를 보여주세요.

팀은 연결된 디자인 패키지를 받습니다: 문서화된 여정, 화면 디자인, 재사용 가능한 인터페이스 요소 및 주요 상호작용이 어떻게 결합되는지 보여주는 프로토타입입니다. 정확한 화면 세트는 합의된 계획을 따르므로 모든 사람이 무엇이 디자인되고 검토되고 있는지 알 수 있습니다.

리서치 및 경쟁사 검토는 사용자 플로우에 정보를 제공하고, 플로우는 와이어프레임에 정보를 제공하며, 승인된 구조는 시각적 디자인 시스템 및 컴포넌트 라이브러리로 이동합니다. 그런 다음 관련 화면을 클릭 가능한 프로토타입으로 연결하고 사용성 테스트를 사용하여 명확화가 필요한 위치를 식별합니다. 최종 Figma 핸드오프는 개발자에게 디자인된 화면 및 상태에 대한 정리된 참조를 제공합니다.

패키지에는 다음이 포함될 수 있습니다:

• 제품과 관련된 리서치 노트 및 경쟁사 검토 결과.
• 선택된 여정에 대한 사용자 플로우 및 와이어프레임.
• 시각적 인터페이스 디자인 및 재사용 가능한 컴포넌트 라이브러리.
• 검토 및 사용성 테스트를 위한 클릭 가능한 프로토타입 경로.
• Figma의 개발자 핸드오프, 참조를 위해 정리된 화면 및 상태.

이를 통해 제품, 디자인 및 개발 팀이 구현 전에 논의할 공통 아티팩트를 얻을 수 있습니다. 프로젝트에 인터페이스 출시에 대한 더 넓은 커뮤니케이션 계획이 필요한 경우, 작업을 소셜 미디어 및 콘텐츠와 연결하세요. 시작 시 받을 결과물을 정의하여 프로토타입 깊이와 화면 범위가 팀의 다음 결정과 일치하도록 합니다.

디자인이 브리프에서 핸드오프로 진행되는 방식

작업은 합의된 검토 지점을 통해 제품 컨텍스트에서 테스트된 프로토타입 및 개발자 핸드오프로 이동합니다. MarketingExtra에서 첫 번째 검토는 브리프, 기존 자료 및 팀 제약 사항이 올바른 사용자 여정을 매핑할 충분한 컨텍스트를 제공하는지 확인합니다.

킥오프 후 대상 사용자, 주요 작업, 소스 자료 및 작업을 검토할 의사 결정자를 확인합니다. 인터페이스를 구체화하기 전에 플로우와 와이어프레임을 매핑하여 팀이 시각적 세부 사항이 확정되기 전에 구조에 응답할 수 있도록 합니다. 시각적 방향과 컴포넌트 접근 방식이 승인되면 선택된 화면을 프로토타입으로 연결하고 관련 작업을 테스트합니다. 최종 핸드오프는 개발 팀을 위해 Figma에서 준비됩니다.

일정은 계획을 이해한 후 합의됩니다. 여정의 수와 복잡성, 제품 결정 및 소스 자료의 가용성, 의사 결정자가 디자인 체크포인트를 검토할 수 있는 속도에 따라 결정됩니다. 한 명의 의사 결정자를 지정하고, 초기에 기존 제품 문서를 공유하며, 각 검토 시 피드백을 하나의 응답으로 수집하여 작업이 원활히 진행되도록 도울 수 있습니다.

제품 개요, 현재 화면 또는 빌드, 대상 사용자 및 가장 개선이 필요한 여정을 보내주세요. 해당 자료를 검토하고, 계획을 명확히 하며, 개발자 준비 프로토타입에 도달하는 데 필요한 디자인 작업을 개요로 설명드리겠습니다.

Web3 인터페이스 6가지 체크리스트

개발자가 시작하기 전에 이 6가지를 확인하세요. 이는 대기, 실패 및 서명과 같이 Web3 사용자가 신뢰를 잃는 순간을 다루며, 디자인을 더 쉽게 구축하고 테스트할 수 있게 만듭니다. 체크하기 어려운 항목이 있다면, 이는 돈이나 시간을 쓰기 전에 해결해야 할 사항을 보여주는 유용한 신호입니다.

1. 모든 5가지 트랜잭션 상태를 디자인하세요.
2. 사용자가 서명하기 전에 수수료와 네트워크를 표시하세요.
3. 오류 메시지를 평이한 언어로 작성하세요.
4. 신규 사용자 한 명과 함께 플로우를 테스트하세요.
5. 작은 휴대폰에서 레이아웃을 확인하세요.
6. 명명된 컴포넌트가 포함된 Figma 파일을 전달하세요.

용어 한 줄 설명

트랜잭션 상태는 결제 또는 작업의 단계(예: 대기 중 또는 실패)를 의미합니다.

와이어프레임: 시각적 디자인 전에 레이아웃을 보여주는 화면의 간단한 스케치.

디자인 프로세스가 확립할 수 있는 것

디자인은 제품이 지갑 작업 및 트랜잭션 상태를 어떻게 전달하는지 보여줄 수 있지만, 외부 지갑, 체인 또는 계약이 모든 상황에서 어떻게 작동할지 결정할 수는 없습니다. 이러한 시스템은 제품 팀이 처리해야 하는 상태나 메시지를 반환할 수 있으므로, 디자인된 상태를 명시적으로 만들고 팀이 제공할 수 있는 기술 정보와 정렬합니다. 프로토타입과 사용성 테스트는 사람들이 의도된 여정을 이해하는지 평가하는 데 도움이 되지만, 채택이나 성공적인 트랜잭션을 보장하지는 않습니다. 핸드오프를 위해 팀이 확인한 예상 상태(예: 연결 불가, 사용자 거부, 확인 대기 중, 반환된 오류)를 기록하여 개발자가 디자인된 응답과 제품 또는 기술 결정이 필요한 조건을 구분할 수 있도록 합니다.

3가지를 보내주세요: 제품 요구사항, 현재 화면 및 주시하는 경쟁사 3곳. 이를 바탕으로 리서치와 플로우를 계획하고 디자인 시작 전에 비용을 문서로 확인합니다.

이용 방법

1. 제품 컨텍스트 공유제품 개요, 대상 사용자 설명, 현재 화면 또는 빌드, 그리고 개선하려는 주요 사용자 작업을 보내주세요.
2. 여정 및 계획 합의자료를 함께 검토하고, 우선순위 플로우를 식별하며, 화면, 상태 및 프로토타입 깊이를 정의합니다.
3. 플로우 및 와이어프레임 검토여정을 매핑하고 구조를 배치하여 팀이 시각적 구체화 전에 제품 질문을 해결할 수 있도록 합니다.
4. 인터페이스 디자인 및 테스트시각적 시스템과 컴포넌트를 만들고, 합의된 화면을 프로토타입으로 연결하며, 사용성 테스트를 통해 명확화가 필요한 지점을 찾습니다.
5. Figma 핸드오프 수령승인된 디자인과 관련 상태를 Figma에서 정리하여 개발 팀이 명확한 구현 참조를 가질 수 있도록 합니다.