좋은 인터랙션 디자인을 위한 5가지 심리학 비밀

인간적인 요소를 포함하는 디자인은 매일 더욱 중요해지고 있습니다. 웹사이트와 사용자 경험 디자인은 미학에서부터 인터랙션, 모션(인식과 실제), 감정적 연결까지 사실적이어야 합니다. 그러나 디자이너들이 가장 자주 직면하는 문제는, 사용자를 `실제 사람들`처럼 생각하지 않는다는 것입니다. 인간적인 디자인은 사용자에게 물리적, 감정적으로 이어질 수 있는 매력적인 경험을 만들어줍니다. 인간적인 디자인을 위해서는 무엇을 고려해야 할까요? The Next Web(TNW)에 소개된 UXPin의 사례를 소개합니다.

1. ‘사람이 가장 먼저’

모든 프로젝트의 디자인과 기획 단계에 이 말을 기억하세요. 의도적으로 행동하고 인터랙션하고, 디자인하세요. 무엇보다 사용자에게 공감하는 것이 중요합니다.

사진 제공: 리복

사람을 위한 디자인을 하는 보다 확실한 방법은, 사용자 페르소나를 만드는 것입니다. 사용자 연구를 바탕으로 가상의 아이덴티티를 만들어 사용할 수 있습니다. 이를 통해 사용자에 대한 우리의 추측을 없애고, 그들의 마음 속 니즈를 디자인 할 수 있습니다.

UXPin의 페르소나 프로세스는 다음과 같습니다.

• 어플리케이션 사용 데이터를 검토하고, 전체적인 참여를 기반으로 사용자를 세분화합니다.

• 양질의 데이터를 위해, 모든 세그먼트에서 ‘왜 그렇게 사용했는지'라는 질문에 답할 수 있는 사용자들을(최대 30명) 인터뷰합니다.

• 정량적 데이터와 인터뷰를 바탕으로 결국 사용자 페르소나의 패턴 그리기를 시작할 수 있습니다.

우리는 사람들이 원하는 것을 만들어야 합니다. 되돌아가서 모든 웹사이트와 앱을 자주 평가하세요. 여러분이 그 디자인의 일부로 느껴지나요? 개인적인가요? 직관적이고 쉬운가요? 그것이 바로 ‘인간적인' 것입니다.

2. 편안함과 예측가능성

디바이스 타입과 화면 크기처럼, 디자인 프로세스에는 우리가 바꿀 수 없는 몇 가지 요소가 있습니다. 그렇지만 서로 다른 사용 환경에서 사용하기 편하도록 인터랙션 구현 방식을 바꿀 수 있습니다. 좋은 디자인은 사용하기 편해야 합니다.

사진 제공: Rosenfeld Media, Creative Commons 2.0

•  모바일 디바이스의 엄지손가락 패턴(Thumb patterns)은 도달과 접근이 용이해야 합니다. 버튼 또는 스와이프 동작 같은 요소를 고려할 때, 각양각색의 휴대폰과 손에 대해 생각해보세요.

•  서체 크기에 대해 생각해보세요. 사용자가 글을 읽을 때 눈을 가늘게 뜨고 보지 않아야 합니다.

•  다양한 상황을 고려한 대비를 제공하세요. 데스크톱 사용자는 실내에서 웹사이트를 볼 가능성이 가장 높지만, 다른 사용자들은 다른 조명 조건에서 다양한 디바이스로 화면을 볼 수도 있습니다.

사진 제공: Bugaboo Strollers

• 모션과 움직임은 실제 삶을 반영해야 합니다. 위 예시에서 360도 회전되는 유모차를 보세요. 구르는 공의 물리학에 대해 생각해보세요. 지금 휴대 전화 화면에서의 공을 상상해보세요. 공을 구르게 하려면 어떻게 해야 할까요? (공은 항상 내리막으로 구르기 때문에 휴대폰을 중력이 가장 낮은 지점으로 움직입니다.) 이러한 마이크로 인터랙션의 완성은 즐거운 경험을 만드는 데 큰 도움이 됩니다.

사용자가 더 편하게 느낄수록, 계속해서 여러분의 제품을 이용할 가능성이 더 큽니다.

3. 정서적 유대감

여러분의 프로젝트가 전달해야 하는 하나의 감정에 초점을 맞추세요. 다양한 감정의 경험을 만들려고 애쓰지 마세요. 한 가지를 뛰어나게 잘하는 것이 중요합니다.

정서적인 유대에는 두 가지가 있습니다. 사용자와 제품 간의 관계와 사용자들 간의 관계. 우리는 디자인을 통해 이 관계를 만들어야 합니다. 

사용자들과 정서적 유대를 만드는 방법은 여러 가지가 있습니다. 그 중 색상은 사람들의 감정을 자극할 수 있는

좋은 방법입니다. 대비, 보색과 명도는 모두 사용자를 감동시킬 수 있는 방법들입니다. 색상 또한 사람들에게 다른 감정을 불러일으킵니다.

• 빨간색: 열정을 높이고, 흥분과 함께 혈압을 높일 수 있습니다.

• 오렌지: 활동을 촉진시키는 색으로, 디자인에 기발함, 유쾌함을 제공합니다.

• 녹색: 물리적, 재정적으로 번영을 증진합니다.

• 보라색: 호화스러움을 전합니다.

4. Mental trigger 

인간의 심리를 조금이라도 이해하는 것이 디자인에 어떻게 도움이 될까요?

사진 제공: Laerepenger

1. 다른 사람들을 위해 무언가를 하면 그들은 보답할 것입니다. 위의 예시에서 퀴즈를 풀면 돈을 모을 수 있습니다.

2. 사람들은 다른 사람의 행동을 살핍니다. 특히 그들이 행동하는 방법에 확신이 없을 때 그렇습니다. 사용자가 큰 그룹의 일부처럼 느끼도록, 디자인에 소셜 스트림을 포함시킵니다. 

3. 사용자들은 그들이 가질 수 없는 것을 원합니다. 그래서 제한된 시간의 거래는 상당히 효과적인 희소성의 원리를 가지고 있습니다.

4. 사람들은 눈에 띄는 요소를 기억합니다. 시선을 사로잡기 위해 대비를 이용하세요.

5. 사람들은 적시에 피드백을 필요로 합니다. 계속해서 경험하고 있는 느낌을 주기 위해, 사용자에게 0.1초 이내의 피드백을 전달해야 합니다. 인터페이스가 응답할 때까지 1초 이상 걸린다면, 그 느낌은 사라질 것입니다. 피드백은 시각적이든지 텍스트 기반(modal 창과 같은)이던지, 명확히 이해되는지 확인하고 대화 톤을 사용하세요.

사진 제공: Bose

Bose의 웹사이트는 좋은 예입니다. 사이트를 로드하는데는 몇 초 걸리지만, 부드러운 로딩 애니메이션이 대기 시간의 지루함을 줄여줍니다. 각 제품에 커서를 올리면 부드럽게 이어지는 애니메이션이 재미를 줍니다. 이 인터페이스는 사용자들의 주의를 끄는 대비되는 색상이 사용되었습니다.

5. 단순함

"디자인은 디테일에 있다." 단순함은 항상 세부적인 면을 강화합니다.

페이스북이나 트위터, 인스타그램과 같은 웹사이트는 인적 요인이 중요합니다. 사람들은 그들의 삶을 다른 이들과 공유합니다. 디자인과 인터페이스는 이 웹사이트의 디자인에 대해 생각해봅시다, 이 플랫폼 모두는 공유를 위한 간단한 도구로 시작했고, 수년에 걸쳐 복잡하게 발전해왔지만 여전히 사용 방법을 쉽게 배울 수 있습니다.

사진 제공 : The University of Sydney

단순한 시각적 요소로 시작하세요.

•  색상 : 하나 또는 대조되는 두 개의 색상을 사용하세요. 세계적인 고객을 상대로 한다면 문화적인 측면을 고려하세요.

•  타이포그래피 : 단어와 문장을 이해하기 쉽게 읽을 수 있고 문자를 식별하기 쉽게 읽을 수 있어야 합니다. 모든 본문은 눈에 편안한 수준으로 설정되어야 합니다. 산세리프 스타일로 시작하고 행간에 충분한 공간을 주세요. 최고의 시각적인 편의를 위해 글자 크기와 한 글줄 당 문자 수를 고려하세요.

•  공간 : 비좁은 자간이나 너무 가까이 붙은 요소는 혼란스럽고 부조화를 느끼게 합니다. 넓은 여백은 가끔 무언가 빠져있는 듯한 느낌을 줄 수 있기 때문에 균형을 맞추는 일은 까다로울 수 있습니다. 요소들을 제거하고 다시 살펴보는 것도 좋습니다. 

•  마이크로 인터랙션 : 인터랙션과 알림은 거의 눈에 보이지 않는 방식으로 동작합니다. hover 애니메이션 처럼, 사용자에게 즉각적인 피드백을 주면서 시각적인 무언가가 더해지곤 합니다. 애니메이션의 열 두가지 원칙을 참고하세요.

시각적 요소들이 제대로 작동하는지 아닌지 프로토타이핑을 통해 확인할 수 있습니다. 프로토타이핑을 하면서 더 단순화할 수 있는 부분을 찾아보세요. “less is more” 라는 말도 있지요.

웹사이트나 모바일 앱의 목적은 사용자에게 무언가를 전달하는 일입니다. 이는 사람들의 제스처나 언어, 그로 인한 상호작용과도 목적이 같습니다. 단순하고 이해하기 쉽게 만드는 것이 커뮤니케이션 목적 달성의 지름길입니다.

출처 : TNW, UXPin

by 비숑발자국