- Title: GUIComp A GUI Design Assistant with Real-Time, Multi-Faceted Feedback
- 저자: Chunggi Lee, Sanghoon Kim, Dongyun Han, Hongjun Yang, Young-Woo Park, Bum Chul Kwon, Sungahn Ko
사용자는 그래픽 사용자 인터페이스(GUI)를 설계하는 과정에서 경험 부족과 지침 부재로 어려움을 겪곤 합니다. 본 논문은 경험이 없는 사용자가 GUI 설계 과정에서 마주치는 문제와 이를 해결하는 방법에 대해 조사하고자 합니다. 이를 위해 우리는 반구조화된 인터뷰를 수행하여 GUICompanion(GUIComp)이라는 GUI 프로토타이핑 지원 도구를 구축했습니다. 이 도구는 기존의 GUI 설계 소프트웨어와 연결되는 확장으로, 사용자의 현재 디자인에 대한 실시간 다면적 피드백을 제공합니다. 또한 우리는 두 가지 사용자 연구를 수행하여 참가자가 GUIComp를 사용한 경우와 그렇지 않은 경우에 대해 모바일 GUI를 만들도록 요청하고 온라인 근로자를 통해 생성된 GUI를 평가하도록 했습니다. 실험 결과는 GUIComp가 반복 설계를 촉진하며, 참가자들이 더 나은 사용자 경험을 제공하고 더 수용 가능한 디자인을 생산하는 데 도움이 되었다는 것을 보여줍니다.
**핵심 요약**: 이 논문은 GUI 설계 경험이 없는 사용자가 마주치는 문제를 해결하기 위해 GUICompanion(GUIComp)이라는 도구를 개발했습니다. 이 도구는 실시간 피드백을 제공하여 디자인 과정에서 발생하는 다양한 문제점을 해결합니다.
## 개요
다양한 사람들이 설계를 평가할 때 서로 다른 기준을 사용하기 때문에, 설계 작업은 어려울 수 있습니다. 효과적으로 수용 가능한 디자인을 생성하는 하나의 접근 방법은 설계 단계 사이에서 반복을 수행하는 것입니다: 많은 공유 가능한 설계 대안을 만들어서 대안들을 비교하고 일반 사용자가 디자인을 활용하면서 어떻게 느끼는지 평가합니다. (예: 주목도). 반복적인 설계는 사람들이 다양한 설계 시나리오를 빠르게 프로토타이핑하고, 원하는 목표(예: 간결성, 테마 표현, 시각적 아름다움 및 창의성)를 달성하기 위해 많은 설계 시도 시간을 통해 설계 기술을 개선하는 데 도움이 됩니다.
반복적인 설계는 효과적이지만 초보자에게는 쉽지 않을 수 있습니다. 여기서 초보자는 설계 경험 부족으로 인해 반복 설계를 수행하기 어렵고, 설계 결정에 대한 자신감이 적으며 시도와 오류로 설계 전략을 추구하는 사람들을 말합니다. 예를 들어 학생들이 수업에서 디자인을 제작해야 할 때나 개발자가 프로그램뿐만 아니라 그 프로그램의 GUI를 설계해야 하는 경우(예: 독립적인 앱 개발자) 등이 있습니다.
우리는 초보자들이 마주치는 장애물을 극복하기 위해 도구를 설계하고자 합니다. 이 목표를 달성하기 위해 우리는 16명의 참가자를 대상으로 반구조화된 심층 인터뷰를 수행하여 모바일 GUI 디자인 중 마주치는 어려움을 이해했습니다. 인터뷰에서 관찰한 어려움을 바탕으로, GUICompanion (GUIComp) 라는 도구를 설계하였습니다. 이 도구는 추천, 평가 및 주목도에 대한 3가지 다른 피드백 메커니즘을 통합하였으며, 웹 애드온 형태로 구현되어 기존의 GUI 프로토타이핑 도구와 쉽게 연결할 수 있습니다. 우리의 실험에서는 이 도구를 Kakao Oven이라는 기본 툴과 연결하여 30명의 참가자들에게 사용자 프로필 입력 및 제품 목록을 디자인하도록 요청했습니다. 그 후에 우리는 47명의 Amazon Mechanical Turk (AMT) 근로자를 통해 생성된 디자인을 평가하였습니다.
실험 결과는 GUIComp를 사용한 초보자가 모바일 GUI 설계를 쉽게 시작하고 짧은 기간 내에 발전시키는 데 도움이 되었다는 것을 보여줍니다. 참가자는 예제로 디자인을 시작하고, 시각적 복잡성 점수에 따라 자신이 의도한 대로 디자인이 진행되는지 확인할 수 있었습니다. GUIComp를 사용하여 생성된 모바일 GUI는 기반 도구로 생성된 것보다 일반 사용자에게 더 수용 가능한 디자인으로 평가되었습니다. 참가자는 GUIComp를 사용하는 것이 기존의 기반 도구를 사용하는 것보다 더 즐겁고 만족스럽다고 보고했습니다.
이 연구의 기여는 다음과 같습니다: 1) 반구조화된 인터뷰를 통해 GUI 디자인 중 마주치는 어려움을 특성화한 것입니다. 2) 모바일 GUI 디자인에 대한 다면적 피드백을 통합하고 반복 설계 과정을 촉진하는 종단간 시스템인 GUIComp의 설계 및 평가를 수행하였습니다. 3) 연구에서 얻은 교훈과 GUI 프로토타이핑 지원에 대한 디자인 가이드라인입니다.
관련 연구
GUI 프로토타이핑 도구
많은 GUI 프로토타이핑을 위한 도구들이 개발되었습니다. Adobe Photoshop 및 Illustrator는 다양한 단순하거나 복잡한 형태를 그리는데 많은 도구박스를 제공하는 것으로 인기가 있습니다. 또한 사용자와의 상호작용 시간을 줄이고 애니메이션을 추가하여 쉽게 프로토타이핑할 수 있도록 설계된 여러 도구들이 제안되었습니다. Adobe XD, InVision, Sketch 및 Principle은 이러한 범주에 속하는 도구들입니다. 다른 도구들은 더 빠른 프로토타이핑을 위해 많은 예제 요소를 갖춘 것으로 알려져 있습니다. 예를 들어 UXPin, Proto.io 또는 Axure는 모두 준비된 많은 요소들을 제공합니다. 그러나 이러한 도구들이 사용자의 디자인에 대한 실시간 피드백을 제공하지 않기 때문에, 품질을 개선하는 데 충분하지 않을 수 있습니다.
GUI 프로토타이핑 지원 방법
GUI 프로토타이핑을 돕는 여러 접근 방식들이 있으며, 이들은 세 가지 그룹으로 분류될 수 있습니다. 첫 번째 접근 방식은 사용자가 예제를 찾아볼 수 있게 하는 것입니다. 기존 연구에 따르면 예제를 찾아보는 것은 디자이너들에게 영감을 주고 대안적인 설계로 이끌어냅니다. Ritchie 등이 제안한 “d.tour”는 사용자가 제공하는 키워드를 이용해 예제를 검색할 수 있게 합니다.
두 번째 접근 방식은 사용자가 특정 디자인 요소들을 찾아, 추출하고 프로토타이핑에 직접 사용하거나 템플릿 또는 구성 요소로 활용하도록 하는 것입니다. Tsai와 Chen의 프레임워크는 초기 시스템으로서 모바일 사용자 인터페이스 설계를 지원하는 템플릿 기반 접근 방식을 제안합니다. 이 접근 방식에서는 사용자가 추출할 수 있는 요소가 구조, 레이아웃 및 스타일 등에 한정됩니다.
Rewire는 UI 캡처 샷을 디자인 요소의 벡터 표현으로 자동 변환하여 사용자가 그래픽 편집 도구로 가져와서 자신의 목적에 맞게 수정할 수 있게 합니다. 세 번째 접근 방식은 부분적 또는 완전한 설계 단계를 계산 방법을 통해 자동화하는 것입니다.
O’Donovan 등이 개발한 DesignScape는 다양한 레이아웃 제안을 제공하여 디자인의 향상을 위한 사후 수정과 아이디어 창출에 도움을 줍니다. Todi 등은 기존 레이아웃을 재구조화하여 친숙한 디자인을 생성하는 접근 방식을 제안하며, 실시간 디자인 최적화를 제공하고 사용자에게 현지 및 전반적인 변경 사항을 제안해주는 인터랙티브 레이아웃 스케치 도구도 제안했습니다. 반면에 ReDraw와 pix2code는 컨볼루션 신경망 모델을 기반으로 샘플 UI 이미지를 입력받아 실행 가능한 애플리케이션 코드를 생성하는 도구입니다.
Moran 등은 사용자의 디자인 구현이 제공된 지침(이미지로 제공됨)에 따라 수행되는지 자동으로 확인하는 접근 방식을 제안했습니다. 이러한 자동화 접근 방식들은 여러 약점들이 있습니다: 첫째, 사용자는 보통 설계 추천 과정에서 배제됩니다. 두 번째, 자동화된 방법은 그 결과물의 품질을 보장하지 못하며, 이는 종종 사용자에게 위임됩니다. 세 번째, 자동화 방식은 예시 출력에 제약되는 창의적인 디자인 구상에서 사용자의 자유를 방해할 수 있습니다.
이러한 약점을 극복하기 위해 사용자가 설계 과정을 주도하도록 지원하는 방법론을 연구해야 합니다. 우리는 사람들이 컴퓨터가 스마트 동료로서 작업하는 도중에 설계 노력을 이끌어낼 수 있도록 어떻게 지원할 것인지 조사하였습니다.
시각적 복잡성 측정을 위한 지표
웹 페이지와 모바일 GUI를 평가하기 위한 메트릭들이 이미 존재합니다. 웹 페이지 평가 메트릭은 개별 및 수치 요인(예: 단어 카운트나 그래픽 카운트)에 초점을 맞추는 반면, 모바일 GUI의 경우 디자인 전체의 시각적 복잡성에 기여하는 세부 사항을 평가합니다. 예를 들어 단어, 색상, 이미지 개수 및 크기, 대칭성, 균형 등입니다. 또한 다른 모바일 GUI의 시각적 복잡성을 평가하기 위한 접근 방식들이 있습니다.
Miniukovich와 Angeli는 모바일 GUI의 시각적 인상을 측정하는 메트릭을 제안하고 이를 통해 주관적인 시각적 복잡성 점수의 변동량의 40%를 설명할 수 있음을 보여주었습니다. 그들의 실험은 또한 UI의 대표 색상과 대칭성이 미학에 관련되고, 색상 깊이 정보는 더 시각적으로 복잡한 것과 관련된다는 것을 발견했습니다. 이 모델은 데스크톱 GUI의 시각적 복잡성 측정으로 확장되었습니다.
Riegler와 Holzmann은 모바일 GUI를 평가하기 위한 8개의 시각적 복잡성 메트릭을 제안하였습니다. 그들의 메트릭은 UI 요소 수, 정렬 오류, 불균형, 밀도, 요소 크기, 일관성, 색상 및 타이포그래피 복잡성을 평가합니다. 이러한 메트릭들은 수학적으로 작성되었으며 사용자 연구를 통해 검증되었습니다.
