사람-컴퓨터-상호작용 :: HCI

HCI 

정의 : (human computer interface. ) 사람과 컴퓨터(혹은 디지털 시스템) 사이의 상호작용에 대해연구하고 설계하는 분야를 가리킨다. 

범위 : UI / UX / Interaction

 

HCI의 3요소
    1. 유용성(Usefulness) : 사용자에게 유용한 콘텐츠 혹은 기능.
    2. 사용성(Usability) : UI / UX
    3. 감성(Affect) : 디자인 혹은 인터랙션적인 측면

 

유용성 (심성모형 중 가치모형) 
    1. 기능적 가치

    서비스의 본질적인 가치. 사용자가 방문하는 이유. 가장 본질적인 욕구를 충족시켜주는 가치. 
    2. 조건적 가치 

    사용자가 꼭 필요한 장소와 시간에 원하는 서비스를 사용하고자 하는 욕구를 충족시켜주는 가치. 
    Ex) 위치서비스 기능, 비행기에 탑재된 낙하산. (평소엔 쓸모가 없다가 특정 상황에서 높은 가치를 발휘함.)
    3. 유희적 가치

    상품이나 서비스의 소비를 통해 사람들이 느끼는 감성적인 만족도 혹은 즐거움을 느끼는 가치. 
    ex1) 게임을 플레이 하는것. 부가적인 정보, 댓글.

    ex2) 쇼핑몰에 구매를 위해서 오는것보다 그냥 쇼핑과정을 즐기는 것이라면 기능적 가치보다 유희적 가치를 더 충족시키는 것
    4. 정언적(지식적) 가치

    새로운 상품이나 서비스 기술 등에 호기심을 가지고 배우려고 하는 욕구를 충족시켜주는 가치.  
    Ex) VR, 얼리어댑터사이트? 

사용성(실제 사용성 테스트를 할때 사용)

7가지 행위의 모형 참고자료
목적 - 유도 - 행위 - 반응 - 지각 - 해석 - 평가
———유저모형——+—— 디자인 모형————

사용성
1) 효율성
    1. 단축성 : 과업을 단순하게 마무리하는 정도, 단계를 줄여주는 기능.

    ex) 전화번호 플리커, 초성검색, 카카오톡 이름순 그루핑, 정렬방식 선택, 평점 입력시 별5개로 평가.
    2. 반응성 : 시스템 자체의 메모리나 네트워크 반응 속도, 사용자의 상태를 알려주는것 

    ex) 화장실불,  활성화와 비활성화, 이모티콘 졸려, 카카오톡 메시지 에러시 느낌표!!, 카카오 메시지의 도착한 메시지 수. 현재위치, 출발과 도착의 경로, 

 

2) 정확성
    1. 사전방지성 : 오류를 저지를 수 있는 가능성을 미연제 제거

    ex) 정수기 온수 수위치를 눌러야 물이 나오는것, 휴지통 삭제, 취소할때 이탈할때 뜨는 확인문구, 알림창에 정말 취소하시겠습니까? 
    2. 오류발생 감지성 : 오류가 발생했을때 알려주는 알려줌, 시각, 청각, 촉각

    ex) 메시지 앱에 전송이 안되었을때, 비밀번호가 올바르지 않습니다. 검색결과가 없습니다. 설치할 수 없습니다. 등
    3. 오류 회복성 : 엘리베이터 층수 버튼

    ex) 뒤로가기 버튼, 영상 이어보기, 휴지통 복구하기, 파일실행 오류났을때 재 실행, 특정페이지에서 벗어나 다시 회복되었을때 위치값이 맞지 않음. 

 

3) 의미성 (시각적인것)
    1. 이해성 :컴포넌트의 명확성, 학습과 관련

    ex) 안내문, 아이콘의미, 충전기 상태, 레이블명(txt)의 명확성, 인지부하적관점의 이해

    ex) 카카오뱅크 길은정 : 중요한것이 3가지 이상이라는것은 중요한것이 하나도 없다는것과 같다.
    2. 기억성 : 사용자가 이전 행위를 기억 못해도 시스템이 기억 (히스토리 자동생성, 배달기록, 최근 본 영화)
    3. 가독성 : 시각적인정보 전달이 잘 되고 있는가.  정보의 우선순위. (이벤트가 이벤트 처럼, 다양한 컬러는 가독성x) 
    4. 변화 제시성 : 시스템 상태 변화가 생겼을때 사용자가 감지할 수 있는 속성 (신호등 시간이 얼마 안남았을때 깜빡임, 카카오뱃지, 업데이트)
    5. 논리성 : 사용자가 보기에 정보가 제공되는 순서나 구조가 논리적이라고 생각할 수 있어야함. (그루핑과 관련)
        a. 상식적인것
        b. 닐슨엔노먼
            i. Z패턴(브랜드홈페이지, 비주얼)
            ii. F패턴(포털형태 정보전달). 
        c. 과업의 연속성 - 이전 페이지와 다음 페이지의 연결성 (CGV 2인결제-> 자리선택2개만) 
    d. Ex) 카드를 빼고 돈, 카태고리)

 

4) 유연성
    1. 사용자주도권 : 원하는대로 시스템과 상호작용할 수 있다. (카톡 테마설정, 물건을 구매할때 결제방법을 마음대로 할 수 있는것. 결제에 대한 권한) 
    시스템 주도권 (아이디를 입력하세요. 재 설치후 이용하시기 바랍니다. 공인인증서 로그인. 인터넷 뱅킹 자동 로그아웃)
    2. 대체성 : 사용자에게 2가지 이상의 선택권을 주는것. (작업선택시 복사, 삭제, 전달, 공유중 선택하는것. 서비스제공에 동의할때 전체 동의를 한번에 할지, 하나씩 동의할지. 상품정렬기준을 가격, 상품평, 인기도 등등, 전체보기 개별보기등, 주소 검색시에 실질적인 데이터만 나오고 추천되는 주소가 없으면 대체성에 위반되는 것이다)
    3. 다중성 : 한번에 두가지 동시사용 가능 (헬스+TV, 기차 예매시에 동시에2장을 예매할때, 카톡 + 파일)
    4. 개인화 : 블로그 메인을 개인기호에 맞게 바꾸는것.
    5. 연결성 : 다양한 시스템과의 연결성


5) 일관성 (친숙성 - 예측가능성으로 넘어감)
1. 친숙성 : 실제 경험을 바탕으로 시스템을 사용하도록 하는것.  (좋아요, 휴지통, 폴더 메타포) 
2. 예측가능성 : 사용자가 과거 시스템과 상호작용한 경험에 비추어 자기가 어떤행동을 하면 그 결과가 어떻게 되리라는것을 예측할 수 있게 하는 속성이다. (음악플레이어, 플레이, 일시정지, 음향크기조절등, 햄버거 매뉴) 
3. 일반화가능성 (일관성)
a. 내부적 일관성 : 스타일 가이드 (폰트 레이아웃) 
b. 외부적 일관성 : 씨지부이나 메가박스나 전체적인 패턴은 유사. 쇼핑몰의 일반적인 패턴.

감성 (시각적 그루핑)
1) 게슈탈트의 법칙
    1. 근접성의 법칙 : 가까운 거리에 모여있는것. 매뉴그루핑, (버튼, 매뉴, 입력필드, 등) 
    2. 폐쇠성의 법칙 : 외곽선이나 여백으로 콘텐츠 구분
    3. 유사성의 법칙 : 시각적인 형태(크기,형태,입체 색체등)의 유사성으로 묶는것. (같은 메뉴의 컬러는 유사한 색상을 사용하여 나타낸다. )
    4. 연속성의 법칙 : 사용자 시선의 움직임, 유사한 배열, 스토리텔링 같은 이어짐, 비슷한 화면의 연결성. 


2) 기타
레이블(텍스트)3가지 원칙.
    1. 직관성 : 한번에 알아볼 수 있어야
    2. 보편성 : 다른사이트
    3. 이중의미x : 중의적 표현이 없어야한다. 

기타 참고사항. 

    1. Social site UI가 트렌드를 대표한다. 
    2. 하나의 화면에서 어떠한 관점으로 보느냐에 따라서 위의 속성을 보는것이 달라질 수 있다.  
        a. 어디에 위배되느냐를 보는것. 
        b. 보는 관점에 따라 논리성, 이해성관점에서 보느냐 따라 다 다르다. 같은 모형안에 가장 큰 문제 하나만 고려해야한다. 의견 조율을 해야하고, 그것이 안되면 사용성 테스트를 통해 의견을 수렴해야한다.