웹3 인터페이스 디자인을 위한 7가지 휴리스틱

사용성 휴리스틱은 사이트의 사용성을 측정하는 데 사용할 수 있는 광범위한 '경험 법칙'입니다. 여기에 소개된 7가지 휴리스틱은 웹3에 특화된 것으로, Jakob Nielsen의 상호작용 설계를 위한 10가지 일반 원칙 (opens in a new tab)과 함께 사용해야 합니다.

웹3를 위한 7가지 사용성 휴리스틱

피드백은 행동을 따른다
보안 및 신뢰
가장 중요한 정보는 명확하다
이해하기 쉬운 용어
행동은 가능한 한 짧게
네트워크 연결은 가시적이고 유연해야 한다
지갑이 아닌 앱에서 제어

정의 및 예시

1. 피드백은 행동을 따른다

어떤 일이 발생했거나 발생하고 있을 때 명확하게 알 수 있어야 합니다.

사용자는 이전 단계의 결과를 바탕으로 다음 단계를 결정합니다. 따라서 시스템 상태에 대한 정보를 계속 제공받는 것이 중요합니다. 웹3에서는 트랜잭션이 블록체인에 커밋되기까지 시간이 걸릴 수 있으므로 특히 중요합니다. 기다리라는 피드백이 없으면 사용자는 어떤 일이 일어났는지 확신할 수 없습니다.

팁:

메시지, 알림 및 기타 경고를 통해 사용자에게 알립니다.
대기 시간을 명확하게 전달합니다.
작업이 몇 초 이상 걸리는 경우 타이머나 애니메이션으로 사용자에게 무언가 진행되고 있다는 느낌을 주어 안심시킵니다.
프로세스에 여러 단계가 있는 경우 각 단계를 보여줍니다.

예시: 트랜잭션과 관련된 각 단계를 보여주면 사용자가 프로세스의 어느 단계에 있는지 알 수 있습니다. 적절한 아이콘을 통해 사용자는 자신의 행동 상태를 알 수 있습니다.

2. 보안 및 신뢰 내재화

보안을 우선시해야 하며, 이는 사용자에게 강조되어야 합니다. 사람들은 자신의 데이터를 매우 중요하게 생각합니다. 안전은 종종 사용자의 주된 관심사이므로 설계의 모든 수준에서 고려되어야 합니다. 항상 사용자의 신뢰를 얻기 위해 노력해야 하지만, 이를 수행하는 방법은 앱마다 다를 수 있습니다. 나중에 생각할 것이 아니라, 전반에 걸쳐 의식적으로 설계되어야 합니다. 최종 UI뿐만 아니라 소셜 채널과 개발문서를 포함한 사용자 경험 전반에 걸쳐 신뢰를 구축하십시오. 탈중앙화 수준, 재무 다중 서명 상태, 팀의 신상 공개 여부 등이 모두 사용자의 신뢰에 영향을 미칩니다.

팁:

감사 내역을 자신 있게 나열하십시오
여러 감사를 받으십시오
설계한 안전 기능을 홍보하십시오
기본 통합을 포함한 잠재적 위험을 강조하십시오
전략의 복잡성을 전달하십시오
사용자의 안전 인식에 영향을 미칠 수 있는 비UI 문제를 고려하십시오

예시: 눈에 잘 띄는 크기로 바닥글에 감사 내역을 포함시키십시오.

3. 가장 중요한 정보는 명확하다

복잡한 시스템의 경우 가장 관련성 높은 데이터만 표시합니다. 가장 중요한 것이 무엇인지 결정하고 표시의 우선순위를 정합니다. 너무 많은 정보는 부담스럽고 사용자는 일반적으로 의사 결정을 할 때 한 가지 정보에 의존합니다. 디파이에서는 수익 앱의 연이율(APR)과 대출 앱의 담보인정비율(LTV)이 될 것입니다.

팁:

사용자 조사를 통해 가장 중요한 지표를 발견할 수 있습니다
핵심 정보는 크게, 다른 세부 정보는 작고 눈에 띄지 않게 만드십시오
사람들은 읽지 않고 훑어봅니다. 디자인이 훑어보기 쉽도록 하십시오

예시: 풀 컬러의 큰 토큰은 훑어볼 때 쉽게 찾을 수 있습니다. 연이율(APR)은 크고 강조 색으로 강조 표시됩니다.

4. 명확한 용어

용어는 이해하기 쉽고 적절해야 합니다. 전문 용어는 완전히 새로운 정신 모델을 구축해야 하므로 큰 장애물이 될 수 있습니다. 사용자는 디자인을 이미 알고 있는 단어, 구문 및 개념과 연관시킬 수 없습니다. 모든 것이 혼란스럽고 낯설게 보이며, 사용을 시도하기 전에 가파른 학습 곡선이 있습니다. 사용자는 돈을 절약하려는 목적으로 디파이에 접근할 수 있지만, 마주하는 것은 채굴, 파밍, 스테이킹, 배출, 뇌물, 볼트, 락커, ve토큰, 베스팅, 에폭, 탈중앙화 알고리즘, 프로토콜 소유 유동성 등입니다… 가장 넓은 그룹의 사람들이 이해할 수 있는 간단한 용어를 사용하려고 노력하십시오. 프로젝트만을 위한 새로운 용어를 만들지 마십시오.

팁:

간단하고 일관된 용어를 사용하십시오
기존 언어를 최대한 많이 사용하십시오
자신만의 용어를 만들지 마십시오
나타나는 대로 관례를 따르십시오
사용자를 최대한 교육하십시오

예시: '나의 보상'은 이 프로젝트를 위해 만들어진 새로운 단어가 아니라 널리 이해되는 중립적인 용어입니다. 보상 자체가 다른 토큰으로 지급되더라도 실제 세계의 정신 모델과 일치시키기 위해 보상은 미국 달러로 표시됩니다.

5. 행동은 가능한 한 짧게

하위 작업을 그룹화하여 사용자의 상호작용 속도를 높입니다. 이는 UI뿐만 아니라 스마트 계약 수준에서도 수행될 수 있습니다. 사용자가 일반적인 작업을 완료하기 위해 시스템의 한 부분에서 다른 부분으로 이동하거나 시스템을 완전히 벗어날 필요가 없어야 합니다.

팁:

가능한 경우 "승인"을 다른 작업과 결합하십시오
서명 단계를 최대한 가깝게 묶으십시오

예시: '유동성 추가'와 '스테이킹'을 결합하는 것은 사용자의 시간과 가스를 모두 절약하는 가속기의 간단한 예입니다.

6. 네트워크 연결은 가시적이고 유연해야 한다

사용자에게 연결된 네트워크를 알리고 네트워크를 변경할 수 있는 명확한 바로 가기를 제공합니다. 이는 멀티체인 앱에서 특히 중요합니다. 연결이 끊어졌거나 지원되지 않는 네트워크에 연결된 상태에서도 앱의 주요 기능은 계속 표시되어야 합니다.

팁:

연결이 끊긴 동안 가능한 한 많은 앱을 표시하십시오
사용자가 현재 연결된 네트워크를 표시하십시오
사용자가 네트워크를 변경하기 위해 지갑으로 이동하게 하지 마십시오
앱에서 사용자가 네트워크를 전환해야 하는 경우 기본 콜투액션에서 해당 작업을 유도하십시오
앱에 여러 네트워크에 대한 마켓이나 볼트가 포함된 경우 사용자가 현재 보고 있는 세트를 명확하게 명시하십시오

예시: 앱바에서 사용자가 연결된 네트워크를 표시하고 변경할 수 있도록 하십시오.

7. 지갑이 아닌 앱에서 제어

UI는 사용자에게 알아야 할 모든 것을 알려주고 해야 할 모든 것을 제어할 수 있도록 해야 합니다. 웹3에는 UI에서 수행하는 작업과 지갑에서 수행하는 작업이 있습니다. 일반적으로 UI에서 작업을 시작한 다음 지갑에서 확인합니다. 이 두 가닥이 신중하게 통합되지 않으면 사용자는 불편함을 느낄 수 있습니다.

팁:

UI의 피드백을 통해 시스템 상태를 전달하십시오
기록을 보관하십시오
이전 거래에 대한 블록 탐색기 링크를 제공하십시오
네트워크를 변경할 수 있는 바로 가기를 제공하십시오.

미묘한 컨테이너는 사용자가 지갑에 어떤 관련 토큰을 가지고 있는지 보여주고, 주요 CTA는 네트워크를 변경할 수 있는 바로 가기를 제공합니다.