brunch

매거진 디자인 뉴스레터 디독

라이킷 56 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Apr 05. 2019

페이스북,인스타그램,유튜브의 잘못된 UI

뉴스피드? 이제는 다음 단계를 생각해야 할 때.

페이스북, 인스타그램, 유튜브, 트위터, 링크드인의 공통점은 무엇일까?

모두 머신 러닝을 사용하여 많은 콘텐츠들을 분류하여 사용자가 알고 싶어 하는 정보를 찾을 수 있도록 해준다는 점이다.

그리고 모두 같은 디자인 패턴을 사용하는데, 바로 피드(feeds)다.

페이스북부터 유튜브까지, 모든 곳에 피드가 있다.

피드는 추천 시스템(사용자가 가장 보고 싶어 하는 것을 예상하기 위해 머신 러닝 학습을 이용하는 소프트 웨어 용어)을 디자인하는 가장 일반적인 방법이다. 이는 정보들을 연결시키거나, 사용자가 인터페이스를 떠나지 않고 계속 머물게 한다. 피드의 길이는 제품마다 다르지만, 대부분 스크롤링하기 좋게 디자인되어 있고, 무한대로 내릴 수 있을 때도 있다.

피드는 정보의 과부하라는 중요한 문제를 해결하려고 디자인되었다. 전 세계 정보의 90%는 지난 2년간 만들어졌다. 매일 2.5 조의 새로운 콘텐츠가 더해진다. 어떻게 그 많은 정보 속에서 필요한 것을 찾을 수 있을까?

머신러닝을 시작하자. 당신이 할 필요 없이 모든 정보를 분류해준다. 구글이나 다른 검색 엔진 제품의 경우 당신이 검색한 것과 관련이 높은 콘텐츠를 찾아준다. 인스타그램이나 페이스북의 경우 가장 관심 있는 사람의 게시물을 찾는 것을 의미한다. 스포티파이에서는 음악이고 넷플릭스에선 영화, Goodread에선 책, Steam에서는 비디오 게임이다.

머신러닝은 디지털 제품에서 아주 흔하게 쓰인다. 사용자가 많은 정보를 정렬해야 할 때마다 머신러닝은 뒤에서 조용히 작동한다. 그리고 머신러닝이 뒤에서 조용히 작동하고 있을 때 프론트앤드에서는 피드 모양으로 보인다.

머신러닝이 뒤에서 조용히 작동하고 있을 때 프론트앤드에서는 피드 모양으로 보인다.

Shopify에서 나는 Shopify 홈이라는 머신러닝 중 하나를 연구하고 있다. 예상한 대로 그것은 피드다.

Shopify 홈은 당신의 서비스를 성장하기위해 필요한 팁과 인사이트를 주는 종류의 피드이다.

하지만 Shopify를 연구할수록, 피드가 사용자 경험에서 문제를 일으킨다는 것을 깨달았다. 머신러닝은 진화하고 매일 더 강력해지지만 머신러닝 인터페이스를 디자인하는 방법은 페이스북이 처음으로 시도했던 2006년의 뉴스피드에 멈춰있다.

피드가 잘못된 디자인인 이유

기술은 지루하거나 반복적인 작업을 제거하거나 빠르게 할 수 있도록 도와서 중요한 일에 많은 시간을 사용할 수 있도록 해야 한다. 이러한 기술의 특징이 Shopify에서는 사용자의 비즈니스를 더 효율적으로 관리하도록 돕는 것으로 나타난다. 그래서 그들은 기업가들이 신제품 개발이나 고객과 의미 있는 관계를 맺는데 집중할 수 있도록 한다.

하지만 난 갈수록 피드가 실제로 시간을 절약해준다는 점이 더 의심스러워졌다. 페이스북에 로그인해서 오늘 밤 파티에 참석할 사람의 주소를 검색한 적 있는가? 당신이 뭘 하고 있는지 깨닫지 못하고 뉴스피드를 스크롤하느라 20분을 보낸 적이 있는가?

비록 파티 주소가 분명히 페이스북이 당신에게 보여줄 가장 중요한 것일지라도, 절대 당신의 뉴스피드 상단에 나타나지 않는다. Tristan Harris (구글 전 제품 philosopher)에 따르면 “페이스북은 당신이 하려는 것을 페이스북을 사용해서 하길 원하는데, 페이스북 이용 소비시간을 극대화하기 위함이다"라고 말했다.

피드는 종종 사용자가 피드에 빠져 컨텐츠를 소비하며 그들이 해야 하는 일을 잊게 한다. 출근 중인 버스 안 이거나 소파에서 그냥 놀고 있는 중이라면 괜찮지만, 만약 당신의 제품이 사용자들이 일을 빨리 끝내는 것을 도와주는 것이라면 피드는 작업을 완료하는데 방해가 될 수 있다.

또한 피드는 인지부하가 심하다. 예를 들어 스포티파이의 홈 피드를 테스트했을 때, 많은 참가자들이 “테스크가 너무 많다"와 “무엇을 봐야 할지 모르겠다"라고 말했다.

피드는 보통 매우 비슷해 보이는 길고 연속적인 개체를 보여주기 때문에 “윌리를 찾아서" 그림 같이 정보 밀도가 높고 시각적으로 구별되지 않아서 더 많은 인지부하를 발생시킨다. 인지부하가 높으면 사용자들은 혼란스러워하고 불안해할 가능성이 높다. 이것은 사용자가 찾고 있던 정보들이 다른 필요 없는 정보에 가려져 사용자가 결국 그것을 찾지 못하고 페이지를 떠나는 것을 의미한다.

이 그림은 똑같아 보이는 그림들 사이에서 찾아야 하기 때문에 인지부하가 높다.

피드의 마지막 문제는 예측 가능성이나 정보의 영구성이 거의 없다는 것이다. 콘텐츠가 끊임없이 이동하기 때문에, 사용자들은 콘텐츠가 없어지기 전에 관심 가지는 정보를 즉시 소비할 수밖에 없다. 이는 사용자의 자율성이 없는 “지금이 아니면 절대 할 수 없다(now or never)"는 상황을 만든다.

더 좋은 피드 디자인

머신러닝 기술이 없어지지는 않겠지만, 그렇다고 똑같이 오래된 디자인 패턴을 재사용 하자는 뜻은 아니다.

같은 머신러닝을 사용해서 무한 스크롤 피드와는 다른 디자인과 기능의 새로운 인터페이스를 만들 수 있다.

감사하게도, 피드에서 만들어진 사용자 경험 문제를 해결할 방법을 생각하는 사람들이 있다.

구글 뉴스에서 가장 좋아하는 기능 중 하나는 피드 하단에 [더보기] 버튼이다. 작은 터치지만, 그것이 ‘한정된 경험'을 만든다. 사용자가 무한대로 스크롤하는 시간낭비에서 빠져들지 않도록 한다.

비슷하게, 넷플릭스에서 “broken” 또는 “segmented” 피드는 심각한 인지 부하 문제를 해결하려고 한다. 이 디자인에서 영화를 여러 카테고리로 나눠서 (다큐멘터리, 코미디, TV 프로그램 등) 사용자가 모든 것을 한 번에 볼 필요 없이 가장 관심 있는 콘텐츠로 좁힐 수 있다. 한 번에 많은 콘텐츠가 당신의 관심을 끌기 위해 경쟁하고 있지만, 모든 걸 한 번에 보는 것보다 조금 더 관리하기 쉽다.

하지만 모두 이 피드를 버릴 방법이 있을까?

이 방향에서 본 근접한 방법은 에어비엔비 호스트 캘린더 페이지다.

예약 캘린더 오른쪽에 있는 에어비엔비 surfaces는 호스트가 목록을 더 잘 관리할 수 있도록 도와 준다. 이 기능은 머신 러닝에 의해 작동되지만, 긴 스크롤링 피드가 아닌 상황별 팁으로 디자인된다. 사용자는 한 번에 하나씩 팁을 탭 해서 인지부하를 줄이고 끝없는 스크롤에서 벗어날 수 있다.

에어비엔비 호스트 캘린더는 시간을 쓰지 않고 힘을 주는 머신러닝 디자인의 좋은 예다.

필요한 콘텐츠는 바로 표시되고 찾으려고 스크롤할 필요가 없다.

저자 : Gillian Massel

brunch

페이스북,인스타그램,유튜브의 잘못된 UI

피드가 잘못된 디자인인 이유

더 좋은 피드 디자인

최신 해외 디자인 아티클을 한글판으로 편하게 받아보세요!