[UX] UI 디자인과 Interaction 디자인 법칙

inflearn의 'UX 개념' 강의의 내용을 정리한 것입니다.

 

UI (User Interface)

UX ⊃ UI

• UX(User Experience) : 서비스 전반에 대한 종합적인 경험
• UI(User Interface) : 사용자와 기술이 만나는 인터페이스이자 접점
  • 사용자가 시스템을 입력하면 출력 장치를 통한 정보 제공이 이루어지는 디자인

⭐ 보편성 - 다양한 사용자가 사용할 수 있도록 디자인한다.

⭐ 사용성 - 사용자가 제품을 효율적으로 사용하도록 돕는다.

 

사용자 인터페이스 디자인하기: 효과적인 HCI를 위한 전략

벤 슈나이더맨(Ben Shneiderman); 미국의 컴퓨터 과학자이자 메릴랜드 대학교 HCI 연구소의 교수님

→ 8가지 인터페이스 디자인(The 8 Golden Rules of Interface Design) 원칙 소개

 

1. Strive for consistency.

     일관성을 유지한다.

• 시각적 일관성 : 일관된 색상, 레이아웃, 대소문자, 글꼴 등 연속적되는 스타일 표준화
• 기능적 일관성 : 직관적인 디자인이 동일한 방식으로 작동 (동작의 일관성) → 제품의 사용성과 습득성 향상

 

2. Seek universal usability.

     보편적인 사용성을 추구한다.

• 유저의 다양성을 고려한 디자인 
  • 초보자, 전문가, 다양한 연령대, 장애 여부, 국제적 다양성 및 기술 성숙도에 상관 없는 용이한 학습이 가능하도록 사용자들이 숙련된 사용자가 될 수 있도록 서포트하는 디자인 → 튜토리얼 옵션과 단축 수단 제공

 

3. Offer informative feedback.

    유용한 피드백을 제공한다.

• 단번에 원하는 목적을 달성하도록
  • 액션에 대한 피드백이 시기적절하게 제공되어야 함 → 색상, 아이콘, 경고 메시지를 통한 즉각적인 피드백
  • 사용자가 마찰 없이 목표를 달성하도록 돕고 인지 부하를 줄이는데 도움을 줌
  • 반드시 즉각적이어야 하며 시스템이 느려지는 것을 방지하기 위해 지연을 최소화해야 함 

 

4. Design dialogs to yield closure.

    종료 상황을 알리는 대화 상자를 설계한다.

• 순차적 단계를 통해 혼동 방지
  • 사용자들이 어떠한 상황인지 추측하지 않도록 하는 명확한 디자인
  • 시작, 중간 및 끝이 있는 명확한 플로우 안내
  • 각 단계가 마무리 된 후 알림 메세지 표시와 같은 충분한 피드백 전달
  • 출구를 분명히 표시해 제품과 충분한 커뮤니케이션을 하도록 도움

 

5. Prevent errors.

    오류를 처리할 수 있는 간단한 방법을 제공한다.

• 오류는 가능한 일어나지 않도록 예방
  • 일반적인 규칙을 활용해 오류를 대비
  • 오류를 피할 수 없다면 빠르고 쉽게 대응할 수 있도록 구체적인 방법 제공
  • 3번 원칙과 더불어 비활성화 활용, 메세지로 직관적인 오류 대처

 

6. Permit easy reversal of actions.

    처리한 동작을 쉽게 되돌릴 수 있어야 한다.

• '번복'이 쉬운 디자인
  • 실수를 손쉽게 실행/취소할 수 있다면 익숙하지 않은 옵션도 부담 없이 사용할 수 있음
  • '번복'을 원활하게 해주는 기능으로 사용자의 걱정 완화 → 부담없이 제품 탐색 가능

 

7. Keep users in control.

    사용자가 현장 장악감과 위치감에 대한 권한을 갖게 하라.

• 필요한 정보는 높은 접근성으로 제공
  • 필요한 정보를 획득하는데 어려움이 없고 원하는 결과를 즉각 생성할 수 있도록 함
  • 탐색 및 작업 활성화는 항상 명확히 전달

 

8. Reduce short-term memory load.

    사용자가 기억보다는 인식할 수 있게 해야 한다.

• 회상(recall) 보다는 인식(recognition)
  • 심리학자 George Miller의 청킹(Chungking) 이론 : 인간의 뇌는 기억 용량에 제한이 있기 때문에 효율적으로 이를 사용하기 위해 7±2(5~9)개 정도의 항목에 대해서만 저장할 수 있도록 돕는 디자인
  • 기억 부담을 최소화하여 생산성을 높이는 데 중점

 

→ 추상적인 UX 개념과는 다르게,

'사람과 기술이 만나는 접점'이라는 측면에서 UI 디자인은 시스템의 외형 디자인 설계 방식!

 

 

---

 

 

인터렉션 디자인(Interaction Design)

논리적으로 사람의 습관과 행동에 기반해 이들의 시선을 사로잡아 목적을 달성하는 디자인 프로세스

→ 사용자가 원하는 UX를 수행할 수 있도록 기술력과 커뮤니케이션 원칙을 적용함

 

[ 힉의 법칙 ]

1951, 영국의 심리학자 '힉'에 의해 밝혀진 법칙

선택할 정보가 많아져도 결정하는 시간이 비례하게 길어지지 않는다!

• 정보가 증가할수록 우리 뇌는 알아서 선택지를 categorizing하거나 grouping하는 방식으로 사고함
• 따라서 뇌의 인지 프로세스처럼 동일한 인터랙션을 적용하면 빠른 선택이 가능하다는 것!
• 인지 부하를 줄이는 방법 : (페이징이나 스크롤 사용 없이 모든 선택지가 보여지는 것을 전제로) 사용자가 무엇을 선택할지 알고 있어야 하며, 익숙하게 정해진 순서로 정렬되어 있어야 함

 

[ 피츠의 법칙 ]

1954, 심리학자 '폴 피츠'가 발표한 법칙

인간의 행동에 대해 속도와 정확성의 관계를 설명하는 기본적인 법칙

• 시작점에서부터 최종 타겟에 이르기까지 걸리는 시간과 움직임은 '목표'와 '크기'에 따라 결정됨
• 목표물의 크기가 작을수록 목표에 도달하는데 속도와 정확도가 떨어지므로 적당한 크기의 버튼을 제공해야 함
• 버튼끼리의 거리가 가까워야 가벼운 인터렉션이 일어나며, 사용자가 최적의 경험을 할 수 있도록 버튼 사이즈 및 위치를 설계하는 것이 중요

 

[ 마법의 숫자 7 ]

1956, 심리학자 '조지 밀러'가 소개한 청킹(Chungking) 이론

7±2의 기억 용량

• 30초라는 인간의 단기 기억 5~9개의 기억 용량을 가지기 때문에 적은 정보로 쉬운 판단을 유도해야 함
• 아이폰 아이콘의 가로 배열, 노트에 형광펜을 사용할 때 7번 이하로 사용하면 한번에 눈으로 스캔 가능

 

[ 복잡성 보존 법칙 ]

아마존과 야후에서 사용자 인터페이스의 최고 책임자였던 '래리 테슬러'가 주장한 이론

복잡성의 총량은 정해져 있음

• 제품이나 서비스가 심플한만큼 서비스의 공급자가 복잡성을 더 책임진다는 것
• 훌륭한 UX는 그 복잡성을 시스템이 맡지만 불편한 UX는 유저에게 전가한다
• 비밀번호만 입력하면 되는 간편결제와 이메일 자동완성

 

[ 포카요케의 법칙 ]

1961, 도요타의 산업 엔지니어이자 품질 전문자인 '시게오 신고'가 만든 법칙

포카(실수)를 요케(피하다)

• 애초에 실수를 하지 않도록 제한하는 실수 방지
• 오류가 있을 시 바로 알리는 오류 알림
• 사용자들의 행동을 제어하고 제품 조작시 올바른 방식으로 유도할 수 있음

 

[ 피드백과 피드포워드 ]

in 인터랙션 디자인, 피드백 : 동작 후 알려주는 것 / 피드포워드 : 둥작 전 알려주는 것

• 피드백은 동작 후 과거 사실을 빠르고 정확하게 알려줌으로써 만족감과 안정감을 가져다 줌
• 피드포워드는 동작 전 어떤 일이 벌어질 지 예측하게 하는 것
• 두가지 기능 모두 만족감과 안정감을 가져다 주며 올바른 길로 안내하는 길잡이 역할을 통해 사용자의 목적을 성공적으로 달성하도록 도와줌

 

[ 어포던스 ]

'제임스 깁슨'이 만들고 현재까지도 다양한 분야의 학자에 따라 다양한 정의가 내려지고 있는 이론

사용자 행동 유도성

• 사물을 어떻게 다루면 될 것인가에 대한 강력한 단서
• 도널드 노먼은 어포던스 개념을 바탕으로 4가지 개념 발표
  • 이미지의 선택과 허용 가능한 상호작용
  • 원하는 행동을 묘사하는 직접적인 단어 사용
  • 메타포 사용
  • 인터페이스 학습 후 다른 부분에 활용할 수 있도록 지속적으로 같은 컨셉 모델을 따름
• 제품을 보는 것만으로 어떻게 사용해야 하는지 본능적인 직관으로 알게 하는 것

 

---

"강의 수강 후 끄적임"

 

이번 강의에서 제일 인상적이었던 부분은 강의 첫 부분이다. UX와 UI의 디자인의 현실적인 예시를 보여주는 사진이었는데, 실제로 사람들이 걷고 있는 길은 지름길로 보이는 길로 하도 많이 걸어서 깔려있는 잔디가 다 사라진 길이었고, UI 디자인은 길이라는 모양에 초점을 맞춘 깔끔한 보도블록 이었다. 너무 명쾌한 설명인 것 같아서 계속 기억에 남는다. 누군가 UI와 UX의 개념을 헷갈려 한다면 바로 보여주고 싶을 정도..

이번 강의를 들으면서 내가 그동안 디자인했던 앱들에 대해 많이 생각해보게 되었다. 내가 항상 고민하던 내용이 주로 나왔던 것 같고, 지금까지 내가 고민하던 내용을 다른 학자, 디자이너분들도 몇 십년을 고민했다고 생각하니 역시 결코 쉬운 고민이 아니었음을 다시 한 번 깨닫게 되었다. 역시 어려운 디자인의 세계.. 진짜 제대로 하려면 인간 심리학까지 공부해봐야 하지 않겠나라는 생각이 든다ㅎㅎ 

 

그리고 최근에 스타벅스 앱을 이용하면서 느꼈던 불편함인데 이건 내가 멍청해서 불편했던 건지.. ㅎㅎㅎ 스타벅스 결제 카드를 충전하려고 했는데 너무 많이 충전한 것 같아서 다시 환불받으려고 했던 경험이 있다. (지금 위의 사진은 내가 다시 충전한 것ㅎㅎ) 근데 이용 내역에 x 버튼이 있는 것이었다. 보통 x 버튼은 내역을 지울 때? 사용하는 느낌인데.. 뭔가 내역을 지워버리면 환불을 받을 수 없을까봐 저 버튼을 눌러보지는 못하고 환불 버튼은 결국 못찾고 헤매다가 결국 검색으로 저 버튼이 환불 버튼이라는 것을 알아냈었다. 이런게 UX를 헤치는 경험이 아니었을까 싶다. 이런 다양한 경험과 이론을 통해.. 또 배워가는 하루다!