(출처) 모바일 UI 디자인 시 고려해야 할 가이드라인 모음 (1/5)
출처 - 최철호: https://brunch.co.kr/@chulhochoiucj0/8
모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다.
우선 모바일은 데스크톱에 비해 화면의 크기가 작습니다. 데스크톱은 의자에 앉아서 실내에서 사용합니다. 큰 모니터에서 많은 정보를 탐색하고 업무를 봅니다. 포토샵 같은 몰입형 앱의 다양한 기능을 몇 시간 동안 집중해서 사용할 수 있습니다. 그에 비해 모바일은 야외에서 또는 이동 중에 사용합니다. - 횡단보도를 걷다 보면 스마트폰을 보고 걷는 사용자를 자주 볼 수 있습니다. - 사용자는 작은 화면의 스마트 폰으로 SNS를 사용하고 뉴스를 보거나 게임을 이동하면서 사용합니다. 스마트 폰은 대중교통을 이용할 때나 커피숍에서 제일 많이 사용됩니다. 모바일의 이동성은 데스크톱에 비해 집중할 수 있는 사용자 환경이 아닙니다.작은 화면으로 콘텐츠를 읽으면 인지 부하가 증가합니다. 모바일 기기에서 텍스트를 이해하는 것이 데스크톱에 비해 두 배가량 더 힘들어진다고 합니다.(제이콥 닐슨의 모바일 사용성 컨설팅 보고서) 또한 모바일은 키보드와 마우스같이 외부 입력도구가 없이 손가락으로 스크롤하고 선택하고 텍스트를 입력해야 합니다. 사용 맥락상 많은 차이점이 있음에도 데스트톱 화면을 크기만 줄여서 디자인된 모바일 웹과 앱에 아직도 많습니다. - 앱은 적고 모바일 웹이나 하이브리드 앱에 많습니다. 스마트폰의 다양한 사용 시나리오를 개발하고 이를 디자인 작업 과정에 그대로 반영해야 합니다.
햇빛이 비치는 야외에서 한 손으로 콘텐츠를 보는 - 뉴스를 보거나 쇼핑하는 - 사용자를 감안해서 디자인해야 합니다. 따라서 모바일 사용에는 필요하지 않거나 중요도가 떨어지는 기능은 숨기거나 제거하여 기능을 최소화합니다. 깊은 계층구조는 피하여 내비게이션 구조를 단순화 해야 합니다.
얼마 전까지 데스크톱용을 디자인한 후 모바일 용으로 디자인하는 것이 당연했습니다. - 최근에는 모바일 퍼스트가 대세라 모바일부터 디자인하긴 합니다 - 데스크톱과 모바일 두 기기를 고려해서 디자인하다 보면 모바일의 특성에 맞게 디자인하기 매우 어렵습니다. iOS와 안드로이드 가이드를 언어의 문제로 100% 이해 못하고 디자인하고는 했습니다. 다음 가이드는 윈도에서 데스크톱 웹디자인만 하다가 모바일 디자인을 하면서 겪은 저의 많은 시행착오에 대한 기록입니다. 전부 기억을 다 못할 것 같아 저도 작업할 때 참고용으로 브런치에 정리합니다. 많은 디자이너들이 저 같은 시행착오를 덜 겪었으면 좋겠습니다. 위 가이드는 바이블이 아닙니다. 절대적인 원칙은 없습니다. 따라서 무조건적으로 지킬 필요는 없습니다. 단지 모바일에서 최적의 UX 디자인을 하기 위해서 고려해야 할 사항이 어떤 것인지 참고만 하시고 디자인하시면 됩니다.
1차적으로 총 50가지를 5편에 걸쳐서 두서없이 정리했습니다.
1. 모바일에서는 모달 상태의 경고창 alert 상단 우측 “X”버튼은 노출하지 않습니다.
모바일에서 경고 Alert 같은 대화창에서 X버튼은 하단의 "예", "아니오" 버튼과 기능이 중복됩니다.
모바일에서 창 닫기 버튼은 우측 상단보다 하단이 사용성이 좋습니다. 위 예시 같이 닫기 버튼이 하단에 있으면 한 손으로 사용하는 경우 엄지 손가락 터치가 쉽습니다.
2. 풀프레임 대화창Dialog에 “X”버튼 (닫기 버튼)은 왼쪽 상단을 권장합니다.
풀프레임 대화창은 사용자가 특정 정보의 입력을 요청할 경우 사용됩니다. iOS와 안드로이드 OS 모두 내비게이션 바(안드로이드는 툴바) 왼쪽에는 햄버거 버튼이나 뒤로 가기 버튼같은 네비게이션 컨트롤이 위치해 있습니다. 모달상태의 대화창의 경우 상단바의 왼쪽에 닫기 버튼이 있고. 우측에는 확인이나 기타 부가적인 컨트롤을 위치시키는 것을 기본으로 합니다. 사용자 인터페이스 일관성 측면에 내비게이션 관련 컨트롤은 동일 위치에 둘 것을 권장합니다.
모바일에서 사용자의 정보 입력을 요구하는 대화창(dialog)에서는 우측 상단에“X”버튼(닫기 버튼)은 우측에 놓지 않고 좌측을 권장합니다.
대화창에서 “X”버튼은 좌측에 위치시키고 완료(저장) 버튼은 상단 우측에 놓는 것을 권장하는 것은 입력을 완료하고 키보드를 내리고 완료 버튼을 텝하는 단계를 축소하기 위함입니다.
3. 긍정적인 액션 버튼은 우측에 배치합니다.
모바일에서 다이얼로그 또는 경고 메시지창 alert 에서 긍정적인 액션은 화면의 오른쪽에 위치시켜는 것을 원칙으로 합니다.
부정적인 액션버튼(취소)는 항상 긍정적 인 액션버튼의 바로 왼쪽에 배치됩니다. 모바일에서 “확인”과 같은 긍정적인 액션버튼은 계속 진행 개념으로 우측에 배치해야 합니다.
다일로그에서 긍정을 의미하는 확인 버튼과 부정을 의미하는 취소 버튼의 위치를 오른쪽에 배치할 건지 왼쪽에 배치할 건지에 대해 많은 논란이 있었습니다.
모바일 환경에서 다이얼로그의 긍정적인 액션은 화면의 오른쪽에 위치 시키는 것을 원칙으로 합니다.구글의 가이드 라인은 “대체적으로, 부정적 행동은 왼쪽에 있는 반면 긍정적 행동은 오른쪽에 있다.”고 설명합니다. 즉 확인 버튼은 오른쪽에 취소 버튼은 왼쪽에 배치합니다. 데스크탑 윈도우에서는 확인 버튼이 왼쪽에 있고 맥 OS에서는 오른쪽에 있습니다. 안드로이드는 초기 버전에서는 확인 버튼이 왼쪽에 있었습니다. iiOS는 맥과 동일하게 확인 버튼을 오른쪽으로 통일시켰지만 안드로이드는 초기 파편화로 앱 마다 위치가 달랐습니다. 사용자들의 혼란이 많아지자 최근 안드로이드는 긍정적인 액션은 우측으로 통일시켰습니다. 두 모바일 OS 모두 확인 버튼을 우측으로 통일한 이유는 실생활에서 사람들이 생각하고 행동하고 있는 것을 은유하는 메타포를 적용한 것으로 이해할 수 있습니다. 집안의 불을 켜는 스위치는 오른쪽을 누르면 켜지고 왼쪽을 누르면 꺼집니다. 책을 읽을때 왼쪽에서 오른쪽으로 읽습니다. 기차 플렛폼에서 다음 행선지는 오른쪽에 이전 행선지는 왼쪽에 있습니다. 오른쪽은 다음 단계로 진행하는 개념도 같이 있습니다 - 다른 문화권도 있습니다만 예외 사항입니다. - 이처럼 실세계의 오른쪽 개념을 가상의 모바일환경에 메타포로 적용했음을 일수 있습니다. 사용자의 자연스러운 행동을 유발시키기 위해서는 긍정적이고 진행의 의미가 있는 [확인]버튼은 오른쪽에 있는 것이 맞을 듯 합니다.
4. 입력을 완료하지 않은 상태에서 완료 버튼(보내기/로그인)은 오류를 방지하기 위해서 비 활성화를 권장합니다.
사용자가 모바일 환경에서 작업을 수행할 때 성공하는 경우보다 실패하는 경우가 더 많다고 합니다. - 제이콥 닐슨의 모바일 사용성 컨설팅 보고서 - 사용자의 오류가능성을 최소화 해야 합니다. 사용자에게 발생할 수 있는 실수를 막고, 오류를 방지하기 위해 인터페이스에서 어느 정도의 제약을 통해 오류가 최대한 발생하지 않게 노력해야 합니다. 오류 메시지는 사용자 경험을 헤치는 주범입니다.
메일 내용작성을 완료하지 않은 상태에서는 Navigation Bars에 “보내기”버튼은 활성화 시키지 않아야 합니다.
메일 내용 작성 중에 Navigation Bars의 “보내기”버튼은 비활성화되어 있어야 합니다. 비활성화 상태에서는 사용자의 탭에도 반응을 하지 않습니다. 메일의 보내기 같은 실행 액션은 다이얼로그에서 모든 필수 필드를 입력할 때까지 비활성화하여 오류를 방지해야 합니다.
로그인 정보 입력을 완료하지 않은 상태에서는 “로그인” 버튼은 활성화 시키지 않는 것이 좋습니다.
5. 입력 내용에 맞는 키보드를 제공해야 합니다.
모바일 환경에서 키보드와 마우스 같은 외부 입력 정치가 없다는 것은 많은 사용성 문제를 발생시킵니다. 사용자가 정보를 입력할때 화면의 반을 가상의 키보드가 차지합니다. 회원가입같은 양식을 입력할때 키보드에 가려져 필드가 3개 이하로 노출됩니다. 그 이상의 필드를 입력할때 사용자는 화면을 스크롤하면서 입력해야 합니다. 필드가 많아질 수록 타이핑이 힘들고 오타가 날 확률이 높습니다. 숫자 입력란에 문자입력 키보드를 제공하는 것처럼 적절하지 못한 키보드 제공은 키보드를 변경하여 입력해야하는 번거로움이 있습니다. 이러한 상황이 반복된다면 사용자는 작업을 중단하거나 포기할 것입니다. 상황에 맞는 키보드를 앱/엡 전반에 걸쳐 일관되게 제공해야 합니다.
숫자입력필드에 일반키보드를 보여주어 유저는 숫자를 입력하기 위해 숫자키보드 변환버튼을 탭하는 불편함을 주기보다 숫자입력하는 필드에는 자동적으로 숫자 키보드를 제공해야 합니다.
검색필드에서는 일반 키보드가 아닌 “검색”버튼이 있는 검색용 키보드를 제공해야합니다.
이메일 입력 필드에는 일반 텍스트 키보드가 아니라 '@'가 있는 이메일 키보드를 제공해야합니다.
6. 검색 필드 우측에 검색 버튼은 추천하지 않습니다.
검색바에서도 검색필드 우측에 검색버튼은 ios와 안드로이드에서 추천하지 않습니다. 검색어 입력후 키보드의 검색 버튼을 탭하는 것이 사용성이 더 높습니다.
검색필드가 네비게이션바 하단에 위치해도 검색 필드 우측에 검색버튼은 추천하지 않습니다.
7. 스크롤을 고려하여 콘텐츠의 그리드를 화면 하단에 정확하게 정렬하지 마십시오.
사용자는 디자이너의 생각보다 스크롤을 많이 하지 않습니다. 특정한 요인이 없는 이상 스크롤 하지 않고 곧바로 검색같은 내비게이션 아이콘을 탭 합니다. 스크롤하면 더 많은 컨텐츠가 있음을 예상할 수 있는 시각적인 단서를 제공해야합니다. 화면의 그리드를 정확하게 정렬한다면 앱/웹의 컨텐츠를 더 볼 수 있다는 예상을 할 수 없어 스크롤할 요인이 적어집니다.
화면에 컨텐츠가 넘치게 정렬하여 사용자에게 스크롤이 가능하다는 시각적인 힌트를 제공합니다.
메인화면에서 사용자가 스크롤해서 더 많은 컨텐츠를 보도록 유도하기 위해 시각적인 힌트를 제공해야합니다.
화면에 상품리스트를 넘치게 정렬하여 사용자에게 더 많은 상품이 있다는 시각적인 힌트를 제공합니다.
8. 텝은 중첩되지 않아야 합니다.
텝은 2단으로 중첩되게 하기 보다는 항목을 줄이거나(최대5개) 좌우스크롤을 권장합니다.
9. 버튼 스타일은 중요도에 맞게 사용해야 합니다.
로그인이 화면의 가장 중요한 버튼입니다. [회원가입]은 로그인과 같은 형태로 디자인하면 안됩니다. 한 화면에서 다른 기능을 가진 버튼을 동일하게 디자인 하지 마십시요.
터치가 가능한 버튼과 링크에 사용된 컬러를 다른 정보에도 사용하지 마십시요.
10. 시각적 노이즈는 최소화해야 합니다.
사용자가 콘텐츠에 집중 할수 있도록 디자인해야합니다. 작은화면의 모바일을 디자인 할 때 모든 시각적인 요소는 목적과 의미를 가지고 있어야 합니다. 목적이 없는 디자인 요소는 화면을 산만하게 할 수 있습니다. 사용자가 목표로하는 작업 수행을 지원하고 콘텐츠에 집중하는데 도움이 되지 않는 시각적인 요소를 최소화해야 합니다. 색상의 수는 제한하고 사용자의 행동을 유도하는 요소 외에는 색상을 적용하지 않아야 합니다. 작은 화면안에 기능과 콘텐츠를 촘촘하게 채우기 보다는 모바일 사용환경을 고려하여 충분한 여백을 줍니다. 콘텐츠가 많다면 시각적인 계층구조를 명확히하고 연관 정보는 그루핑을 통해서 화면의 복잡함을 줄입니다.
충분한 여백을 활용하고 핵심 콘텐츠에 집중해야합니다.
컨텐츠 내 보더라인은 최소화해야 합니다. 기능적으로 불필요한 요소와 시각적으로 산만한 요소를 제거하십시요.
격자형 보더라인은 가급적 사용하지 않는걸 추천합니다.
그룹의 하위항목에서 그룹간 구분 라인(Divider)은 사용하지 않는게 좋습니다.
11. 내비게이션 바(앱바)에서 아이콘과 텍스트 레이블을 함께 사용하지 마십시오.
네비게이션바에 햄버거 아이콘 아래 [menu] 텍스트 레이블은 사용을 권장 하지 않습니다. 사용성이 문제라면 텍스트 레이블만 사용해야합니다. 아이콘만 사용할 것을 권정합니다.
Tab Bar 또한 아이콘과 레이블사용이 기본입니다. 아이콘만 사용할 경우는 iOS에서는 Tool Bar로 정의하고 있습니다.
로고와 장바구니 아이콘이 있는 바의 명칭을 iOS에서는 Navigation Bars로 안드로이드에서는 Appbar로 쓰고 있습니다. 이글에서는 Navigation Bars로 사용합니다.
12. 키보드를 통해 많은 정보를 입력해야 하는 화면에서 [완료]를 의미하는 버튼은 상단 내비게이션 바 우측을 권장합니다.
입력을 위해 키보드가 노출될 경우 하단에 [완료]를 의미하는 버튼은 키보드에 가려지게 됩니다. 키보드를 고려하여 내비게이션 바 우측에 [완료]를 버튼을 위치시키는 걸 권장합니다.
하단의 [취소],[작성하기] 버튼은 모바일에서는 우측같이 키보드가 노출되면 가려지게 됩니다. 사용자는 작성을 완료하기 위해서는 키보드를 닫아야 합니다.
모바일에서는 키보드를 고려해서 디자인 해야합니다.키보드를 닫지 않고도 완료할 수 있어야 합니다.
인스타그램은 최근 공유하기 버튼을 네비게이션바 상단으로 이동시켜 사용성을 개선했습니다.
(출처) 모바일 UI 디자인 시 고려해야 할 가이드라인 모음 (2/5)
(출처) 모바일 UI 디자인 시 고려해야 할 가이드라인 모음 (3/5)
'Backup > iOS' 카테고리의 다른 글
| (출처) 모바일 UI 디자인 시 고려해야 할 가이드라인 모음 (4/5) (0) | 2017.12.25 |
|---|---|
| (출처) 모바일 UI 디자인 시 고려해야 할 가이드라인 모음 (3/5) (0) | 2017.12.24 |
| (출처) 모바일 UI 디자인 시 고려해야 할 가이드라인 모음 (2/5) (0) | 2017.12.24 |
| RxSwift 장점 (2/2) (0) | 2017.12.15 |
| RxSwift 무엇일까요? (1/2) (0) | 2017.12.15 |