이 항목에서는 사용자 인터페이스 프로토타입을 사용하여 디자인 결함을 최소화하고 성공적인 사용자 환경을 보장하는 방법을 살펴봅니다.
소개
프로젝트가 진행됨에 따라 사소한 가정과 잘못된 선의의 결정들이 누적되어 많은 노력이 형편없는 사용자 경험으로 이어질 수 있습니다. 스마트 팀은 UI 프로토타입이라는 기술을 사용하여 배송 전에 실수를 제거합니다. 유용성 연구와 결합된 프로토타입은 팀이 올바른 방향으로 나아가게 합니다.
프로토타입을 사용하는 이유
프로토타입은 투자하기 전에 아이디어를 탐구하는 수단입니다. 숙련된 모든 장인과 엔지니어는 무엇이든 빌드하기 전에 작업의 프로토타입을 만듭니다. 건축가는 종이나 판지에서 또는 가상 현실 도구를 사용하여 모델을 만듭니다. 항공 엔지니어는 풍동을 사용합니다. 브리지 빌더는 스트레스 모델을 만듭니다. 소프트웨어 및 웹 디자이너는 사용자가 디자인과 상호 작용하는 방법에 대한 모형을 만듭니다.
프로토타입을 제작하는 가장 좋은 이유는 시간과 리소스를 절약하는 것입니다. 프로토타입의 가치는 건물 전면만 건설되는 할리우드 세트와 같은 외관이라는 것입니다. 실제 제품에 비해 프로토타입은 쉽고 저렴하게 만들 수 있습니다. 따라서 최소한의 투자를 위해 유용성 및 디자인 문제를 찾을 수 있으며 최종 설계 및 기술에 상당한 투자가 이루어지기 전에 UI를 조정할 수 있습니다.
특정 프로젝트의 요구 사항을 검사할 때 비용을 절감하는 것 이외의 프로토타입을 만드는 이유가 발견될 수 있습니다. 새 인터페이스 모델을 탐색하는 것이 목표인가요? 기존 디자인의 한 부분을 수정하시겠습니까? 새로운 기술을 조사하시겠습니까? 시작하기 전에, 당신이 구축하고있는 것을 구축하는 이유에 대해 명확히하는 것이 중요합니다. 명확한 목표부터 시작하여 직접적이고 효과적인 노력을 기울이는 데 도움이 됩니다. 프로토타입을 만드는 이유는 다음 세 가지 기본 범주로 분류됩니다.
개념 증명입니다.
일부 팀 중에는 프로젝트의 향후 방향에 대한 의견 차이가 있습니다. 프로토타입을 사용하여 아이디어 또는 새로운 접근 방식에 장점이나 가치가 있음을 증명할 수 있습니다. 프로토타입은 아이디어가 작동한다는 것을 설명하고, 시각적이고 대화형으로 품질을 표현하며, 팀 구성원이 다른 관점에서 문제에 대해 생각하도록 동기를 부여하는 데 도움이 될 수 있습니다.
디자인 탐색.
대화형 소프트웨어를 디자인하는 경우 어떤 소프트웨어가 어떻게 사용되는지 살펴볼 수 있는 유일한 방법은 모형을 만들고 상호 작용하는 것입니다. 경우에 따라 모형은 프로토타입의 일부를 구조화된 방식으로 평가할 수 있는 유용성 연구와 관련이 있습니다. 때로는 개발자에게 어떤 것이 작동하거나 어떻게 보이는지 명확하게 표현할 수 있는 방법일 뿐입니다. 대부분의 경우 디자이너는 어떤 접근 방식이 작동하는지 파악하기 위해 단순히 실험 중일 수 있습니다. 디자이너는 일반적으로 가장 숙련되어 있지만, 팀의 누구든지 프로토타입을 사용하여 디자인 문제를 탐색할 수 있습니다. 디자인 탐색은 제품에서 인식되는 특정 문제를 해결하기 위해 노력해야 합니다.
기술 탐색.
문제에 대한 구현 방법을 조사하는 개발자는 종종 서로 다른 코딩 기술을 사용해 보고 제대로 작동하는지 확인합니다. COM+, DHTML(동적 HTML), Microsoft Win32 또는 각 기술 내의 특정 코딩 방법을 사용하면 서로 다른 장단점이 있습니다. 경우에 따라 프로토타입은 특정 UI 기능을 지원하기 위해 어떤 기술이 잘 작동하는지에 대한 탐색을 나타냅니다.
경우에 따라 프로토타입이 이러한 이유의 조합으로 만들어집니다. 팀이 충분히 잘 계획하는 경우 개발자와 디자이너 또는 프로젝트 관리자가 프로토타입에서 함께 작업할 시간을 할당할 수 있습니다. 이러한 경우 각 팀 구성원이 예상하는 목표와 기여를 명확하게 정의하는 것이 매우 중요합니다. 모든 사람은 목표가 무엇인지, 무엇이 위태로울지, 그리고 잠재적인 결과가 무엇인지에 대해 명확히 해야 합니다.
누가 관여합니까?
프로토타이핑은 프로젝트의 배경이나 역할에 관계없이 누구나 비공식적으로 수행할 수 있습니다. Adobe Photoshop에서 비트맵을 가져와 Microsoft FrontPage 웹 사이트 만들기 및 관리 도구에 배치하고 활성 단추 또는 링크를 추가하여 간단하지만 효과적인 프로토타입을 쉽게 만들 수 있습니다. 이러한 경량 프로토타입은 그 한계가 있으며, 복잡한 상호 작용에서는 다루기 힘들어질 수 있습니다.
대규모 팀의 공식 프로토타입을 위해 개발자 또는 프로젝트 관리자는 종종 디자이너 및 유용성 엔지니어와 공동 작업합니다. 함께 아이디어를 생성하고, 최상의 아이디어를 나타내는 프로토타입을 빌드한 다음, 랩으로 이동하여 사용자 문제를 해결하는 데 얼마나 효과적인지 확인합니다. 개발자는 시간을 절약할 수 있거나 기술 전문 지식이 필요한 경우 참여할 수 있습니다. 디자이너 또는 프로젝트 관리자는 프로토타입을 빌드하기 위해 대부분의 스크립팅 또는 코딩을 수행하는 경우가 많습니다.
프로토타입은 언제 빌드해야 하나요?
프로토타입의 범위와 필요한 세부 수준에 따라 프로젝트 중에 언제든지 프로토타입을 빌드할 수 있습니다. 대부분의 경우 개발자가 프로덕션 코드를 작성하기 전에 계획 및 사양 단계 중에 프로젝트 초기에 만들어집니다. 탐색의 필요성이 가장 크고, 필요한 시간이 가장 실행 가능한 시기입니다. 프로그램 관리자나 디자이너 대신 개발자가 프로토타입을 제작하는 경우 프로토타입에 투자한 작업이 개발 일정에서 고려되도록 해야 하기 때문에 일정 예약 시간이 더욱 중요해집니다. 모든 UI 릴리스에 대한 계획에는 어느 정도의 프로토타입이 포함되어야 합니다.
프로젝트 후반부에 작은 프로토타입은 어려운 설계 및 기술 문제를 해결하는 데 도움이 될 수 있습니다. 대화 상자 또는 웹 페이지가 어떻게 동작해야 하는지에 대한 빠른 HTML 모형은 개발자의 질문에 대답하거나 다른 팀원에게 원하는 환경에 대한 느낌을 주는 데 도움이 될 수 있습니다. 경우에 따라 강력한 프로그램 관리자 또는 디자이너는 Microsoft JScript 개발 소프트웨어에서 동작을 구현하고 개발자가 고려해야 하는 프로그래밍 논리의 대략적인 부분을 구현할 수 있습니다.
프로토타입을 만드는 데 걸리는 시간은 최종 결과의 범위와 정밀도에 따라 크게 달라질 수 있습니다. 비공식 프로토타입은 한 사람이 몇 시간 동안 작업하는 것을 의미할 수 있습니다. 좀 더 조직적인 노력에는 전체 팀의 몇 주 동안의 노력이 포함될 수 있습니다.
포커스는 어디에 있어야 하나요?
프로토타입에서는 필요한 만큼의 디자인만 빌드합니다. 작동하지 않는 단추 또는 업데이트되지 않는 텍스트가 있으면 괜찮습니다. 필요한 상호 작용을 경험할 수 있는 한, 나머지 부분에는 연기와 거울을 사용하는 것이 좋습니다. 다음은 노력을 신중하게 집중해야 하는 몇 가지 이유입니다.
프로토타입 빌드 비용입니다.
프로토타입 빌드와 관련된 비용을 최소화해야 합니다. 프로토타입 생성의 과제는 디자인에 대한 질문에 효과적으로 답변하는 데 필요한 최소한의 투자를 인식하는 것입니다. 가장 많은 작업이 필요한 UI 부분을 명확하게 식별하기 때문에 유용성 연구가 중요한 곳입니다. 유용성 연구가 없더라도 프로토타입의 설계를 통해 해결 중인 사용자 문제 또는 개선 중인 작업을 명확하게 정의합니다.
제한된 수명.
프로토타입의 수명은 명확하게 정의되어야 합니다. 최종 목표는 팀 모임에서 프레젠테이션인가요? 임원 검토 회의? 사양 검토? 유용성 연구? 디자인이 사용자 문제를 해결하는지 확인하시겠습니까? 이러한 특정 목표에 대한 요구 사항이 충족되면 프로토타입을 따로 설정해야 합니다. 기본적인 사고방식은 프로토타입에서 생성된 코드 또는 비트맵이 남아 있다는 것입니다. 제품에서 코드나 시각적 요소가 계속 유지되는 경우도 있을 수 있지만, 일반적으로 이러한 경우는 드물어야 한다는 기대가 있습니다.
팀을 압도할 위험이 있습니다.
개발자와 팀원에게 프로토타입을 표시하는 것은 까다로울 수 있습니다. 지나치게 복잡하거나 정교한 프로토타입은 놀라운 시각적 개체와 애니메이션을 통해 사람들을 압도할 수 있습니다. 얼마나 멀리 가야 하며 프로토타입을 얼마나 진지하게 받아들여야 하는지를 아는 감각을 항상 갖고 있습니다.
범위란?
프로토타입 작업에 대한 포커스가 결정되므로 다음을 고려합니다.
고객의 요구 사항입니다.
사용자의 주요 문제 또는 요구 사항(유용성 엔지니어가 제공한 것)을 이해하는 것부터 UI 디자인의 어느 부분이 가장 많은 탐색을 보증하는지에 대한 아이디어를 제공합니다.
유용성 연구 작업.
유용성 연구를 위한 프로토타입을 만드는 경우 유용성 엔지니어에게 연구의 일부가 될 특정 작업을 논의하고 해당 요소를 중심으로 설계합니다.
팀 입력.
프로토타입의 아이디어가 구체화되고 있는 동안 팀의 주요 개발자들과 논의하세요. 합리적인 것, 가능한 것, 그리고 다음 릴리스에 대해 고려할 수 없는 사항에 대한 기본적인 감각을 얻습니다. 경우에 따라 핵심 요소이고 팀에 도전해야 하는 경우 디자인의 한 측면에 대해 가능하다고 말하는 것을 넘어서는 것이 좋습니다. 그러나 한계를 뛰어넘는 것과 팀을 압도하는 것 사이에는 미세한 선이 있기 때문에 프로토타입의 모든 측면에서 이 작업을 수행하지 마세요. 여러 버전에 대한 비전을 보여줌으로써 팀에 영감을 주고 싶다면, 그렇게 하십시오. 그러나 다음 릴리스에 대한 특정 변경 내용을 정의해야 하는 경우 이러한 변경 내용에 집중합니다. 모듈식 방식으로 특정 변경 사항을 호출하고 개발자에게 디자인을 빌드하기 위한 경로를 표시해야 합니다.
폭과 깊이 비교
더 큰 프로토타입의 경우 폭과 깊이를 추가로 고려해야 합니다. 디자인의 각 기능이 약간만 작동해야 하나요, 아니면 거의 모든 조각과 옵션으로 프로토타입을 만들기 위해 하나의 기능을 선택해야 하나요? 수정하기 어렵고 버리기 어려운 크고 다루기 힘든 프로토타입일 수 있으므로 두 가지 작업을 모두 수행하지 마세요.
유연한 프로토타입
프로토타입 리소스에 집중하는 한 가지 방법은 스마트 디자인에 집중하는 것입니다. 프로토타입 코드 한 조각이 다양한 아이디어를 행사할 수 있도록 하여 보다 효과적인 프로토타입을 만들 수 있습니다. 5개의 프로토타입을 사용하는 대신 프로토타입의 다른 특성을 전환할 수 있는 옵션이 있는 프로토타입 하나를 만드는 것이 좋습니다.
도구 모음이 왼쪽 또는 위쪽에 있어야 하나요? 홈페이지에 10개 항목 또는 20개 항목을 표시해야 하나요? 좋은 프로토타입에는 프로토타입의 모양이나 작동 방식의 매개 변수를 변경할 수 있는 일종의 기본 제공 옵션 패널이 있습니다. 이러한 옵션 패널을 프로토타입에 숨겨 두세요. 테스트 중에 유용성 참가자가 실수로 패널을 찾지 않도록 합니다.
과제는 프로토타입을 단순하게 유지하는 것이지만 팀 동료에게 표시될 수 있을 만큼 유용하고, 다른 옵션을 시연할 수 있으며, 피드백을 얻을 수 있습니다.
베타 및 프로토타입
베타 릴리스는 완전한 엔지니어링 작업이므로 프로토타입으로 자격이 없습니다. 베타 릴리스의 기능에서 중요한 실수가 발견되면 제품의 최선의 이익이 될 수 있더라도 삭제될 가능성은 낮습니다. 개발자, 테스터 및 디자이너는 이미 많은 시간을 투자했으며 나쁜 결정을 내려야 한다는 압박감이 매우 높습니다. 베타는 확실히 버그와 결함을 찾는 데 도움이 되지만, 특정 디자인 방향의 가치를 연구하는 데에는 거의 유용하지 않습니다.
도구 및 기술
프로토타입을 만드는 데 사용할 수 있는 여러 가지 도구와 기술이 있으며, 각 도구에는 장점과 단점이 있습니다. 프로토타입으로 제작되는 디자인 작업의 유형과 프로토타입 제작 노력의 목표를 고려한 후 적합한 도구 또는 기술을 결정합니다.
Microsoft Visual Basic 또는 C#.
Windows 스타일 UI 프로토타입을 만드는 데 가장 빠른 기술입니다. 웹 브라우저 개체를 사용하면 표준 Windows 스타일 구성 요소와 HTMLUI를 쉽게 통합할 수 있습니다. Microsoft Visual Studio를 경험한 개발자가 C/C++에서 UI를 더 빠르게 생성할 수 있는 것은 사실이지만, 이렇게 하면 프로덕션 코드의 UI 프로토타입에서 코드를 다시 사용하려고 합니다. 빠르고 더러운 UI 프로토타입의 목표가 고품질 엔지니어링과 매우 다르다는 것을 인식하는 데는 훈련이 필요합니다. 어떤 종류의 코드가 작성되고 있는지, 팀 또는 관리자가 삭제될 내용을 이해하고 있는지 확인합니다.
Microsoft Expression Blend + SketchFlow.
SketchFlow는 WPF(Windows Presentation Foundation) 및 Microsoft Silverlight 데스크톱 및 웹 애플리케이션을 위한 정교한 사용자 인터페이스를 디자인, 프로토타입 작성 및 만들기 위한 시각적 도구입니다. 애플리케이션은 도형 그리기, 단추 및 목록 상자와 같은 컨트롤 그리기, 애플리케이션의 조각이 마우스 클릭 및 기타 사용자 입력에 응답하도록 만들고, 모든 항목을 고유하게 보이게 하여 빌드됩니다.
Adobe Director 또는 Adobe Flash.
디렉터는 디자이너들 사이에서 인기 있는 UI 프로토타입 도구입니다. 멀티미디어 또는 비표준 GUI 디자인 또는 상당한 애니메이션이 필요한 프로토타입에 가장 유용합니다. 그것의 높은 유연성 때문에 Visual Basic과 비교하여 UI 디자인에서는 번거로울 수 있습니다. 그러나 능숙한 디렉터 사용자는 어려움 없이 Windows 또는 웹 UI를 생성할 수 있습니다.
HTML.
FrontPage 및 기타 HTML 편집기를 사용하면 간단한 프로토타입을 빠르게 만들 수 있습니다. 아이디어를 표현하기 위해 사용자 상호 작용 시퀀스를 보여 주는 비트맵을 만들어 FrontPage에 배치할 수 있는 경우가 많습니다. 이러한 이미지를 사용하여 디자인과 상호 작용하는 방법을 시뮬레이션할 수 있습니다. JScript 및 DHTML은 매우 정교한 논리와 상호 작용을 허용하는 다른 수준으로 작업을 수행합니다. HTML을 사용하여 웹 사이트를 프로토타입하는 경우 C/C++에 대해 설명한 경고도 여기에 적용됩니다. 프로덕션 품질 엔지니어링과 혼동되는 빠른 프로토타입 코드의 함정에 빠지지 마세요.