Hi-fi Prototypes (Interactive Prototypes) 2010년 2학기 숙명여자대학교 임순범
Low-fi 프로토타입의 문제점 화면의 실제 모습과 연상하기 어렵다 시뮬레이션 어려운 점 실시간 컴퓨팅은 거의 불가능 “종이에 그리는 것과 타겟 장치에 그리는 것은 다르다.” 현실감이 부족한 모습 시뮬레이션 어려운 점 하이라이트, 드래깅, 다이나믹 위젯(팝업 메뉴 등) 실시간 컴퓨팅은 거의 불가능 매우 느린 컴퓨터 역할만 할 뿐 시간에 대한 정확한 측정은 불가능 손에 들고 다루기 안좋다 장치와 다른 인간공학 측면에서 종이와 타겟 장치는 다르다.
Low-fi 프로토타입의 문제점 실감있는 입출력 재현이 불가능 인터랙티브 피드백이 부족 사용자가 UI 평가에 어려운 부분 마우스 조작 재현 어려움 늦은 반응 인터랙티브 피드백이 부족 “컴퓨터”는 많은 수의 종이로 조작 사용자가 UI 평가에 어려운 부분 인식하기 좋도록 잘 그리기 곤란 행위유발성(affordance) 도출 어려움
UI 프로토타입 작성 도구 Denim Activity Designer Suede
UI 프로토타입 작성 도구 low-fi 페이퍼 프로토타입의 장점을 지원 전자적 도구의 장점을 추가 브레이스토밍 가능 아이디어를 신속히 표현, 상세 스펙을 요구하지 않음 미완성 디자인 모든 경우를 구현하지 않고, 중요한 사례만 실행되도록 구현 전자적 도구의 장점을 추가 손쉽게 개선하고(evolve), “디자인 메모리”를 지원 다른 컴퓨팅 도구로 변환이 용이 사용자 인터랙션이 가능 실제 장치에서 작동하는 것도 가능
Hi-fi 프로토타입의 필요성 아이디어에 대해 사용자 테스트와 관찰은 반드시 필요 지금 시점에서 최종 앱을 개발한다면 손해 페이퍼 목업(mock-ups)으로는 불충분 드래깅의 표현? 인터페이스의 실감성 부족 지금 시점에서 최종 앱을 개발한다면 손해 UI에서의 변경은 코드 개발에서 막대한 변경을 초래 많은 시간을 소요 drag & drop 프로토타입 도구가 적당 단, 디자인 평가를 여러 번 반복한 이후 프로토타입을 코딩과 분리
도구를 사용하는 이유 (코딩 대신) 프로토타입 UI 작성이 용이 UI 코드와 어플 코드의 분리 테스트 변경을 반영하기 쉽고 빠르다. 일관성 있는 UI 작성이 가능 다양한 전문가/사용자를 개입시키기 용이 동일한 어플에 여러 개의 UI 작성이 가능 UI 코드와 어플 코드의 분리 변경 및 유지 관리가 용이 어플 개발의 신뢰성 증가 어플 코딩 전에 도구 내에서 오류가 수정된다.
프로토타입 작성도구(역사) HyperCard 매킨토시 – by Bill Atkinson 메타포 : 버튼 클릭 시에 카드 넘김 위젯 및 도구 팔레트 제공 그리기/애니메이션은 제한 스트립트 언어 제공
Director 원래 멀티미디어 저작도구 : 지금도 사용 위젯 없는 UI 또는 어플리케이션 내부 구현 모습에 적절 위젯이나 콘트롤 없는 동영상/애니메이션 등 통합 화면 제작 Cast, Score, Behavior 개념 적용, 스크립트 언어 제공 위젯 없는 UI 또는 어플리케이션 내부 구현 모습에 적절 최근 Flash 사용 증가 Overview of events in time Connect events to actions Drag & drop
UI Builders Visual Basic 다양한 위젯 제공 간단한 언어로 제작 가능 MS Visual Studio .NET, JBuilder, PowerBuilder... 기존의 프로그래밍 언어와 연동 Web Editor 나모웹에디터, Adobe Dreamweaver, FrontPage 위젯, 이미지, 이벤트 등 화면 배치 웹사이트 혹은 모바일웹 응용 개발 시 강력한 UI 개발 도구 모바일 앱 개발에도 유용
위젯(Widgets) 제공 다양한 기능 지원 빠진 것 버튼 풀다운 메뉴 스크롤바 팔레트 대화상자 윈도우즈 등 … 링크 편집 사이트맵 빠진 것 어플리케이션 내부 실행
프로토타입 도구 vs. UI Builder Hi-fi 프로토타입 두 가지 유형: 프로토타입 도구 vs. UI builders 최종 제품 : 일반적으로 UI builders 사용하는 편이 유리 멀티미디어 콘텐츠의 경우에는 프로토타입 저작도구가 유리하기도 어플리케이션 내부(“insides”)는 무시