명확하게 디자인하라
author - 햇님 속눈썹│UX 디자이너
안녕하세요. Plus X에 입사한 지 2개월 된 따끈따끈한 신규 입사자, 햇님속눈썹입니다. ᕕ(♨ω♨)ᕗ 플러스엑스의 브런치 글을 읽는 독자에서, '플엑인'으로서 글을 적으려니 묘한 기분이 드네요. 입사 후, 책임님으로부터 『명확하게 디자인하라』라는 책을 전달받았습니다. 오래된 역사를 자랑하듯 책은 아주 너덜너덜한 모습이었는데요. 과연 명서 답습니다. 이 책은 좋은 웹 애플리케이션을 디자인함에 있어 필요한 항목들을 조목조목 소개하고 있습니다. 이번 글에선, 책에서 소개하고 있는 항목들 중 몇 가지와 그에 맞는 최신 사례를 공유드리고자 합니다.
01. Welcome 화면은 한 번에 하나의 액션만 제공해야 한다
Good : 스픽
Bad : HashPhotos
많은 애플리케이션들은 새로운 사용자를 위해 Welcome 화면(튜토리얼)을 제공합니다. 이들 화면은 사용자에게 서비스의 주요한 기능이나 사용법을 안내해주기 위한 목적으로 제작됩니다. 하지만 이러한 안내 매뉴얼은 사용자에게 별다른 도움이 되지 않습니다. 그 이유는 다음과 같습니다.
사용자는 언제나 한 번에 한 가지에만 집중할 수 있습니다.
다수의 사용자에게 튜토리얼은 서비스를 이용하기 전, 넘어야 하는 귀찮은 과정에 불과합니다.
1) Bad - HashPhotos의 웰컴 화면
예를 들어, HashPhotos 서비스를 이용하기 위해서는 7단계에 이르는 튜토리얼을 넘겨야 합니다. 튜토리얼 종료 후, 사용자의 머릿속엔 몇 가지의 사용법이 남아있을까요?(낫... 띵....) 그렇기에 Welcome 화면은 한 번에 하나의 액션만 제공해야 합니다.
7단계의 튜토리얼을 가진 웰컴 화면2) Good - 스픽의 웰컴 화면
다음은 영어회화 학습 App인 스픽의 Welcome 화면입니다. 화면 내 수업 영상을 보여줌으로써 '말하면서 하는 수업'이라는 서비스의 특징을 고스란히 보여주고 있습니다. 단 하나의 액션(수업 영상 제공)만 제공하여, 사용자에게 영어회화 어플이라는 점을 효과적으로 각인시켜주고 있네요.
02. 원 클릭 인터페이스를 제공하라
Good : 쿠팡·지그재그
사용자들의 빠른 작업 수행을 돕기 위해, 편리한 인터페이스를 제공하는 것은 필수적입니다. 특히 쇼핑 서비스에서 결제 편의성을 갖추는 것은 매우 중요한데요. 회원가입부터 배송지, 번호 입력 등등... 수많은 결제시스템은 사용자를 지치게 만들고, 이는 사용자의 이탈을 유발하기 때문입니다. 이러한 부정적인 경험을 없애고자 많은 서비스들이 간편 결제를 앞다퉈 출시했는데요. 그중 쿠팡과 지그재그를 소개드리고자 합니다.
1) 쿠팡의 원클릭 결제시스템
쿠팡은 최초 결제 시 배송지·결제 수단을 등록해놓으면, 두 번째 구매부터 기입했던 정보(배송지·요청사항 · 결제수단)가 그대로 불러와집니다. 덕분에 두 번째 구매부터는 단 몇 초 안에 상품 결제가 가능합니다.
두 번의 클릭만으로 결제가 되는 쿠팡 결제시스템
탕... 진.... 잼...2) 지그재그의 Z결제
Z결제란 개별 인터넷 쇼핑몰 상품을 한데 담아 일괄 결제할 수 있는 결제 서비스입니다. 기존에는 각 쇼핑몰 사이트에서 회원 가입 또는 비회원 결제(feat. 배송정보 입력의 고통)를 통해 상품을 개별적으로 구매했어야 했는데요. Z결제를 통해서는, 서로 다른 쇼핑몰 상품이어도 지그재그 통합 ID 하나면 일괄적으로 구매가 가능합니다. Z결제를 도입한 쇼핑몰들은 이용자당 최대 2배 매출 증가를 이뤘다고 하네요.
서로 다른 쇼핑몰의 상품을 일괄 결제할 수 있습니다03. 유용한 것들로 '빈 화면'을 채워라
Good : 인스타그램
서비스를 처음 사용하는 경우, 콘텐츠가 없는 빈 화면이 존재할 수 있습니다. 이는 사용자에게 공포의 대상이 될 수 있습니다. 무엇을 해야 하는지를 정확하게 알 수 없을뿐더러, 막다른 골목에 다다른 느낌을 받는 것이죠. 하지만 잘 디자인된 빈 화면은 앱이 추구하는 액션을 유도하면서 사용자가 즐거운 경험을 할 수 있도록 해줍니다.
1) 인스타그램의 빈 화면
인스타그램은 온라인 사진 공유 및 소셜 네트워킹 서비스입니다. 전 세계 다양한 사용자들을 팔로우하며, 자신의 피드를 채우는 방식인데요. 인스타그램은 빈 화면에 다양한 계정을 보여주며, 핵심 기능인 '네트워킹'을 유도하고 있습니다. (아래 왼쪽 화면 참고)
만약 인스타그램의 빈 화면이 우측과 같다면 사용자들은 많은 혼란을 겪을 것입니다. 이처럼 빈 화면은 맥락을 이해할 수 있게 만드는 도구이며, 서비스의 첫인상을 좌우하는 중요한 역할을 합니다.
만약 인스타그램의 빈 화면이 우측과 같다면?*앱의 빈 화면을 재치 있게 디자인한 사례 21가지를 공유드립니다.
http://blog.wishket.com/앱-디자인-일러스트레이션/
04. 힌트를 제공하라
EX : 네이버 검색·인스타그램 스토리
서비스에 익숙하지 않은 초보 사용자들을 위해, 힌트를 보여주는 방법을 쓸 수 있습니다. 애플리케이션의 특정 영역에 변화가 생길 때 그 영역의 기능과 사용법에 대해 설명해주는 힌트를 보여주는 것이죠. 이때의 힌트는 짧고 요점이 분명해야 하며, 작업 흐름을 방해해서는 안됩니다.
1) 네이버 검색
최근 네이버는 급상승 검색어를 통한 어뷰징(부당한 방식으로 클릭수를 높여 이익을 얻으려는 행위) 단속을 위해, 검색어 설정 기능을 도입했습니다. 이용자가 설정한 주제 카테고리 간의 연관성을 분석한 뒤, 개인별 설정 기준에 맞춰 급상승 검색어 차트 노출 여부를 결정하는 것인데요. ⓘ 아이콘을 클릭하면, 설정 기능에 대한 설명이 나와, 사용자의 이해를 돕고있습니다.
2) 인스타그램 스토리-친한 친구
친한 친구 기능은 친한 친구 리스트를 만들어서 리스트에 속한 사람에게만 스토리 게시물을 보여주는 기능입니다. 해당 기능을 알지 못하는 사용자를 위해, 사용방법을 안내해주고 있습니다.
05. 오류의 알림을 적절한 때 알려라
Good : NC소프트 채용 홈페이지
Bad : 따릉이
사용자의 오류를 즉시 잡아주는 '적재적소의 검증'은 사용자의 성공적인 인터랙션을 보장합니다. 예를 들어, 회원가입 폼에서 사용자가 입력한 아이디가 이미 존재하지는 않는지, 비밀번호가 올바른 포맷으로 입력했는지를 실시간으로 체크해주는 것이죠. 어쩌면 당연해 보이지만, 이 규칙을 지키지 않고 있는 앱이 있습니다. "만든 사람 곤장 오백 대 때려야 함"라는 후기가 눈에 띄는, 서울특별시 공공자전거 전용 앱 따릉이입니다. (참고로 따릉이의 평점은 1.6점입니다)
1) Bad - 따릉이 회원가입
다음은 따릉이의 회원가입 화면입니다. 제시해놓은 아이디 입력 폼의 형식은 '영문, 숫자 6~12자리'입니다. 하지만 010으로 시작하는 아이디를 입력하자, '아이디를 010으로 시작하지 않은 영문, 숫자 6자리 이상 12자리 이하로 설정해주세요'라는 팝업 메시지가 뜹니다. 에러 메시지를 유발하는 작업을 수행한 경우 사용자는 스스로 잘못했다는 생각을 가지게 되고, 이는 매끄러운 목표 작업 수행에 방해가 됩니다. 책의 저자는 "좋은 애플리케이션이란 어떤 혼란스러움과 모호함도 없이 매 순간의 시스템과 사용자 간의 상호 작용이 부드럽고 막힘없이 진행될 수 있는 것"이라 말하고 있습니다
영문,숫자 12자리라면서요...2) Good - NC소프트 채용 홈페이지 회원가입
NC소프트의 채용 홈페이지는 적재적소의 검증을 통해, 사용자가 혼란스러움 없이 회원가입을 할 수 있도록 돕고 있습니다. 입력 폼의 바른 형식을 아래에 기입해두고, 해당 조건을 만족할 때마다 시각적으로 표현해주는 것이죠. 우리의 목표는 사용자에게 무엇이 잘못되었다는 말을 하지 않는 것이며, 사용자가 실수를 저지를 기회 조차 주지 않은 그런 시스템을 디자인해야 합니다. 문제가 발생할 수 있는 수많은 여지가 존재하지만, 좋은 디자인은 대부분의 문제를 해결할 수 있습니다.
수많은 기업의 채용 홈페이지를 들락날락거렸던 취준생 시절, NC소프트의 채용 홈페이지는 편리한 UX로 머릿속에 강렬하게 남았습니다.지금까지 책에서 소개하고 있는 규칙과 그게 맞는 사례를 소개드렸습니다. 사실 처음 책을 받아 들었을 땐, 언제 적 서비스인지 가늠도 되지 않는 옛 사례와 딱딱한 직역체의 콜라보로 책장이 쉽게 넘어가지 않았습니다. 하지만 규칙에 맞는 최신 사례를 직접 찾아보자, 규칙이 이해가 되기 시작했고 책에 흥미 또한 붙었습니다.
사례 조사를 하면서, 족히 15개가 넘는 앱을 설치한 것 같습니다. 앞으로의 UX업무에서 이러한 경험들이 큰 자산이 될 것 같습니다. 긴 글 읽어주셔서 감사합니다. ฅ(♨ω♨)ฅ
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
