Windows 8 파일 이름 충돌 경험 디자인
파일 관리의 기초 개선 작업에 대해 많은 의견을 보내 주셔서 진심으로 감사드립니다. 대화 상자에 대한 의견이 압도적으로 많았는데, 많은 분들이 변경된 기능을 매우 흥미롭게 여기시고 이 주제에 대해 지대한 관심 을 보여 주셨습니다. 이런 점 때문에 Windows 8 작업이 더욱 즐거워지는 것 같습니다. 저희가 이야기한 내용 중 많은 부분에 대해 의견과 제안이 있었는데, 그 중에서도 파일 이름 충돌 대화 상자에 관해 가장 많이 논 의되었고 다각도에서 문제점이 나오면서 쉽게 결론이 나지 않았습니다. 이 시점에서 개발 중에 나왔던 디자인 아카이브를 자세히 살펴보고 저희가 고려했던 사항 몇 가지와 여기까지 도달한 과정을 보여 드리는 게 좋을 것 같습니다. 물론 나중에 다시 원래 주제로 돌아와 어떻게 변경할지 논의하겠지만, 여기서 디자인 과정을 잠시 살펴보는 것이 유용할 것 같습니다. 이 게시물은 해당 기능을 담당하는 Ben Truelove(디자이너), Matt Duignan(UX 연구원), Jon Class와 Ilana Smith(프로그램 관리자)가 작성했으며, 이들은 모두 Windows 8의 다른 부분의 작업에도 참여했습니다. - Steven
이전에 Windows 8의 새로운 복사 경험에 대한 글을 올리고 나서, 파일 이름 충돌을 해결 하는 새로운 '파일 선택' 대화 상자에 대해 많은 질문과 의견이 나왔습니다. 많은 분들이 관심을 가지는 부분이므로 이 디자인이 나오기까지 거쳐온 단계와 사용성 테스트를 공유하면 재미있을 것 같습니다.
새로운 디자인에서 파일 이름이 충돌할 때 대응하는 방식은 두 가지 수준으로 제어됩니다.
- 기본 경험은 모든 충돌을 일괄적으로 간단하게 관리하는 것으로, 마우스 단추를 한번 클릭해서 '모두 바꾸기' 또는 '모두 건너뛰기' 중 하나를 선택하는 것입니다. 이를 '간단한 충돌 해결 대화 상자'라고 합니다.
- 다른 옵션은 더 자세한 정보를 제공하고 세밀하게 제어할 수 있는 보조 경험으로, '자세한 충돌 해결 대화 상자'라고 합니다.
Windows 7 및 이전 버전
파일 이름 충돌 해결은 아주 유사한 두 가지 파일 중에 올바른 파일 하나를 선택해야 하기 때문에 좀 까다로운 작업입니다.
Windows 3.1에서는 다음과 같이 처리했습니다.
Windows 7까지 발전해 오면서 확실히 큰 변화가 있었습니다.
Windows 7에서는 선택하는 데 도움이 되는 정보가 많이 표시되고 충돌을 해결하는 옵션이 더 다양합니다. Windows 8에서 이 부분을 좀더 개선하면 사용자가 더 효율적으로 올바른 결정을 내리고 파일 전송 작업을 신속히 완료할 수 있을 것이라 생각했습니다. 앞서 말했듯이 기존 대화 상자에 대한 피드백과 고객 문의는 바로, 사용자들이 상당히 복잡한 대화 상자에서 올바른 항목을 선택하는 데 필요한 정보를 찾기가 어렵다는 것이었 습니다. 많은 작업을 진행하고 있지만, 최적화되지 않은 대상을 구체적으로 논의하기까지는 꽤 오랜 시간이 걸리곤 합니다. 수백만 명의 사람들이 시험판 Windows 7을 사용했지만 이 부분은 포럼에서 중요한 토론 주제가 아니었습니다. 참고로, 아예 논의되지 않은 것이 아니라 광범위하게 제기된 주제는 아니었다는 뜻입니다.
Windows 7 경험 개선
먼저 기본적으로 동일한 경험을 유지하면서도 사용자가 결정을 내리는 데 필요한 핵심 정보를 최적화하여 점차 개선할 수 있는 방법을 모색했습니다.
이 디자인에서는 그동안 구현되지 않았던 몇 가지 개념을 도입했습니다.
- '수정한 날짜:'와 같이 불필요한 정보 표시와 긴 설명 문구를 없애자 중요한 세부 정보를 한눈에 볼 수 있게 되었습니다.
- 메타데이터 형용사를 강조했습니다. 즉, 사용자가 파일 크기와 같은 값을 비교하도록 하는 것이 아니라 '더 큰' 등의 단어를 사용해서 올바른 요약 정보를 제공했습니다.
- 기본값을 미리 효율적으로 선택하여 사용자가 개입할 여지가 줄어들었습니다.
빠르고 유연하게: 일괄적인 충돌 관리의 개선
Windows 8에서는 사용자가 작업을 더 빠르게 효율적으로 처리할 수 있도록 터치와 마우스/키보드 측면에서 Windows 8의 모든 디자인에 있어 '빠르고 유연하게'란 단어를 핵심 모토로 삼았습니다. 다음의 주요 디자 인 단계에서는 통합된 복사 진행 과정에서 따를 수 있는 방법을 찾아보고, 해결해야 할 충돌 문제를 하나의 대화 상자에 모아 더 능률적으로 관리하는 방법을 제공하고자 했습니다.
이에 따라 '모두 바꾸기' 또는 '모두 건너뛰기' 선택 옵션을 최적화하는 개념이 소개되었습니다. 대부분의 경우에는 사용자가 복사하는 대상이 무엇이며 어떤 이유로 충돌하는지를 정확히 알고 있으므로 어떤 조치를 취 해야 할지도 간단히 선택할 수 있습니다.
더 자세한 정보나 세밀한 제어가 필요한 경우에는 정보를 '단계적'으로 자세히 표시하기로 결정했습니다.
먼저 다음과 같이 두 단계로 시작했습니다.
그런 다음 세 단계로 나누었습니다.
그리고 마지막으로 다시 한 단계로 돌아왔습니다.
이 디자인에는 여러 가지 장점이 있는데, 많은 정보가 제공된다는 것입니다. 머리글을 클릭하면 열의 모든 내용이 선택되기 때문에 충돌을 실질적으로 잘 관리할 수 있습니다. 하지만 사용자가 처음 접할 때 UI가 너무 복잡하게 표시된다는 단점이 있습니다.
대신, 두 가지 방법의 장점을 모아 다음과 같이 만들었습니다.
간단한 충돌 해결 및 자세한 충돌 해결
확실히 이 디자인은 사용자가 선호하는 방식에 따라 단순하게 표시되는 장점과 강력한 기능이 조화를 이루어 결합된 것입니다.
하지만 이 디자인에서 해결해야 할 문제가 발견되었습니다. [직접 선택](Let me pick)을 선택하면 단순한 옵션과 고급 옵션이 둘 다 제공되어 결과적으로 너무 복잡하고 혼란스럽다는 것입니다. 이에 따라 '간단한 충돌 해결 대화 상자'와 '자세한 충돌 해결 대화 상자'를 따로 표시하는 경험을 디자인하게 되었습니다.
이 결정에 따라 기본 구조가 마련되었습니다.
개선
사용자가 참여하는 테스트를 준비하면서 저희는 디자인 작업을 반복했습니다.
- 단일 축소판으로 인해 헷갈리는 문제를 해소했습니다.
- 원본과 대상을 명확히 표시하고 열을 확실히 구분했습니다.
- 제품, 도움말, 웹에 사용되는 설명문 작성 전문가들로 구성된 사용자 지원 팀에서 이 대화 상자의 설명문을 이해하기 쉽게 다듬어 주었습니다.
재미있는 사실은 단일 파일 충돌을 처리하는 데 있어 최초 디자인 중 일부와 '간단한 충돌 해결 대화 상자'가 비슷하다는 것입니다. 또한 둘 다 대화 상자의 최종 디자인과 유사하다는 점도 흥미로웠습니다.
첫 번째 사용성 연구
연구원들은 사용성 테스트를 위해 Microsoft에 근무하지 않는 사람 중 기술 수준과 경험이 각기 다른 대상 집단을 다양하게 모집한 후, 소프트웨어를 보여 주고 일련의 작업을 완료하도록 요청했습니다. 이 과정에서 사용자가 작업을 처리할 때 어떤 방식으로 생각하는지 직접 설명을 듣고, 시표추적을 통해 사용자가 UI를 어떻게 보는지 관찰하고, 작업 완료의 성공 여부를 측정함으로써 디자인에 적합한 요소와 그렇지 않은 요소를 효율 적으로 파악할 수 있었습니다.
사용성 테스트를 진행할 경우에는 이 도구의 특성을 이해하는 것이 매우 중요합니다. 관찰자의 편견과 테스트 구성 방식으로 인해 종종 본질적으로 결함이 있는 솔루션을 최적화하려고 노력하거나 안전하지 않은 것을 안 전하다고 느낄 수도 있습니다. 따라서 이 도구를 사용해 본 사람이라면 누구나 이 분야의 전문가일 뿐 아니라 테스트 디자인 분야에서도 전문가여야 한다는 것을 알고 있습니다. 이 점을 감안하여 테스트에서 도출된 결과가 테스트의 측정 의도와 일치할 수 있도록 테스트 대상과 범위의 한계를 이해하는 객관적 연구원들이 테스트를 디자인했습니다. 결국, 디자인을 선택할 때에는 질적, 양적 측면뿐 아니라 경험과 직관적 측면에서 각기 다른 다 양한 요소를 사용해야 합니다.
첫 번째 사용성 테스트에서 많은 것을 습득하고 변경했으므로, RITE 방법을 계획안으로 사용했습니다. 대부분의 사용성 연구에서는 모든 사용자를 대상으로 동일한 UI를 테스트하지만, RITE에서는 이전 테스트에서 파악한 내용을 바탕으로 참가자 간에 지속적으로 변경된 내용을 적용합 니다. 참고로, 여기에서는 PowerPoint 슬라이드로 테스트했기 때문에 변경하는 데 부담이 적었습니다.
간단한 충돌 해결 대화 상자는 테스트가 순조로웠기 때문에 많이 변경할 필요가 없었지만 자세한 충돌 해결 대화 상자에서는 각기 다른 여러 가지 항목을 테스트했습니다.
테스트 결과 발견한 핵심 내용:
- 확인란이 필요합니다. 확인란 없이 최대한 깔끔한 상태를 유지하려 했지만 이 경우 테스트가 순조롭지 않았습니다. 확인란이 없는 UI를 보여주면 사용자들은 어쩔 줄 몰라 난감했습니다. 적절히 선택할 수 있는 방 법을 제공하려면 확인란을 사용하는 것이 훨씬 더 효과적이었으므로 사용자들이 확인란, 축소판 또는 글자들을 클릭해서 파일을 선택할 수 있도록 클릭 대상 영역을 크게 유지했습니다.
[![그림 13 - 클릭 대상](https://msdntnarchive.z22.web.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/29/43/metablogapi/6675.Figure-13---Hit-target_thumb_36DF4338.png "그림 13 -
파일 선택을 위한 클릭 대상
- '최신'이나 '더 큰'과 같은 형용사와 메타데이터를 함께 사용하니 좀 혼란스러웠고, 사용자들은 두 가지를 다른 개념으로 해석했습니다. 형용사에 특히 문제가 많았는데, 사람들은 형용사를 제목으로 생각하거나 파 일 위치를 나타내는 것으로 여겼습니다. 예를 들어 '더 오래된(Older)'은 복사할 파일 앞에 위치하기 때문에 Older 폴더에 있는 파일들을 의미하는 것처럼 해석되었습니다.
- 열을 더 확실히 구분해야 했습니다. 얼핏 보면 표가 아니라 탐색기에서 바둑판 보기처럼 표시되기 때문입니다.
추가 개선
형용사와 열 문제에 대해 간단한 해결책이 없었기 때문에 더 다양한 방법으로 디자인하게 되었습니다.
원본/대상과 충돌 행의 중요성을 고려해서 어떻게 계층을 정의해야 최상의 디자인이 나올지에 대해 실로 많은 고민을 했습니다. 세로 선을 사용해 보았더니 원본과 대상이 너무 심하게 구별되어서 결국 가로 선으로 결정 하고 파일 이름을 머리글로 사용하자, 충돌 내용이 가장 뚜렷하게 구분되었습니다. 확인란은 이런 구분을 방해하지 않으면서 원본과 대상 간에 선택 항목을 구별하는 데 도움이 되었습니다.
이 시점의 디자인 과정에서는 초기 아이디어 중 몇 가지를 과감히 버렸습니다.
- 기본 선택 항목을 없앴습니다. 충돌 사항이 여러 페이지에 스크롤되므로 기본값이 있으면 데이터가 손실될 위험이 너무 크기 때문입니다. 행에 선택된 항목이 없으면 해당 파일의 복사가 생략되므로 손실되는 내용도 없습니다.
- 형용사를 제외했습니다. '최신', '더 큰'을 사용하려 했지만 혼란이 가중되었고 사용자들은 구체적인 데이터가 더 유용하다고 생각했습니다.
대신, 사용자의 선택을 돕기 위해 UI에서 더 큰 최신 메타데이터 값을 굵게 표시하는 제안 방식을 선택했습니다. 이 방법은 새로운 개념을 도입하지 않고도 깔끔한 모양을 유지하면서 상당히 효과적이었습니다.
추가 사용성 연구
다음 사용성 테스트에서는 최종 디자인으로 향해 가면서 소수의 대안을 테스트했습니다.
세 번째 옵션이 가장 탁월한 선택이었습니다. 이 옵션은 두 열로 구성된 보기에서 공간을 가장 효율적으로 활용하고 확인란을 질문 가까이로 이동할 수 있습니다. 날짜와 시간은 기본적으로 단일 값이므로 한 줄에 표시 되어야 합니다.
자세한 충돌 해결 대화 상자는 파일을 결정하는 데 추가 정보가 필요한 경우에 다음과 같은 기능도 제공합니다.
- 축소판을 두 번 클릭하면 파일이 열립니다.
- 축소판을 마우스 오른쪽 버튼으로 클릭하면 상황에 맞는 표준 메뉴가 열립니다.
- 원본 및 대상 위치를 가리키는 파란색 글자들을 클릭할 수 있으며, 클릭할 경우 탐색기에서 해당 위치가 열립니다.
- 축소판 또는 링크를 마우스로 가리키면 도구 설명과 전체 파일 경로가 표시됩니다.
계속 반복되는 디자인 작업
최초 연구 이후 지속적으로 추가 연구를 수행하고 조금씩 변경해 나가되, 핵심 디자인은 기본적으로 그대로 유지했습니다. 사용자가 사용성 테스트 작업을 얼마나 쉽게 완료하는지 보면서 많은 힘을 얻게 되었습니다. 파 일 이름 충돌 해결은 까다로운 문제였지만 사용자들은 효율적으로 잘 해결했습니다.
[![그림 16 - 최종 디자인](https://msdntnarchive.z22.web.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/29/43/metablogapi/3566.Figure-16---Final-hero-shot_thumb_0A266392.png "그림
이 디자인이 실제로 어떻게 구현되었는지 보려면 파일 관리 기초에 대한 이전 게시물에서 동 영상을 확인하십시오.
저희는 여러분이 보내 주신 소중한 피드백을 바탕으로 최고의 디자인을 만들고자 모든 댓글을 항상 꼼꼼히 읽고 있습니다. 여러분의 의견이 실제로 반영되기를 기대합니다.
- Ben Truelove, Matt Duignan, Jon Class, Ilana Smith
저희 팀원들이 이전 게시물에서 제기된 질문에 대해 답변을 올렸으니 참고하시기 바랍니다. (Alex, Matt, Jordi, Jon)