Interaction Design(2)

카테고리 없음

Interaction Design(2)

jsBae 2025. 7. 1. 14:22

Usability Goals

Usability (사용성)은 사용자가 제품이나 서비스를 사용할 때, 그 목적을 얼마나 쉽고, 빠르게, 오류 없이 달성할 수 있는지를 의미한다. ISO 9241-11 기준에 따르면 사용성은 효과성, 효율성, 만족도로 구성된다. 여기서는 구체적인 사용성 목표를 다음과 같이 나눌 수 있다:

효과성 (Effectiveness)
- 사용자가 원하는 작업을 얼마나 정확하게 수행할 수 있는가
- 예: ATM에서 송금하기, 스마트폰으로 사진 찍기
효율성 (Efficiency)
- 얼마나 빠르고 적은 노력으로 작업을 수행할 수 있는가
- 예: 최소한의 클릭으로 검색 결과에 도달
안전성 (Safety)
- 오류 가능성을 줄이고, 잘못된 조작을 방지하는 설계
- 예: "삭제" 버튼에 대한 이중 확인, 되돌리기 기능
유용성 (Utility)
- 사용자가 필요로 하는 기능이 실제로 존재하는가
- 예: 텍스트 편집기에 자동 저장 기능이 있는가
학습 용이성 (Learnability)
- 처음 사용하는 사용자도 쉽게 익힐 수 있는가
- 예: 버튼에 아이콘 + 텍스트가 병기되어 있는가
기억 용이성 (Memorability)
- 일정 기간 후에도 기능을 다시 사용할 수 있는가
- 예: 주요 기능이 한 위치에 고정되어 있는 메뉴 구조
즐거움 (Enjoyable to use)
- 사용 자체가 스트레스가 아니라, 유쾌하고 만족스러운가
- 예: 자연스러운 애니메이션, 부드러운 화면 전환 효과

사용성과 사용자 경험 목표 비교

인터랙션 디자인에서는 사용성 목표(usability goals)와 사용자 경험 목표(user experience goals)를 명확히 구분해야 한다. 이 둘은 서로 보완적이지만, 경우에 따라 상충(trade-off)할 수 있다.

구분	사용성 목표	UX 목표
초점	기능성과 효율성	감정, 만족, 몰입
예시	오류 없이 빠르게 입력	즐거움, 흥미, 감성적 자극
측정	객관적: 시간, 클릭 수, 성공률 등	주관적: 설문, 표정, 뇌파 등
도전 과제	실수 방지	감정의 다양성 반영

예를 들어, 한 금융 앱에서 너무 많은 애니메이션 효과를 넣으면 '즐거움'은 상승할 수 있지만, 정보 전달 속도는 떨어질 수 있어 효율성이 낮아진다. 반면 지나치게 단순한 UI는 사용은 편하지만 ‘지루함’이라는 UX 문제를 유발할 수 있다.

이러한 트레이드오프 상황에서 디자이너는 사용자의 목표와 상황을 정확히 파악한 후, 어느 쪽에 더 초점을 둘지를 결정해야 한다.

사용자 경험 목표 (User Experience Goals)

사용자 경험(UX)의 목표는 사용자가 제품을 사용할 때 어떤 감정을 느끼는가, 어떤 인상을 받는가에 초점을 맞춘다. 이는 단순히 '잘 작동하는가'가 아니라, ‘기억에 남는가’, ‘재미있는가’, ‘감동적인가’와 같은 질문에 답해야 하는 영역이다.

UX 목표는 다음과 같이 구분할 수 있다:

✅ 바람직한 UX 목표 (Desirable Aspects)

재미(Fun), 만족(Satisfying), 도전감(Challenging)
몰입(Flow), 흥미롭다(Interesting), 사회적 연결감(Sociability)
보상(Rewarding), 창의성 촉진(Supporting creativity)

❌ 바람직하지 않은 UX 목표 (Undesirable Aspects)

지루함(Boring), 짜증(Annoying), 불쾌함(Unpleasant)
위압감(Patronizing), 무시당함(Makes one feel stupid)
속이는 느낌(Deceptive), 어설픈 연출(Gimmicky)

이러한 UX 목표는 디자인 초기 단계부터 명시적으로 설정하고 문서화해야 하며, 사용자 피드백이나 감정 표현 분석을 통해 주기적으로 평가되어야 한다. 감성 품질(hedonic quality)을 설계에 반영하는 것은 이제 선택이 아닌 필수이다.

Design Principles

디자인 원칙(Design Principles)은 제품과 서비스의 상호작용을 설계할 때 지켜야 할 일반적 규칙이나 가이드라인이다. 이는 단순한 스타일 요소가 아니라, 사용자의 사고 흐름, 인지 행동, 감정 반응을 고려하여 설계 결정을 내릴 수 있게 하는 기준이다.

디자인 원칙은 다음과 같은 특성을 지닌다:

일반화 가능성 (Generalizability)
- 웹사이트, 모바일 앱, IoT 기기 등 다양한 플랫폼에 공통으로 적용 가능
Do’s and Don’ts
- 예: "기능 버튼은 그룹화하여 배치하라", "피드백은 즉시 제공하라"
근거 기반 설계
- 이론적 연구, 사용자 테스트 결과, 경험적 통찰, 상식 등을 결합함
- 예: Norman의 디자인 원칙(가시성, 피드백, 제약, 일관성 등)은 HCI 설계에 광범위하게 적용됨

디자인 원칙은 정답을 제공하지는 않지만, 보다 나은 선택지를 고르게 하는 판단 기준을 제공한다. 따라서 초보 디자이너일수록 이 원칙을 잘 습득하고 활용할수록 실수를 줄이고 설계 품질을 높일 수 있다.

Visibility - Poor Interface

가시성(Visibility)은 사용자가 인터페이스를 사용할 때 가능한 행동(action)이 무엇인지 명확하게 알아볼 수 있도록 하는 설계 원칙이다. 이는 Don Norman이 그의 저서 The Design of Everyday Things에서 가장 중요하게 강조한 개념 중 하나이다.

예시: 한 호텔 엘리베이터에서는 층 버튼이 존재하지만, 사용자가 객실 키 카드를 먼저 삽입해야 작동하도록 되어 있다. 하지만 카드 리더는 눈에 잘 띄지 않고, 사용자는 무반응 상태에서 혼란과 좌절을 느낀다.

이러한 인터페이스는 다음과 같은 문제를 유발한다:

사용자는 시스템이 고장 났다고 판단할 수 있음
버튼을 여러 번 누르거나, 비상 호출 버튼을 누를 수 있음
신뢰도(trust)와 사용자 경험(UX) 모두 크게 하락

Perceived affordance: 행동 가능성을 보여주는 시각적 단서
Gulf of execution (실행 간극) : 사용자가 무엇을 해야 할지 모를 때 발생

Visibility - Improving Poor Interface

가시성이 부족한 인터페이스를 개선하기 위해 다음과 같은 전략을 사용할 수 있다:

시각 강조 (Visual Emphasis)
- 카드 삽입구 주변에 강조 색상 사용
- 방향 화살표, 빛나는 테두리 등 시각적 단서 제공
피드백과 안내 제공 (Feedback & Guidance)
- 카드가 없을 때는 버튼이 불투명하게 비활성화(disabled) 상태로 보이도록 함
- “카드를 삽입해 주세요”와 같은 텍스트 메시지 또는 음성 안내 제공
- 다국어 지원 고려
행동 유도 (Action Prompting)
- 인터랙션이 필요한 경우에는 사용자에게 행동 유도 메시지를 반복적으로 제공해야 함
- 예: 깜박이는 애니메이션, 진동 피드백 등

이러한 전략은 가시성의 원칙을 넘어, 인지 부담을 줄이는 설계(cognitive offloading)에도 해당한다. 사용자가 추론할 필요 없이 즉시 행동을 유도받도록 만드는 것이 핵심이다.

자동 제어와 가시성 문제

자동 제어 시스템은 편리함을 제공하지만, 인터페이스가 보이지 않을 때 사용자 혼란이 극대화된다. 특히 센서 기반 장치는 ‘행동의 결과’를 시각적으로 보여주지 않으면 사용자는 다음과 같은 문제를 겪는다:

작동 실패 원인을 파악하지 못함
계속해서 잘못된 동작을 반복함
결국 시스템에 대한 불신이 쌓이고, 사용을 포기함

예: 자동 수도꼭지, 자동 문, 자동 엘리베이터 등에서 검은 옷, 특정 재질, 피부색 등이 센서 감지 실패를 유발하는 사례는 현실에서도 빈번하다.

전문 개념

Feedback loop failure: 사용자의 행동 → 시스템 반응 → 사용자 확인의 고리가 끊어졌을 때 발생하는 문제
Invisible affordance: 작동 방법이 전혀 드러나지 않은 인터페이스 상태

따라서 자동 제어 인터페이스에는 눈에 보이는 피드백, 즉 LED 불빛, 사운드, 간접적인 안내 등을 반드시 함께 설계해야 한다.

피드백 (Feedback)

피드백(Feedback)은 사용자가 인터페이스에서 어떤 행동을 했을 때, 시스템이 그 결과를 명확하게 알려주는 디자인 원칙이다. 피드백은 인터랙션의 신뢰성과 사용자의 통제감을 높이는 핵심 요소이다.

예: 사용자가 버튼을 클릭했을 때

시각적 피드백: 색이 변하거나 버튼이 눌리는 듯한 애니메이션
청각적 피드백: "띡", "딸깍" 등의 소리
촉각 피드백: 진동(Haptic Feedback) 제공 (스마트폰 등)

피드백의 원칙은 다음을 포함해야 한다:

즉시성(immediacy)
- 사용자 행동 직후 즉각 반응이 있어야 함 (100~200ms 이내)
일관성(consistency)
- 동일한 동작에는 항상 동일한 피드백이 있어야 함
다양한 감각 채널 활용(multimodal)
- 시각 + 청각 + 촉각을 조합해 제공할 경우, 장애 사용자나 복잡한 환경에서도 사용성 확보 가능

Tip

Nielsen의 Heuristic Evaluation 중 1번 원칙: “Visibility of system status”
- 시스템이 항상 사용자가 무엇을 하고 있는지를 알 수 있도록 현재 상태를 알려야 한다는 원칙이다.

제약 (Constraints)

제약(Constraints)은 사용자가 시스템을 사용할 때, 잘못된 선택이나 실행을 하지 않도록 가능성을 제한하는 설계 전략이다. 이는 오류 방지(error prevention)의 핵심 원칙이며, 사용자가 선택 가능한 범위를 줄여서 더 안전하고 효율적인 상호작용을 유도한다.

📌 제약의 유형 (Don Norman, 1988)

물리적 제약(Physical constraints)
- 장치 자체의 구조로 인해 잘못된 사용이 불가능
- 예: USB-A 포트를 거꾸로는 꽂을 수 없음
논리적 제약(Logical constraints)
- 인터페이스의 구조나 논리에 따라 특정 행동만 가능
- 예: 날짜 선택 시 과거 날짜 비활성화
문화적 제약(Cultural constraints)
- 사회적 규칙이나 관습을 기반으로 작동
- 예: 붉은 버튼은 '취소'로 인식됨
심리적 제약(Psychological constraints)
- 사용자 기대에 부합하도록 설계된 제약
- 예: 회색 처리된 버튼은 클릭이 불가능하다고 인식함

💡 실무 적용 예시:

드롭다운 메뉴: 유효한 값만 선택 가능
폼 입력 제한: 숫자만 입력받는 필드 (type="number")

이러한 제약은 자유도를 줄이는 대신 오류 발생 가능성과 인지 부담을 줄여준다. 특히 초보자에게는 큰 도움이 되는 전략이다.

모호하거나 비논리적인 디자인?

인터페이스 설계에서 논리적 연결(logical mapping)이 약할 경우 사용자는 혼란(confusion)을 겪게 된다. 특히 물리적 인터페이스에서는 기능과 위치 사이의 명확한 관계성이 중요하다.

예: 컴퓨터의 후면 포트에 마우스와 키보드를 꽂아야 할 때,

색상 표시는 있으나, 물리적으로 어떤 포트가 어떤 기능을 담당하는지 애매하다면 사용자는 시행착오(trial and error)를 통해 기능을 알아내야 한다.

❗ 이런 경우의 문제점:

불필요한 시간 낭비
사용자 신뢰도 하락
반복적 오류 발생 가능성 증가

이 문제를 해결하기 위해서는 근접성(proximity), 색상 매핑(color mapping), 직관적 배치가 필요하다.

보다 논리적으로 디자인하기

논리적 설계(Logical design)는 사용자가 시각 정보와 공간 정보를 쉽게 연결할 수 있도록 만드는 설계 방식이다.

설계 전략:

직접 연결 매핑(Direct mapping)
- 예: 포트와 아이콘이 물리적으로 바로 옆에 위치함
- 사용자는 시각적 거리 없이 바로 기능을 연결할 수 있음
색상 매핑(Color-coded mapping)
- 같은 색상의 포트와 아이콘을 짝지음
- 예: 파란색 USB 3.0 포트
공간 일관성(Spatial consistency)
- 버튼/입력 장치의 물리적 배치가 기능의 위치와 일치하도록 설계
- 예: 오디오 믹서에서 좌우 채널의 볼륨 조절기가 실제 공간 배치와 일치

이러한 전략은 인지 심리학의 '인접성 원리(proximity principle)'와 '연속성 원리(continuity)'에 기반하며, 설계자가 사용자의 예상과 기대에 맞는 공간 구성을 제공할 수 있도록 도와준다.

일관성 (Consistency)

일관성(Consistency)은 인터페이스 디자인에서 가장 기본적이면서도 강력한 원칙 중 하나이다. 사용자는 하나의 기능을 익힌 뒤, 비슷한 맥락에서 같은 방식으로 작동할 것이라는 기대를 갖는다.

일관성의 종류:

내부 일관성(Internal Consistency)
- 하나의 애플리케이션 내부에서 동일한 규칙과 레이아웃 유지
- 예: 모든 ‘저장’ 버튼은 우측 하단에 위치
외부 일관성(External Consistency)
- 여러 애플리케이션이나 플랫폼 간에도 동일한 방식 유지
- 예: 대부분의 소프트웨어에서 Ctrl+S는 ‘저장’ 기능

💡 일관성의 장점:

학습 시간 단축
사용 오류 감소
사용자 예측성 향상
신뢰감 형성

⚠️ 단, 과도한 일관성은 창의성과 실용성을 저해할 수도 있음

→ 따라서 상황에 따라 ‘의도적 불일치(intentional inconsistency)’도 고려할 수 있음

Nielsen의 10가지 휴리스틱 중 4번째 원칙: Consistency and standards
- 사용자는 플랫폼과 시스템에서 일관된 행동을 기대한다. 표준을 지켜야 혼란이 줄어든다.

일관성이 무너질 때

일관성(consistency)은 사용자 학습과 숙련도를 높이는 중요한 설계 원칙이지만, 현실의 복잡한 기능 요구사항은 이를 유지하기 어렵게 만들기도 한다. 특히 단축키(keyboard shortcuts)에서 동일한 첫 글자를 갖는 명령어가 여러 개 있을 경우, 디자이너는 타협적 키 조합을 선택해야 하며, 이는 일관성의 균열로 이어진다.

예시:

Ctrl+S → 저장(Save)
Ctrl+Shift+S → 다른 이름으로 저장(Save As)
Ctrl+Sp → 맞춤법 검사(Spelling)
Ctrl+Shift+L → 스타일 지정(Style)

이처럼 키 조합이 복잡해지면 사용자는 기억의 부하(memory load)가 증가하고, 예상과 실제 행동 간 간극(Gulf of execution)이 발생하게 된다.

보완 전략:

일관성보다 명확성을 우선시하는 설계 판단 필요
도구 설명(tooltips), 도움말, 바로가기 키 리스트를 통해 학습 보조 제공
사용자 맞춤 키 매핑 기능 제공

Recognition over recall (기억보다 인지 중심 설계): 사용자가 외우기보다는, 화면에서 찾아보고 선택할 수 있도록 설계하는 것이 바람직함

Consistency

일관성은 크게 내부 일관성과 외부 일관성으로 나뉜다.

📌 1. 내부 일관성(Internal Consistency)

한 애플리케이션 또는 시스템 내에서 기능, 레이아웃, 피드백 방식이 반복적으로 동일하게 유지됨
예: 모든 버튼이 동일한 크기, 색상, 위치에 있음

✅ 장점:

사용자는 한 번 배운 기능을 다른 화면에서도 그대로 사용할 수 있음
학습 비용 절감

📌 2. 외부 일관성(External Consistency)

다른 시스템 간에도 같은 규칙을 적용하는 것
예: 대부분의 소프트웨어에서 Ctrl+C = 복사, Ctrl+V = 붙여넣기

⚠️ 도전 과제:

외부 일관성은 디자이너, 조직, 브랜드마다 선호도와 표준이 다르므로 달성하기 어렵다
특히 OS(Windows vs. macOS), 모바일 플랫폼(iOS vs. Android) 간에는 설계 철학 자체가 다르다

💡 해결 방법:

가능하다면 널리 확립된 디자인 언어(Material Design, Apple HIG 등)를 따름
내부 일관성은 반드시 지키되, 외부 일관성은 사용자의 기대치를 고려해 선택적으로 조정

숫자 키패드 배열 – 외부 불일치 사례

외부 일관성이 지켜지지 않은 사례로서, 전화기 숫자 키패드와 계산기 숫자 키패드의 배열 차이를 보여준다.

❓ 왜 이런 차이가 생겼을까?

전화기 배열은 사용자가 자주 사용하는 번호를 손가락 위치 기준으로 설계함
→ AT&T 벨 연구소에서 1960년대 연구를 통해 하단 입력 부담을 줄이기 위해 상단부터 배열
반면 계산기 배열은 역사적으로 전기식 계산기계의 디자인을 그대로 계승
→ 10키 조작이 빠른 전문가들을 위해 하단부터 1,2,3 배치

⚠️ 사용자 혼란

같은 숫자 키패드라 하더라도 제품마다 배열이 다르면 사용자는 실수를 유발할 수 있다
특히 ATM, 키오스크, POS 단말기 등에서 입력 실수로 인한 사용자 불만이 생긴다

교훈:

일관성이 깨졌을 경우에는 사용자가 혼동하지 않도록 명확한 시각 피드백, 물리적 구분 등을 추가해야 한다
또는 제품군 전반에서 배열의 통일성 유지를 고민해야 한다

전문 개념:

Legacy constraint (기술유산 제약): 이전 제품의 설계를 그대로 이어 받아 새로운 설계에서도 불일치가 유지되는 현상

Affordances

어포던스(affordance)는 원래 심리학자 J.J. Gibson이 제안한 개념으로, 어떤 물체가 사용자에게 자연스럽게 가능한 행동을 암시하는 특성을 뜻한다. Norman(1988) 은 이 개념을 제품 디자인에 적용하여, 일상적 사물의 설계에서 사용자의 행동을 유도하는 속성으로 발전시켰다.

📌 예시:

문 손잡이는 ‘잡고 당긴다’는 행동을 암시
버튼은 ‘눌러야 한다’는 행동을 유도
텍스트 입력창은 ‘타이핑할 수 있다’는 인식을 유발

디지털 환경에서의 적용:

스크롤바: 아래로 내려야 함을 암시
돋보기 아이콘: 검색을 의미함
버튼의 입체감: 눌러야 한다는 인식 제공

어포던스는 사용자가 시스템을 학습하지 않고도 직관적으로 사용할 수 있게 해주는 단서이므로, 인터페이스 설계에서 가시성(visibility) 및 피드백(feedback)과 함께 가장 중요한 요소 중 하나이다.

어포던스는 인터랙션 디자인에 무엇을 제공하는가?

디지털 인터페이스는 실제 물리적 구조가 없기 때문에, 진짜 어포던스(real affordance)를 제공하기 어렵다. 대신, Don Norman은 이를 인지된 어포던스(perceived affordance)라는 개념으로 바꾸어 설명하였다.

✅ 인지된 어포던스란?

물리적 실체가 없지만, 사용자가 그래픽이나 애니메이션을 통해 해당 요소의 사용법을 유추할 수 있는 설계
예: 회색으로 비활성화된 버튼은 클릭 불가라는 메시지를 전달

예시:

아이콘을 눌렀을 때 살짝 내려앉는 애니메이션 → 클릭 가능하다는 어포던스
링크 텍스트에 밑줄 → 클릭 가능성 암시

📌 중요한 설계 개념:

행동-효과 매핑(mapping)

사용자의 행동(예: 클릭)과 그 결과(예: 메뉴 열림) 간의 관계가 명확하고 직관적이어야 한다

디자인 시사점:

어포던스를 제공하지 못하면, 사용자는 시행착오를 거쳐야 하고 이는 사용성 저하로 이어진다
특히 초보자나 비전문 사용자를 대상으로 하는 디자인에서는 인지된 어포던스가 필수이다

가상 어포던스 평가 (Activity – Virtual Affordances)

화면 상의 객체들이 실제로 어떤 행동을 유도하고 있는지를 평가해 보아야 한다.

이 아이콘들은 어떤 의미를 지니는가?

아래는 대표적인 UI 요소들이다. 각 요소는 어떤 행동을 암시하며, 초보 사용자라면 과연 어떤 반응을 보일 수 있을까?

예시 질문:

이 아이콘은 눌러야 할까?
이 박스는 입력 가능한가?
버튼이 눌러졌다는 것을 어떻게 알 수 있는가?

💬 토의 유도 질문:

사용자가 이 객체를 처음 봤을 때, 어떤 행동을 해야 할지 알 수 있는가?
이 어포던스는 시각적으로 잘 드러나 있는가?
초보자와 전문가의 해석 방식이 다를 수 있는가?

이 활동은 디자이너가 사용하는 상징(symbol), 색상(color), 공간 배치(layout)이 사용자에게 어떤 의미로 해석되는지 실험적으로 탐색할 수 있게 한다.

① ⏪ 삼각형 모양 (좌측)

의미 추론: 음악/영상 플레이어에서 일반적으로 '되감기(rewind)' 기능을 의미
어포던스 해석: 좌측을 향한 방향성, 삼각형은 '움직임'을 암시
초보자 반응: 멀티미디어에 익숙하지 않다면 이 기호가 작동을 의미하는지조차 혼란스러울 수 있음

② 파란 원 안에 사각형 (중앙)

의미 추론: 파일 저장, 혹은 디스크 드라이브의 은유
어포던스 해석: 실제 3.5인치 플로피 디스크의 이미지를 차용한 전통적인 ‘저장(save)’ 아이콘
초보자 반응: 플로피 디스크를 본 적 없는 세대(예: Z세대, 알파세대)는 이 기호가 무엇을 의미하는지 알기 어렵다

③ 노란색 정사각형 (우측)

의미 추론: 아무런 설명이 없다면 해석 불가
어포던스 해석 부족: 색상 외에는 기능적 단서가 없음
초보자 반응: 클릭이 가능한지, 혹은 단지 색 구분 요소인지 인식하지 못할 수 있음

④ 스크롤 바 UI 구성요소 (오른쪽)

의미 추론: 화면의 내용을 위아래로 이동시킬 수 있음
어포던스 해석: 위·아래 화살표와 회색 박스가 '움직일 수 있음'을 암시
초보자 반응: 초보자는 "엘리베이터 버튼"이라는 텍스트가 실제 버튼인지 단순 라벨인지 구분하기 어려울 수 있음. 또한, 마우스로 클릭 후 드래그해야 한다는 조작 방식 자체를 모를 수 있음

디자인 관점에서의 시사점

명확한 시각적 단서 제공 필요
시각적으로 클릭 가능함을 나타내는 그림자, 입체감, 마우스 오버 시 변화 등은 가상 어포던스를 강화한다.
설명적 요소 보완
도구 설명(tooltips), 라벨, 애니메이션 피드백 등을 통해 의미를 강화할 수 있다.
기호의 문화적·세대적 해석 차이 인지
같은 기호도 세대나 문화에 따라 전혀 다르게 인식될 수 있으므로 **사용자 분석(persona 분석)**이 선행되어야 한다.

인터랙션 디자인은 단순히 기술을 다루는 것이 아니라, 사람과 기술이 서로 이해하고 소통하는 방법을 만드는 과정이다.

728x90