감성공학 적용 객체지향 사용자 인터페이스 개발 방법론 아주대학교 산업공학과 HCI Lab. 박 범

목차 UI 개발 관련 기술 및 연구 동향. UI 개발 설계를 위한 인간/감성 공학 기술. 기존 UI 개발 모델 및 방법론. User Interface의 Human Factors 및 문제 정의. 감성공학 적용 객체 지향 UI 개발 방법론. UI 개발 설계를 위한 가이드라인. CASE STUDY 연구 과제 Ajou Univ. HCI Lab.

UI(User Interface) …..? UI Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UI(User Interface) …..? UI 1970년대 : 인간-기계 인터페이스(Man-Machine Interface)로 알려짐. Moran : 사용자가 접촉하게 되는 시스템의 모든 측면. CHI : 사용자를 위한 입력 언어, 기계를 위한 출력 언어, 그리고 상호작용을 위한 프로토콜(1985)

Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 User Interface 정의. 컴퓨터 시스템의 표면적인 측면에 대한 전체. 즉, 입력과 출력 장치와 같은, 사용자로부터 제거되거나 표현 되어 지는 정보, 사용자가 표현한 피드백 정보, 시스템의 행위, 문서화와 연관된 튜토리얼 프로그램, 그리고 이런 측면들과 관계 있는 사용자의 행동.

Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UIMS 프로그래밍보다 훨씬 노력을 축소시킬 수 있는 고수준의 통합된 도구를 사용, 설계자가 사용자 인터페이스를 개발하거나 관리할 수 있게 하는 시스템. 몇몇 UIMS는 UIDE를 포함.

UIDE 사용자 인터페이스의 개발을 용이하게 해주는 통합 환경; Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UIDE 사용자 인터페이스의 개발을 용이하게 해주는 통합 환경; UIDE는 인간-컴퓨터 상호작용 설계를 제공한다. 그러나, 응용 프로그램 실행 시 상호작용은 제공하지 않아도 된다.

현재 UI 범위 A.. I/O Device B.. Operating System C.. User Interface Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 현재 UI 범위 A.. I/O Device B.. Operating System C.. User Interface D.. Human-Computer Interaction

UI 연혁... TUI(Text User Interface) GUI(Graphic User Interface) 앞으로의 추세. Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UI 연혁... TUI(Text User Interface) GUI(Graphic User Interface) Xerox STAR Project Mac. Microsoft 앞으로의 추세.

UI 발전사(1) 컴퓨터 인터페이스에 대한 연구 시작 애플과 IBM 1970년대 후반 DOS 인터페이스를 채택 Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UI 발전사(1) 컴퓨터 인터페이스에 대한 연구 시작 1970년대 후반 애플과 IBM DOS 인터페이스를 채택 컴퓨터의 일반적인 사용 유도

UI 발전사(2) 애플(매킨토시, 1984년) GUI 사용 산뜻하지만 어느 정도의 제한 사용자들의 관심 고조 유사 개념 등장 Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UI 발전사(2) 애플(매킨토시, 1984년) GUI 사용 산뜻하지만 어느 정도의 제한 사용자들의 관심 고조 유사 개념 등장 디지털 : GEM XEROX : STAR Interface

UI 발전사(3) 마이크로소프트사 1985년 윈도우 1.0 1990년 윈도우 3.0 1992년 윈도우 3.1 드래그 앤 드롭 Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UI 발전사(3) 마이크로소프트사 1985년 윈도우 1.0 1990년 윈도우 3.0 1992년 윈도우 3.1 드래그 앤 드롭 OLE 호환 가능한 타입

UI 환경 변화 분산 컴퓨팅 환경. 인터넷/인트라넷 기반 환경. 윈도우 지향 환경. 다양한 사용자, 다양한 업무 처리 환경. Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UI 환경 변화 분산 컴퓨팅 환경. 인터넷/인트라넷 기반 환경. 윈도우 지향 환경. 다양한 사용자, 다양한 업무 처리 환경. 멀티미디어 데이터 프로세싱. 중앙 집중식 환경. 텍스트 기반 환경. 단일 사용자, 단일 업무 처리 환경.

Xerox STAR Project(1) 목표 사무용으로 사용하기 위한 개인용 컴퓨터의 설계. Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 Xerox STAR Project(1) 목표 사무용으로 사용하기 위한 개인용 컴퓨터의 설계. 대용량 디스플레이, 키보드, 커서 컨트롤 장치(마우스) 등으로 구성

Xerox STAR Project(2) 의의. 메타포(Metaphor) 개념의 등장. Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 Xerox STAR Project(2) 의의. 메타포(Metaphor) 개념의 등장. 다기능 시스템을 위한 새로운 사용자 인터페이스 시스템 연구. Human-Centered Design 개념.

Xerox STAR Project(3) 메타포(Metaphor). Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 Xerox STAR Project(3) 메타포(Metaphor). WYSIWYG(What You See Is What You Get) 화면에 겹쳐지는 윈도우 시스템 객체에 대한 직접적인 조작.(예를 들면 아이콘)

Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 시스템 구성 사진

Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 키보드와 마우스의 모습

Ajou Univ. HCI Lab. UI관련 기술 및 연구동향

Ajou Univ. HCI Lab. UI관련 기술 및 연구동향

Ajou Univ. HCI Lab. UI관련 기술 및 연구동향

MS–Persona project.(1) 사회적 사용자 인터페이스 (Social User Interface). Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 MS–Persona project.(1) 사회적 사용자 인터페이스 (Social User Interface). 앵무새 피디(Peedy the Parrot). 프로토타입 시스템(Prototype System). 관련 기술.

MS–Persona project.(2) 요구 사항(Requirements). Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 MS–Persona project.(2) 요구 사항(Requirements). 역동적인 상호작용을 지원하라(Support interactive give and take). 상호작용과 지연의 조율을 인식하라(Recognize the costs of interaction and delay). 간섭을 효과적으로 관리하라(Manage interruptions effectively). 상호작용의 사회적, 감성적인 측면을 인식하라(Acknowledge the social and emotional aspects of interaction).

Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 MS–Persona project.(3)

앞으로의 추세(특성) Mobile Agent Decision-support Intelligent Multimodal Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 앞으로의 추세(특성) Mobile Agent Decision-support Intelligent Multimodal Anthropomorphic

UI 관련 기술 제학문적(Interdisciplinary) 요소 하드웨어 기술 소프트웨어 기술 인간/인지/감성공학 기술 Ajou Univ. HCI Lab. UI관련 기술 및 연구동향 UI 관련 기술 제학문적(Interdisciplinary) 요소 하드웨어 기술 소프트웨어 기술 인간/인지/감성공학 기술

Requirements Gathering(1) Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Requirements Gathering(1) Functional requirements what the system must do. Data requirements the structure of the system and the data that must be available for processing to be successful. Usability requirements the acceptable level of user performance and satisfaction with the system.

Usability requirements Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Usability requirements Learnability Throughput Flexibility Attitude

Requirements Gathering(2) Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Requirements Gathering(2) 왜 요구사항을 수집하는가? 현재 시스템에 대한 문제를 파악하기 위하여. 새로운 시스템에 대한 요구 사항을 파악하기 위하여.

Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 User Centered Design

SSM(Soft Systems Methodology) Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 SSM(Soft Systems Methodology)

OSTA(Open System Task Analysis) Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 OSTA(Open System Task Analysis)

Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Multiview

Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Star Life Cycle

Task Analysis(1) 정의 Task(internal task). Goal(external task) Action Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Task Analysis(1) 정의 Task(internal task). Goal(external task) Action

Task Analysis(2) HTA(Hierarchical Task Analysis) Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Task Analysis(2) HTA(Hierarchical Task Analysis) 분해법을 이용한 그래픽 표기 structured chart notation 이용 CTA(Cognitive Task Analysis) 인지 이론의 응용 User’s mental model “how-to-do-it”을 모형화 Mapping

Structure chart notation Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Structure chart notation

An outline HTA for a MS word processing system Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 An outline HTA for a MS word processing system

인지 공학 Human information processing Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 인지 공학 Human information processing

인지공학(2) sensory memory short-term memory long-term memory Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 인지공학(2) sensory memory short-term memory long-term memory

인지공학(3) Context 실험 1. 실험 2. Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 인지공학(3) Context 실험 1. 실험 2.

인지공학(4) Gestalt Proximity Similarity Closure Continuity Symmetry Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 인지공학(4) Gestalt Proximity Similarity Closure Continuity Symmetry

Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 감성 공학 감성 외부의 물리적 자극에 의한 감각, 지각으로부터 인간의 내부에 야기되는 심리적 체험으로 쾌적함, 고급감, 불쾌감, 불편함 등의 복합적인 감정 감성 공학 인간의 감성을 정성,정량적으로 측정 평가하고 이를 제품이나 환경 설계에 응용하여 보다 편리하고 안락하며 안전하게 하고 더 나아가 인간의 삶을 쾌적하게 하고자 하는 기술

Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 감성 공학(2)

감성공학 요소기술 인간공학/인지공학 센서 기술 산업디자인 기술 Fuzzy-Neural Network 인공현실감 기술 Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 감성공학 요소기술 인간공학/인지공학 센서 기술 산업디자인 기술 Fuzzy-Neural Network 인공현실감 기술 사용성 평가 기술 인간 감각 계측 기술 생체 역학 기술

인간 공학(1) 정의 인간과 직업, 기기, 환경, 업무 등과의 관계를 과학적으로 연구하는 학문이다 Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 인간 공학(1) 정의 인간과 직업, 기기, 환경, 업무 등과의 관계를 과학적으로 연구하는 학문이다 인간-기계계 속에 인간의 특성을 집어넣어 인간이 원하는 사용성, 쾌적성, 안전성, 피로의 경감, 경제성 등의 조건을 만족시키는 학문의 영역으로 의학, 심리학, 공학, 디자인학, operation 등 9개의 영역에 걸친 학제적인 학문이다

인간공학(2) 포함 항목 인간의 특성 기계와 작업 공간의 디자인 환경 조건 조직과 시스템 Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 인간공학(2) 포함 항목 인간의 특성 기계와 작업 공간의 디자인 환경 조건 조직과 시스템

인간공학(3) 방법론 Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 인간공학(3) 방법론 심신반응으로부터 Human-Machine Information Environment System의 최적 상태를 찾는다. 인간이 통합한 결과로서의 정보를 처리하여 시스템의 최적 상태를 찾는다. 마이너스면(피로, 사용난이성, 사고)으로 접근한다. 사용 난이성을 주관적인 판단 이외에 그것에 요하는 시간, 오류의 정도로 판정한다.

인간공학(4) 방법론(이어서) Ajou Univ. HCI Lab. 최적한 조건은 나쁜 한계로부터 가장 먼 곳에 있다. UI개발 설계를 위한 인간/감성 공학 기술 인간공학(4) 방법론(이어서) 최적한 조건은 나쁜 한계로부터 가장 먼 곳에 있다. 이미 실용되어지고 있는 시스템에서 인간과의 관계분석으로부터 찾는다. 시스템 적합을 도모한다. 생태적 분석을 행한다. 전달계수, 전달함수를 찾는다.

인간공학(5) 추구하는 것 인간이 갖고 있는 약점의 보완. 인간과 기계와의 인터페이스 최적화. 애매한 것을 명확화. Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 인간공학(5) 추구하는 것 인간이 갖고 있는 약점의 보완. 인간과 기계와의 인터페이스 최적화. 애매한 것을 명확화. 종합적인 판단 능력을 확대. 사용자를 위한 시스템의 설계.

Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Usability Test 정의 사용자 인터페이스 시스템을 사용하는데 있어 얼마나 신뢰성과 적합성을 보장할 수 있는가를 측정하는 평가법. 분류 조형 평가(Formative Test) 종합 평가(Summative Test)

Usability Test의 의의 사용자의 설계 참여 유도 피드백(feed-back) 정보의 이용 제품의 라이프 사이클 단축 Ajou Univ. HCI Lab. UI개발 설계를 위한 인간/감성 공학 기술 Usability Test의 의의 사용자의 설계 참여 유도 피드백(feed-back) 정보의 이용 제품의 설계 자료 경영자의 의사 결정 자료 기술 발전의 지표 제품의 라이프 사이클 단축 경비의 절감

Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 모형들과 UIMS와의 관계

데이터 모델 목적 종류 인터페이스의 모든 구성 객체를 UIMS가 사용 가능하도록 정형화하는 것. OFM모델. TULLIS모델. Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 데이터 모델 목적 인터페이스의 모든 구성 객체를 UIMS가 사용 가능하도록 정형화하는 것. 종류 OFM모델. TULLIS모델. ANETS모델.

사용자 모델 목적 종류 인터페이스 설계자가 인터페이스의 설계에 사용자의 지식을 반영하기 위한 것. GOMS 모델 CLG 모델 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 사용자 모델 목적 인터페이스 설계자가 인터페이스의 설계에 사용자의 지식을 반영하기 위한 것. 종류 GOMS 모델 CLG 모델 ANETS 모델

GOMS 모델 1983년 Card, Moran, Newall이 제안 사람의 정보 처리 능력을 모형화. 가정 구성 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 GOMS 모델 1983년 Card, Moran, Newall이 제안 사람의 정보 처리 능력을 모형화. 가정 시스템과 상호작용하기 위해 필요한 지식을 이미 습득했다고 가정 구성 Goal, Operator, Method, Selection rule.

GOMS 모델(2) 특징 단점 필요 절차의 지식이 상황과 조건에 따라 생성 인지활동을 자연스럽게 표현 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 GOMS 모델(2) 특징 필요 절차의 지식이 상황과 조건에 따라 생성 인지활동을 자연스럽게 표현 모델 적용 과정만으로도 대상 시스템에 대한 분석이 체계적으로 이루어진다. 단점 다른 모델과 절차적 지식을 비교하기 어렵다

SSOA 모델 Syntactic Semantic Object Action 모델 사용자 지식에 관한 모델 적용 범위 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 SSOA 모델 Syntactic Semantic Object Action 모델 사용자 지식에 관한 모델 적용 범위 직접 조작 방식에 적당 데이터베이스 운용을 지원하는데 유용

Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 SSOA 모델(2)

CLG 모델 CLG(Common Language Grammar) 모델 1981년 Moran이 제시 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 CLG 모델 CLG(Common Language Grammar) 모델 1981년 Moran이 제시 사용자의 입력과 시스템 출력으로서 상호 작용을 모형화하는 모델.

Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 CLG 모델(2)

CLG 모델(3) 장점 단점 사용자의 인지적 단계부터 시스템의 장치까지 다 표현이 가능 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 CLG 모델(3) 장점 사용자의 인지적 단계부터 시스템의 장치까지 다 표현이 가능 구체적인 응용 프로그램의 내용을 모르고서 UI설계가 가능 인터페이스 설계에 대한 평가가 가능 단점 실시간 시스템을 묘사하기에는 작업이 너무 크고 복잡하다.

구조 모델 실제로 운용될 인터페이스 구조에 대한 모델. 모형화되는 객체. 작업을 수행하기 위한 지식 통신에 관련된 구조 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 구조 모델 실제로 운용될 인터페이스 구조에 대한 모델. 모형화되는 객체. 작업을 수행하기 위한 지식 통신에 관련된 구조 인터페이스 명세법(representation)

구조 모델(2) 특성 종류 개발전에 미리 인터페이스의 관리와 상호작용에 대한 특성을 이해할 수 있다. Seeheim 모델 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 구조 모델(2) 특성 개발전에 미리 인터페이스의 관리와 상호작용에 대한 특성을 이해할 수 있다. 종류 Seeheim 모델 DMS 모델

Seeheim 모델 1985년 Green & Pfaff가 제안 Three Dialogue Model 응용 특성 범용성 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Seeheim 모델 1985년 Green & Pfaff가 제안 Three Dialogue Model 응용 특성 범용성 실제 명세가 가능한 형태로 구성 UIMS에 독립적으로 사용

Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Seeheim 모델(2)

DMS 모델 DMS(Dialogue Management System) 모델 1984년 Hartson이 제안 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 DMS 모델 DMS(Dialogue Management System) 모델 1984년 Hartson이 제안

스타일 분석 사용자 인터페이스 형태 명령어 방식 메뉴 방식 형식 채우기 방식 아이콘 방식 자연어 처리 방식 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 스타일 분석 사용자 인터페이스 형태 명령어 방식 메뉴 방식 형식 채우기 방식 아이콘 방식 자연어 처리 방식

음성 인식/음성 합성 방식 제스쳐 방식 데모 방식 적응성 대화 방식 멀티미디어를 이용한 사용자 대화 방식 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 음성 인식/음성 합성 방식 제스쳐 방식 데모 방식 적응성 대화 방식 멀티미디어를 이용한 사용자 대화 방식

명령어 방식 직접 명령어를 입력 PC와 UNIX의 OS 장점 단점 연산자의 자유로운 선택 매크로 프로그래밍 가능(유연성) Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 명령어 방식 직접 명령어를 입력 PC와 UNIX의 OS 장점 연산자의 자유로운 선택 매크로 프로그래밍 가능(유연성) 단점 작업 수행에 따른 오류 발생시 오류 처리가 어렵다

메뉴 방식 나열된 항목. 적절한 선택. 장점 단점 명령어를 기억할 필요가 없다 숙달될 때까지의 시간이 적다 키 동작이 적다 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 메뉴 방식 나열된 항목. 적절한 선택. 장점 명령어를 기억할 필요가 없다 숙달될 때까지의 시간이 적다 키 동작이 적다 오류 발생이 적다 단점 메뉴항목이 많을 경우 다 나열할 수 없다 화면이 커야 된다

자연어 처리 방식 일반 언어를 사용할 수 있는 형태의 인터페이스 장점 단점 별도의 언어를 학습할 필요가 없다 표현이 장황하다 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 자연어 처리 방식 일반 언어를 사용할 수 있는 형태의 인터페이스 장점 별도의 언어를 학습할 필요가 없다 단점 표현이 장황하다

형식 채우기 방식 일정한 형태, 자료 입력 형식이 미리 화면에 지정된 인터페이스. 자료 입력 형식 결정시 주의 사항 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 형식 채우기 방식 일정한 형태, 자료 입력 형식이 미리 화면에 지정된 인터페이스. 자료 입력 형식 결정시 주의 사항 시스템의 처리구조를 적절히 반영 명확하고 쉽도록 설계 자체적인 오류 발견 기능 제공

아이콘 방식 아이콘 작업 대상을 그림이나 마크, 심볼 등을 이용하여 도식적으로 나타낸 것. 아이콘의 설계 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 아이콘 방식 아이콘 작업 대상을 그림이나 마크, 심볼 등을 이용하여 도식적으로 나타낸 것. 아이콘의 설계 형태의 직접 이용 혹은 메타포 사용 직접조작방식의 개념 도입에 도움 은유적 표현의 일관성

음성 인식/합성 방식 상호 작용이 음성을 통하여 수행되는 인터페이스(가장 자연스러운 방법) 장점 단점 공간적인 제약이 없다 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 음성 인식/합성 방식 상호 작용이 음성을 통하여 수행되는 인터페이스(가장 자연스러운 방법) 장점 공간적인 제약이 없다 불완전한 작업 여건에 대한 제약이 적다 단점 문자 언어보다 이해속도가 느리다 즉각적으로 이해가 되지 않으면 손실

제스쳐 방식 공간적인 장치(spatial device) 이용 타 기법들과의 연동이 필요하다 마우스, 전자펜, 데이터 장갑 등 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 제스쳐 방식 공간적인 장치(spatial device) 이용 마우스, 전자펜, 데이터 장갑 등 타 기법들과의 연동이 필요하다

데모 방식 객체를 대표하는 확실한 예제를 조작하여 직접조작의 단점을 보완한 인터페이스 특징 직접 조작 방식의 장점 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 데모 방식 객체를 대표하는 확실한 예제를 조작하여 직접조작의 단점을 보완한 인터페이스 특징 직접 조작 방식의 장점 기본적 기능의 빠른 습득 다양한 작업의 신속한 처리 프로그래밍 기능 제공(매크로 작성)

적응성 대화 방식 하나의 작업 명령에 대해 대화 방식의 전환을 제공하는 대화 방식 목적 각 대화 방식의 특성을 살린다. Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 적응성 대화 방식 하나의 작업 명령에 대해 대화 방식의 전환을 제공하는 대화 방식 목적 각 대화 방식의 특성을 살린다. 해당 작업을 효율적으로 수행한다.

애니메이션, 오디오, 비디오, 소리 등이 결합된 멀티미디어 형태의 대화 방식을 이용하려는 추세. Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 멀티미디어를 이용한 사용자 대화 방식 표시정보의 다양화 이미지, 그래픽 소리 정보 애니메이션, 오디오, 비디오, 소리 등이 결합된 멀티미디어 형태의 대화 방식을 이용하려는 추세.

UI 특성 분석 UI의 구성 상호 작용을 위해 필요 하드웨어 소프트웨어 Control Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 UI 특성 분석 UI의 구성 하드웨어 소프트웨어 Control 선택을 하거나 기호에 맞추어 설정하는데 사용하는, 보통 디스플레이 상에서 보이는, 소프트웨어 요소 상호 작용을 위해 필요

UI 특성 분석(2) 사용성을 위한 설계 제품을 사용하게 될 사람은 누구인가?  대표 사용자 그룹 모집 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 UI 특성 분석(2) 사용성을 위한 설계 제품을 사용하게 될 사람은 누구인가?  대표 사용자 그룹 모집  질문을 통한 요구 사항의 추출

UI 특성 분석(3) 대표 사용자 그룹에게 주어질 질문들 어떤 제품을 원하고 있습니까? Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 UI 특성 분석(3) 대표 사용자 그룹에게 주어질 질문들 어떤 제품을 원하고 있습니까? 요즘 이런 업무를 어떻게 하고 계십니까? 작업 방법 중에서 좋아하는 점과 싫어하는 점은 무엇입니까? 어떤 환경에서 제품을 사용하십니까? 소프트웨어를 사용하는 경우 당신이 선호하는 점은 무엇입니까? 예를 들어, 가장 자주 사용하는 기능은 무엇입니까?

UI 특성 분석(4) 프로토타입을 통한 사용자 정보 사용자가 도움말을 얼마나 자주 사용하는가? Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 UI 특성 분석(4) 프로토타입을 통한 사용자 정보 사용자가 도움말을 얼마나 자주 사용하는가? 소프트웨어 사용상 어려운 점을 지적하는 다른 방법 등의 정보를 기록하는 특별한 소프트웨어 포함 가능  최종 버전을 위한 방향 제시

UI 특성 분석(5) 제품 출시 후 사용자 정보  설계에 중요한 지표로 작용 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 UI 특성 분석(5) 제품 출시 후 사용자 정보 서비스 부문에서 도움을 요청하는 사용자에 의해 보고된 모든 사용자 문제점을 추적  설계에 중요한 지표로 작용

Structured HCI Design 개념 설계(Conceptual Design) 물리 설계(Physical Design) Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Structured HCI Design 개념 설계(Conceptual Design) 목표를 달성하기 위해 시스템이 해야만 하는 것. 요구되는 필요 구조 물리 설계(Physical Design) 시스템이 어떻게 수행할 것인가 시스템이 어떻게 보일 것인가

Structured HCI Design(2) Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Structured HCI Design(2) 설계의 운용적 측면 시스템에서 대화를 컨트롤 하는 방법 사용자가 수행해야만 하는 것 시스템이 주는 피드백 설계의 표현적 측면 데이터의 디스플레이 일관성있는 시스템 이미지의 표현 시스템이 스스로를 표현하는 방법

Structured HCI Design(3) Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Structured HCI Design(3) 사용자 지원(User Support) 반드시 존재하여야 하고 중요한 역할을 수행한다 설계의 통합적인 측면을 강조

Supporting Design 업무의 속성상 필요 개인적 수준과 전 공정 수준에서 모두 필요 복잡하고 지식 의존적인 업무 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Supporting Design 업무의 속성상 필요 복잡하고 지식 의존적인 업무 설계자가 처리하고 저장해야 할 정보의 양에 한계가 있다. 개인적 수준과 전 공정 수준에서 모두 필요

Supporting Design(2) 설계자 지원 설계자의 경험 이미 알려진 해결책 문제의 분해 대안 설계 설계 시뮬레이션 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Supporting Design(2) 설계자 지원 설계자의 경험 이미 알려진 해결책 문제의 분해 대안 설계 설계 시뮬레이션 문제 영역을 이해하기 전략을 합리적으로

Supporting Design(3) 설계팀 지원 ‘design room’ Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Supporting Design(3) 설계팀 지원 ‘design room’

Prototyping Paper-based prototyping Computer-based prototyping Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Prototyping Paper-based prototyping Computer-based prototyping

Prototyping 정보 사용자의 요구에 얼마나 잘 맞는가에 대한 불확실성을 해결 의사결정에 도움 시스템의 필요한 기능 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Prototyping 정보 사용자의 요구에 얼마나 잘 맞는가에 대한 불확실성을 해결 의사결정에 도움 시스템의 필요한 기능 운용 순서 필요 표현 인터페이스에 대하여 보고 느끼는 것

Paper-based prototyping Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Paper-based prototyping 기법 paper sketches storyboard scripts 장점 빠르고 싸다. 귀중한 관찰을 제공한다 단점 기능성을 증명할 수 없다

Computer-based prototyping Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Computer-based prototyping 사용자가 상호작용할 수 있는 제한된 기능을 갖고 있는 시스템 버전 철학 빠르고 싸게 만들어져야 한다. 목적 달성 후 폐기할 수 있어야 한다. 상호작용적인 몇몇 측면만을 고려하고 나머지는 무시할 수 있다. 크기, 신뢰성, 보편성, 완전성, 구조재에서 최종 버전과 틀리다

Software Prototyping 아이디어가 아닌 도면인 작동하는 시스템이다 Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Software Prototyping 아이디어가 아닌 도면인 작동하는 시스템이다 일반적인 생애 시간(lifetime)을 가지고 있지 않다 많은 다른 목적을 만족시킬 수 있다 빠르고 싸게 만들어져야만 한다 설계에 대한 뒤이어 따라오는 조정은 기본적인 부분이고 평가에 있어 반복적인 사용자 중심 설계의 통합적인 부분이다

Prototyping 기법 Requirements animation Rapid Prototyping Ajou Univ. HCI Lab. 기존 UI 개발 모델 및 방법론 Prototyping 기법 Requirements animation Rapid Prototyping Evolutionary Prototyping Incremental Prototyping

Layout Pages, Slides, Screen, Icons, Symbols의 배치를 구성하는 중요 요인. Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Layout Pages, Slides, Screen, Icons, Symbols의 배치를 구성하는 중요 요인. Propotion Format Text type Illustration

Spatial Metaphors, Displays, Tools Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Spatial Metaphors, Displays, Tools Spatial approaches visual enhancement drop shadows Beveled edges Highlighting and Lowlighting Shrinking and Growing  Charts, Maps, Diagrams의 표현에 있어 표현 방법이 달라진다.

Spatial depth cue Position Parallax Texture Size Linear perspective Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Spatial depth cue Position Texture Size Linear perspective Parallax Binocular perspective Motion perspective

Cues independent of the position and motion of the viewer. Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Cues independent of the position and motion of the viewer. Aerial perspective Blur Vertical location Shift of texture or linear spacing Shift in double imagery Shift in rate of motion Completeness or continuity of outline Shift of light and dark

Typography 기본적인 고려 사항 활자체 폰트 인쇄 크기 식자 기술의 선정 Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Typography 기본적인 고려 사항 활자체 폰트 인쇄 크기 식자 기술의 선정

Icon 다음과 같은 3가지 문제 고려 What should they look like? Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Icon 다음과 같은 3가지 문제 고려 What should they look like? What exactly are icons and symbols? How can we best use them?

Color What is color? What can color do? 색조(hue), 명암(value), 채도(chroma) Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Color What is color? 색조(hue), 명암(value), 채도(chroma) 색조(hue) : 색의 파장의 길이로 만들어 지는 blue, green, red 등의 인지. 명암(value) : 흰색과 검은 색의 사이에서 밝음과 어두움의 정도(intensity) 채도(chroma) : 회색과 선명한 색 사이의 순도(saturation) What can color do?

Visualizing Knowledge Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Visualizing Knowledge Visualizing Knowledge Charts Diagrams Maps 사용 이유 상황의 명확한 이해 보는 사용자의 이해를 도움

Screen Design 고려 사항 Lexical Issues. Syntactic Issues. Semantic Issues. Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 Screen Design 고려 사항 Lexical Issues. Syntactic Issues. Semantic Issues. Pragmatic Issues.

WWW환경에서 고려할 점 Page Navigation Speed scroll speed display time Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 WWW환경에서 고려할 점 Page Navigation Speed scroll speed display time response time

문제점 기술적 문제점 경제적 문제점 사회적/문화적 문제점 개인적/인지적/감성적 문제점 Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 문제점 기술적 문제점 경제적 문제점 사회적/문화적 문제점 개인적/인지적/감성적 문제점

어떻게 해결할 것인가? 사용자 지향 설계 재사용성, 확장성 강조 인간공학, 감성공학, 인지공학 이용 Ajou Univ. HCI Lab. UI의 Human Factors 및 문제 정의 어떻게 해결할 것인가? 사용자 지향 설계 인간공학, 감성공학, 인지공학 이용 Human Factor 반영 사용성 평가 재사용성, 확장성 강조 객체 지향 방법 이용

흐름도 전체 인간/감성공학 적용 분석-설계-구현-테스트-재설계 객체 지향 방법론 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 흐름도 전체 분석-설계-구현-테스트-재설계 객체 지향 방법론 인간/감성공학 적용 요구사항-구성도(configuration)-기능성(Functionality) 사용자 지향 사용자 인터페이스

감 객 성 체 공 지 학 향 적 U 용 I 개 발 모 형 Ajou Univ. HCI Lab. 감 객 성 체 공 지 학 향 적 U 용 I 개 발 모 형

시스템 범위 결정 시스템 환경의 결정 윈도우 기반 환경 네트워크 기반 환경 분산처리 환경 사용자 지향 환경 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 시스템 범위 결정 시스템 환경의 결정 윈도우 기반 환경 네트워크 기반 환경 분산처리 환경 사용자 지향 환경

UI의 기능 자료 전송 기능 메뉴 선택 및 서식 기입 기능 입력/출력 메시지 처리 기능 명령어 파일 사용 기능 도움말 기능 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 UI의 기능 자료 전송 기능 메뉴 선택 및 서식 기입 기능 입력/출력 메시지 처리 기능 명령어 파일 사용 기능 도움말 기능

UI의 기능(2) 자료 관리 기능 네트워크 환경 지원 기능 보안기능 자격 적부 심사 기능 네비게이션 기능 대화 기능 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 UI의 기능(2) 자료 관리 기능 보안기능 자격 적부 심사 기능 네트워크 환경 지원 기능 네비게이션 기능 대화 기능

현장 데이터 분석 일반적인 목적 시스템 분석 사용자 계층 구성 조직도 조직 세부 구성도와 설비 구성도 제공 서비스 서비스 대상 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 현장 데이터 분석 일반적인 목적 시스템 분석 사용자 계층 구성 조직도 조직 세부 구성도와 설비 구성도 제공 서비스 서비스 대상

목적 시스템 분석(설계자 중심) 시스템 환경 분석 시스템 구조 분석 시스템 분석 기준 시스템 범위 설정 서비스(Service) Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 목적 시스템 분석(설계자 중심) 시스템 환경 분석 시스템 범위 설정 시스템 구조 분석 시스템 분석 기준 서비스(Service) 사용자 수준(User level) 시스템 분할(System division)

시스템 분석 기준 서비스(Service) 사용자 수준(User level) 시스템 분할(System division) Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 시스템 분석 기준 서비스(Service) 제공 서비스에 따른 사용자 요구 사항을 추출 사용자 수준(User level) 사용자별 요구 사항 추출 시스템 목표 수준의 설정 시스템 분할(System division) 계층적 분할 중복되는 부분을 하나의 모듈로

객체의 추출 엔터티 객체 컨트롤 객체 인터페이스 객체 우리의 관심 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 객체의 추출 엔터티 객체 컨트롤 객체 인터페이스 객체 우리의 관심

Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 인터페이스 객체의 분류

UI의 기능성 추출 데이터 조작 기능성 의사 결정 지원 기능성 정보 관리 기능성 도움말 전달 기능성 데이터 무결성 기능성 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 UI의 기능성 추출 데이터 조작 기능성 의사 결정 지원 기능성 정보 관리 기능성 도움말 전달 기능성 데이터 무결성 기능성 사용 편의 기능성 시스템 최적화 기능성

기능성 맵  요구 사항 및 목표 선정 기능성과 기능의 맵핑 시스템 분석 기준과의 맵핑 표(table) 형식 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 기능성 맵 기능성과 기능의 맵핑 표(table) 형식 시스템 분석 기준과의 맵핑 다이어그램(diagram) 형식  요구 사항 및 목표 선정

고려 사항 반복적인 설계가 가능한가? 사용성 평가는 언제, 누가 할 것인가? 피드백 정보의 처리는 어떻게 할 것인가? Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 고려 사항 반복적인 설계가 가능한가? 사용성 평가는 언제, 누가 할 것인가? 피드백 정보의 처리는 어떻게 할 것인가? 체크 리스트는 만들어져 있는가?

설계 단계 기본 설계 단계 상세 설계 단계 사용자 인터페이스 객체 정의 기본 설계 사용자 인터페이스 구조 설계 및 재설계 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 설계 단계 기본 설계 단계 사용자 인터페이스 객체 정의 기본 설계 OS 지원 공통 객체 Application 의존 생성 객체 상세 설계 단계 사용자 인터페이스 구조 설계 및 재설계

UI 객체 정의 분석 객체 모델을 기반으로 개발 지원 도구, 컴포넌트 라이브러리 등을 고려하여 설계 객체를 정의한다. Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 UI 객체 정의 분석 객체 모델을 기반으로 개발 지원 도구, 컴포넌트 라이브러리 등을 고려하여 설계 객체를 정의한다. 사용자 요구 사항 정리 설계 객체 정의

Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 UI 객체 정의 절차 절차

UI 객체 설계 객체 설계 기준 설계 시 고려사항 절차 Ajou Univ. HCI Lab.

UI 구조 설계 구조 설계 기준 프로토타입핑 사용성 평가 준비 절차 Ajou Univ. HCI Lab.

사용성 평가 및 재설계 반복 설계 피드백 정보 반영 사용성 평가 기준 절차 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 사용성 평가 및 재설계 반복 설계 피드백 정보 반영 사용성 평가 기준 절차

장점 및 효과 사용자를 위한 시스템을 설계, 구현한다 재사용성, 확장성을 보장된다 경제적이다 Ajou Univ. HCI Lab. 감성 공학 적용 객체 지향 UI 개발 방법론 장점 및 효과 사용자를 위한 시스템을 설계, 구현한다 재사용성, 확장성을 보장된다 경제적이다 제품 및 시스템의 라이프 사이클이 작다 경쟁력이 높아진다 차세대 기술 방향을 예측할 수 있다

객체 추출 가이드라인 객체 추출 기준의 확립 추출 객체의 선별 서비스 사용자 수준 시스템 분할 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 객체 추출 가이드라인 객체 추출 기준의 확립 서비스 사용자 수준 시스템 분할 추출 객체의 선별

요구사항과 기능성 가이드라인 요구사항 기능성 사용자 인터페이스 시스템 목표 설정 요구 사항 분석 기능성과 추출 객체와의 맵 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 요구사항과 기능성 가이드라인 요구사항 사용자 인터페이스 시스템 목표 설정 요구 사항 분석 기능성 기능성과 추출 객체와의 맵 기능성과 요구 사항과의 맵

가이드라인의 사용 장점 일관성 있는 요소의 조립, 유지, 재사용의 용이성과 경비 절감이 이루어진다. Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 가이드라인의 사용 장점 일관성 있는 요소의 조립, 유지, 재사용의 용이성과 경비 절감이 이루어진다. 시스템에 대한 인지도가 크므로 인지된 이름과 외양의 시스템 접근이 유리해진다. 사용자의 단순하고 명료하며 일관성 있는 기능과 형태에 대한 신속한 적응이 가능해진다. 사용자는 자신에게 익숙하게 설계된 기술을 사용함으로써 숙련도가 향상되고 유일한 양상에 초점을 맞출 수 있게 된다.

가이드라인 사용 장점(2) 문서화와 훈련이 간편하고 일관성 있게 된다. Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 가이드라인 사용 장점(2) 문서화와 훈련이 간편하고 일관성 있게 된다. 시스템과 문서화에 일관적으로 구현되면 사용자 인터페이스의 독점적인 부분을 보호하는데 용이하게 된다. 일괄적인 접근법은 국제 표준을 준수하는 것을 용이하게 한다. 명확한 가이드라인은 제품 품질의 평가와 용이성, 그리고 신뢰성을 증가시킨다.

가이드라인 고려사항 시스템의 본질을 파악하는 메타포, 아이디어, 이미지를 쉽게 이해하여야 한다. Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 가이드라인 고려사항 시스템의 본질을 파악하는 메타포, 아이디어, 이미지를 쉽게 이해하여야 한다. 업무 지향 인지 모형에서 데이터, 기능, 도구, 역할과 사람의 적합한 조직화가 이루어져야 한다. 인지 모형 측면에서 데이터, 기능, 도구, 역할을 읽고 쓰는 효율적인 네비게이션 체계가 필요하다. 시각 요소들의 크기, 모양, 색상, 기준, 위치 등의 외관상의 특징을 잘 표현하여야 한다. 시각 요소들의 논리적인 프로토콜에 의한 효율적인 상호작용 순서와 하드웨어 입출력 장치와의 관계가 이해되어져야 한다.

가이드라인 중요 요소 시스템과 사용자 그룹이 혁신에 한계를 갖을 가능성. 국제적인 사용자의 특수한 요구 사항 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 가이드라인 중요 요소 시스템과 사용자 그룹이 혁신에 한계를 갖을 가능성. 국제적인 사용자의 특수한 요구 사항 사용자 그룹을 통합하는데 관계된 사용자 인터페이스 이용가능한 CASE TOOL과 운용 시스템의 제약들. 시스템 차별화.

가이드라인 중요 요소(2) 최종 사용자를 위한 습관화. 화면 메타포. 온라인 문서의 도움말. 문서, 훈련, 시장의 요구 사항. Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 가이드라인 중요 요소(2) 최종 사용자를 위한 습관화. 화면 메타포. 온라인 문서의 도움말. 문서, 훈련, 시장의 요구 사항. 시스템에 대한 설명.

Proportion Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Square 1 : 1 Square Root of 2 1 : 1.414 Golden Rectangle 1 : 1.618 Double Square 1 : 2 US Paper/ Letter 1 : 1.29 Photo Slide 1 : 1.5 CRT, Video 1 : 1.33 High Def. Video 1 : 1.6

Format Page Layout Grid Screen Layout Grid Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Format Page Layout Grid Screen Layout Grid

Text type Column의 넓이는 얼마로..? Primary column widths : 최대 40 ~ 60 자 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Text type Column의 넓이는 얼마로..? Primary column widths : 최대 40 ~ 60 자 gutters : 적어도 2 자(character) 수평/수직 screen(page) 넓이 : 2~5컬럼 적당 일반적으로 오른쪽 면 : major text 일반적으로 왼쪽 면 : comments, subtitles, margin notes Horizontal grid line은 heads, primary titling, main text와 foot note로 구분한다.

Text area는 그 주위에 “breathing space”가 필요 window와 window사이에는 1글자 정도가 적당 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Text area는 그 주위에 “breathing space”가 필요 window와 window사이에는 1글자 정도가 적당

Illustration 실질적인 결정 요인  컬럼의 넓이와 수직, 수평선을 결정 사진적 인지(Photographic) Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Illustration 실질적인 결정 요인 사진적 인지(Photographic) 그래프적 인지(Diagrammatic) 질감적 인지(Textual)  컬럼의 넓이와 수직, 수평선을 결정

Proportion, format, text type, illustration과의 관계 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Proportion, format, text type, illustration과의 관계 Pages, slides, screen, icons, symbols의 배치 틀을 구성하는데 서로 큰 연관성. Texts, figures 그리고 format에 따라 적절한 배치가 필요 개인적인 선호에 따른 여분 또한 추론하여 해결해야 한다

Typography 고정 너비 글자보다는 가변 너비 글자 9~10 포인트(1 point = 1/72 inch) Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Typography 고정 너비 글자보다는 가변 너비 글자 9~10 포인트(1 point = 1/72 inch) 최적의 라인 길이는 줄 당 10~12단어, 18~24 pica(1 pica = 1/6 inch = 12 point) 줄 길이를 위한 최대 문자는 40~60문자 자신들이 읽어왔던 문자를 선호

Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인

대/소문자 대문자 : 30% 더 많은 공간 차지 12% 독서 효과 감소(Rehe) 다양함 감소(소문자에 비하여) Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 대/소문자 대문자 : 30% 더 많은 공간 차지 12% 독서 효과 감소(Rehe) 다양함 감소(소문자에 비하여) 대/소문자 혼용 : 간단 명료, 읽기 쉽다 최대 두 가지 활자체, 두 slants(roman과 italic), 두 웨이트(medium과 bold), 네 가지 크기(제목, 소제, 문장, 각주)를 추천

가독성과 명료성 명료성(Legibility) 가독성(readability) 활자의 배치를 통해 개선 가능 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 가독성과 명료성 명료성(Legibility) 가독성(readability) 활자의 배치를 통해 개선 가능

아이콘 가이드라인 말의 내용과 표시의 환경을 분석 신속한 스케치를 위한 초기 아이콘을 설계. 변화가 가능한 많은 스케치 생성 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 아이콘 가이드라인 말의 내용과 표시의 환경을 분석 신속한 스케치를 위한 초기 아이콘을 설계. 변화가 가능한 많은 스케치 생성 스타일로 분류 격자 설계(표준 크기의 설정) 큰 객체, 넓은 선, 단순 영역 사용(적합성) 시각적 차이의 중요성 확보 식별력 있는 색상 사용

메뉴 가이드라인 연관성 있는 구성 3단계 네비게이션으로 구성 단축키와 툴팁을 제공 사용자 최적화 기능을 제공 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 메뉴 가이드라인 연관성 있는 구성 3단계 네비게이션으로 구성 단축키와 툴팁을 제공 사용자 최적화 기능을 제공

WWW환경 가이드라인 페이지 분할은 2~4개가 적당 이미지와 텍스트를 혼용 위치 정보와 검색 정보 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 WWW환경 가이드라인 페이지 분할은 2~4개가 적당 이미지와 텍스트를 혼용 위치 정보와 검색 정보 2단계 메뉴와 2개의 아이템으로 구성(사용자의 인지 모형에 적합)

하이퍼텍스트 가이드라인 작업 위치 정보를 한 화면상에 표현 3~4수준까지의 하위 페이지 링크가 적당 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 하이퍼텍스트 가이드라인 작업 위치 정보를 한 화면상에 표현 3~4수준까지의 하위 페이지 링크가 적당

Color 가이드라인 Color의 장점 특별한 데이터나 정보에 강조를 할 수 있다. 구조나 과정의 요소를 구분할 수 있다. Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Color 가이드라인 Color의 장점 특별한 데이터나 정보에 강조를 할 수 있다. 구조나 과정의 요소를 구분할 수 있다. 자연적 대상을 실감나게 묘사할 수 있다. 아이디어나 과정의 논리구조를 표현할 수 있다. 시간과 진행 상황을 묘사할 수 있다. 이해력 및 기억력을 증가시킨다. 데이터의 차원 수를 확대한다. 제한된 공간에 특징과 분량을 보여준다.

Color 가이드라인(2) Color의 단점 고가의 표시장비를 요구한다. 색맹에 대한 고려가 없다. Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Color 가이드라인(2) Color의 단점 고가의 표시장비를 요구한다. 색맹에 대한 고려가 없다. 시각 피로를 유발할 수 있고 강한 색이 다음의 이미지를 유도할 수 있다. 색상 표현의 복잡성과 잠재성으로 인하여 시각적 혼란을 유발할 수 있다. 문화적 역사적인 부작용이 있을 수 있다. 여러 학문이나 여러 문화적 해석으로 혼란을 유발할 수 있다.

Color 가이드라인(3) 3~7가지 색상 사용 중심 색상과 주변 색상을 적절히 사용 극단적 색상은 사용하지 않는다 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 Color 가이드라인(3) 3~7가지 색상 사용 중심 색상과 주변 색상을 적절히 사용 극단적 색상은 사용하지 않는다 일정한 색의 조합 전 라이프 사이클동안 같은 색상 사용 주의를 요할 때는 높은 명암과 채도 사용 모양도 고려하여 중복성을 둔다 흑백과 비교

기타 가이드라인 시스템에 적합한 하드웨어, 소프트웨어, 데이터베이스, 네트워크 제공 능력을 고려. Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 기타 가이드라인 시스템에 적합한 하드웨어, 소프트웨어, 데이터베이스, 네트워크 제공 능력을 고려. 공간의 레이아웃은 스크린 형태, 크기, 비율, 공간상의 격자에 관계. 폰트, 해상도는 적합성과 가독성에 관계. 색상은 심리/문화/의심/미학적인 쟁점. 이동은 사용자의 개념적, 인지적인 이동을 포함. 입출력 장치의 특징에 따른 업무를 수행하는 방법을 제공.

감성 요소의 반영 사용자가 느끼는 감성 사회적 문화적 요소 추출 반영 정신적 심리적 요소 추출 반영 Ajou Univ. HCI Lab. UI 개발 설계를 위한 가이드라인 감성 요소의 반영 사용자가 느끼는 감성 만족감(satisfaction) 쾌적감(comfortability) 사용 편의성(usability) 학습 용이성(learnability) 사회적 문화적 요소 추출 반영 정신적 심리적 요소 추출 반영 조직적 집단적 요소 추출 반영

CASE STUDY 응용 도메인 사용자 인터페이스 시스템 설계 물류관리 정보 시스템 Ajou Univ. HCI Lab.

시스템 환경 윈도우 기반환경 네트워크 기반환경 다양한 사용자와 다양한 업무를 동시에 처리 Ajou Univ. HCI Lab. CASE STUDY 시스템 환경 윈도우 기반환경 다양한 사용자와 다양한 업무를 동시에 처리 네트워크 기반환경 정보가 시간과 장소에 구애를 받지 않고 실시간으로 공유

목적 시스템 분석(1) 일반적인 목적 시스템 분석 시스템 사용자 계층 매니저급 임원 실무진급 사용자 고객 Ajou Univ. HCI Lab. CASE STUDY 목적 시스템 분석(1) 일반적인 목적 시스템 분석 시스템 사용자 계층 매니저급 임원 의사 결정, 의사 결정을 지원하는 참모 실무진급 사용자 발생되는 데이터를 직접적으로 조작하는 사용자 고객 업무 위탁, 원거리에서 접속하여 시스템을 사용하는 사용자, 정보를 검색하여 이용하는 사용자

목적 시스템 분석(2) 일반적인 목적 시스템 분석 시스템 제공 서비스 물품 보관 서비스 물품 운반 서비스 정보 제공 서비스 Ajou Univ. HCI Lab. CASE STUDY 목적 시스템 분석(2) 일반적인 목적 시스템 분석 시스템 제공 서비스 물품 보관 서비스 물품 운반 서비스 정보 제공 서비스

시스템에서 제공하는 서비스 기준으로 사용자 요구사항을 추출 User Ajou Univ. HCI Lab. CASE STUDY 목적 시스템 분석(설계자 중심) 설계자 측면에서의 목적 시스템 분석 시스템 분석 기준 Service 시스템에서 제공하는 서비스 기준으로 사용자 요구사항을 추출 User 계층적으로 분할된 각 사용자 수준에서 필요한 시스템의 요구사항/시스템 목표 수준 추출 System Division 전체적으로 중복되는 부분이 없도록 모듈화

Windows oriented environment Distributed environment Ajou Univ. HCI Lab. CASE STUDY 목적 시스템 분석(2) 설계자 측면에서 목적 시스템 분석 전체적인 시스템 환경 Windows oriented environment Distributed environment Network based environment Human oriented environment

분석 결과(1) 설계자 측면에서 목적 시스템 분석 Service를 기준으로 분석한 시스템 Ajou Univ. HCI Lab. CASE STUDY 분석 결과(1) 설계자 측면에서 목적 시스템 분석 Service를 기준으로 분석한 시스템

분석 결과(2) 설계자 측면에서 목적 시스템 분석 User를 기준으로 분석한 시스템 Ajou Univ. HCI Lab. CASE STUDY 분석 결과(2) 설계자 측면에서 목적 시스템 분석 User를 기준으로 분석한 시스템

System Division를 기준으로 분석한 시스템 Ajou Univ. HCI Lab. CASE STUDY 분석 결과(3) 설계자 측면에서 목적 시스템 분석 System Division를 기준으로 분석한 시스템

각 사용자 수준에서 사용하기 쉽고, 안전하고, 편안한 인터페이스 설계 Ajou Univ. HCI Lab. CASE STUDY 시스템 목표 설계자 측면에서 목적 시스템 분석 사용자 인터페이스 시스템 목표 설정 표준성과 일치성 제공 각 사용자 수준에서 사용하기 쉽고, 안전하고, 편안한 인터페이스 설계

요구 사항 분석(1) 설계자 측면에서 목적 시스템 분석 사용자 인터페이스 요구 사항 분석 시스템의 구조적 분석 Ajou Univ. HCI Lab. CASE STUDY 요구 사항 분석(1) 설계자 측면에서 목적 시스템 분석 사용자 인터페이스 요구 사항 분석 시스템의 구조적 분석

요구 사항 분석(2) 설계자 측면에서 목적 시스템 분석 사용자 인터페이스 요구 사항 분석 시스템의 구조적 분석 Ajou Univ. HCI Lab. CASE STUDY 요구 사항 분석(2) 설계자 측면에서 목적 시스템 분석 사용자 인터페이스 요구 사항 분석 시스템의 구조적 분석

객체 추출 물류관리 정보 시스템 객체 추출 물품 운송 서비스 창고에 보관을 거치지 않고 운송만 하는 서비스 특별 운송 서비스 Ajou Univ. HCI Lab. CASE STUDY 객체 추출 물류관리 정보 시스템 객체 추출 물품 운송 서비스 창고에 보관을 거치지 않고 운송만 하는 서비스 특별 운송 서비스 일반 운송 서비스 창고의 보관을 위해 연관된 운송 서비스 창고에서 다른 창고로 운송하는 서비스 창고로 입고하기 위해 운송하는 서비스 창고에서 출고하기 위해 운송하는 서비스

객체 추출(2) 물류관리 정보 시스템 객체 추출 물품 보관 서비스 단일 보관 서비스 분할 보관 서비스 특수 보관 서비스 Ajou Univ. HCI Lab. CASE STUDY 객체 추출(2) 물류관리 정보 시스템 객체 추출 물품 보관 서비스 단일 보관 서비스 분할 보관 서비스 특수 보관 서비스 정보 검색 서비스

사내에서 지시 및 업무 처리에 이용하는 전자 메일 서비스 고객과 사원간의 질의 응답을 처리하는 전자 메일 서비스 Ajou Univ. HCI Lab. CASE STUDY 객체 추출(3) 물류관리 정보 시스템 객체 추출 정보 통신 서비스 사내에서 지시 및 업무 처리에 이용하는 전자 메일 서비스 고객과 사원간의 질의 응답을 처리하는 전자 메일 서비스 공용 가능한 정보를 제공하는 게시판 서비스

추출 객체 Ajou Univ. HCI Lab. CASE STUDY 입고처리화면 출고처리화면 주문처리화면 초기화면 고객정보조회화면 초기화면 주문처리화면 출고처리화면 입고처리화면 차량정보조회화면 입출고일정조회화면 창고정보조회화면

맵핑 기능성과 맵핑 사용자 관점에서의 기능성 맵 임원진 관점에서의 기능성 맵 실무진 관점에서의 기능성 맵 Ajou Univ. HCI Lab. CASE STUDY 맵핑 기능성과 맵핑 사용자 관점에서의 기능성 맵 임원진 관점에서의 기능성 맵 실무진 관점에서의 기능성 맵 사용자 수준별 기능성 맵

데이터 조작 기능성 시스템 최적화 사용 편이 의사 결정 정보 관리 도움말 전달 무결성 사용자 관점에서의 기능성 맵 임원진관점에서의 기능성 맵 데이터 조작 기능성 시스템 최적화 사용 편이 의사 결정 정보 관리 도움말 전달 무결성 데이터 조작 기능성 시스템 최적화 사용 편이 의사 결정 정보 관리 도움말 전달 무결성 실무진 관점에서의 기능성 맵 사용자 수준별 기능성 비교

상세 설계 (I) Tool Bar 주요 화면 전 화면으로 이동 다음화면으로 이동 프로그램 종료 해당화면의 정보 제공 Ajou Univ. HCI Lab. CASE STUDY 상세 설계 (I) Tool Bar 주요 화면 전 화면으로 이동 다음화면으로 이동 프로그램 종료 해당화면의 정보 제공

화면의 가장 큰 특징은 Step by Step방식. 사용자의 오류를 최소한으로 작업의 원활한 흐름 정보의 정확한 입력 Ajou Univ. HCI Lab. CASE STUDY 시스템 형상 및 구조 화면의 가장 큰 특징은 Step by Step방식. 사용자의 오류를 최소한으로 작업의 원활한 흐름 정보의 정확한 입력 네트웍사용시 보안의 유지 효율성이 극대화

Ajou Univ. HCI Lab. CASE STUDY 전체 흐름 개략도

Ajou Univ. HCI Lab. CASE STUDY 초기화면

Ajou Univ. HCI Lab. CASE STUDY 계정확인 화면

Ajou Univ. HCI Lab. CASE STUDY 신규고객 화면

Ajou Univ. HCI Lab. CASE STUDY 서비스 선택

Ajou Univ. HCI Lab. CASE STUDY 물품보관화면

Ajou Univ. HCI Lab. CASE STUDY 물품보관 신규등록

Ajou Univ. HCI Lab. CASE STUDY 물품보관이 가능할 경우

Ajou Univ. HCI Lab. CASE STUDY 물품 보관이 불가능할 경우

Ajou Univ. HCI Lab. CASE STUDY 물품 보관 접수

Ajou Univ. HCI Lab. CASE STUDY 물품 보관 조회

Ajou Univ. HCI Lab. CASE STUDY 물품 운송화면

Ajou Univ. HCI Lab. CASE STUDY 물품 운송 등록

Ajou Univ. HCI Lab. CASE STUDY 물품 운송가능

Ajou Univ. HCI Lab. CASE STUDY 물품 운송 접수

Ajou Univ. HCI Lab. CASE STUDY 물품 운송 조회

Ajou Univ. HCI Lab. CASE STUDY 관리자 계정확인

Ajou Univ. HCI Lab. CASE STUDY 영업부 접수과

Ajou Univ. HCI Lab. CASE STUDY 수송부 운송과(차량 정보확인)

Ajou Univ. HCI Lab. CASE STUDY 차량정보(자세히)

Ajou Univ. HCI Lab. CASE STUDY 창고부 관리과(창고정보확인)

Ajou Univ. HCI Lab. CASE STUDY 창고정보 (자세히)

Ajou Univ. HCI Lab. 연구 과제 연구 과제 ? , !