UI UI 사례 및 설계 과정 사례 및 설계 과정 개요 개요
숙명여자대학교 임순범
1
Good & Bad Interaction Design
Good Interaction Design 사례
현금지급기 , 배리어프리 키오스크
이메일 , 컴퓨터 게임
Bad Interaction Design 사례
슈퍼마켓 무인정산기 , 주차정산기 , 티켓구입기
은행이체 시간 , 출석체크
Ⓒsblim, 2022
개발 사례 : KORAIL
3
Ⓒsblim, 2022 5
문제점 및 해결방안
문제점
잘 안보인다 => 글자 크게 ? 색상 ?
어렵다 => 쉽게 ?
해결방안
기본적인 해결 방향 ?
작업 절차 개선 : 작업 대상 축소 , 과정 가시화
Ⓒsblim, 2022 7
Ⓒsblim, 2022 9
프로젝트 및 실습 진행 개요
실습강의 과제 발표 / 보고서
• 사례발표 및 팀 구성
• 프로젝트 주제 토론
← UI 사례 조사
← 주제 아이디어 [P1] 제안서
• 태스크 도출 ← 맥락질의 인터뷰
[P2] 작업분석
• 페르소나 작성
• 시나리오 작성 → ( 스토리보드 작성 ) [P3] 시나리오 프로토타입
• 페이퍼 프로토 제작
• 사용자 테스트 준비 → 사용자 테스트 [P4] 페이퍼 프로토타입
Ⓒsblim, 2022
모듈 #1. 팀구성 및 제안서 작성
[ 과제 ] 관심있는 UI 사례 조사
Interaction 위주 , 개선할 점 혹은 신규
[ 실습 ] 개별 발표 및 팀 구성
=> 유사 주제 혹은 유사 관심 분야로 구성하여 팀 구성
수업 시간에 결정 , 팀 인원 5 명 기준
[ 과제 ] 프로젝트 주제 아이디어 정리
[ 실습 ] 프로젝트 주제 토의 (UI 개선 , 신규 UI)
팀별 간단히 발표 및 토의 / 검토
[Proj#1] 제안서 작성 및 발표
11
모듈 #2. 작업분석 (Task Analysis)
[ 강의 ] 사용자 조사 / 분석 (User Research)
[ 과제 ] 맥락질의 (Contextual Inquiry) 인터뷰 실시
[ 실습 ] 작업분석
어피니티 다이어그램 활용
결과물 : 작업목록표 ( 사용자 / 작업 행렬표 )
주의사항
기능목록이 아니라 작업목록
기존 UI 가 아니라 개선 UI
사용자 A 사용자 B 사용자 C
작업 1 세부작업 1a ○ ○
세부작업 1b ○ ○ △
작업 2 세부작업 2a △ ○
Ⓒsblim, 2022
모듈 #3. 시나리오 프로토타입
[ 강의 ] 작업분석 결과를 UI 설계에 적용
[ 실습 ] 페르소나 작성 :
대표 사용자 선정 및 묘사
[ 실습 ]
시나리오 작성 :
글로 쓴 프로토타입 * 중요 *
프로토타입 제작 기준 , 사용자 테스트에 적용
( 보고서 ) 스토리보드
스케치로 모델링
[Proj#3] 시나리오 프로토타입 발표
13
모듈 #4. 페이퍼 프로토타입
[ 강의 ] 프로토타입 유형 및 특징
[ 실습 ] 페이퍼 프로토타입 작성
시나리오에 기반
[ 강의 ] 사용자 테스트 기법
오즈의 마법사 기법
[ 실습 ] 사용자 테스트 사전 준비
프로토타입의 목적은 사용자에게 확인
( 과제 ) 사용자테스트 ( 보고서에 포함 )
Ⓒsblim, 2022
모듈 #5. 디지털 프로토타입
[ 강의 ] 인터랙티브 프로토타입 특징
[ 실습 ] 프로토타입 저작 도구
카카오 오븐 , 피그마 (Figma)
[ 강의 ] 휴리스틱 평가 기법
( 보고서 ) 휴리스틱 평가 실시 ( 보고서에 포함 )
[Proj#5] 디지털 프로토타입 발표
15
기반이론 강의
UX 디자인 개념
프로젝트 방법론
사용자 중심 디자인 / 참여 디자인
심리학적 이해 / 상호작용
HCI 의 역사
