12.마법사 정의와 디자인 권장사항들
[2.폼앤위자드]
https://www.nngroup.com/articles/design-pattern-guidelines/#Input%20Controls
데이터를 입력하는 것에 대해서는 두가지 가장 보편적인 패턴이 웹과 어플리케이션에 있는데 바로 폼과 마법사이다. 전자적인 폼은 종이입력으로 부터 탄생한 양식이기에 한 페이지는 필드가 비어있고 그 비어있는 필드를 사용자가 채워야만 한다. 마법사는 순차적으로 입력해야하는 양식을 위한 기능을 제공한다.
정의 : 마법사는 순서대로 진행해야하며 사용자는 정보를 입력할때 예정된 순서대로 입력하고 앞에 적어진 정보에 따라 다음 순서가 나타난다.
마법사는 주로 여러개의 페이지로 연결되어 있고 자주 모달 윈도우뷰안에서 보여진다. 한개의 위자드 페이지는 전형적으로 여러개의 단계 진행 중 한개의 단계안에서 상호작용을 한다.
사용자는 정보를 입력함으로서 시스템은 사용자를 위해 적절한 경로로 동작하고 사용자를 알맞은 경로로 안내한다. 마법사는 자주 뒷단에 분기되는 로직을 갖고 있지만 인지된 사용자 경험은 직선형의 흐름으로 앞으로 나아간다. 하나의 스크린은 다음으로 넘어가게되고 모든 사용자는 '다음'버튼을 눌러야만 한다. 또는 '뒤로' '취소'를 선택 할 수 있지만 주된 목적은 사용자를 앞단계로 계속 나아가도록 하는데 있다.
사용자 인터페이스 디자인에서 잘 알고 있는 딜레마로 컨트롤 주체를 사용자에게 해야하는지 컴퓨터에게 해야하는지가 있다. 주로 사람들은 그들이 컨트롤 할 수 있을때 더 좋다고 생각하지만 너무 많은 자유를 주게 되면 사용자는 문제에 빠질 수도 있고 시간을 낭비하는 문제가 자주 발생할 수 있다. 마법사는 컴퓨터가 사용자를 안내 문구의 흐름대로 컨트롤 하도록 허용하는 것이다. 사용자의 자유를 제한 하는 마법사가 제한하는 것 할 수 있는 이유는 사람들이 그의 선택이나 결정을 하기 위해 충분히 모르는 케이스 또는 그들의 선택에 별 관심이 없는 경우 일 때이다.
다이나믹 폼 또는 마법사?
AJAX (Asynchronous JavaScript and XML)기술의 유행과 함께 폼과 마법사 둘을 구분하는 기준이 희미져왔다. 예를 들어서 아래의 피델리티 서비스 페이지를 보면 사용자가 현재 피델리티 고객인지 고객이라면 로그인을 하는 필드가 보이고 고객이 아니라면 가입을 하는 필드가 나타나게 되는 사용자의 답변에 따라 다르게 나타난다. 이런 디자인의 경우 폼인가? 마법사인가? 우리의 정의를 따르자면 이것은 마법사이다.
마이크로소프트 페이지 디자인 아래의 내용을 보면 정보가 사용자가 값을 입력할때 스크린에 표시되는 정보가 변하게 된다. 그러나 이 예시의 경우 필드는 그대로 유지되고 즉시 검증되서 나타나는 에러 메세지 또는 설명이 사용자의 진행상테 따라 설명이 나타난다. 정확하게는 이 페이지는 폼이고 위자드가 아니다. 진행 단계들은 사용자의 입력에 따라 변하지 않는다. 비록 이 폼이 다이나믹한 피드백을 사용자에게 전달하고 있고 각각의 필드를 채울때마다 피드백을 보여주지만 이것은 위자드가 아니라 폼이다.
마법사는 페이지에서 정보들 덜 보여준다.
위자드는 복잡한 진행 단계를 여러 스탭으로 쪼개서 보여주기 때문에 위자드 페이지는 적은 양의 필드를 포함하고 전체적으로 적은 정보가 보여지기 때문에 좀 더 단순하다. 페이지의 심플함은 아래의 중요한 장점들이 있다.
- 사용자는 프로세스를 따르면서 버겁다는 생각을 덜하게 된다. 긴 폼은 자주 버겁게 느껴지고 사용자는 실제로 채워야하는 양의 필드보다 더 많다고 부담을 느낀다.
- 프로세스를 채우는데 있어서 인지 부하가 적게 소비된다. 폼에 있는 많은 정보들을 채우고 나면 관련없는 정보들도 있을 수 있는데 사람들은 주의깊게 내용을 스캔하고 다 채우고 나서야 알아챌수있다. 위자드를 사용하면 입력해야하는 필드는 사용자의 앞선 답변에 따라 다음 입력해야하는 사항이 나타나기 때문에 주의를 산만하게 하는 것이아니라 답변에 따라 나타나는 입력 필드들은 더 중요하게 보이는 기회를 갖게된다.
- 사용자는 실수를 덜하게 된다. 전체적으로 복잡한 폼을 작성할때 사용자는 어떤 부분은 작성을 놓칠 수도 있는데 이는 제출하는데 에러를 발생시킬수있다.
- 복잡한 단계를 심플한 개별 스탭으로 쪼갤때 개별 페이지를 갖게 되므로 각 스탭별로 화면이 필요하게된다. 더 많은 화면이 각 화면별로 만들어져야 하기 때문이다. 각 스탭의 UI들은 큼직하게 만들고 덜 복잡하게 만들어야하며 정보는 한개의 페이지에 맞게 들어가야하고 되도록 스크롤이 되지 않도록 한다. 설명이 필요한 입력필드에는 입력필드 바로 옆에 놓이도록 한다
각 사용자별 가장 빠르게 작성 할 수 있는 경로 안내
어떤 사용자의 경우 프로세스를 가장 빠르고 간단하게 입력을 완료 할 수 있을 것이다. 반면 다른 사용자들은 지루하고 복잡한 단계를 지나야할 수 있다. 만약 그 과정이 사용자 인풋값에 따라 갈래가 나누어진다면 사용자가 선택하지 않은 갈래에 대해서는 신경쓸 필요가 없어진다. 잘 디자인된 마법사는 사용자들이 자신의 상황과 관련있는 정보만 볼 수 있도록 디자인 되어있다.
예를 들어서 신용카드를 보유하지 않은 사용자들은 신용카드 필드를 결제 입력 폼에서 볼 필요가 없다. 사용자들은 자신이 결제할 방식에 관련된 입력필드만 보면 된다.
마법사의 단점
마법사가 도움이 될 수 있는 경우가 모든 상황에 적용되는 것은 아니다. 아래는 주로 마법사에서 주로 발생하는 문제이다.
예를 들어 데이터 입력을 스프레스시트에서 진행할때와 다양한 행의 입력해야하는 데이터를 마법사를 통해서 하는 방식을 비교해보자. 마우스와 키보드 사용을 반복해서 바꾸어야하고 주의를 더 집중해서 디스플레이를 조정해야하는데 이렇게 작업하는 것은 엑셀시트에서 탭을 누르며 값을 타이핑하는 것보다 귀찮은 작업이다
- 마법사는 다른 인풋패턴보다 높은 상호작용 비용이 요구된다. 특별히 마법사가 반복적으로 호출되어야 한다면 각 단계를 계속 클릭해야하는 번거로움이 생긴다.
- 마법사는 사용자가 다른 스탭과 비교하거나 다른 스탭으로 옮기는것을 쉽게 허용하지 않는다. 사용자가 한번에 한가지 스탭만 볼수 있어서 사용자가 다른 스탭을 넘나들거나 지난 단계를 넘나들며 입력한 정보를 확인하기 힘들다.
- 마법사는 중간에 끊고 다시하거나 작성했던 것을 이어서하는 것들에 적합하지 않다. 만약 사용자가 중간까지 진행한 상태라면 작성했던 내용을 저장해두고 싶을 것이다. 그러나 중간에 이탈하게되면 처음부터 다시 시작해야할 것이다. 심지어 마법사가 저장하는 것을 허용하고 나중에 다시 할 수 있도록 지원하더라도 사용자가 이전에 무엇을 작성했었는지 기억해내거나 그 맥락을 다시 인지하는 것을 어렵다. 그렇다고 폼작성이 이러면에서 더 자유도가 높은 것도 아니다. 대부분 중간정도 작성하고 이탈하면 내용은 날라거나 중간 저장을 했었더라고 사용자는 앞서 적은 내용들을 왜 그렇게 적었었는지 다시 기억해야하는 시간이 소요된다.
- 마법사 작업을 완료하지 않으면 앱의 다른 부분들을 사용 못하게 되는 경우들이 있다. 마법사는 모달 윈도우 창에서 보여지기 때문에 현재 프로세스와 관련이 있을 수 있는 정보가 배경에 있지만 모달 위자드 윈도우 창때문에 가려져 배경에 있는 정보는 잘 인식할 수 없게된다. 그래서 대부분 사용자가 모달뷰 밑에 있는 사이트의 다른 부분과는 상호작용을 할 수 없다
- 마법사는 사용자가 제어할 수 있는 부분과 창의성을 제약한다. 마법사는 아마추어 사진작가들이 사진의 컬러 밸런스를 향상시키는 것으로 적용 될 수 있으며 이런 마법사는 프로페셔널 그래픽 디자이너들이 이미지 개선작업을 하는데 있어서 너무 제한적인 기능이 되어 적합하지 않다.
사용할만한 마법사를 디자인하는 참고사항들
1.마법사를 초기 또는 미숙하 사용자들 또는 자주 사용하는 작업이 아닌 경우 적용한다.
예를 들어 세팅화면 같은 경우
마법사는 사용자가 갖고 있는 얕은 지식으로 진행 단계를 단순화하여 작업을 진행 할 수 있도록 안내한다. 그러나 우리가 위에서 봤듯이 마법사는 쉽게 귀찮은 단계가 많은 것이되기고 하고 사용자가 반복해서 작업해야하거나 이미 많은 지식을 갖고 있다면 그들에게는 지나친 개입이 되어 오히려 방해요소가 된다.
기본적으로 마법사를 사용자들이 익숙하지 않은 부분을 진행할때 사용하는데 그 이유는 그들이 해당 화면 기능들에 많은 전문성을 갖고 있지 거나 그들은 가끔 해당 화면을 사용하기 때문이다. 만약 당신이 당신의 몇 유저들이 자주 이렇게 마법사를 사용한다면 다른 방법으로 빠르게 데이터를 입력할 수 있는 방법은 고려해야한다.
2.프로세스에 대해 분명하게 인지할 수 있도록 의사소통해라. 어떤 단계까지 도달했는지와 현재 어떤 단계의 작업을 하고 있는지 리스트를 보여줄수있다.
작업하는 내용이 한개의 스탭씩 보이기 때문에 사용자가 전체 맥락을 까먹을 수도 있는 위험이 있고 헷갈릴수도 있고 얼마나 단계가 남았는지 모를 수도 있다. 이것은 얼마나 작업을 완료하기 위한 스탭이 남아있고 얼만큼 진행하면 완료되는지 예상할 수 있도록 제공해야한다.
특별히 복잡한 단계를 진행해야할때는 명확한 라벨을 각 단계에 추가해야할 뿐 아니라 명확한 상태표시자를 통해 사용자가 진행하고 있는 방향을 유지시켜줘야 한다.
3.단계의 명확한 순차적 순서를 적용합니다. 사용자가 단계를 순차적으로 완수하기 전에 다른 단계를 선택 할 수 있도록 허용하지 말아라.
논리적으로 사용자가 프로세스의 마지막 단계부터 시작하는 경우에는 차이가 없을 수도 있지만 명확한 순서를 지정하면 단계안에서 의사경정하는 부분이 최소화 되고 (완료된 단계가 명확하게 표시되지 않고 사용자가 이미 방문한 단계를 기억해야 하는 경우에는 기억해야하는 부담도 최소화됨) 따라서 상호 작용이 단순화 된다.
만약 사용자가 임의의 순서로 단계를 완료하게해주고 이에 상당한 이점이 있는 경우에는 이 기능을 마법사로 제공하는 것이 적합하지 않다.
4. 다음과 이전 단계 버튼을 두어 이동 할 수 있도록 하고 각 단계는 어떤 단계인지 기술해두어라. 일반적인 버튼 명칭 가이드 라인과 동일하게 마법사 가이드라인도 '다음' '이전'을 적용한다.
위에 보이는 MINIUSA 예제대로 다음스탭으로 넘어가는 버튼은 분명하게 다음으로 넘어가도록 되어있는데 뒤로 돌아가는 버튼은 분명하게 표시되어있지 않다. 사용자는 상단의 탭을 눌러가며 선택을 해야하는 번거로움이 있다.
5. 사용자가 마법사를 중간에 나가거나 현재 상태를 저장 할 수 있도록 허용해라. 다시 들어 왔을때 이어서 작업을 할 수 있도록 허용해라.
방해요소가 발생하면 사용자는 그들이 작성한 내용을 저장 할 수 있고 나중에 그들이 떠난 지점으로 부터 내용을 이어서 작성 할 수 있어야한다. 사용자들은 자신들이 뭘 작성해서 해당 지점까지 이르게 되었는지 맥락을 떠올려야하고 뭘할려고 했지는 기억을 되살려야하지만 똑같은 내용을 두번 적을 필요는 없어진다.
예를 들어서 위의 예시 중에 민트 같은 경우에는 너무 간단한 정보라 굳이 저장을 해줘야하나 싶을 수 있지만 Veeam같은 경우를 보면 충분히 복잡한 내용을 이미 입력한 상태에서는 저장을 해주고 나중에 다시 이어서 할 수 있도록 하는 것이 중요하다.
Mini 마법사의 경우 리뷰와 저장 버튼을 제공하는데 이는 사용자가 그들의 작업 내용은 언제든지 중단 할 수 있고 파일안에 저장 할수 잇어서 나중에 다시 할 수 있도록 허용하는 것이다. 안타깝게도 페이지 상단에 놓이는 이러한 버튼은 사용자가 현재 집중하고 있는 작업 화면의 중심에서 벗어나 있어서 있는지 없는지 모를 수 있다.
6.마법사 단계는 그 자체 내용으로 충분해야한다. 그러기 위해서는 다른 단계의 정보를 필요로 하면 안된다. 분명하게 사용자가 쉽게 정보를 접근해서 마법사 현재 단계의 내용을 작성 할 수 있도록 디자인 해야한다. MINT의 케이스를 보면 사용자의 신용점수를 어딘가에서 조회해서 입력해야하는데 이런 경우 가이드라인을 위반했다고 볼 수 있다.
7.마법사 안에서 포함하지 못하는 도움말 또는 설명들은 다른 윈도우 창에서 확인할 수 있도록 해라. 모든 필드에 관련된 정보나 상세 설명을 마법사 안에서 한눈에 보이도록 디자인 할 수는 없기 때문에 설명이 필요한 경우에는 추가적인 설명 윈도우를 적용해서 필요할때마다 열어볼 수 있도록 지원한다.
8.사용자가 이전에 선택하거나 이미 작성했던 내용들에 대한 값들 또는 디폴트로 제공 할 수 있는 정보들은 다음단계 마법사에 미리 적용해두는 것도 고려해라. 많은 작업을 해야하는 경우 시스템이 사용자가 선택해던 내용이나 인풋 값들을 이전 마법사에서 알고 잇다면 사용자는 이런 내용을 재작성 하지 않아도 되는 이점을 갖을 수 있다.
사용자가 마법사를 처음 사용할때 디자이너는 적절한 기본값이 선택되어있도록 디자인해야하며 이런한 표준값이 항상 기본값으로 되어야하는 응용 프로그램들도 있다.
결론
마법사는 복잡하지만 자주 사용되지 않은 단계를 진행하게 될때 초보 사용자들에게 강력한 디자인 패턴이다. 한번에 적은 정보만 보여줌으로 사용자들은 컨텐츠에 보다 집중 할 수 있고 각 단계마다 에러 발생률을 줄일 수 있다. 마법사가 사용자가 입력한 값에 따라 분기 처리가 된다면 마법사는 분명히 사용자들이 그들의 케이스에만 해당하는 스탭만 보여줘야한다. 몇몇 마법사의 단점은 프로세스 단계가 사용자에게 명확하게 전달하고 사용자가 스스로 주어진 정보로 작업을 진행 할 수 있도록 한다면 사려깊에 디자인 함으로 단점들을 극복할 수 있다.
*저는 전문번역가가 아니기 때문에 정확한 내용은 원문을 통해 확인하시기바랍니다.*
https://www.nngroup.com/articles/wizards/
