문제 정의 : 시스템의목적과 해결해야할 문제를정의했다.
사용자 모델정의 : 사용자 특성을 결정하고,소프트웨어 작업 지식 정도에따라초보자,정급자,숙련자로 구분한다.
작업 분석 : 사용자의 특징을 세분화하고 수행되어 할작업을 정의한다.
컴퓨터오브젝트및기능 정의 : 작업 분석을통하여어떤사용자 인터페이스에 표현할지를 정의한다.
사용자 인터페이스 정의 : 모니터,마우스, 키보드, 터치스크린 등물리적 이출력 장치 등상호작용 오브젝트를 통해여시스템 상태를명확히 한다.
디자인평가 :사용자능력, 지식에적합한가? 사용자가 사용하기편리한가? 등의편가를 의미하며, 사용성 공학을 통하여 사용성 평가를 할 수있다. 평가방법론으로는 GOMS,Heuristics등이 있다.
▼UI 상세 설계 단계
★ UI 메뉴구조설계
요구사항과 UI 표준및 지침에따라 사용자의 편의성을 고려한다.
요구사항 최종확인, UI설계시 표지및 개정이력을작성한다.
UI 구조설계, 사용자기반 메뉴구조 설계 및화면을 설계한다.
★ 내외부화면과 폼 설계
UI 요구사항과 UI 표준 지핌에따라하위시스템 단위를 설계한다. 실행 차를 최소화 하기 위하여 UI 설계 원리 검토 -> 행위 순서 검토 ->행위 순서대로 실행 검토한다.
평가 차를 줄이기 위한 UI 설계 원리를 검토한다.
★ UI 검토수행
UI 검토 보완을 위한 시뮬레이션 시연구성원에는컴퓨터역활을 하기위한 서류를 조작하는 사람, 전체적인평가를 위한평가 진행자, 관찰자가 있다. 이 평과결과를 토대로 설계를 보완한다.
UI 시연을 통한 사용성에 대한 검토 및 검증을 수행한다.
▼ UI 상세 설계 - 시나리오 작성 원칙
UI 전체적 기능, 작동 방식을 개발자가 쉽게 파악 할 수 있도록 구체적으로 작성한다.
대표 화면 레이아웃 및 하위 기능을 정의하고 트리구조나 플로우차트 표기법을 사용한다.
공통 적용이 가능한 UI 요소와 상호작용을 일반적인 규칙으로 정의한다.
상호작용의 흐름 및 순서, 분기, 조건, 루프를 명시한다.
예외 상황에 관한 사례를 정의하고 UI 시나리오 규칙을 지정한다.
기능별 상세 기능 시나리오를 정의하되 UI 일반규칙을 지킨다.
시나리오 문서는 완전성, 일관성, 이해성, 가독성, 수정용이성, 추적용이성을 바탁으로 작성한다.
UI 흐름 설셰서 구성
UI 설계서 표지 : 프로젝트 이름, 시스템 이름을 포함하여 작성.
UI 설계서 개정 이력 : 처음 작성시 초안 작성을 포함한다. 초기 버전은 1.0으로 설정하고 완성시 버전은 x.0으로 바꾸어 설정한다.
UI 요구사항 정의
시스템 구조 : UI 프로토타입 재확인 후 UI 시스템 구조를 설계한다.
사이트맵 : UI 시스템 구조를 사이트맵 구조로 설계한다.
프로세스 정의 : 사용자 관점에서의 요구 프로세스 순서를 정리한다.
화면 설계 : UI 프로세스와 프로토타입을 고려하여 페이지 별로 화면을 구성 및 설계한다.
▼UI 설계도구
UI 설계에도움을주는도구들
와이어프레임(Wire Frame) : UI 중심의 화면 레이아웃을 선을 통해서 개략적으로 작성한다.
목업(Mockup) : 시각적으로 구성요소를 배치하는 것으로 일반적으로 실제로 구현되지는 않는다.
프로토타입: 상호작용이 결합하여 실제로 작동하는 모형이다.
스토리보드 : 정책, 프로세스, 와이어 프레임 설명등이 모두 포함된 문서이다.
와이어프레임 : 기획 단계 초기에 작성하며, 구성할 화면의 개략적인 레이아웃이나 UI 요소등의 틀을 설계하는 단계이다. 개발관계자 사이의 레이아웃 협의, 현재 진행상황 등을 공유할때 사용한다.
목업 : 와이어 프레임보다 좀 더 실제 제품과 유사하게 만들어지는 실물 크기의 정적 모형으로 시각적으로만 구현된다.
스토리보드 :UI/UX구현에 수반되는 사용자와 목표, 인터페이스 간 상호작용을 시각화하여, 개발자/디자이너와의 의사소통을 돕는 도구이자, 완성해야 할 앱서비스와 예상되는 사용자경험을 미리 보기 위한 방법론.
작성 목적 : 설계에 필요한 조각을 모아 순서대로 놓고 배치해 보고 쌓아서 조립하는 과정으로 설계단계에서 발생할 수 있는 문제를 미리 발견하고 대처하기위한 과정이다.
▼ UI프로토타입
도출된 요구사항을 토대로 프로토타입을 제작하여대상 시스템과 비교하면서 개발 중에 도출되는 추가 요구사항을 지속해서 재작성하는 과정. 와이어 프레임, 스토리보드에 인터렉션을작용한 것으로, 동적인형태로 구현된 모듈이다.
장면 : 사용자 설득과 이해가 쉬우며, 오류를 사전에 발견할 수 있고, 개발시간이감소한다.
단점: 수정이많아지면 오히려 작업시간이 늘어나고, 정확한 문서 작업이 생략되는 문제가 발생하거나 필요 이상으로 자원을 많이 소모하게 될 수 있다.
★UI 프로토타입작성시 고려사항
프로토타입에 대한 계획작성, 범위확인, 목표확인, 일기간 및 비용확인, 산출물 확인 유의사항 확인
★UI 프로토타입계획시 고려사항
프로토타입의 목표확인, 환경확인, 일정확인, 범위확인, 인원확인, 아키텍쳐 검증확인, 이슈및 해결, 가이트확정,개발생산성 확인, 결과시연
★ UI프로토타입의 제작단계
사용자 요구분석 -> 프로토타입 작성 - > 프로토타입 사용자테스트 - > 수정과 합의 단계
▼감성공학
인간의 소망으로이미지나 감성을구체적 제품계를통하여 실현해 내는 공학적 접근 방법으로 인간과 컴퓨터 간의상호작용, 즉 HCI(Human Computer Interaction or Interface) 설계에 인간의 특성과 감성등의 정략적 측정과 평가를통하여 제품 환경 설계에 반영하는 기술이다. 인간이 가지고있는 소망으로서의 이미지나 감성을 구체적인 제품 설계로 실현해내는인문사회 과학, 공학, 의학등여러 분야의 학문이 융합된 기술로서. 감각및 생체계측 센서, 인공지능 등의 세체기술을 통해 과학적으로접근한다. 최종적으로 목표를 감성 공학을 통하여 인간이쉽고 쾌적하게 시스템과 어우러지는 것이다.
1류 접근방법 : 의미미분법 (Semantic differential method)
인간의 감성을 표현하는 어휘를 이용하여 제품에 대한 이미지를 조사하고, 그 분석을 통해 제품 디자인 요소와 연계시킴
2류 접근방법
문화적 감성의 일부를 반영한 개념
1류와 기본틀은 같으나, 감성어휘 수집의 전 단계에서 평가자들의 생활 양식을 고려하는 것이 추가됨
제품에 대한 기호와 수요에 소비자군의 소속지역, 생활약식, 의식문화가 많은 영향을 미칠때
1류와 함께 감성의 심리적 특성을 강조한 접근
3류 접근방법
감성어휘 대신 인간 평가자의 특정시제품을 사용하여 자신의 감각 척도로 감성 표출
이 척도는 평가자의 생리적 감각 계측을 통하여 그 객관성이 보완되며 정량화된 값으로 환산됨
대상 제품의 물리적 특성에 대한 객관적 지표와의 연관분석을 통해 제품 설계에 응용됨
인간 감각계측과 이의 활용이 강조된 접근법
감성의 생리적 특성 중요시
▼HCI(Human Computer Interaction or Interface)
HCI는 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문으로서, 최종 목표로는 시스템을 사용하는데 있어서 최적의 사용자 경험(UX)을 만드는 것이다.
원래 HCI는 사람과 컴퓨터의 상호작용을 연구해서 사람이 컴퓨터를 편리하게 사용하도록 만드는 학문이었으나, 대상이 컴퓨터뿐만 아니라 서비스, 디지털 콘텐츠 등으로 사람도 개인뿐만 아니라 사회나 집단으로 확대되었다.
HCI는 어떤 제품이 좋은 제품인지, 어떻게 하면 좋은 제품을 만들수 있는지 등을 연구한다.