복잡한 폼 디자인
데이터 입력의 형태를 제시하는 13가지 방법
(출처 : [Form Design for Complex Applications]의 기사를 번역 및 가공한 컨텐츠 입니다.)
복잡한 ERP 시스템에서부터 Facebook에 이르기까지 애플리케이션은 수많은 Input이 들어간 폼을 제공합니다.
폼은 다양한 형태로 구성되어 있으며 유저가 데이터를 제출하기 위한 관문입니다.
이 기사에서는 각 정보의 성격에 따라 폼을 디자인하는 13가지 방법을 설명하고 데이터 입력의 미래를 예측해봅니다.
1. 모달(Modal)
단순 모달은 복잡도가 낮고 입력이 제한적인 폼에 적합합니다.
모달은 일반적으로 구현하기 쉽고 사용자 경험이 간단합니다.
그러나 추가 모달 또는 팝오버 등의 복잡한 인터렉션을 넣는다면 사용자 오류가 발생할 수 있습니다.
또한, 모달은 사용자가 닫을 때까지 사용자가 앱이나 웹의 다른 부분과 상호 작용하는 것을 방지하기 때문에 그에 따른 장단점이 발생할 수 있습니다.
입력항목이 긴 폼에는 모달 대신 별도의 페이지를 사용하고 컨텍스트 내에서 입력이 이뤄져야 하는 항목에 대해서는 인라인 편집을 고려하는 것이 좋습니다.
2. 다중모달(Multi-modal)
다중 모달 형식은 드래그 가능한 창으로 표시되므로 사용자가 한 번에 폼의 여러항목들과 상호 작용할 수 있습니다.
유저는 페이지 주위에 모달을 끌어서 그 아래에 있는 정보를 볼 수 있습니다.
다중 모달 형식은 새 창을 띄우는 대신 유저에게 여러 개의 항목을 동시에 볼 수 있게 해주고 동시에 많은 정보를 처리할 수 있게 해줍니다.
이러한 폼의 양식은 초급 사용자에게는 사용법이 익숙하지 않아 정보가 손실될 우려가 있고 잘못된 동작을 저지를 수 있으므로 문제가 될 수 있습니다.
3. 슬라이드 아웃(Slideout)
슬라이드 아웃 폼은 메인페이지 위로 일부가 미끄러지면서 나타나거나 메인페이지를 수용하기 위해 내용을 밀어 올려서 나타납니다.
모달과 마찬가지로 슬라이드아웃은 메인페이지에서 정보를 참조하면서 컨텍스트를 파악할 수 있습니다.
슬라이드 아웃은 창 높이를 길게 차지하므로 일반적으로 긴 폼으로 사용됩니다.
4. 팝오버(Popover)
팝오버 폼은 빠른 편집 항목에 적합합니다.
팝오버는 관련 데이터에 컨텍스트로 표시될 수 있으므로 사용자가 앱 또는 웹에서 자신의 자리를 잃지 않습니다.
5. 인라인(Inline)
인라인 폼을 사용하면 다른 창으로 리디렉션하지 않고도 데이터가 표시된 위치에서 직접 입력하고 편집할 수 있습니다.
인라인 폼에는 편집 및 읽기 모드로 전환을 시킬수도 있고, 사용자가 개별 필드와 인터렉션할 때 입력을 편집하고 자동 저장할 수도 있습니다.
6. 편집 가능한 표(Editable Table)
인라인 폼과 마찬가지로 편집 가능한 표를 통해 사용자는 데이터가 있던 위치에서 직접 데이터를 조작할 수 있습니다. 스프레드시트 또는 청구서 라인 항목의 경우와 같이 표 형식 데이터 입력에 유용합니다.
7. 테이크 오버 모달(Takeover)
테이크 오버모달은 복잡한 폼이면서 이전 보기로 빠르게 돌아갈 수 있는 기능을 제공합니다. 차후에 따라오는 뷰를 볼 필요 없는 수준의 데이터를 입력하는 데 적합합니다.
8. 마법사(Wizard)
마법사를 사용하면 단계별 정보를 단계적으로 채울 수 있습니다. 마법사는 사용자가 완료 후에 다시 참여하지 않는 복잡한 폼에 적합합니다.
사용자에게 익숙하지 않은 프로세스를 거쳐야 할 때만 마법사를 사용하는 것이 권장되며 일반적으로 사용자 경험이 좋지 않습니다.
사용 빈도가 높은 폼에 대해서는 거의 사용되지 않는 편입니다.
9. 구분된 폼(Sectioned Form)
섹션화 된 폼은 복잡한 정보를 입력하는 데 적합합니다.
사용자는 마법사와 같은 여러 페이지로 나눠진 폼 대신 전체 폼의 컨텍스트를 살피며 입력 필드를 사용하는 것이 좋습니다.
쭉 내려오면서 한 방향으로 입력하게 하는 것보다 폼 전체에 자유롭게 정보를 입력할 수 있게 한다면 정보입력의 유연성이 향상됩니다
10. 드래그 앤 드롭(Drag & Drop)
일반적인 형태는 아니지만 드래그 앤 드롭 편집기를 통해 사용자는 미리 정의 된 입력을 선택하여 위지윅 뷰(11번 참조)처럼 사용할 수 있습니다. 물리적 세계를 모방한 인터렉션은 입력에 재미를 더합니다.
11. 위지윅(WYSIWYG)
Microsoft Word와 같은 텍스트 편집기, MailChimp와 같은 전자 메일 작성, SquareSpace와 같은 웹 사이트 게시 서비스들은 WYSIWYG 편집기를 사용하여 HTML, CSS 및 JS에 대한 지식 없이도 풍부한 콘텐츠를 만들 수 있습니다.
12. 공란 채우기(Fill in the blanks)
미적 측면을 많이 살렸거나, 재미있는 인터렉션의 방법은 사용자 경험이 좋지 않다는 인식이 종종 있어서 복잡한 폼에 대한 모범 사례에서 쉽게 무시될 수 있습니다.
문장이나 단락에 있는 빈 양식을 입력하여 사용자가 데이터로 문장을 완성할 수 있게 한다면 더 재밌는 입력폼이 될 것입니다.
13. 대화형 사용자 인터페이스(CUI)및 미래
대화 형 사용자 인터페이스(CUI)는 일반적으로 자유 형식의 음성 또는 텍스트 입력에 응답하는 "봇"으로 구성됩니다.
CUI는 유저의 요청에 대응하기 위해 응답하거나 폼컨트롤을 제공하며, 머신러닝(기계학습)은 맞춤형 응답 및 유저의 입력을 보다 잘 이해하기 위해 사용되었습니다.
하지만 대화식 사용자 인터페이스에는 아직 과장된 점도 많이 있습니다.
많은 디자이너들은 CUI가 웹 폼의 미래라고 생각하며, 근래에 우리가 보았던 WeChat의 성공은 CUI의 충성도에 대해 그럴듯한 신뢰를 제공했습니다.
그러나 Yunnuo Cheng과 Jakob Nielsen이 지적했듯이, WeChat의 장점은 대화식 사용자 인터페이스 대신 친숙하고 편리한 그래픽 사용자 인터페이스에서 비롯됩니다.
CUI는 처음에 눈에 잘 띄지 않고, 독단적으로 작업을 완료해 버리는 등 많은 유저빌리티 문제로 고통받고 있습니다. CUI는 폼 디자인의 미래가 아니지만 많은 채팅 앱에게 입력을 수집하는 방식에 대한 틈새시장으로 자리 잡고 있습니다.
풍부한 그래픽 인터페이스와 CUI를 혼합한 디자인은 기대할 만 합니다.
미니 임베디드 애플리케이션은 사용자 입력을 기반으로 더 나은 서비스가 제공될 수 있으며, 이는 채팅서비스와 별개로 대형 애플리케이션으로 발전할 수 있습니다.
이 외에도 CUI는 사용자가 애플리케이션에서 길을 잃었을 때도 사용할 수 있습니다.
(더 많은 통찰력을 얻으려면 Tomaž Štolfa의 CUI의 미래에 관한 기사보기)
결론
데이터 입력이 표준화되고 OCR 기능이 향상되고 소프트웨어가 수동 프로세스를 자동화함에 따라 많은 폼이 쓸모 없게 되며, 더 나은 사용자 인터페이스가 항상 필요합니다.
이러한 다양한 형식의 폼에 대한 방식이 더 나은 프로덕트를 구축하는 데 도움이 되기를 바랍니다.
