Awkward UI 해결을 위한 UI Stack (5가지 상태)
Source
Evernote/Inbox/How to fix a bad user interface - Scott Hurff's Blog.md
Summary
이 문서는 Scott Hurff의 책 ‘Designing Products People Love’ 발췌로, 사용자에게 불안감이나 당황스러움을 주는 ‘Awkward UI’의 원인과 해결책을 다룹니다. 컴퓨터는 사용자의 맥락이나 물리적 세계의 직관성을 고려하지 않기 때문에, 디자이너가 이를 보완해야 합니다. 핵심 개념은 ‘UI Stack’으로, 모든 화면은 단일 상태가 아닌 다음 5가지 상태를 고려하여 설계해야 한다는 것입니다: 1. 이상적 상태(Ideal), 2. 빈 상태(Empty), 3. 오류 상태(Error), 4. 부분적 상태(Partial), 5. 로딩 상태(Loading). 이 5가지 상태를 자연스럽게 전환하며 설계할 때만 인간적이고 포용적인 인터페이스가 완성됩니다.
Key Points
- Awkward UI: 로딩 표시 부재, 명확하지 않은 오류 메시지, 데이터 부재 시의 공백 등으로 인해 사용자가 당황하거나 불안해하는 UI 현상.
- UI Stack의 필요성: 컴퓨터는 본질적으로 사용자의 이해를 돕지 않으므로, 디자이너가 물리적 세계의 직관성(이동, 반응, 상태 변화)을 디지털 인터페이스에 적용해야 함.
- 5가지 UI 상태(State): 모든 화면은 다음 5가지 상태를 고려해야 함 - Ideal(정상), Empty(데이터 없음), Error(오류 발생), Partial(일부 데이터/기능 제한), Loading(로딩 중).
- 역사적 배경: 2004년 Basecamp의 ‘3가지 상태(Regular, Blank, Error)’ 개념을 AJAX, 모바일, 대중화 시대에 맞게 확장한 개념임.
- 설계 원칙: 사용자가 흐름(Flow)을 따라갈 때 이 5가지 상태 간 전환이 매끄럽고 자연스럽게 이루어져야 함.