지루한 앱을 위한 감성적인 인터페이스를 디자인하는 방법

큰 노란색 튜브 뒤에 사라지는 1과 0의 줄이 조금씩 있습니다. 발톱이 있는 발이 내 브라우저의 도구 모음을 가리키기 시작하자 곰 한 마리가 튜브에서 튀어나오고 다음과 같은 헤드라인이 나타납니다. "곰 사냥을 시작하세요!"

윙윙거리고 우는 소리 사이에 나는 내가 무엇을 탐색하고 싶었는지 잊어버립니다.

VPN 서비스와 같은 제품은 애정이나 다른 감정을 거의 불러일으키지 않습니다. 그것은 그들의 일이 아니며 그들이 하기 위해 만들어진 것도 아닙니다. 하지만 TunnelBear가 그렇게 하기 때문에 다른 VPN보다 선택하고 친구들에게 추천하여 일상에 얽매이는 동안 웃을 수 있도록 합니다.

인간은 지루함을 오래 참지 못하기 때문에 흥미롭지 않고 반복적인 작업을 위해 만들어진 제품은 버려지고 컴퓨터와 휴대폰에 먼지가 쌓이는 경우가 많습니다. 그러나 심리학자들에 따르면 지루함은 단순히 자극의 부족, 만족스러운 활동에 대한 충족되지 않은 욕구입니다. 인터페이스를 사용하여 자극을 준다면 어떻게 될까요?

나는 여기 MacPaw에 있는 제품 디자이너들과 함께 앉아서 중복 찾기 및 암호화 앱과 같이 그다지 섹시하지 않은 것을 디자인하는 데 시간을 보냈습니다. 그들은 게임화, 유머, 애니메이션, 일러스트레이션, 마스코트라는 더 감성적인 UI에 대한 5가지 비밀을 공유했습니다.

사람들이 하는 게임

UI에서 게이미피케이션을 사용하는 것과 관련하여 몇 가지 논쟁이 있습니다. 예를 들어 24개의 경험적 연구에서 그것이 얼마나 효과적인지에 대해 다양한 결론에 도달했습니다. 하지만 다시 말하지만 효과는 빛나는 업적 배지를 디자인하여 달성하려는 목표에 달려 있습니다.

여기 Akar Sumset을 비롯한 많은 제품 제작자에게 게임화의 요점은 사용자가 그 자체로 재미를 가지도록 하는 것이 아니라 해당 재미를 통해 사용자를 특정 행동으로 부드럽게 밀어내는 것입니다. 업적, 순위, 리더보드는 인간의 기본적인 존경심에 대한 욕구를 활용하고 경쟁력을 촉발하며 사용자가 진척을 이룩하거나 앱을 계속 사용하거나 소셜 미디어에서 공유하는 것과 같이 원하는 일을 하도록 촉구합니다.

게임화는 성공하거나 실패할 수 있지만 확실히 달성하는 것은 감정적 반응입니다. 우리의 뇌는 행복의 주요 신경화학물질 중 하나인 도파민 수치를 조절하는 세포로 가득 차 있습니다. 즐거운 일이 발생하면 이 뉴런에 불이 켜지고 도파민이 혈액으로 방출되지만 더 좋은 점은 이 즐거운 일이 규칙적이고 예측할 수 있다면 일이 일어나기도 전에 불이 켜지고 도파민을 방출한다는 것입니다. 인터페이스에 대한 의미는 무엇입니까? 다음 성취와 같은 즐거운 일을 기대한다는 것은 사용자가 제품을 경험하는 동안 소소한 행복을 줄 것입니다.

UI의 게임화: Gemini 2 및 Duolingo

Mac용 복제 찾기의 새 버전인 Gemini 2를 설계할 때 심각한 문제가 있었습니다. 기가바이트의 파일을 검토하는 것은 정말 지루할 정도로 지루했으며 일부 사용자는 완료되기 전에 종료했다고 불평했습니다. 그래서 우리가 성취 시스템으로 달성하려고 한 것은 지루한 작업의 유일한 장점인 할 일 목록에서 항목에 줄이 그어진 느낌을 강화하는 것입니다. 앱의 이름으로 무의식적으로 설정되고 인터페이스에서 악용되는 공간 테마는 게임화에 완벽했습니다. 우리 청중은 Star Wars와 Star Trek에서 자랐기 때문에 공상 과학에서 영감을 얻은 계급은 그들과 함께 집에 갔을 것입니다.

출시 며칠 만에 최종 업적을 달성할 수 있는 이스터 에그에 대한 단서를 요청하는 사용자의 트윗을 받기 시작했습니다. 출시 1년 후 Gemini 2는 "명확함과 감성"을 보여주는 디자인으로 Red Dot Award를 수상했습니다. 따라서 우리의 성취 시스템이 얼마나 동기를 부여했는지 측정하기는 어렵지만 사람들을 차갑게 만들지는 않았습니다.

내가 본 것 중 가장 게임화된 인터페이스를 가진 또 다른 제품은 언어 학습을 위한 온라인 서비스이자 모바일 앱인 Duolingo입니다. 외국어를 처음부터 마스터하려는 시도는 특히 당신과 당신의 노트북만 있는 경우 교사가 있다는 확신 없이는 벅찬 일입니다. 사람들이 언어 활동에 얼마나 빨리 관심을 잃는지를 감안할 때(여기서 경험에 따르면) 듀오링고는 당신을 계속 푹 빠져들게 하기 위해 노력해야 할 것입니다. 그리고 그것은 합니다.

빠른 5분 수업을 완료할 때마다 10포인트가 적립됩니다. 30일 연속으로 수업을 듣습니까? 업적을 얻으십시오. 오타 없이 20개의 수업을 완료했습니까? 다른 잠금을 해제합니다. 아기가 한 발짝 내딛을 때마다 감미롭고 달콤한 도파민의 방출을 유발하는 의기양양한 소리와 다채로운 그래픽으로 감각이 보상됩니다. 결국, 당신은 듀오링고를 성취감과 자부심, 즉 다시 돌아가고 싶은 느낌과 연관시키기 시작합니다.

게임화에 대해 더 깊이 알고 싶다면 Gabe Zichermann의 저서 "Gamification by Design: Implementing Game Mechanics in Web and Mobile Apps"를 시작하는 것이 좋습니다.

당신은 농담을해야합니다

Victor Yocco는 웹 디자인에서 유머를 기억에 남는 경험을 만들고 사용자와 연결하며 작업을 돋보이게 하는 도구로 사용하는 확실한 사례를 만들었습니다. 하지만 농담의 가장 큰 힘은 감정적이라는 것입니다. 우리는 여전히 유머의 본질을 완전히 이해하지 못하지만 한 가지 분명한 사실은 유머가 인간을 행복하게 한다는 것입니다. 뇌 영상 연구에 따르면 재미있는 만화는 변연계의 보상 네트워크를 활성화합니다. 즉, 식사, 음악, 섹스, 기분 변화 약물에 반응하는 동일한 네트워크입니다. 다시 말해서, 좋은 농담은 사람들에게 일종의 감정적 쾌감을 줍니다.

인터페이스에서 그런 반응을 원하십니까? 물론. 하지만 까다로운 부분은 유머가 주관적일 뿐만 아니라 유머에 대응하는 방식이 맥락에 따라 크게 좌우된다는 점입니다. 한 가지는 시작 화면에서 말장난을 던지고 있습니다. 완전히 다른 것은 오류 메시지에서 떠돌아다니는 것입니다. 그리고 모든 인간이 이런 저런 형태의 유머를 즐기는 동안 청중을 아는 것이 중요합니다. 그들이 재미있다고 생각하는 것과 부적절하거나 조잡하거나 시기 적절하지 않게 보일 수 있는 것입니다. 실생활에서 농담을 하는 것과 별반 다르지 않다.

UI의 유머: 정통 날씨와 여유

유머를 사용하여 보완적인 만화 구호가 아니라 독특한 판매 제안으로 사용하는 앱 중 하나는 Authentic Weather입니다. 날씨 앱은 실용적인 제품의 대표적인 예입니다. 사람들이 정보를 얻기 위해 사용하는 것입니다. 그러나 Authentic Weather를 사용하면 그 이상을 얻을 수 있습니다. 날씨에 관계없이 "얼어붙는다", "겨울에 집에 가자", 개인적으로 가장 좋아하는 "그냥 괜찮아. 자세한 내용은 외부에서 확인하세요.”

Authentic Weather를 사용하면 일기 예보를 보기 위해 열지 않고 다음에 어떤 결과가 나오는지 보고 싶어하며 날씨 확인과 같은 일상적인 작업이 아침에 기대되는 일이 됩니다. 이제, f-words와 경멸로 가득 찬 앱의 변덕스러운 논평은 아마도 우리 엄마에게 덜 재미있어 보일 것입니다. 그러나 심술궂은 밀레니얼 세대인 저는 그것이 재미있습니다. 이는 청중을 알면 유머가 효과가 있음을 증명합니다.

재미를 잘 활용하는 또 다른 인터페이스는 Slack입니다. 사람들이 업무상의 긴급 상황과 관련된 앱의 경우 Slack은 특히 한 줄짜리 기능 덕분에 더욱 인간적인 경험을 제공하는 확실한 역할을 합니다. 로딩 화면에서 마침내 모든 채팅을 따라잡는 순간까지, 오지 않을 때 농담을 던집니다.

다양한 인구통계로 인해 유머는 성공할 수 있습니다. 따라서 Slack은 바보 같은 말장난과 선의의 농담으로 안전하게 플레이합니다. 최상의 시나리오에서 사용자는 웃으며 자신의 채널 중 하나에서 스크린샷을 공유합니다. 최악의 시나리오에서 그들은 눈을 굴릴 것입니다.

유머에 대한 추가 정보: Louis R. Franzini의 "농담: 유머를 효과적으로 사용하기".

세상을 움직이게 하라

거의 모든 인터페이스는 애니메이션 형식을 사용합니다. 한 상태에서 다른 상태로 전환하는 것은 자연스러운 방법입니다. 그러나 UI의 애니메이션은 상태 변경을 나타내는 것보다 훨씬 더 많은 목적을 제공할 수 있습니다. 즉, 정적 시각적 개체나 복사가 할 수 있는 것보다 더 잘 주의를 기울이고 진행 상황을 전달하는 데 도움이 될 수 있습니다. 움직임은 시각적 학습과 운동 감각적 학습을 모두 자극하여 사용자가 집중을 유지하고 사물을 사용하는 방법을 알아낼 가능성이 더 큽니다.

이것들은 모두 애니메이션을 디자인에 통합해야 하는 좋은 이유입니다. 하지만 정확히 왜 감정을 불러일으키는 것일까요? Encrypto 및 Gemini Photos 앱에서 작업한 Simon Grozyan은 실제 세계에서 애니메이션을 살아있는 것으로 해석하기 때문이라고 믿습니다.

“우리는 움직이는 것을 보는 데 익숙합니다. 우리 주변의 모든 것은 빛 때문에 움직이거나 모습이 변하고 있습니다. 정적은 죽은 것과 같습니다."

애니메이션은 움직이는 물체의 생생한 느낌에 더하여 우리에게 똑같이 즐겁지만 기대되는 것보다 훨씬 더 많은 즐거움을 가져다주는 유쾌하고 예상치 못한 것의 힘을 가지고 있습니다. 따라서 전환보다 덜 습관적인 부분에 사용하면 제품을 재미있게 사용하는 탐나는 자극을 얻을 수 있습니다.

UI의 애니메이션: Encrypto 및 Shazam

Encrypto는 다른 사람에게 안전하게 보낼 수 있도록 파일을 암호화 및 해독하는 작은 Mac 앱입니다. 데이터 보안 및 개인 정보 보호에 관심이 있는 사람들에게 없어서는 안 될 도구이지만 애착을 느끼는 종류의 도구는 아닙니다. 그럼에도 불구하고 Encrypto는 파일 위로 미끄러져 파일을 새로운 보안 엔터티로 변환하는 Matrix 스타일의 애니메이션 바 덕분에 디자인에 관한 한 내가 가장 좋아하는 MacPaw 앱입니다. 암호화가 실현됩니다. 더 이상 컴퓨터의 지루한 프로세스가 아닙니다. 매혹적인 디지털 마술입니다.

애니메이션은 또 다른 훌륭한 UI의 핵심입니다. 바로 휴대전화에 있는 앱인 Shazam입니다. Shazam을 사용하여 재생 중인 항목을 찾을 때 탭하는 버튼은 동심원을 바깥쪽과 안쪽으로 보내기 시작합니다. 고동치는 오디오 스피커와 유사한 이 인터페이스는 마치 강력한 사운드 시스템에서 좋아하는 앨범을 폭파하는 것처럼 인터페이스를 거의 유형적이고 물리적으로 만듭니다.

애니메이션에 대한 추가 정보: "기능적 애니메이션이 사용자 경험을 개선하는 방법".

예술은 어디에나 있다

Blair Culbreth가 주장하는 것처럼 세련된 인터페이스로는 더 이상 충분하지 않습니다. 세련되고 전문적인 디자인이 기대되지만 사용자가 미소를 짓고 친구에게 전달하는 것은 개인화되고 인간적인 세부 사항입니다. 커스텀 아트는 이 디테일이 될 수 있습니다.

일반적인 이미지와 달리 일러스트레이션은 의미 이상의 것을 전달하기 때문에 감성적입니다. 그것은 모든 사람들이 어린 시절에 보곤 했던 만화와 긍정적인 연관성을 전달하고 더 장난스럽고 상상력이 풍부한 방식으로 사물을 보여주며 가장 중요하게는 예술가의 개성을 담고 있습니다.

우리 제품 디자이너 중 한 명인 Max Kukurudziak은 "아티스트가 일러스트레이션을 만들 때 항상 자신의 개인적인 경험, 컨텍스트, 스토리를 일부 삽입한다고 생각합니다."라고 말합니다. 이론은 사실입니다. 인간의 접촉은 감정을 자극할 가능성이 더 큽니다.

UI의 그림: 쌍둥이자리 사진 및 Google 캘린더

최신 제품 중 하나인 Gemini Photos는 불필요한 사진을 지우는 데 도움이 되는 iPhone 앱입니다. 데스크탑용 Gemini 2와 마찬가지로 사용자를 위한 지루한 검토가 필요하므로 편리하고 멋진 UI를 사용하더라도 사용자의 주의를 끌고 일반적으로 기분을 좋게 만드는 데 어려움을 겪을 것입니다.

많은 이전 앱과 마찬가지로 애니메이션과 사운드를 사용하여 인터페이스에 활기를 불어넣었지만 사용자 지정 아트가 경험의 하이라이트가 되었습니다. 위에서 말했듯이 놀라운 즐거움이 그 행복의 화학 물질을 우리 혈액으로 유입시킨다는 것이 과학적으로 입증되었으므로 예상치 못한 부분에 기발한 일러스트레이션을 사용하여 빈 화면을 채우는 것이 아니라 약간의 즐거움을 더했습니다. 단조로운 활동.

일러스트레이션이 제품을 더 사랑스럽게 만드는 방법에 대한 또 다른 예는 Google 캘린더입니다. 최근까지 웹 버전과 iOS 앱 사이에는 눈에 띄는 차이가 있었습니다. 전자는 스프레드시트의 매력을 가지고 있었지만 후자는 하나의 치명적인 세부 사항으로 즉시 내 마음을 사로 잡았습니다. 많은 유형의 이벤트에 대해 Google 캘린더는 이벤트 제목에서 선택한 키워드를 기반으로 이벤트를 설명하는 아트에 들어갑니다. 그렇게 하면 일주일 동안의 계획이 훨씬 더 흥미진진해 보일 수 있습니다. 비록 당신이 할 일이 체육관과 치과 예약뿐인 경우에도 마찬가지입니다.

하지만 그게 최선은 아닙니다. 저는 새 이벤트를 만들 때마다 Google 캘린더에 아트가 포함되기를 은밀히 희망한다는 사실을 깨달았습니다. 그렇게 달력을 사용하는 것은 더 이상 필수가 아니었고 긍정적인 감정의 원천이 되었습니다. 그리고 분명히 일러스트레이션 실험은 나에게만 효과가 없었습니다. Google이 최근에 동일한 아트로 캘린더의 웹 버전을 출시했기 때문입니다.

삽화에 대한 추가 정보: Greg Houston의 "작동하는 그림: 예술적 및 상업적 성공을 위한 전문 기술".

어떤 캐릭터

제품을 가장하는 귀여운 캐릭터는 웹 디자인과 마케팅에서 수년 동안 사용되어 왔습니다(Ronald McDonald와 Michelin Man을 생각해 보십시오). 인터페이스에서 — 그다지 많지 않습니다. UI의 마스코트는 특히 사용자가 중요한 작업에서 주의를 흐트러뜨리거나 보기를 방해하는 경우 방해가 되고 성가신 것으로 인식될 수 있습니다. 마스코트가 잘못되었다는 악명 높은 예는 Microsoft의 Clippy입니다. 이것은 두려움과 혐오(물론 감정이지만 원하는 종류는 아님)만을 불러일으켰습니다.

동시에, 연구에 따르면 사람들은 단순한 기하학적 도형일지라도 사물을 쉽게 의인화합니다. 실물과 같은 생물은 더 쉽게 관계를 맺을 수 있고, 행동을 이해하고, 일반적으로 어떤 식으로든 느낄 수 있습니다. 게다가 애니메이션 캐릭터는 성격을 부여하기가 더 쉽기 때문에 해당 캐릭터를 통해 제품의 특성을 알릴 수 있습니다. 아직 개발되지 않은 잠재력을 가진 마스코트는 감성적이지 않은 제품에 적합합니다.

비결은 타이밍이다.

Clippy는 초대받지 않은 것처럼 보였고 완전히 관련 없는 작업을 중단했으며 일반적으로 방해가 되었기 때문에 매우 불쾌했습니다. 그러나 마스코트가 비교적 한가한 시간에 나타나면(예: 사용자가 방금 작업을 완료한 경우) 사랑스러운 작업을 수행할 것입니다.

UI의 마스코트: RememBear 및 Yelp

TunnelBear Inc.는 최근 버튼처럼 귀여운 또 다른 유틸리티를 베타 출시했습니다(말장난 없음). RememBear는 암호 관리자이며 암호는 농담이 아닙니다. 그러나 RememBear에서 곰 만화의 탁월함은 새 항목을 만드는 것과 같이 심각하고 중요한 일을 할 때 아무데도 보이지 않는다는 것입니다. 대신, 앱 등록의 1단계를 완료하고 아직 2단계(첫 번째 비밀번호 저장)로 진행하지 않은 경우 곰 포옹을 합니다. RememBear는 이 위치에 마스코트를 배치하여 방해를 피했지만 예상하지 못한 순간에 미소를 지었습니다.

RememBear와 마찬가지로 레스토랑 리뷰로 널리 알려진 Yelp는 마스코트를 위한 완벽한 타이밍을 가지고 있습니다. 재미있는 햄스터는 iOS 앱의 설정 하단에 처음 등장하여 사용자가 부활절 달걀처럼 발견할 수 있도록 했습니다.

Yelp의 제품 디자인 관리자인 Yoni De Beule은 “Yelp에서는 제품과 브랜드가 즐겁고 유쾌한 느낌을 주기 위해 항상 노력하고 있습니다. “우리는 재미있는 포스터 디자인과 재미있는 릴리스 노트부터 내부 해커톤 프로젝트 및 Yelp Elite 파티에 이르기까지 모든 것에 Yelp의 개성을 반영합니다. iPhone 설정 페이지에서 재미있는 부분이 심각하게 부족하다는 것을 알았을 때, 우리는 소매를 걷어붙이고 수정하기로 결정했습니다.”

iOS 앱의 햄스터는 나중에 팀이 Android 버전용 벨로시랩터와 웹용 개를 설계함에 따라 회사를 갖게 되었습니다. 따라서 언제 어디서든 Yelp를 사용하면 추천 항목이 거의 다 떨어지므로 다른 버전의 유쾌한 캐릭터를 볼 수 있습니다.

자신만의 마스코트를 만드는 방법을 배우고 싶다면 Envato Tuts+에서 Sirine(일명 'Miss ChatZ')의 멋진 튜토리얼이 있습니다.

마무리하기 위해…

모든 제품이 게임이나 소셜 미디어 앱처럼 본질적으로 재미있는 것은 아니지만 유틸리티조차도 단순히 실용적일 필요는 없습니다. 반복적인 작업을 처리하는 앱은 종종 사용자를 유지하는 데 어려움을 겪습니다. 사람들은 지루함을 느끼기 때문에 앱을 버리고 지루함은 단순히 자극이 부족하기 때문입니다. 유머, 움직임, 독특한 예술, 게임 요소, 공감할 수 있는 캐릭터와 같은 긍정적인 자극을 사용하여 우리는 사용자가 다른 방식으로 느끼도록 할 수 있습니다.

추가 읽기

• "감정적 디자인: 우리가 일상적인 것들을 사랑하는(또는 싫어하는) 이유", Don Norman
• "매혹적인 상호 작용 디자인: 재미있고, 재미있고, 효과적인 사용자 경험 만들기(중요한 음성)", Stephen P. Anderson