MobileUX Design Key Principles
by Nick Babich (translated by Elly)
모바일앱 디자인을 할때 가장 중요한 점은 사용하기 편하고 직관적이야 한다는 것입니다. 만약 사용자들에게 실용적 가치가 없거나 사용할 이유가 없다면 그 앱은 유용하지 않은거죠. 설사 유용하더라도 사용하는데 수고가 많이 든다면 사용하지 않을 것입니다.
좋은 UI 디자인들을 하는데는 다음 디자인 문제들을 수반 됩니다.
· 사용자 중심적 이어야 합니다. 사용자들은 어떠한 문제를 풀기위해 당신의 앱을 설치하죠. 즉, 사용자들이 당신의 서비스를 사용하는 목적성은 분명합니다. 사용자들이 얻고자 하는게 무엇인지 생각해보고 그 과정에서 겪는 어려운 모든 장애물을 제거해 보세요.
· 명확한 UI 디자인 이어야 합니다. 무엇을 위한 것이고 어떻게 사용하는 것인지 고민해보세요. 이를 포함해야 효율적인 인터페이스를 설계 할 수 있습니다. 혼돈의 여지가 없어야 합니다.
그럼, 여기 정말 훌륭한 모바일 경험디자인을 위한 저자가 생각하는 9가지의 핵심 UX 디자인 원리를 소개하겠습니다.
1. 불필요한 것들을 제거하라
사용자들을 너무 신경쓰게 하는것들을 제거 하세요. 매번 추가 되는 버튼, 이미지, 라인등은 화면을 더 복잡하게 만듭니다.
데스크탑앱 또는 웹사이트에서 좋지않지만 (공간이 더 좁은)모바일에서 수백배 좋지않겠죠? Image credit: ftrain Antoine de Saint-Exupéry의 유명한 말이 있습니다. "완벽은 아무것도 남겨 있지 않을 때 완성된다." 모바일 디자인에서 필요없는 것을 없애는건 매우 중요합니다. 왜냐면 불필요함을 줄이는 것이 제품의 이해를 높이기 때문입니다.
가장 좋은 예 : 스크린마다 주요 액션을 하나씩 두는 것입니다.
여러분이 디자인한 모든 스크린화면들은 사용자가 사용하는 실제 가치, 단 하나의 액션을 위해야 합니다. 이는 배우기 쉽고, 사용하기쉽고, 필요할 때 추가하거나 만들어내기 쉽게 합니다. 100개의 명료한 스크린들이 복잡한 한개 스크린 보다 좋습니다.
우버를 예를 들어볼까요. 우버가 사용자들이 택시를 잡는 것을 목표를 하고 있다고 알고 있죠. 앱에서 많은 정보로 사용자들을 지치게 하지 않습니다. Geo data에 기반하여 자동적으로 사용자 정보를 추가합니다. 사용자들이 직접 입력해야만 하는 정보는 장소를 고르는 것입니다.
좋은 UX의 기본 법칙중 하나는 사용자가 들이는 노력을 최소화하는 것입니다.
2. 설명이 필요없는 명확한 Navigation
사용자들이 원하는 바를 취할수 있도록 돕는 것은 모든앱에서 가장 중요한 우선순위가 될 것입니다. 좋은 Navigation은 사용자들의 그들의 여정에 따라 안내하는 보이지 않는 손과 같습니다. 가장좋은 기능과 콘텐츠라 하더라도 사용자들이 찾지못하면 쓸모가 없는 거죠.
좋은 모바일 Navigation은 원리는 다음과 같습니다.
· 모바일 네비게이션은 반드시 일관적인 논리야합니다. 적절한 기표(적합한 비쥬얼 메타포)를 사용해야합니다. navigation이 많은 설명을 필요하지 않고 각 navigation 요소 (아이콘과 같은)들은 적합한 목적지로 이꿀어야합니다.
· 모바일 navigation은 반드시 앱에서 일관되어야 합니다. 위치가 이동되거나 다른 페이지로 숨으면 안됩니다. 이는 사용자들을 혼란시킵니다.
· 모바일 navigation은 현재 상태를 알수 있어야 합니다. (사용자가 하고 있는 task가 무엇인지 알수 있는) 현재 위치를 나타내지 못한다면 앱메뉴에서 보이는 가장 일반적인 실수를 범할 수있습니다. "나는 어디에 있지?"는 사용자들이 자기 위치를 알수 있는 가장 기초적인 질문 중 하나입니다.
3. 자연스러운 경험을 만드세요.
모바일 디자인에서는 단절(UI flow 끊김)이 생기면 안됩니다. 모바일, 데스크탑 그리고 타블렛을 넘어서 자연스러운 경험(UI flow)를 만드는 것이 여러분들의 사용자들에게 매우 중요합니다.
Apple musicApple music 을 예로 들겠습니다. 여러분들은 맥에 playlist를 설치 할 수 있고 즉시 아이폰에서 사용가능합니다. Apple은 모바일앱 디자인이 매우 중요하지만 아이폰을 넘어 데스크탑 그리고 아이패드 또한 사용자들에게 중요하다는 것을 인지한 것입니다.
4. 원하는 바를 탭하기 친숙하게 디자인 하세요.
터치하는 영역이 작을 수록 사용자들은 탭하기 힘들어 합니다. 모바일 인터페이스를 디자인 할때, 사용자들이 탭하기 쉽게 하기 위해서는 충분한 영역 확보를 하는 것이 좋습니다.
한 손가락으로 정확하게 탭하기 위해서는 7-10mm 여유 공간을 만드세요. 이러면 사용자들은 더 편안하게 탭할수 있습니다. 사용자들이 탭할때 버튼의 끝은 보여야 합니다. 이는 사용자들에게 버튼을 정확하게 누르고 있다는 비쥬얼 피드백을 제공합니다.
잘못된 행동을 유발하거나 좁은 공간으로 어려움을 겪게 하지 않기 위해서 UI는 손끝으로 컨트롤 할수 있게끔 충분한 공간이 되어야합니다. Image credit: Apple또한 이게 탭하기에 적절한 공간이라고 확신 시켜줘야합니다.
5. 글자 콘텐츠는 읽기좋게 또렷해야 합니다.
데스크탑과 비교해보면 스마트폰들은 상대적으로 화면이 작습니다. 이는 많은 정보를 작은화면에 담야하하는 어려운 부분이 있습니다. 아마 여러분들도 가능한 많은 정보를 한 모바일 디자인으로 쫘 넣어 보려는 시도를 해본적이 있을거라 짐작됩니다. 하지만 이러한 시도를 하지마세요.
모바일을 위해서는 엄지의 법칙이 필요합니다. : 글자는 최소 11폰트를 지켜주세요. 이는 확대없이 일반적 거리로 볼때 가장 또렷한 크기입니다.
(2000년대엔 한글 폰트 최소 크기가 돋움 11px 혹은 굴림 12px, 지금은 나눔고딕을 많이 써서 최소 크기 12px 일거라고, 픽셀폰트 사용시 영문은 6px에도 읽혀지는 경우가 있다고 이상용님께서추가 피드백을 주셨습니다. 감사합니다.)
image credit : Apple가독성을 좋게 하기 위해서는 행간또는 자간을 늘려보세요. 일반적인 여백이 좋습니다.
좋은 UI는 많은 숨구멍(여백)을 가지고 있다. Image credit : Apple6. 인터페이스 요소들을 명료하게 만드세요.
여러분들은 사용자들이 여러분들의 콘텐츠를 잘보게끔 하기 위해 color를 사용하고 강조해야합니다. 사용자들에게 전달할 1순위, 2순위 그리고 여러분의 주요 color들을 고르세요. 사용자들이 여러분 앱을 쉽게 보기 위해서는 요소들간의 색상 대비를 확실히 해줘야 합니다. 폰트와 배경과의 대조는 폰트 가독성을 더 좋게 합니다. W3C는 본문 폰트와 이미지 폰트간의 대비율을 다음과 같이 권장합니다.
· 작은 폰트는 배경과 최소한 4.5 :1 비율을 해야합니다.
· 큰 폰트는(14pt bold 타입/ 18pt regular 이상)은 배경과 최소 3:1 비율을 해야합니다.
배경과 유사한 폰트 칼러는 읽기 어려우므로 권장하지 않습니다. Image credit : Apple야외에서는 햇빛 때문에 스크린 대비가 덜되어 보여 읽기 어렵기 때문에 대비를 주는 것이 모바일에서 매우 중요합니다.
좌측 페이지에서 회색 폰트가 잘보이더라도 야외에서는 보기 어렵습니다. Image credit : usertesting아이콘이나 다른 요소들도 위에서 권장하는 대비를 지켜줘야 합니다.
위의 권장 사항들을 따르지 않는 아이콘들은 배경과 구별하여 보기가 힘듭니다. Image credit : Material Design7. 손의 위치를 고려하여 디자인을 하세요.
모바일 사용에 관한 Steve Hoober 리서치를 보면, 사용자들의 49 %가 그들의 엄지에 의존하여 그들의 휴대폰을 잡거나 사용한다고 합니다. 아래에서 사용자들이 엄지와 스크린 상호작용이 높은 스크린 화면 영역들을 확인할수 있습니다.
사람이 한손으로 스마트폰을 사용할때 편안함을 느끼는 영역입니다. Image Source: uxmatters초록은 사용자가 접근하기 쉬운 영역을 나타냅니다 ; 노랑은 엄지를 뻗을때 가능한 영역이고 ; 빨간색은 디바이스를 잡고 있는 방법을 바꿔야 합니다. 손의 위치와 잡는 것은 모바일 디자인을 컨트롤 하는 영역에 영향을 끼칩니다.
· 이는 탑메뉴에서 중요합니다. 한 엄지로 작동하기 편하게끔, 스크린 그린존 범주안에서 일반적인 액션과 컨트롤을 하게끔 해야합니다.
Tumblr common actions. Image credit : Capptivate· 삭제또는 제거와 같은 부정적 행동을 요하는 버튼은 터치하기 힘든 빨간영역에 위치시키세요. 여러분은 사용자들이 이를 탭하긴 원치 않을 테니깐요.
8. 글자를 치는 것은 최소한 하세요.
모바일에서 타이핑은 오래걸리고 에러가 생기기도 하는 작업입니다. 그러므로 타이핑은 앱에서 최소한 하는게 좋습니다.
· 불필요한 영역들을 다 제거함으로써 가능한 짧고 간결하게 폼을 유지하세요.
폼을 채우는 것을 좋아하는 사람들은 없습니다. 길거나 복잡한 폼은 사용자들에게 점프하고 비워놓고 싶게끔 합니다. Image credit : Lukew·사용자들이 최소한 정보만으로 가입이 가능하게끔 자동완성 기능과 개인화 data를 사용하세요.
Auto-complete field for country9. 여러분들의 디자인을 테스트해보세요.
넓은 데스크탑 스크린으로 모바일 디자인을 보면 모두 좋아보이지만 실제 모바일 테스트로 보면 거의 그렇지 않은 경우가 절반입니다. 매우 공들이고 신경쓴 UX 일지라도 구현해 보면 보지못했던 결점들을 발견하게 됩니다. 이것이 다양한 모바일 기기로 실제 사용자들에게 여러분의 서비스를 테스트를 해야하는 이유 입니다. 여러분은 실제 사용자들에게 일정한 테스크를 수행하게끔 해서 이를 어떻게 진행하는지 지켜봐야 합니다. 데이터를 바탕으로한 분석과 사용자 피드백을 반영하여 끊임없이 여러분들의 앱을 다듬어야 지속적으로 경험서비스 질을 올릴 수 있습니다.
결론
어떤 다른 디자인 요소일지라도, 모바일 디자인의 key는 이 9가지에서 출발합니다. 최상의 결과물을 위해서 여러분들의 서비스에 이러한 아이디어를 접목시켜보세요. 꼭 명심하야 할점은 디자인은 디자이너를 위한 것이 아닙니다.
—사용자들 위한 것입니다.
감사합니다.
Originally published at babich.biz
translated by Korean Elly
추신
안녕하세요 UX 업계에 종사하고 있는 Elly 입니다.(꾸벅 상냥모드)
제가 받아보는 외국 UX글중에 좋은 글들을 한글로 공유하고자합니다. (한글로 번역을 하면서 좀 더 매끄럽게 전달하기위해서 부분 표현 삭제와 어투등이 수정되었습니다.)
이는 1차적으로 제가 영어에 famillar 하기 위함이고
2차적으로 공유함으로써 여러분과 저가 좀더 풍부해지리라 믿기때문입니다.
원문 : https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6#.v7ewkv4d3
