Facebook 디자인 팀의 Laura Javier씨께서 Medium에 공개하신 Moments App 디자인 작업 후기 번역입니다.
만드는 이는 유저가 아니니, 안에서만 이게 맞네 저게 맞네 시간 낭비하지 말고, 가능하면 빠르게 Working prototype 정도로 아이디어 구체화 시키고 실제 사용자에게 노출시켜 그 피드백을 통해 개선, 피드백, 빠른 개선을 반복하여 다듬어 나가라. 당연한 부분인데 현업에서 지키기가 쉽지 않은 것 같네요 :D
모든 저작권은 아래 링크에 있습니다.
https://medium.com/facebook-design/designing-moments-2b5362430125
Designing Moments
We set out to help people gather the photos they take with friends. A strong collaboration among our multidisciplinary team got us there.
순간을 (모먼츠) 디자인하기
우린 사람들이 친구들과 사진 찍을 때, 사진을 모으기 쉽게 돕는 일에 착수 했어. 여러 전문분야에 걸친 우리 팀의 강력한 협동력이 가능하게 해줬지.
What’s Moments?
With a phone at everyone’s fingertips, it’s easy to capture photos of just about every moment in our lives. But it’s cumbersome to collect all the photos different people take in one place. It’s also hard to be sure you’ll get all the photos friends take of you. Even if you do end up with some photos others took, keeping them organized can be a chore.
We set out to improve the experience of gathering the photos friends take together. We ended up developing Moments, an app that makes it easy to give photos to friends and get photos back.
모먼츠가 뭐야?
모두가 손 끝에 쥐고 있는 폰으로 우리 삶의 매 순간을 사진으로 남기는 것은 쉬워. 하지만 각각의 다른 사람들이 찍은 사진들을 한데 모으는 것은 꽤나 성가신 일이지. 친구들이 찍은 너의 사진들을 모두 찾는 것도 굉장히 어려운 일이라고 장담하지. 니가 다른 사람들이 찍은 사진들을 마침내 한데 모아놨다고 해도, 그것들을 정리하는 것은 꽤나 삽질인 거지.
우린 친구들이 한데 찍은 사진들을 모아주는 경험을 향상시켜주는 일에 착수하기로 했어. 우리가 모먼츠 개발을 끝냈을 때, 그 앱은 사진을 한데 모으고 정리해서 친구들에게 보내는 일을 편하게 해줄 것이야.
Hacky Beginnings
Moments began at a Facebook hackathon. After a night of hacking, a small group of us had a working prototype that matched places you’d been with photos you took there. After a little more work, the prototype also let you and your friends pool all the photos you’d taken together. We felt we were on to something unique and started forming an official team with members from design, research, content strategy, engineering and product management.
해커스러운 출발
모먼츠는 페북 해카톤에서 시작됐어. 해킹의 밤이 지난 후, 사진들이 찍힌 장소에 맞게 분류해주는 워킹 프로토타입을 만들어 냈지. 조금 더 작업을 더해서 너와 네 친구들이 함께 찍은 모든 사진을 한데 묶어주는 기능이 추가되었어. 우린 디자인, 리서치, 컨텐트 전략, 개발, 프로덕트 매니지먼트 전문가들이 하나로 모인 뭔가 특별한 팀이 시작되는 것을 느꼈지.
An early prototype was built at a Facebook hackathon 페북 해카톤에서 만들어진 초창기 프로토타입
Our early prototype was based on our own dissatisfaction with existing ways to privately share multiple photos with multiple people at once. It also reflected what we’d heard time and again in qualitative user research:
우리 초기 프로토타입은 여러 사람들이 여러 장의 사진들을 한번에 안전하게 공유할 수 있는 방법이 없다는 데 기초하고 있었어. 그건 여러 번의 유저 리서치 결과에서 반복해서 들었었던 이야기이기도 했지.
“I take so many photos, but I always forget to send them to the friends who want them.”
“난 많은 사진을 찍지만 그 사진을 원하는 친구들에게 보내주는 것을 항상 깜박해.”
Birthday parties, graduations, vacations, holidays, casually hanging out — people take photos together all the time, but they never seem to get around to exchanging them. Yeah, there’s texting, email and social media, but that only accounts for a slice of what’s captured.
생일파티, 졸업식, 방학, 연휴, 그냥 놀러갈 때 – 사람들은 항상 함께 사진을 찍는데, 찍고 난 후엔 마땅히 그 사진들을 함께 교환하기가 어려워, SMS메시지, 이메일, 소셜미디어가 있긴 하지만 찍힌 수많은 사진들 중 겨우 몇장만 공유하게 되지.
________________________________________
A Deeper Dive
Our team’s core principle for Moments was to make it really fast for friends to exchange photos in a way that works better than existing options. Building a simple way for groups of friends to share groups of photos became our team’s north star.
One of the app’s main functions is grouping the photos in your phone’s camera roll based on when they were taken and who’s in them. This is done using the same facial recognition technology that powers tag suggestions on Facebook today. Early on, we discovered that this could be a tool for helping to suggest which photos you may want to share with specific friends. We just needed to find a user-friendly way to unlock the possibilities.
To get a sense of decisions we made in the process, let’s take a closer look at the main screen in Moments.
깊히 파고들기
우리 팀의 모먼츠에 대한 핵심 규칙은 현재 존재하는 모든 방법보다 친구에게 사진 공유하기가 빨라야 한다는 것이었어. 그룹의 사진들을 친구 그룹에게 공유하는 간단한 방법을 찾는 것이 우리 팀의 북극성(목표점)이 되었지.
앱의 메인 기능 중의 하나는 폰안에 찍힌 사진들에서 누가 찍혔는지 그룹화 해주는 기능이야. 이건 지금은 페북에서 얼굴인식기능으로 태그 추천해주는 기능으로 되는 건데, 초창기에 우린 이것이 특정 친구들과만 공유하기를 원할 지도 모르는 사진들을 추천해주는 것을 돕는 툴로 될 수 있다는 것을 밝혀냈어.
우리가 만드는 과정에서 결정을 내리면서 했던 생각들을 볼 수 있게 모먼츠의 메인 스크린을 상세하게 보기로 하자.
The Moments home screen. 모먼츠 홈 스크린
1 — Suggestions
Moments suggests specific people to sync photos to. For example, if Moments thinks you took photos at a wedding with Jack and Jill, it will group those photos and ask, “Do you want to sync these photos to Jack and Jill?”
1 — 추천
모먼츠는 공유하기를 원하는 특정 사람들을 추천해줘. 예를 들면, 모먼츠가 보기에 너가 Jack과 Jill의 결혼식에서 사진을 찍는 것 같으면, 그 사진들을 한데 묶어서 너에게 물어보지, “이 사진들을 Jack하고 Jill에게 공유할래요?”
The app suggests which friends to sync groups of photos to.
In order to be actionable, the suggestions need to communicate a lot of context in a small amount of space: What are these photos of? Why are they being shown to me? What am I supposed to do with them?
We knew we needed to minimize confusion if Moments made a mistake — maybe the app misidentified a friend or there were a couple of photos included that didn’t belong with the rest of the group. Our solution was to pose the suggestions as questions and add a line of subtext to communicate the rationale behind each one. We made incremental refinements in response to ongoing research until we were convinced that people could independently grasp how handy suggestions are.
실제로 동작하기 위해서, 추천은 조그만 공간에서 많은 컨텍스트에 대해 소통이 필요해: 이 사진들은 무엇이야? 왜 나에게 보여지는 거지? 내가 그것들을 가지고 뭘할까? 우린 모먼츠가 실수하는 것을 막고 혼란을 최소화할 필요가 있다는 것을 알고 있지 – 앱은 친구들이 찍히지도 않은 몇몇 사진들을 합칠 수도 있고, 친구를 잘 못 착각할 수도 있는 것이지. 그에 대한 우리 해결책은 각 추천에 대해 추천의 이유를 서브텍스트 줄을 추가해서 의문문으로 묻는 거였어. 우린 리서치를 진행해서 사람들이 추천이 유용하다고 확신할 정도로 납득할 수 있을 때까지 점진적으로 개선을 했어.
2 — Private and Synced
If we expected people to use suggestions as a primary way of syncing photos, we had to make them prominent. We explored several ways to present suggestions. A vertical list seemed the most straightforward, but that suffered in research because there wasn’t an elegant way to confirm when photos were synced or show you where synced photos “went.”
Another big challenge was making it explicitly clear that photos you haven’t yet synced are not visible to anyone else. This was imperative to ensuring that people feel comfortable using the app. We ended up arranging suggestions in a stack at the top of the home screen under a section header that says Private. A second section, labeled Synced, sits below.
2 — 개인적으로 싱크되도록
우리가 사진을 싱크하는 첫번째 방법으로 추천을 사람들이 이용한다고 가정했을 때, 그 기능을 좀 더 돋보이도록 만들어야 했어. 우린 추천을 보여주는 방식을 다양하게 살펴봤지. 세로의 리스트는 가장 직관적으로 보이긴 하는데, 리서치에서는 별로라고 결과가 나왔어 왜냐하면 사진이 싱크 될 때나 싱크가 되었을 때, 우아하게 컨펌을 보여줄 수 있는 방법이 없었거등.
또 다른 큰 도전은 아직 싱크가 안되어서 다른 누구에게도 보여지지 않는 사진들을 확실하게 표현해야 할 때였어. 이 기능은 사람들이 이 앱을 편안하게 쓰도록 하기 위해 반드시 풀어야만 하는 거였어. 우린 추천을 다루는 영역을 홈스크린 상단에 섹션헤더를 Private으로 이름 붙이고 카드더미로 쌓아두었지, 두번째 섹션은 Synced로 이름 붙이고 그 아래에 붙였어.
The home screen is divided into two sections, Private and Synced, to distinguish between photos that have and haven’t been synced with friends.
홈스크린은 친구와 싱크된, 아직안된 사진들을 구분하기 위한 두 영역, Private과 Synced으로 나뉜다.
3 — Activity Feed
After you choose to sync a suggested group of photos, they visibly drop down from the Private section to the Synced section and become part of a chronological record of photos you and friends have synced. We saw that this sort of activity feed is a model people rely on to keep track of photos they’ve given and gotten.
After a group of suggested photos is synced to specific friends, it drops from the Private section to the Synced section.
3 — 액티비티 피드
추천된 사진들의 싱크를 선택하고 나면, 싱크된 사진묶음들은 프라이빗 섹션에서 싱크드 섹션으로 시각적으로 떨어지는 것 처럼 보이게 되지. 우린 이 액티피티 피드의 소팅 방식이 사람들이 주고 받는 사진들을 인식하는 인지 모델이라고 보았어.
https://i.imgur.com/7Lo37SP.webm
4 — Synced Photos
It was important to us that Moments not only facilitate exchanging photos, but also be an enjoyable place to look back on them. In addition to the activity feed, we wanted to give people some alternative ways to do that.
An All Photos tab presents your synced photos in a familiar layout similar to your phone’s camera roll. This makes it easy to scroll through all the photos you have in Moments. The Titled Moments tab presents a grid of groups of photos you’ve added a title to. This makes it convenient to access your most special moments.
4 — 싱크된 사진들
모먼츠가 단지 사진을 공유하기 위한 장치로써 뿐이 아니라, 사람들이 사진들을 다시 한번 감상하고 즐기게 되는 장소가 되는 것은 우리에게 중요한 부분 이었어. 액티비티 피드에 사람들이 더 즐길 수 있는 또 다른 방법을 주고 싶었지.
All Photos 탭은 핸드폰 카메라 롤과 비슷한 친숙한 레이아웃으로 싱크된 사진들을 보여주지. 모먼츠에 있는 모든 사진들을 스크롤을 통해 편하게 볼 수 있도록 해줘. Titled moments 탭은 너가 타이틀을 붙인 사진 그룹들을 그리드로 보여주는데, 이건 너의 가장 특별한 순간들을 쉽게 감상할 수 있게 해주지.
Synced photos can be viewed three different ways by toggling among the Activity, All Photos and Titled Moments tabs.
The swipeable navigation lets you view your synced photos in three different ways. It keeps the overall hierarchy of the app relatively flat and contained to one screen, which helps prevent people from bouncing around in tabs and becoming overwhelmed.
스와이프가 가능한 내비게이션이 싱크된 사진들을 세가지 다른 방법으로 볼 수 있게 해줘. 앱의 전체적인 계층구조에서 상대적으로 평평하고 한 화면 안에 모두 포함된 것처럼 느끼게 해서 사람들이 탭들을 이동하면서 과하고 무겁게 느끼고 질리지 않도록 도와주지.
Synced photos can be viewed three different ways by toggling among the Activity, All Photos and Titled Moments tabs
________________________________________
Lessons We Learned
Step by step we worked toward realizing a shared vision — and sometimes the process really was three steps forward, two steps back. Rather than try to solve a problem in a silo, we embraced a fluid collaboration among design, research, content strategy, engineering and product management. We all learned some valuable lessons along the way:
우리가 배운 것들
통찰력을 공유하고 이해 시키려고 우리가 작업한 것을 하나씩 돌아봤는데, 때때로 작업 진행은 세 걸음 전진했다 두 걸음 후퇴했다 하기도 해. 우린 문제를 지하실에서만 틀어박혀 풀려고 하는 것 보단. 디자인, 리서치, 컨텐츠 전략, 개발, 프로덕트 매니지먼트 사이에서 유연한 협업을 통해 풀고자 했지.
Fall in love with a problem, not a specific solution
Design’s responsibility is to generate concepts and explore a wide range of possibilities that stitch the most promising ideas together. Throughout months of exploration, we studied countless mock-ups and prototypes. In the end, only one design became the app we launched. But all the iterative work wasn’t in vain because the key to a successful design process is committing yourself to a real problem, not marrying the first seemingly attractive solution that turns up.
A big part of designing a product is allowing yourself the freedom to ask “What if?” and knowing that you’re not going to be satisfied until you’ve tried answering the problem many different ways. It’s rare to solve a complex problem the first time (or even the 5th time). Iteration is part of what makes product design such a satisfying challenge.
특정한 정답만 찾으려 하지 말고, 문제와 사랑에 빠져라.
디자인의 책임감은 가장 좋은 아이디어들을 함께 엮는 넓은 범위의 가능성을 탐구하고 컨셉을 만들어 내는 것이야. 몇 개월의 개발 기간 동안, 셀 수 없이 많은 목업과 프로토타입들을 만들어 냈고, 결국 오직 단 하나의 디자인이 우리가 런칭한 앱이 되었지. 하지만 과정에서 만들어 낸 모든 산출물들이 헛수고였던 것은 아니야 왜냐하면 성공적인 디자인 프로세스의 열쇠는 진짜 문제로 너 자신을 떠맡기는(빠져들게 하는) 것이거든, 우연히 처음 보기에 그럴듯하게 보이는 솔루션과 결혼해 버리는 것이 아니거든.
제품을 디자인할 때 큰 부분은 너 자신에게 다른 많은 방법으로 문제에 대한 만족스러운 답을 찾을 수 있을 때 까지 “…라면 어떻게 될까” 라고 끊임없이 묻는 것이야. 단번에 복잡한 문제를 찾는 경우는 거의 없지 (그게 겨우 다섯 번 정도라고 할지라도 마찬가지) 되풀이하는 방법이 그런 만족스런 상품 디자인을 가능토록 해주지.
Simplify, simplify, simplify, then simplify some more
We quickly discovered that if we couldn’t put something into writing — if we couldn’t explain it in a concise and compelling way — it probably wasn’t the optimal approach. Writing descriptions of different features and benefits was also a speedy and effective way for us to test what resonated with people. We found that how well people understood something we’d written could directly inform decisions about what to prioritize or smooth out in the UI.
No matter how brilliant all of your ideas are, it’s critical to prioritize and simplify. Sometimes that means letting many of those brilliant ideas go because trying to do too much at once compromises clarity. There were lots of ways we could have designed Moments, lots of additional features we could have included in v1, and plenty of alternatives for how we could have framed the product. Ultimately, no amount of user education will compensate for a product that doesn’t have a tightly defined value and organized UI. An overload of explanations and options dilutes how useful and enjoyable a product feels.
단순하게, 단순하게, 단순하게, 그리고 좀 더 단순하게
우리가 글에 포함하지 못한 것이 있나 서둘러 살펴보았는데 – 만약 우리가 간결하게 우리 제품에 대해 설명하지 못한다면 – 아마 최적화된 접근법이 아닐 것이야. 우리가 다른 기능들과 장점들에 대해 설명을 적은 것은 무엇에 사람들이 공감하는지 시험해보기 위한 빠르고 효율적인 방법이었어. 우린 우리가 설명한 것들에 대해 사람들이 얼마나 잘 이해하고 UI의 어떤 부분을 강조하고 부드럽게 드러낼 것인지 직접적으로 결정하여 알려줄 수 있는지 알게 되었지.
네 아이디어가 얼마나 멋지던지 관계없이, 강조하고 단순화 시키는 것은 결정적인 부분이야. 때때로 많은 멋진 아이디어들을 그냥 버려야 하기도 해 왜냐하면 한번에 너무 많은 것을 시도하게 하는 것은 명쾌함을 없애버리거든. 우리가 모먼츠를 디자인하면서 시도했던 수많은 방법들, 첫번째 버전에서 넣었던 수많은 기능들, 제품을 완성하기까지 만들었던 수많은 대안들이 있었지. 최종적으로는 타이트하게 정의된 가치들이 아니거나 정리되지 않은 UI들은 모두 빼버렸어. 설명과 옵션들에 힘을 쏟는 것들이 얼마나 유용하고 즐길 수 있는 좋은 제품을 망칠 수 있는지.
Check your assumptions
Qualitative research is an essential part of keeping product development oriented. It’s like a conduit to reality. A major challenge in any creative process is striking a healthy balance between intuition and raw feedback from real people. Our team found that it’s critical to test assumptions early(as soon as we had our first hacky prototype, we started observing others interacting with it) and often (for months, we ran usability sessions as often as every week).
Sometimes our questions were tactical: What’s the best layout? What should this button say? Sometimes they were about social dynamics: What are the barriers that cause people to not share? With every new insight, we uncovered a slew of new questions. Through one-on-one interviews and focus groups, we continued to meet with people to understand how they were using what we were building. This real world feedback kept our instincts grounded and greased the wheels for rapid iteration.
가정을 검증해 봐
정성적인 리서치는 제품 개발에서 필수적인 부분이야. 현실로 직행하는 수도관과도 같지. 모든 창조적인 프로세스에서 제일 큰 도전은 직관과 실제 사람들의 걸러지지 않은 피드백 사이에서 절묘한 균형을 찾는 부분이야. 우리 팀은 가정을 최대한 일찍 (첫번째 엉성한 프로토타입을 만들자 마나, 우린 사람들이 그걸 가지고 사용하는 모습을 관찰하기 시작했지) 그리고 자주(몇 달 동안 매주마다 가능한 자주 사용성 세션을 돌렸지) 테스트 하는 것이 결정적이라는 것을 알게 되었어.
때때로 우리 질문은 전략적이기도 해: 무엇이 제일 좋은 레이아웃이지? 이 버튼은 모라고 불러야 하지? 때때로 이 질문들은 사회 동역학에 대한 것이기도 해: 사람들이 공유하지 않는 이유가 되는 심리적인 장벽은 무엇이지? 모든 새로운 통찰로부터 우리는 새 질문들에 대한 대답을 이끌어 내. 일대일 인터뷰와 포커스 그룹 인터뷰를 통해 우리가 만든 것들을 사람들이 어떻게 사용하는지 이해하기 위해 계속해서 사람들을 만나지. 이 실제 세계의 피드백들이 우리의 본능을 좀 더 누르고 빠른 이터레이션을 반복해서 할 수 있게 해주는 윤활유가 되게 해주지.
Launch day is just the beginning
We didn’t stop tinkering, clarifying and questioning until we were confident that what we came up with solves a need in a way that feels intuitive, with a touch of magic.
We realize that, despite all the effort put into getting Moments “right,” we probably got a lot wrong. We’re lucky to be part of Facebook Creative Labs, which was set up to give scrappy teams a chance to experiment with new concepts. At some point along the way, you have to accept the notion that done is better than perfect without letting that dampen your drive to do the best damn job you can with what you know at any given time.
The more people start using Moments, the more we’ll continue learning. And the more we’ll have our work cut out for us. We’re excited to keep hacking away.
제품출시는 단지 시작일 뿐
우린 마법의 터치로 직관적인 느낌이 들도록 만족할 때까지 아무거나 닥치는 대로 시도하고, 밝히고 질문하는 것을 멈추지 않았어.
이런 모든 노력들이 모먼츠에 들어가 잘 된 것 같음에도 불구하고, 아마도 많은 잘못된 것들이 있을 거라는 것을 알아. 우린 새로운 컨셉으로 다양한 실험을 할 수 있는 단편적인 조각 같은 팀을 셋업 할 수 있는 페북 C랩의 일원이 될 수 있어서 행운이었지. 너는 진행 중 적절한 시점에서, (주어진 시간 동안 니가 알고 있는 것으로 할 수 있는 제일 좋은 빌어먹을 직업을 할 수 있도록 막아주는 보호막 없이 이 부분 뉘앙스는 알겠는데 번역이 안됨-_-) 완벽하게 하는 것 보단 일단 끝맺음 할 수 있다는 것이 더 좋은 것이라는 생각을 받아들여야만 할 것이야.
모먼츠를 사용하는 사람이 늘수록, 우리는 배우는 것을 계속 할 수 있을 것이고, 우리의 작업물을 더 다듬을 수 있을 거야. 우리는 계속해서 해킹(이런 해카톤 식으로 일반적인 기업 프로세스와는 다르게 일을 할 수 있게 되서)을 할 수 있어 즐거워.