어려운 과제를 쉽게 만드는 일곱 가지 원칙
디자인의 원칙
- 머릿속의 지식과 세상속의 지식을 모두 이용하라.
- 과제의 구조를 단순하게 하라.
- 일이 가시적이게 만들어라. 실행의 간격과 평가의 간격을 좁혀라.
- 대응관계가 올바르게 만들어라.
- 자연스러운 제약 및 인공적 제약의 위력을 활용하라.
- 이 모든 것이 잘 되지 않으면, 표준화하라.
- 만일의 오류에 대비한 디자인을 하라.
1. 머리 속의 지식과 세상 속의 지식을 모두 이용하라
사용자가, 필요한 지식을 내재화하고 있으면－즉, 머릿속에 지식이 있으면 수행은 더 빠르고 더 효율적임을 알아야 한다. 그러므로 디자인은 사용자의 이러한 행동을 방해해서는 안 된다.
세 개의 개념모형
심성 모형에는 세 가지 다른 측면이 있고 이는 구별되어야 한다. 즉, 디자인 모형, 사용자 모형, 그리고 시스템 이미지이다(Image A). 여기에서 디자인 모형은 디자이너가 마음속에 갖고 있는 시스템에 대한 개념화이다. 사용자 모형은 사용자가 그 시스템의 작동을 설명하기 위해 발달시킨 모형이다. 이상적으로는, 사용자의 모형과 디자인 모형이 같아야 된다. 그러나 사용자와 디자이너는 단지 시스템 그 자체를 통해서만 의사소통을 한다. 시스템 그 자체란 그것의 물리적 외관. 그것의 작동, 그것이 반응하는 방식, 그리고 그것에 딸린 사용설명서와 지시들을 말한다. 그래서 시스템 이미지가 중요하다. 디자이너는 제품에 관한 모든 것이 적절한 개념 모형과 일치하고 개념 모형의 작용을 보여줄 수 있도록 신경을 써야 한다.
사용설명서의 역할
2. 과제의 구조를 단순하게 하라
과제의 구조를 단순화하면 필요로 하는 계획이나 문제 해결의 양이 최소화된다. 불필요하게 복잡한 과제는 대개는 기술적인 혁신을 통해 재구조화될 수 있다.
새 기술의 중요한 역할은 과제를 더 간단하게 만드는 것이어야 한다. 과제는 기술을 통해 재구조화될 수 있으며, 또는 기술이 사용자의 심리적 부담을 줄일 수 있도록 도와줄 수도 있다. 기술적인 보조를 통해 어떤 행동 외의 다른 방법도 있을 수 있음을 알릴 수 있고, 작업에 어떤 의미가 있는지, 또 어떤 결과가 나올는지를 더욱 완전하고 더욱 해석하기 쉽게 나타내 줄 수도 있다. 이러한 보조를 통해 대응들은 잘 가시화될 수 있고, 혹은 더 좋고 더 자연스럽게 대응될 수 있다.접근방법
- 과제가 거의 똑같게 하라, 그러나 심리적인 보조물을 제공하라.
- 간단한 심리적 보조물(mental aid)이라 하더라도 이것이 아주 유효하고 중요하다는 것을 과소평가하지 말아라.
- 기술을 써서 지금까지 드러나지 않았던 것을 가시적이게 만들며 그럼으로써 피드백이나 대상을 통제하는 능력을 높이도록 하라.
- 자동화하라, 그러나 과제가 거의 비슷해지게 하라.
- 과제의 성질 자체를 바꾸어라.
- 통제를 없애지 말라.
3. 일을 가시적이게 만들어라: 실행의 간격과 평가의 간격을 좁혀라
어떤 일을 수행하는 사람의 입장에서, 일(things 사항／사태)을 가시적이게 만들면 현재 무엇이 가능하고 무슨 행동을 해야 하는지를 알 수 있다. 평가하는 사람의 입장에서 일이 가시적이면 행동의 결과를 알 수 있기 때문이다.
더 이상의 것이 있다. 시스템은 사용자의 의도와 일치하는 실행 가능한 행동들을 제공해야 한다. 시스템의 상태는 사용자가 즉각적으로 지각할 수 있고 해석할 수 있고 동시에 사용자의 의도나 기대에 부합하도록 표시되어 야 한다. 물론 시스템 상태 자체가 가시적(혹은 가청적) 일뿐만 아니라 즉각적으로 해석될 수 있어야 한다. 행동의 결과가 명백해야 한다.
4. 대응관계가 올바르게 만들어라
- 의도와 가능한 행동들 간의 관계
- 행동과 그것이 시스템에 끼치는 영향 간의 관계
- 시스템의 실제 내부 상태와 시각, 소리, 혹은 촉감에 의해 지각 가능한 것의 관계
- 지각된 시스템 상태와 사용자의 필요, 의도, 그리고 기대 간의 관계 통제 스위치를 대상 그 자체에 붙이거나 혹은 그것과 유비적인 관계성을 갖게끔 배치해야 한다는 것이다. 마찬가지로, 통제 스위치의 움직임은 시스템에서 기대되는 움직임과 비슷하거나 유비적이어야 한다. 통제 스위치의 배치나 움직임이 통제되는 대상과의 사이에 엄격한 근접성, 모사성 혹은 유사성이 적어질수록 조작은 곤란해진다.
5. 자연스러운 제약과 인공적 제약의 위력을 활용하라
사용자에게 단 한 가지－물론 옳은 – 일만이 가능한 것처럼 제약들을 활용하라.
6. 만일의 오류에 대비한 디자인을 하라
가능한 오류는 무엇이든 일어날 수 있다고 생각하라. 그것에 대비해서 계획하라. 사용자가 하는 모든 행동은 올바르게 하려는 시도로 생각할 수 있다. 따라서 오류는 할 일을 불완전하게 혹은 부적절하게 명시해서 생긴 일일 뿐이다. 사용자의 행동은 사용자와 시스템 간의 자연스럽고 건설적인 대화의 한 부분이라고 생각하라. 이때 사용자의 행동을 도울 것이지 싸우려고 하지 말아라. 사용자가 오류에서 벗어나는 것, 무슨 일로 해서 무슨 일이 일어났는지 알게 하는 것, 그리고 어떤 원하지 않는 결과가 생기면 이것을 본래 상태로 되돌리는 것을 가능하게 하라. 비가역적인 행동은 하기 어렵게 하라. 시스템을 탐색할 수 있게 디자인하라. 강제적 기능을 활용하라.
7. 이 모든 것이 잘되지 않으면 표준화하라
사용자의 행동이나 그 결과를, 또는 시스템의 배치나 표시판을 표준화하라. 관련된 행동들은 같은 방식으로 기능하도록 하라. 시스템을, 문제를 표준화하라. 국제적인 표준을 만들어라. 표준화가 좋은 점은 표준화된 기제가 아무리 임의적일지라도, 일단 한 번만 배우면 된다는 것이다. 사람들은 일단 배우면 효과적으로 사용할 수 있다.
- 표준화와 기술
- 표준화의 시기
디자인과 인간심리, 도널드 노먼
UX 디자인의 핵심 목표 중 하나는 복잡한 과제를 사용자가 쉽게 수행할 수 있도록 만드는 것입니다. 도널드 노먼(Don Norman)이 제시한 7가지 디자인 원칙을 통해 이를 달성할 수 있습니다. 이 원칙들을 일상생활의 사례와 함께 살펴보겠습니다.
1. 가시성(Visibility)
사용자가 시스템의 상태와 가능한 작업을 쉽게 파악할 수 있도록 해야 합니다.
사례: 스마트폰의 배터리 잔량 표시
대부분의 스마트폰은 화면 상단에 배터리 아이콘을 통해 현재 배터리 잔량을 시각적으로 보여줍니다. 사용자는 이를 통해 충전이 필요한 시점을 쉽게 파악할 수 있습니다. 또한 배터리가 부족할 때는 경고 메시지를 표시하여 사용자의 주의를 환기시킵니다.
2. 피드백(Feedback)
사용자의 행동에 대한 즉각적이고 명확한 반응을 제공해야 합니다.
사례: 온라인 쇼핑몰의 주문 확인 페이지
사용자가 주문 버튼을 클릭하면 주문 처리 중임을 나타내는 로딩 애니메이션이 표시되고, 주문이 완료되면 주문 번호와 함께 확인 메시지가 나타납니다. 이를 통해 사용자는 자신의 행동이 성공적으로 처리되었음을 즉시 알 수 있습니다.
3. 제약(Constraints)
사용자의 실수를 방지하기 위해 특정 상황에서 일부 기능을 제한합니다.
사례: 자동차의 기어 변속
대부분의 자동차에서는 브레이크 페달을 밟지 않으면 기어를 ‘P'(주차)에서 다른 위치로 옮길 수 없습니다. 이는 사용자의 의도치 않은 조작으로 인한 사고를 방지하는 물리적 제약의 예입니다.
4. 일관성(Consistency)
유사한 요소들은 유사한 방식으로 작동해야 합니다.
사례: 웹사이트의 네비게이션 메뉴
대부분의 웹사이트는 상단에 일관된 네비게이션 메뉴를 배치합니다. 사용자는 이를 통해 어느 페이지에서든 쉽게 다른 섹션으로 이동할 수 있습니다. 메뉴의 위치와 스타일이 일관되게 유지되므로 사용자는 사이트 구조를 쉽게 이해하고 탐색할 수 있습니다.
5. 매핑(Mapping)
컨트롤과 그 효과 사이의 관계가 명확해야 합니다.
사례: 전자레인지의 조작 패널
잘 디자인된 전자레인지의 조작 패널은 버튼의 배치가 직관적입니다. 예를 들어, 시간을 늘리는 버튼은 위쪽에, 줄이는 버튼은 아래쪽에 배치하여 사용자가 쉽게 이해하고 조작할 수 있게 합니다.
6. 어포던스(Affordance)
객체의 속성이 그것의 사용 방법을 암시해야 합니다.
사례: 푸시/풀 도어 핸들
잘 디자인된 도어 핸들은 그 모양만으로도 어떻게 사용해야 하는지 암시합니다. 예를 들어, 수평 바 형태의 핸들은 밀어야 한다는 것을, 수직 핸들은 당겨야 한다는 것을 암시합니다.
7. 관용성(Forgiveness)
실수를 쉽게 복구할 수 있어야 합니다.
사례: 문서 편집 프로그램의 ‘실행 취소’ 기능
대부분의 문서 편집 프로그램은 ‘실행 취소(Undo)’ 기능을 제공합니다. 사용자가 실수로 중요한 내용을 삭제하더라도 이 기능을 통해 쉽게 복구할 수 있습니다. 이는 사용자가 안심하고 프로그램을 탐색하고 사용할 수 있게 해줍니다.
원칙 적용의 실제 사례: 모바일 뱅킹 앱
이제 이 7가지 원칙이 실제 제품에 어떻게 적용되는지 모바일 뱅킹 앱을 예로 들어 살펴보겠습니다.
- 가시성: 앱 홈 화면에 계좌 잔액, 최근 거래 내역, 자주 사용하는 기능(이체, 조회 등) 등 중요 정보를 한눈에 볼 수 있게 배치합니다.
- 피드백: 송금 완료 시 성공 메시지와 함께 진동 또는 소리로 피드백을 제공합니다. 또한 거래 내역에 즉시 반영되어 사용자가 변경된 잔액을 확인할 수 있습니다.
- 제약: 일일 이체 한도를 설정하여 대규모 금융 사고를 방지합니다. 또한 보안을 위해 일정 시간 동안 활동이 없으면 자동으로 로그아웃됩니다.
- 일관성: 모든 화면에서 동일한 색상 scheme과 버튼 스타일을 사용하여 일관된 사용자 경험을 제공합니다.
- 매핑: 이체 금액 입력 시 숫자 키패드를 제공하여 사용자가 쉽고 정확하게 금액을 입력할 수 있게 합니다.
- 어포던스: 이체 버튼을 크고 눈에 띄는 색상으로 디자인하여 주요 기능임을 암시합니다.
- 관용성: 이체 과정에서 여러 단계의 확인 절차를 두어 실수를 방지하고, 최종 확인 전에는 언제든 취소할 수 있게 합니다.
결론
이 7가지 원칙을 적절히 적용하면 복잡한 시스템도 사용자에게 직관적이고 사용하기 쉬운 경험을 제공할 수 있습니다. 하지만 이 원칙들을 기계적으로 적용하는 것이 아니라, 각 제품과 서비스의 특성, 그리고 대상 사용자의 needs에 맞게 창의적으로 해석하고 적용하는 것이 중요합니다.
또한 이러한 원칙들은 고정된 것이 아니라 기술의 발전과 사용자의 기대 변화에 따라 계속 진화합니다. 예를 들어, 최근에는 음성 인터페이스나 제스처 기반 인터페이스 등 새로운 상호작용 방식이 등장하면서 이 원칙들을 새롭게 해석하고 적용하는 방법에 대한 논의가 활발히 이루어지고 있습니다.
따라서 UX 디자이너는 이러한 기본 원칙을 이해하고 적용하는 것뿐만 아니라, 끊임없이 변화하는 기술과 사용자의 needs를 주시하며 새로운 디자인 패러다임을 탐구해야 합니다. 이를 통해 우리는 더욱 직관적이고 효율적이며 즐거운 사용자 경험을 창출할 수 있을 것입니다.
참고자료:
[1] https://uxdesign.cc/ux-psychology-principles-seven-fundamental-design-principles-39c420a05f84?gi=ca9d6b301020
[2] https://www.lyssna.com/blog/ux-design-principles/
[3] https://www.nngroup.com/articles/strategy-study-guide/
[4] https://www.justinmind.com/ux-design/examples
[5] https://code.likeagirl.io/exploring-ux-design-real-life-examples-user-personas-7b323443c856?gi=443b45aafe81