UI 디자인을 위한 UX 원칙 5가지
디자인 독학하기 02
UI/UX 디자인 경험을 공유합니다 :)
[Contents]
01 실무 UX 디자인의 정의
02 모바일 UI 디자인을 위한 UX 원칙
1_ [대원칙] 쉽고, 쉽고, 쉽게
2_ 단순하게
3_ 자연스럽게
4_ 사용자 중심 글쓰기
5_ 버튼의 원칙
03 참고자료
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
최근 한 IT 스타트업에서 UI/UX 디자이너로 일하기 시작했다. 스타트업인 만큼 입사 첫날부터 바로 실무에 투입됐다. 가장 먼저 해야겠다고 마음먹은 프로젝트는 '디자인 시스템 구축'이다. 우리 회사는 '린 스타트업(LEAN START-UP)'을 지향한다. 즉 가설을 바탕으로 앱을 개선하고 가설이 옳은지 빠르게 검증하는 프로젝트를 짧은 주기로 반복하며, 사용자 친화적인 앱을 만드는 걸 목표로 한다. 이를 위해서는 디자이너와 개발자 사이의 효율적인 의사소통이 필요하기에, 의사소통을 돕는 디자인 시스템이 반드시 있어야 했다.
디자인 시스템은 크게 둘로 나눴다. 하나는 'UX 원칙'이고, 다른 하나는 'GUI 시스템'이다. GUI 시스템을 구축하기 위해서는 먼저 기존 앱의 UX를 전반적으로 개선한 새로운 디자인이 필요하다고 생각했다. 따라서 둘 중 UX 원칙을 먼저 만드는 것으로 순서가 자연스럽게 결정됐다.
01 실무 UX 디자인의 정의
사용자 경험(User eXperiecne)을 뜻하는 UX는 디자인, 마케팅 등 분야를 막론하고 핫한 개념이다. 하지만 UX를 막연하다고 느끼기 쉽다. UI(User Interface)처럼 실체가 있지 않기 때문이다.
이상용의 '사용자 경험 이야기'라는 책에서는 사용자 경험을 '특정한 디자인과 사용자가 상호작용할 때 얻게 되는 경험의 품질'이라고 정의하고 있다. UX 디자인이 사용자의 니즈(Needs)를 발견해서 적용하는 디자인 전략의 하나라고 덧붙이면서 UX 디자인 프로세스에 대해 자세하게 설명하고 있다.
하지만 스타트업 실무 디자인에 적용하기는 힘들어 보였다. 큰 UX 조직이 아니면 적용하기 어려워 보이는 프로세스였다. 내 환경에 맞는 실무 UX 디자인의 정의가 필요했다. 그렇지 않으면 UX 디자인은 추상적인 개념일 뿐이었다.
나는 실무 UX 디자인을 아래와 같이 정의했다.
실무 UX 디자인의 정의(ver 1.0)
'디자인 의도'를 명확하게 설명할 수 있는 디자인
나는 실무 UX 디자인이 디자이너가 '왜 이렇게 디자인했는지' 의도를 설명할 수 있는 디자인이라고 생각한다. 바꿔 말하면, 사용자가 겪고 있는 문제를 해결할 수 있는 방법을 명확한 근거를 바탕으로 제시할 수 있는 디자인이다. 회원가입을 쉽게 만드는 UI/UX 디자인을 공부하며 깨달았던 내용인데, UI/UX 디자인을 공부하면 공부할수록 맞다는 생각이 든다.
실무에서 디자이너는 크게 둘을 '설득'해야 한다. 하나는 사용자(1)고, 다른 하나는 동료(2)다. 사용자가 무의식 중에 설득당하도록, 동료들이 납득할 수 있도록 디자인해야 한다.
(1)UI/UX 디자이너는 자연스러운 '사용자 여정(User Journey)'과 쉬운 'UI 화면'을 설계해 사용자에게 좋은 사용자 경험을 줘야 한다. 자연스러운 사용자 여정과 쉬운 UI 화면은 UX 연구를 바탕으로 디자인(설계)할 수 있다. 디자이너가 의도한 대로 서비스를 이용하게 만들어 사용자가 좋은 경험을 한다면, 서비스를 계속 쓰도록 자연스럽게 설득할 수 있다. 난 좋은 UI/UX 디자인에는 사용자가 서비스를 이용하도록 설득하는 힘이 있다고 믿는다.
(2)실무에서 동료에게 내 디자인이 좋은 디자인이라고 설득하는 건 정말 중요하다. UI/UX 디자인의 궁극적인 목표는 사용자의 좋은 경험이지만, 사용자에게 내 디자인을 선보이기 위해서는 동료들에게 먼저 내 디자인을 인정받아야 한다. UX 연구는 동료들에게 내 디자인 의도를 명확하게 전할 수 있는 객관적인 근거다.
동료의 '왜 이렇게 디자인했는지?'라는 질문에 대해 '예쁘잖아요'라는 대답만으로 내 디자인이 '좋은 디자인'이라고 말할 수 있는 시대는 지났다. 적어도 모바일 환경에서는 '예쁘기만 한 디자인'은 '좋은 디자인'이 아니다. '이 사용자 여정(User Journey)은 왜 이렇게 진행되지?' '이 버튼은 왜 여기에 있고, 색은 왜 이렇지?' '이 구성요소(Component)의 크기(Size)는 왜 이렇지?'라는 질문에 대한 답을 UX 연구를 통해 얻을 수 있다.
모바일 UI 디자인은 작은 스마트폰 화면 안에 여러 요소를 넣어야 한다. 스마트폰이 나오기 전의 디자인(e.g. 과거의 웹디자인)을 그대로 적용하면 너무 복잡해져서 사용성이 크게 떨어진다. 모바일 UI 디자인은 미적인 측면보다는 기능적인 측면에서 접근하려는 노력이 필요하다. (덧. UX 연구는 모바일을 넘어 다양한 분야에서 큰 변화를 이끌고 있다.)
UX 디자인은 디자이너의 감각이 아닌 UX 연구라는 명확한 근거(데이터 분석, UX 연구 자료, 사용자 테스트)를 바탕으로 한 디자인이라 볼 수 있다. 디자이너 스스로에게 본인의 디자인이 맞다는, 좋은 디자인이라는 확신을 줄 뿐만 아니라 동료에게는 왜 이렇게 디자인해야 하는지 명확하게 설명할 수 있게 해주며, 궁극적으로 사용자에게 좋은 사용 경험을 준다.
정리하면, 실무 UX 디자인은 (1)사용자가 디자인 의도를 자연스럽게 느끼며 쉽게 서비스를 이용할 수 있는 디자인, (2)동료들이 내 디자인 의도를 명확하게 이해하고 좋은 디자인이라고 느낄 수 있는 디자인이다.
(+) 비즈니스 임팩트를 주는 디자인
기업의 기본 목적은 '이윤 극대화'다. 이 관점에서 UX 실무 디자인은 사용자가 우리 서비스(e.g. 앱)의 가치를 깨닫고 이용하도록 만들어 회사가 이윤을 창출할 수 있도록 만드는 일이라고도 볼 수 있다. 이는 콘텐츠 플랫폼 퍼블리(PUBLY)에서 배재민 마이리얼트립 디자인 팀장의 인터뷰를 보고 얻은 인사이트다.
이 인터뷰에서 배재민 팀장은 '비즈니스 임팩트(Business Impact)'를 주는 디자인을 강조하고 있다. 디자인을 바꿔 매출이나 핵심 지표에 영향을 줄 때 비즈니스 임팩트가 발생했다고 볼 수 있는데, 배 팀장은 부킹닷컴(Booking.com) 연계 판매를 예로 들었다.
마이리얼트립에서는 호텔 상품을 부킹닷컴과 연계해 판매하는데, 기존에는 마이리얼트립에서 부킹닷컴 홈페이지로 이동하는 링크만 있었다. 배 팀장은 '마이리얼트립에서 구체적인 옵션을 미리 정해 부킹닷컴으로 보내면 사용자가 구매할 확률이 높아지지 않을까?'라는 가설을 세웠고, 실제로 가설에 따라 디자인을 구현했는데 예약 수와 매출이 크게 올라갔다.
사용자가 인원, 기간 같은 필수 옵션을 미리 정하도록 디자인을 바꾸자 예약 수와 매출이 크게 올라갔다.(출처: 마이리얼트립 홈페이지 캡처)배 팀장은 다른 예로 크로스셀링(Cross-Selling)을 들었다. 크로스셀링은 사용자가 구매하려는 상품과 연관된 상품을 연속적으로 구매하도록 유도하는 마케팅 전략이다. 배 팀장은 "크로스셀링을 할 수 있게 만드는 건 전적으로 화면의 몫"이라며, 사용자가 모바일이나 웹에서 자연스럽게 연관 상품을 살 수 있도록 UI를 디자인해 비즈니스 임펙트를 줄 수 있다고 설명했다.
애플은 상품을 장바구니에 담으면 연관 상품을 추천해 크로스셀링을 유도한다. (출처: 애플스토어 캡처)비즈니스 임펙트를 주는 디자인도 의도를 명확하게 설명할 수 있는 디자인이라는 실무 UX 디자인 정의의 범주에 들어간다. '회사의 매출을 올려주는 디자인'이라는 명확한 의도가 있기 때문이다.
(+) UX 디자인의 객관적 평가는 어떻게?
현재 나는 작은 프로젝트를 짧은 주기로 반복하며 우리 앱의 디자인을 개선하고 있다. 각 프로젝트마다 KPI(Key Performance Indicator, 핵심 성과 지표)를 정해 개선한 디자인이 KPI에 어떤 영향을 미쳤는지 데이터의 변화를 관찰할 계획이다. 그래야 사용자가 내가 의도한 대로 앱을 쓰고 있는지 파악할 수 있다.
아래 이미지는 우리 앱의 핵심 서비스라고 할 수 있는 '사이즈 필터' 화면이다. 왼쪽이 원래 디자인, 오른쪽이 개선한 디자인이다. 여기에서 내가 잡은 KPI는 2가지다. 첫 번째 KPI는 화면 가장 아래에 있는 버튼을 누른 횟수, 두 번째는 '내옷 추가' 버튼을 누른 횟수다.
개선한 디자인이 실제로 사용자에게 어떻게 다가갔는지 확인하기 위해서는 KPI를 정해 데이터를 관찰해야 한다.우리 앱의 핵심 서비스로 이어지는 두 버튼이기에 사용자가 이를 이용하도록 만드는 게 중요했다. 이 횟수들이 기존보다 늘어나면 내가 의도한 대로 사용자가 앱을 이용하고 있다고 볼 수 있다. 늘어나지 않는다면 그 이유를 분석해 새로운 디자인으로 사용자에게 다가가야 한다.
실무 UX 디자인을 구체적으로 정의하니, UI/UX 디자인을 어떻게 해나가야 할지 방향이 분명히 잡혔다. 나는 이를 토대로 UX 디자인 원칙 5가지를 세웠다.
02 모바일 UI 디자인을 위한 UX 원칙(ver 1.0)
1_ [대원칙] 쉽고, 쉽고, 쉽게
모바일 UI 디자인은 쉽고, 쉽고, 쉬워야 한다.
2_ 단순하게
1 Thing / 1 Page
사용자에게 다양한 정보를 한꺼번에 보여주거나, 여러 선택지를 주면 사용자는 혼란스럽다. 모바일 화면은 작기 때문에 모니터 화면보다 더 혼란스럽게 느낀다. 따라서 사용자에게 한 화면에서 한 가지만을 분명하게 요구하는 게 좋다. 나는 사용자가 맞닥뜨린 화면에서 무엇을 하면 되는지 쉽게 알아볼 수 있도록 '1 Thing / 1 Page' 원칙을 세웠다.
모바일 UI에서 단순한 디자인이 사용성을 높인다는 근거로 힉의 법칙(Hick's Law)을 들 수 있다. 힉의 법칙은 선택해야 할 가짓수가 많아질수록 의사결정 시간이 느려진다는 심리학 법칙이다. 이 법칙에 따르면 아래 이미지에서 왼쪽에서 오른쪽으로 갈수록 사용자는 쉽고 빠르게 의사결정을 할 수 있으며, 사용성이 높아진다.
같은 맥락에서 불필요하거나 중복되는 기능과 버튼을 줄이는 게 사용성을 높인다. 시각적인 잡음(Visual Noise)을 없애는 것이다. 글씨의 크기와 굵기, 구성 요소의 배치를 정리해 시각적인 잡음을 줄일 수도 있다. 모바일은 화면이 작기 때문에 시각적 잡음을 최소화하고 사용자가 콘텐츠나 기능에 집중할 수 있도록 디자인해야 한다. 한 화면에서 한 가지 일만 할 수 있도록 만드는 것이다.
아래 이미지는 우리 앱의 쇼핑 필터 디자인 개선 전/후 이미지인데 불필요한 버튼을 없애고, 텍스트와 정렬을 정리해 시각적인 잡음을 줄였다.
필터 디자인을 개선했다. 아래에 개선 이유를 자세히 정리했다.(1) 불필요한 기능인 'x' 제거
x 버튼은 필터를 닫는 역할을 하는데, 필터 수치를 조정하지 않고 '필터 적용' 버튼을 누르는 것과 중복되는 기능이므로 뺐다.
(2) 불필요한 텍스트인 '가격 필터' 제거
사용자는 이미 필터라는 걸 인지하고 이 화면을 보기 때문에, 이 화면이 무엇을 뜻하는지 다시 알려줄 필요는 없다. 이 텍스트는 시각적인 잡음을 발생시켜 사용성을 떨어뜨린다.
(3) 초기화 버튼 이동
초기화 버튼을 아래 주요 버튼 왼쪽 공간으로 옮겼다. 필터에서 초기화 버튼은 필요하므로 없앨 수는 없다. 주요 버튼과는 색의 투명도를 조절해 계층을 나눠 구분했다.
(4) 가격과 순서 필터 통합
기존 디자인에서는 가격 필터와 순서 필터(인기순, 높은 가격순, 낮은 가격순)가 구분돼 있었다. 둘 다 단순한 필터였기 때문에 하나로 통합했다. 필터 아이콘을 새롭게 추가해 필터 화면으로 들어올 수 있게 했다. 기존 디자인에서는 사용자가 필터라고 인지하기 힘든 버튼으로 돼 있었기에, 필터 아이콘을 새로 그려 사용자가 필터를 명확하게 인지할 수 있도록 한 것이다. 가격을 조정하는 필터 버튼(< >)의 크기는 뒤에 나오는 5번째 UX 원칙 '버튼의 원칙'에 따라 44*44px로 크기를 조정했다.
(5) 주요 버튼 개선
주요 버튼은 '필터 적용'이라는 딱딱한 문구 대신, 이 버튼을 누른 뒤 나타나는 화면을 알 수 있도록 '하의 4,388개 보기'로 바꿨다. 여기서 필터를 조정하면, 아래 주요 버튼 문구의 수치(4,388개)가 필터가 적용된 후 상품 개수로 바뀌도록 했다. 사용자는 필터가 적용되며 바뀌는 상품 개수를 실시간으로 알 수 있어서 쇼핑 경험이 좋아진다.
3_ 자연스럽게
자연스러운 사용자 행동을 유도한다.
UX 디자이너는 사용자가 자연스럽게(직관적으로) 서비스를 이용할 수 있도록 '사용자 여정(User Journey)'을 설계해야 한다. 간단하게 예를 들면, 사용자가 '이전(<)' 버튼을 눌렀는데 이전이 아닌 다른 화면으로 간다면 사용자는 당황스럽고, 사용성은 크게 낮아진다. 사용자 여정이 이상하게 설계된 것이다.
사용자가 고민 없이 '자연스럽게' 앱을 이용할 수 있도록 하려면 적재적소에 '어포던스(Affordance, 행동 유도)'를 줘야 한다. 사용자를 학습시키는 것보다 좋은 어포던스로 행동을 유도하는 게 사용성을 높인다. 앞서 소개한 책 '사용자 경험 이야기'에서는 어포던스가 좋은 디자인은 사용자가 화면(혹은 제품)을 보기만 해도 어떻게 사용할지 알 수 있다고 설명하고 있다. 어포던스가 잘 디자인돼 있다면 사용자는 디자이너가 의도한 대로 앱을 이용할 수 있게 되며, 좋은 사용 경험을 할 가능성이 높아진다.
이 UX 원칙의 근거로 넛지 이론(Nudge Theory)을 들 수 있다. Nudge는 '슬쩍 찌르다'라는 뜻으로, 넛지 이론은 사용자(고객)에게 무엇을 강요하지 않고 자연스럽게 행동을 유도하는 효과를 뜻한다. 대표적인 사례는 네덜란드 암스테르담 국제공항 남자 소변기 중앙에 그려놓은 파리 그림이 가져온 결과다. 소변기에 파리를 그려놓자 집중력이 높아져 변기 밖으로 튀는 소변의 양이 80% 정도 줄어 화장실 청소가 쉬워졌다.
CTA(Call-To-Action) 버튼처럼 구매나 가입 전환을 일으키는 중요한 버튼은 사용자의 눈에 띄도록 만들어 쉽게 찾을 수 있도록 하는 게 중요하다. 매출 발생이나 회원 전환이 일어나도록 자연스럽게 행동을 유도하는 것이다(=어포던스를 주는 것이다). 이런 버튼은 기본에 충실하게 디자인한 앱이나 웹이라면 어디서든 쉽게 볼 수 있다. 근거로 고립 효과(Von Restorff effect)를 들 수 있다. 고립 효과는 비슷한 여러 물체가 있을 때, 다르게 생긴 하나가 특히 기억에 남는다는 심리학 이론이다. 아래 이미지를 보면 쉽게 이해할 수 있다.
(+) 자연스러운 UX 개선의 필요성
익숙함 vs 새로움
사용자 여정이나 단일 화면의 UI를 다시 설계할 때, 디자인을 한 번에 극적으로 바꾸는 건 깊이 고민하고 결정해야 한다. 사용자의 '익숙함' 때문이다. 주변 사람들에게 물어봤을 때 대부분 극적으로 바뀌는 UI/UX에 거부감을 느꼈다. 새로운 UI/UX에 적응해야 하는 데서 스트레스를 느끼는 것이다.
특히 사용자가 많은 서비스일수록 UI/UX를 극적으로 바꾸는 일을 경계해야 한다. 대표적인 예로 최근에 있었던 네이버 앱 개편이 있다. 앱 개편 공지 포스트의 댓글을 봤을 때, 좋다는 의견과 나쁘다는 의견이 극단적으로 갈린다. 얼핏 훑어봤을 때는 원래대로 돌려달라는 의견도 많았다.
현재(2019년 5월 20일 기준) 네이버 앱은 설정에서 이전 버전과 과거 버전 중 원하는 버전을 선택해 쓸 수 있도록 하고 있다. 상황에 따라 다르겠지만 UI/UX 디자인의 극단적인 변화가 필요할 때는 단계를 나눠 서서히 바꿔야, 사용자가 자연스럽게 받아들일 수 있지 않을까?
극적으로 바꾼 UI/UX는 신중히 고려해야 한다.4_ 사용자 중심 글쓰기
사용자가 쉽게 이해할 수 있는 글로 좋은 경험을 준다.
UX Writer라는 직업이 있다. 최근 알게 된 직업인데 글쓰기를 좋아하는 나로서는 아주 흥미로웠다. UX Writer는 사용자가 서비스를 이용하며 접하게 되는 문구나 단어를 설계하는 사람이다. 구글, 삼성, 넷플릭스, 아마존 같은 기업은 서비스 디자인 팀에 UX Writer가 꼭 들어간다고 한다. 최근에는 챗봇(Chatbot) 형태의 대화형 인터페이스(Conversational Interfaces)가 늘어나면서 사용자 중심 글쓰기는 더욱 중요해지고 있다.
난 3년 동안 '어려운 과학 이야기를 쉽게 푸는 글'을 써왔다. 쉽게 써야 한다는 점에서 지난 3년 동안 썼던 글과 사용자 중심 글쓰기는 같은 범주지만, 실무에서 UX를 위한 글을 직접 써보니 다르게 접근해야 하는 부분도 있다는 생각이 들었다. 아직은 사용자 중심 글쓰기에 대한 별다른 기준이나 철학이 없다. 꾸준히 연구하며 사용자 중심 글쓰기에 맞는 원칙을 세워야 할 필요를 느꼈다. 시간이 드는 일이기에, 일단은 누가 보더라도 단번에 쉽게 이해할 수 있는 글을 쓰자는 단 하나의 목표를 세워 실천하기로 했다.
아래는 우리 앱의 '사이즈 필터'라는 기능의 디자인 개선 전/후 이미지다. 사이즈 필터는 내가 원하는 사이즈의 옷만 찾을 수 있도록 도와주는 필터다. 사용자 관점에서 글을 쉽게 이해하도록 하기 위해 가장 먼저 바꾼 건 화면 상단의 '사이즈 필터' 문구다. 회사 안에서는 쉽게 이해할 수 있는 용어지만, 사용자는 모른다. 따라서 사용자가 이 화면이 무엇을 하는 화면인지 이해하기 쉽게 '상의 찾기'로 바꿨다(1).
상의의 사이즈를 나타낼 때 쓰는 표현인 어깨너비, 가슴단면, 총장, 소매길이 중 '총장'은 '총길이'라는 쉬운 단어로 바꿨다(2). 나머지는 대체할 쉬운 용어를 찾기가 어려워서 직관적인 시각 이미지를 각 용어 왼쪽에 추가했다. 용어를 모르더라도 사용자가 각 용어가 옷의 어디를 나타내는지 쉽게 이해할 수 있도록 개선했다.
가장 밑에 있는 버튼의 이름은 '필터 적용'에서 '나에게 맞는 3,784개 상품 보기'와 같이 바꿔 사용자가 버튼을 누르면 무슨 화면이 나올지 예상할 수 있도록 했다(3). 이 버튼은 프로그래밍적으로 UX를 개선하기도 했다. 필터의 각 수치를 조정하거나 스위치를 키고 끌 때마다 바뀌는 상품 개수를 버튼 문구에 있는 숫자가 변하는 애니메이션으로 보여줘, 실시간으로 사용자에게 맞는 옷이 몇 벌인지 알려준다.
5_버튼의 원칙
사용자가 버튼을 쉽게 누를 수 있어야 한다.
버튼은 사용자가 서비스 안에서 어떤 목적을 이루기 위해 눌러야 하는 중요한 요소다. 구매하기 버튼을 눌러 결제를 진행하기도 하고, 창을 닫기 위해 x 버튼을 누르기도 하며, 사진을 찍기 위해 촬영 버튼을 누르기도 한다.(덧. 물론 음성인식 같은 다른 기능을 활용할 수도 있다.)
사용자가 작은 모바일 화면 안에서 버튼을 쉽게 누르게 하려면 가장 먼저 고려할 건 버튼의 크기다. 모바일 UI에서는 미세한 조정이 가능한 마우스 포인터가 아닌 터치로 인터페이스를 조작하기 때문에, 사용자가 쉽게 버튼을 누를 수 있도록 버튼이 충분히 커야 한다. 그래서 '최소 버튼 크기'를 정할 필요가 있다.
최소 버튼 크기의 기준은 조시 클라크(Josh Clark)의 '터치를 위한 디자인하기(원서 : Designing for Touch)' 81~88쪽을 참고했다. 조시 클라크는 터치 타깃(버튼 등)을 사용자가 잘못 누르지 않도록 크게 만들어야 한다고 강조하며, 마이크로소프트의 터치 정확성 연구를 근거로 들어 터치 타깃의 크기는 7mm보다 작아서는 절대 안 된다고 설명하고 있다.
7mm는 160dpi에서 44px로 환산할 수 있다. 터치 타깃의 한쪽은 최소 44px을 유지하고 다른 한 쪽은 30px 이상이어야 한다. 정리하면 터치 타깃의 최소 크기는 44px*30px 혹은 30px*44px이다. 나는 불가피한 경우가 아니면 이 기준을 만족하는 버튼을 만들고 있다. 예외로 x나 < 버튼 등 덜 중요한 버튼 같은 경우 Google Material Design Guide와 Human Interface Guidelines의 기준에 따라 크기와 터치 영역을 정했다.
터치 타깃의 주변 공간도 터치의 크기만큼 터치 오류를 줄이는 데 중요한 역할을 한다. 마이크로소프트 디자인 가이드에 따르면 7mm의 터치 타깃은 최소한 2mm(13px)의 간격을 둬야 하며, 두 터치 타깃이 서로 가까이 있다면 터치 타깃의 크기를 9mm(57px) 이상으로 해야 한다.
하지만 주의할 점이 있다. 버튼이 큰 게 사용성이 좋다고 너무 크게 만들면 안 된다. 너무 크면 가뜩이나 작은 모바일 화면을 낭비할 뿐만 아니라, 유치하게 보이거나 세련되지 않아 보일 수 있다.
CTA 버튼 같이 중요한 버튼은 모바일 화면의 중간에서 아래 영역에 배치하면 좋다. 엄지가 닿기 편한 곳(엄지 영역)에 두는 것이다. 반대로 중요하지 않거나, 사용자가 누르지 않았으면 바라는 버튼은 찾기 어렵게 디자인하거나 엄지 손가락이 닿기 어려운 화면 위쪽에 배치한다.
마치며
현재(2019년 5월 20일 기준) 우리 회사에서 서비스하고 있는 앱은 아직 사용자가 쓰기 어려울 정도로 UX가 썩 좋지 않다. 개선할 부분이 아주 많다. 지금은 전반적인 IA(Information Architecture, 정보 구조)를 다듬으며 UX를 하나씩 차근차근 개선하고 있다. 모든 UX 개선이 끝난 뒤에는 GUI 시스템을 만들고, 브랜딩 작업에 들어갈 예정이다.
UI/UX 디자인 공부가 재미있는 건 생활 속에서 접하게 되는 UI에서 느낀 UX로부터 자연스럽게 배우고 성장한다는 점이다. 종종 훌륭한 UI나 애니메이션, 인터렉션을 발견하면 메모해두고, 우리 앱에 적용하고 응용해 보는 재미가 쏠쏠하다.(끝)
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
03 참고 자료
1. 콘텐츠 플랫폼 'PUBLY'의
마이리얼트립 배재민 디자이너 인터뷰: 분석하는 디자인
2. 콘텐츠 플랫폼 'PUBLY'의
트레바리 정원희 디자이너 인터뷰: 가설을 검증하는 디자인
3. UI/UX 디자이너에게 필요한 심리학 지식을 얻을 수 있는 콘텐츠
4. GS SHOP 커머스 UI/UX 디자이너 최철호님의 브런치
5. 사용자 중심 글쓰기에 대한 자세한 정보를 얻을 수 있는 NHN AD: UI/UX Lab 공식블로그
6. [참고서적] 이상용의 '사용자 경험 이야기: UX를 이해하는 가장 쉬운 방법'
7. [참고서적] 조시 클라크의 '터치를 위한 디자인하기'
