UI / UX

암기는 여기를 참고하세요

---

UI

• 사용자와 시스템간의 상호작용을 도와주는 장치 , 소프트웨어
• 정보 교류를 위한 물리적 제어 분야
• 상세 표현과 구성에 대한 분야
• 편리에 대한 분야

 

방식 구분

• CLI : 커맨드 라인. 명령형 텍스트 형태로 구성
• GUl : 마우스로 선택하는 그래픽으로 구성
• NUI : 네추럴 유저. 말과 행동으로 조작하는 형태

 

UI 적용기준

• 직관성 : 쉽게 이해하고 사용할 수 있어야함
• 유효성 : 목적이 정확하고 대응하는 처리가 완벽해야함
• 학습성 : 누구나 쉽게 배우고 익힐 수 있어야함
• 유연성 : 요구사항을 최대한 수용할 수 있어야함

 

---

＊설계 과정은 작성자가 임의로 과정을 함축해서 표현했습니다.

 

UI 상세 설계 과정

1. 요구사항 확인
2. UI 설계서 작성 : 표지 → 개정 이력 → 요구사항 정의 → 시스템 구조 → 사이트 맵 → 프로세스 정의
3. UI 흐름 설계 : 기능작성 → 입력 요소 확인 → 유스케이스 설계 → 기능 / 양식 확인
4. UI 구조 설계
5. UI 시나리오 문서 : 최종 목표까지 순차적인 방법을 묘사 , 완전성 / 일관성 / 추적용이성 외 등등

 

UI 가이드 작성 과정

• 구동환경 정의 → 레이아웃 정의 → 네비게이션 정의 → 기능 정의 → 구성요소 정의

 

UI 가이드 적용사항

• UI 표준 : 전체 UI에 공통적으로 적용할 내용
• UI 지침 : 요구사항 , 제약사항등의 기능적으로 지켜져야 되는 조건
• UI 스타일 가이드 : UI의 기준이 되는 틀

 

UI 설계도구

• 유스케이스 : 사용자의 요구사항을 다이어 그램으로 표현
• Wireframe : 레이아웃 과 뼈대를 설계
• Stroy Board : 와이어 프레임의 이동 흐름과 콘텐츠 설명
• Mock up : 실제 화면과 유사한 모형 , 기능없이 구성 요소만 배치
• 프로토 타입 : 핵심 기능들만 테스트 용으로 구현 (페이퍼 / 디지털 프로토타입)

 

---

UI 테스트 과정

• UI 설계 → 사용성 테스트 → UI 테스트

 

사용성 테스트(Usability)

• 일반 사용자가 문제점과 개선점을 도출하는 테스트
• 위의 작성된 UI 적용기준의 요건을 충족
• 요구사항 부합과 비용 절감을 위한 피드백을 받음

 

>종류

• 파일럿 테스트 : 소규모의 모의시행
• NEM : 초심자와 숙련자를 참여 시킨뒤 비교
• 심층 인터뷰 : 1대1 면접으로 심리파악
• Focus Group Interview : 사용이 예상되는 사용자들과 토론
• 맥락적 인터뷰 : 특정 상황이나 맥락을 정해서 환경 별로의견 수집

 

>문서

• 사용성 평가 분석서 : 결과를 문서화 하여 가이드와 적용 계획에 반영
• 에러 매트릭스 : 테스트중 실수를 수집
• 효율성 매트릭스 : 완료 까지 걸리는 시간 / 행동 갯수 / 성공률을 수집
• 시간 기반 테스크 매트릭스 : 각 구간마다의 수행 시간을 기록

 

UI 테스트

• 작성된 시나리오에 따라서 제품 사용을 테스트
• 결과 보고 → 개선 / 수정 계획 수립 → 개선 / 수정 → 결과 보고서 공유

 

>종류

• 휴리스틱 평가 : 3명 이상의 전문가와 원칙에 따라서 평가
• 페이퍼 프로토타입
• 선호도 평가 : 속성들의 순위 점수를 객관적으로 해석
• 성능 평가
• 컨셉 모델 : 추상적인 컨셉과 관계를 시각화 (UI 컨셉션 (화면) / GUI 컨셉션(경험))
• 멘탈 모델 : 사람들의 사고와 행동을 통해 다음 패턴을 분석
• Card Sorting : 아이디어와 컨셉들을 카드에 적어서 분류하고 구조화

 

---

UX(User Experience) : 서비스 이용에 대한 느끼고 생각한 경험

 

HCI : 사람이 시스템을 안전하고 편리하게 사용하기 위한 연구를 하는 학문

 

감성공학 : 제품과 환경을 사용자의 감성에 맞게 제작 / 설계