모바일 디자인 모범 사례
UX 디자인 배우기 #85
Today UX 아티클
Medium UX Planet에 올라온 Nick Babich글 Mobile Design Best Practices을 원저자의 허락을 받아 번역한 글입니다.
앱은 이제 콘텐츠와 서비스를 전달하는 신뢰받는 방법이 되었습니다. 하지만 복잡한 마켓에서 유저를 즐겁게 해주면서도 지속적으로 이용하게 하려면, 모바일 앱을 어떻게 유용하고 유의미하면서 가치 있게 만들어야 할까요?
다음은 정말로 훌륭한 모바일 사용자 경험을 만드는 데 핵심이 된다고 생각하는 7 UX 디자인 팁을 모아보았습니다.
1. 한 스크린 당 하나의 태스크
"유저가 원하는 것을 얻기 위해 들여야 하는 노력을 줄여줘야 한다."
앱에 디자인해서 넣는 각각의 스크린은 그것을 사용하는 유저에게 실제 가치를 제공하는 한 가지 액션을 지원해야 합니다. 각 스크린을 한 가지를 위해 디자인해야 하며, 하나 이상의 행동유도 요소(call-to action)가 들어가면 안 됩니다.
예를 들어, 우버(Uber)를 살펴봅시다. 우버는 앱을 사용하는 유저의 목표가 ‘택시 잡기’라는 것을 알고 있습니다. 너무 많은 정보로 인해 유저가 부담을 느끼는 일이 없도록 앱을 만들었습니다. GEO 데이터를 기반으로 자동으로 유저의 위치를 감지하기 때문에 유저는 정확한 픽업 위치만 선택하면 되도록 만든 거죠.
보이지 않는 인터페이스
"콘텐츠 자체가 인터페이스가 된다."
콘텐츠에 집중하고, 유저 태스크를 지원하지 않는 모든 불필요한 요소를 제거해야 합니다. 주의 지속 시간이 줄어들었기 때문에, 유저가 찾고 있는 콘텐츠로 유저를 빠르게 안내해줘야 합니다. 콘텐츠 자체가 인터페이스가 되는 거죠. 구글 지도가 훌륭한 사례입니다. 리디자인 기간 동안 구글은 모든 불필요한 패널과 버튼을 제거했습니다. 구글은 ‘지도가 인터페이스다’고 말했습니다.
여유 공간
"중요한 콘텐츠로 관심을 끌기 위해 여백을 사용한다."
여백(white space 또는 “negative spce”)이란 디자인 요소 혹은 페이지 레이아웃 사이나 주변에 있는 빈 공간을 의미하는 것으로, 자주 간과되고 무시되는 부분입니다. 많은 디자이너들이 소중한 스크린 공간을 낭비한다고 생각할 수 있지만, 여백은 모바일 디자인에서 필수적인(essential) 요소입니다.
“여백은 수동적 배경(passivebackground)이 아닌 능동적 요소(active element)로 여겨져야 한다” - Jan Tschichold
여백은 가독성과 콘텐츠의 우선순위 매김에 영향을 미칠 뿐만 아니라, 시각적 레이아웃에서도 중요한 역할을 합니다. 그러므로 UI를 단순화해주고 UX를 개선할 수 있습니다.
디자인을 할 때 “적을수록 좋다”는 원칙을 따르자. Image credit: Material Design간단한 내비게이션
"내비게이션은 뻔하게 만든다."
유저가 원하는 것을 찾을 수 있도록 도와주는 것은 모든 앱에서 가장 우선순위가 되어야 합니다. 모바일 내비게이션은 반드시 쉽게 발견 가능해야 하고, 접근 가능해야 하며, 스크린 상에서 적은 공간을 차지해야 합니다. 하지만 모바일에서 내비게이션을 접근성 있게 만드는 것은 상당히 어렵습니다. ‘작은 스크린’이라는 제약과 ‘해당 콘텐츠를 쓸데없는 기능들보다 우선적으로 보여줘야 한다’는 니즈가 있기 때문입니다.
탭바와 네비게이션바는 상대적으로 적은 내비게이션 옵션이 있는 앱에 적합합니다. 이 두 가지가 훌륭한 이유는 모든 주요 내비게이션 옵션을 모두 보여주며 한 번의 탭으로도 유저가 즉각적으로 한 페이지에서 다른 페이지로 이동할 수 있기 때문입니다.
애플 앱스토어의 탭바 네비게이션한 손 조작
"더 큰 스크린에 맞춰 디자인을 조정한다."
아이폰6와 6 플러스의 출시를 보면, 스크린 크기가 점점 더 커지고 있다는 점을 분명하게 알 수 있습니다.
다음은 사람들이 폰을 잡는 세 가지 기본 방식입니다.
사람들이 폰을 잡는 기본 방법 Research bySteven Hoober관찰한 유저의 85%가 한 손으로 폰을 잡고 조작을 했습니다. 다음 히트맵은 2007년 이후 출시된 모든 아이폰 디스플레이 크기에서 일종의 ‘엄지 영역(thumbzone)’이 어떠한지 보여줍니다. 화면이 커질수록 쉽게 접근할 수 있는 영역이 줄어든다는 것을 확인할 수 있습니다.
Scott Hurff의 연구에 따르면 엄지 영역은 위와 같습니다.사용자 경험을 개선하기 위해서는 디자인을 조정하는 것이 필수적입니다. 여러분의 앱을 큰 화면(가령 아이폰6나 7)에서도 쉽게 (그리고 완전히) 이용할 수 있는지 반드시 확인해야 합니다. 내비게이션 옵션을 엄지 손가락이 도달할 수 있는 영역 안에 배치해야 합니다.
iOS용 Pocket 앱. 모든네비게이션 컨트롤이 하단에 있다. 일반적인 방법으로 폰을 잡았을 때도 쉽게 조작할 수 있는 위치에 있다.
빠르게 뜨도록 만든다
"유저가 콘텐츠를 기다리게 만들면 안 된다."
앱은 최대한 빠르면서도 반응형(responsive)으로 만들려고 노력해야 합니다. 빨리 진행되는 것처럼 보이게 만들기 위해 뒤에서 액션을 진행하면 됩니다. 뒤에서 액션을 진행하면 두 가지 장점이 있습니다. 보이지 않으며, 유저가 해당 액션을 실제로 요청하기 전에 수행할 수 있다는 것입니다. 인스타그램에서 사진 올리기가 이 부분에 관한 좋은 사례입니다. 유저가 공유할 사진을 선택하자마자, 사진은 업로드되기 시작합니다.
인스타그램은 사진이 뒤에서 업로드되고 있는 동안 유저가 태그를 추가할 수 있게 해줍니다.
유저가 공유 버튼을 누를 준비가 되면, 사진 업로드는 끝이 날 것이고 즉각 사진이 공유할 수 있게 됩니다.
푸시 알림은 지혜롭게 사용한다
"메시지를 보내기 전에 두 번 생각하자."
매일 유저의 일상생활을 방해하고 짜증 나게 만드는 불필요한 알림이 쏟아집니다. 짜증 나는 알림은 사람들이 모바일 앱을 삭제하게 되는 첫 번째 이유입니다 (응답자의 71%)
모바일에서는 모든 메시지를 중요하게 여겨야 합니다. 단순히 “관심을 끌기 위해” 알림을 보내면 안 됩니다. 그 알림이 유저에게 가치 있다고 생각하고, 실제로 그런 경우에만 보내야 합니다.
팁. 효과적인 모바일앱 메시지 보내기 전략을 세우는 가장 좋은 방법은 다양한 메시지 유형을 사용하는 것입니다. 푸시 알림, 이메일, 인앱(in-app) 알림, 뉴스피드 메시지 등을 활용하는 것이죠. 메시지 수단을 다각화해보세요. 훌륭한 사용자 경험을 만들기 위해서는 모든 메시지가 함께 완벽한 조화를 이뤄야 합니다.
긴급한 정도와 콘텐츠 내용에 따라 적절한 알림 유형을 선택합니다.결론
모바일 앱을 디자인할 때 염두에 둬야 할 가장 중요한 것은 유용하면서도 동시에 직관적인 앱을 만들어야 한다는 점입니다. 만일 앱이 유용하지 않다면, 유저에게 실용적인 가치가 없어서 아무도 이용하려 하지 않을 것입니다. 만일 앱이 유용하지만 이용하는 데 많은 시간과 노력을 들여야 한다면, 사람들은 배우는 방법을 배우느라 고생하려고 하지 않을 것입니다.
좋은 UI와 UX 디자인은 이 두 가지 디자인 문제를 모두 해결해줘야 합니다.
감사합니다!
감사합니다.
라이브클래스 (줌 Live) UX 스터디 신청 프로그램 안내
1. 줌 Live!!! (실무자) 프로덕트 디자이너를 위한 UX 실무 과정: 총 26회, 총 78시간 (월/수/금 PM 8:30-11:30)
2. 줌 Live!!! (취준생) UX 포트폴리오 부트 캠프 과정: 총 21회, 매주 토/일 PM 8:00-11:00 (OT 1회, 이론 10회, 포플 피드백 10회)
3. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 사용성에 대해 깊이 파고 들고, 프로덕트 역량 키우기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오전 10시-오후 1시)
4. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UI와 인터랙션 원칙에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오후 3시-6시)
5. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 HCI와 UX 정의에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오전 10시-오후 1시)
6. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 프로세스 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오후 3시-오후 6시)
7. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 리서치 기초 뼈대 튼튼히 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (화 오후 8시30분-오후 11시30분)
8. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 원칙&디자인 가이드 뼈대 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (목 오후 8시30분-오후 11시30분)
라이브클래스 (VOD) 프로그램
UX 스터디 참석하지 못한 분을 위해, VOD 강의 촬영하였습니다
(일부 강좌만 VOD 오픈하였고,
그 외 강좌는 아직 VOD 편집 중이며 곧 오픈 예정입니다!!!!)
(VOD) UX 로드맵 시리즈 #1. UX 취업, 면접, 포플
(VOD) UX 로드맵 시리즈 #2. UI, 인터랙션, UX 정의
(VOD) UX 로드맵 시리즈 #3. UX 가설 설계
(VOD) UX 로드맵 시리즈 #4. 데스크 리서치
(VOD) UX 로드맵 시리즈 #5. 유저 컨텍스트 리서치
(VOD) UX 로드맵 시리즈 #6. UX 리서치 분석 및 UX 전략 수립
(VOD) UX 로드맵 시리즈 #7. UX 설계
(VOD) UX 로드맵 시리즈 #8. U8 설계 단계 리서치
(VOD) UX 로드맵 시리즈 #9. UX 디자인 가이드 원칙
