감성적인 UI 디자인하기
*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
요약
디지털 제품을 사용자의 기억에 남게 만드는 작은 디테일, ‘감성’. 저자는 감성을 자극하는 디지털 제품의 사례를 크게 5가지로 나누어 이를 중점으로 설명하고 있습니다.
목차
1.사용자 욕구의 피라미드
2.디지털 제품에서 감성을 자극하는 방법
1) 감성적 반응
2) 기분 추적기
3) 경험 평가
4) 애니모지, AR 마스크 및 상황별 AR 힌트
5) 몰입형 대화경험
감성은 우리의 삶에 아주 큰 역할을 한다. 사람은 이성적이면서도 감성적이다. 많은 사람은 사람들과 교류하는 것처럼, 디지털 기기와도 상호작용하고 싶어 한다. 좋은 제품을 만드는 것은 더는 사용성만으로 부족해졌다. 사용자의 마음에 긍정적인 정서적 반응을 불러일으키는 것도 중요하다.
기술은 사람을 행복하게
해줄 때 가장 좋다.
이 글에서는 디자이너가 제품에 도입한, 사용자의 기분을 좋게 만드는 작은 디테일에 초점을 맞추고 싶다.
1. 사용자 욕구의 피라미드
디자이너 제품을 만들 때 감성적 반응을 일으키는 것을 가장 먼저 생각하지는 않는다.
Designing for Emotion의 저자인 아론 윌터(Aarron Walter)는 매슬로우(Maslow)의 5대 욕구 계층 구조를 활용하여 사용자 욕구의 피라미드를 만들었다. 이 피라미드의 하단에서는 어떤 제품의 기본적 특징인 기능성(이 제품이 작동하는가?)을 볼 수 있다. 다음은 신뢰성(이 제품을 신뢰할 수 있는가?), 사용성(이 제품이 사용하기 쉬운가?), 마지막으로 즐거움(이 제품을 사용할 때 즐거운가?)이다. 즐거운 경험을 주는 제품은 사용자와 감성적으로 연결되며, 이를 통해 사용자는 이 제품을 점점 더 자주 쓰고 싶어한다.
아론 윌터의 사용자 욕구 피라미드그러나 디지털 제품에서 감성의 힘은 즐거운 경험을 제공하는 것 이상으로, 더욱더 기억에 남게 만들고, 이를 통해 전환을 유도하며 때로는 새로운 사용자 습관을 만들어낸다. 이것이 우리가 아는 세계 최고의 제품들이 감성적으로 디자인된 이유이다.
2. 디지털 제품에서 감성을 자극하는 방법
1) 감성적 반응
최근, 시중에 나와 있는 많은 제품은 사람의 자연스러운 반응을 모방한, 사소하지만 정교한 애니메이션 효과들로 상호작용을 만들어낸다. 한 가지 좋은 예시로, 애플의 iOS는 잘못된 암호를 입력할 때 흔들림을 사용한다. 이 단순한 애니메이션 효과는 사람들이 "아니오"라고 말하고 싶을 때 행동하는 머리 흔들기와 비슷하다.
'No'라고 말하는 대니 데비토
이 놀라운 오류 상태는 텍스트가 필요하지 않다. 사용자가 그 의미를 쉽게 해독할 수 있기 때문이다. 이미지 출처: cocoadocs
2) 기분 추적기(Mood Tracker)
“어떻게 지내세요?” 혹은 “오늘 기분이 어떠세요?”는 서로 만날 때 묻는 흔한 질문이다. 디지털 기기와 상호작용할 때, 우리의 현재 기분은 우리가 소비하고자 하는 많은 콘텐츠와 다른 상호작용의 측면에서 영향을 준다.
AI와 머신러닝이 발전함에 따라, 가까운 미래에 디지털 제품은 사용자가 알지도 못하는 사이에 자동으로 기분을 감지할 수 있을 것이다. 피터 스마트(Peter Smart)는 그의 훌륭한 프레젠테이션에서 앱이 어떻게 우리의 기분을 자동으로 추적할 수 있는지에 대한 그의 생각을 공유했다.
https://www.youtube.com/watch?v=so4A_XmOliI&feature=youtu.be
Peter Smart: The Future of the Web and How to Prepare for it Now
음성 기반 상호작용이 증가함에 따라, 차세대 사용자 인터페이스는 다음과 같아 보일 것이다.
인간의 감정을 인식하는 인공지능 Gleb Kuznetsov
Spikey sanju가 참여한 기분 추적기 앱
DeVon Randall의 자동화 감정 앱
Vicki Tan의 헤드 스페이스 체크인
Jon Vieira의 감정 시각화
3) 경험 평가
"경험을 평가해주세요"라는 질문은 아마 서비스 피드백에서 가장 보편적일 것이다. 대부분의 제품 디자이너는 이를 위해 빠른 설문 조사를 이용한다. 그러나 설문조사는 사용자를 지루하게 하거나, 작업을 완료하도록 동기를 부여하기 힘들다.
고객 설문 조사의 예창의력을 약간 발휘하면 지루한 과정을 재미있고 매력적으로 바꿀 수 있다. 이를 위해 최신 기술을 사용할 필요도 없으니 일거양득이다. 기존의 UI 컴포넌트(ex. 슬라이더)나 인기 있는 이모지, 작은 애니메이션 효과만 사용하면 된다.
Aaron Iker의 평가 슬라이더
Ketan의 페이지 상호작용 리뷰
Adip Nayak의 피드백
한 걸음 더 나아가, 제스처 기반의 대화형 기능을 사용하여 예상치 못한 동작을 만들어낼 수 있다.
Yaroslav Zubko의 서브 레벨 슬라이더
4) 애니모지, AR 마스크 및 상황별 AR 힌트
카메라는 모바일 기기를 위한 새로운 키보드이다. 많은 디자이너 카메라를 사용하여 AR 마스크나 애니모지처럼 사용자들에게 감정을 표현하는 새로운 방식을 만든다. 단순한 기능은 사용자 경험에 큰 영향을 미친다. 이로써 사용자는 자신의 개성을 표현할 수 있을 것이다.
이미지 출처: 애플
이미지 출처: Forbes
하지만 많은 전통적인 경험에서 카메라가 사용될 수 있다. 예컨대, 도시에서의 내비게이션과 같은 광범위한 예를 들 수 있고, 상호작용하는 과정에서 감정을 불어넣어서 사용자가 더 기억에 남도록 만들 수 있다. Google I/O 2018에서 구글은 구글 AR 렌즈를 이용한 흥미진진한 탐색 경험을 보여주었다. AR 여우는 사람들이 도시를 둘러보는 데 사용되었다.
https://www.youtube.com/watch?v=8fe6AYT5Aqg&feature=youtu.be
5) 몰입형 대화경험
많은 디자이너 몰입형 경험이 증강현실이나 가상현실에서만 가능하다고 생각한다. 하지만 실제론 그렇지 않다. 실제로 몰입형 경험은 이야기에 참여하고 사용자가 캐릭터에게 느끼는 공감에 대한 것이다. 따라서 몰입 형 경험은 기술 자체보다는 스토리 텔링이다. 좋은 예시로 The Boat가 있다. 패럴랙스 스크롤링을 소리와 함께 사용해 몰입감을 자아낸다.
훌륭한 사용자 경험을 만들고자 하는 사람은 항상 사용자의 감정을 고려해야 한다. IDF는 디자인의 총체적인 관점을 만드는 데 도움을 줄 것이다.
저자 : Nick Babich
원문 링크: https://uxplanet.org/designing-emotional-ui-b11fa0fda5c
번역자 : 이지은
검수자 : Jihong Kim
*무단 전재 및 재배포 금지(링크 공유 가능)
큐레이팅 멘트
감정을 기록하는 일기 어플리케이션을 아시나요? 최근, 이와 같은 감정으로 상호작용하는 어플리케이션이 많이 등장하고 있습니다. 저는 애플이 패스워드 오류를 표시하는 방식이 감정을 모방한 인터랙션이라는 게 놀라웠어요. 사람들의 기억에 남게 만드는 작은 차이점은 감성적인 경험에 있다는 것, 이것이 저자가 전달하고자 하는 키 포인트이자, 제가 이 글을 선정한 이유입니다.
