지루한 앱을 위한 5가지 감성 인터페이스
요약
지루한 앱을 위한 5가지 감성 인터페이스
1. 게이미피케이션
2. 유머
3. 애니메이션
4. 일러스트레이션
5. 마스코트
큰 노란색 튜브 뒤로 사라지는 1과 0의 줄무늬가 있다. 곰의 발톱 있는 발이 내 브라우저의 툴바를 가리킬 때 그 곰은 튜브를 찢고 튀어 오르고 헤드라인이 나타난다. "bear-owsing(브라우징)을 시작하세요!"
'어..'와 '오..'를 하는 사이에 나는 내가 브라우징 하려고 했던 것이 무엇인지 잊어버렸다.
VPN 서비스 같은 상품들은 애정 섞인 말이나 비슷한 다른 감정을 떠올리게 하는 일이 거의 없다. 그것은 그 서비스의 특성이나 목적이 아니다. 하지만 TunnelBear는 그러하기 때문에, 나는 다른 VPN이 아니라 TunnelBear를 선택하고 내 친구들에게도 추천하곤 한다. 그렇게 친구들은 일상적인 일을 하는 동안에도 웃음을 유지할 수 있다.
인간은 지루함을 오래 참을 수가 없다. 그것이 재미없고 반복적인 테스크를 위해 만들어진 상품들이 아주 자주 버려지거나 컴퓨터들과 전화기들 위에 먼지가 쌓이게 하는 이유다. 그러나 심리학자들에 따르면 지루함은 단지 자극의 부족 또는 만족스러운 활동에 대한 채워지지 않는 열망일 뿐이다. 그러니 사람들에게 자극을 주기 위해 인터페이스를 가미하면 어떨까?
나는 MacPaw에서 복제된 탐색기나 부호매김 앱 같은 같은 그다지 섹시하지 않은 것들을 디자인하는데 근무 시간을 보내는 프로덕트 디자이너들과 함께 있었고, 그들은 더 감성적인 UI를 만드는 5가지 비밀-게이미피케이션, 유머, 애니메이션, 일러스트레이션, 그리고 마스코트-을 공유해주었다.
사람들은 게임을 좋아한다
UI에 게이미피케이션을 사용하는 것을 두고 지속적인 논쟁이 있다. 예를 들어 24 empirical studies는 그것이 얼마나 효과적인가를 두고 다양한 결론에 도달했다. 그러나 효율성은 당신이 빛나는 성취 배지를 디자인함으로써 달성하려고 했던 목적에 따라 달라질 것이다.
Akar Sumset을 포함하여 많은 상품 크리에이터들을 위하여, 게이미피케이션의 요점은 사용자가 재미를 느끼게 하는 것이 아니다. 요점은 '재미라고 불리는 것'을 통하여 그들이 특정 행동을 하도록 부드럽게 유도하는 것이다. 성취, 순위, 순위표는 존경에 대한 인간의 기본적 욕구를 활용하며 경쟁을 촉발하고, 앱을 계속 사용하거나 꾸준히 들어오는 것, 소셜 미디어에 공유하는 것 같이 당신이 원하는 그들의 행동을 아마 하도록 만들 것이다.
게이미피케이션은 성공할 수도 있고 실패할 수도 있다. 하지만 확실히 감성적인 반응을 만들 수는 있다. 우리의 뇌는 행복의 주요 신경화학 물질 중 하나인 도파민 레벨을 컨트롤하는 세포들로 들어차 있다. 어떤 즐길 수 있는 것이 일어났을 때, 그 뉴런들은 활성화되고 도파민을 혈관으로 내려 보내게 만든다. 더 좋은 점은 그 즐거운 이벤트가 정기적이고 예상 가능할 때, 이벤트가 발생하기 전부터 도파민을 분비한다는 것이다. 이것이 당신의 인터페이스에 무엇을 의미하는가? 다음 성취 같은 즐거운 것에 대한 예상은 사용자들에게 상품 경험에 대한 작고 짜릿한 경험을 줄 것이다.
UI 게이미피케이션 : Gemini 2와 듀오링고
우리의 새로운 맥용 사본 탐색기 Gemini 2를 디자인할 때, 우리는 심각한 문제에 부딪혔다. 몇 기가바이트의 파일을 탐색하는 것이 심각하게 지루했기 때문에 어떤 사용자들은 그들이 탐색을 마치기 전에 그만두었다고 불평했다. 그래서 우리는 탐색 완료 시스템이 탐색을 마쳤을 때, 지루한 일을 해냈을 때의 단 하나 괜찮은 면인 to-do 리스트를 완료해서 지우게 되었을 때의 그 느낌을 강화하려고 했다. 기본 설정된 앱의 이름과 인터페이스의 디자인 테마는 게이미피케이션에 완벽했다. 우리의 고객은 스타워즈나 스타트렉과 함께 자라온 세대이기 때문에 SF에 영감 받은 랭킹 시스템은 그들을 매료시킬 것이었다.
출시 후 며칠 안에 우리는 마지막 탐색을 푸는 이스터 에그에 대한 힌트를 요청하는 사용자들의 트윗을 받기 시작했다. 1년 뒤에는, Gemini 2는 '명료하고 감성적인'인 다지인으로 레드 닷 디자인 어워즈에서 2개의 상을 탔다. 그러므로 우리의 탐색 시스템이 사람들을 얼마나 동기부여했는지는 측정하기 어려움에도 불구하고 최소한 사람들을 지루하게 만들지는 않은 게 분명했다.
다른 제품은 내가 지금까지 본 것 중에 가장 게임화된 인터페이스를 가지고 있었다. 언어 공부를 위한 온라인 서비스와 모바일 앱을 제공하는 듀오 링고가 그것이다. 사전 공부 없이 처음부터 외국어를 배우려고 하는 것은 두려운 일이다. 특히 선생님이 있다는 보장 없이 당신과 당신 컴퓨터만 있는 경우에 더 그렇다. 이 경우에 사람들이 얼마나 빨리 언어 공부에 대한 흥미를 잃어버리는지 (경험으로) 알기 때문에, 듀오링고는 사람들의 관심을 유지시키는 방법을 찾아야 했다. 여기에 그 방법이 있다.
당신이 짧은 5분 수업을 완료했을 때, 당신은 10 포인트를 얻는다. 30일 연속으로 수업을 들으면 어떨까? 성취를 얻는다. 한 번도 빠지지 않고 20개의 수업을 완료하면? 또 다른 것이 열린다. 당신의 모든 걸음마에 대해 당신의 감각은 달콤한, 달콤한 도파민을 부르는 승리의 소리와 컬러풀한 그래픽으로 보상받는다. 마침내 당신은 성취감과 자긍심으로 듀오링고에 소속감을 느끼기 시작한다. 그 감각은 당신이 서비스에 다시 접속하게 만든다.
당신이 게이미피케이션에 깊게 빠진다면, Gabe Zichermann의 책 " Gamification by Design: Implementing Game Mechanics in Web and Mobile Apps"가 좋은 시작점이 될 것이다.
농담이 필요하다
Victor Yocco는 기억에 남는 경험을 창조하고, 사용자들을 연결시키며, 당신의 작업물을 돋보이게 하는 툴로써 웹 디자인에서 유머를 사용하는 분명한 케이스를 만들어왔다. 그러나 농담의 가장 큰 힘은 그것이 감성적이라는 것이다. 우리는 여전히 유머의 본질을 완벽하게 이해하지는 못하지만 한 가지는 분명하다. 그것은 사람을 행복하게 만든다. 뇌 이미지 연구에 따르면 재미있는 만화는 식사, 음악, 섹스, 그리고 기분 전환용 약물에도 반응하는 대뇌 번연계의 보상 네트워크를 활성화시킨다. 달리 말하면, 재밌는 농담은 사람들을 기분 좋게 만든다.
당신의 인터페이스에 이런 종류의 리액션을 원하는가? 물론 그럴 것이다. 그러나 어려운 점은 이것이 단지 유머 자체의 문제일 뿐만 아니라 많은 맥락에 관계있다는 점이다. 런치 스크린에 말장난을 하는 것은 에러 메시지로 장난치는 것과 완전히 다르다. 모든 사람들이 어떤 종류의 유머를 사랑함에도 불구하고 당신의 고객이 누군지를 아는 것은 중요하다. 그들은 어떤 것은 매우 우습다고 느낄 것이며 어떤 것은 적절하지 않고, 상스럽거나 타이밍이 맞지 않아 보일 것이다. 실제 생활에서 농담을 하는 것과 다르지 않게 말이다.
유머 있는 UI : 어센틱 웨더와 슬랙
유머를 아주 잘 활용한 앱이 하나 있다. 단지 보조적인 재미 요소뿐만 아니라 그것을 유니크한 셀링 포인트로 사용한 어센틱 웨더다. 날씨 앱은 실용적인 상품에서 가장 좋은 예이다. 사람들은 그것을 통해 일정 기간 동안의 정보를 얻는다. 그러나 어센틱 웨더와 함께라면 당신은 더 많은 것을 얻을 수 있다. 날씨가 어떻든 간에, 그 앱은 "어는듯한 추위", "집에 가야 할 겨울" 그리고 내가 가장 좋아하는 "그냥 괜찮아. 더 알고 싶으면 밖을 봐." 같은 신랄한 표현으로 당신을 웃길 것이다.
당신이 어센틱 웨더를 사용할 때 당신은 단지 예보를 여는 것이 아니다. 당신은 다음에 무엇이 일어날지 보는 것을 원하게 되고 날씨를 체크하는 것 같은 일상적인 일이 아침에 고대될지도 모른다. 욕설과 경멸로 가득 찬 그 앱의 감정적인 논평은 우리 엄마에게는 덜 재밌을 것이다. 하지만 성격 나쁜 밀레니얼로서 나는 그게 재밌고 이것은 유머가 당신의 고객이 누군지 알 때 성공한다는 걸 증명한다.
다른 좋은 예가 슬랙이다. 사람들이 긴급한 업무에 대응할 수 있는 앱으로서 슬랙은 특히 그것의 농담 덕분에 딱딱한 작업에 더 인간적인 인터페이스를 창조했다. 화면을 로딩하는 것부터 대화를 모두 마칠 때까지 슬랙은 쉴 새 없이 농담을 한다.
다양한 인구통계학적 특징 때문에 유머는 통할 때도 있고 아닐 때도 있다. 그래서 슬랙은 안전하게 얼빠지고 부드러운 농담을 한다. 당신이 바닥에서 구를 정도로 웃기지는 않지만 짜증 나지도 공격적이지도 않은 그런 농담 말이다. 최상의 시나리오에서 사용자들은 빙긋 웃으며 스크린샷을 그들의 채널로 공유할 것이고 최악의 시나리오에는 그저 눈을 굴릴 것이다.
세상을 움직이게 하라
거의 대부분의 인터페이스는 애니메이션을 사용한다. 그것은 한 상태에서 다른 상태로 이동하는 자연스러운 방법이다. 그러나 UI에서 애니메이션은 상태의 변화를 인지시키는 것보다도 더 많은 목적이 있다. 관심을 유도하고 진행상황을 커뮤니케이션하는 것에 있어서 애니메이션은 정지된 비주얼이나 카피가 할 수 있는 것보다 더 많은 것을 할 수 있다. 동작은 시각적 배움, 운동학적 배움 모두를 자극하며 이것은 사용자가 더 잘 집중하고 앱 사용법을 더 잘 이해할 수 있다는 것을 의미한다.
이들은 모두 당신의 디자인에 애니메이션을 포함해야 할 좋은 이유들이다. 하지만 왜 정확히 애니메이션이 감정을 이끌어내는가? 우리의 앱 Encrypto와 Gemini에서 일하는 Simon Grozyan은 이것이 실물 세계에서 우리는 움직이는 것을 살아있다고 해석하기 때문이라고 믿는다.
"우리는 움직이는 것을 보는데 익숙해요. 우리를 둘러싼 모든 것들은 움직이거나 빛에 의해 모습을 바꾸고 있죠. 정지된 것은 죽은 것이에요."
살아 있는 듯한 퀄리티의 움직이는 물체의 애니메이션은 기쁨의 힘을 가지고 있고 예상치 못한 기쁨이 예상한 것보다 더 많이 우리를 즐겁게 한다. 그러므로 페이지 이동보다 덜 전형적인 장소에 이것을 사용함으로써 당신은 당신의 상품을 더 사용하기 재밌게 만들 수 있다.
UI 애니메이션 : Encrypto와 Shazam
Encrypto는 당신의 파일을 암호화하고 해독함으로써 당신이 그것들을 안전하게 공유할 수 있도록 해주는 맥 앱이다. 그것은 데이터 보안과 사생활을 신경 쓰는 사람들에게 필수적이지만 당신이 애착을 느낄만한 종류의 툴은 아니다. 그럼에도 불구하고 Encrypto는 파일을 미끄러져 지나가서 새로운 보안 문서로 변환시키는 매트릭스 스타일의 애니메이션 바 덕분에 내가 가장 좋아하는 MacPaw의 앱이다. 암호화는 생명을 얻었다. 그것은 더 이상 컴퓨터의 따분한 프로세스가 아니라 매혹적인 디지털 마법이다.
애니메이션은 또 하나의 멋진 UI, 아마 당신의 폰에도 깔려 있을 Shazam의 핵심이다. 당신이 어떤 노래를 틀지 찾기 위해 Shazam을 사용할 때, 당신이 누른 버튼은 동심원을 가진 원들을 안팤으로 보내기 시작한다. 고동치는 오디오 스피커와의 이 유사성은 인터페이스를 거의 실재하는 것처럼 만든다. 마치 당신이 가장 좋아하는 앨범을 강력한 사운드 시스템에서 폭발시키는 것처럼.
예술은 어디에나 있다
Blair Culbreth가 주장한 것처럼, 예쁘기만 한 것은 인터페이스로 더 이상 충분하지가 않다. 세련되고 프로페셔널한 디자인이지만 사용자들을 친구 앞에서처럼 웃게 하는 것은 개인화된 인간적인 디테일이다. 커스텀 아트가 이 디테일이 될 수 있다.
일반적인 상상과는 다르게, 일러스트레이션은 그것이 의미 자체보다 많은 것을 소통하기에 감정적이다. 그것은 모든 사람이 어린 시절에 봤을 만화와 함께 긍정적인 연상을 전달하고 대상을 더 장난기 많고 상상력 있으며 그리고 가장 중요하게, 예술가의 개성의 손길을 담아 보여준다.
예술가가 일러스트레이션을 창조할 때, 그들은 언제나 그들의 경험, 맥락, 스토리를 불어넣는다고 생각해요.
우리의 프로덕트 디자이너 중 한 명인 Max Kukurudziak은 말한다. 그 이론은 사실이다. 인간의 손길은 감정을 건드리기 더 쉽다.
UI 일러스트레이션 : Gemini Photos와 구글 캘린더
우리의 최신 상품 Gemini Photos는 필요 없는 사진을 지우게 도와주는 아이폰 앱이다. 데스크탑용 Gemini 2와 비슷하게 그것은 편리하고 깔끔한 UI에도 불구하고 사용자들로부터 지루하다는 평가를 받았고, 우리는 그들의 관심을 붙잡아 두고 그들을 편하게 만들기 위해 힘든 시간을 보냈다.
우리의 이전 앱들 다수처럼, 우리는 인터페이스를 생동감 있게 만들기 위해 애니메이션과 소리를 사용했다. 하지만 커스텀 아트가 사용자 경험의 하이라이트가 되었다. 위에서 말했듯이, 예상치 못한 즐거운 일들은 행복의 물질을 우리의 혈관에 밀어닥치게 만든다. 그러므로 변덕스러운 일러스트레이션을 예상치 못한 장소에 사용함으로써 우리는 단지 빈 공간을 채우는 것만이 아니라 모노톤의 활동에 즐거움을 더해주게 된다.
일러스트레이션이 상품을 어떻게 더 사랑스럽게 만드는지 보여주는 추가적인 예가 바로 구글 캘린더다. 최근까지 웹 버전과 iOS 앱 버전 간에는 충격적인 차이가 있었다. 전자가 스프레드시트의 모습이라면, 후자는 킬러 디테일로 내 마음을 단숨에 빼앗아버렸다. 많은 이벤트의 타입을 위해, 구글 캘린더는 이벤트 타이틀에서 뽑아낸 키워드에 기반해서 그들을 묘사하는 아트를 넣었다. 그럼으로써, 한주의 계획은, 그것이 설령 피트니스 센터에 가거나 치과에 가는 것일지라도, 더 신나 보이게 된다.
하지만 그것이 최고의 특징은 아니다. 새로운 이벤트를 생성할 때마다 나는 구글 캘린더가 그것을 위한 아트를 만들어줌으로써 기쁨을 느낄 수 있게 되기를 비밀스럽게 바라고 있다는 것을 깨달았다. 그것처럼, 캘린더를 쓰는 것이 필요에 의한 것이 아니라 긍정적 감정의 원천이 되었다. 그리고 구글이 동일한 아트를 웹 버전에도 넣은 것을 보니 이 일러스트레이션 실험이 나에게만 효과가 있는 것은 아닌 것 같다.
캐릭터
상품을 가장한 귀여운 캐릭터는 웹 디자인과 마케팅에 오랜 세월 사용되어 왔다(로날드 맥도널드와 미쉘린 맨을 생각해 보자). 인터페이스에서는 그만큼 자주는 아니었다. UI 마스코트는 특히 그들이 중요한 액션으로부터 사용자를 막을 때나 뷰잉을 방해할 때 거슬리고 짜증 나는 것으로 인식되었다. 마스코트가 잘못 사용된 악명 높은 예는 마이크로소프트의 Clippy이다. 그것은 공포와 혐오감만 유발했다. (물론, 그것도 감정이긴 하지만 당신이 찾는 종류의 것은 아닐 것이다.)
동시에 연구들은 사람들이 대상을 쉽게 의인화한다는 것을 보여준다. 그것이 단지 기하학적인 모양일지라도 말이다. 실물과 똑같은 창작물들은 행동이 쉽게 이해되고 어떤 방식으로 느껴지기 쉽다. 더욱이 애니메이션화 된 캐릭터는 개성을 부여하기가 쉬워서 당신은 캐릭터를 통해 당신 상품의 특성을 보여줄 수 있다. 장난스럽고 바보 같고 열정적이면서 도움이 되는 특성 또는 당신이 원하는 것 어느 것이나 상품에 부여할 수가 있다. 아직 발현되지 않은 많은 가능성과 함께 마스코트는 감성 없는 상품을 위한 완벽한 선택일 수 있다.
이 트릭은 타이밍이다.
Clippy는 불청객처럼 생긴 데다가 그것과 전혀 관련 없는 작업을 방해했기 때문에 아주 불쾌했다. 하지만 그 마스코트가 예를 들어 이용자가 작업을 방금 완료했을 때 같은 상대적으로 이상적인 순간에 나타난다면 사랑스러울 것이다.
UI 마스코트 : RememBear와 옐프
TunnelBear Inc는 최근에 버튼처럼 귀여운 다른 유틸리티를 베타 론칭했다(의도된 말장난은 아니다). RememBear는 비밀번호 관리자고 패스워드는 장난 거리가 아니다. RememBear의 탁월한 점은 당신이 신규 가입을 할 때 같은 진지하고 중요한 일을 할 때는 곰 만화가 없다는 것이다. 대신에 앱 로그인 단계 중 하나를 완료하고 두 번째 단계-첫 번째 비밀 번호를 저장하는- 단계는 아직 진행하지 않았을 때 당신은 곰의 포옹을 받을 수 있다. 마스코트를 이 지점에 위치시킴으로써 RememBear는 행동을 방해하지 않으면서도 내가 기대한 순간에 나를 웃음 짓게 만들었다.
RemeBear 앱처럼 레스토랑 리뷰로 널리 알려진 옐프 앱도 마스코트를 완벽한 타이밍에 사용한다. 재밌게 생긴 햄스터가 iOS 앱 세팅의 아래에 처음으로 나타나면 사용자들은 그것이 이스터 에그처럼 보일 것이다.
"우리는 우리 상품과 브랜드를 재밌고 즐거운 것으로 만드려고 언제나 노력합니다." 옐프의 프로덕트 디자인 매니저인 Yoni De Beule은 말한다.. "우리는 재미있는 포스터 디자인과 웃긴 릴리즈 노트부터 내부 해커톤 프로젝트와 옐프 엘리트 파티까지 모든 것에 옐프의 개성을 반영합니다. 재미가 심각하게 결여된 아이폰 세팅 페이지를 봤을 때, 우리는 소매를 걷어 올리고 그것을 고치기로 결정했습니다."
iOS 앱의 햄스터는 안드로이드 앱의 작은 공룡, 웹의 강아지라는 동료를 얻었다. 그러므로 당신이 옐프를 쓸 때마다 어디에서나, 당신은 기분 좋은 캐릭터의 다른 버전을 볼 수 있도록 레스토랑 추천이 바닥 나기를 바랄지도 모른다.
당신만의 마스코트를 만드는 것을 배우고 싶다면 Envato Tuts+에 올려진 Sirine (Miss ChatZ라고 알려진)의 튜토리얼을 참고하라.
마치며
모든 상품이 게임이나 소셜 미디어 앱처럼 태생적으로 재밌지는 않지만 실용성 앱조차도 그저 실용적이기만 할 필요는 없다. 반복적인 업무를 다루는 앱은 종종 사용자를 유지하기 위해 몸부림친다. 사람들은 그들이 지루하기 때문에 버리게 되는데, 지루함은 단지 자극의 부족일 뿐이다. 유머, 동작, 독특한 아트, 게임 요소, 그리고 연관성 있는 캐릭터 같은 긍정적 자극을 사용하여 우리는 사용자들이 더 신나고, 덜 방해받고 그리고 궁극적으로 행복하게 느끼도록 만들 수 있다.
이 글은 아래 원문의 번역입니다.
저자 : Smashing Magazine
번역자 : 곽나래
원문 링크 : https://medium.com/@smashingmag/how-to-design-emotional-interfaces-for-boring-apps-8f09389103ef
