HCI x UX

Activity - Interaction

채영sw 2025. 3. 30. 14:37

Interaction (상호 작용) = 최적의 사용자 경험을 제공하기 위한 행위적 요소

-> 경험은 상호작용에서 비롯되기 때문에, 사람들의 경험을 이해하기 위해서 필수적!

 

상호작용의 주체와 관계에 따라

  • 사회학
    • Human - Human Interaction
    • 사건들을 이루는 가장 기본적 단위로, 둘 이상의 사람이 모여 서로 영향을 주는 양방향적 관계
    • ex. 친구 관계
  • 커뮤니케이션학
    • Human - Content Interaction
    • 상호작용의 개념을 좀 더 구체화
    • 미디어를 통해 전달되는 콘텐츠와 이를 전달 받는 사람 사이에 일어나는 여러 가지 과정
    • ex. 미디어 광고에 사람들이 어떤 영향을 받고 어떻게 느끼는지
  • 인간 - 컴퓨터 상호작용학
    • Human - Computer Interaction
    • 사람이 디지털 시스템을 사용하는 과정에서 시스템과 사람 사이에 일어나는 일련의 절차
    • 과거에 비해 디지털 시스템 발전 -> 더욱 다양한 형태와 방식을 취할 수 있음 -> 더 넓고 다양한 경험 제공

상호작용의 네가지 절차

 

1) 표명 단계

  • 사람들이 자신의 마음 속에 가지고 있는 추상적인 목표를 디지털 시스템에 나타난 구체적인 정보로 표현하는 단계
  • 사용자는 일반적으로 목적을 가지고 시스템에 접했을 때 시스템에서 제시한 정보를 보고 자신의 목표를 구체적으로 명료화
    • ex. 유튜브, 음악 앱의 디지털 시스템 추천 -> 영상을 보겠다/음악을 듣겠다의 목표 구체화
    •       여름에 여름 음악 추천...등
  • 고려할 점 
    • 사용자가 특정 시스템을 사용해 달성하고자 하는 목표가 시스템에서 제공하는 정보나 기능과 얼마나 일치하는가?
    • 사람들이 이러한 기능이나 정보를 찾는 과정이 얼마나 용이한가? (디자인 중요)

 

2) 변환 단계

  • 시스템의 입력 장치가 받은 정보를 시스템의 처리 장치로 변환하는 단계
  • 입력 장치가 시스템의 기능을 얼마나 충실하게 반영하고 있는지를 의미
  • 사용자에게 제시되는 입력 장치가 시스템의 기능과 상호작용의 가능성을 얼마나 충실하게 표현할 수 있는지가 중요
    • ex. 음악 top 100 한 번에 담았다가 취향이 아닌 음악이 들어갔을 때 삭제, 한 번 더 듣고 싶으면 다시 넣는 기능, 순서 바꾸는 기능 등 
  • 데이터베이스에 있는 기능을 실제 인터페이스에서 구현하지 못한다면 변환 단계가 충실하지 못하다~

 

3) 표현 단계

  • 시스템의 반응을 출력 도구로 전환하는 과정
  • 시스템이 가지고 있는 정보의 넓이와 깊이를 시스템의 출력장치가 얼마나 충실하게 묘사할 수 있는지가 중요
    • ex. 고상향 그래픽이 탑재된 컴퓨터에서만 돌아가는 게임, 게임 렉 -> 표현 단계가 충실하지 못하다~ 

 

4) 평가 단계

  • 인터페이스에 나타난 정보를 보고 이를 사용자가 가지고 있는 목표와 비교
  • 표명 단계에서 사용자가 마음속에서 구체화한 목표가 정말 잘 이루어졌는지 평가
  • 적정한 범위의 정보들이 사용자가 이해하기 쉬운 형태로 제시되고 있는지가 중요
    • ex. 내가 듣고 싶은 음악이 잘 나온다.

상호작용의 네 가지 종류

- 상호작용에 사용되는 내용을 만드는 과정과 그것이 사용자에게 전달되는 과정에서 사용자와 사업자 중에 누가 주도권을 가지고 있는지에 따라 상호작용의 유형 구분   전송형 | 등록형 | 문의형 | 대화형

 

  • 전송형 (Transmission)
    • 사업자가 주도해 내용을 만들어 사용자에게 전달하는 상호작용의 유형
    • 전적으로 사업자가 편집권을 가지며 사용자는 수동적으로 정보를 받아들이는 상호작용
    • 콘텐츠의 품질이 곧 상호작용의 품질을 좌우함
      • ex. TV 송출
  • 등록형 (Registration)
    • 사용자가 내용 생성을 주도하고 이를 사용자에게 전달하는 사업자 유형
    • 내용은 개별 사용자를 통해 생성되지만, 상호작용이 진행되는 과정은 사업자나 운영자를 통해 이루어짐
    • 등록하는 과정이 얼마나 쉽고 즐거운지, 사용자 입장에서 상품이나 콘텐츠를 등록하는 비용에 큰 효과를 거둘 수 있게 하는 것이 중요 (ex. 포인트, 돈)
      • ex. 족보 공유 사이트
  • 문의형 (Consultation)
    • 내용을 만드는 것은 사업자가 주도하고 사용자가 전달 과정의 주도권을 가지고 있는 유형
    • 사업자에 의해 만들어진 상호작용의 내용이 사업자의 요구에 얼마나 적합한지, 그 내용을 찾아내는 과정이 얼마나 쉽고 즐거운지가 중요
      • ex. 밀리의 서재 - 만들어진 콘텐츠를 사용할지 말지는 사용자가 정한다~
  • 대화형 (Conversation)
    • 상호작용 내용을 만들고 전달하는 것도 사용자가 주도하는 유형
    • 어떤 콘텐츠를 올리고 어떤 콘텐츠를 소비할지 모두 사용자가 결정
    • 사용자가 상호작용의 내용과 절차를 주도하기 때문에 그 내용을 작성하는 과정이나 이를 전송하는 과정이 얼마나 사용하기 쉽고 즐거운지가 중요
      • ex. 인스타그램, 유튜브 등의 소셜 미디어 

상호작용의 수준 평가 : 상호작용성

- 시스템이나 사람 간에 상호작용이 얼마나 활발한지를 측정하는 개념

- 상호성 | 반응성 | 신속성 | 다중성 | 통제성

 

  • 상호성 (Reciprocity)
    • 상호작용성을 이루는 가장 기본적인 개념
    • 시스템이 일방적으로 정보를 전달하는 것이 아니라 사용자 입장에서 시스템과 양방향 의사교환이 얼마나 가능한지 판단
    • 상호작용이 얼마나 자주 발생하는가?
      • ex. 카카오톡, 인스타그램 등 매일 쓰는 시스템 > 연말 정산을 할 때만 들어가는 국세정의 홈텍스
  • 반응성 (Responsiveness)
    • 시스템과 상호작용하는 사용자에게 시스템의 응답이 얼마나 적절하고 관련성이 높으며 사용자의 필요를 충족시켜 주고 있는지 판단
    • 시스템이 사용자의 행동(액션)에 얼마나 적절하게 반응했는지
      • ex. 구글 검색 추천 검색어('경희' 만 쳐도 '경희대학교'가 나오는 것)
  • 신속성 (Speed of Response)
    • 상호작용의 반응이 얼마나 즉각적이고 지연이 없는지 판단
    • (=) 매체의 동시성  - 매체의 전달 속도가 빠르거나 동시에 여러 가지 내용이 오갈 수 있을 때
      • ex. 다양한 앱 한 번에 사용, 왔다갔다 용이, 접속 시간
  • 다중성 (Multimode)
    • 한 번에 얼마나 다양한 모드의 정보를 제공하고 제공받을 수 있는지 판단
    • 모드 : 인간, 기계가 정보를 주고 받는 채널의 성격
      • 시각, 청각 모드
      • ex. 휴대폰 - 통화(청각), 스와이프(촉각)...
    • 높은 해상도를 가진 다양한 종류의 정보를 한 번에 주고 받을 수 있을 때
  • 통제성 (Controllability)
    • 상호작용을 통해 제공되는 정보의 순서와 내용 및 시간을 사용자가 조종할 수 있는 정도
    • 부가적 상호작용성 -> 내용적 통제성 | 시간적 통제성
      • 내용적 통제성
        • 사용자가 상호작용의 내용을 얼마나 많이 변형할 수 있는가
          • ex. 나무위키 > 뉴스
      • 시간적 통제성
        • 상호작용하는 시간과 관련된 요소들을 사용자가 얼마나 마음대로 결정할 수 있는가
          • ex. 유튜브 영상 배속 > TV 송출 영상

상호작용의 행위와 스타일

- 사람들은 특정 목적을 달성하기 위해 어떤 행위를 하면서 상호작용함

- 사람들이 어떤 행위를 하면서 디지털 시스템과 상호작용하느냐에 따라 어떤 종류의 상호작용 스타일을 제공해 주는 것이 좋은지를 결정!

- 지시하기와 명령어 스타일 | 이야기하기와 대화형 스타일 | 탐색하기와 메뉴 스타일 | 조종하기와 직조작 스타일 | 위임하기와 대리인 스타일

 

  • 지시하기와 명령어 스타일
    • 지시하기
      • 사용자가 어떤 일을 수행하기 위해 디지털 시스템에게 어떤 작업을 지시하면, 시스템은 주어진 명령을 그대로 수행하기만 하는 경우
    • 명령어 스타일 (Command Entry Style)
      • 기능키, 문자, 단축키, 명령어 등을 통해 디지털 시스템과 상호작용하는 것
        • ex. ctrl c + v, 포토샵/피그마 명령어 단축키..
      • 사용자마다 격차가 존재
        • 초보자들이 쓰기 어렵다 (-) vs 고수가 되면 매우 편하다 (+)
  • 이야기하기와 대화형 스타일
    • 이야기하기
      • 사용자가 시스템과 대화하고, 시스템은 사람의 대화 상대가 되는 경우
      • 사람들이 일상생활에서 해왔던 사람과 사람 간의 대화 방식으로 디지털 시스템을 대하는 것
    • 대화형 스타일 (Dialog Style)
      • 시스템과 사용자가 일련의 질문과 대답을 주고 받으면서 상호작용을 진행시켜 나가는 방식
      • 질의응답형 스타일
        • ex. 윈도우 다운로드 창 다음, 동의함 등
        • ex. ATM 기 - 카드를 회수해야 돈이 나오도록 스타일 바꿔서 카드 분실 사고 감소
      • 양식형 스타일
        • ex. 설문조사 폼, 회원가입 정보 입력
      • 자연어형 스타일
        • ex. 시리, AI 스피커 (맥락 중요)
  • 탐색하기와 메뉴 스타일
    • 탐색하기
      • 사용자가 다양한 정보를 둘러보고 자신이 원하는 항목을 선택하는 방식
      • 새로운 지식을 알아가는 사용 과정 (+) vs 정보의 바닷속 방황 (-)
    • 메뉴 스타일 (Menu Style)
      • 사용자에게 선택할 수 있는 대안을 텍스트나 그래픽 기반으로 제시 -> 메뉴구조를 항해하면서 원하는 대안 서치 -> 마우스나 키보드, 기능키를 이용해 원하는 대상 선택 -> 활성화
        • ex. 햄버거 바
  • 조종하기와 직조작 스타일
    • 조종하기
      • 사용자가 자신이 가지고 있는 실제 대상에 대한 지식을 기반으로 시스템에서 제공하고 있는 대상을 조종하는 방식
    • 직조작 스타일 (Direct Manipulation Style)
      • 사용자의 작업 환경을 반영하는 대상이나 기능을 시각적으로 표현하는 인터페이스가 있고, 그 인터페이스 대상을 마우스 등의 방식을 이용해 직접 선택해서 원하는 조종 시행
        • ex. 게임 캐릭터 옷 갈아입히기, 아이템 창 바로 반영
    • 조건 3가지
      • 사용자가 관심을 가지고 있는 대상이 항상 사용자에게 명확하게 제시되어야 함  (ex. 게임 캐릭터 마커화)
      • 복잡한 명령어를 입력하거나 메뉴를 선택하는 것이 아니라, 관심의 대상을 직접 조종할 수 있어야 함
      • 조작을 가한 결과가 즉시 나타나야 하고, 그 결과가 마음에 들지 않을 때에는 이를 번복할 수 있어야 함
  • 위임하기와 대리인 스타일
    • 위임하기
      • 사람이 직접 수행하기 귀찮은 행위를 디지털 시스템에게 위임함으로써 디지털 시스템이 어느 정도의 자율권을 가지고 작업을 수행하는 경우
    • 대리인 스타일 (Intelligent Agent Sytle)
      • 특정 사용자가 어떤 필요성을 느끼고 있다는 것을 사용자가 직접 명시하지 않아도 미리 예측하고, 대리인 스스로의 판단 하에 필요한 행위를 취함
      • 나아가 새로운 개념이나 기술을 학습, 자신이 취한 행위에 대한 설명 가능
        • ex. 챗 gpt 논문 요약
    • 조건 3가지
      • 대리인 시스템의 행동이 예측 가능해야 함 (시도때도 없는 참견 x, 신뢰 중요)
      • 사람이 대리인에게 의존할 수 있어야 함 (의존할 만큼 안정적)
      • 사용자도 대리인의 의견을 믿어야 함
        • ex. 할루시네이션 방지를 위한 장치 (출처를 함께 준다든지)

상호작용의 발전 추세

- 사회적 상호작용 | 창조적 상호작용 | 촉지적 상호작용

 

  • 사회적 상호작용
    • (HCI 1.0) 디지털 시스템과 개인 간의 기능적 상호작용 -> (HCI 2.0) 사용자 간의 네트워크 및 커뮤니티 기반의 상호작용
    • 참여하는 상호작용 (ex. 치치직) | 개방하는 상호작용 (ex. 족보 공유) | 공감하는 상호작용 (ex. 기부 사이트 스토리텔링)
  • 창조적 상호작용
    • 이미 기존에 만들어진 제품이나 서비스 단순 이용 -> 새로운 디지털 제품이나 서비스를 사용자가 직접 만들어 가는 상호작용   |  UCC (User Created Contents) UGC(User Generated Contents) 
    • 사용자가 제작자의 작품에 반응 (ex. 좋아요) | 제작자가 사용자의 의견 파악 (ex. 댓글) | 사용자가 공유된 관심사를 형성 (ex. 알고리즘 형성)
  • 촉지적 상호작용
    • 디지털 형식이기 때문에 물리적인 형태나 느낌을 가지고 있지 않아 다소 추상적 -> 최근 구체적으로 손으로 만져지는 상호작용으로 변화시키는 추세
      • 촉지적 조작 - 사용자의 직접적인 조작에 의한 물리적이고 신체적인 상호작용
        • 촉각 직조작 (ex. 스마트폰 확대/축소) | 경량 상호작용 (ex. 아이폰 사진 확대/움직임 즉각적으로 움직이는 피드백) | 동형 효과 (ex. 카메라 확대/축소 현실의 실세상 조작과 비슷)
      • 공간적 상호작용 - 상호작용이 일어나고 있는 공간의 의미를 적극적으로 활용한 상호작용, 밖에서 하는 행동 안에서 똑같이
        • 내재적 공간 (ex. VR 농구는 농구장 배경) | 전체적 상호작용 (ex. 닌텐도 운동 자기 몸 전체 사용) | 신체적 소통 (ex. 신체 움직임으로 의사 표현)
      • 표면적 묘사 - 디지털 시스템에서 상호작용의 대상을 사실적으로 표현하는 상호작용, 현실과 같은 입체감
        • 중점표현 (ex. 실제 세상 - 지도 나름대로 의미있게 표현) | 외재화 (ex. 생각하는 것 구체적인 대상으로 제공) | 지각된 맵핑 (ex. 로드뷰 실제 새상의 모습의 매칭)
      • 내재화된 촉진 - 사용자의 행동을 촉진, 허용하거나 금지, 제한하는 상호작용
        • 내재화된 제약사항 (ex. 사용자 행동 미세 조절 - 협업 유도) | 다중접속점 (ex. 모든 사용자가 어떤 일을 동시에 보고 직접 조작) | 맞춤형 표현 (ex. 시스템 표현 방식 = 일상생활 경험)

더보기
사용 교재

+ khux 세션 자료

 

'HCI x UX' 카테고리의 다른 글

유저 리서치 방법론 _ 1  (0) 2025.04.06
HCI x UX 개론  (1) 2025.03.17