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

사용성 휴리스틱은 사이트의 사용성을 측정하는 데 사용할 수 있는 광범위한 "경험 법칙"입니다. 여기에 소개된 7가지 휴리스틱은 Web3에 특별히 맞춰져 있으며, 제이콥 닐슨(Jakob Nielsen)의 인터랙션 디자인을 위한 10가지 일반 원칙 (opens in a new tab)과 함께 사용해야 합니다.

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

행동에 따른 피드백
보안과 신뢰
가장 중요한 정보의 명확성
이해하기 쉬운 용어
가능한 한 짧은 작업 단계
가시적이고 유연한 네트워크 연결
지갑이 아닌 앱에서의 제어

정의 및 예시

1. 행동에 따른 피드백

어떤 일이 일어났거나 일어나고 있을 때 이를 명확히 알 수 있어야 합니다.

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

팁:

메시지, 알림 및 기타 경고를 통해 사용자에게 정보를 제공하세요.
대기 시간을 명확하게 전달하세요.
작업이 몇 초 이상 걸릴 경우, 타이머나 애니메이션을 통해 무언가 진행되고 있음을 알려 사용자를 안심시키세요.
프로세스에 여러 단계가 있는 경우 각 단계를 보여주세요.

예시: 트랜잭션에 포함된 각 단계를 보여주면 사용자가 프로세스의 어느 단계에 있는지 아는 데 도움이 됩니다. 적절한 아이콘은 사용자에게 작업 상태를 알려줍니다.

2. 내장된 보안과 신뢰

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

팁:

감사를 받은 내역을 자랑스럽게 나열하세요.
여러 번의 감사를 받으세요.
설계한 안전 기능을 적극적으로 알리세요.
기본 연동을 포함하여 발생할 수 있는 위험을 강조하세요.
전략의 복잡성을 전달하세요.
사용자의 안전 인식에 영향을 미칠 수 있는 UI 외적인 문제도 고려하세요.

예시: 푸터에 눈에 띄는 크기로 감사 내역을 포함하세요.

3. 가장 중요한 정보의 명확성

복잡한 시스템의 경우 가장 관련성 높은 데이터만 표시하세요. 무엇이 가장 중요한지 결정하고 표시 우선순위를 정하세요. 너무 많은 정보는 부담을 주며, 사용자는 일반적으로 결정을 내릴 때 한 가지 정보에 의존합니다. 탈중앙화 금융(DeFi)의 경우, 이는 아마도 수익 창출 앱의 APR과 대출 앱의 LTV일 것입니다.

팁:

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

예시: 풀 컬러로 된 큰 토큰은 훑어볼 때 찾기 쉽습니다. APR은 크고 강조 색상으로 눈에 띄게 표시됩니다.

4. 명확한 용어

용어는 이해하기 쉽고 적절해야 합니다. 기술 전문 용어는 완전히 새로운 멘탈 모델을 구축해야 하므로 큰 장애물이 될 수 있습니다. 사용자는 디자인을 이미 알고 있는 단어, 구문 및 개념과 연관시킬 수 없습니다. 모든 것이 혼란스럽고 낯설게 느껴지며, 사용을 시도하기 전부터 가파른 학습 곡선에 직면하게 됩니다. 사용자가 돈을 모으고 싶어서 DeFi에 접근했을 때 발견하는 것은 채굴, 파밍, 스테이킹, 발행량(emissions), 브라이브(bribes), 볼트(vaults), 락커(lockers), veTokens, 베스팅, 에포크(epochs), 탈중앙화된 알고리즘, 프로토콜 소유 유동성 등입니다... 가장 많은 사람들이 이해할 수 있는 간단한 용어를 사용하도록 노력하세요. 프로젝트만을 위해 완전히 새로운 용어를 만들지 마세요.

팁:

간단하고 일관된 용어를 사용하세요.
가능한 한 기존 언어를 사용하세요.
자신만의 용어를 만들어내지 마세요.
나타나는 관례를 따르세요.
가능한 한 사용자를 교육하세요.

예시: "내 보상(Your rewards)"은 이 프로젝트를 위해 만들어진 새로운 단어가 아니라 널리 이해되는 중립적인 용어입니다. 보상 자체가 다른 토큰으로 제공되더라도 현실 세계의 멘탈 모델과 일치하도록 보상은 USD로 표시됩니다.

5. 가능한 한 짧은 작업 단계

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

팁:

가능한 경우 "승인"을 다른 작업과 결합하세요.
서명하기 단계를 가능한 한 가깝게 묶으세요.

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

6. 가시적이고 유연한 네트워크 연결

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

팁:

연결이 끊어진 상태에서도 가능한 한 앱의 많은 부분을 보여주세요.
사용자가 현재 어떤 네트워크에 연결되어 있는지 보여주세요.
사용자가 네트워크를 변경하기 위해 지갑으로 이동하게 만들지 마세요.
앱에서 사용자가 네트워크를 전환해야 하는 경우, 기본 콜투액션(CTA)에서 해당 작업을 유도하세요.
앱에 여러 네트워크를 위한 시장이나 볼트가 포함되어 있는 경우, 사용자가 현재 어떤 세트를 보고 있는지 명확하게 명시하세요.

예시: 앱바(appbar)에서 사용자가 어떤 네트워크에 연결되어 있는지 보여주고, 이를 변경할 수 있도록 하세요.

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

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

팁:

UI의 피드백을 통해 시스템 상태를 전달하세요.
사용자의 기록을 보관하세요.
이전 트랜잭션에 대한 블록 탐색기 링크를 제공하세요.
네트워크를 변경할 수 있는 단축키를 제공하세요.

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