HCI: 정의와 개념정립

1. 정의와 이해

① 정의

Human

Computer = 작업의 기반이 되는 시스템을 말하기도 함.

Interaction(or Interface) = 의사소통, 사용방법

-> 사용자(사람)가 컴퓨터를 가지고 작업하면서 보다 편하고 효율적이게 하는것을 고려하고 이에 맞게 활용&적용하는 분야라고 할수 있다.

-> 작업을 하는데 있어 사람이 시스템에 맞추는게 아니라 시스템을 사람에게 맞춘다고 볼수도 있다.(시스템으로서 인간을 이해하고 반응하는 궁극점)
-> 컴퓨터 그래픽, 운영 체제, human factors, 인간 공학, 산업 공학, 인지 심리학, 그리고 컴퓨터 과학등을 아우르는 융합학문


② ACM SIGCHI가 예측한 미래 HCI

편재커뮤니케이션 (ubiquitous communication)

컴퓨터 그래픽의 보편화(mass availability of computer graphics)

-> CUI에서 GUI로 바뀐 컴퓨팅 환경과 맞물림.

혼합미디어(mixed media)

고대역 상호작용 (high bandwidth interaction)

대형이며 동시에 박막형인 디스플레이(large and thin display)

내장형 컴퓨터 작업(embedded computation)

집단인터페이스(group interface)

->예. 위키위키나 스프링노트등등.

사용자맞춤(user tailorability)

->예. 구글의 맞춤검색

정보유틸리티(information utility)

③ 좋은 인터페이스란?

-> 효율&편의성: 사용자가 시스템을 통해 작업을 하는데 있어 시스템의 존재자체를 의식치 않은채 작업에 집중할수 있는 인터페이스.

-> 직관성: 본능으로 조작해도 실수를 줄일수 있는 인터페이스?

-> 관대성: 작업에 실수가 있어도 만회가 가능

-> 통제성 제공: 사용자가 시스템의 통제자로서 작업을 할수 있게 한다.

등등.

2. 사람의 인지처리에 대한 이해

* 인간의 감각은 시각/청각/촉각/후각/미각등을 기반으로 한다. 이 오감을 통해 정보가 입력되고 인간의 감각 능력에 따라 인지 여부가 달라진다. 감각능력에 대한 지식은 HCI 디자인 요소의 기준을 제시.

1) 시각

①시각

-> 일반인의 정보인지에서 80%를 차지.

-> 사람의 눈에 간상체와 원추체가 있는데, 간상체가 상대적으로 더 많아서 색상의 차이보단 명암의 차이에 더 예민하다. (JPEG포맷이 가능한 근본적인 이유)

-> 인간의 심리/집중(attention)/흥미/관심/과거의 경험등이 복합된 적극적 활동에 따라 인식에 영향을 받음.

근점(near point): 눈이 초점을 맞출 수 있는 가장 가까운 거리

원점(far point): 초점을 맞출 수 없는 최초의 먼 거리

암초점: 어두운 곳에서 눈이 자발적으로 움직이는 조절 상태. 일반적으로 정상 눈의 암초점은 팔 길이 정도.

최소분간시력(最小分揀視力, minimum separable acuity): 검출할 수 있는 과녁의 최소 특징 또는 과녁의 부분 사이의 최소 공간. 

Vernier 시력: 한 선과 다른 선의 측방향 변위(lateral displacement), 경미한 치우침을 분간력.

②시지각

* 전경과 배경(Figure & Ground)

하얀영역에 집중→대칭이 잘된 꽃병같은류 / 검은영역에 집중→마주한 두 사람얼굴

-> 어느 객체에 집중하는가에 따라 집중을 받는 객체는 전경이 되고, 나머지들은 배경으로 처리. 영상물등에서 멀리 있는것이 또렷하고 가까이 있는것이 살짝 흐릿하게 해서 멀리있는것에 집중케 하는 연출이 이것과 관련. (반대의 경우도 가능.)

* 군집화

근접성 : 두 형태가 서로 가까이 있을수록 함께 묶여 지각.

-> 점들이 무작위로 흩어졌어도 가까이 있는 몇몇끼리는 한묶음으로 인식 됨.

유사성 : 유사한 자극일수록 함께 묶여 지각.

연속성 : 연속되는 자극들은 그렇지 않은 자극들에 비하여 어떤 공동의 형태를 이루는 것으로 지각.

폐쇄성 : 공백이 있거나 결손 된 부분이 있으면 그것을 메워 하나의 동질적인 형태를 만들려는 경향.

-> 예. 점선으로 원을 그려도 원으로 인식됨

* 착시

-> 수수께끼등에도 많이 나오는 착시퀴즈에 나오는 현상들이 있다.

2) 청각

-> 음계(音階, musical scale)에서 중앙 ‘다’(C)음의 주파수는 256Hz, 한 옥타브(octave)마다 주파수가 배증.

-> 중앙 ‘다’음보다 한 옥타브 위 음의 주파수는 512Hz

-> 사람의 귀는 평균적으로 20~20,000Hz를 감지. 주파수마다 감도가 다르고 또 사람에 따라 편차가 있다.

-> 고음(高音, pitch): 주파수가 크다.

     저음 (低音, low-pitched lone): 주파수가 작다.

일상에서 청각관련 인터페이스.

- 문을 닫을때 잠금쇠가 닫히는 소리가 난다.

- 게임에서 아이템을 먹었을때 동전이 짤랑거리는 소리가 난다.

- 냄비에 들어 있는 음식물이 보글보글 끓는 소리가 난다.

3) 촉각

-> 사람의 신체부위마다 통점/냉점/압점의 분포수가 제작각으로 손바닥에는 감각점이 많아서 예민하다.

3. 인지적 모델

1) 정보처리 모형

출처. http://www.pksafety.co.kr/3-1-711.htm

감각처리	오감을 기반으로 정보의 질과 양을 결정
단기 감각 저장고	자극의 종료후에도 일시적으로 물리적 자극에 대한 감각을 1초 이내의 짧은 시간동안 유지.
지각	단기감각 저장고에 유지되던 자극들은 신경계의 상위중추에 의해 계속 처리
의사결정	자극이 지각적으로 범주화된 뒤 자극에 대한 반응을 결정.
반응실행	행동을 수행하는데 필요한 근육을 움직이기 위해 부가적 단계
피드백과 정보 흐름	반응의 결과를 감시하는 피드백 구조 형성, 피드백은 오감각을 통함.
주의	제한된 가용성을 갖는 자원, 만일 어떤 정보 처리를 하는데 주의 자원을 더 많이 요구하면 다른 처리에 대한 자원이 줄어들게 되고 그 수행의 질 저하.
신호 검출이론 (SDT)	쉽게 식별할 수 없는 두 독립상태 상황(신호와 무신호)에 비교 검출

2) 정신모형(mental model, 멘탈모델) & 개념모형(conceptual model)

	정신모형(mental model)	개념모형(conceptual model)
대상	사용자 입장에서 시스템을 이해한 구조.	설계자(개발자) 입장에서 시스템을 이해한 구조.
기본개념	도구나 시스템을 처음 접했을때 불완전하거나 잘못된 정신 모형은 시행착오(피드백)를 겪으면서 완성된다.	개발자에 의해서  효율적인 정신 모형의 형성과 발달이 용이하게 설계되는 모형.
행동 및 구조적 특징	- 시스템의 보이는 부분이 보이지 않는 부분과의 연결을 사용하여 행동  - 기존의 경험이나 유사한 정신 모형을 사용하여 문제를 풀려고 시도  - 정신 모형은 비과학적이며 비효율적일수도 있다.	- 사용자에게 보이지 않는 부분들을 보이게 함.  - 파일 구조와 각 프로세스에 대한 정신 모형을 빠르고 정확하게 형성 피드백 제공(피드백은 상태 메시지, 에러 메시지 등을 포함)  - 일관성있는 규칙들이나 패턴에 주의해야한다.   - 사용자에게 친숙한 메타포(metaphor)를 통하여 기능들을 나타냄

3) 단기기억 & 장기기억

	단기기억	장기기억
처리방식	한번에 기억할수 있는 한계는 7±2개  음성부호를 약호화하는 경향 -> 메인메뉴를 간결하게 5개 이내로 하는것과 관련.	항목을 약호화 수행조작 단계를 거쳐 장기적으로 기억가능.  기호부호를 약호화하는 경향.
지속기간	20초 이내. -> 약호화와 의미덩어리(chunk)를 활용해서 지속시간이나 처리용량 조절가능.	의미가 강한 기호부호일수록 오래지속된다.

4. 정보디자인에 대한 기초

1) 화면설계와 요소

① 조작요소

- 윈도우와 패널, 스크롤

- 버튼과 컨트롤

- 배경 등등.

② 표현요소

- 이미지

- 텍스트

- 비디오

- 사운드

- 애니메이션 등등.

2) 인터페이스 설계원칙

일관성	기화면에서부터 끝 화면까지 구성의 일관성 -> 전체적인 테마나 구성양식을 통일
예측성	사용자의 정신모형을 고려해서 직관적으로 형태나 심볼을 통하여 기능을 예측할 수 있어야 함
가시성	눈에 잘 띄이는 모양이나 색상등으로 인지하기 좋게 하고, 기능과의 관계성이 있어야 한다.
투명성	전체 정보 구조를 알 수 있도록 함 -> 예. 싸이트맵
피드백	사용자가 작업시 휴먼에러(human error)를 줄일수 있게 진행상황이나 결과에 대한 알림이 명확해야 한다.

3) 메타포(Metaphors)

1. 메타포를 운용하게 될 시스템 기능과 사양을 이해한다.

2. 사용자 분석을 통해 가능한 많은 메타포를 개발한다. (경험과 직관, 사용자 경험과 지식 분석)

3. 개발된 많은 메타포가 각각의 인터페이스와 일치하는지 확인한다. (사용자와 개발자의 메타포)

실제 예시.

출처. http://monodream77.blog.me/130110919375

온도계: 온도조절? 온도알림?

자물쇠: 비밀? 잠금? 폐쇄?

-> 메타포는 전달하고자 하는 구조/의미를 사용자가 직관적으로 알수 있게 추상화시키는 작업이기도 하다.

5. 색상

1) 색채

①무채색: 색상, 채도가 없는 색 [흰색/회색/검정색]

②유채색

순색	가장 순수하고 선명한 채도가 높은 색
청색	순색에 흰색이나 검정을 섞은 색 -> 순색+흰색 : 명청색, 순색+검정 : 암청색
탁색	순색에 회색을 섞은 색 -> 순색+회색, 청색+회색

2) 색의 3속성

색상(Hue)	명도	채도
[출처: 위키백과, 색상환] -> 색상에 대한 명칭	[출처: 눈높이백과, 명도-무채색판] -> 색채의 밝고 어두움	[출처: 위키백과, 채도] -> 색이 선명하게 채색된 정도 혹은 색의 순도

3) 채도와 명도

[출처: 컬러색조]

R, G, B 이야기입니다. https://t.co/oyS86xGR38 pic.twitter.com/uTEod5YxaS

— 정민석 (@dissectt) November 7, 2015

* 국민은행이나 우리은행의 간판같은경우, 1가지 색상의 색조를 바꿔서 디자인 한것이다.

ex1. 국민은행: 선명한 노란색+흐릿한 노란색 -> 한국색채대상2004에서 수상이력이 있는 색채디자인[참고]

ex2. 우리은행: 연한 파란색+밝은 파란색

4) 색의 성질

①지각도

②진출, 후퇴

③팽창, 수축

④온도감

⑤주목성

⑥중량감

⑦시간감

5) 색상심리

①온도

온색	중성색	난색
빨간색   주황색   노란색   등등. -> 주로 붉은색 계통	연두색   초록색   보라색   등등.	하늘색   파란색   남색   등등. -> 주로 파란색 계통

②무게

-> 명도와 무게감이 반비례

가벼움	무거움
고명도 노랑   고명도 파랑   고명도 빨강   고명도 초록	저명도 노랑   저명도 파랑   저명도 빨강   저명도 초록

③ 색상심리

출처: [SAC 실용미술 IT 디자인학부 장은경 교수 컬럼] 색에 대한 이야기

④ 대비

색상대비	주변의 다른 색상의 영향을 받아 색상의 차이가 크게 보이는 현상
명도대비	명도가 다른 색을 대비시 명도의 강약이 더 부각됨.
채도대비	주변의 색상에 의해 실제채도보다 낮게 보임.
면적대비	같은 색이라도 면적이 클수록 명도/채도가 증가되서 밝아 보이고, 면적이 작을수록 명도/채도가 낮아보임.

6) 배색

①색상중심

계통색	기준을 둔 색상과 같은 색상이면서 색조가 다른 색과의 배색 -> 안정/질서/무난함
유사색	기준을 둔 색상과 색상환에서 인접한 색 -> 정리/안정
반대색	기준을 둔 색상과 색상환에서 거리가 먼 색 -> 강조/명쾌

②색조중심

동일색조	기준을 둔 색조와 같은 색조이면서 색상이 서로 다른색과 배색 -> 단순
유사색조	기준을 둔 색조와 바로 인접한 색조의 배색 -> 차분/정돈
대조색조	기준을 둔 색조와 멀리 떨어져 있는 색조의 배색 -> 강조/강함
Tone in Tone	비슷한 톤의 조합
Tone on Tone	동일색상으로 2개의 톤의 명도차를 비교적 크게 두는 배색

③ 배열중심

그라데이션	색상의 자연적 이행과 명암계조의 변화(색상/색조를 이용한 그라데이션)
세퍼레이션	2개 이상으로 배색을 하는데,인접한 색상의 관계가 애매하거나 대비가 지나치게 강조된 경우, 주로 무채색인 분리색을 넣는다.
강조	주조색과 대조적인 색상과 톤을 이용함으로써 포인트를 준다.  (단조로운 배색에 대조적인 색을 소량 첨가함으로써 배색에 초점을 주어 전체의 상태를 돋보이게)
반복	2색 이상을 사용해서 통일감이 부족한 배색에 일정의 질서에 기초한 조화를 주기 위한 방법
토널(Tonal)	기본으로 하는 톤에 중명도, 중채도의 중간색 계의 흐린 톤(Dull Tone)을 이용하는 배색기법  수수한 인상
까마이외 (Camaieu)	언뜻 보기에 한 색으로 보일 정도로 미묘한 색차의 배색
비콜로(Bicolore)	2가지 색상으로 배색  흰색+채도가 높은 vivid톤 색상으로 대비효과와 명쾌한 느낌
트리콜로(Tricolore)	색상과 톤으로 명쾌한 대조가 되는 배열

기타.

네이버캐스트:: 색의 특성과 효과(1) - 색채의 이론

순수 검은색(#000000)은 의외로 가독성이 떨어짐.  검은색 대신 #0D0D0D, #0F0F0F, 또는 #141414를 사용 [#링크]

변경이력.

2012.04.01	초안
2013.06.15	색상심리와 배색부분 마무리