framerjs:

Creating GIFs

By Jorn van Dijk

A great way of showcasing interactions or animations on the web is by using GIFs. Compared to video files, they’re relatively small in size. Here’s a short tutorial on how to export great looking GIFs.

1. You can use QuickTime from Apple to record directly from your screen. Open it and go to ‘File -> New Screen Recording’. Make sure to deselect 'Show Mouse Clicks in Recording' from the Screen Recording window.

2. It’s best to keep your recordings short. Think a bit up front about how you want to compose your recording. Background, perspective and dimensions are valuable presentation assets. Keep your recording under 5 seconds and your GIF will stay reasonable in size. QuickTime will export the video in 60FPS when you save the video as a .mov file.

3. Photoshop is great at exporting GIFs. Open the .mov file and go to ‘File -> Save for Web’. Select GIF as the file extension, and you’ll be presented with the settings from the screenshot above. Your GIF will look best if you set Colors to 256 and Dithering to ‘Diffusion' with a value of 100%. Keep an eye on the file size shown in the bottom left of the preview window. The optimal settings are different for every GIF, so play around until you're satisfied with the result.

Pro Tip: Try rendering your video in 30FPS for smaller file sizes. In Photoshop, go to ‘Export -> Render Video' to change the frame rate.

Final step: hit save and you’re done!

새로운 포스퀘어 디자인 작업기

얼마 전 포스퀘어의 대대적인 업데이트가 있었는데,  Sam Brown이 작업기를 공유함, 새로 바뀐 포스퀘어는 로고부터 앱 기능까지 거의 이전 버전과 비슷한 게 거의 없음. “체크인하기” 앱에서, “갈만한 장소 찾기” 앱으로 정체성을 바꿈.

  • 포스퀘어에는 두 가지 뚜렷한 사용 패턴이 있었다고 함. 친구들에게 소식을 전하거나 만나는 용도, 그리고 갈만할 장소를 찾는 용도. 각각의 용도가 섞이는 것 보다는 분리되는 것이 좋겠다는 결론을 내고, 각기 다른 브랜딩을 주기로 함.
  • 내부적인 코드 네임은 “배트맨과 로빈” 이었다고 함. 배트맨이 포스퀘어, 로빈이 스웜.

리서치, 와이어프레임, 프로토타입, 그리고 반복하기

  • 리서치 팀은 외부 참여자들에 대한 리서치를 시작했고, 디자인 팀은 스타일 가이드를 잡기 위한 작업에 착수함. 몇가지 키워드가 나왔는데, “지적이며, 적절하고, 유용하다”, “마법같고, 재밌다”, “믿음이 가고, 평이 좋다” 같은 것들이었으며, 새로운 컬러 스킴과 정보구조등도 얻어낼 수 있었음. 
  • 초기 일정 대부분은 이야기 하고, 스케치하고, 와이어프레이밍하고, 프로토타입을 만들면서 시간을 보냄. 정기 미팅을 해서 진행 상황을 공유했고, 아이디어를 다듬어 나감. 했던 작업들의 거의 90%가 폐기되었음. 좀 마음이 좋진 않았지만, 결국 그렇게 버림을 통해 더 나은 결과물을 얻어낼 수 있었음.
  • 상상 충전(...)
  • 안드로이드 버전을 가지고 첫 유저 리서치를 시작함. 디테일이 좀 빠지긴 했지만 많은 부분에서 도움을 얻을 수 있었음. 실제 새로운 기능에 대한 여러가지 질문들에 대한 답도 얻었고, 프로토타입에서 제안한 “장소 찾기” 에 대해서도 평가할 수 있었음.
  • 리서치 결과를 토대로 수차례 iteration을 거쳐가며 디자인과 가정을 다듬어나가기 시작했음. 스케치, 키노트, 플린토, 스칼라, 웹 기반의 프로토타입을 활용해서 직원들이나 리서치 참여자들에게 보여주어 답을 얻었음. 실제 출시되기까지 계속 이 작업을 반복했고, 지금도 리서치를 하고 있음.

리브랜딩

  • 로고도 새로 디자인했는데, 예전 아이콘은 체크인과 직결된 체크마크였기 때문에 새로운 컨셉에 어울리는 로고가 필요했고, 워드 마크 자체도 옛날 느낌이 많이 났음.
  • 새 로고와 워드마크는 Red Antler와 협업하여 디자인했는데, 지도 위 핀 아이콘과 슈퍼 히어로 엠블럼의 조합같은 느낌이길 원했음. 결과물은 만족스러웠고, 작업을 하는 내내 재미있었음.

끝없는 비쥬얼 디자인 탐색

  • 기능들을 결정하고 복잡한 문제들을 해결한 다음부터는 비쥬얼 디자인에 돌입했음. 정말 많은 버전들을 만들었고, 정말 많은 시간이 걸림.색깔, 아이콘, 타입 스타일, 이미지는 어떻게 써야 하는지, 버튼은 언제 쓰는지, 재 사용 가능한 콤포넌트, 이런 비쥬얼 시스템을 만들어내야 했음. 이렇게 만든 시스템을 가지고 여러 디자이너들이 협업하면서도 통일된 결과물을 낼 수 있게 됨.
  • 컬러 스킴은 실제 작업을 시작하면서 더 빛이 나기 시작함. 새로운 핑크는 모두가 좋아했음. “취향” 기능은 디자인하기에 매우 흥미로운 데이터였고, 새로운 색깔에도 잘 어울렸음. 이런 기능을 통해 새로운 앱에 독특한 룩을 줄 수 있었고, 사용자들도 이 기능을 통해 나에게 꼭 맞는 데이터를 얻을 수 있게 됨.
  • 대부분의 디자인은 스케치로 진행됨.
  • 8개월 간의 작업 기간동안 많은 노력을 기울였고, 런칭을 한다는 사실에 매우 흥분해 있음. 작년 12월 10일에 회사 미팅에서 이런 슬라이드를 공유했는데, 내용인 즉슨 “존나 흥분되는 결과물이 아니면 런칭하지 않는다” 였음. 오늘 포스퀘어는 스스로 만족스러운 결과물을 내놓았다고 생각함.

"존나 흥분되는 결과물"이라고 했지만, 포스퀘어가 앱을 두개로 쪼개고, 체크인 대신에 팁 쓰기로 기능을 전환한 이후 그들의 기대와는 다르게 혹평으로 너덜너덜해지고 있음. 워낙 극적인 변화였기에 초기에 얻을 수 있는 혹평이지만 이렇게 노력한 결과물이 바로 쓰레기 취급 받는 경험은 유쾌하진 않겠지…

실제 써 보면 목적에 충실하게 잘 설계된 앱이라는 것을 알 수 있지만, 아무래도 원래 있던 기능이 쑥 빠져버리고 처음 보는 기능들이 늘어선 것은 사용자들로서도 당황스러운 일이었을 터. 최근 페이스북 메신저의 강제 이주 정책과 맞물려 생각해 볼 의미있는 주제가 아닌가 생각함.

리디자인을 하게 만든 대 전제가 정말 옳았던 것인지 /  옳았다면 지금의 이 문제들은 감당하고 버텨야 하는 일시적인 문제인지, 아니면 다시 돌아가야 하는 것인지…  / feature roll-out 후 생기는 이 문제들을 늘 안고 가야 하는것인지. 좀 더 부드럽게 새 버전으로 transition하는 방법은 없는 건지.. 등등.

Framer Meetup Seoul | Facebook

서울에서 Framer Studio에 대한 소개를 하는 자리를 가지려고 합니다. 

간단하게 툴 사용법과, 예제를 소개하고 질문과 답변 정도가 오가는 meetup 형태가 될 것 같은데요. 관심 있으시면 위 URL의 페이스북 페이지로 가셔서, “참석” 버튼을 눌러주세요. 주변에도 널리 알려주시면 감사하겠습니다.

참가비 같은 건 없고, 제가 혼자 장소 대여할 순 없으니 장소 대여료 정도를 1/n하는 것으로 생각하고 있습니다. 장소 대여가 무료라면 참가비는 없습니다.

현장에 오시는 분에 한해서 Framer Studio 특별 할인 혜택도 있으니 평소 관심 있으셨다면 좋은 기회가 될 것 같아요!

Jon Wiley가 밝히는 Google, Design

Jon Wiley는 구글 검색팀의 Principal Designer로, material design이란 개념을 정립한 사람 중 하나이기도 하다. 그런 Jon Wiley가 reddit에서 한시적으로 질문을 받았다. 흥미로운 질문과 답이 오갔는데, 그 중 몇가지만 소개를.

요약도 있고 전문 번역도 섞여 있습니다. 퀄리티가 들쑥날쑥이니 양해해 주세요. 늘 그렇듯 흥미가 생기셨다면 직접 링크로 가서 보시길 권합니다.

질문: 구글 검색에 Material Design을 적용할 예정이신가요? 아니면 지금 상태로 늘 그렇듯 유지하실 생각이신가요.

답변: 사실 제가 그 개념을 만들어낸 장본인 중 하나예요. (Material Design도) 구글 검색의 디자인 문제를 풀려고 노력하다 나온 개념이고요. 언젠가 검색 결과 카드를 보고 “이건 소재가 뭐예요?” 라고 물어봤는데 사람들이 묘한 표정을 지으며 이렇게 말하더라고요. “무슨 말씀이세요? 그냥 픽셀이잖아요.” 하지만 그게 좋은 대답 같진 않더라고요.

소프트웨어와 물리적으로 상호작용을 할 때, 그러니까 카드나 링크, 버튼 같은 것을 만질 때 실제 물리적인 대상을 상정하잖아요? 인터페이스가 그런 기대를 헤아리지 못하고, 그냥 픽셀 따위에 불과하다고 치워버리면 좀 불만족스럽고 가짜같은 경험을 하게 될 거예요.

Material Design 자체가 구글 검색이 모바일 기기에서 어떻게 더 좋아질까 고민하다 나온 산물인 만큼, 모든 제품 - 특히 검색을 포함해서 - 에 적용할 생각입니다.

질문: 검색이 어떻게 더 좋아질 수 있을까요?

답변: 매일 스스로에게 하는 질문이죠. 어떤 때는 답이 나와서 작업을 하기도 하고, 어떤 때는 문제가 너무 큰 탓에 압도되기도 하죠. 주변 사람들에게 검색 디자인 한다고 하면 “거기 디자인 할 게 있어? 간단하잖아. 게다가 이미 다 된거 아니야?” 라고 하는 사람들이 있죠. 하지만 사실 이제 시작이예요.

기본적인 아이디어는 크게 달라지지 않을 거예요. 원하는 정보를 가장 쉽고 빠르게 찾아내는 거죠. 검색이란 건 늘 그래왔고요.

변하는 부분은, 어떻게 답을 찾고, 답이 얼마나 좋느냐 하는 거예요. 우린 새로운 기기들의 황금 시대에 살고 있잖아요. 시계부터 자동차까지 각각의 기기들은 새로운 상호작용 기능을 가지고 있고, 우리도 새로운 방법으로 검색할 수 있게 되었죠. 대부분은 좀 더 쉬운 방법으로요(음성 검색 같이 말입니다).

길찾기는 시계 한번 보면 되고, 지금 보이는 다리를 누가 지었는지 궁금하면 구글에게 물어보면 금방 알 수 있죠. 몇년 전만 해도 이런 것들은 도서관에 가거나, 집에 가서 컴퓨터로 찾아봐야 했던 겁니다. 이젠 손가락 하나로 원하는 정보들을 언제든 얻을 수 있죠.

무료 도로 검색 기능을 다시 넣어달라는 사용자의 말에, 병원 갈 때 무료도로를 알려주면 곤란하지 않나며, 신중하게 접근해야 한다고 답변하자. 한 사용자가 단 답변.

"병원까지 안내해줘"

"응급 상황인가요?"

"어"

"가장 빠른 도로로 재탐색 합니다."

질문: Material Design이 구글 검색에 어떤 영향을 줄까요?

답변: 경험 측면에서의 구글 검색이 마주한 도전은 사실은 연속적인 경험들인데 점프 컷 처럼 느껴지는 경우가 많다는 거예요. Material Design은 연속성있게 상태가 전환될 수 있도록 도와주는 프레임워크를 제공해 줄거고 그래서 좀 더 빠르게 느껴지고 UI에서 뭔가를 터치했을 때 뭐가 일어났는지 힌트를 주기도 하겠죠. 좋은 답을 찾아가기 위한 길에 속도를 좀 더 내게 해 줄겁니다.

이 외에도 앞으로 기술이 발전함에 따라, 검색이라는 건 그냥 물 틀면 물이 나오듯 너무나 당연한 것이 되어, 그 이면의 동작 방식같은 건 보이지 않게 될 거라는 말을 했음.

질문: (길어서 대강 요약하면) 맘에 드는 기능 (디스커션 필터)이 있었는데 언젠가부터 완전히 이 기능을 빼버렸음. 난 이것 때문에 구글 검색을 이용하는데 왜 뺀거야… 라는 항의성 질문임.

답변: 제품 디자인에 있어 한가지 확실한 것은, 뭔가 기능을 더하면 누구도 불평하진 않는다는 겁니다. 좋아하지 않는다면 무시하곤 하죠. 하지만 뭔가를 뺀다면, 분명 한소리 듣게 될 겁니다. 더 크게, 더 자주요. 구글 검색 같은 서비스는 아주 작은 비율의 사람들이 없어진 기능에 아쉬워하고, 그 보다 더 작은 비율의 사람들이 말을 한다고 해도 수천명이 될 거예요. 

그러니까 일단 내놓은 기능은 내버려 두는 게 쉽죠. 하지만 그렇게 되면 서비스에 기능이 덕지덕지 붙어서 서로 조화되지 않는 bloatware가 되어버려 대부분의 사용자를 만족시키지 못할 겁니다. (중략) 비용도 존재하죠. 결국엔 비용대비 효과를 고려해야 하는 상황이 오는 겁니다.

제가 좋아하는 많은 기능들도 빠졌어요. 가장 힘들지만, 또 제품 디자인에서 가장 중요한 부분이기도 합니다. 무엇을 뺄 것인지 결정하는 일 말이예요. 때로는 너무 많이 뺄 때가 있죠. 때로는 아예 틀릴 때도 있고요. 그래서 여러분이 말해주셔야 합니다. 우린 정말 듣고 있고, 가장 다수의 사람들을 만족시킬 수 있도록 노력하고 있어요.

질문: 구글 UX 팀에 대한 질문, 어떻게 하면 갈 수 있고… 리서치는 어떻게 하며, 몇명이나 있는지.. 다른 팀하고는 어떻게 협업하는지.

답변: (이건 요약) 대학 좋지만 꼭 안가도 됨. 혼자 해도 경험만 잘 할 수 있다면 괜찮음. 구글은 공감능력과 디자인 솔루션을 가능하게 하는 기술과 시스템에 대한 이해가 탄탄하며 많은 사람들에게 중요한 문제를 풀어낼 수 있는 인재를 원함. 유저가 제일 먼저고 리서치를 자주 하고, 리서처 엄청 많음. 방법 다양함. 검색 UX팀은 20명 정도 됨. 전 세계적으론 백여명. 디자인 부서라고 따로 있진 않고 각 제품 팀에 UX하는 사람들이 있음 (인터랙션 디자이너, 리서처, 비쥬얼 디자이너 등등). 협업은 이야기를 엄청 많이 함. 매일 이야기하며, 밥먹으면서, 다른 사람들과 작업을 공유하며 이뤄짐.

Dropbox 디자인 수장이 밝히는 "개인화"의 미래 (Dropbox's Head of Design on the Dawn of Personalized Products)

First Round는 그가 말하는 제품 개인화, 그리고 개인화를 이루는 4가지 핵심 요소들을 간략히 소개했습니다. 사용자, 제품 개발/디자인에 대한 깊은 이해가 드러나는 굉장한 글입니다. 전체 글은 제목에 걸린 링크를 눌러 확인하시길.

오늘날의 개인화

  • 개인화는 퍼스널 컴퓨팅이 시작되면서 같이 발전해왔음. 매킨토시의 스큐몰픽 디자인이 바로 그것인데, 폴더와 파일은 실제 생활에서의 그것과 비슷하게 생겼을 뿐 아니라 비슷하게 동작했음. 
  • 지난 10년 동안의 컴퓨터 기술을 통해 우리 이름, 위치, 관심사, 관계를 알아낼 수 있게 되었고, 이 때 Cuervo가 업계에 들어왔음. 페이스북에서 만든 알고리듬을 통해 사용자에 최적화된 경험을 제공할 수 있게 됨. 사람들이 계속 이용할수록 경험이 좋아지게 되는 형태의 UI. 하지만 이제 뉴스 피드도 낡은 생각처럼 느껴지게 됨.
  • 갈 길은 아직 멈. 매일 엄청난 수의 아이폰이 개통되지만, 사람들은 모두 똑같은 시작 경험을 하게 되어있음. 미래엔 제품 개봉과 동시에 사용자의 정체성을 따르게 될 것임(영화 “그녀”의 그것과 비슷할 것).
  • 이미 스타텁 생태계에서 개인화의 새로운 기회들을 확인할 수 있으며, 데이터와 기술은 이미 그 수준까지 도달해 있음. Cuervo는 4개의 요소로 개인화를 정리했는데, 이 요소들을 잘 적용한다면 사람들이 제품이나 다른 사람들과 상호작용하는 방식을 완전히 바꿀 수 있을 것임.

정체성 (Identity)

  • 어떠한 개인화 경험에서건, 정체성은 그 핵심이라 할 수 있음. 여기서 정체성은 이름이나 프로필 사진 같은 것 이상의 개념을 말하는데. 여러 개의 디바이스와 플랫폼에 걸쳐 당신이 내린 결정과 액션들에 의해 진화되는 실체임.
  • 정체성을 정의하고 명확히 한 노력 중 포토 태깅(Photo Tagging)의 예를 들었음. 사진에 다른 사람을 태그하는 일은 작성자 본인 뿐 아니라, 대상이 되는 사람에게도 가치를 만들어냄. 그리고 태그가 되었다는 알림을 받음으로써 자연스레 서로가 서로에게 기능을 알려주는 효과도 얻었음.
  • 실제 세계에서와 달리, 사람들이 하나 이상의 정체성을 가지고 있다는 것을 깨닫는 것도 중요함. 사람들은 서비스에 따라 자신을 굉장히 다르게 정의함. 링크드인과, 인스타그램, 페이스북에서 보여지는 모습은 각기 다름. 서비스는 거기서 표현하고자 하는 정체성을 만족시켜줘야 함.
  • 드롭박스에서는 Dropbox for Business를 출시하며 일 / 개인적인 맥락에 따라 달라지는 정체성을 받아줘야 했음. 즉, 개인 계정(그리고 정체성)을 업무 계정과 분리해야 했음. 사람들의 업무적인 정체성은 회사, 역할, 팀, 그리고 가장 많이 일하는 사람들, 일하기 위해 필요한 정보들로 인해 형성됨. 업무, 사업적인 부분에서는 리듬이 완전히 다름. 조직은 그들만의 정체성과 요구사항이 있는데, 그걸 파악해내야 했음.
  • 스타트업들은 이렇게 사람들의 정체성을 적극적으로 관리해서, 원하는 행동을 하도록 독려해야 함.해시태그, 멘션같은 요소들로 사람들이 트위터에서 돋보이려는 행동을 깨닫고, 서비스의 기능으로 넣어 행동을 강화한 사례 같이, 적극적으로 패턴을 파악해서 적절한 시점에 강화할 필요가 있다는 듯.

그래프 (Graphs)

  • 그래프는 당사자 뿐 아니라, 그 안에 있는 모든 사람들에게도 관계됨. 사람들이 많이 가입할수록, 그래프 자체의 가치가 올라가게 됨. 요즘은 여러 플랫폼에 걸쳐 많은 그래프가 형성되어 있음. 실제로는 별로 관계 없어보일 것 같은 사람들이 같은 그룹에 형성되어 있거나, 유명인을 팔로우하거나, 뉴스를 받아보는데 우리는 이런 모든 관계들을 그래프로 활용하여 개인들에게 최적화된 경험을 제공할 수 있는 것.
  • 드롭박스에 파일을 하나 공유하거나, 핀터레스트에서 re-pin한번 하는 것도 그래프로 볼 수 있음. 이런 경험들이 늘어날수록 데이터와의 관계는 공고해짐. 사람들이 무엇을 원하고, 어떻게 행동할 지에 대한 정보들이 늘어나게 되는 것임.
  • 페이스북 커넥트도 그 일환. 전혀 관계 없는 서비스이지만, 페이스북의 계정을 통해서 로그인하면 친구들도 모두 가져올 수 있고 지금 그 서비스를 통해 뭘 하고 있는지 페이스북에 알릴 수 있음. Runkeeper, Lift, Duolingo같은 서비스들이 페이스북 커넥트를 활용하는 방법을 참고.
  • 나의 제품에 가장 그럴듯한 그래프를 붙이는 것이 중요. 제품 차별화, 유저 관여도를 높이는 데 주요한 효과를 가져올 수 있음.

맥락 (Context)

  • 모바일 덕분에 사용패턴은 엄청나게 많이 바뀌었고, 결국 그 모든 맥락에 맞는 제품을 공급해야 하는 시대가 도래했음. 스마트폰이나 태블릿에서 비슷하게 보이는 것만으로는 부족함. 기기마다 동일한 경험을 하는 것보다, 각 기기에서 사용자가 보이는 행동 패턴을 파악해서 이에 최적화된 경험을 제공하는 것이 관건임.
  • 스마트폰하고 컴퓨터가 고작이었던 시대에서 시계, 안경, 차, 텔레비전같이 디바이스들이 계속 늘어나는 지금, 어쩌면 이것은 가장 중요한 개인화 전략일지 모름. 기기가 늘어나면 늘어날수록, 제품은 뉘앙스를 더 잘 파악할 수 있어야 함. 최근 큰 성공을 거두는 회사들은 여러 플랫폼, 디바이스에 걸쳐 섬세하게 차별화된 경험을 제공하고 있음. 
  • 개인당 한 기기에서 얻어낼 수 있는 정보는 어마어마하고, 이를 토대로 사람들의 관심을 끌어낼 수 있는 능력도 엄청나질 것임. 이미 잠시 자리를 비웠을 때 스마트폰에 잔뜩 쌓인 알림으로 사람들은 짜증내고 있고, 조만간 상황, 장소, 기기에 딱 맞는 정보만을 보여주는 것이 차세대 혁신의 관건이 될 것임.
  • 만일 컴퓨터 앞에 앉아있는 사람과, 회의에 늦은 사람이 폰을 보는 것의 차이를 구별해 낼 수 있다면, 그에 맞는 정보를 제공할 수 있는 기회를 맞게 될 것임. 우버(Uber)의 사례를 봐도 도착까지 몇분 남았는지, 지금 위치는 어디인지 알 수 있는데 이걸 통해 사람들은 차를 탈지 버스를 탈지, 기사가 오기 전에 커피를 한잔 살 수 있을지 없을지 판단할 수 있음. 사용자가 상황을 통제하고 있다는 느낌을 가지고 있지만, 사실은 우리가 그들의 관심을 매우 고의적으로 관리하고 있는 것임.
  • 개인화된 제품을 출시하려는 스타텁들은 여러 기기에서 태스크와 사용자 니즈가 어떻게 달라지는지 주목해야 할 것임. 시계에서는 메일을 어떻게 받을지, TV, 자동차에서는 어떨지. 각 디바이스 별로 사용자의 실제 삶에서 어떻게 작동할지 깊은 이해를 해야 하고, 만일 use case가 그 기기에서 맞지 않다면 밀어붙이진 말아야 할 것.

행동 (Behavior)

  • 사용자가 어떻게 행동해야 할지 결정하는 것에 두려움을 가져선 안됨. 사용자가 뭔가 해야 하는 제품을 만들었다면, 사용자가 그렇게 하도록 만들어야 함. 지금 제공하는 서비스에서 사람들이 뭘 해야 하는지, 강력한 관점을 가지고 밀어붙여야 함. 
  • Nest는 학습하는 UI의 좋은 예인데, 사람들의 행동을 관찰했다가 집에 있는지, 밖으로 나가는지 파악함. 그래서 건물에 들어오자마자 에어컨을 켠다거나 하는 일이 가능함. 이 이면에는 “보통 95%의 확률로 8시쯤 집에 오고, 저녁에는 22도 정도를 좋아할거야” 하는 행동 모델이 있음.
  • Netflix도 좋은 예인데, 통상적인 네비게이션 패턴에서 정교하게 계산된 영화 추천쪽으로 UI를 짜고 있음. 과거의 소비 패턴으로 봤을 때 지금 이 시점쯤에 사용자가 뭘 원하고 있을지 알고 있으므로, 자신있게 추천이 가능.
  • 이런 “automagical”한 경험은 내가 원하기도 전에 내가 원하는 것을 앞에 가져다 주는 놀라운 경험이지만 모두가 좋아하는 것은 아님. 따라서 알아서 계속 기어를 바꾸다가 외면받는 일을 겪지 않도록 밸런스를 잘 맞춰야 함. 예를 들어, “이 사람에게서 온 메일은 대부분 보관함으로 넘기는데, 앞으로는 자동으로 넘겨버릴까요?” 하고 묻듯이, 사용자가 통제권을 가지고 있다는 느낌을 주는 것이 중요함. 

재료 섞기 (Mixing Ingredients)

  • (개인화된 제품을 디자인 할 때) 스크린샷 한장 공유하는 것은 큰 도움이 되지 않음. 이해관계자들(Stakeholder)의 그래프 데이터를 뽑아낼 수 있는 프로토타입을 만들고, 그들에게 개인화된 경험을 제공해야 함. 그렇게 해야 실제 사용자 관점의 경험을 알아낼 수 있음. 페이스북과 드롭박스에서 그의 팀은 내부 테스트를 할 때 이런 식으로 피드백을 받아내었음. 그리고 이것이 최고의 피드백을 받아내는 방법임. 이해관계자들이 그들의 개인적인 시각으로 프로토타입을 경험하게 하는 것.
  • 이미 다른 회사에서 했던 작업들을 가져오는 것도 방법임. 페이스북 커넥트와 같은 API나 리소스는 스타트업에게 큰 추진력을 가져다 줄 수 있음. Timehop같은 앱은 좋은 사례인데, 페이스북, 트위터, 플리커, 인스타그램 등에 남겼던 과거의 컨텐츠를 다시 끌어올려 추억을 다시 찾아볼 수 있는 즐거운 경험을 제공함. 남의 데이터를 가져다 쓴다고 해서 특별한 것을 만들지 못하는 것은 아님.

마지막으로, 다른 서비스와 경쟁하려 말고 사람들의 습관과 경쟁해야 할 것. 시장을 뒤집는 회사들은 사람들의 습관에 도전함. “지금까지 바깥에 나가서 택시를 잡았다면, Uber로 책상에서 택시를 잡아보세요. 길거리 나가서 택시 잡는 습관을 버리세요” 같이. 제품을 만들 때, 사람들이 언제나 지금 뭘 하고 있는지 생각하고, 서비스를 통해 어떤 새로운 습관을 만들 수 있을 지 생각해야 함. 성공적인 테크 회사들은 바로 그걸 해내고 있음.

속 빈 아이콘이 정말 인식하기 더 어려울까? 리서치 스터디 결과 (Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study)

전체 번역은 아니지만, 대부분의 내용을 담은 요약본입니다. 관심이 가셨다면 꼭 원문을 한번 읽어주세요. 멋지게 수행된 탄탄한 리서치라고 생각합니다. :-)

지난 여름, iOS7 발표와 함께 화제가 되었던 속이 빈 아이콘(Hollow Icon)에 대한 이야기가 많이 있었는데, Viget의 디자이너인 Curt Arledge가 간단한 리서치를 통해 진짜 그런지 알아보았음. 방법은, 웹 앱을 만들어서 사용자가 얼마나 빨리, 정확하게 아이콘을터치하는지 알아보는 것으로 1,000명 이상의 샘플을 모았음.

아이콘

iOS7의 탭 바는 외곽선만 딴 아이콘(기본), 색이 칠해진 아이콘(선택되었을 때)을 한 세트로 사용함. 그런데 사실 뭐가 “속이 빈” 아이콘인지가 느슨하게 정의되어있어 되도록 명확하게 구분되는 20개의 아이콘 세트를 선정하였음. 여기에 구체적인 대상을 지칭하며, 라벨까지 붙여주어 이름과 아이콘을 매칭하는 인지적 수고를 줄였음.

테스트

실제로 여기서 테스트를 해 볼 수 있는데, 테스트는 아래와 같이 진행됨.

  1. 20개의 아이콘을 미리 보여주고, 눈에 익도록 함
  2. 원형으로 배치된 20개의 아이콘 중, 제시된 이름에 맞는 아이콘을 선택하도록 함
  3. 이걸 24회 진행함
  4. 초반 4번의 테스트는 웜업으로 쳐서 배제하고, 나머지 데이터를 사용
  5. 테스트 시퀀스는 모두 랜덤으로 운영됨 (아이콘 배치, 모양 등)

결과

열흘 동안 1,260회 테스트가 진행됨(개별 아이콘 테스트는 25,000회). 참가자는 어린 편(18-40세)에, 애플 유저들이었음. 평균 선택시간은 3초, 표준편차 1.5초.

결과를 일단 전체적으로 보면, 속이 빈 아이콘이 평균적으로 0.1초씩 선택이 느렸음. 이렇게 되면 Johnson의 가설을 지지하는 결과라고도 볼 수 있지만, 꼭 그렇진 않음. 사실 외곽선 / 색이 들어간 아이콘의 스타일은 두개가 아니라 네개였음. 

이렇게 4개의 그룹을 놓고, 2-way ANOVA(이원 분산분석, 두개 이상의 집단의 차이를 검증하는 테스트)테스트를 돌림. 결과를 놓고 보면, 아래와 같음.

  1. 검정 배경에 속이 빈 아이콘이 나머지 아이콘에 비해 0.17초 늦었음 (유의한 결과)
  2. 나머지 세개의 집단 간 차이는 통계적으로 유의하지 않음.
  3. 즉, 흰색 바탕이라면 속이 찼건 비었건 인식시간에 차이가 없고. 속이 찬 경우엔 검정인지 하얀색인지는 큰 차이가 없었음. 검정 바탕에 속이 빌 경우에만 조금 시간이 더 걸린 것임.

여기서 끝내지 않고, Curt는 좀 더 깊게 실험하기로 함. 이번에는 모양 따라서 하나하나 살펴봤는데, 반 정도(9개)는 차이가 없었고, 나머지 반 중에서도 몇 개 아이콘들(3개)은 오히려 속이 빈 쪽의 인식 속도가 빨랐음. 상세한 아이콘들은 아래와 같음. 

(꽉 찼을 때 인식이 빠름 / 외곽선일때 더 빠름 / 차이 없음)

결론적으로 아이콘의 스타일과 컬러는 사용자가 아이콘을 정확히 선택하는데 영향을 주지 못한다고 할 수 있음. 한가지 특이한 점은 자물쇠 아이콘인데, 하얀색 배경에 검정색일 때 인식이 더 느렸음. 

결론

Johnson의 “속이 빈 아이콘” 가설은 실험을 통해 입증되지 못했음. 속이 비었다고 해서 인식이 안되는 것도 아니었고, 차이도 사용자가 큰 피로를 느낀다고 할 만한 수준이 아니었음. 사용자가 아이콘을 매번 해석해내는 것도 아니고, 아이콘의 위치를 통해서도 의미를 그려낸다는 연구도 있음. 이렇게 두 가지 방식으로 아이콘을 표현하는 일은 색 말고도 부가적인 표현 방식을 하나 더 제공하기 때문에 접근성 부분에서도 이점을 가짐.

아이콘이 외곽선으로만 표현되면 인식이 안된다느니 하는 이분법적인 방식으로 문제가 해결되지 않음. 인식이 쉽고 비쥬얼적으로 매력적인 아이콘 그리기는 더 복잡한 문제임. 애플의 HIG를 읽어보면, 애플도 어떤 아이콘은 어떤 방식으로도 먹히지 않을 거라는 것을 인식하고 있다는 것을 알 수 있음.

마지막으로 이 글이 실제 사용자에 대한 데이터가 디자인 결정에 얼마나 중요한지 보여주는 기회가 되었으면 함. 

Material Design 활용 노트

kwangbae:



Google I/O 2014를 통해 발표된 material design 원칙과 자료들은 제품을 만드는 이들에게는 크고 고마운 하나의 패키지였다.

혹시나 몇 안되는 주위 분들에게 도움이 될까 하여, 혼자 보려고 적어두었던 메모를 블로그에도 남겨둔다. 디자인의 흐름이 어떻고 철학이 어떻고 이런건 없고, 실질적인 활용에 대한 부분이다.

고맙다, Google.

==

이해를 위한 자료
- Google Design http://www.google.com/design/
- Material Design on…

(pixstory에서)