덜 돌아다니고 WhatsApp에서 원하는 미디어 파일에 더 빨리 도달하세요.

Nov 28 2022

"연락처 정보"에서 WhatsApp 미디어 파일 검색의 사용자 경험을 개선하여 특정 미디어 파일을 검색하는 전체 세션 길이를 줄여 사용자의 효율성, 더 많은 제어 및 자유를 높입니다. 저는 최근에 이 사례 연구를 만들게 된 디자인 챌린지에 참여했습니다.

"연락처 정보"에서 WhatsApp 미디어 파일 검색의 사용자 경험을 개선하여 특정 미디어 파일을 검색하는 전체 세션 길이를 줄여 사용자의 효율성, 더 많은 제어 및 자유를 높입니다.

저는 최근에 이 사례 연구를 만들게 된 디자인 챌린지에 참여했습니다. 따라서 제 사례 연구를 시작하기 전에 약간의 맥락을 살펴보겠습니다 ⬇️

UX 디자인 챌린지로 시작한 계기

그래서 제 여정은 Anudeep의 2주 UX Kickstarter 워크숍에 참석하여 시작되었습니다. 여기서 저는 UX 디자인 원칙, 휴리스틱, Figma에서 UI 구축, 애니메이션 프로토타이핑 및 UX 디자인의 비즈니스 영향에 대해 배웠습니다.

내가 배운 모든 것은 교과서가 아닌 방식이었습니다. 호기심이 불러일으키는 상식의 마법의 묘약으로 저는 호기심 많은 마음가짐으로 물리적이든 디지털이든 일상적인 제품을 보기 시작했습니다. 제 3의 눈, 즉 "디자이너의 눈"이 열렸습니다.

이 호기심 많은 마음가짐으로 우리는 UX 디자인 과제에 대한 브리핑을 받은 Anudeep과의 세션에 들어갔습니다. 처음으로 디자인 챌린지에 참가한 나는 매우 흥분되었고 동시에 약간 긴장했습니다. 챌린지를 완료하는 데 이틀이 걸렸지만 엄격한 시간 제한 내에 완료하는 짜릿함은 제약을 염두에 두고 디자인하는 방법을 배우는 훌륭한 학습 경험이라고 생각합니다.

➡️ 미디어, 링크 및 문서 옵션이 포함된 연락처 정보 화면의 일부인 WhatsApp의 미디어 파일 검색 환경에 대한 최종 재설계

다음은 원래 화면과 재설계된 화면을 비교한 것입니다. 사례 연구의 뒷부분에서 해결책에 도달한 방법을 안내해 드리겠습니다.

Fig 1.1 원본 화면

Fig 1.2 재설계된 화면(사용성 테스트 전)

Fig 1.3 재설계된 화면(사용성 테스트 후)

솔루션과 솔루션이 사용자에게 어떻게 도움이 되는지 이야기해 봅시다

최종 솔루션에서는

사진, 비디오, 오디오, GIF 및 스티커와 같은 다양한 미디어 탭을 추가했습니다. 이제 누군가 특정 미디어 파일을 찾아야 할 때마다 비디오라고 하면 즉시 비디오 탭으로 전환하여 다른 사람과 공유하거나 장치에 저장하려는 특정 달의 모든 비디오를 찾을 수 있습니다. 이를 통해 사용자는 다양한 유형의 미디어 파일이 모두 혼합된 미디어 파일을 검색하는 데 소요되는 많은 시간을 절약할 수 있습니다.

그 외에도 사용자에게 보고 싶은 특정 미디어 탭을 표시하거나 숨길 수 있는 유연성과 제어 기능을 제공했습니다. 두 가지 필터 옵션이 있습니다. 하나는 특정 월에 대한 것입니다. 하나는 미디어 탭을 월 단위로 표시하거나 숨길 수 있고 다른 옵션은 사용자가 선호하는 모든 달에 대해 미디어 탭을 전체적으로 필터링하는 것입니다.

또한 백업되지 않은 파일이 백업된 파일과 섞이지 않도록 아직 백업되지 않은 미디어 파일에 액세스하는 옵션을 추가했습니다. 사용자는 미디어를 열거나 상호 작용할 수 없다는 것을 알기 위해 백업되지 않은 파일을 클릭하게 될 수 있습니다. 따라서 이러한 백업되지 않은 파일은 다른 화면에서 사용할 수 있습니다. 따라서 사용자를 위한 오류 방지 휴리스틱을 염두에 두십시오.

솔루션이 비즈니스에 어떻게 도움이 됩니까?

이 솔루션은 사용자가 작업을 더 빨리 수행할 수 있도록 많은 시간을 절약하는 데 도움이 되므로 사용자의 세션 길이 와 검색 중단 을 줄일 수 있습니다.

다음은 동일한 Figma 프로토타입입니다.

이제 최종 디자인 결정에 도달하기까지의 프로세스에 대해 이야기해 봅시다

WhatsApp을 선택한 이유와 이 특정 흐름

출처: 핀터레스트

앞서 UX 워크숍 포스트에서 언급했듯이 저는 디자이너의 관점에서 물리적이든 디지털이든 모든 제품을 살펴보는 습관을 길렀고 디자인의 "이유"를 이해하는 것이 저의 제2의 천성이 되었습니다. 기존 디자인 에서 배우는 워크북 이 모든 제품을 상식적인 관점에서 바라볼 수 있어 큰 도움이 되었습니다.

채팅 연락처 정보에서 미디어를 공유하기 위해 WhatsApp을 사용하는 동안 특히 비디오, GIF 또는 오디오 파일이 될 수 있는 특정 미디어 파일을 찾을 때 검색 흐름이 약간 지루하다는 것을 깨달았습니다.

미디어 파일을 검색하는 데 드는 노력을 줄이는 방법이 있어야 한다는 것을 알고 있었습니다. 내가 염두에 두었던 또 다른 사항은 제품이 진화함에 따라 디자인과 사용자 요구 사항도 함께 발전하기 때문에 어떤 제품이든 유명하든 새 제품이든 항상 개선의 여지가 있다는 것입니다.

챌린지를 위한 내 앱으로 WhatsApp을 선택한 또 다른 이유는 20억 명 이상의 월 활성 사용자로 구성된 광범위한 사용자 기반이었습니다. 이렇게 광범위한 사용자 기반을 가진 제품은 제품 기능의 단일 변경 사항이 잠재적으로 사용자와 비즈니스에 막대한 영향을 미칠 수 있음을 의미합니다.

비즈니스에 대해 말하자면 UX는 비즈니스에 큰 영향을 미치며 이러한 영향은 많은 비즈니스 지표 를 통해 측정할 수 있습니다 . 개선된 WhatsApp의 검색 흐름은 잠재적으로 사용자를 검색하는 동안 세션 길이 와 드롭 오프 를 줄이는 결과를 가져올 수 있으며 매우 영향력 있는 방식으로 비즈니스에 도움이 될 수 있습니다.

WhatsApp의 개선 영역을 어떻게 이해했습니까?

디자인의 10가지 휴리스틱을 배우고 이해하는 것은 기존 검색 흐름의 문제를 식별하는 데 큰 도움이 되었습니다. 상식과 휴리스틱 평가의 도움으로 검색 흐름에 대해 해결할 수 있는 몇 가지 문제를 선택할 수 있었습니다.

그림 2 확인된 문제

휴리스틱 평가 중에 다음과 같은 질문이 나왔습니다.

파일이 미디어, 링크 및 문서로 분리되는 이유는 무엇입니까?
유연성 및 사용 효율성 — 파일을 미디어, 링크 및 문서로 분리하면 사용자가 저장하거나 다른 사람과 공유하려는 파일을 빠르게 검색할 수 있습니다.

사용 의 유연성과 효율성 - 월별로 미디어 파일을 표시하면 사용자가 공유된 특정 월에 해당하는 미디어를 빠르게 찾을 수 있습니다.
기억보다는 인식 - 미디어 파일의 월별 분리로 인해 사용자는 미디어 파일이 공유된 기간을 기억하려고 시도하지 않고 파일이 얼마나 오래되었는지 또는 새 파일인지 빠르게 인식할 수 있으므로 인지 부하를 줄이는 데 도움이 됩니다. 사용자.

사용자의 검색 시간을 좁히기 위해 사용자는 특정 미디어 파일을 어떻게 찾을 수 있습니까?

사용자가 비디오, gif, 오디오 또는 스티커가 될 수 있는 특정 미디어 파일 유형을 찾는 것은 어렵습니다. 종종 사용자는 다른 사람과 파일을 공유하거나 자신의 장치에 저장하려고 할 때 특정 미디어 파일 유형을 찾기 위해 많이 스크롤해야 할 수 있습니다.
휴리스틱 -유연성 및 사용 효율성

갤러리에는 백업된 파일과 백업되지 않은 파일이 섞여 있어 어떤 파일이 백업되지 않았는지 사용자가 식별하기 어렵습니다.
휴리스틱 - 오류 방지

휴리스틱 평가 중에 식별된 문제에서 나는 2개의 아이디어를 내놓았고 문제를 해결할 수 있는 범위가 더 많은 것을 선택했습니다.

그림 2.1 관념화

아이디어 1 — 사진, 비디오, Gif, 스티커 및 오디오를 탭 옵션으로 사용하여 다른 사람과 공유하거나 장치에 저장할 때 미디어 유형을 보다 유연하게 검색하고 검색할 수 있도록 합니다. 또한 상단에 백업되지 않은 섹션을 추가합니다. 식별 및 오류 방지를 위한 파일.

아이디어 2 — 아이디어 1 외에도 한 번에 원하는 미디어 탭만 볼 수 있는 탭 필터가 있습니다. 예를 들어 오디오 및 비디오 탭만 보고 싶은 사용자는 필터에서 오디오 및 비디오 탭을 빠르게 선택할 수 있습니다. 해당 파일을 찾으십시오.

아이디어 2는 사용자 가 갤러리의 대규모 파일 모음에서 미디어 파일을 신속하게 검색할 수 있는 유연성과 효율성 을 제공할 뿐만 아니라 사용자가 원하는 미디어 파일 유형을 필터링할 수 있는 사용자 제어 및 자유도 를 제공하기 때문에 아이디어 2를 진행 했습니다. 주어진 시점에 화면에 표시됩니다.

선택된 아이디어는 또한 검색하는 동안 세션 길이 와 드롭 오프 를 줄임으로써 엄청난 비즈니스 영향을 미칠 것 입니다.

종이에 생각을 담다

내 아이디어가 인터페이스에서 어떻게 보이는지 시각화해야 했기 때문에 내 아이디어를 더 잘 이해하기 위해 종이 프로토타입을 스케치했습니다.

그림 2.2 종이 프로토타입

위의 이미지에서 볼 수 있듯이 종이 프로토타이핑의 도움으로 내 아이디어를 실현하게 되어 매우 기뻤습니다. 별도의 미디어 탭을 만들고 월별 필터를 추가하여 미디어 탭을 숨기거나 숨김 해제하고 백업되지 않은 액세스 옵션을 제공했습니다. 사용자에게 미디어 파일.

프로토타이핑을 위해 Marvel 앱을 사용하는 것은 재미있었고 프로토타입을 플레이할 때 내 아이디어가 내 머리에서 화면으로 옮겨지는 느낌이 정말 좋았습니다!

내 프로토타입을 최대한 사실적으로 만들기(High Fidelity Prototypes)

UI에 대해 배우고 인터페이스 작동 방식을 이해하면 Figma에서 충실도가 높은 프로토타입을 만드는 데 큰 도움이 됩니다. 애니메이션 프로토타이핑, 간격 및 크기 조정과 같은 기술은 인터페이스를 디자인하는 동안 유용했습니다. 플러그인은 또한 UI 설계 과정에서 엄청난 시간을 절약해 주었습니다.

Fig 2.3 고충실도 프로토타입

UI를 재설계하는 동안 사진, 동영상, 오디오, GIF, 스티커와 같은 미디어 파일 탭 옵션을 추가했습니다.
매월 미디어 탭을 숨기거나 숨기기 해제하는 필터 아이콘을 추가했습니다.
아직 백업되지 않은 파일에 액세스할 수 있는 옵션을 사용자에게 제공하기 위해 백업 아이콘에 아직 추가됨
스톡 이미지용 Unsplash 및 아이콘용 머티리얼 디자인 기호와 같은 플러그인을 사용하면 시간을 크게 절약할 수 있었습니다.

사용성 테스트를 통해 내 솔루션이 작동하는지 확인하기 ✅

이제 휴리스틱 평가 중에 식별된 문제에 따라 설계를 완료했습니다.

사용자와 함께 디자인을 테스트하여 제대로 작동하는지 확인하고 작동하지 않는 부분을 개선했습니다.

WhatsApp은 매우 알려진 응용 프로그램이고 거의 모든 사람이 사용하기
때문에 사용성 테스트를 수행하기 위해 체육관에서 임의의 3명을 방문했습니다.
사용성 테스트에서는 사용자에게 가서 내 디자인이 사용자가 이해할 수 있는지, 사용자가 사용할 수 있는지 이해하는 작업을 수행하도록 요청했습니다. 기능이 실제 앱에 구현되면 개인적으로 도움이 될 것이라고 생각하고 제안이 있는 경우 제안을 요청하는 경우.

사용자에게 주어진 작업 —

1)연락처 정보 화면에서 미디어, 링크 및 문서로 이동
2)특정 미디어 파일 유형을 검색할 수
있습니까? 3)보고 싶은 미디어 파일 유형을 필터링하고 볼
수 있습니까? 4)장소를 찾을 수 있습니까? 아직 백업하지 않은 파일을 볼 수 있는 위치

관찰 포인트 —

1) 사용자가 미디어 파일 유형의 분리를 이해할 수 있습니까?
2) 사용자가 원하는 미디어 파일 유형을 탐색하고 찾을 수 있습니까?
3) 사용자가 특정 미디어 유형을 필터링할 수 있습니까?
4)사용자가 아직 백업 옵션에 대한 파일에 액세스할 수 있습니까?
5) 백업용 아이콘이 사용자에게 빠르게 인식되는지 사용자가 이해할 수 있는지 이해합니까?

사용성 테스트의 인사이트 및 피드백-

사용자는 한 미디어 파일 탭에서 다른 탭으로 쉽게 이동할 수 있습니다.
사용자는 사용하기에 매우 직관적인 기능을 발견했습니다.
사용자는 필터 옵션이 유용하고 사용하기 쉽다고 생각했습니다.
사용자는 아직 지원되지 않는 사려 깊은 옵션을 좋아했습니다.

사용성 테스트 중 사용자 피드백 및 관찰

사용성 테스트 중에 사용자가 프로토타입에 통합된 모든 기능이 매우 유용하다는 것을 알았지만 사용자 중 한 명이 월 단위뿐만 아니라 미디어 파일 유형을 숨기거나 숨기기 해제하는 미디어 탭을 필터링하는 옵션을 추가할 것을 제안했습니다. 그러나 전체적으로 한 번의 클릭으로 모든 달의 사진 또는 gif, 비디오 또는 스티커만 볼 수 있습니다.