디자인을 보는 눈을 키우는 방법

 

제가 처음 디자인을 시작했을 때, 저는 형편없었습니다.

저는 드리블에서 유행인 이미지들을 베끼는데 사로잡혀 있었습니다. 하지만 그런 디자인 이미지의 조각들이 어떻게 서로 맞물려서 힘을 발 위하는지 모르고 있었습니다. 만약 여러분이 제가 디자인을 한 짙은 드롭 쉐도우와 불필요한 빛 번짐을 본다면, 현기증이 날 수도 있어요.

비록 저는 천재 프로덕트 디자이너는 아니었지만. 제가 필요한 기술들을 매우 빠르게 배웠습니다. 그리고 전 이제 그 때 배운 내용을 여러분들과 공유하고 싶습니다. 여러분이 디자이너든 아니든, 이런 연습들은 서비스 감각을 키워주고 디자인을 보는 눈을 키워줄 것입니다.

 

단순히 앱을 사용하지 말고 공부하세요

여러분은 여러분 자신을 서비스의 디자이너라고 생각할 때 여러분의 디자인 감각을 성장시킬 수 있습니다. 종종 사용하는 앱을 켜고 밑으로 내용을 스크롤하고 싶은 욕구를 억누르세요, 대신에 눈앞에 있는 스크린에 집중을 하라고 조언을 해 주고 싶습니다. 여기 몇 가지 유의해야 하는 점이 있습니다.

 

계층구조

디자인이 어떻게 시선을 가이드 하는가? 어떤 정보가 하이라이팅 되어있는가? 색과 텍스트 정보가 어떻게 특정한 요소가 중요하다고 힌트를 주고 있는가?

내용

이 사용자 경험을 만들기 위해 어떤 단어가 선택되었는가? 왜 어떤 내용이 더 흥미롭게 보이고 어떤 건 그렇지 않은가? 내용을 나누기 위해 간격은 어떻게 사용되고 있는가?

의도

왜 사용자가 이 앱을 열었는가? 어떤 문제를 해결하기 위해? 어떻게 디자인이 그런 문제를 더 좋게 해결해줄 수 있을까?

사용자

이 서비스를 사용하는 사람들은 누구인가? 그들의 사용 사례가 여러분의 사용 사례와 어떻게 다른가? 어떻게 디자인이 이런 사용자의 사례를 도울 수 있을까?

앱을 해체해보기

밑의 GIF에서 볼 수 있다시피, 저는 각각의 구성요소를 더 잘 파악할 수 있도록 하기 위해서 앱을 재구성했습니다. 애니메이션에서 다음에 어떤 구성요소가 나올지 예상하며 보다 보면, 전에 알지 못했던 세부 정보가 있다는 사실을 알 수 있을 것입니다. 각각의 구성 요소가 다음 구성요소를 기반으로 구축이 되는 것을 보면서, 여러분이 보는 모든 것에 대해 궁금해하고 이 제품을 만들 때 해야 했던 선택들을 생각해 보세요.

에어비엔비 구조 분석 GIF

 

시작을 돕는 관찰의 예시:

• 서치 바에서 보이는 플레이스 홀더의 텍스트는 "여기서 검색하세요"라고 적혀있는 게 더 나을 것입니다. 하지만 여기에는 구체적인 도시 이름인 '런던'을 검색해보세요 라고 적혀있습니다. 저는 런던에 가고 싶은 생각이 없지만, 그런 가능성을 상상해 보는 건 흥미를 불러일으키기 때문에 좋은 디자인이라고 생각합니다.
• 저는 그들이 이 날짜와 게스트 인원을 선택하는 플로우의 최종 버전을 뽑아내기 위해 함께 사용자와 얼마나 많은 인터렉션을 했는지 궁금해졌습니다. 장소를 선정하기 전에는 날짜가 표시되지 않는 실험을 해 본 디자인도 많을 것입니다. 이것은 사람들이 어떻게 검색하는지 그리고 그들이 언제 그들의 검색에 필터를 도입하는지 궁금하게 만듭니다.

트위터 구조 분석 GIF

 

관찰:

• 얼마나 많은 수의 리트윗과 좋아요가 볼드체로 표시되고 있는지 확인해 보세요.
• 타임스탬프는 단지 날짜를 표시를 하는 게 아니라 구체적인 시간도 표시를 하고 있습니다. 왜 이런 형태를 띠고 있을까요? 그리고 또한, 타임스탬프가 더 짧게 표시가 되는 부분이 어디인지 확인을 해 보세요.(예를 들어 피드 뷰에서 "5h"로 표시가 되는데 프로필 뷰에서는 "4/14/18"로 표시가 되는 경우) 이런 뷰가 바뀜에 따라 디자이너의 의도가 어떻게 다른지 생각해보세요.
  
  
• 다른 트윗을 추가할 사람이 있고 그 사람에게 사용해야 하는 문장은 구체적입니다. 그것은 "트윗하기"가 아니라 "또 다른 트윗 하기"입니다.

Spotify 구조분석 GIF

 

관찰:

• 스포티파이가 화면 안에 재생 중인 노래를 어떻게 보여주고 있는지 관찰해보세요.
  
  
• 이 새로운 곡 보기에서 표시하도록 한 것은 새 재생 목록과 새 앨범/싱글이 포함됩니다.
  
  
• 재생 목록인 '금요일을 위한 음악'에는 팔로워가 있는 반면, 재생 목록 릴리스 레이더는 그렇지 않습니다.
  
  
• 이 제한조건을 파 해쳐 봅시다. 릴리즈 레이더는 사용자에게만 한정되므로, 여기에는 팔로워가 필요 없을 것입니다. 누군가가 모든 콘텐츠 사용 사례를 지도화하여 그들과 짝을 지을 적절한 부제목들을 결정해야 했습니다.
  
  

여러분이 규칙을 부술 수 있도록 규칙을 이해하세요.

다음에 여러분이 이동 중이거나 친구를 기다리고 있을 때, 앱을 열고 디자이너들이 왜 그런 식으로 디자인을 선택했는지 생각해보세요. 다른 앱들을 일상적으로 분석해 보세요. 더 많이 하면 할수록 당신은 당신의 제품을 사고하는 것을 개발하고 스스로 앱을 디자인하는 것을 더 잘할 것입니다.

 

 

UX 관련해서 일을 하다보면 기존의 서비스의 분석을 할 일이 생길 것이라고 생각합니다. 새로 만드는 서비스에 들어가는 것 보다는 원래 진행되던 프로젝트에 들어갈 일이 많을테니까요.

모든 디자인에는 디자이너의 의도가 있고 그 의도를 잘 파악을 해서 관계자와 대화를 하면 더 효과적으로 대화를 할 수 있을 것입니다. 따라서 저는 기존에 있는 서비스를 어떻게 볼것인지, 어떤 관점으로 봐야 더 쉽게 파악이 가능할지 알기위해 이 글을 가져왔습니다.

주로 기존의 디자인을 어떻게 봐야하는지에 대한 팁이 나와있네요.

이 글은 Kathleen Warner가 UX Collective에 쓴 How to develop an eye for Design 을 번역한 글입니다. 
https://uxdesign.cc/how-to-develop-an-eye-for-design-c5a4c64bb26c

 

디자인에 관련된 글을 쓰고 마케팅과 디자인에 대한 정보 공유를 하고 있습니다.
디자인 정보 공유 오픈 카카오톡 : open.kakao.com/o/gp2kg4bc