UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범 프로토타입 및 테스트 UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범

교재 인터페이스 디자인을 위한 사용자와 태스크 분석, J. Redish, 방수원 역, 한솜미디어, 2003 13장. 인터페이스 디자인을 프로토타입으로 변환하기 [p.453~459] “더 나은 사용자 경험(UX)을 위한 인터랙션 디자인”, 댄 새퍼, 에이콘, 2008 5장. 인터랙션 디자인의 도구 [p.150~155] Univ. of Washington, James Landay 교수 홈페이지 UI Design 강좌 홈페이지  http://www.cs.washington.edu/education/courses/440/08au/ 컨텍스트를 생각하는 디자인,  캐런 훌츠블랫, 팀인터페이스 역, 인사이트, 2008 13장. 페이퍼 프로토타입 테스트하기 [p.357~380]

Prototypes 프로토타입이란? [redish, p454~458] 왜 프로토타입인가? 인터페이스의 한 부분에 대해 쉽게 변경가능한 초안/시뮬레이션 Low-fidelity prototype vs. high-fidelity prototype paper prototype (mock-up) vs. computer based prototype 왜 프로토타입인가? 비용 절약 : 설계/개발 도중 vs. 출시 이후 변경 비용 구체적 : 의사소통에 글보다 효과적 대안제시 및 반복설계 촉진 : 개념, 은유, 접근방법 등 대상 주의 : 변경시 일관성 및 적합성을 유지하도록 설계 단계에서 사용자 적극 참여 초기에 제품설계에 깊숙이 관여, 페이퍼의 경우 참여의 민주화

여러가지 유형 Sketch & Paper Prototype 장 : 저비용/시간, 변경 용이, 즉시 대안 작성, 개념표현/은유에 적합, 팀원 다수가 참여, 변경 용이하므로 더 많은 제언 촉진 단 : 일부 기능만 가능, 기술적 실현가능은 미지수, 최종적으로 폐기, 실험 시 사람도움이 필요, 외견상 타당성 결여 Low-fidelity & Non-interactive & Computer-based Prototype 드로잉 프로그램 이용, Paper 의 장단점 모두 포함 시간/비용/컴퓨터지식 필요, 미리 준비해야, 예비 스케치/초안 검토 Mid-fidelity & Computer-based Prototype Power-Point 등의 도구, 온라인 수정 가능 High-fidelity Prototype 장 : 사용자 직접 작업 가능, Low-Fi 보다 더 많은 작업 및 기능 가능, 최종 제품과 유사, 코딩과 연계 가능, 제품 시연으로 활용 가능 단 : 구축 비용/시간, 제작툴에 대한 지식 필요, 고객의 비현실적 기대

페이퍼 프로토타입 페이퍼 프로토타입 테스트하기 [캐런, p.357~380] 페이퍼 프로토타입 와이어프레임 사용자 집단과 테스트 디자인 콘셉트 테스트 페이퍼 프로토타입 필드 인터뷰 사용자 집단과 테스트 ⇒ 솔루션 디자인 페이퍼 프로토타입 테스트하기 [캐런, p.357~380] 인터뷰팀 : 4명 내외 페이퍼 프로토타입 모든 요소를 이동/수정 가능하도록 ⇒ 사용자 반응에 따라 즉시 수정 가능 와이어프레임 컴퓨터로 그려진 인터페이스,, 버튼 등 기본적인 디자인 포함

페이퍼 프로토타입 구축 프로세스 준비하기 구축하기 수정하기 반복 회차 계획 데이터와 공간 준비 구성요소를 정의하기 위한 스토리보드 워킹 브레인스토밍 & UI 콘셉트 정의 모든 UI 공유 및 구축하기 수정하기 사용자 피드백에 근거하여 다음 프로토타입 구축

1.1) 반복 회차 계획하기 첫번째 프로토타입은 종이에 구축해야 “페이퍼 목업 인터뷰 = 시스템 테스트”라는 의미 사용자를 디자인 구조에만 집중. 레이아웃은 중요한 요소가 아님 시각 디자인을 완성하지 않은 채 시작 변화를 쉽게 수용 3회차 계획 2회차 계획 손으로 그린 대략적인 페이퍼 프로토타입 약간 개선된 대략적인 프로토타입 (일부 온라인 가능) 더 정리된 와이어프레임

1.2) 데이터와 공간 준비 스토리보드는 벽에 게시 적합한 재료 선택 배경용 보드지 화면 및 큰 대화창 용 일반 크기 종이 포함시킬 콘텐츠 출력물 다양한 종류의 포스트잇 라벨용 깃발, 버튼용 스티커 테이프, 수정액 네임펜, 색상펜, 가위 OHP 필름, 상자, 봉투

2.1) 구성요소 정의할 스토리보드 워킹 필요한 기능의 추상화 간단한 UI 작성 핵심 구성요소와 기능을 정의하면서 스토리보드 워킹 구성요소 특성 목록, 스토리보드에서 추출한 필요기능 간단한 UI 작성 동일한 구성요소가 여러 스토리보드에서 재사용됨을 고려 초기 레이아웃을 포함하는 UI 구성요소 세트 확보 인터페이스 디자인이 아니라 UI를 위한 ‘기록’ 또는 작업지시 최종 검토사항 일관된 직무 또는 역할을 지원하는가? 너무 많지 않나? 연결은 분명? 목적을 명확히 지원? 너무 복잡? 기능 단순하게? 스토리보드에 있었나? 데이터 없이 추가?

2.2) 브레인스토밍 & UI 콘셉트 정의 대략적인 UI 콘셉트 개발 UI 디자인시 유의사항 구성요소 표현에 대한 브레인스토밍, 스케치해서 모두 참여 여러가지 대안 개발, 장단점 검토, 단점에 대해 브레인스토밍 대안중 하나 선택, UI를 플립챠트에 스케치 프로토타입 구성요소를 시범 작업으로 워킹 확인 구성요소 배치를 위한 대략적인 아이디어만 필요 1차 페이퍼 프로토타입 디자인은 하루 이내 아이디어에 많은 추가 지양 ⇒ 디자인 완전 변경이 흔하다

2.3) 모든 UI 공유 및 구축하기 규모가 큰 개발팀 프로토타입 구축 가이드라인 하위 팀간에 디자인 구성요소 합의 핵심 테스트 이슈 정의 프로토타입 구축 가이드라인 인터페이스의 모든 부분이 움직일 수 있는지? 주요 UI 구성요소에 링크 작성 시각적으로 숨겨진 기능은 포함하지 않도록 사례 또는 콘텐츠를 포함하되 지울 수 있도록 정보 콘텐츠를 포함 (사용자 테스트시 유용) 새로운 콘텐츠를 촉진하는 영역 마련

3) 다음 차례 프로토타입 구축 사용자 피드백에 근거하여 다음 프로토타입 구축 와이어프레임 드로잉으로 전환 다음 인터뷰에서 확인할 디자인 부분 강조 와이어프레임 드로잉으로 전환 UI 요소의 배치, 합리적인 상대 크기 부분 사이의 경계는 단순한 선, 단순 음영 사용, 서체/색은 무시 위치는 미정으로, 미학적 호소력 최소화 기능과 콘텐츠를 강화하는 단순한 시각 디자인 작동하는 프로토타입 활용 온라인, High-Fidelity 웹 페이지 디자인 활용 최종 인터랙션 디자인과 시각 디자인으로 이동 가능

와이어프레임 프로토타입 와이어프레임 [새퍼, p.150~155] 제품의 구성, 정보체계, 기능, 컨텐츠를 담은 문서들의 모음 제품의 청사진 : 제품 기능의 정의 문서 + 한 장짜리 디자인 시안 와이어프레임의 구성 영역: 와이어프레임, 주석, 메타정보

주석 와이어프레임 메타데이터 와이어프레임에서 모호한 내용을 짧게 설명 주석이 필요한 요소 : 컨트롤(버튼, 링크 등)이 눌러 졌을 때 반응, 조건적 아이템(비활성 메뉴 등), 제약조건 등 와이어프레임 메타데이터 설계자 이름 제작/수정 날짜, 버전 숫자 관련 문서, 남은 문제 기타 내용을 적어둘 공간

사용성 평가 실험 준비 사용자 선정 시나리오 준비 작업지시서/작업설명서 실험 동의서 [U. Washington, Landay 교수 홈페이지] 사용자 선정 예상 고객의 배경 및 환경을 이해 친구 또는 가족은 가급적 지양 시나리오 준비 실제 사용할 때의 경우를 대표하도록 이전 작성한 페르소나 및 상세 시나리오 사용 작업지시서/작업설명서 작업수행 방법이 아니라 달성해야 할 목표를 기재 평가를 진행할 때 작업지시서를 전달 실험 동의서

사용성 평가 실험 진행 3~4인 평가팀으로 실험 진행 보통 1시간 세션으로 진행 “오류(bugs)”를 줄이도록 사전 연습 손님맞이(greeter) – 실험 참여자가 편하게 & 데이터 취합 조력자(facilitator) – 평가도중 팀 내에서 유일하게 발언가능 진행보조 : 지시사항 전달, 생각이나 의견 도출하도록 권장 컴퓨터(computer) – 어플리케이션 로직을 이해하고 이를 제어 설명없이 반응/결과만 시뮬레이션하여 보여줌 관찰자(observers) – 노트 기록 보통 1시간 세션으로 진행 준비, 평가, 분석(debriefing) “오류(bugs)”를 줄이도록 사전 연습 팀원 중 한 명이 평가 참여자 역할 대행

오즈의 마법사 (Wizard of Oz) 기법 인터랙션을 가짜로 보여주기 위한 기법 유래: “The Wizard of OZ” “the man behind the curtain” 컴퓨터 산업계의 오랜 관습 사례) PC 프로토타입 개발시 장막 뒤 VAX 워크스테이션에서 작동 구현하기 힘든 기능일수록 필요 음성 인식, 필기 인식 등

사용성 평가 실험 진행 ⇒ 수정&반복 자료 준비 및 사전 연습 조작 방법 설명 (팀원 중 한사람) 각 참여자 평가 실험 평가 참여자에게 제안 시스템의 인터페이스의 작동방법 설명 평가 대상 작업의 수행방법이 아니라 일반적인 조작방법 각 참여자 평가 실험 데모과정부터 실험도중 발생하는 모든 것 기록 (실수, 중얼거림) 각 작업의 작업지시서를 받아서 평가 수행 : 각 작업 별로 기록 결과분석 관찰 데이터를 분류 & 우선순위 매기기 중요도 부여(severity rating), [0]문제없음~[4]심각 관찰/분석 내용에 대해 보고서 작성: 설계 수정에 대한 회의 안건